From 8d73c3e99418f980f534060c649c05c2e11b9ed5 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 23 Jun 2021 11:11:12 -0700 Subject: [PATCH 1/2] Add link color supports to block API docs --- .../block-api/block-supports.md | 73 +++++++++++++++++-- 1 file changed, 68 insertions(+), 5 deletions(-) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 3a5e4be2c761e8..5af3b40ba46f94 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -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: ```js supports: { @@ -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 } ``` @@ -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. @@ -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 } ``` @@ -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 } } @@ -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. \ No newline at end of file +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. From f11646d00932f9e1bddd7ef70645428575a737b4 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Thu, 24 Jun 2021 09:32:40 -0700 Subject: [PATCH 2/2] Fix default value link=false --- .../block-api/block-supports.md | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 5af3b40ba46f94..6750e3681d42d0 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -88,12 +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` + - `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 `background`, `link`, and `text` 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: { @@ -123,7 +123,7 @@ When color support is declared, this property is enabled by default (along with ```js supports: { - color: true // Enables background, link, and text + color: true // Enables background and text } ``` @@ -276,23 +276,21 @@ 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. +This property adds block controls which allow the user to set link color in a block, link color is disabled by default. -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 + color: true // Enables only background and text } ``` -To disable link color support while keeping other color supports enabled, set to `false`. +To enable link color support, set to `true`. ```js supports: { color: { - // Disable link color support. Background and text support is still enabled. - link: false + link: true } } ``` @@ -344,7 +342,7 @@ When color support is declared, this property is enabled by default (along with ```js supports: { - color: true // Enables background, link, and text + color: true // Enables background and text, but not link. } ``` @@ -353,7 +351,7 @@ To disable text color support while keeping other color supports enabled, set to ```js supports: { color: { - // Disable text color support. Background and link support is still enabled. + // Disable text color support. text: false } }