RichText Component: Block validation error

  • aboutsam

    (@aboutsam)


    1 year, 9 months ago

    Hey guys, in one of my custom blocks i use the RichText component.

    I followed the guidelines here in these article: https://developer.ww.wp.xz.cn/block-editor/reference-guides/richtext/#example

    Unfortunately, i receive in my console.log an Block validation error.

    Content generated by save function:

    <h2 class="wp-block-studio-wai-heading studio-wai-heading has-object-object-font-size">Block 1 INNOVATIVE BRAND STRATEGY &amp; SUCCESS</h2>

    Content retrieved from post body:

    <h2 class="wp-block-studio-wai-heading studio-wai-heading">Block 1 INNOVATIVE BRAND STRATEGY &amp; SUCCESS</h2>

    The only difference i mentioned is the classname “has-object-object-font-size” which is added by save.js (see code above).

    save.js:

    const save = function ({ attributes }) {
    	const { content, heading } = attributes;
    	const blockProps = useBlockProps.save({
    		className: classnames('studio-wai-heading'),
    	});

    	return <RichText.Content {...blockProps} tagName={heading} value={content} />;
    };

    edit.js:

    return (
    	<RichText
    		{...blockProps}
    		tagName={heading}
    		value={attributes.content}
    		allowedFormats={['core/bold', 'core/italic']}
    		onChange={(content) => setAttributes({ content })}
    		placeholder={__('Heading...')}
    	/>
    );

    attributes.js

    content: {
    		type: 'string',
    		source: 'html',
    		selector: 'h1,h2,h3,h4,h5,h6',
    	},

    How i can solve the Block validation error?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator threadi

    (@threadi)

    1 year, 9 months ago

    I had a problem like this some time ago. The reason is that the output of the block differs from the expected format when loading. As you have already seen, the difference is the class.

    But I don’t see that this is added in save.js in your case? I also don’t recognize the class. Through a search I found this topic here: https://ww.wp.xz.cn/support/topic/editors-kit-adding-incorrect-classes-to-blocks/ – have you activated the plugin mentioned? If so, deactivate all plugins except the one you are currently developing with.

    Thread Starter aboutsam

    (@aboutsam)

    1 year, 9 months ago

    That’s right! I do not add the class in save.js. I have a value in attributes which was called “fontSize”

    fontSize: {
    	type: Object,
    	...
    },

    I’m not 100% sure if this is the right solution but when i rename fontSize to e.g. testFontSize the problem no longer occurs. I think because fontSize is already use by global block settings.

    My Solution: rename fontSize to myCustomFontsize

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘RichText Component: Block validation error’ is closed to new replies.