1

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

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.