BLOCK LAYOUT and how to use

The Layout feature was redesigned in WordPress 6.1 and this article is out of date.

What is the layout function?

When inherit default layout is turned ON, two fields, container and wide, are displayed.

content overrides the width of none in the menu

wide overrides the width of Wide Width.

How can I customize the width of all the elements assigned to the middle or wide columns?

Special blocks that wrap blocks, such as group blocks, treat child blocks differently depending on the theme.

For example, with Twenty Tweenty Two, the display will be as follows.

Twenty Twenty Two

For the emulsion theme, the display is as follows.

emulsion

The blocks in the group, Twenty Twenty Two, are automatic even if the width is set to none? The emulsion theme keeps at 720px if the block element width is 720px or more if it is set to none.

So, in order to display something like Twenty Twenty Two, it means that you have to change the width of the child block to full width etc.

How can I achieve a Twenty Twenty Two-like display with an emulsion theme?

Twenty Twenty Two-like display with an emulsion theme

This means that when the block is wide, the child blocks will fill up, which unfortunately means that the emulsion theme cannot meet the menu description.

Please remember this much and go home.

To display the child blocks to the full width, set the content width to 100%.

What are the blocks other than the group block that can use the layout function?

The blocks for which the layout function is currently enabled are as follows.

  • core/column
  • core/group
  • core/post-content

Differences by theme scheme

By the way, in the emulsion theme, there is a setting called “theme operation mode” in the customizer, and this article is written on the assumption that it is set as a full site editing theme, but in the case of “full site migration theme” , The display will be slightly different.

Example of column block

FSE transitional theme

The FSE transitional theme is like embedding a block template in the main element of the php template, but at this time, in the narrow space of the column block, the alignleft and alignright images are also unfloated and 100% I used to use CSS that was scary because I thought it would be better to display it in.

The full site migration theme is a mode in which you can change the settings in either the customizer or the site editor.

FSE theme

In the full site editor, left-right alignment is still effective, as if you don’t have to go that far.

I wonder if it should be called a stray, what should I say? It will continue. I’m sure it will continue …