如何在古腾堡后端水平对齐项目？答案

【问题标题】：How do I align items horizontally in Gutenberg backend?如何在古腾堡后端水平对齐项目？
【发布时间】：2023-01-19 11:14:35
【问题描述】：

我想创建像古腾堡中的列块一样工作的自定义块。使用 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>
    }
});

【问题讨论】：

标签： javascript wordpress wordpress-gutenberg

【解决方案1】：

有人知道如何使用 ACF PRO 插件吗？

谢谢

【讨论】：

【解决方案2】：

所以这是解决方案：https://wordpress.stackexchange.com/questions/390696/innerblocks-breaks-flexbox-and-css-grid-styles/390699

我需要使用 useInnerBlocksProps 而不是 InnerBlocks，这是核心随附的块如何做到的。

【讨论】：