I am creating a dynamic Gutenburg block.

In it there is a rich text field as described by the docs.

I see the value change on the page when I’m changing the value of the rich text field. Also the “Save” button becomes available and when I click it everything seems to be fine. In the console there are no errors.

But when I refresh the WordPress Admin page, the value is not visible anymore and the block is reset to it’s original placeholder value for the rich text field.

Files

Given I have the following block.js:

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "namespace/hero",
    "version": "0.1.0",
    "title": "Hero",
    "category": "media",
    "icon": "cover-image",
    "description": "Example block scaffolded with Create Block tool.",
    "example": {},
    "supports": {
        "html": false
    },
    "textdomain": "hero",
    "editorScript": "file:./index.js",
    "viewScript": "file:./view.js",
    "render": "file:./render.php",
    "attributes": {
        "content": {
            "type": "string",
            "source": "html",
            "selector": "h2"
        }
    }
}

And this index.js:

import { registerBlockType } from '@wordpress/blocks';
import Edit from './edit';
import metadata from './block.json';

registerBlockType( metadata.name, {
    edit: Edit,
    save: () => null, // because it's a dynamic block this isn't necessary?
});

Then edit.js:

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {

    const blockProps = useBlockProps({
        className: `h-96 bg-amber-200 flex p-20`,
    });

    return (
        <div { ...blockProps }>
            <RichText
                tagName="h2"
                className="mt-10"
                value={ attributes.content }
                allowedFormats={[ 'core/bold', 'core/italic' ]}
                onChange={( newContent ) => {
                    setAttributes({ content: newContent });
                }}
                placeholder="Type here..."
            />
        </div>
    );
}

And I register the custom block as follows:

<?php
function create_custom_blocks_init(): void {
    $build_dir = dirname(__DIR__) . '/build';
    $directories = glob($build_dir . '/*' , GLOB_ONLYDIR);

    foreach ($directories as $directory) {
        register_block_type($directory);
    }
}
add_action( 'init', 'create_custom_blocks_init' );

Additional info

I do see a POST request happening to http://localhost:8000/index.php?rest_route=/wp/v2/pages/11&_locale=user.

It has the following request body:

{
   "id":11,
   "content":"<!-- wp:namespace/hero /-->"
}

and the response:

{
   "id":11,
   "date":"2024-08-11T20:14:48",
   "date_gmt":"2024-08-11T20:14:48",
   "guid":{
      "rendered":"http://localhost:8000/?page_id=11",
      "raw":"http://localhost:8000/?page_id=11"
   },
   "modified":"2024-08-12T15:25:13",
   "modified_gmt":"2024-08-12T15:25:13",
   "password":"",
   "slug":"home",
   "status":"publish",
   "type":"page",
   "link":"http://localhost:8000/",
   "title":{
      "raw":"Home",
      "rendered":"Home"
   },
   "content":{
      "raw":"<!-- wp:namespace/hero /-->",
      "rendered":"<p class="h-screen bg-amber-200 flex p-20 wp-block-namespace-hero">ntHero u2013 hello from a dynamic block!</p>n",
      "protected":false,
      "block_version":1
   },
   "excerpt":{
      "raw":"",
      "rendered":"",
      "protected":false
   },
   "author":1,
   "featured_media":0,
   "parent":0,
   "menu_order":0,
   "comment_status":"closed",
   "ping_status":"closed",
   "template":"templates/home.php",
   "meta":{
      "footnotes":""
   },
   "permalink_template":"http://localhost:8000/",
   "generated_slug":"home",
   "class_list":[
      "post-11",
      "page",
      "type-page",
      "status-publish",
      "hentry"
   ],
   "_links":{
      "self":[
         {
            "href":"http://localhost:8000/index.php?rest_route=/wp/v2/pages/11"
         }
      ],
      "collection":[
         {
            "href":"http://localhost:8000/index.php?rest_route=/wp/v2/pages"
         }
      ],
      "about":[
         {
            "href":"http://localhost:8000/index.php?rest_route=/wp/v2/types/page"
         }
      ],
      "author":[
         {
            "embeddable":true,
            "href":"http://localhost:8000/index.php?rest_route=/wp/v2/users/1"
         }
      ],
      "replies":[
         {
            "embeddable":true,
            "href":"http://localhost:8000/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"
         }
      ],
      "version-history":[
         {
            "count":30,
            "href":"http://localhost:8000/index.php?rest_route=/wp/v2/pages/11/revisions"
         }
      ],
      "predecessor-version":[
         {
            "id":57,
            "href":"http://localhost:8000/index.php?rest_route=/wp/v2/pages/11/revisions/57"
         }
      ],
      "wp:attachment":[
         {
            "href":"http://localhost:8000/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"
         }
      ],
      "wp:action-publish":[
         {
            "href":"http://localhost:8000/index.php?rest_route=/wp/v2/pages/11"
         }
      ],
      "wp:action-unfiltered-html":[
         {
            "href":"http://localhost:8000/index.php?rest_route=/wp/v2/pages/11"
         }
      ],
      "wp:action-assign-author":[
         {
            "href":"http://localhost:8000/index.php?rest_route=/wp/v2/pages/11"
         }
      ],
      "curies":[
         {
            "name":"wp",
            "href":"https://api.w.org/{rel}",
            "templated":true
         }
      ]
   }
}