1

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

1 Answer 1

1

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: props => {
    return <InnerBlocks.Content />
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.