Blocks content positioning

All WoodMart theme blocks for layout construction (such as Column, Container, or Full Width Section) utilize CSS Flexbox for content positioning within them and have the value display property set to flex. Column and Full Width Section have flex-direction: column set by default, while Container can have any value for flex-direction depending on the setting of the corresponding option. All these features can be used for more precise content positioning, including options like Width, Align self, Flex grow, and Flex shrink, which are located in the Advanced tab.

For example, the Align self option allows positioning a Button block inside a Column without any additional wrappers, thus simplifying the HTML structure of the page, as wrappers will only be used where they are truly needed.

It’s important to note that all the options mentioned above will only work if their parent block uses Flexbox. If the content block is not nested within a container, section, or column, but is placed directly in the root of the editor, none of its flex options will work because, by default, the Gutenberg editor root doesn’t use Flexbox.

Indents between blocks

All blocks that can contain other blocks are based on CSS Flexbox. Therefore, to set spacing between each content element of these blocks, the gap property is used, which is set by a special option called “Blocks gap”. 

By default, the standard value of the gap property is set to 20px. If the spacing between all blocks needs to be different, the gap property can be set to a value of 0, and the spacing of each block can be set using the margin option values. It is important to note that the spacing between blocks located at the root of the editor should be set only using margins because by default, the root of the editor in WordPress does not use Flexbox.