WordPress custom dynamic block with nested inner block error

Issue

There’s probably just some little hickup I couldn’t find out, but it just won’t work.
I’m trying to create in WordPress a custom dynamic block with nested inner block. Right now, it seems to work in the Gutenberg edit section, but no further. When I click Update page and refresh, it’s not saved.
I really don’t know anymore, any help would truly be appreciated.

Just download the plugin from wetransfer.com here: wetransfer.link and drop it unzipped into wordpress/wp-content/plugins.
Or you can create theme like this: In the WordPress plugins folder, create a folder named "block_dynamic_newtype" and add these files:

block.json:

  {
      "apiVersion": 2,
      "title": "Block - dynamic - newtype",
      "name": "blockexample/block-dynamic-newtype",
      "category": "custom-fno-category",
      "icon": "star-filled",
      "editorScript": "file:./block.js"
    }

block.asset.php:

<?php return array('dependencies' => array('wp-blocks', 'wp-element', 'wp-i18n' ), 'version' => 'a35cc1c098b69994c9c6d6dc1416bb90');

index.php:

<?php
/**
 * Plugin Name: Block - dynamic - newtype
 */
 
function block_dynamic_newtype_register_render_callback( $attr, $content ) {
  //var_dump($attr);
  //var_dump($content);
  return '<div style="border: 1px solid black;">This is content of dynamic block: '.$attr['content'].'
      place for other blocks:<br>
      <div>'.$content.'</div>
    </div>';
}
 
function block_dynamic_newtype_register() {
  // automatically load dependencies and version
  $asset_file = include( plugin_dir_path( __FILE__ ) . 'block.asset.php');
 
  wp_register_script(
    'block-dynamic-newtype',
    plugins_url( 'block.js', __FILE__ ),
    $asset_file['dependencies'],
    $asset_file['version']
  );
 
  register_block_type( 'blockexample/block-dynamic-newtype', array(
    'api_version' => 2,
    'editor_script' => 'block-dynamic-newtype',
    'render_callback' => 'block_dynamic_newtype_register_render_callback'
  ));
 
}
add_action( 'init', 'block_dynamic_newtype_register' );
?>

block.js:

console.log('block dynamic newtype loaded');
( function ( blocks, blockEditor, data, element ) {
  var el = element.createElement;
  var RichText = blockEditor.RichText;
  var InnerBlocks = blockEditor.InnerBlocks;
  var useBlockProps = blockEditor.useBlockProps;

  blocks.registerBlockType( 'blockexample/block-dynamic-newtype', {
    apiVersion: 2,
    title: 'Block - dynamic - newtype',
    icon: 'star-filled',
    category: 'custom-fno-category',
    attributes: {
      content: {
        type: 'string'
      },
    },
    edit: function (props) {
      var blockProps = useBlockProps();
      var content = props.attributes.content;
      function onChangeContent( newContent ) {
        props.setAttributes( { content: newContent } );
      }

      //return el( 'div', blockProps, el( InnerBlocks ) );
      return el(
        "div",
        blockProps,
        el("div", {class: 'fno_block_editor'},
          el("h3", null, "Blok - dynamick√Ĺ - newtype"),
          el("div", {class: 'block_space'},
            el( InnerBlocks )
          ),
        )
      );
      /*return el(
        RichText,
        Object.assign( blockProps, {
          tagName: 'div',
          class: 'testclas',
          onChange: onChangeContent,
          value: content,
        }),
      );*/
    },
    save: function( props ) {
      return (InnerBlocks.Content);
    },
  } );
} )( window.wp.blocks, window.wp.blockEditor, window.wp.data, window.wp.element );

WordPress version is 6

Solution

In block.js the save function needs to look like this (even if it is dynamic block, so it’s not supposed to have any save function):

save: function( props ) {
 var blockProps = useBlockProps.save();
 return el('div', blockProps, el(InnerBlocks.Content));
}

Answered By – maeros

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published