Skip to content


When an Area is currently selected in the Block Editor, you’ll be able to edit its properties by using the controls available in the sidebar on your right. Here are the properties that define an Area:

  • Dimensions: through this panel it is possible to alter the spacing properties of the Area. The spacing properties are different depending on the device you want to target: desktop computers, tablets, and mobile devices. Spacing properties can be altered either using their slider controls that will work using pixels as unit, or triggering an Advanced mode, that will allow you to select both the value and the unit being used.
    • Margin: governs the margins of the Area.
    • Padding: governs the paddings of the Area.
  • Background: from here you’ll be able to change the background for the Area. You can choose to either have a solid color as background element, or pick an image from the Media Library. As for the Dimensions settings, the Background settings are dependent on the device width you want to target.
Unit control with multiple unit values

In the toolbar that is displayed when an Area is currently selected in the Block Editor, there’s another setting that you can use to alter the display of the Area contents: when changing the Vertical alignment property, the content of the Area will be positioned differently at the top, center or bottom of the Area, depending on your choice.


From the Display panel in the sidebar on your right, you will be able to select whether the Area should be/not be visible in the currently selected device width.

Define block types allowed in areas

From version 1.2.28, we’ve introduced a configuration option in Grids that allows developers to define which block types are¬†allowed to be used in areas. The option is an array containing block types (eg. core/paragraph, etc.). For example, if you wanted to only allow paragraphs and headings:

add_filter( 'grids/config', function( $config ) {
	$config[ 'area' ][ 'allowedBlocks' ] = array(
	return $config;
} );