Skip to content

Commit

Permalink
Update spacing support docs for margin
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw committed Apr 30, 2021
1 parent c5bd1a3 commit d8bf09e
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 2 deletions.
7 changes: 7 additions & 0 deletions docs/how-to-guides/themes/theme-json.md
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@ The settings section has the following structure and default values:
},
"custom": { ... },
"spacing": {
"customMargin": false, /* true to opt-in */
"customPadding": false, /* true to opt-in, as in add_theme_support('custom-spacing') */
"units": [ "px", "em", "rem", "vh", "vw" ], /* filter values, as in add_theme_support('custom-units', ... ) */
},
Expand Down Expand Up @@ -377,6 +378,12 @@ Each block declares which style properties it exposes via the [block supports me
"text": "value"
},
"spacing": {
"margin": {
"top": "value",
"right": "value",
"bottom": "value",
"left": "value"
},
"padding": {
"top": "value",
"right": "value",
Expand Down
7 changes: 5 additions & 2 deletions docs/reference-guides/block-api/block-supports.md
Original file line number Diff line number Diff line change
Expand Up @@ -497,26 +497,29 @@ supports: {
- Type: `Object`
- Default value: null
- Subproperties:
- `margin`: type `boolean` or `array`, default value `false`
- `padding`: type `boolean` or `array`, 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).

```js
supports: {
spacing: {
margin: true, // Enable margin UI control.
padding: true, // Enable padding UI control.
}
}
```

When the block declares support for a specific spacing property, the attributes definition is extended to include the `style` attribute.

- `style`: attribute of `object` type with no default assigned. This is added when `padding` support is declared. It stores the custom values set by the user.
- `style`: attribute of `object` type with no default assigned. This is added when `margin` or `padding` support is declared. It stores the custom values set by the user.

```js
supports: {
spacing: {
padding: [ 'top', 'bottom' ], // Enable padding for arbitrary sides.
margin: [ 'top', 'bottom' ], // Enable margin for arbitrary sides.
padding: true, // Enable padding for all sides.
}
}
```
Expand Down

0 comments on commit d8bf09e

Please sign in to comment.