How to make content of Twenty Twenty-Five theme full width

Modern WordPress block based (full site editing) themes, such as Twenty Twenty-Five theme typically come with support for the .alignwide and .alignfull CSS classes.
Content can be made to span the full width of the page by applying “Align full” to a root level block.

The .alignwide and .alignfull classes only function in the correct contexts and you rarely need to apply them manually – the blocks that support it have a control on the block toolbar (Align) to change the alignment value:

Recommended prerequisites

It’s useful to enable the “Always open List View” option under block editor preferences that can be accessed from the top right corner:

It shows a useful overview of what blocks are on the page and which one is currently selected:

Without having the list view open it’s a lot more confusing to work with the block editor – you should only keep it closed when using a tiny screen.

Enabling the Top toolbar option is a personal preference – I find it better to have it enabled so the toolbar is always in the same place, rather than changing location based on which block is currently selected.

Full width content on a page or post

For this example, let’s edit a Page and make a Paragraph block full width:

To make it easier to see, here’s the paragraph with a background color applied:

The paragraph has already seemingly escaped the “container” – this is because when the paragraph has a background color it also receives padding and the TT5 theme uses the default CSS box-sizing value of content-box – most CSS frameworks and resets tend to override that value to border-box in which case the paragraph would look like this:

How ever there is actually no “container” element here, all the content is given a maximum width, and left/right margins are set to auto which centers it. So technically, to make this paragraph “full width” it would need to have the max-width: none CSS applied to it, how ever this is not how it’s intended to work.

Changing alignment

To apply alignfull to the paragraph, it needs to first be wrapped in a Group block, because Paragraph blocks themselves don’t have alignwide/full options, only text align left/center/right.

Select the Paragraph block and wrap it in a Group, by clicking the Paragraph block icon on the toolbar to transform it:

The resulting Group block will have the “Align” option on its’ block toolbar, allowing you to change it to “Full width”:

How ever the Paragraph itself still does not appear to be full width:

This is because while the Group is full width, the nested Paragraph is instructed to use “Content width” in the Group block Layout settings:

Simply turn that option off:

and then everything inside that particular Group block will no longer have their width restricted:

That’s how most things can be made full width – either by using the “Align” option on the block, or by wrapping the block in a Group block and making that full width, while disabling the “Inner blocks use content width” option.

Full width content in a template by default

Another method to make content full width is to change the current template of the page (or edit the existing template):

If there is no suitable template, you can click “Create new template” and make a full width template yourself:

After creating a new template, it inherits the default “Page” template contents, which may look something like this:

To make the content full width, you would need to disable “Inner blocks use content width” option on relevant blocks, such as the Content block and the Group block that is wrapping the Title block:

After making the changes, save the template and navigate back:

While the page is using the Full width template, it is not always reflected in the editor due to how TT5 theme is set up (the block editor root container has the .is-root-container and .has-global-padding classes applied which add spacing to the sides):

How ever after enabling the “Show template” option you’ll see that the content is indeed full width:

When the “Content” block of a template already has the “Inner blocks use content width” option disabled then when editing the page your blocks won’t even show the “Align” option on the block toolbar because they can no longer be aligned granularly. For that reason it’s better to just use a normal template and .alignfull to make things full width when applicable, rather than making a whole new template.