0

I am very new to Wordpress and I am very new to Gutenberg Blocks. I have created some simple blocks using the npm Gutenburg generator. In my package.json file I have created the following attributes in my package.json file

"attributes": {
    "quote": {
      "type": "string"
    },
    "source": {
      "type": "string"
    }
  }

In my edit.js file I have the following block stucture

export default function Edit(props) {
    return (
            <div { ...useBlockProps() } className="testimonial">
                <div className="testimonial__wrapper">
                    <div className="testimonial__header">
                        <i className="testimonial__quote__left"></i>
                            <RichText
                                tagName="blockquote"
                                value={props.attributes.quote}
                                onChange={(content) => props.setAttributes({ quote: content })}
                                placeholder='Enter Quote'
                                keepPlaceholderOnFocus={true}
                            />
                        <i className="testimonial__quote__right"></i>
                            <RichText
                                tagName="figcaption"
                                value={props.attributes.source}
                                onChange={(content) => props.setAttributes({source: content })}
                                placeholder='Enter Quotee / Source'
                                keepPlaceholderOnFocus={true}
                            />
                    </div>
                </div>
            </div>
    );
}

and this is my save function in the save.js file

export default function save(props) {
    return (
        <div className="testimonial">
            <div className="testimonial__wrapper">
                <div className="testimonial__header">
                    <i className="testimonial__quote__left"></i>
                    <RichText.Content tagName="blockquote" value={ props.attributes.quote } />
                    <i className="testimonial__quote__right"></i>
                    <RichText.Content tagName="figcaption" value={ props.attributes.source } />
                </div>
            </div>
        </div>
    );
}

When I add my custom block into the editor it works great. Should I update and then view my page that includes the block it works! However should I refresh or reload the editor that contains my block I get the following error:

Block validation: Block validation failed for `create-block/einzweidinge-testimonial` ({name: 'create-block/einzweidinge-testimonial', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<div class="testimonial"><div class="testimonial__wrapper"><div class="testimonial__header"><i class="testimonial__quote__left"></i><blockquote></blockquote><i class="testimonial__quote__right"></i><figcaption></figcaption></div></div></div>

Content retrieved from post body:

<div class="testimonial"><div class="testimonial__wrapper"><div class="testimonial__header"><i class="testimonial__quote__left"></i><blockquote>ffff</blockquote><i class="testimonial__quote__right"></i><figcaption>fffff</figcaption></div></div></div>

I have noticed that should I add a block and not input any data to the RichText components the validation error is not raised! I am not sure if this helps solve the issue but I also see the following warning in the console.

blocks.min.js?ver=69022aed79bfd45b3b1d:10 Block validation: Expected token of type `EndTag` ({type: 'EndTag', tagName: 'blockquote'}), instead saw `Chars` ({type: 'Chars', chars: 'ffff'}).

I am stumped here and unsure what I am doing wrong? I've been looking into this for a couple of hours! Any help or guidance would be appreciated.

Improve this question
6
  • 2
    This may not be the root cause, but you all need to call the useBlockProps.save() on the outer element in your save.js file.
    – Welcher
    Mar 20 at 19:04
  • Thanks but that doesn't solve this issue... thanks anyway
    – Mike Sav
    Mar 20 at 19:15
  • 1
    when you fix this, you'll immediatley run into the useBlockProps problem Welcher mentioned, so it is a problem and it does need to be fixed. Welcher is saying that you have more problems than you thought and offered a solution to one you didn't know you had
    – Tom J Nowell ♦
    Mar 20 at 19:49
  • 1
    also you mentioned declaring attributes in your package.json file, but package.json has nothing to do with block definitions, is this a mistake? I notice that you did not share your block registration and settings, only small snippets so it's difficult to tell, but it heavily implies your block is trying to use attributes that don't exist because you didn't register it properly
    – Tom J Nowell ♦
    Mar 20 at 19:51
  • I ran npx @wordpress/create-block to create the block, I think I see my problem... I have been putting / declaring the attributes in the package.json and not the block.json file
    – Mike Sav
    Mar 20 at 19:57

1 Answer 1

Reset to default
0

I finally worked out the issue, the problem was that I was defining my "attributes" object in the package.json file and not the block.json file! Bug thanks to @Tom J Nowell (https://wordpress.stackexchange.com/users/736/tom-j-nowell) for helping me realise!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.