Block validation: Expected token of type `StartTag` but saw EndTag..
-
I am using a block filter to add options such as loop, autoplay and video cover to the
core/cover
block. I use Bud.js filters and added cover.filter.js with// Import necessary functions from @wordpress/hooks
import { addFilter } from '@wordpress/hooks';
import { createHigherOrderComponent } from '@wordpress/compose';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import React from 'react'; // Ensure React is imported for JSX and cloneElement
/**
* @see {@link https://developer.www.dunereview.com/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
*/
export const hook = 'blocks.registerBlockType';
/**
* Filter handle
*/
export const name = 'sage/cover';
/**
* Filter callback
*
* @param {Object} settings Block settings.
* @param {string} name
* @returns modified settings
*/
export function callback(settings, name) {
if (name !== 'core/cover') return settings;
return {
...settings,
attributes: {
...settings.attributes,
loopVideo: {
type: 'boolean',
default: false,
},
autoplayVideo: {
type: 'boolean',
default: false,
},
showPlayButton: {
type: 'boolean',
default: true,
},
coverImage: {
type: 'string',
default: '',
},
},
};
}
/**
* Additional cover block modifications
*/
export const editHook = 'editor.BlockEdit';
export const editCallback = createHigherOrderComponent((BlockEdit) => {
return (props) => {
const { attributes, setAttributes, name } = props;
if (name !== 'core/cover') {
return <BlockEdit {...props} />;
}
const { loopVideo, autoplayVideo, showPlayButton, coverImage } = attributes;
return (
<Fragment>
<BlockEdit {...props} />
<InspectorControls>
<PanelBody title="Video Options" initialOpen={true}>
<ToggleControl
label="Loop Video"
checked={loopVideo}
onChange={(value) => setAttributes({ loopVideo: value })}
/>
<ToggleControl
label="Autoplay Video"
checked={autoplayVideo}
onChange={(value) => setAttributes({ autoplayVideo: value })}
/>
<ToggleControl
label="Show Play Button"
checked={showPlayButton}
onChange={(value) => setAttributes({ showPlayButton: value })}
/>
<TextControl
label="Cover Image URL"
value={coverImage}
onChange={(value) => setAttributes({ coverImage: value })}
help="This image will be used as the cover image for the video."
/>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
}, 'withCoverControls');
/**
* Save element modification for the cover block
*/
export const saveHook = 'blocks.getSaveElement';
export const saveCallback = (element, blockType, attributes) => {
if (blockType.name !== 'core/cover') return element;
const { loopVideo, autoplayVideo, showPlayButton, coverImage } = attributes;
const children = Array.isArray(element.props.children) ? element.props.children : [element.props.children];
const modifiedChildren = children.map((child) => {
if (child && child.type === 'video') {
return React.cloneElement(child, {
loop: loopVideo,
autoPlay: autoplayVideo,
poster: coverImage || child.props.poster,
});
}
return child;
});
return (
<div {...element.props}>
{modifiedChildren}
{showPlayButton && (
<div className="wp-block-cover__play-button-overlay" style={{ position: 'absolute', zIndex: 10 }}>
<button className="wp-block-cover__play-button" aria-label="Play Video" />
</div>
)}
</div>
);
};
// Register the filters
addFilter(hook, name, callback); // Adds custom attributes to the block
addFilter(editHook, name, editCallback); // Adds the inspector controls in the editor
addFilter(saveHook, name, saveCallback); // Modifies the save elementBut when I use a pattern
<!-- wp:cover {"url":"https://via.placeholder.com/1200x600","id":293,"dimRatio":0,"overlayColor":"black","isUserOverlayColor":true,"metadata":{"categories":["fandb"],"patternName":"cafejp/drinks","name":"Drinks Menu"},"align":"full","className":"cafejp-drinks-menu-pattern"} -->
<div class="wp-block-cover alignfull cafejp-drinks-menu-pattern"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-293" alt="" src="https://via.placeholder.com/1200x600" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"6xl"} -->
<h2 class="wp-block-heading has-white-color has-text-color has-link-color has-6-xl-font-size">Drinks</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:group {"align":"full","className":"cafejp-first-main-row","layout":{"type":"flex","orientation":"horizontal"}} -->
<div class="wp-block-group alignfull cafejp-first-main-row"><!-- wp:group {"className":"cafejp-koffie-fris","style":{"color":{"background":"#abd8bf"},"spacing":{"padding":{"top":"0.5rem","right":"0.5rem","bottom":"0.5rem","left":"0.5rem"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group cafejp-koffie-fris has-background" style="background-color:#abd8bf;padding-top:0.5rem;padding-right:0.5rem;padding-bottom:0.5rem;padding-left:0.5rem"><!-- wp:heading {"level":3,"className":"first-block-header","style":{"typography":{"fontWeight":"500","fontSize":"28px"},"color":{"text":"#014521"}}} -->
<h3 class="wp-block-heading first-block-header has-text-color" style="color:#014521;font-size:28px;font-weight:500">Koffie & Thee</h3>
<!-- /wp:heading -->
....
<!-- wp:paragraph {"className":"first-group-paragraph","style":{"typography":{"fontFamily":"'Asap Condensed', sans-serif","fontWeight":"500","fontSize":"15px"},"color":{"text":"#dcb171"}}} -->
<p class="first-group-paragraph has-text-color" style="color:#dcb171;font-family:'Asap Condensed', sans-serif;font-size:15px;font-weight:500">|</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"second-group-paragraph","style":{"typography":{"fontFamily":"'Asap Condensed', sans-serif","fontWeight":"500","fontSize":"15px"},"color":{"text":"#014521"}}} -->
<p class="second-group-paragraph has-text-color" style="color:#014521;font-family:'Asap Condensed', sans-serif;font-size:15px;font-weight:500">4.5</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->
with a cover and other elements I get:Block validation: Expected token of type
StartTag
({type: 'StartTag', tagName: 'div', attributes: Array(2), selfClosing: false}), instead sawEndTag
({type: 'EndTag', tagName: 'div'}).
(anonymous) @ blocks.min.js?ver=0d232d232463200f5cfd:19
(anonymous) @ blocks.min.js?ver=0d232d232463200f5cfd:19
ro @ blocks.min.js?ver=0d232d232463200f5cfd:19
(anonymous) @ blocks.min.js?ver=0d232d232463200f5cfd:19
no @ blocks.min.js?ver=0d232d232463200f5cfd:19
(anonymous) @ block-editor.min.js?ver=f989eae66982c6c90d6e:21
....
Hl @ react-dom.min.js?ver=18.3.1:2
(anonymous) @ react-dom.min.js?ver=18.3.1:2Understand this warning
blocks.min.js?ver=0d232d232463200f5cfd:19 Block validation: Block validation failed forcore/cover
({name: 'core/cover', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…},?…}).
Content generated bysave
function:
<div class="wp-block-cover alignfull cafejp-drinks-menu-pattern"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-293" alt="" src="https://via.placeholder.com/1200x600" data-object-fit="cover"/><div class="wp-block-cover__inner-container"></div><div class="wp-block-cover__play-button-overlay" style="position:absolute;z-index:10"><button class="wp-block-cover__play-button" aria-label="Play Video"></button></div></div>
Content retrieved from post body:
<div class="wp-block-cover alignfull cafejp-drinks-menu-pattern"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-293" alt="" src="https://via.placeholder.com/1200x600" data-object-fit="cover"/><div class="wp-block-cover__inner-container"></div></div>Without the added filter I do not seem to get this . But I am baffled by this. Perhaps a conflict in pattern loading and the filter filtering.. some kind of race issue?
Viewing 8 replies - 1 through 8 (of 8 total)
Viewing 8 replies - 1 through 8 (of 8 total)
- You must be logged in to reply to this topic.