块编辑器中允许内部块的部分块，WordPress 5.0.2

Posted 2023-02-19

【中文标题】块编辑器中允许内部块的部分块，WordPress 5.0.2

【英文标题】：Section block with allow inner blocks in block editor, WordPress 5.0.2

【发布时间】：2019-05-23 15:54:44

【问题描述】：

我正在创建一个自定义块名称部分，希望通过添加具有不同 css 属性的设置使其更加强大。

但是像列块一样卡在这个自定义块内的允许块上。

这是我所做的：

// All blocks located here
if( !defined( 'WP_BLOCKS_URL' ) ) 
    define( 'WP_BLOCKS_URL', get_template_directory_uri() . '/blocks/' );


// Register Gutenberg blocks
add_action( 'init', 'wp_register_gutenberg_blocks_assets' );
function wp_register_gutenberg_blocks_assets() 

    if( ! function_exists( 'register_block_type' ) ) 
        // Gutenberg is not active.
        return;
    

    // Register 
    register_block_type( 'custom/section', array(
        'editor_script' => 'wp-section-block-script',
    ) );


// Manage editor scripts
add_action( 'enqueue_block_editor_assets', 'wp_custom_gutenberg_scripts' );
function wp_custom_gutenberg_scripts() 

    if( ! function_exists( 'register_block_type' ) ) 
        // Gutenberg is not active.
        return;
    

    // Section block script
    wp_register_script(
        'wp-section-block-script', // Handle.
        WP_BLOCKS_URL . 'section/block.js',
        array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' ), // Dependencies, defined above.
        WP_BLOCKS_URL . 'section/block.js',
        true
    );



// block.js
var el = wp.element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var InnerBlocks = wp.editor.InnerBlocks;
var BlockControls = wp.editor.BlockControls;

var ALLOWED_BLOCKS = ['core/paragraph'];

registerBlockType( 'custom/section', 
    title: 'Custom Section',
    description: '',
    icon: 'ANY-ICON',
    category: 'layout',
    edit: function() 

        return [
            el(BlockControls,  key: 'controls' ,
                el('div',  className: 'custom-sec-inner' ,
                    el(InnerBlocks, 
                        allowedBlocks: ALLOWED_BLOCKS
                     )
                )
            ),
        ];
    ,
    save: function(props) 
        return [
            el('div',  className: 'custom-sec-block' ,
                el('div',  className: 'custom-sec-inner' ,
                    el( InnerBlocks.Content )
                )
            ),
        ];
    
 );

它不起作用，事件没有给出任何错误，甚至没有元素被添加到古腾堡构建器。

请提供适当的解决方案。

【问题讨论】：

由于您的元素没有添加到 Gutenberg builder，意味着您的资产加载有问题。

@AshiquzzamanKiron，感谢您的回复。它显示在 Gutenberg builder 中，但是当我们单击它时它并没有添加到构建器中。如果我缺少任何人而不是建议，我会检查那里加载的所有脚本。

如果没有将块添加到古腾堡编辑器，您似乎遇到了编译问题。

【参考方案1】：

您的代码也不适用于我，下面是一个工作代码示例以及注册块的功能。你的代码出错的原因之一是使用了BlockControls，但是块注册功能也有错误。

function.php 开发后将$version改成固定数字（用于缓存脚本）

//Gutenberg block script rout
if( !defined( 'WP_BLOCKS_URL' ) ) 
    define( 'WP_BLOCKS_URL', get_template_directory_uri() . '/blocks/' );


//Register Gutenberg block
function custom_gutenberg_block() 

    if( !function_exists('register_block_type') ) return; //Gutenberg is not active

    //Script version
    $version = time(); //Сhange to a fixed number after development

    //Section block script
    wp_register_script(
        'wp-section-block-script', WP_BLOCKS_URL . 'section/block.js', array( 'wp-blocks', 'wp-element', 'wp-editor' ), $version
    );

    //Register block
    register_block_type( 'custom/section', array(
        'editor_script' => 'wp-section-block-script',
    ));

add_action( 'init', 'custom_gutenberg_block' );

/blocks/section/block.js 需要将 props.className 添加到已保存函数的包装器中以呈现已保存的内容

