Wordpress，Gutenberg 模板如何在块之间添加标签？答案

【问题标题】：Wordpress, Gutenberg Templates how to add Lables between blocks?Wordpress，Gutenberg 模板如何在块之间添加标签？
【发布时间】：2021-07-07 11:25:41
【问题描述】：

我正在为特定自定义帖子类型的编辑器视图强制使用块模板，基本上使用此示例作为指南：

https://developer.wordpress.org/block-editor/reference-guides/block-api/block-templates/#locking

function myplugin_register_template() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = array(
        array( 'core/paragraph', array(
            'placeholder' => 'Add Description...',
        ) ),
    );
    $post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_template' );

我能够设置多个输入字段并更改它们的默认属性，例如占位符或内容。

我希望能够在输入字段上方的编辑器中添加标签。我能找到的唯一解决方案是使用静态文本创建一个静态块。可怕。我需要为每个标签创建一个块。

我希望有一种方法可以从上述模板定义代码中的占位符或内容属性设置其内容，但是，对于我来说，我找不到任何关于如何去做的文档。

所以问题是：

有没有更简单的方法可以在我缺少的模板中的每个字段上方设置静态标签？
有没有办法实现一个从那里获取内容属性的标签块？

【问题讨论】：

似乎对古腾堡的支持让大家感到困惑，这让我感觉好多了

标签： wordpress templates editor block wordpress-gutenberg

【解决方案1】：

是的，使用 3 步方法，您可以添加额外的属性并将自定义内容插入现有块，而无需创建新块。添加附加属性后，您可以在自定义帖子模板中设置默认值，然后显示在编辑器中，例如：

第 1 步：使用Register Block Type Filter 将新的label 属性分配给现有的"core/paragraph" 块：

plugin.js：

function addLabelAttribute(settings, name) {
    if (name !== 'core/paragraph') {
        return settings;
    }

    return lodash.assign({}, settings, {
        attributes: lodash.assign({}, settings.attributes, {
            label: {
                type: 'string',
                default: ""
            }
        })
    });
}

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'core/paragraph',
    addLabelAttribute
);

第 2 部分： 创建一个 Higher Order Component 以仅在设置标签的情况下将 <label>...<\label> 插入到 <BlockEdit> 中。 label属性的值是从props中解构出来的：

插件.js

const { createHigherOrderComponent } = wp.compose;
const { useBlockProps } = wp.blockEditor;

const withLabelOutput = createHigherOrderComponent((BlockEdit) => {

    return (props) => {
        const blockProps = useBlockProps();
        const { attributes: { label } } = props;

        if (label) {
            // Add the custom label within a wrapped <BlockEdit>
            return (
                <div {...blockProps}>
                    <label>{label}</label>
                    <BlockEdit {...props} />
                </div>
            );
        }
        // No label set, return default <BlockEdit>
        return (<BlockEdit {...props} />)
    };
}, 'withLabelOutput');

wp.hooks.addFilter(
    'editor.BlockEdit',
    'core/paragraph',
    withLabelOutput
);

参考：Block Editor Handbook > Block Filters

第 3 部分：在所需帖子/自定义帖子类型的模板中为新标签属性设置默认值：

plugin.php:

function myplugin_register_template(){
    // N.B. Use a custom post type unless you want this to apply to all posts
    $post_type_object = get_post_type_object('post');
    $post_type_object->template = array(
        array(
            'core/paragraph',
            array(
                'placeholder' => 'Add Description...',
                'label' => 'My Custom Label'
            )
        )
    );
    $post_type_object->template_lock = 'all';
}

add_action('init', 'myplugin_register_template');

（可选）为<label> 和enqueue it for the editor only 添加您自己的自定义编辑器样式，例如：

.wp-block-paragraph label{
    font-weight: bold;
    border-bottom: 1px solid grey;
    padding-bottom: 0.5em;
    display:block;
    width:100%;
}

上面给出的所有代码示例都可以组合成一个插件，它在编辑器中创建一个标签，如：

【讨论】：