I used to be barely pissed off final week when sharing a tutorial on a hero-style publish header. I had deliberate to create a structure with a left-aligned Group with a most width, as proven in the following screenshot:

This would enable the point of interest of the background picture to shine by way of on the proper. However, neither of the two recognized methods appeared to be ultimate.

One of the commonest strategies is to use a 50/50 Columns block, leaving the proper column empty. This was messy at some display screen sizes. However, as famous by Andrew Starr in the feedback, setting a particular width for the left column and clearing the width for the right-side column addresses this concern. Hat tip to him for locating a method to work inside the system. Still, it’s not the most intuitive methodology and leaves an empty <div> in the HTML for no good motive. It looks like a hack that we shouldn’t be educating customers.

My intestine was telling me that my most popular answer was the proper one. It was additionally the easiest to implement with out resorting to hacking columns. It makes use of the content material alignment matrix management for the Cover block mixed with a set width on an inside Group block. However, I bumped into points with this however didn’t perceive why. That was till I dove again into it this week (I’ll get to this later). Plus, I’m cussed sufficient to hold making an attempt one thing till it magically works.

Therefore, I went again to the drafting board. Tired of taking a look at the earlier design, I pulled up considered one of the first sample concepts I had about a 12 months in the past and recreated it with the newest design instruments:

Large background image with a desert in the night.  A tent is in the foreground of the image.  To the left is faux text for booking a night under the stars.

I additionally needed to be sure that this answer labored properly on any display screen dimension. When transferring towards smaller viewports, the content material ought to take up extra room till it hits the edge. The methodology on this tutorial handles this fantastically:

Mobile view of a nigh-sky desert with faux text for booking a camping trip.

This entry in the Building with Blocks collection walks by way of how to create this structure. As a bonus, I may also present how to accomplish it with the new Stack block in WordPress 6.0 for circumstances the place a Cover container doesn’t make sense.

Building With a Cover Block

For this walkthrough, I’m utilizing a customized theme. However, I’ve additionally examined with Archeo, Avant-Garde, and Twenty Twenty-Two. It has labored constantly throughout the whole group. I’m additionally operating WordPress 6.0 Beta 1 with out the Gutenberg plugin lively.

Step 1: Add Cover Block

WordPress post editor with a cover block inserted into the content canvas. The alignment control is open in the toolbar.
Cover block with left-aligned content material.

For this step, insert a new Cover block alongside along with your most popular picture. Most of the settings are usually not going to matter. I selected toggle on the full-height and full-width choices.

The most vital a part of this step is to choose an choice from the content material alignment matrix management. In the toolbar, it will likely be an icon with 9 tiny squares, nearly dots (see screenshot). To align the blocks from the subsequent steps in the left-middle of the Container, choose the first “dot” on the second row. Of course, be at liberty to mess around with completely different choices.

Everything else about the Cover design is up to you.

Step 2: Add Fixed-Width Group

WordPress post editor with a Group block nested inside of a Cover.  In the sidebar, the Group has a set width of 40rem.
Adding a Group block with particular width.

To comprise the content material you’ll add in step #3, insert a Group block inside the Cover from step #1.

The “Layout” tab in the block sidebar panel comprises the solely essential choices you could set. You will want to outline the content material and broad choices.

This is the level the place I hit a roadblock in my earlier exams. Percent (%) models behave otherwise from all others. When used, the Group block is all the time full-width, and its contents are all the time centered. No others have this concern. However, not all of them could also be used for this explicit structure. Viewport-width (vw) and viewport-height (vh) models will align as anticipated however not develop throughout the display screen on smaller units.

The important factor to bear in mind is to use a unit kind like px, em, or rem. You might also choose “Inherit default layout,” however the way it behaves will rely in your lively theme.

I set each the Content and Wide choices to 40rem (there isn’t a want for the Wide setting to be bigger than Content for such a design). Technically, that is a max-width worth quite than a fastened width. This permits it to modify to smaller display screen sizes.

Step 3: Add Content

WordPress post editor with a left-aligned Heading, Paragraph, and Buttons block inside of a Group nested inside of a Container.
Adding customized content material.

For the remaining step, you merely want to add your most popular content material inside the Group from step #2. I opted for including Heading, Paragraph, and Buttons blocks. This may be something you need—there are not any guidelines.

Building With a Stack Block

WordPress 6.0 will introduce a new Stack variation of the Group block. Instead of the typical top-down circulate, it’s a vertical flex structure. I coated this new block in the Gutenberg 13.0 launch publish this week.

To check the following approach, you could both set up WordPress 6.0 Beta 1 or the newest model of the Gutenberg plugin. The different choice is to wait a few weeks for the normal launch.

Step 1: Add a Stack Block

WordPress post editor with a Stack block inserted that has a colorful gradient background.  The content justification toolbar control is selected with the items justified left.
Adding a Stack and aligning its content material to the left.

Insert a new Stack block in the content material canvas for the first step. You might select to give it a background shade or gradient. I selected the latter to hold issues enjoyable.

Unlike the Group block, Stack has content material justification controls. If you made it by way of the first a part of this tutorial, it’s best to most likely already know the place I’m going with this. There is a “Justification” management in the sidebar for aligning nested blocks left, middle, or proper. A replica choice can be in the toolbar.

As with the Cover block, be at liberty to mess around with the choices. Otherwise, set it to “left” to comply with alongside.

Step 2–3: Rinse and Repeat

WordPress post editor with a Heading, Paragraph, and Buttons nested inside of a left-aligned Group block inside of a Stack block.
Fixed-width Group aligned left inside a Stack variation.

Steps #2 and #3 are actually the similar as when utilizing the Cover block as the outer container. Therefore, you want to solely repeat the course of outlined earlier. Again, the most vital factor is to outline a fastened width for the Group block.

This ended up being surprisingly simple after the frustration I had final week. This can be an instance of how highly effective the block editor has grow to be and the way the consumer expertise can generally not dwell up to expectations. If I’m hitting roadblocks as somebody who lives and breathes WordPress nearly each waking second, different customers are possible operating into those self same points. I hope that I at the least shined a little gentle on one facet of structure constructing on this tutorial.


Please enter your comment!
Please enter your name here