Search code examples
javascriptwordpresswordpress-gutenberg

How do I align items horizontally in Gutenberg backend?


I want to create custom block that works like columns block in Gutenberg. It's easy to make it horizontally in frontend with CSS but how can I make it appear that way in editor?

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>
    }
});

Solution

  • So here is the solution: https://wordpress.stackexchange.com/questions/390696/innerblocks-breaks-flexbox-and-css-grid-styles/390699

    I need to use useInnerBlocksProps instead of InnerBlocks which is how the blocks that come with core do it.