From 41480b19afe4fb480bca376e24e5c1d2284bae3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 28 May 2020 11:50:49 +0200 Subject: [PATCH 01/15] Take block data from block.json --- lib/global-styles.php | 101 ++++++++++-------- packages/block-library/src/columns/block.json | 1 + packages/block-library/src/group/block.json | 1 + packages/block-library/src/heading/block.json | 8 ++ .../block-library/src/media-text/block.json | 1 + .../block-library/src/paragraph/block.json | 1 + 6 files changed, 67 insertions(+), 46 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index c2f9eb250646fc..ff756933aa6b2d 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -259,58 +259,67 @@ function gutenberg_experimental_global_styles_get_theme() { * @return array */ function gutenberg_experimental_global_styles_get_block_data() { - // TODO: this data should be taken from the block registry. - // - // At the moment this array replicates the current capabilities - // declared by blocks via __experimentalLineHeight, - // __experimentalColor, and __experimentalFontSize. $block_data = array( - 'global' => array( + 'global' => array( 'selector' => ':root', 'supports' => array(), // By being blank, the 'global' section won't output any style yet. ), - 'core/paragraph' => array( - 'selector' => 'p', - 'supports' => array( 'line-height', 'font-size', 'color' ), - ), - 'core/heading/h1' => array( - 'selector' => 'h1', - 'supports' => array( 'line-height', 'font-size', 'color' ), - ), - 'core/heading/h2' => array( - 'selector' => 'h2', - 'supports' => array( 'line-height', 'font-size', 'color' ), - ), - 'core/heading/h3' => array( - 'selector' => 'h3', - 'supports' => array( 'line-height', 'font-size', 'color' ), - ), - 'core/heading/h4' => array( - 'selector' => 'h4', - 'supports' => array( 'line-height', 'font-size', 'color' ), - ), - 'core/heading/h5' => array( - 'selector' => 'h5', - 'supports' => array( 'line-height', 'font-size', 'color' ), - ), - 'core/heading/h6' => array( - 'selector' => 'h6', - 'supports' => array( 'line-height', 'font-size', 'color' ), - ), - 'core/columns' => array( - 'selector' => '.wp-block-columns', - 'supports' => array( 'color' ), - ), - 'core/group' => array( - 'selector' => '.wp-block-group', - 'supports' => array( 'color' ), - ), - 'core/media-text' => array( - 'selector' => '.wp-block-media-text', - 'supports' => array( 'color' ), - ), ); + $supported_features = array( + 'color' => '__experimentalColor', + 'line-height' => '__experimentalLineHeight', + 'font-size' => '__experimentalFontSize', + ); + + $registry = WP_Block_Type_Registry::get_instance(); + foreach ( $registry->get_all_registered() as $block_name => $block_type ) { + if ( ! isset( $block_type->selector ) ) { + // Skip the blocks we don't know how to transform to CSS. + continue; + } + + /* + * 1. Filter out the block supports that are falsy: + * we don't want to use disabled properties such as + * __experimentalProperty: false. + * + * 2. From the remaining keys, find the ones + * that are also present in $supported_features. + * + * 3. Take the CSS property names to use from $supported_features. + */ + $supported_block_features = array_keys( + array_intersect( + $supported_features, + array_keys( array_filter( $block_type->supports ) ) + ) + ); + + /* + * Some blocks can declare multiple selectors. + * Examples of this are: + * + * - core/heading represents the H1-H6 HTML elements + * - core/list represents the UL and OL HTML elements + * - core/group is meant to represent DIV and other HTML elements + * + */ + if ( is_string( $block_type->selector ) ) { + $block_data[ $block_name ] = array( + 'selector' => $block_type->selector, + 'supports' => $supported_block_features, + ); + } elseif ( is_array( $block_type->selector ) ) { + foreach ( $block_type->selector as $key => $selector ) { + $block_data[ $block_name . '/' . $key ] = array( + 'selector' => $selector, + 'supports' => $supported_block_features, + ); + } + } + } + return $block_data; } diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index a27c693b8134b8..99daba069b1a08 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -1,6 +1,7 @@ { "name": "core/columns", "category": "design", + "selector": ".wp-block-columns", "attributes": { "verticalAlignment": { "type": "string" diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index ab4e81aa334426..5e75ddda782140 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -1,6 +1,7 @@ { "name": "core/group", "category": "design", + "selector": ".wp-block-group", "attributes": { "tagName": { "type": "string", diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index eb367c9c4bf735..69ed828f515a73 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -1,6 +1,14 @@ { "name": "core/heading", "category": "text", + "selector": { + "h1": "h1", + "h2": "h2", + "h3": "h3", + "h4": "h4", + "h5": "h5", + "h6": "h6" + }, "attributes": { "align": { "type": "string" diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index 71a706fe1f3a69..f311ecdd8139cb 100644 --- a/packages/block-library/src/media-text/block.json +++ b/packages/block-library/src/media-text/block.json @@ -1,6 +1,7 @@ { "name": "core/media-text", "category": "media", + "selector": ".wp-block-media-text", "attributes": { "align": { "type": "string", diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index ae17bc373f2062..4e4e6e540bb63b 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -1,6 +1,7 @@ { "name": "core/paragraph", "category": "text", + "selector": "p", "attributes": { "align": { "type": "string" From 1312f9f1b0200a8b2d86effa4ed59c1e5e0c8a8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 28 May 2020 13:48:58 +0200 Subject: [PATCH 02/15] Enable background --- lib/global-styles.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index ff756933aa6b2d..99bcb82c805b9d 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -262,12 +262,13 @@ function gutenberg_experimental_global_styles_get_block_data() { $block_data = array( 'global' => array( 'selector' => ':root', - 'supports' => array(), // By being blank, the 'global' section won't output any style yet. + 'supports' => array( 'background' ), ), ); $supported_features = array( 'color' => '__experimentalColor', + 'background' => '__experimentalColor', 'line-height' => '__experimentalLineHeight', 'font-size' => '__experimentalFontSize', ); From 5fb5a35b386324b69dff031d0cf6ba306019021b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 28 May 2020 19:11:14 +0200 Subject: [PATCH 03/15] Make selector optional and move it under support as experimental If a block doesn't provide a selector, we'll generate the class name: .wp-{namespace}-{block-name} --- lib/global-styles.php | 46 ++++++++++++++----- packages/block-library/src/columns/block.json | 1 - packages/block-library/src/group/block.json | 1 - packages/block-library/src/heading/block.json | 22 ++++----- .../block-library/src/media-text/block.json | 1 - .../block-library/src/paragraph/block.json | 8 ++-- 6 files changed, 50 insertions(+), 29 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 99bcb82c805b9d..5c006276128f97 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -275,12 +275,11 @@ function gutenberg_experimental_global_styles_get_block_data() { $registry = WP_Block_Type_Registry::get_instance(); foreach ( $registry->get_all_registered() as $block_name => $block_type ) { - if ( ! isset( $block_type->selector ) ) { - // Skip the blocks we don't know how to transform to CSS. - continue; - } - /* + * We only allow certain CSS properties to be used + * within the realm of theme.json. These are taken + * from the block.json of the block. + * * 1. Filter out the block supports that are falsy: * we don't want to use disabled properties such as * __experimentalProperty: false. @@ -290,6 +289,10 @@ function gutenberg_experimental_global_styles_get_block_data() { * * 3. Take the CSS property names to use from $supported_features. */ + if ( ! is_array( $block_type->supports ) ) { + continue; + } + $supported_block_features = array_keys( array_intersect( $supported_features, @@ -298,26 +301,47 @@ function gutenberg_experimental_global_styles_get_block_data() { ); /* - * Some blocks can declare multiple selectors. - * Examples of this are: + * Assign the selector for the block. + * + * Some blocks can declare multiple selectors: * * - core/heading represents the H1-H6 HTML elements * - core/list represents the UL and OL HTML elements * - core/group is meant to represent DIV and other HTML elements * + * Some other blocks don't provide a selector, + * so we generate a class for them based on their name: + * + * - 'core/paragraph' => '.wp-block-paragraph' + * - 'my-custom-library/block-name' => '.wp-block-my-custom-library-block-name' + * + * Note that, for core blocks, we don't use the `core/` prefix from its name. + * This is for historical reasons, as they already come with a class without that infix. + * */ - if ( is_string( $block_type->selector ) ) { + if ( + isset( $block_type->supports['__experimentalSelector'] ) && + is_string( $block_type->supports['__experimentalSelector'] ) + ) { $block_data[ $block_name ] = array( - 'selector' => $block_type->selector, + 'selector' => $block_type->supports['__experimentalSelector'], 'supports' => $supported_block_features, ); - } elseif ( is_array( $block_type->selector ) ) { - foreach ( $block_type->selector as $key => $selector ) { + } elseif ( + isset( $block_type->supports['__experimentalSelector'] ) && + is_array( $block_type->supports['__experimentalSelector'] ) + ) { + foreach ( $block_type->supports['__experimentalSelector'] as $key => $selector ) { $block_data[ $block_name . '/' . $key ] = array( 'selector' => $selector, 'supports' => $supported_block_features, ); } + } else { + $block_data[ $block_name ] = array( + 'selector' => '.wp-block-' . preg_replace( '/\//', '-', preg_replace( '/core\//', '', $block_name ) ), + 'supports' => $supported_block_features, + ); } } diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index 99daba069b1a08..a27c693b8134b8 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -1,7 +1,6 @@ { "name": "core/columns", "category": "design", - "selector": ".wp-block-columns", "attributes": { "verticalAlignment": { "type": "string" diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 5e75ddda782140..ab4e81aa334426 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -1,7 +1,6 @@ { "name": "core/group", "category": "design", - "selector": ".wp-block-group", "attributes": { "tagName": { "type": "string", diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index 69ed828f515a73..f156976ebf64af 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -1,14 +1,6 @@ { "name": "core/heading", "category": "text", - "selector": { - "h1": "h1", - "h2": "h2", - "h3": "h3", - "h4": "h4", - "h5": "h5", - "h6": "h6" - }, "attributes": { "align": { "type": "string" @@ -28,12 +20,20 @@ } }, "supports": { - "className": false, "anchor": true, - "__unstablePasteTextInline": true, + "className": false, "lightBlockWrapper": true, "__experimentalColor": true, + "__experimentalFontSize": true, "__experimentalLineHeight": true, - "__experimentalFontSize": true + "__experimentalSelector": { + "h1": "h1", + "h2": "h2", + "h3": "h3", + "h4": "h4", + "h5": "h5", + "h6": "h6" + }, + "__unstablePasteTextInline": true } } diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index f311ecdd8139cb..71a706fe1f3a69 100644 --- a/packages/block-library/src/media-text/block.json +++ b/packages/block-library/src/media-text/block.json @@ -1,7 +1,6 @@ { "name": "core/media-text", "category": "media", - "selector": ".wp-block-media-text", "attributes": { "align": { "type": "string", diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 4e4e6e540bb63b..c7897c8f92ac08 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -1,7 +1,6 @@ { "name": "core/paragraph", "category": "text", - "selector": "p", "attributes": { "align": { "type": "string" @@ -29,15 +28,16 @@ }, "supports": { "className": false, - "__unstablePasteTextInline": true, "lightBlockWrapper": true, "__experimentalColor": true, - "__experimentalLineHeight": true, "__experimentalFontSize": true, + "__experimentalLineHeight": true, "__experimentalFeatures": { "typography": { "dropCap": true } - } + }, + "__experimentalSelector": "p", + "__unstablePasteTextInline": true } } From 40a45e90f29f2c47dd220853d2c22d6dc291c31d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 29 May 2020 16:22:58 +0200 Subject: [PATCH 04/15] Enable background-color --- .../developers/themes/theme-json.md | 5 +++-- lib/global-styles.php | 10 +++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md index 987acc0b866ae2..3cebef4482036f 100644 --- a/docs/designers-developers/developers/themes/theme-json.md +++ b/docs/designers-developers/developers/themes/theme-json.md @@ -153,8 +153,9 @@ Each block will declare which style properties it exposes. This has been coined The list of properties that are currently exposed via this method are: -- Paragraph and Heading: line-height, font-size, color. -- Group, Columns, and MediaText: color. +- Global: background-color. +- Paragraph and Heading: line-height, font-size, color, background-color. +- Group, Columns, and MediaText: color, background-color. ### Features diff --git a/lib/global-styles.php b/lib/global-styles.php index 5c006276128f97..f5805203061509 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -262,15 +262,15 @@ function gutenberg_experimental_global_styles_get_block_data() { $block_data = array( 'global' => array( 'selector' => ':root', - 'supports' => array( 'background' ), + 'supports' => array( 'background-color' ), ), ); $supported_features = array( - 'color' => '__experimentalColor', - 'background' => '__experimentalColor', - 'line-height' => '__experimentalLineHeight', - 'font-size' => '__experimentalFontSize', + 'color' => '__experimentalColor', + 'background-color' => '__experimentalColor', + 'line-height' => '__experimentalLineHeight', + 'font-size' => '__experimentalFontSize', ); $registry = WP_Block_Type_Registry::get_instance(); From c9db0871307585bcd4c3ebf65f9d2be2ff6f22e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 29 May 2020 17:43:56 +0200 Subject: [PATCH 05/15] Update how object selectors are processed --- lib/global-styles.php | 6 +++++- packages/block-library/src/heading/block.json | 13 +++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index f5805203061509..872bdb7b99b3af 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -300,6 +300,10 @@ function gutenberg_experimental_global_styles_get_block_data() { ) ); + if ( empty( $supported_block_features ) ) { + continue; + } + /* * Assign the selector for the block. * @@ -332,7 +336,7 @@ function gutenberg_experimental_global_styles_get_block_data() { is_array( $block_type->supports['__experimentalSelector'] ) ) { foreach ( $block_type->supports['__experimentalSelector'] as $key => $selector ) { - $block_data[ $block_name . '/' . $key ] = array( + $block_data[ $key ] = array( 'selector' => $selector, 'supports' => $supported_block_features, ); diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index f156976ebf64af..7af65486636659 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -27,12 +27,13 @@ "__experimentalFontSize": true, "__experimentalLineHeight": true, "__experimentalSelector": { - "h1": "h1", - "h2": "h2", - "h3": "h3", - "h4": "h4", - "h5": "h5", - "h6": "h6" + "core/heading": "h1, h2, h3, h4, h5, h6", + "core/heading/h1": "h1", + "core/heading/h2": "h2", + "core/heading/h3": "h3", + "core/heading/h4": "h4", + "core/heading/h5": "h5", + "core/heading/h6": "h6" }, "__unstablePasteTextInline": true } From 6582c3e73527c7db4235073163317ab70e053bc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 29 May 2020 18:05:39 +0200 Subject: [PATCH 06/15] Add background to supported features --- lib/global-styles.php | 49 +++++++++++++++++++++++++++---------------- 1 file changed, 31 insertions(+), 18 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 872bdb7b99b3af..cb9ecf16619b20 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -253,6 +253,32 @@ function gutenberg_experimental_global_styles_get_theme() { return $theme_config; } +/** + * Returns the style features a particular block supports. + * + * @param array $supports The block supports array. + * + * @return array Style features supported by the block. + */ +function gutenberg_experimental_global_styles_get_supported_styles( $supports ) { + $style_features = array( + 'color' => array( '__experimentalColor' ), + 'background-color' => array( '__experimentalColor' ), + 'background' => array( '__experimentalColor', 'gradients' ), + 'line-height' => array( '__experimentalLineHeight' ), + 'font-size' => array( '__experimentalFontSize' ), + ); + + $supported_features = array(); + foreach ( $style_features as $style_feature => $path ) { + if ( gutenberg_experimental_get( $supports, $path ) ) { + $supported_features[] = $style_feature; + } + } + + return $supported_features; +} + /** * Retrieves the block data (selector/supports). * @@ -266,13 +292,6 @@ function gutenberg_experimental_global_styles_get_block_data() { ), ); - $supported_features = array( - 'color' => '__experimentalColor', - 'background-color' => '__experimentalColor', - 'line-height' => '__experimentalLineHeight', - 'font-size' => '__experimentalFontSize', - ); - $registry = WP_Block_Type_Registry::get_instance(); foreach ( $registry->get_all_registered() as $block_name => $block_type ) { /* @@ -293,14 +312,8 @@ function gutenberg_experimental_global_styles_get_block_data() { continue; } - $supported_block_features = array_keys( - array_intersect( - $supported_features, - array_keys( array_filter( $block_type->supports ) ) - ) - ); - - if ( empty( $supported_block_features ) ) { + $supports = gutenberg_experimental_global_styles_get_supported_styles( $block_type->supports ); + if ( empty( $supports ) ) { continue; } @@ -329,7 +342,7 @@ function gutenberg_experimental_global_styles_get_block_data() { ) { $block_data[ $block_name ] = array( 'selector' => $block_type->supports['__experimentalSelector'], - 'supports' => $supported_block_features, + 'supports' => $supports, ); } elseif ( isset( $block_type->supports['__experimentalSelector'] ) && @@ -338,13 +351,13 @@ function gutenberg_experimental_global_styles_get_block_data() { foreach ( $block_type->supports['__experimentalSelector'] as $key => $selector ) { $block_data[ $key ] = array( 'selector' => $selector, - 'supports' => $supported_block_features, + 'supports' => $supports, ); } } else { $block_data[ $block_name ] = array( 'selector' => '.wp-block-' . preg_replace( '/\//', '-', preg_replace( '/core\//', '', $block_name ) ), - 'supports' => $supported_block_features, + 'supports' => $supports, ); } } From 96f71dda5f1e2c253c6dd43263fec65d01035d7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 29 May 2020 18:07:34 +0200 Subject: [PATCH 07/15] Add docs --- .../developers/themes/theme-json.md | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md index 3cebef4482036f..82fe0313fcf640 100644 --- a/docs/designers-developers/developers/themes/theme-json.md +++ b/docs/designers-developers/developers/themes/theme-json.md @@ -155,7 +155,7 @@ The list of properties that are currently exposed via this method are: - Global: background-color. - Paragraph and Heading: line-height, font-size, color, background-color. -- Group, Columns, and MediaText: color, background-color. +- Group, Columns, and MediaText: color, background-color, background. ### Features @@ -192,7 +192,7 @@ This is being implemented, so it's not currently available. }, core/paragraph: { styles: { - typography: { + typography: { lineHeight: , fontSize: }, @@ -204,7 +204,7 @@ This is being implemented, so it's not currently available. /* core/heading/h1, core/heading/h2, etc */ core/heading/h*: { styles: { - typography: { + typography: { lineHeight: , fontSize: }, @@ -216,21 +216,27 @@ This is being implemented, so it's not currently available. core/columns: { styles: { color: { - text: + text: , + background: , + background-color: , } } }, core/group: { styles: { color: { - text: + text: , + background: , + background-color: , } } }, core/media-text: { styles: { color: { - text: + text: , + background: , + background-color: , } } }, From 12f2de8cc493e70472560daccd7308a834a3e8e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 29 May 2020 18:14:29 +0200 Subject: [PATCH 08/15] Document core/heading/* --- .../developers/themes/theme-json.md | 47 ++++++++++++++++++- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md index 82fe0313fcf640..c7832103c24ebd 100644 --- a/docs/designers-developers/developers/themes/theme-json.md +++ b/docs/designers-developers/developers/themes/theme-json.md @@ -157,6 +157,8 @@ The list of properties that are currently exposed via this method are: - Paragraph and Heading: line-height, font-size, color, background-color. - Group, Columns, and MediaText: color, background-color, background. +Note that, the heading block, represents 6 distinct HTML elements: H1-H6. It comes with selectors to target individual elements (ex: core/heading/h1 for H1) as well a selector to target all of them (core/heading). + ### Features This is being implemented, so it's not currently available. @@ -201,8 +203,49 @@ This is being implemented, so it's not currently available. } } }, - /* core/heading/h1, core/heading/h2, etc */ - core/heading/h*: { + core/heading: { + styles: { + line-height: , + font-size: , + color: , + } + }, + core/heading/h1: { + styles: { + line-height: , + font-size: , + color: , + } + }, + core/heading/h2: { + styles: { + line-height: , + font-size: , + color: , + } + }, + core/heading/h3: { + styles: { + line-height: , + font-size: , + color: , + } + }, + core/heading/h4: { + styles: { + line-height: , + font-size: , + color: , + } + }, + core/heading/h5: { + styles: { + line-height: , + font-size: , + color: , + } + }, + core/heading/h6: { styles: { typography: { lineHeight: , From 9de210b12999ca5e313583053117233c20cf07ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 29 May 2020 19:17:08 +0200 Subject: [PATCH 09/15] Improve docs --- .../developers/themes/theme-json.md | 182 ++++++++++-------- 1 file changed, 103 insertions(+), 79 deletions(-) diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md index c7832103c24ebd..e03ae4ee0fa9f8 100644 --- a/docs/designers-developers/developers/themes/theme-json.md +++ b/docs/designers-developers/developers/themes/theme-json.md @@ -167,121 +167,145 @@ This is being implemented, so it's not currently available. ``` { - global: { - presets: { - color: [ + "global": { + "presets": { + "color": [ { - slug: , - value: , + "slug": , + "value": }, - { ... }, + { } ], - font-size: [ + "font-size": [ { - slug: , - value: , + "slug": , + "value": }, - { ... }, + { } ], - gradient: [ + "gradient": [ { - slug: , - value: , + "slug": , + "value": }, - { ... }, + { } ] } }, - core/paragraph: { - styles: { - typography: { - lineHeight: , - fontSize: + "core/paragraph": { + "styles": { + "typography": { + "fontSize": , + "lineHeight": }, - color: { - text: + "color": { + "text": } } }, - core/heading: { - styles: { - line-height: , - font-size: , - color: , - } - }, - core/heading/h1: { - styles: { - line-height: , - font-size: , - color: , + "core/heading": { + "styles": { + "typography": { + "fontSize": , + "lineHeight": + }, + "color":{ + "text": + } } }, - core/heading/h2: { - styles: { - line-height: , - font-size: , - color: , + "core/heading/h1": { + "styles": { + "typography": { + "fontSize": , + "lineHeight": + }, + "color":{ + "text": + } } }, - core/heading/h3: { - styles: { - line-height: , - font-size: , - color: , + "core/heading/h2": { + "styles": { + "typography": { + "fontSize": , + "lineHeight": + }, + "color":{ + "text": + } } }, - core/heading/h4: { - styles: { - line-height: , - font-size: , - color: , + "core/heading/h3": { + "styles": { + "typography": { + "fontSize": , + "lineHeight": + }, + "color":{ + "text": + } } }, - core/heading/h5: { - styles: { - line-height: , - font-size: , - color: , + "core/heading/h4": { + "styles": { + "typography": { + "fontSize": , + "lineHeight": + }, + "color":{ + "text": + } } }, - core/heading/h6: { - styles: { - typography: { - lineHeight: , - fontSize: + "core/heading/h5": { + "styles": { + "typography": { + "fontSize": , + "lineHeight": }, - color: { - text: + "color":{ + "text": } } }, - core/columns: { - styles: { - color: { - text: , - background: , - background-color: , + "core/heading/h6": { + "styles": { + "typography": { + "fontSize": , + "lineHeight": + }, + "color":{ + "text": } } }, - core/group: { - styles: { - color: { - text: , - background: , - background-color: , + "core/columns": { + "styles": { + "color": { + "background": , + "background-color": , + "text": } } }, - core/media-text: { - styles: { - color: { - text: , - background: , - background-color: , + "core/group": { + "styles": { + "color": { + "background": , + "background-color": , + "text": + } } - } }, + "core/media-text": { + "styles": { + "color": { + "background": , + "background-color": , + "text": + } + } + } } ``` From 7457a1b5aed5571b05c5a64e35df6b88b2350da9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 1 Jun 2020 11:45:35 +0200 Subject: [PATCH 10/15] Inform about JSON errors --- lib/global-styles.php | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/lib/global-styles.php b/lib/global-styles.php index cb9ecf16619b20..071141cc37b0ae 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -80,6 +80,13 @@ function gutenberg_experimental_global_styles_get_from_file( $file_path ) { file_get_contents( $file_path ), true ); + + $json_decoding_error = json_last_error_msg(); + if ( 'No error' !== $json_decoding_error ) { + error_log( 'Error when decoding file schema: ' . $json_decoding_error ); + return $config; + } + if ( is_array( $decoded_file ) ) { $config = $decoded_file; } @@ -97,6 +104,13 @@ function gutenberg_experimental_global_styles_get_user() { $user_cpt = gutenberg_experimental_global_styles_get_user_cpt( array( 'publish' ) ); if ( array_key_exists( 'post_content', $user_cpt ) ) { $decoded_data = json_decode( $user_cpt['post_content'], true ); + + $json_decoding_error = json_last_error_msg(); + if ( 'No error' !== $json_decoding_error ) { + error_log( 'Error when decoding user schema: ' . $json_decoding_error ); + return $config; + } + if ( is_array( $decoded_data ) ) { $config = $decoded_data; } From 04f410b7aafe2229ed7defb4c7a24a7768c8988d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 1 Jun 2020 12:34:01 +0200 Subject: [PATCH 11/15] Update docs --- .../developers/themes/theme-json.md | 72 ++++++++++--------- 1 file changed, 39 insertions(+), 33 deletions(-) diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md index e03ae4ee0fa9f8..cb1a39c69a429d 100644 --- a/docs/designers-developers/developers/themes/theme-json.md +++ b/docs/designers-developers/developers/themes/theme-json.md @@ -6,9 +6,9 @@ This is documentation for the current direction and work in progress about how themes can hook into the various sub-systems that the Block Editor provides. -* Rationale -* Specification -* Current Status +- Rationale +- Specification +- Current Status ## Rationale @@ -153,11 +153,16 @@ Each block will declare which style properties it exposes. This has been coined The list of properties that are currently exposed via this method are: -- Global: background-color. -- Paragraph and Heading: line-height, font-size, color, background-color. -- Group, Columns, and MediaText: color, background-color, background. +| 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 | - | - | -Note that, the heading block, represents 6 distinct HTML elements: H1-H6. It comes with selectors to target individual elements (ex: core/heading/h1 for H1) as well a selector to target all of them (core/heading). +[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). ### Features @@ -190,6 +195,11 @@ This is being implemented, so it's not currently available. }, { } ] + }, + "styles: { + "color: { + "background": + } } }, "core/paragraph": { @@ -199,17 +209,7 @@ This is being implemented, so it's not currently available. "lineHeight": }, "color": { - "text": - } - } - }, - "core/heading": { - "styles": { - "typography": { - "fontSize": , - "lineHeight": - }, - "color":{ + "background": , "text": } } @@ -220,7 +220,8 @@ This is being implemented, so it's not currently available. "fontSize": , "lineHeight": }, - "color":{ + "color": { + "background": , "text": } } @@ -231,7 +232,8 @@ This is being implemented, so it's not currently available. "fontSize": , "lineHeight": }, - "color":{ + "color": { + "background": , "text": } } @@ -242,7 +244,8 @@ This is being implemented, so it's not currently available. "fontSize": , "lineHeight": }, - "color":{ + "color": { + "background": , "text": } } @@ -253,7 +256,8 @@ This is being implemented, so it's not currently available. "fontSize": , "lineHeight": }, - "color":{ + "color": { + "background": , "text": } } @@ -264,7 +268,8 @@ This is being implemented, so it's not currently available. "fontSize": , "lineHeight": }, - "color":{ + "color": { + "background": , "text": } } @@ -275,7 +280,8 @@ This is being implemented, so it's not currently available. "fontSize": , "lineHeight": }, - "color":{ + "color": { + "background": , "text": } } @@ -283,27 +289,27 @@ This is being implemented, so it's not currently available. "core/columns": { "styles": { "color": { - "background": , - "background-color": , - "text": + "background": , + "gradient": , + "text": } } }, "core/group": { "styles": { "color": { - "background": , - "background-color": , - "text": + "background": , + "gradient": , + "text": } } }, "core/media-text": { "styles": { "color": { - "background": , - "background-color": , - "text": + "background": , + "gradient": , + "text": } } } From df3bac31637311af11dd393b0f13a2e24409d4c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 1 Jun 2020 12:38:24 +0200 Subject: [PATCH 12/15] Remove general selector --- packages/block-library/src/heading/block.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index 7af65486636659..d47b35c26eebe1 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -27,7 +27,6 @@ "__experimentalFontSize": true, "__experimentalLineHeight": true, "__experimentalSelector": { - "core/heading": "h1, h2, h3, h4, h5, h6", "core/heading/h1": "h1", "core/heading/h2": "h2", "core/heading/h3": "h3", From b923780ee37c820f1ab30a9d8dd0eae963e43027 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 1 Jun 2020 12:50:30 +0200 Subject: [PATCH 13/15] Update comments --- lib/global-styles.php | 20 +++----------------- 1 file changed, 3 insertions(+), 17 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 071141cc37b0ae..110cdee1907186 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -308,20 +308,6 @@ function gutenberg_experimental_global_styles_get_block_data() { $registry = WP_Block_Type_Registry::get_instance(); foreach ( $registry->get_all_registered() as $block_name => $block_type ) { - /* - * We only allow certain CSS properties to be used - * within the realm of theme.json. These are taken - * from the block.json of the block. - * - * 1. Filter out the block supports that are falsy: - * we don't want to use disabled properties such as - * __experimentalProperty: false. - * - * 2. From the remaining keys, find the ones - * that are also present in $supported_features. - * - * 3. Take the CSS property names to use from $supported_features. - */ if ( ! is_array( $block_type->supports ) ) { continue; } @@ -343,11 +329,11 @@ function gutenberg_experimental_global_styles_get_block_data() { * Some other blocks don't provide a selector, * so we generate a class for them based on their name: * - * - 'core/paragraph' => '.wp-block-paragraph' + * - 'core/group' => '.wp-block-group' * - 'my-custom-library/block-name' => '.wp-block-my-custom-library-block-name' * - * Note that, for core blocks, we don't use the `core/` prefix from its name. - * This is for historical reasons, as they already come with a class without that infix. + * Note that, for core blocks, we don't add the `core/` prefix to its class name. + * This is for historical reasons, as they come with a class without that infix. * */ if ( From 7f94cf99de2df20c607a96a3b9d0d96c44b63e23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 2 Jun 2020 16:48:05 +0200 Subject: [PATCH 14/15] Use str_replace instead of preg_replace --- lib/global-styles.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 110cdee1907186..31438c3215632c 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -356,7 +356,7 @@ function gutenberg_experimental_global_styles_get_block_data() { } } else { $block_data[ $block_name ] = array( - 'selector' => '.wp-block-' . preg_replace( '/\//', '-', preg_replace( '/core\//', '', $block_name ) ), + 'selector' => '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) ), 'supports' => $supports, ); } From 41d378bdc6505e28b6121fb5ec1ec9f352fe0539 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 2 Jun 2020 16:52:34 +0200 Subject: [PATCH 15/15] Check error code instead of string --- lib/global-styles.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 31438c3215632c..a46473c3a2d772 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -81,9 +81,9 @@ function gutenberg_experimental_global_styles_get_from_file( $file_path ) { true ); - $json_decoding_error = json_last_error_msg(); - if ( 'No error' !== $json_decoding_error ) { - error_log( 'Error when decoding file schema: ' . $json_decoding_error ); + $json_decoding_error = json_last_error(); + if ( JSON_ERROR_NONE !== $json_decoding_error ) { + error_log( 'Error when decoding file schema: ' . json_last_error_msg() ); return $config; } @@ -105,9 +105,9 @@ function gutenberg_experimental_global_styles_get_user() { if ( array_key_exists( 'post_content', $user_cpt ) ) { $decoded_data = json_decode( $user_cpt['post_content'], true ); - $json_decoding_error = json_last_error_msg(); - if ( 'No error' !== $json_decoding_error ) { - error_log( 'Error when decoding user schema: ' . $json_decoding_error ); + $json_decoding_error = json_last_error(); + if ( JSON_ERROR_NONE !== $json_decoding_error ) { + error_log( 'Error when decoding user schema: ' . json_last_error_msg() ); return $config; }