wordpresswordpress-gutenberggutenberg-blocks

Within a Custom Block (Gutenberg, WordPress), how to get the Width in Dimensions?

I have a few very simple custom blocks, nothing really special about them. When used within a Group (like a Row), since recently, under the Block > Styles section of the sidebar, there is a Dimensions section. When I click on +, I can add a Width, which can be set to Fit, Fill or Fixed. It can be also customized to a certain width.

I didn't set or allowed this in my code, but it's there. If this Width is modified, it's not saved; simply because I am also not saving it.

How can I disable this? Alternatively, how can I handle the chosen Width?

I have ran over the Gutenberg documentation, but I have seen anything about this, I am a bit lost at this point.

Thanks for your help :)

Solution

  • Since WordPress 6.2, blocks can support dimensions via block.json and the UI control is shown if your theme also supports dimensions.

    In your custom blocks save() function, check that useBlockProps() is implemented so the automatically generated class names are saved, eg:

    JS

    import { useBlockProps } from '@wordpress/block-editor';

save: () => {
    const blockProps = useBlockProps.save();

    return <div { ...blockProps }> block content </div>;
};

    Eg. A group with 2 custom blocks; the first fixed width, the second set to "fill" renders the following on the frontend:

    HTML

    <div class="wp-block-group is-nowrap is-layout-flex wp-container-7 wp-block-group-is-layout-flex">
   <div class="wp-block-projectname-blockname wp-container-content-5">...</div>
   <div class="wp-block-projectname-blockname wp-container-content-6">...</div>
</div>

    The auto-assigned wp-container-content-[x] class names are added via useBlockProps() from the save() function.

    On the frontend, the CSS is added inline, eg:

    <style id="core-block-supports-inline-css">
/**
 * Core styles: block-supports
 */
.wp-container-content-5 {
    flex-basis: 300px;
}
.wp-container-content-6 {
    flex-grow: 1;
}
.wp-container-7.wp-container-7 {
    flex-wrap: nowrap;
}
</style>