WordPress Gutenberg模板如何为区块添加前置静态标签

可通过封装模板复用片段实现批量生成带标签的字段，无需逐个手动创建静态文本块，实现代码如下：

• 先定义通用的带标签字段生成函数，统一维护标签与字段的结构

// 通用函数：生成带标签的字段结构
function myplugin_get_labeled_field( string $label_text, string $block_name, array $block_attrs = [] ): array {
    return [
        'core/group',
        [ 'className' => 'labeled-field-wrapper' ],
        [
            // 内置标签块，默认锁定禁止删除移动
            [ 'core/paragraph', [
                'content' => $label_text,
                'className' => 'field-label',
                'lock' => [ 'remove' => true, 'move' => false ]
            ] ],
            // 对应业务输入字段
            [ $block_name, $block_attrs ]
        ]
    ];
}

// 注册文章类型模板
function myplugin_register_template() {
    $post_type_object = get_post_type_object( 'post' );
    $post_type_object->template = [
        // 新增字段仅需传入标签文本、字段类型与属性即可，无需重复编写标签代码
        myplugin_get_labeled_field( '产品描述', 'core/paragraph', [ 'placeholder' => '请输入产品描述' ] ),
        myplugin_get_labeled_field( '产品价格', 'core/paragraph', [ 'placeholder' => '请输入产品价格' ] ),
        myplugin_get_labeled_field( '注意事项', 'core/list', [ 'placeholder' => '输入注意事项' ] ),
    ];
    $post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_template' );

若需要统一标签样式，可给标签块指定固定className，通过全局自定义CSS控制展示效果。

可以实现，注册自定义专用标签块即可，该区块直接读取模板传入的content属性作为标签内容，默认锁定禁止用户编辑，实现步骤如下：

1. PHP侧注册自定义块，配置属性与前端渲染逻辑

function myplugin_register_field_label_block() {
    register_block_type( 'myplugin/field-label', [
        'attributes' => [
            'content' => [
                'type' => 'string',
                'default' => ''
            ]
        ],
        'render_callback' => function( $attrs ) {
            // 前端不需要展示标签可直接返回空字符串
            return empty($attrs['content']) ? '' : '<span class="custom-field-label">' . esc_html($attrs['content']) . '</span>';
        }
    ] );
}
add_action( 'init', 'myplugin_register_field_label_block' );

2. 编辑器侧JS代码，实现标签的编辑器内展示

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType( 'myplugin/field-label', {
    title: __('字段标签', 'myplugin'),
    icon: 'heading',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            default: ''
        }
    },
    supports: {
        lock: true,
        html: false
    },
    edit: ( { attributes } ) => {
        const blockProps = useBlockProps( { className: 'custom-field-label-editor' } );
        return <div { ...blockProps }><strong>{ attributes.content }</strong></div>;
    },
    save: () => null,
} );

3. 模板中直接调用自定义标签块即可

function myplugin_get_labeled_field( string $label_text, string $block_name, array $block_attrs = [] ): array {
    return [
        'core/group',
        [ 'className' => 'labeled-field-wrapper' ],
        [
            [ 'myplugin/field-label', [ 'content' => $label_text, 'lock' => [ 'remove' => true, 'move' => false ] ] ],
            [ $block_name, $block_attrs ]
        ]
    ];
}

自定义标签块可实现所有标签的样式、权限统一管控，后续调整标签效果仅需修改块代码即可，无需修改模板配置。

内容的提问来源于stack exchange，提问作者jmazzo