Content Feedback - Introduction to Block Development Tutorial - bug in tutorial code

[aadilayub]

Overview

• Content title: Add 'Block Supports' Controls
• Content URL: https://learn.wordpress.org/lesson/add-block-supports-controls/
• Are you reporting an error (such as outdated information), or providing improvement ideas?: I'm reporting an error

Feedback Details

Hi! So I'm going through the "Introduction to Block Development" course on learn.wordpress.org. It's been very easy to follow so far - however, when I got to the 'Block Supports' tutorial, I noticed none color,padding, background color customizations were showing up in the editor.

Here's how the block looks on the front-end:

versus the editor:

Note how the block has padding and colors applied in the settings panel.

I saw this error in the console, perhaps it's related?

Warning: Invalid value for prop `save` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior 
div
RichTextWrapper@http://localhost:8888/wp-includes/js/dist/block-editor.js?ver=fba4bebd3a5647a9bbb1:55511:25
RichTextSwitcher@http://localhost:8888/wp-includes/js/dist/block-editor.js?ver=fba4bebd3a5647a9bbb1:55763:15

I copy-pasted the exact code from the tutorial in save.js, just to be sure. My local environment is set up using the create-block and wp-env tools.

Next steps for Training Team member

Please follow the team handbook "Validating Content Feedback issues" to validate this feedback.

[aadilayub]

Sorry, closing. Turns out this error was happening because of a trival typo in edit.js 🤦‍

I was using

    return (
        <RichText
            { ...useBlockProps }
            tagName='div'
            onChange={ onChangeContent }
            value={ attributes.content }
            placeholder='Enter some text here...'
        />
    );

instead of

    return (
        <RichText
            { ...useBlockProps() }
            tagName='div'
            onChange={ onChangeContent }
            value={ attributes.content }
            placeholder='Enter some text here...'
        />
    );