WordPress: Align Cover Block Content with Page Content

Here’s how to align Cover block content with page content in WordPress. This uses the native block editor without extra CSS or code. The settings for cover content positions don’t do this automatically. I played with position, margins, and padding, and nothing worked. Maybe others have struggled with this, so here’s a technique that I found that works.

Here’s the scenario:

• A cover block is at the top of the page with a background image and a box of text in front of it.
• The box of text in the Cover block should align with the left margin of content that’s below the Cover block.

The Problem: Cover Block Settings Alone Don’t Align with Page Content

The Cover block has the setting Change content position. You can choose “Center left”, but this puts the content near the left edge of the screen. Even when the Cover block setting “Inner blocks use content width” is enabled, the content goes to the far left. I tried several combinations of these settings, and none aligns Cover block content with the content below the cover. Here’s an example of this incorrect alignment.

The Fix: Nest Group Blocks for Better Alignment

In the block editor, nest blocks like this.

Cover
   Group (container group)
      Group (inner group, optional)
         content like headings, paragraphs, lists

Block Settings

For the Cover block, use these settings:

• Change content position: Center
• Inner blocks use content width: enabled
• Content width: match the page content width

For the container Group block, use these settings:

• Change content justification: left
• Inner blocks use content width: enabled
• Content width: 500px in this example or whatever you want. This limits the width of the content or the optional inner Group block.

The inner Group block is optional. You can enter text and images in the container block. I wanted to darken the area behind the text, so I used an inner Group block. It doesn’t need any particular alignment settings. For color and layout, I used these settings:

• Text color: white
• Background color: black at 80% opacity. (hex #00000080)
• Padding: around 24px with an adaptive spacingSize setting I created in the theme.json file. A numeric setting like 24px works.
• Border radius: 12px

This aligns a 500-pixel block of text in the cover with the page content below the cover. It works with aligning on the right, too.

Conclusion

This is a simple way to use the WordPress block editor to align cover content with page content without custom CSS or other code. This technique is available with core block editor features.