Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block support docs: update blockGap notes #41225

Merged
merged 4 commits into from
May 26, 2022
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions docs/reference-guides/block-api/block-supports.md
Original file line number Diff line number Diff line change
Expand Up @@ -540,6 +540,7 @@ supports: {
- Subproperties:
- `margin`: type `boolean` or `array`, default value `false`
- `padding`: type `boolean` or `array`, default value `false`
- `blockGap`: type `boolean` or `array` or `object`, default value `false`

This value signals that a block supports some of the CSS style properties related to spacing. When it does, the block editor will show UI controls for the user to set their values, if [the theme declares support](/docs/how-to-guides/themes/theme-support.md#cover-block-padding).

Expand All @@ -565,6 +566,40 @@ supports: {
}
```

Within the available block support spacing properties however, `blockGap` is a special case. As with other spacing properties, assigning a `boolean` value will determine whether the "Block spacing" UI controls display in the editor.

```js
supports: {
spacing: {
blockGap: true, // Enables blockGap UI control.
}
}
```

It also supports an `array` value that enables UI controls to adjust gap column and row values.

```js
supports: {
spacing: {
blockGap: [ 'horizontal', 'vertical' ], // Enables axial (column/row) block spacing controls
}
}
```

`blockGap` values are primarily used alongside the `gap` CSS property, which is tied to a block's flexbox layout. The layout styles define a fallback gap value, which all blocks receive if they haven't yet been given a value.

Often this global fallback value is not appropriate for specific blocks. To customize the fallback `blockGap` value for a specific block, the `blockGap` property also accepts an object with a `__experimentalDefault` property, the value of which is a `string` and is used as the default `gap` CSS value.

```js
supports: {
spacing: {
blockGap: {
__experimentalDefault: '2em' // Enables blockGap support and also provides a default, per-block fallback value of `2em` for layout purposes.
}
}
}
```

A spacing property may define an array of allowable sides that can be configured. When arbitrary sides are defined only UI controls for those sides are displayed. Axial sides are defined with the `vertical` and `horizontal` terms, and display a single UI control for each axial pair (for example, `vertical` controls both the top and bottom sides). A spacing property may support arbitrary individual sides **or** axial sides, but not a mix of both.


Expand Down