Exploring Gutenberg Grid Blocks

Note: This post of understanding newly added WordPress Site Editor features including using blocks. This learning post is still in active development and updated regularly.

Grid layout support in the column blocks was initially introduced in the block editor with Gutenberg 15.5 and was officially integrated into WordPress 6.3. The new experimental grid features allowed users to seamlessly incorporate grids into their websites via the grid block, a variant of the group block, accessible by installing the Gutenberg plugin and navigating to settings and experiments.

The latest Gutenberg 18.0 release brings further enhancements to Grid Blocks, such as the capability to group blocks into a grid using the transform feature. Additionally, the sidebar now hosts controls for Column Start and Row Start, facilitating users in effortlessly dragging and dropping blocks within the grid. These new features can be accessed by installing the Gutenberg plugin and navigating to settings and experiments.

Early Exploration

After watching this YouTube video on Grid Layout, I decided to try out the layout discussed in it.

Below is the screenshot I created following the YouTube video example.

Since this tryout, the feature has been merged to WP 6.6. In the following YouTube video, Ann McCarthy, Automattic Product wrangler, discusses a few of the smaller but powerful new design tools, including negative margins, a versatile Grid block, and the ability to edit shadows or create your own custom shadows.

I spun out the feature discussed in Ann’s video to create the following gallery of images and text columns.

In this Hangout video, Automattic developer Brison discusses what her team is working on in the Gutenberg Grid Block Experiments.