Gutenberg Block 支持：如何设置默认背景颜色？

Question

当我将 backgroundColor 的块支持添加到我的自定义动态 WordPress/Gutenberg 块时，我希望选择器已经选择了默认颜色。 我按照参考指南的指示进行操作，但缺少一些东西。

我的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": "" // The WP Reference Guide says this will be a preset slug. Adding one does not help me.
        }
    }
}

我的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.json，但编辑器似乎忽略了它。

我没有收到任何 JS 或 PHP 错误。

注意：我知道我这里的示例非常简单，但是 我真的很想使用带有 render_callback 函数的动态块，因为一旦我学会了如何使用块支持，我将添加一些自定义内容。

-----更新和解决方案-----

这好像是动态块的问题

@S.Walsh 是正确的，默认的 block.json 属性：color 使颜色选择器默认选择一种颜色。

但是，只要我将“属性”（任何属性）添加到我的 register_block_type，编辑器中的默认颜色就会被忽略。我能够通过将“样式”作为属性对象添加到我的 block.php register_block_type 来解决这个问题。

解决方法是保持block.json原样，修改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' );

Answer 1

我已经通过创建一个新块并使用您的编辑/保存功能将您的属性添加到

block.json

来测试您的代码。父块的背景颜色符合预期；尽管当您在块内单击（InnerBlocks > Paragraph）时，段落的背景颜色（或添加的任何 InnerBlock）不会被设置，因为 Paragraph/InnerBlock 有其自己的属性，这些属性不是从您的块中继承的

block.json

.

您的 block.json 属性 default:color:background 产生了这个标记（注意：

has-background 

和

background-color

是按预期添加的）：

<!-- wp:create-block/so-75596656 -->
<div class="wp-block-create-block-so-75596656 has-background" style="background-color:#b50000"><div><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:create-block/so-75596656 -->

如果您没有看到后台默认更改，请再次运行构建过程，从页面中完全删除块，然后在再次测试读取块之前清除缓存。