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

Docs: Add link color suppots to Block API docs #32936

Merged
merged 2 commits into from
Jun 25, 2021
Merged
Changes from 1 commit
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
73 changes: 68 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 `true`
- `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`, `link`, and `text` keys have a default value of `true`, so if the `color` property is present they'll also be considered enabled:
mkaz marked this conversation as resolved.
Show resolved Hide resolved

```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, link, and text
}
```

Expand Down Expand Up @@ -273,6 +274,68 @@ 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.

When color support is declared, this property is enabled by default, so simply setting color will enable.

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

To disable link color support while keeping other color supports enabled, set to `false`.

```js
supports: {
color: {
// Disable link color support. Background and text support is still enabled.
link: false
}
}
```

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 +344,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, link, and text
}
```

Expand All @@ -290,7 +353,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. Background and link support is still enabled.
text: false
}
}
Expand Down Expand Up @@ -524,4 +587,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.