From 6e3cf0b4b550747b3913f99599f126ccf0a2a20f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 5 Jun 2020 11:16:27 +0200 Subject: [PATCH] Document link color --- .../developers/themes/theme-json.md | 59 +++++++++++++++---- 1 file changed, 46 insertions(+), 13 deletions(-) diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md index 161ca5f9d7c55..8a523a264fafa 100644 --- a/docs/designers-developers/developers/themes/theme-json.md +++ b/docs/designers-developers/developers/themes/theme-json.md @@ -16,8 +16,6 @@ The Block Editor surface API has evolved at different velocities, and it's now a This describes the current efforts to consolidate the various APIs into a single point – a `experimental-theme.json` file that should be located inside the root of the theme directory. -When this file is present a few Block Editor mechanisms are activated. - ### Presets become CSS Custom Properties Presets such as [color palettes](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes), [font sizes](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-font-sizes), and [gradients](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-gradient-presets) will be enqueued as CSS Custom Properties for themes to use. @@ -98,7 +96,7 @@ Some of the functions are context-dependant. Take, as an example, the drop cap: } ``` -In the example above, we aim to encapsulate that the drop cap should be disabled globally but enabled in the paragraph context. The drop cap in the Image block context wouldn't make sense based on the current implementation so would be ignored, but it could be used by plugins that extend its functionality. +In the example above, we aim to encapsulate that the drop cap should be disabled globally but enabled in the paragraph context. Based on the current implementation, the drop cap in the Image block context wouldn't make sense so it would be ignored (but it could be used by plugins that extend its functionality). ## Current Status @@ -159,16 +157,29 @@ If the `experimental-theme.json` contains any presets, these will take precedenc Each block will declare which style properties it exposes. This has been coined as "implicit style attributes" of the block. These properties are then used to automatically generate the UI controls for the block in the editor, as well as being available through the `experimental-theme.json` file for themes to target. -The list of properties that are currently exposed via this method are: +#### Color Properties + +| Context | Background | Gradient | Link | Text | +| --- | --- | --- | --- | --- | +| Global | Yes | - | - | - | +| Paragraph | Yes | - | Yes | Yes | +| Heading [1] | Yes | - | Yes | Yes | +| Group | Yes | Yes | Yes | Yes | +| Columns | Yes | Yes | Yes | Yes | +| Media & text | Yes | Yes | Yes | Yes | + +[1] The heading block represents 6 distinct HTML elements: H1-H6. It comes with selectors to target each individual element (ex: core/heading/h1 for H1, etc). + +#### Typography Properties -| Context | Text's Color | Background's Color | Background's Gradient | Font Size | Line Height | -| --- | --- | --- | --- | --- | --- | -| Global | - | Yes | - | - | - | -| Paragraph | Yes | Yes | - | Yes | Yes | -| Heading [1] | Yes | Yes | - | Yes | Yes | -| Group | Yes | Yes | Yes | - | - | -| Columns | Yes | Yes | Yes | - | - | -| Media & text | Yes | Yes | Yes | - | - | +| Context | Font Size | Line Height | +| --- | --- | --- | +| Global | - | - | +| Paragraph | Yes | Yes | +| Heading [1] | Yes | Yes | +| Group | - | - | +| Columns | - | - | +| Media & text | - | - | [1] The heading block represents 6 distinct HTML elements: H1-H6. It comes with selectors to target each individual element (ex: core/heading/h1 for H1, etc). @@ -245,13 +256,14 @@ The list of features that are currently supported are: "styles: { "color: { "background": - } + } } }, "core/paragraph": { "styles": { "color": { "background": , + "link": , "text": }, "typography": { @@ -264,6 +276,7 @@ The list of features that are currently supported are: "styles": { "color": { "background": , + "link": , "text": }, "typography": { @@ -276,6 +289,7 @@ The list of features that are currently supported are: "styles": { "color": { "background": , + "link": , "text": }, "typography": { @@ -288,6 +302,20 @@ The list of features that are currently supported are: "styles": { "color": { "background": , + "link": , + "text": + }, + "typography": { + "fontSize": , + "lineHeight": + } + } + }, + "core/heading/h4": { + "styles": { + "color": { + "background": , + "link": , "text": }, "typography": { @@ -300,6 +328,7 @@ The list of features that are currently supported are: "styles": { "color": { "background": , + "link": , "text": }, "typography": { @@ -312,6 +341,7 @@ The list of features that are currently supported are: "styles": { "color": { "background": , + "link": , "text": }, "typography": { @@ -325,6 +355,7 @@ The list of features that are currently supported are: "color": { "background": , "gradient": , + "link": , "text": } } @@ -334,6 +365,7 @@ The list of features that are currently supported are: "color": { "background": , "gradient": , + "link": , "text": } } @@ -343,6 +375,7 @@ The list of features that are currently supported are: "color": { "background": , "gradient": , + "link": , "text": } }