带有嵌套内部块错误的 Wordpress 自定义动态块

Question

可能只是有些小问题我没找到，但它就是行不通。我正在尝试在 Wordpress 中创建一个带有嵌套内部块的自定义动态块。现在，它似乎在古腾堡编辑部分工作，但没有进一步。当我单击更新页面并刷新时，它没有保存。我真的不知道了，任何帮助将不胜感激。

只需从 wetransfer.com 此处下载插件：wetransfer.link 并将其解压缩到 wordpress/wp-content/plugins。或者您可以这样创建主题：在 Wordpress 插件文件夹中，创建一个名为“block_dynamic_newtype”的文件夹并添加这些文件：

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 版本为 6

Answer 1

在 block.js 中 save 函数需要看起来像这样（即使它是动态块，所以它不是应该有任何保存功能）：

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

带有嵌套内部块错误的 Wordpress 自定义动态块

Wordpress custom dynamic block with nested inner block error

javascript

php

wordpress

wordpress-gutenberg

project-gutenberg