【发布时间】：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 中，但是当我们单击它时它并没有添加到构建器中。如果我缺少任何人而不是建议，我会检查那里加载的所有脚本。
-
如果没有将块添加到古腾堡编辑器，您似乎遇到了编译问题。
标签： wordpress wordpress-gutenberg