如何为Gutenberg自定义动态区块设置默认背景色？

问题描述 #

我在为自定义WordPress/Gutenberg动态区块添加backgroundColor的Block Supports时，希望颜色选择器默认已选中指定的十六进制颜色。按照官方Block Supports参考文档操作后，仍未达到预期效果。

现有代码 #

block.json #

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "my-custom-block",
    "version": "0.1.0",
    "title": "My Block Title",
    "category": "widgets",
    "description": "My Block Description",
    "supports": {
        "html": false,
        "color": {
            "background": true,
            "text": false,
            "link": false
        }
    },
    "textdomain": "my-custom-block",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css",
    "attributes": {
        "style": {
            "type": "object",
            "default": {
                "color": {
                    "background": "#b50000"
                }
            }
        },
        "backgroundColor": {
            "type": "string",
            "default": "" // WP文档说明该字段应为预设slug，但添加后无效果
        }
    }
}

block.php #

function my_block_init() {
    
    register_block_type('my_custom_block', [
        'render_callback' => 'markup_my_custom_block',
        'attributes' => [
            'backgroundColor' => [
                'type' => 'string',
                'default' => '#b50000'
            ]
        ]
    ] );
}
add_action( 'init', 'my_block_init' );

渲染函数（基础版本） #

function markup_my_custom_block($attr, $content) {
    return $content;
}

edit.js #

import { __ } from '@wordpress/i18n';
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

/**
 * @return {WPElement} Element to render.
 */

export default function Edit({ attributes, setAttributes }) {

    return (
        <div { ...useBlockProps() }>
            <InnerBlocks />

        </div>
    );
}

save.js #

import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

/**
 * @return {WPElement} Element to render.
 */
export default function save() {
    return (
        <div { ...useBlockProps.save() }>
            <div>
                <InnerBlocks.Content />
            </div>
        </div>
    )
}

可正常运行的部分 #

• Block Supports背景颜色选择器正常显示
• 可设置区块背景色，前端能正常渲染选中的颜色

遇到的问题 #

添加区块时，希望颜色选择器默认已选中指定的十六进制颜色（而非显示无选中状态）。由于是插件，需基于十六进制值而非主题预设色设置。查阅相关资料后，已在block.json中添加默认样式配置，但编辑器似乎忽略了该设置，且未出现JS或PHP错误。注：必须使用带render_callback的动态区块，后续会添加自定义功能。

更新与解决方案 #

该问题与动态区块特性有关：block.json中的默认颜色属性原本可让选择器默认选中颜色，但一旦在register_block_type中手动添加任何attributes配置，编辑器就会忽略block.json里的默认值。

解决方法是在block.php的register_block_type中添加style属性对象并设置默认值，修改后的block.php代码如下：

function my_block_init() {
    
    register_block_type('my_custom_block', [
        'render_callback' => 'markup_my_custom_block',
        'attributes' => [
            'style'  => [
                'type'  => 'object',
                'default'  => [
                    'color'  =>
                    [
                        'background'  => '#b50000'
                    ]
                ]
            ]
        ]
    ] );
}
add_action( 'init', 'my_block_init' );

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