//block.js
(function( editor, element ) 

const registerBlockType = wp.blocks.registerBlockType;
const el = element.createElement;
const InnerBlocks = editor.InnerBlocks;
//const BlockControls = editor.BlockControls; //Remove or change this

const allowedBlocks = [ 'core/paragraph' ];
const icon = el('svg',  width: 24, height: 24 , el('path', d: "M 0.71578,2 C 0.32064,2 0,2.3157307 0,2.7060291 V 21.294175 C 0,21.683751 0.32064,22 0.71578,22 H 23.28422 C 23.67936,21.999999 24,21.68375 24,21.294174 V 5.9812162 2.7060291 C 24,2.3157307 23.67936,2 23.28422,2 Z M 1.43136,3.411854 H 22.56864 V 5.9812162 H 1.43136 Z m 15.96822,0.4609128 c -0.46106,0 -0.83495,0.3687886 -0.83495,0.8235651 0,0.4549561 0.37389,0.8237674 0.83495,0.8237674 0.46124,0 0.83494,-0.3688113 0.83494,-0.8237674 0,-0.4547765 -0.3737,-0.8235651 -0.83494,-0.8235651 z m 2.78339,0 c -0.46124,0 -0.83515,0.3687886 -0.83515,0.8235651 0,0.4549561 0.37391,0.8237674 0.83515,0.8237674 0.46106,0 0.83494,-0.3688113 0.83494,-0.8237674 0,-0.4547765 -0.37388,-0.8235651 -0.83494,-0.8235651 z M 3.65005,3.990507 c -0.39514,0 -0.71557,0.316068 -0.71557,0.7058249 0,0.3899364 0.32043,0.7060281 0.71557,0.7060281 h 8.92617 c 0.39533,0 0.71579,-0.3160917 0.71579,-0.7060281 0,-0.3897569 -0.32046,-0.7058249 -0.71579,-0.7058249 z M 1.43136,7.3930022 H 22.56864 V 20.588214 H 1.43136 Z m 7.89453,1.5110662 c -0.16452,0 -0.32898,0.05577 -0.46246,0.1672098 -0.53833,0.4497184 -4.5418,3.7936988 -5.09862,4.2587688 -0.30157,0.251951 -0.33909,0.697517 -0.0837,0.994982 0.25543,0.297464 0.70697,0.33447 1.00873,0.08252 l 0.0299,-0.02491 v 3.282584 H 3.93296 c -0.39533,0 -0.71579,0.316024 -0.71579,0.705961 0,0.389937 0.32046,0.706028 0.71579,0.706028 h 16.13408 c 0.39533,0 0.71579,-0.316091 0.71579,-0.706028 0,-0.389937 -0.32046,-0.705961 -0.71579,-0.705961 h -1.57797 v -1.656765 h 1.04279 c 0.4801,0 0.82469,-0.458384 0.68462,-0.911716 L 18.45791,9.4042733 c -0.20526,-0.6650049 -1.16379,-0.6650049 -1.36924,0 l -1.75836,5.6924727 c -0.14007,0.453151 0.20415,0.911716 0.68462,0.911716 h 1.04278 v 1.656764 h -3.1256 v -3.282584 l 0.0299,0.02491 c 0.30176,0.251951 0.7533,0.214945 1.00873,-0.08252 0.25543,-0.297465 0.21792,-0.743031 -0.0837,-0.994982 C 14.37068,12.898749 10.59208,9.7426047 9.78843,9.0712782 9.65494,8.9598418 9.49041,8.9040684 9.32589,8.9040684 Z m 0,1.6310446 3.17472,2.651678 v 4.478436 h -0.99242 v -3.38553 c 0,-0.389937 -0.32043,-0.706028 -0.71558,-0.706028 H 7.85924 c -0.39533,0 -0.71572,0.316091 -0.71572,0.706028 v 3.38553 H 6.15103 v -4.478436 h 2.1e-4 z m 8.4474,1.497088 0.79229,2.564476 h -1.58437 z m -9.19848,2.953457 h 1.50202 v 2.679569 H 8.57481 Z") );

registerBlockType( 'custom/section', 
    title: 'Custom Section',
    description: 'Custom Section',
    icon: icon,
    category: 'layout',
    keywords: ['custom Section'],

    //Edit
    edit: function( props ) 
        return (
            //el(BlockControls,  key: 'controls' , //Need to remove or change this
                el('div',  className: props.className ,
                    el( InnerBlocks,  allowedBlocks: allowedBlocks  )
                )
            //),
        );
    ,

    //Save
    save: function( props ) 
        return (
            el('div',  className: props.className , //Need add props.className to render saved content
                el('div',  className: 'custom-sec-inner' ,
                    el( InnerBlocks.Content, null )
                )
            )
        );
    
);

)(
    window.wp.editor,
    window.wp.element
);

【讨论】：

仍然没有完成，但它有很大帮助。谢谢。