Skip to content

Commit

Permalink
Docs: Add link color suppots to Block API docs (#32936)
Browse files Browse the repository at this point in the history
  • Loading branch information
mkaz authored Jun 25, 2021
1 parent 81223fe commit 31e6c0c
Showing 1 changed file with 66 additions and 5 deletions.
71 changes: 66 additions & 5 deletions docs/reference-guides/block-api/block-supports.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,12 @@ supports: {
- `background`: type `boolean`, default value `true`
- `__experimentalDuotone`: type `string`, default value undefined
- `gradients`: type `boolean`, default value `false`
- `link`: type `boolean`, default value `false`
- `text`: type `boolean`, default value `true`

This value signals that a block supports some of the properties related to color. When it does, the block editor will show UI controls for the user to set their values.

Note that the `text` and `background` keys have a default value of `true`, so if the `color` property is present they'll also be considered enabled:
Note that the `background` and `text` keys have a default value of `true`, so if the `color` property is present they'll also be considered enabled:

```js
supports: {
Expand Down Expand Up @@ -122,7 +123,7 @@ When color support is declared, this property is enabled by default (along with

```js
supports: {
color: true // Enable both background and text
color: true // Enables background and text
}
```

Expand Down Expand Up @@ -273,6 +274,66 @@ When the block declares support for `color.gradient`, the attributes definition
}
```

### color.link

This property adds block controls which allow the user to set link color in a block, link color is disabled by default.


```js
supports: {
color: true // Enables only background and text
}
```

To enable link color support, set to `true`.

```js
supports: {
color: {
link: true
}
}
```

Link color presets are sourced from the `editor-color-palette` [theme support](/docs/how-to-guides/themes/theme-support.md#block-color-palettes).


When the block declares support for `color.link`, the attributes definition is extended to include two new attributes: `linkColor` and `style`:

- `linkColor`: attribute of `string` type with no default assigned.

When a user chooses from the list of preset link colors, the preset slug is stored in the `linkColor` attribute.

The block can apply a default preset text color by specifying its own attribute with a default e.g.:

```js
attributes: {
linkColor: {
type: 'string',
default: 'some-preset-link-color-slug',
}
}
```

- `style`: attribute of `object` type with no default assigned.

When a custom link color is selected (i.e. using the custom color picker), the custom color value is stored in the `style.color.link` attribute.

The block can apply a default custom link color by specifying its own attribute with a default e.g.:

```js
attributes: {
style: {
type: 'object',
default: {
color: {
link: '#ff0000',
}
}
}
}
```

### color.text

This property adds block controls which allow the user to set text color in a block.
Expand All @@ -281,7 +342,7 @@ When color support is declared, this property is enabled by default (along with

```js
supports: {
color: true // Enable both text and background
color: true // Enables background and text, but not link.
}
```

Expand All @@ -290,7 +351,7 @@ To disable text color support while keeping other color supports enabled, set to
```js
supports: {
color: {
// Disable text color support. Background support is still enabled.
// Disable text color support.
text: false
}
}
Expand Down Expand Up @@ -524,4 +585,4 @@ supports: {
}
```

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.
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.

0 comments on commit 31e6c0c

Please sign in to comment.