如何在Gutenberg后台实现自定义类列区块的水平对齐？

问题描述 #

我想要创建一个功能和Gutenberg原生列区块（columns block）一致的自定义区块，前端用CSS能轻松实现水平排列，但不知道怎么让它在编辑器后台也呈现同样的水平布局效果。

现有代码 #

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import metadata from '../config/card-row-block.json';

const cardRowTemplate = [
    [ 'cgbms/card-block' ]
];

const allowedBlocks = [
    'cgbms/card-block',
];

registerBlockType(metadata, {
    edit: (props) => {
        const blockProps = useBlockProps();

        return <div className="cgbms_cards_row" { ...blockProps }>
            <InnerBlocks allowedBlocks={ allowedBlocks } renderAppender={ InnerBlocks.ButtonBlockAppender } template={cardRowTemplate} orientation="horizontal" />
        </div>
    },

    save: (props) => {
        const blockProps = useBlockProps.save();
        return <div className="cgbms_cards_row" { ...blockProps }>
            <InnerBlocks.Content />
        </div>
    }
});

解决方案 #

要让自定义区块在编辑器后台实现水平排列，得从编辑器样式定制和InnerBlocks属性配置两方面入手，具体步骤如下：

1. 给编辑组件添加编辑器专属类

Gutenberg编辑器有自己的默认样式体系，我们可以给区块容器添加一个编辑器专属的类，方便后续写样式时区分前端和编辑器环境。修改edit函数里的useBlockProps：

edit: (props) => {
    // 添加编辑器专属类，方便单独写样式
    const blockProps = useBlockProps({
        className: 'cgbms_cards_row cgbms-cards-row-editor'
    });

    return <div { ...blockProps }>
        <InnerBlocks 
            allowedBlocks={ allowedBlocks } 
            renderAppender={ InnerBlocks.ButtonBlockAppender } 
            template={cardRowTemplate} 
            orientation="horizontal" 
            // 可选：锁定模板防止用户删除默认子区块，按需开启
            // templateLock="all"
        />
    </div>
},

2. 编写编辑器专属CSS

新建一个editor-style.css文件，专门针对编辑器环境下的区块写布局样式，要兼容Gutenberg的内部DOM结构：

/* 编辑器后台的水平容器样式 */
.cgbms-cards-row-editor {
    display: flex;
    gap: 16px; /* 子区块之间的间距 */
    flex-wrap: wrap;
    padding: 8px;
}

/* 覆盖InnerBlocks的默认布局样式，强制水平排列 */
.cgbms-cards-row-editor .block-editor-block-list__layout {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
}

/* 设置子区块的默认宽度，这里是三列布局，可按需调整 */
.cgbms-cards-row-editor .wp-block-cgbms-card-block {
    flex: 1 1 calc(33.333% - 10.666px);
    min-width: 250px; /* 最小宽度，避免屏幕变窄时布局错乱 */
}

3. 加载编辑器样式

把刚才写的CSS文件导入到区块的JS文件中，或者在PHP中注册加载：

方式一：JS导入（推荐）
在区块的index.js顶部添加：

import './editor-style.css'; // 导入编辑器样式

方式二：PHP注册（适用于插件开发）
在插件主文件中添加：

function cgbms_load_card_row_editor_styles() {
    wp_enqueue_style(
        'cgbms-card-row-editor-style',
        plugins_url( 'path/to/editor-style.css', __FILE__ ),
        array( 'wp-edit-blocks' ), // 依赖Gutenberg默认编辑器样式，确保样式优先级正确
        filemtime( plugin_dir_path( __FILE__ ) . 'path/to/editor-style.css' )
    );
}
add_action( 'enqueue_block_editor_assets', 'cgbms_load_card_row_editor_styles' );

注意点 #

• InnerBlocks的orientation="horizontal"只是告诉编辑器子区块的排列方向，真正的布局效果还是要靠自定义CSS实现；
• 编辑器里的DOM结构和前端不一样，必须针对编辑器的类（比如.block-editor-block-list__layout）写样式，否则会被Gutenberg的默认样式覆盖；
• 子区块的宽度可以通过flex属性调整，比如改成calc(50% - 8px)就是两列布局，配合min-width实现响应式。

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