修改/定制wordpress gutenberg块的设计

// 注册自定义块
function register_custom_block() {
    wp_register_script(
        'custom-block-script',
        plugins_url('block.js', __FILE__),
        array('wp-blocks', 'wp-element')
    );
    register_block_type('my-plugin/custom-block', array(
        'editor_script' => 'custom-block-script',
    ));
}
add_action('init', 'register_custom_block');

// block.js
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('my-plugin/custom-block', {
    title: 'Custom Block',
    icon: 'smiley',
    category: 'text',
    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: '.content',
        },
    },
    edit: (props) => {
        const { attributes: { content }, setAttributes } = props;
        const onChangeContent = (newContent) => {
            setAttributes({ content: newContent });
        };
        return (
            <div className="content">
                <RichText
                    tagName="p"
                    value={content}
                    onChange={onChangeContent}
                    placeholder="Enter your text here..."
                />
            </div>
        );
    },
    save: (props) => {
        return (
            <div className="content">
                <RichText.Content value={props.attributes.content} />
            </div>
        );
    },
});