Block spacing

Project Base ships with Custom Block Margins v3 by default. This extension will override Block Spacing API for all containers with inner blocks in flow layout, including the root container (Post Content), Group, Column, Media and Text, Cover, T2 Accordion, T2 Factbox, T2 Infobox, T2 Simple Media and Text, T2 Tabs etc …) and enforce the same block spacing rules everywhere. (All current containers)

Getting started guide

Set the new version in t2.json (Assuming you are using the default spacing scale in your theme.json)

"t2/custom-block-margin": {
  "version": 3
}

Extending

If you are using a different spacing scale for your project, or want to change any other part of the setup, you can use the built in filters:

t2/custom_block_margin/v3/gaps
t2/custom_block_margin/v3/default_gap
t2/custom_block_margin/v3/last_gap
t2/custom_block_margin/v3/last_selectors
t2/custom_block_margin/v3/containers

Setting new spacing sizes

To change spacing sizes for a project first change the spacing sizes in theme.json (settings.spacing.spacingSizes). We recommend using the default spacing scale (20-80) for consistency, using 50 as medium reference point for gap between two paragraph blocks. If you need to add additional spacing sizes, add to the top (90) or bottom (10).

Example: Changing spacing scale to only normal and small in theme.json.

"settings": {
  "spacing": {
    "defaultSpacingSizes": false,
    "spacingSizes": [
      {
        "slug": "small",
        "name": "Small",
        "size": "1rem",
      },
      {
        "slug": "normal",
        "name": "Normal",
        "size": "2rem",
      },
    ]
  }
}

Then updated Custom Block Margin setup correspondingly with the same gaps and update the default and last gaps.

\add_filter( 't2/custom_block_margin/v3/gaps', function ( array $gaps ): array {
  return [
    'none' => [
      ...$gaps['none'],
    ],
    'small' => [
      ...$gaps['50'],
    ],
    'normal' => [],
  ];
} );

\add_filter( 't2/custom_block_margin/v3/default_gap', fn() => 'normal' );
\add_filter( 't2/custom_block_margin/v3/last_gap', fn() => 'normal' );

For reference, this is the current default spacing scale in WordPress:

Key	Value	Alias
–wp–preset–spacing–20	0.44rem	2X-Small
–wp–preset–spacing–30	0.67rem	X-Small
–wp–preset–spacing–40	1rem	Small
–wp–preset–spacing–50	1.5rem	Medium
–wp–preset–spacing–60	2.25rem	Large
–wp–preset–spacing–70	3.38rem	X-Large
–wp–preset–spacing–80	5.06rem	2X-Large

Add/remove block containers:

Use the t2/custom_block_margin/v3/containers filter to add or remove containers. (All current containers)

\add_filter( 't2/custom_block_margin/v3/containers', function ( array $containers ): array {
  return [
    ...$containers,
    '.some-additional-container',
  ];
} );