Containers and Alignment
There are 3 main options to align/set the width of Gutenberg Blocks.
- The first option is inline. This means the text/content is not in any sort of container block. These blocks will have a max width and any padding that is set via the theme customizer/global options.
- The next option is align wide. This is done by selecting the Gutenberg built in alignment button and tells the blocks to ignore any padding and instead be the max width of the page container.
- The last option is align full. This tells the content to ignore the page container and instead go all the way to the edges of the screen.
So now that we understand the basics of the 3 different width options in Gutenberg we can see how these can work into our favor to lower the amount of blocks needed for pages and use more global settings.
In the above image you can see that our first 2 rows have a max width of 1500px with 20px of left/right padding as those are the settings set by our theme.
The 2nd row moves the text inside a GenerateBlocks container block so we can further adjust the padding and edit other settings, however, due to it’s alignment not being set it is still restricted by the page container’s 1500px 20px padding settings.
The 3rd row moves the text back to inline (no container), but has the align width button set. This means that the text is going all the way to the edge of the 1500px page container
The 4th row has the text inside a container so we can again adjust settings but with the align wide button it removes the default container padding giving us an inner width similar to row 1 but having a custom background or other settings done.
The last 2 rows use the align full setting and thus ignore the page template completely and either go all the way to the edge of the screen or use the container’s block settings to set the width.
So why not just set everything the pages to full width and just use container settings?
While that does work, it is time consuming and avoiding the theme’s built in features. The big one is for mobile we can have great padding already set globally. Here are those same above rows on a responsive layout. The theme’s has a global setting of 10px padding on mobile for the regular page container.
