Grid layout type

The grid layout type for blocks has been in core since 6.3 but 6.6 adds some new features to it:

Toggle between grid modes

Adding grid layout to a block.json without specifying any further attributes, like so:

"layout": {
    "default": {
        "type": "grid"
    }
}

will now by default display a toggle in the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. layout section, allowing users to toggle between “Auto” and “Manual” modes:

It is still possible to configure the block to default to “Manual” mode and add a specific column count, by using the columnCount attribute:

"layout": {
    "default": {
        "type": "grid",
        "columnCount": 5
    }
}

Set column and row spans on grid children

Blocks that opt into grid layout can also allow their child blocks to span across multiple grid columns and/or rows. This can be enabled with the allowSizingOnChildren attribute:

"layout": {
    "default": {
        "type": "grid"
    }
    "allowSizingOnChildren": true
}

This will enable Column span and Row span controls in the child block sidebar, under the Dimensions section:

It will also enable on-canvas handles that can be dragged to resize the block:

New grid variation for Group block

Group block now has a Grid variation:

Similarly to Row and Stack, Grid comes with allowSizingOnChildren enabled so children of Grid blocks can be resized.

Props to @bph for review and @juanmaguitar for proofreading.

#6-6, #dev-note, #dev-notes, #dev-notes-6-6