The Section Block is one of the most fundamental blocks within the Gutenberg suite on the 2U environment and will often be added to a page automatically. This block should be used to house all other blocks & content when building out a page as it pulls through the container classes and their widths from Whitelabel. These settings can be overridden via the Global Settings area within the WordPress dashboard. 

Global Settings pulls through the container class names from Whitelabel, which are:

Within the section block, there are a number of settings, to give you the ability to create different content widths, section background colours, background images and also a margin selector, to choose the top & bottom margins for your section block.

This setting within the block, allows you to set the padding inside of the Section container.

This setting within the block, allows you to choose from the container classes that are pulled from Whitelabel. Once selected, you will be able to see the change within the block editor.

Normal – 1152px (equivalent to container):

Narrow – 960px (equivalent to container–lg):

Wide – 1960px:

This setting within the block, allows you to change the background colour of the section, alongside the content colour. The colour palette will allow the users to select colours which have been pulled from Whitelabel and used within that site’s theme. There is no option to select a new colour, unless an admin level user adds the new colour, via the global settings.

The section block also includes a feature which triggers an alert should the background and text colour combination not meet the minimum colour contrast.

This setting within the block, allows you to add a background image to the section. You can also adjust the height of the section, once an image is inserted.

This block also has the option to add borders to each section. These settings allow you to toggle a border on/off for your section. You can adjust the border radius along with the colour of the border. You can also increase the thickness of the border using the slider. You can choose between 1-50.

This setting within the block, allows you to adjust the top & bottom margins of your section, to separate this from content above/below the block. The margins are taken from Harmony and range from margin 1 – 8. 

Margin rules are below:

This block also has the ability to set a negative margin, so sections have the ability to overlap with each other (see below example).

To use this feature, create a section to house your desired content. Then create a second section to hold the content you wish to overlap. On the overlapping content, toggle on ‘Use Negative Margins’ then use the slider to find your desired margin size.

You can add also horizontal & vertical ‘gradient’ settings and select the gradient colours, plus gradient height option so you can control the height/width of the gradient. The block has the ability to nest a section block within another section blocker, all of which can be altered with responsive toggle controls.