再现列块-构建自定义块

由于这是一个涉及自定义块的技术问题，我们假设你的站点已经安装了WordPress，并且你已经熟悉了基本的WordPress开发知识。为了快速构建一个自定义块，我们将使用JSX和React。

1. 首先，我们要定义一个新的块类型。在你的主题或插件的functions.php文件中添加一下代码片段：

function register_my_columns_block() {
    wp_register_script(
        'my-columns-block',
        get_stylesheet_directory_uri() . '/my-columns-block.js',
        array( 'wp-blocks', 'wp-element' )
    );
    
    register_block_type( 'my-plugin/my-columns-block', array(
        'editor_script' => 'my-columns-block',
        'render_callback' => 'my_render_columns_block'
    ) );
}
 
add_action( 'init', 'register_my_columns_block' );

2. 现在，让我们创建一个用于呈现块内容的函数，即my_render_columns_block。在你的主题或插件目录下，创建一个名为my-columns-block.js的文件，并添加以下代码：

const { registerBlockType } = wp.blocks;
const { createElement } = wp.element;
 
function my_render_columns_block( attributes ) {
    const { columns } = attributes;
 
    return (
        <div className={ `columns-${ columns }` }>
            <div className="column">Column 1</div>
            <div className="column">Column 2</div>
            <div className="column">Column 3</div>
        </div>
    );
}
 
registerBlockType( 'my-plugin/my-columns-block', {
    title: 'My Columns Block',
    icon: 'layout',
    category: 'layout',
    attributes: {
        columns: {
            type: 'number',
            default: 3
        }
    },
    edit( { attributes, setAttributes } ) {
        const { columns } = attributes;
 
        function onChangeColumns( event ) {
            setAttributes( { columns: Number( event.target.value ) }