From bcadc225912eb6f13e1b25c6cf59364185d59e56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 18 Feb 2020 17:53:46 +0100 Subject: [PATCH 01/49] Merge try/global-styles-at-blocks --- lib/global-styles.php | 8 ++++++++ packages/block-library/src/global.scss | 5 +++++ packages/block-library/src/heading/global.scss | 11 +++++++++++ packages/block-library/src/list/global.scss | 6 ++++++ packages/block-library/src/paragraph/global.scss | 5 +++++ packages/block-library/src/pullquote/global.scss | 11 +++++++++++ packages/block-library/src/pullquote/theme.scss | 8 ++++---- packages/block-library/src/quote/global.scss | 11 +++++++++++ packages/block-library/src/quote/theme.scss | 6 +++--- packages/block-library/src/table/style.scss | 4 ++-- packages/block-library/src/verse/editor.scss | 2 +- 11 files changed, 67 insertions(+), 10 deletions(-) create mode 100644 packages/block-library/src/global.scss create mode 100644 packages/block-library/src/heading/global.scss create mode 100644 packages/block-library/src/list/global.scss create mode 100644 packages/block-library/src/paragraph/global.scss create mode 100644 packages/block-library/src/pullquote/global.scss create mode 100644 packages/block-library/src/quote/global.scss diff --git a/lib/global-styles.php b/lib/global-styles.php index 8101bf41707f5b..3f7e76a99de3c8 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -265,6 +265,14 @@ function gutenberg_experimental_global_styles_enqueue_assets() { wp_register_style( 'global-styles', false, array(), true, true ); wp_add_inline_style( 'global-styles', $inline_style ); wp_enqueue_style( 'global-styles' ); + + wp_register_style( + 'global-styles-block-library', + gutenberg_url( 'build/block-library/global.css' ), + array(), + filemtime( gutenberg_dir_path() . 'build/block-library/global.css' ) + ); + wp_enqueue_style( 'global-styles-block-library' ); } /** diff --git a/packages/block-library/src/global.scss b/packages/block-library/src/global.scss new file mode 100644 index 00000000000000..0c6581d76dae7c --- /dev/null +++ b/packages/block-library/src/global.scss @@ -0,0 +1,5 @@ +@import "./paragraph/global.scss"; +@import "./heading/global.scss"; +@import "./list/global.scss"; +@import "./quote/global.scss"; +@import "./pullquote/global.scss"; diff --git a/packages/block-library/src/heading/global.scss b/packages/block-library/src/heading/global.scss new file mode 100644 index 00000000000000..9d9ce6371f5ed3 --- /dev/null +++ b/packages/block-library/src/heading/global.scss @@ -0,0 +1,11 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--wp--color--foreground--headings); + font-size: var(--wp--type--size--headings); + font-weight: var(--wp--type--weight); + line-height: var(--wp--type--line-height--headings); +} diff --git a/packages/block-library/src/list/global.scss b/packages/block-library/src/list/global.scss new file mode 100644 index 00000000000000..2e8eb6cdd28302 --- /dev/null +++ b/packages/block-library/src/list/global.scss @@ -0,0 +1,6 @@ +ul, +ol { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--base); + line-height: var(--wp--type--line-height--base); +} diff --git a/packages/block-library/src/paragraph/global.scss b/packages/block-library/src/paragraph/global.scss new file mode 100644 index 00000000000000..05aa7cb68ebc89 --- /dev/null +++ b/packages/block-library/src/paragraph/global.scss @@ -0,0 +1,5 @@ +p { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--base); + line-height: var(--wp--type--line-height--base); +} diff --git a/packages/block-library/src/pullquote/global.scss b/packages/block-library/src/pullquote/global.scss new file mode 100644 index 00000000000000..a0a985013315e9 --- /dev/null +++ b/packages/block-library/src/pullquote/global.scss @@ -0,0 +1,11 @@ +.wp-block-pullquote p { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--base); + line-height: var(--wp--type--line-height--base); +} + +.wp-block-pullquote cite { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--smaller); + line-height: var(--wp--type--line-height--smaller); +} diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss index 46bb9867586292..26ed65006d9f35 100644 --- a/packages/block-library/src/pullquote/theme.scss +++ b/packages/block-library/src/pullquote/theme.scss @@ -1,13 +1,13 @@ .wp-block-pullquote { - border-top: 4px solid $dark-gray-500; - border-bottom: 4px solid $dark-gray-500; + border-top: 4px solid var(--wp--color--foreground-500, $dark-gray-500); + border-bottom: 4px solid var(--wp--color--foreground-500, $dark-gray-500); margin-bottom: $default-block-margin; - color: $dark-gray-600; + color: var(--wp--color--foreground-600, $dark-gray-600); cite, footer, &__citation { - color: $dark-gray-600; + color: var(--wp--color--foreground-600, $dark-gray-600); text-transform: uppercase; font-size: $default-font-size; font-style: normal; diff --git a/packages/block-library/src/quote/global.scss b/packages/block-library/src/quote/global.scss new file mode 100644 index 00000000000000..bfbf792be617cf --- /dev/null +++ b/packages/block-library/src/quote/global.scss @@ -0,0 +1,11 @@ +.wp-block-quote p { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--base); + line-height: var(--wp--type--line-height--base); +} + +.wp-block-quote cite { + color: var(--wp--color--foreground--base); + font-size: var(--wp--type--size--smaller); + line-height: var(--wp--type--line-height--smaller); +} diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss index fe3d90cd6a2567..fdd4d1734d6c43 100644 --- a/packages/block-library/src/quote/theme.scss +++ b/packages/block-library/src/quote/theme.scss @@ -1,12 +1,12 @@ .wp-block-quote { - border-left: 4px solid $black; + border-left: 4px solid var(--wp--color--border, $black); margin: 0 0 $default-block-margin 0; padding-left: 1em; cite, footer, &__citation { - color: $dark-gray-300; + color: var(--wp--foreground-300, $dark-gray-300); font-size: $default-font-size; margin-top: 1em; position: relative; @@ -16,7 +16,7 @@ &.has-text-align-right, &.has-text-align-right { border-left: none; - border-right: 4px solid $black; + border-right: 4px solid var(--wp--color--border, $black); padding-left: 0; padding-right: 1em; } diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss index ba3c949bb7cb3d..9dae54aa1238c1 100644 --- a/packages/block-library/src/table/style.scss +++ b/packages/block-library/src/table/style.scss @@ -61,7 +61,7 @@ background-color: transparent; tbody tr:nth-child(odd) { - background-color: $light-gray-200; + background-color: var(--wp--color--foreground-200, $light-gray-200); } &.has-subtle-light-gray-background-color { @@ -93,6 +93,6 @@ border-color: transparent; } - border-bottom: 1px solid $light-gray-200; + border-bottom: 1px solid var(--wp--color--foreground-200, $light-gray-200); } } diff --git a/packages/block-library/src/verse/editor.scss b/packages/block-library/src/verse/editor.scss index e15ae165d37d15..75f0c6f5d9b7a9 100644 --- a/packages/block-library/src/verse/editor.scss +++ b/packages/block-library/src/verse/editor.scss @@ -1,5 +1,5 @@ pre.wp-block-verse { - color: $dark-gray-900; + color: var(--wp--color--foreground-900, $dark-gray-900); white-space: nowrap; font-family: inherit; font-size: inherit; From 61dc5ef2827d5232bf43ac1fbd807ad75e44451f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 18 Feb 2020 17:52:40 +0100 Subject: [PATCH 02/49] Resolver: add different rules --- experimental-default-global-styles.json | 10 ++++---- lib/global-styles.php | 32 +++++++++++++++---------- 2 files changed, 26 insertions(+), 16 deletions(-) diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json index da4314beaaf322..a133af0de0ea48 100644 --- a/experimental-default-global-styles.json +++ b/experimental-default-global-styles.json @@ -1,7 +1,9 @@ { - "color": { - "primary": "#52accc", - "background": "white", - "text": "black" + "core": { + "color": { + "primary": "#52accc", + "background": "white", + "text": "black" + } } } diff --git a/lib/global-styles.php b/lib/global-styles.php index 3f7e76a99de3c8..f5dcf799a19cf5 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -214,22 +214,30 @@ function gutenberg_experimental_global_styles_get_theme() { * @return string CSS rule. */ function gutenberg_experimental_global_styles_resolver( $global_styles ) { - $css_rule = ''; + $css_rules = ''; - $token = '--'; - $prefix = '--wp' . $token; - $css_vars = gutenberg_experimental_global_styles_get_css_vars( $global_styles, $prefix, $token ); - if ( empty( $css_vars ) ) { - return $css_rule; - } + // This is only for demo purposes, it should be pluggable + // so new selectors can be register (3rd party blocks, etc). + $selectors = array( + 'core' => ':root', + 'core/paragraph' => '.entry-content p', + ); + foreach ( $global_styles as $blockname => $subtree ) { + $token = '--'; + $prefix = '--wp' . $token; + $css_vars = gutenberg_experimental_global_styles_get_css_vars( $subtree, $prefix, $token ); + if ( empty( $css_vars ) ) { + return $css_rules; + } - $css_rule = ":root {\n"; - foreach ( $css_vars as $var => $value ) { - $css_rule .= "\t" . $var . ': ' . $value . ";\n"; + $css_rules .= $selectors[ $blockname ] . " {\n"; + foreach ( $css_vars as $var => $value ) { + $css_rules .= "\t" . $var . ': ' . $value . ";\n"; + } + $css_rules .= "}\n"; } - $css_rule .= '}'; - return $css_rule; + return $css_rules; } /** From 31724caeab7ae6e0c808b5fc2b9e4bc6d03d9c90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 18 Feb 2020 18:12:58 +0100 Subject: [PATCH 03/49] Add selectors that targets paragraphs in block quotes --- lib/global-styles.php | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index f5dcf799a19cf5..27cd93e9fbedba 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -217,10 +217,12 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { $css_rules = ''; // This is only for demo purposes, it should be pluggable - // so new selectors can be register (3rd party blocks, etc). + // so new selectors can be register + // (3rd party blocks, custom selectors, etc). $selectors = array( - 'core' => ':root', - 'core/paragraph' => '.entry-content p', + 'core' => ':root', + 'core/paragraph' => '.entry-content p', + 'custom/paragraph-in-quote' => '.wp-block-quote p', ); foreach ( $global_styles as $blockname => $subtree ) { $token = '--'; From 0d51cc171345a8d469ab7ecca2c732a0a41a8140 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 27 Feb 2020 11:34:22 +0100 Subject: [PATCH 04/49] Target site front-end with FSE experiment enabled --- lib/global-styles.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 27cd93e9fbedba..1684cdb2da0942 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -221,8 +221,8 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { // (3rd party blocks, custom selectors, etc). $selectors = array( 'core' => ':root', - 'core/paragraph' => '.entry-content p', - 'custom/paragraph-in-quote' => '.wp-block-quote p', + 'core/paragraph' => '.wp-site-blocks p', + 'custom/paragraph-in-quote' => '.wp-site-blocks .wp-block-quote p', ); foreach ( $global_styles as $blockname => $subtree ) { $token = '--'; From f0acd43105b597c99b133ef214403fadc2a3b6cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 7 Apr 2020 13:31:48 +0200 Subject: [PATCH 05/49] Take block selector from block.json --- experimental-default-global-styles.json | 1 - lib/global-styles.php | 31 ++++++++++++++----- .../block-library/src/paragraph/block.json | 1 + 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json index a133af0de0ea48..e6c72e48811868 100644 --- a/experimental-default-global-styles.json +++ b/experimental-default-global-styles.json @@ -1,7 +1,6 @@ { "core": { "color": { - "primary": "#52accc", "background": "white", "text": "black" } diff --git a/lib/global-styles.php b/lib/global-styles.php index 1684cdb2da0942..fa77d7e1e3c696 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -216,14 +216,29 @@ function gutenberg_experimental_global_styles_get_theme() { function gutenberg_experimental_global_styles_resolver( $global_styles ) { $css_rules = ''; - // This is only for demo purposes, it should be pluggable - // so new selectors can be register - // (3rd party blocks, custom selectors, etc). - $selectors = array( - 'core' => ':root', - 'core/paragraph' => '.wp-site-blocks p', - 'custom/paragraph-in-quote' => '.wp-site-blocks .wp-block-quote p', - ); + $selectors = array( 'core' => ':root' ); + + // We need to provide a mechanism for blocks to opt-in into this + // that can be used by 3rd party blocks as well. + // This list is an interim approach to avoid the performance cost of + // having to detect support by reading all core block's block.json. + $blocks_supported = [ + 'paragraph', + ]; + // The block library dir may not exist if working from a fresh clone => bail out early. + $block_library_dir = dirname( __FILE__ ) . '/../build/block-library/blocks/'; + if ( file_exists( $block_library_dir ) ) { + foreach( $blocks_supported as $block_dir ) { + $block_json_file = $block_library_dir . $block_dir . '/block.json'; + if ( file_exists( $block_json_file ) ) { + $block_json = json_decode( file_get_contents( $block_json_file ), true ); + if ( $block_json['selector'] ) { + $selectors[ $block_json['name'] ] = $block_json['selector']; + } + } + } + } + foreach ( $global_styles as $blockname => $subtree ) { $token = '--'; $prefix = '--wp' . $token; diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index acd5e48f0f63e0..70ee110d9a7e26 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": "common", + "selector": "p", "attributes": { "align": { "type": "string" From 2ac0fadffa8c892d2ea717097f7db3e8182ab2f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 7 Apr 2020 14:04:25 +0200 Subject: [PATCH 06/49] Add support for heading block --- lib/global-styles.php | 21 ++++++++++++++++++- packages/block-library/src/heading/block.json | 8 +++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index fa77d7e1e3c696..eac400e3316479 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -206,6 +206,22 @@ function gutenberg_experimental_global_styles_get_theme() { ); } +/** + * Given a block json, it returns an array of block selectors. + * + * @param array $block_json + * @return array + */ +function gutenberg_experimental_global_styles_extract_selectors( $block_json ) { + $selector = $block_json['selector']; + $block_name = $block_json['name']; + $block_selectors = array(); + foreach( $selector as $key => $value ) { + $block_selectors[ $block_name . '/' . $key ] = $value; + } + return $block_selectors; +} + /** * Takes a Global Styles tree and returns a CSS rule * that contains the corresponding CSS custom properties. @@ -224,6 +240,7 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { // having to detect support by reading all core block's block.json. $blocks_supported = [ 'paragraph', + 'heading' ]; // The block library dir may not exist if working from a fresh clone => bail out early. $block_library_dir = dirname( __FILE__ ) . '/../build/block-library/blocks/'; @@ -232,8 +249,10 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { $block_json_file = $block_library_dir . $block_dir . '/block.json'; if ( file_exists( $block_json_file ) ) { $block_json = json_decode( file_get_contents( $block_json_file ), true ); - if ( $block_json['selector'] ) { + if ( array_key_exists( 'selector', $block_json ) && is_string( $block_json['selector'] ) ) { $selectors[ $block_json['name'] ] = $block_json['selector']; + } else if ( array_key_exists( 'selector', $block_json) && is_array( $block_json['selector'] ) ) { + $selectors = array_merge( $selectors, gutenberg_experimental_global_styles_extract_selectors( $block_json ) ); } } } diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index 120bece3d39ae3..f56aa7c7b8d496 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": "common", + "selector": { + "h1": "h1", + "h2": "h2", + "h3": "h3", + "h4": "h4", + "h5": "h5", + "h6": "h6" + }, "attributes": { "align": { "type": "string" From b5180ffe78753406fbefea7013c0c57642eb84bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 7 Apr 2020 14:26:16 +0200 Subject: [PATCH 07/49] We use current block CSS for demo so remove unnecesary global.scss --- lib/global-styles.php | 8 -------- packages/block-library/src/global.scss | 5 ----- packages/block-library/src/heading/global.scss | 11 ----------- packages/block-library/src/list/global.scss | 6 ------ packages/block-library/src/paragraph/global.scss | 5 ----- packages/block-library/src/pullquote/global.scss | 11 ----------- packages/block-library/src/quote/global.scss | 11 ----------- 7 files changed, 57 deletions(-) delete mode 100644 packages/block-library/src/global.scss delete mode 100644 packages/block-library/src/heading/global.scss delete mode 100644 packages/block-library/src/list/global.scss delete mode 100644 packages/block-library/src/paragraph/global.scss delete mode 100644 packages/block-library/src/pullquote/global.scss delete mode 100644 packages/block-library/src/quote/global.scss diff --git a/lib/global-styles.php b/lib/global-styles.php index eac400e3316479..f320c1f1e14671 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -309,14 +309,6 @@ function gutenberg_experimental_global_styles_enqueue_assets() { wp_register_style( 'global-styles', false, array(), true, true ); wp_add_inline_style( 'global-styles', $inline_style ); wp_enqueue_style( 'global-styles' ); - - wp_register_style( - 'global-styles-block-library', - gutenberg_url( 'build/block-library/global.css' ), - array(), - filemtime( gutenberg_dir_path() . 'build/block-library/global.css' ) - ); - wp_enqueue_style( 'global-styles-block-library' ); } /** diff --git a/packages/block-library/src/global.scss b/packages/block-library/src/global.scss deleted file mode 100644 index 0c6581d76dae7c..00000000000000 --- a/packages/block-library/src/global.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "./paragraph/global.scss"; -@import "./heading/global.scss"; -@import "./list/global.scss"; -@import "./quote/global.scss"; -@import "./pullquote/global.scss"; diff --git a/packages/block-library/src/heading/global.scss b/packages/block-library/src/heading/global.scss deleted file mode 100644 index 9d9ce6371f5ed3..00000000000000 --- a/packages/block-library/src/heading/global.scss +++ /dev/null @@ -1,11 +0,0 @@ -h1, -h2, -h3, -h4, -h5, -h6 { - color: var(--wp--color--foreground--headings); - font-size: var(--wp--type--size--headings); - font-weight: var(--wp--type--weight); - line-height: var(--wp--type--line-height--headings); -} diff --git a/packages/block-library/src/list/global.scss b/packages/block-library/src/list/global.scss deleted file mode 100644 index 2e8eb6cdd28302..00000000000000 --- a/packages/block-library/src/list/global.scss +++ /dev/null @@ -1,6 +0,0 @@ -ul, -ol { - color: var(--wp--color--foreground--base); - font-size: var(--wp--type--size--base); - line-height: var(--wp--type--line-height--base); -} diff --git a/packages/block-library/src/paragraph/global.scss b/packages/block-library/src/paragraph/global.scss deleted file mode 100644 index 05aa7cb68ebc89..00000000000000 --- a/packages/block-library/src/paragraph/global.scss +++ /dev/null @@ -1,5 +0,0 @@ -p { - color: var(--wp--color--foreground--base); - font-size: var(--wp--type--size--base); - line-height: var(--wp--type--line-height--base); -} diff --git a/packages/block-library/src/pullquote/global.scss b/packages/block-library/src/pullquote/global.scss deleted file mode 100644 index a0a985013315e9..00000000000000 --- a/packages/block-library/src/pullquote/global.scss +++ /dev/null @@ -1,11 +0,0 @@ -.wp-block-pullquote p { - color: var(--wp--color--foreground--base); - font-size: var(--wp--type--size--base); - line-height: var(--wp--type--line-height--base); -} - -.wp-block-pullquote cite { - color: var(--wp--color--foreground--base); - font-size: var(--wp--type--size--smaller); - line-height: var(--wp--type--line-height--smaller); -} diff --git a/packages/block-library/src/quote/global.scss b/packages/block-library/src/quote/global.scss deleted file mode 100644 index bfbf792be617cf..00000000000000 --- a/packages/block-library/src/quote/global.scss +++ /dev/null @@ -1,11 +0,0 @@ -.wp-block-quote p { - color: var(--wp--color--foreground--base); - font-size: var(--wp--type--size--base); - line-height: var(--wp--type--line-height--base); -} - -.wp-block-quote cite { - color: var(--wp--color--foreground--base); - font-size: var(--wp--type--size--smaller); - line-height: var(--wp--type--line-height--smaller); -} From 007a6c01db87edc23ae7e8089bb9e034e3c176a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 7 Apr 2020 14:29:56 +0200 Subject: [PATCH 08/49] Revert changes to master --- packages/block-library/src/pullquote/theme.scss | 8 ++++---- packages/block-library/src/quote/theme.scss | 6 +++--- packages/block-library/src/table/style.scss | 4 ++-- packages/block-library/src/verse/editor.scss | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss index 26ed65006d9f35..46bb9867586292 100644 --- a/packages/block-library/src/pullquote/theme.scss +++ b/packages/block-library/src/pullquote/theme.scss @@ -1,13 +1,13 @@ .wp-block-pullquote { - border-top: 4px solid var(--wp--color--foreground-500, $dark-gray-500); - border-bottom: 4px solid var(--wp--color--foreground-500, $dark-gray-500); + border-top: 4px solid $dark-gray-500; + border-bottom: 4px solid $dark-gray-500; margin-bottom: $default-block-margin; - color: var(--wp--color--foreground-600, $dark-gray-600); + color: $dark-gray-600; cite, footer, &__citation { - color: var(--wp--color--foreground-600, $dark-gray-600); + color: $dark-gray-600; text-transform: uppercase; font-size: $default-font-size; font-style: normal; diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss index fdd4d1734d6c43..fe3d90cd6a2567 100644 --- a/packages/block-library/src/quote/theme.scss +++ b/packages/block-library/src/quote/theme.scss @@ -1,12 +1,12 @@ .wp-block-quote { - border-left: 4px solid var(--wp--color--border, $black); + border-left: 4px solid $black; margin: 0 0 $default-block-margin 0; padding-left: 1em; cite, footer, &__citation { - color: var(--wp--foreground-300, $dark-gray-300); + color: $dark-gray-300; font-size: $default-font-size; margin-top: 1em; position: relative; @@ -16,7 +16,7 @@ &.has-text-align-right, &.has-text-align-right { border-left: none; - border-right: 4px solid var(--wp--color--border, $black); + border-right: 4px solid $black; padding-left: 0; padding-right: 1em; } diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss index 9dae54aa1238c1..ba3c949bb7cb3d 100644 --- a/packages/block-library/src/table/style.scss +++ b/packages/block-library/src/table/style.scss @@ -61,7 +61,7 @@ background-color: transparent; tbody tr:nth-child(odd) { - background-color: var(--wp--color--foreground-200, $light-gray-200); + background-color: $light-gray-200; } &.has-subtle-light-gray-background-color { @@ -93,6 +93,6 @@ border-color: transparent; } - border-bottom: 1px solid var(--wp--color--foreground-200, $light-gray-200); + border-bottom: 1px solid $light-gray-200; } } diff --git a/packages/block-library/src/verse/editor.scss b/packages/block-library/src/verse/editor.scss index 75f0c6f5d9b7a9..e15ae165d37d15 100644 --- a/packages/block-library/src/verse/editor.scss +++ b/packages/block-library/src/verse/editor.scss @@ -1,5 +1,5 @@ pre.wp-block-verse { - color: var(--wp--color--foreground-900, $dark-gray-900); + color: $dark-gray-900; white-space: nowrap; font-family: inherit; font-size: inherit; From e8ebec430340bddc03b9058ca17d259aab66906e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 7 May 2020 10:36:41 +0200 Subject: [PATCH 09/49] Stop using the wp-gs class --- lib/global-styles.php | 33 --------------------------------- 1 file changed, 33 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index f320c1f1e14671..1f6e8fdb17740a 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -311,37 +311,6 @@ function gutenberg_experimental_global_styles_enqueue_assets() { wp_enqueue_style( 'global-styles' ); } -/** - * Adds class wp-gs to the frontend body class. - * - * @param array $classes Existing body classes. - * @return array The filtered array of body classes. - */ -function gutenberg_experimental_global_styles_wp_gs_class_front_end( $classes ) { - if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { - return $classes; - } - - return array_merge( $classes, array( 'wp-gs' ) ); -} - -/** - * Adds class wp-gs to the block-editor body class. - * - * @param string $classes Existing body classes separated by space. - * @return string The filtered string of body classes. - */ -function gutenberg_experimental_global_styles_wp_gs_class_editor( $classes ) { - if ( - ! gutenberg_experimental_global_styles_has_theme_support() || - ! gutenberg_experimental_global_styles_is_site_editor() - ) { - return $classes; - } - - return $classes . ' wp-gs'; -} - /** * Whether the loaded page is the site editor. * @@ -419,8 +388,6 @@ function gutenberg_experimental_global_styles_register_cpt() { if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ) ) { add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); - add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); - add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); // enqueue_block_assets is not fired in edit-site, so we use separate back/front hooks instead. add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' ); From 435b00204654d1f337e5e7102e68a5e654b579c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 7 May 2020 10:43:40 +0200 Subject: [PATCH 10/49] Rename selector key to __experimentalSelector --- lib/global-styles.php | 8 ++++---- packages/block-library/src/heading/block.json | 2 +- packages/block-library/src/paragraph/block.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 1f6e8fdb17740a..ccfcf858969496 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -213,7 +213,7 @@ function gutenberg_experimental_global_styles_get_theme() { * @return array */ function gutenberg_experimental_global_styles_extract_selectors( $block_json ) { - $selector = $block_json['selector']; + $selector = $block_json['__experimentalSelector']; $block_name = $block_json['name']; $block_selectors = array(); foreach( $selector as $key => $value ) { @@ -249,9 +249,9 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { $block_json_file = $block_library_dir . $block_dir . '/block.json'; if ( file_exists( $block_json_file ) ) { $block_json = json_decode( file_get_contents( $block_json_file ), true ); - if ( array_key_exists( 'selector', $block_json ) && is_string( $block_json['selector'] ) ) { - $selectors[ $block_json['name'] ] = $block_json['selector']; - } else if ( array_key_exists( 'selector', $block_json) && is_array( $block_json['selector'] ) ) { + if ( array_key_exists( '__experimentalSelector', $block_json ) && is_string( $block_json['__experimentalSelector'] ) ) { + $selectors[ $block_json['name'] ] = $block_json['__experimentalSelector']; + } else if ( array_key_exists( '__experimentalSelector', $block_json) && is_array( $block_json['__experimentalSelector'] ) ) { $selectors = array_merge( $selectors, gutenberg_experimental_global_styles_extract_selectors( $block_json ) ); } } diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index f56aa7c7b8d496..4afa139122c1e6 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -1,7 +1,7 @@ { "name": "core/heading", "category": "common", - "selector": { + "__experimentalSelector": { "h1": "h1", "h2": "h2", "h3": "h3", diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 70ee110d9a7e26..63e289e0ce02af 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -1,7 +1,7 @@ { "name": "core/paragraph", "category": "common", - "selector": "p", + "__experimentalSelector": "p", "attributes": { "align": { "type": "string" From 2b767ab43eaabe81ff1e83ebebbe73383b1fdf2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 7 May 2020 10:57:58 +0200 Subject: [PATCH 11/49] Make linter happy --- lib/global-styles.php | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index ccfcf858969496..1e4e118f48cfe3 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -1,6 +1,6 @@ $value ) { + foreach ( $selector as $key => $value ) { $block_selectors[ $block_name . '/' . $key ] = $value; } return $block_selectors; @@ -238,20 +238,20 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { // that can be used by 3rd party blocks as well. // This list is an interim approach to avoid the performance cost of // having to detect support by reading all core block's block.json. - $blocks_supported = [ + $blocks_supported = array( 'paragraph', - 'heading' - ]; + 'heading', + ); // The block library dir may not exist if working from a fresh clone => bail out early. $block_library_dir = dirname( __FILE__ ) . '/../build/block-library/blocks/'; if ( file_exists( $block_library_dir ) ) { - foreach( $blocks_supported as $block_dir ) { + foreach ( $blocks_supported as $block_dir ) { $block_json_file = $block_library_dir . $block_dir . '/block.json'; if ( file_exists( $block_json_file ) ) { $block_json = json_decode( file_get_contents( $block_json_file ), true ); if ( array_key_exists( '__experimentalSelector', $block_json ) && is_string( $block_json['__experimentalSelector'] ) ) { $selectors[ $block_json['name'] ] = $block_json['__experimentalSelector']; - } else if ( array_key_exists( '__experimentalSelector', $block_json) && is_array( $block_json['__experimentalSelector'] ) ) { + } elseif ( array_key_exists( '__experimentalSelector', $block_json ) && is_array( $block_json['__experimentalSelector'] ) ) { $selectors = array_merge( $selectors, gutenberg_experimental_global_styles_extract_selectors( $block_json ) ); } } From f061744a99a14e70c1a8c1f14ef628b309be4059 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 7 May 2020 11:15:01 +0200 Subject: [PATCH 12/49] Extract selectors function and use the styles key for the tree --- experimental-default-global-styles.json | 10 ++++---- lib/global-styles.php | 32 +++++++++++++++++-------- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json index e6c72e48811868..81761277037874 100644 --- a/experimental-default-global-styles.json +++ b/experimental-default-global-styles.json @@ -1,8 +1,10 @@ { - "core": { - "color": { - "background": "white", - "text": "black" + "styles": { + "global": { + "color": { + "background": "white", + "text": "black" + } } } } diff --git a/lib/global-styles.php b/lib/global-styles.php index 1e4e118f48cfe3..8a202842abc87d 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -223,16 +223,12 @@ function gutenberg_experimental_global_styles_extract_selectors( $block_json ) { } /** - * Takes a Global Styles tree and returns a CSS rule - * that contains the corresponding CSS custom properties. + * Pulls the CSS selectors to use from the block.json config. * - * @param array $global_styles Global Styles tree. - * @return string CSS rule. + * @return array */ -function gutenberg_experimental_global_styles_resolver( $global_styles ) { - $css_rules = ''; - - $selectors = array( 'core' => ':root' ); +function gutenberg_experimental_global_styles_get_selectors() { + $selectors = array( 'global' => ':root' ); // We need to provide a mechanism for blocks to opt-in into this // that can be used by 3rd party blocks as well. @@ -242,6 +238,7 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { 'paragraph', 'heading', ); + // The block library dir may not exist if working from a fresh clone => bail out early. $block_library_dir = dirname( __FILE__ ) . '/../build/block-library/blocks/'; if ( file_exists( $block_library_dir ) ) { @@ -258,7 +255,22 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { } } - foreach ( $global_styles as $blockname => $subtree ) { + return $selectors; +} + +/** + * Takes a Global Styles tree and returns a CSS rule + * that contains the corresponding CSS custom properties. + * + * @param array $global_styles Global Styles tree. + * @return string CSS rule. + */ +function gutenberg_experimental_global_styles_resolver( $global_styles ) { + $css_rules = ''; + $styles = $global_styles['styles']; + $selectors = gutenberg_experimental_global_styles_get_selectors(); + + foreach ( $styles as $block_name => $subtree ) { $token = '--'; $prefix = '--wp' . $token; $css_vars = gutenberg_experimental_global_styles_get_css_vars( $subtree, $prefix, $token ); @@ -266,7 +278,7 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { return $css_rules; } - $css_rules .= $selectors[ $blockname ] . " {\n"; + $css_rules .= $selectors[ $block_name ] . " {\n"; foreach ( $css_vars as $var => $value ) { $css_rules .= "\t" . $var . ': ' . $value . ";\n"; } From 4eb5606d4af49665f3cca5028874d183aa3134f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 7 May 2020 14:09:15 +0200 Subject: [PATCH 13/49] Emit CSS per block --- experimental-default-global-styles.json | 10 ++--- lib/global-styles.php | 51 +++++++++++++++++-------- 2 files changed, 39 insertions(+), 22 deletions(-) diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json index 81761277037874..839d68dedfa18a 100644 --- a/experimental-default-global-styles.json +++ b/experimental-default-global-styles.json @@ -1,10 +1,8 @@ { - "styles": { - "global": { - "color": { - "background": "white", - "text": "black" - } + "globals": { + "color": { + "background": "white", + "text": "black" } } } diff --git a/lib/global-styles.php b/lib/global-styles.php index 8a202842abc87d..2edc0fc97a4d80 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -259,28 +259,20 @@ function gutenberg_experimental_global_styles_get_selectors() { } /** - * Takes a Global Styles tree and returns a CSS rule - * that contains the corresponding CSS custom properties. + * Takes a tree and returns the CSS rules + * with the proper declarations. * - * @param array $global_styles Global Styles tree. + * @param array $styles Global Styles tree. * @return string CSS rule. */ -function gutenberg_experimental_global_styles_resolver( $global_styles ) { +function gutenberg_experimental_global_styles_resolver_styles( $styles ) { $css_rules = ''; - $styles = $global_styles['styles']; $selectors = gutenberg_experimental_global_styles_get_selectors(); - foreach ( $styles as $block_name => $subtree ) { - $token = '--'; - $prefix = '--wp' . $token; - $css_vars = gutenberg_experimental_global_styles_get_css_vars( $subtree, $prefix, $token ); - if ( empty( $css_vars ) ) { - return $css_rules; - } - + foreach ( $styles as $block_name => $block_style ) { $css_rules .= $selectors[ $block_name ] . " {\n"; - foreach ( $css_vars as $var => $value ) { - $css_rules .= "\t" . $var . ': ' . $value . ";\n"; + foreach ( $block_style as $property => $value ) { + $css_rules .= "\t" . $property . ': ' . $value . ";\n"; } $css_rules .= "}\n"; } @@ -288,6 +280,32 @@ function gutenberg_experimental_global_styles_resolver( $global_styles ) { return $css_rules; } +/** + * Takes a tree and returns a CSS rule + * that contains the corresponding CSS custom properties. + * + * @param array $styles Global Styles tree. + * @return string CSS rule. + */ +function gutenberg_experimental_global_styles_resolver_globals( $styles ) { + $css_rules = ''; + + $token = '--'; + $prefix = '--wp' . $token; + $css_vars = gutenberg_experimental_global_styles_get_css_vars( $styles, $prefix, $token ); + if ( empty( $css_vars ) ) { + return $css_rules; + } + + $css_rules .= " :root {\n"; + foreach ( $css_vars as $var => $value ) { + $css_rules .= "\t" . $var . ': ' . $value . ";\n"; + } + $css_rules .= "}\n"; + + return $css_rules; +} + /** * Fetches the Global Styles for each level (core, theme, user) * and enqueues the resulting CSS custom properties for the editor. @@ -313,7 +331,8 @@ function gutenberg_experimental_global_styles_enqueue_assets() { gutenberg_experimental_global_styles_get_user() ); - $inline_style = gutenberg_experimental_global_styles_resolver( $global_styles ); + $inline_style = gutenberg_experimental_global_styles_resolver_globals( $global_styles['globals'] ); + $inline_style .= gutenberg_experimental_global_styles_resolver_styles( $global_styles['styles'] ); if ( empty( $inline_style ) ) { return; } From 4413f5e07a324e4a038253cf135ae5c0822a452d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 7 May 2020 14:22:20 +0200 Subject: [PATCH 14/49] Add presets to globals --- lib/global-styles.php | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 2edc0fc97a4d80..6d432b9523b268 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -164,7 +164,7 @@ function gutenberg_experimental_global_styles_get_theme() { $theme_colors = get_theme_support( 'editor-color-palette' )[0]; if ( is_array( $theme_colors ) ) { foreach ( $theme_colors as $color ) { - $theme_supports['preset']['color'][ $color['slug'] ] = $color['color']; + $theme_supports['color'][ $color['slug'] ] = $color['color']; } } @@ -172,7 +172,7 @@ function gutenberg_experimental_global_styles_get_theme() { $theme_gradients = get_theme_support( 'editor-gradient-presets' )[0]; if ( is_array( $theme_gradients ) ) { foreach ( $theme_gradients as $gradient ) { - $theme_supports['preset']['gradient'][ $gradient['slug'] ] = $gradient['gradient']; + $theme_supports['gradient'][ $gradient['slug'] ] = $gradient['gradient']; } } @@ -180,7 +180,7 @@ function gutenberg_experimental_global_styles_get_theme() { $theme_font_sizes = get_theme_support( 'editor-font-sizes' )[0]; if ( is_array( $theme_font_sizes ) ) { foreach ( $theme_font_sizes as $font_size ) { - $theme_supports['preset']['font-size'][ $font_size['slug'] ] = $font_size['size']; + $theme_supports['font-size'][ $font_size['slug'] ] = $font_size['size']; } } @@ -195,15 +195,17 @@ function gutenberg_experimental_global_styles_get_theme() { * https://github.com/wp-cli/i18n-command/pull/210 * https://github.com/WordPress/gutenberg/issues/20588 * - * Hence, for simplicity, we take here the existing presets - * from the add_theme_support, if any. */ - return array_merge( - gutenberg_experimental_global_styles_get_from_file( - locate_template( 'experimental-theme.json' ) - ), - $theme_supports + $theme_styles = gutenberg_experimental_global_styles_get_from_file( + locate_template( 'experimental-theme.json' ) + ); + + $theme_styles['globals'] = array_merge_recursive( + $theme_supports, + $theme_styles['globals'] ); + + return $theme_styles; } /** From ef573f747767770c933555a4bacd9ae8807734f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 7 May 2020 17:34:07 +0200 Subject: [PATCH 15/49] Group: add experimental selector --- lib/global-styles.php | 1 + packages/block-library/src/group/block.json | 1 + 2 files changed, 2 insertions(+) diff --git a/lib/global-styles.php b/lib/global-styles.php index 6d432b9523b268..05ea8eec154cba 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -239,6 +239,7 @@ function gutenberg_experimental_global_styles_get_selectors() { $blocks_supported = array( 'paragraph', 'heading', + 'group', ); // The block library dir may not exist if working from a fresh clone => bail out early. diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 9359f8101603ba..bbfa1f0c800b62 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": "layout", + "__experimentalSelector": ".wp-block-group", "attributes": { "tagName": { "type": "string", From f0c7fd09db138f4afc1756c5a34d9b8981cc7b19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 7 May 2020 18:10:22 +0200 Subject: [PATCH 16/49] Allow themes that dont declare globals --- lib/global-styles.php | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 05ea8eec154cba..aff6bcacbc3a30 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -200,6 +200,10 @@ function gutenberg_experimental_global_styles_get_theme() { locate_template( 'experimental-theme.json' ) ); + if ( ! array_key_exists( 'globals', $theme_styles ) ) { + $theme_styles['globals'] = array(); + } + $theme_styles['globals'] = array_merge_recursive( $theme_supports, $theme_styles['globals'] @@ -287,12 +291,17 @@ function gutenberg_experimental_global_styles_resolver_styles( $styles ) { * Takes a tree and returns a CSS rule * that contains the corresponding CSS custom properties. * - * @param array $styles Global Styles tree. + * @param array $global_styles Global Styles tree. * @return string CSS rule. */ -function gutenberg_experimental_global_styles_resolver_globals( $styles ) { +function gutenberg_experimental_global_styles_resolver_globals( $global_styles ) { $css_rules = ''; + if ( ! is_array( $global_styles ) || ! array_key_exists( 'globals', $global_styles ) ) { + return $css_rules; + } + $styles = $global_styles['globals']; + $token = '--'; $prefix = '--wp' . $token; $css_vars = gutenberg_experimental_global_styles_get_css_vars( $styles, $prefix, $token ); @@ -334,8 +343,8 @@ function gutenberg_experimental_global_styles_enqueue_assets() { gutenberg_experimental_global_styles_get_user() ); - $inline_style = gutenberg_experimental_global_styles_resolver_globals( $global_styles['globals'] ); - $inline_style .= gutenberg_experimental_global_styles_resolver_styles( $global_styles['styles'] ); + $inline_style = gutenberg_experimental_global_styles_resolver_globals( $global_styles ); + $inline_style .= gutenberg_experimental_global_styles_resolver_styles( $global_styles['blocks'] ); if ( empty( $inline_style ) ) { return; } From ed11b06d9c455cfbe641c11df7b1d4d5487a0e86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 12 May 2020 11:35:38 +0200 Subject: [PATCH 17/49] Revert taking selectors from block.json We need a way to also take selectors from patterns, so let's use harcoded selectors until we implement register selectors for both blocks & patterns. --- lib/global-styles.php | 58 +++++-------------- packages/block-library/src/group/block.json | 1 - packages/block-library/src/heading/block.json | 8 --- .../block-library/src/paragraph/block.json | 1 - 4 files changed, 15 insertions(+), 53 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index aff6bcacbc3a30..222edc60171cce 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -213,55 +213,26 @@ function gutenberg_experimental_global_styles_get_theme() { } /** - * Given a block json, it returns an array of block selectors. - * - * @param array $block_json The block.json config. - * @return array - */ -function gutenberg_experimental_global_styles_extract_selectors( $block_json ) { - $selector = $block_json['__experimentalSelector']; - $block_name = $block_json['name']; - $block_selectors = array(); - foreach ( $selector as $key => $value ) { - $block_selectors[ $block_name . '/' . $key ] = $value; - } - return $block_selectors; -} - -/** - * Pulls the CSS selectors to use from the block.json config. + * Maintains a list of the CSS selectors available to use. + * This should be taken from the block / pattern registry. * * @return array */ function gutenberg_experimental_global_styles_get_selectors() { - $selectors = array( 'global' => ':root' ); - - // We need to provide a mechanism for blocks to opt-in into this - // that can be used by 3rd party blocks as well. - // This list is an interim approach to avoid the performance cost of - // having to detect support by reading all core block's block.json. - $blocks_supported = array( - 'paragraph', - 'heading', - 'group', + $selectors = array( + 'global' => ':root', + 'core/paragraph' => 'p', + 'core/heading/h1' => 'h1', + 'core/heading/h2' => 'h2', + 'core/heading/h3' => 'h3', + 'core/heading/h4' => 'h4', + 'core/heading/h5' => 'h5', + 'core/heading/h6' => 'h6', + 'core/numbered-features/number' => '.wp-block-column:first-child p', + 'core/numbered-features/title' => '.wp-block-column:nth-child(2) p:first-child', + 'core/numbered-features/desc' => '.wp-block-column:nth-child(2) p', ); - // The block library dir may not exist if working from a fresh clone => bail out early. - $block_library_dir = dirname( __FILE__ ) . '/../build/block-library/blocks/'; - if ( file_exists( $block_library_dir ) ) { - foreach ( $blocks_supported as $block_dir ) { - $block_json_file = $block_library_dir . $block_dir . '/block.json'; - if ( file_exists( $block_json_file ) ) { - $block_json = json_decode( file_get_contents( $block_json_file ), true ); - if ( array_key_exists( '__experimentalSelector', $block_json ) && is_string( $block_json['__experimentalSelector'] ) ) { - $selectors[ $block_json['name'] ] = $block_json['__experimentalSelector']; - } elseif ( array_key_exists( '__experimentalSelector', $block_json ) && is_array( $block_json['__experimentalSelector'] ) ) { - $selectors = array_merge( $selectors, gutenberg_experimental_global_styles_extract_selectors( $block_json ) ); - } - } - } - } - return $selectors; } @@ -345,6 +316,7 @@ function gutenberg_experimental_global_styles_enqueue_assets() { $inline_style = gutenberg_experimental_global_styles_resolver_globals( $global_styles ); $inline_style .= gutenberg_experimental_global_styles_resolver_styles( $global_styles['blocks'] ); + $inline_style .= gutenberg_experimental_global_styles_resolver_styles( $global_styles['patterns'] ); if ( empty( $inline_style ) ) { return; } diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index bbfa1f0c800b62..9359f8101603ba 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": "layout", - "__experimentalSelector": ".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 4afa139122c1e6..120bece3d39ae3 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": "common", - "__experimentalSelector": { - "h1": "h1", - "h2": "h2", - "h3": "h3", - "h4": "h4", - "h5": "h5", - "h6": "h6" - }, "attributes": { "align": { "type": "string" diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 63e289e0ce02af..acd5e48f0f63e0 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": "common", - "__experimentalSelector": "p", "attributes": { "align": { "type": "string" From 4fa8b06598a9471ef3a40b5f623f774f5c0b46a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 13 May 2020 19:25:43 +0200 Subject: [PATCH 18/49] Remove patterns and check that style props adhere do the schema Blocks opt-in into some implicit attributes for style. We now use this to decide whether to allow something to be output in the stylesheet. --- lib/global-styles.php | 89 +++++++++++++++++++++++++++++++++---------- 1 file changed, 69 insertions(+), 20 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 222edc60171cce..52650312b283ac 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -218,22 +218,65 @@ function gutenberg_experimental_global_styles_get_theme() { * * @return array */ -function gutenberg_experimental_global_styles_get_selectors() { - $selectors = array( - 'global' => ':root', - 'core/paragraph' => 'p', - 'core/heading/h1' => 'h1', - 'core/heading/h2' => 'h2', - 'core/heading/h3' => 'h3', - 'core/heading/h4' => 'h4', - 'core/heading/h5' => 'h5', - 'core/heading/h6' => 'h6', - 'core/numbered-features/number' => '.wp-block-column:first-child p', - 'core/numbered-features/title' => '.wp-block-column:nth-child(2) p:first-child', - 'core/numbered-features/desc' => '.wp-block-column:nth-child(2) p', +function gutenberg_experimental_global_styles_get_block_data() { + // TODO: this data should be taken from the block.json. + // + // We need the ability to have many selectors per block + // like for heading (core/heading/h1, core/heading/h2, etc) + // but also for other blocks that have complex layouts + // (ex: for gallery we may want to target the wrapper element + // and the individual images). + // + // Having access to this via the block registry + // requires block server registration. + $block_data = array( + 'global' => array( + 'selector' => ':root', + 'supports' => array(), + ), + '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' ), + ), ); - return $selectors; + return $block_data; } /** @@ -244,15 +287,22 @@ function gutenberg_experimental_global_styles_get_selectors() { * @return string CSS rule. */ function gutenberg_experimental_global_styles_resolver_styles( $styles ) { - $css_rules = ''; - $selectors = gutenberg_experimental_global_styles_get_selectors(); + $css_rules = ''; + $block_data = gutenberg_experimental_global_styles_get_block_data(); foreach ( $styles as $block_name => $block_style ) { - $css_rules .= $selectors[ $block_name ] . " {\n"; + $css_declarations = ''; foreach ( $block_style as $property => $value ) { - $css_rules .= "\t" . $property . ': ' . $value . ";\n"; + // Only convert to CSS the style attributes the block has declared support for. + if ( in_array( $property, $block_data[ $block_name ]['supports'], true ) ) { + $css_declarations .= "\t" . $property . ': ' . $value . ";\n"; + } + } + if ( '' !== $css_declarations ) { + $css_rules .= $block_data[ $block_name ]['selector'] . " {\n"; + $css_rules .= $css_declarations; + $css_rules .= "}\n"; } - $css_rules .= "}\n"; } return $css_rules; @@ -316,7 +366,6 @@ function gutenberg_experimental_global_styles_enqueue_assets() { $inline_style = gutenberg_experimental_global_styles_resolver_globals( $global_styles ); $inline_style .= gutenberg_experimental_global_styles_resolver_styles( $global_styles['blocks'] ); - $inline_style .= gutenberg_experimental_global_styles_resolver_styles( $global_styles['patterns'] ); if ( empty( $inline_style ) ) { return; } From 35228a24b2343272d8743d11889f6c5f0e5a6418 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 13 May 2020 19:42:37 +0200 Subject: [PATCH 19/49] Make function calls symetric --- lib/global-styles.php | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 52650312b283ac..d950b75d0cebf4 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -283,11 +283,17 @@ function gutenberg_experimental_global_styles_get_block_data() { * Takes a tree and returns the CSS rules * with the proper declarations. * - * @param array $styles Global Styles tree. + * @param array $global_styles Global Styles tree. * @return string CSS rule. */ -function gutenberg_experimental_global_styles_resolver_styles( $styles ) { - $css_rules = ''; +function gutenberg_experimental_global_styles_resolver_styles( $global_styles ) { + $css_rules = ''; + + if ( ! is_array( $global_styles ) || ! array_key_exists( 'blocks', $global_styles ) ) { + return $css_rules; + } + $styles = $global_styles['blocks']; + $block_data = gutenberg_experimental_global_styles_get_block_data(); foreach ( $styles as $block_name => $block_style ) { @@ -365,7 +371,7 @@ function gutenberg_experimental_global_styles_enqueue_assets() { ); $inline_style = gutenberg_experimental_global_styles_resolver_globals( $global_styles ); - $inline_style .= gutenberg_experimental_global_styles_resolver_styles( $global_styles['blocks'] ); + $inline_style .= gutenberg_experimental_global_styles_resolver_styles( $global_styles ); if ( empty( $inline_style ) ) { return; } From a8dd4691b231929dea44757976fa7f79765d1a3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 13 May 2020 19:44:21 +0200 Subject: [PATCH 20/49] Improve docs --- lib/global-styles.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index d950b75d0cebf4..ff3bb68cbec8e0 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -284,9 +284,9 @@ function gutenberg_experimental_global_styles_get_block_data() { * with the proper declarations. * * @param array $global_styles Global Styles tree. - * @return string CSS rule. + * @return string A list of CSS rules. */ -function gutenberg_experimental_global_styles_resolver_styles( $global_styles ) { +function gutenberg_experimental_global_styles_resolver_block_styles( $global_styles ) { $css_rules = ''; if ( ! is_array( $global_styles ) || ! array_key_exists( 'blocks', $global_styles ) ) { @@ -319,7 +319,7 @@ function gutenberg_experimental_global_styles_resolver_styles( $global_styles ) * that contains the corresponding CSS custom properties. * * @param array $global_styles Global Styles tree. - * @return string CSS rule. + * @return string A list of CSS rules. */ function gutenberg_experimental_global_styles_resolver_globals( $global_styles ) { $css_rules = ''; @@ -371,7 +371,7 @@ function gutenberg_experimental_global_styles_enqueue_assets() { ); $inline_style = gutenberg_experimental_global_styles_resolver_globals( $global_styles ); - $inline_style .= gutenberg_experimental_global_styles_resolver_styles( $global_styles ); + $inline_style .= gutenberg_experimental_global_styles_resolver_block_styles( $global_styles ); if ( empty( $inline_style ) ) { return; } From 290152f1bc7b629f1fd41184859b710b8e80a167 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 10:26:04 +0200 Subject: [PATCH 21/49] Add styles for editor via block settings --- lib/global-styles.php | 42 ++++++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index ff3bb68cbec8e0..00925181a91b52 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -346,13 +346,23 @@ function gutenberg_experimental_global_styles_resolver_globals( $global_styles ) } /** - * Fetches the Global Styles for each level (core, theme, user) - * and enqueues the resulting CSS custom properties for the editor. + * Returns the merged styles from core, theme, and user preferences. + * + * @return string */ -function gutenberg_experimental_global_styles_enqueue_assets_editor() { - if ( gutenberg_experimental_global_styles_is_site_editor() ) { - gutenberg_experimental_global_styles_enqueue_assets(); +function gutenberg_experimental_global_styles_get_stylesheet() { + $global_styles = array_merge( + gutenberg_experimental_global_styles_get_core(), + gutenberg_experimental_global_styles_get_theme(), + gutenberg_experimental_global_styles_get_user() + ); + + $stylesheet = gutenberg_experimental_global_styles_resolver_globals( $global_styles ); + $stylesheet .= gutenberg_experimental_global_styles_resolver_block_styles( $global_styles ); + if ( empty( $stylesheet ) ) { + return; } + return $stylesheet; } /** @@ -364,20 +374,10 @@ function gutenberg_experimental_global_styles_enqueue_assets() { return; } - $global_styles = array_merge( - gutenberg_experimental_global_styles_get_core(), - gutenberg_experimental_global_styles_get_theme(), - gutenberg_experimental_global_styles_get_user() - ); - - $inline_style = gutenberg_experimental_global_styles_resolver_globals( $global_styles ); - $inline_style .= gutenberg_experimental_global_styles_resolver_block_styles( $global_styles ); - if ( empty( $inline_style ) ) { - return; - } + $stylesheet = gutenberg_experimental_global_styles_get_stylesheet(); wp_register_style( 'global-styles', false, array(), true, true ); - wp_add_inline_style( 'global-styles', $inline_style ); + wp_add_inline_style( 'global-styles', $stylesheet ); wp_enqueue_style( 'global-styles' ); } @@ -417,9 +417,13 @@ function gutenberg_experimental_global_styles_settings( $settings ) { gutenberg_experimental_global_styles_get_core(), gutenberg_experimental_global_styles_get_theme() ); - $settings['__experimentalGlobalStylesBase'] = $global_styles; + // Add the styles for the editor via the settings + // so they get processed as if they were added by add_editor_styles: + // they will get the editor wrapper class. + $settings['styles'][] = array( 'css' => gutenberg_experimental_global_styles_get_stylesheet() ); + return $settings; } @@ -459,7 +463,5 @@ function gutenberg_experimental_global_styles_register_cpt() { if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ) ) { add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); - // enqueue_block_assets is not fired in edit-site, so we use separate back/front hooks instead. add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' ); - add_action( 'admin_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets_editor' ); } From d2b6c04ea42d480390946b907b686b79ab405397 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 11:07:55 +0200 Subject: [PATCH 22/49] Make linter happy --- lib/global-styles.php | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/global-styles.php b/lib/global-styles.php index 00925181a91b52..10f1dc1c1a6cbd 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -417,6 +417,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) { gutenberg_experimental_global_styles_get_core(), gutenberg_experimental_global_styles_get_theme() ); + $settings['__experimentalGlobalStylesBase'] = $global_styles; // Add the styles for the editor via the settings From 08d3fb0d9b225b24dc5fbe6750ee2777ea6ab034 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 11:13:42 +0200 Subject: [PATCH 23/49] Maintain current variable name for presets --- lib/global-styles.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 10f1dc1c1a6cbd..1fa10ea3968c36 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -164,7 +164,7 @@ function gutenberg_experimental_global_styles_get_theme() { $theme_colors = get_theme_support( 'editor-color-palette' )[0]; if ( is_array( $theme_colors ) ) { foreach ( $theme_colors as $color ) { - $theme_supports['color'][ $color['slug'] ] = $color['color']; + $theme_supports['preset']['color'][ $color['slug'] ] = $color['color']; } } @@ -172,7 +172,7 @@ function gutenberg_experimental_global_styles_get_theme() { $theme_gradients = get_theme_support( 'editor-gradient-presets' )[0]; if ( is_array( $theme_gradients ) ) { foreach ( $theme_gradients as $gradient ) { - $theme_supports['gradient'][ $gradient['slug'] ] = $gradient['gradient']; + $theme_supports['preset']['gradient'][ $gradient['slug'] ] = $gradient['gradient']; } } @@ -180,7 +180,7 @@ function gutenberg_experimental_global_styles_get_theme() { $theme_font_sizes = get_theme_support( 'editor-font-sizes' )[0]; if ( is_array( $theme_font_sizes ) ) { foreach ( $theme_font_sizes as $font_size ) { - $theme_supports['font-size'][ $font_size['slug'] ] = $font_size['size']; + $theme_supports['preset']['font-size'][ $font_size['slug'] ] = $font_size['size']; } } From cb15820852a09d4e0117eb393633aa26cf829d4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 11:22:50 +0200 Subject: [PATCH 24/49] Update comment docs --- lib/global-styles.php | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 1fa10ea3968c36..e3bc4cff7acf5a 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -213,22 +213,18 @@ function gutenberg_experimental_global_styles_get_theme() { } /** - * Maintains a list of the CSS selectors available to use. - * This should be taken from the block / pattern registry. + * Retrieves the block data (selector/supports). * * @return array */ function gutenberg_experimental_global_styles_get_block_data() { - // TODO: this data should be taken from the block.json. + // TODO: this data should be taken from the block registry. // // We need the ability to have many selectors per block - // like for heading (core/heading/h1, core/heading/h2, etc) - // but also for other blocks that have complex layouts - // (ex: for gallery we may want to target the wrapper element + // to account for block variations (heading block: h1, ..., h6) + // as well as complex blocks that don't match an HTML element + // (ex:gallery block, for which we may want to target the wrapper element // and the individual images). - // - // Having access to this via the block registry - // requires block server registration. $block_data = array( 'global' => array( 'selector' => ':root', From bcf5e4cecc2540f180960957555e08249f9cd17f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 11:24:03 +0200 Subject: [PATCH 25/49] Update comment docs --- lib/global-styles.php | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index e3bc4cff7acf5a..33e52c5ee69e24 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -220,11 +220,9 @@ function gutenberg_experimental_global_styles_get_theme() { function gutenberg_experimental_global_styles_get_block_data() { // TODO: this data should be taken from the block registry. // - // We need the ability to have many selectors per block - // to account for block variations (heading block: h1, ..., h6) - // as well as complex blocks that don't match an HTML element - // (ex:gallery block, for which we may want to target the wrapper element - // and the individual images). + // At the moment this array replicates the current capabilities + // declared by blocks via __experimentalLineHeight, + // __experimentalColor, and __experimentalFontSize. $block_data = array( 'global' => array( 'selector' => ':root', From ed7306d4013baaefff8580603c25b7fe7d0c8031 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 11:33:57 +0200 Subject: [PATCH 26/49] Do not process blocks that dont have support --- lib/global-styles.php | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/lib/global-styles.php b/lib/global-styles.php index 33e52c5ee69e24..844b91cb922042 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -291,6 +291,16 @@ function gutenberg_experimental_global_styles_resolver_block_styles( $global_sty $block_data = gutenberg_experimental_global_styles_get_block_data(); foreach ( $styles as $block_name => $block_style ) { + if ( + ! array_key_exists( $block_name, $block_data ) || + ! array_key_exists( 'selector', $block_data[ $block_name ] ) || + ! array_key_exists( 'supports', $block_data[ $block_name ] ) + ) { + // Do not process blocks that haven't declared support, + // so we don't know to process. + continue; + } + $css_declarations = ''; foreach ( $block_style as $property => $value ) { // Only convert to CSS the style attributes the block has declared support for. From 045e2507bd762f629664cc3de35f259ef58874d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 11:55:25 +0200 Subject: [PATCH 27/49] Adapt theme.json processing to new styles key --- lib/global-styles.php | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 844b91cb922042..a2378805af4223 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -196,20 +196,25 @@ function gutenberg_experimental_global_styles_get_theme() { * https://github.com/WordPress/gutenberg/issues/20588 * */ - $theme_styles = gutenberg_experimental_global_styles_get_from_file( + $theme_config = gutenberg_experimental_global_styles_get_from_file( locate_template( 'experimental-theme.json' ) ); + $theme_styles = array(); + if ( array_key_exists( 'styles', $theme_config ) ) { + $theme_styles = $theme_config['styles']; + } + if ( ! array_key_exists( 'globals', $theme_styles ) ) { - $theme_styles['globals'] = array(); + $theme_config['styles']['globals'] = array(); } - $theme_styles['globals'] = array_merge_recursive( + $theme_config['styles']['globals'] = array_merge_recursive( $theme_supports, - $theme_styles['globals'] + $theme_config['styles']['globals'] ); - return $theme_styles; + return $theme_config; } /** From dda8fa17eac15b117c7a3e4bf1a591b0bb5594be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 12:15:51 +0200 Subject: [PATCH 28/49] Adapt config to expected shape --- experimental-default-global-styles.json | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json index 839d68dedfa18a..3653a9bfb0704e 100644 --- a/experimental-default-global-styles.json +++ b/experimental-default-global-styles.json @@ -1,8 +1,12 @@ { - "globals": { - "color": { - "background": "white", - "text": "black" + "styles": { + "globals": { + "preset": { + "color": { + "background": "white", + "text": "black" + } + } } } } From 90843cb6d9ee95c1f706c8d233414ca8b9228154 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 12:21:27 +0200 Subject: [PATCH 29/49] Normalize and adapt to new shape --- lib/global-styles.php | 87 +++++++++++++++++++++++++++++++++---------- 1 file changed, 67 insertions(+), 20 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index a2378805af4223..82e47bb9efb3cc 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -71,16 +71,36 @@ function gutenberg_experimental_global_styles_get_from_file( $global_styles_path * @return array Global Styles tree. */ function gutenberg_experimental_global_styles_get_user() { - $global_styles = array(); + $config = array(); $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 ); if ( is_array( $decoded_data ) ) { - $global_styles = $decoded_data; + $config = $decoded_data; } } - return $global_styles; + // Normalize to expected shape. + if ( + ! array_key_exists( 'styles', $config ) || + ! is_array( $config['styles'] ) + ) { + $config['styles'] = array(); + } + if ( + ! array_key_exists( 'globals', $config['styles'] ) || + ! is_array( $config['styles']['globals'] ) + ) { + $config['styles']['globals'] = array(); + } + if ( + ! array_key_exists( 'blocks', $config['styles'] ) || + ! is_array( $config['styles']['blocks'] ) + ) { + $config['styles']['blocks'] = array(); + } + + return $config; } /** @@ -147,9 +167,33 @@ function gutenberg_experimental_global_styles_get_user_cpt_id() { * @return array Global Styles tree. */ function gutenberg_experimental_global_styles_get_core() { - return gutenberg_experimental_global_styles_get_from_file( + $config = gutenberg_experimental_global_styles_get_from_file( dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json' ); + + // Normalize the core config to the expected shape. + if ( + ! array_key_exists( 'styles', $config ) || + ! is_array( $config['styles'] ) + ) { + $config['styles'] = array(); + } + + if ( + ! array_key_exists( 'globals', $config['styles'] ) || + ! is_array( $config['styles']['globals'] ) + ) { + $config['styles']['globals'] = array(); + } + + if ( + ! array_key_exists( 'blocks', $config['styles'] ) || + ! is_array( $config['styles']['blocks'] ) + ) { + $config['styles']['blocks'] = array(); + } + + return $config; } /** @@ -200,6 +244,7 @@ function gutenberg_experimental_global_styles_get_theme() { locate_template( 'experimental-theme.json' ) ); + // Normalize theme config to expected shape. $theme_styles = array(); if ( array_key_exists( 'styles', $theme_config ) ) { $theme_styles = $theme_config['styles']; @@ -287,11 +332,7 @@ function gutenberg_experimental_global_styles_get_block_data() { */ function gutenberg_experimental_global_styles_resolver_block_styles( $global_styles ) { $css_rules = ''; - - if ( ! is_array( $global_styles ) || ! array_key_exists( 'blocks', $global_styles ) ) { - return $css_rules; - } - $styles = $global_styles['blocks']; + $styles = $global_styles['styles']['blocks']; $block_data = gutenberg_experimental_global_styles_get_block_data(); @@ -332,11 +373,7 @@ function gutenberg_experimental_global_styles_resolver_block_styles( $global_sty */ function gutenberg_experimental_global_styles_resolver_globals( $global_styles ) { $css_rules = ''; - - if ( ! is_array( $global_styles ) || ! array_key_exists( 'globals', $global_styles ) ) { - return $css_rules; - } - $styles = $global_styles['globals']; + $styles = $global_styles['styles']['globals']; $token = '--'; $prefix = '--wp' . $token; @@ -360,14 +397,24 @@ function gutenberg_experimental_global_styles_resolver_globals( $global_styles ) * @return string */ function gutenberg_experimental_global_styles_get_stylesheet() { - $global_styles = array_merge( - gutenberg_experimental_global_styles_get_core(), - gutenberg_experimental_global_styles_get_theme(), - gutenberg_experimental_global_styles_get_user() + $gs_merged = array(); + $gs_core = gutenberg_experimental_global_styles_get_core(); + $gs_theme = gutenberg_experimental_global_styles_get_theme(); + $gs_user = gutenberg_experimental_global_styles_get_user(); + + $gs_merged['styles']['globals'] = array_merge( + $gs_core['styles']['globals'], + $gs_theme['styles']['globals'], + $gs_user['styles']['globals'] + ); + $gs_merged['styles']['blocks'] = array_merge( + $gs_core['styles']['blocks'], + $gs_theme['styles']['blocks'], + $gs_user['styles']['blocks'] ); - $stylesheet = gutenberg_experimental_global_styles_resolver_globals( $global_styles ); - $stylesheet .= gutenberg_experimental_global_styles_resolver_block_styles( $global_styles ); + $stylesheet = gutenberg_experimental_global_styles_resolver_globals( $gs_merged ); + $stylesheet .= gutenberg_experimental_global_styles_resolver_block_styles( $gs_merged ); if ( empty( $stylesheet ) ) { return; } From e99f0c1afdc45c13a6863b88d455cd6b18db309b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 12:28:01 +0200 Subject: [PATCH 30/49] Extract normalization function --- lib/global-styles.php | 99 ++++++++++++++++++------------------------- 1 file changed, 41 insertions(+), 58 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 82e47bb9efb3cc..38029b503b27b5 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -71,8 +71,8 @@ function gutenberg_experimental_global_styles_get_from_file( $global_styles_path * @return array Global Styles tree. */ function gutenberg_experimental_global_styles_get_user() { - $config = array(); - $user_cpt = gutenberg_experimental_global_styles_get_user_cpt( array( 'publish' ) ); + $config = array(); + $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 ); if ( is_array( $decoded_data ) ) { @@ -80,27 +80,7 @@ function gutenberg_experimental_global_styles_get_user() { } } - // Normalize to expected shape. - if ( - ! array_key_exists( 'styles', $config ) || - ! is_array( $config['styles'] ) - ) { - $config['styles'] = array(); - } - if ( - ! array_key_exists( 'globals', $config['styles'] ) || - ! is_array( $config['styles']['globals'] ) - ) { - $config['styles']['globals'] = array(); - } - if ( - ! array_key_exists( 'blocks', $config['styles'] ) || - ! is_array( $config['styles']['blocks'] ) - ) { - $config['styles']['blocks'] = array(); - } - - return $config; + return gutenberg_experimental_global_styles_normalize_shape( $config ); } /** @@ -171,29 +151,7 @@ function gutenberg_experimental_global_styles_get_core() { dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json' ); - // Normalize the core config to the expected shape. - if ( - ! array_key_exists( 'styles', $config ) || - ! is_array( $config['styles'] ) - ) { - $config['styles'] = array(); - } - - if ( - ! array_key_exists( 'globals', $config['styles'] ) || - ! is_array( $config['styles']['globals'] ) - ) { - $config['styles']['globals'] = array(); - } - - if ( - ! array_key_exists( 'blocks', $config['styles'] ) || - ! is_array( $config['styles']['blocks'] ) - ) { - $config['styles']['blocks'] = array(); - } - - return $config; + return gutenberg_experimental_global_styles_normalize_shape( $config ); } /** @@ -240,20 +198,12 @@ function gutenberg_experimental_global_styles_get_theme() { * https://github.com/WordPress/gutenberg/issues/20588 * */ - $theme_config = gutenberg_experimental_global_styles_get_from_file( - locate_template( 'experimental-theme.json' ) + $theme_config = gutenberg_experimental_global_styles_normalize_shape( + gutenberg_experimental_global_styles_get_from_file( + locate_template( 'experimental-theme.json' ) + ) ); - // Normalize theme config to expected shape. - $theme_styles = array(); - if ( array_key_exists( 'styles', $theme_config ) ) { - $theme_styles = $theme_config['styles']; - } - - if ( ! array_key_exists( 'globals', $theme_styles ) ) { - $theme_config['styles']['globals'] = array(); - } - $theme_config['styles']['globals'] = array_merge_recursive( $theme_supports, $theme_config['styles']['globals'] @@ -391,6 +341,39 @@ function gutenberg_experimental_global_styles_resolver_globals( $global_styles ) return $css_rules; } +/** + * Given a global styles tree, returns a normalized tree + * that conforms to the expected shape. + * + * @param array $tree Input tree to normalize. + * + * @return array + */ +function gutenberg_experimental_global_styles_normalize_shape( $tree ) { + if ( + ! array_key_exists( 'styles', $tree ) || + ! is_array( $tree['styles'] ) + ) { + $tree['styles'] = array(); + } + + if ( + ! array_key_exists( 'globals', $tree['styles'] ) || + ! is_array( $tree['styles']['globals'] ) + ) { + $tree['styles']['globals'] = array(); + } + + if ( + ! array_key_exists( 'blocks', $tree['styles'] ) || + ! is_array( $tree['styles']['blocks'] ) + ) { + $tree['styles']['blocks'] = array(); + } + + return $tree; +} + /** * Returns the merged styles from core, theme, and user preferences. * From 7e6a2f8841a0235d2c9a6a7a0d56ea5619a66077 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 12:38:36 +0200 Subject: [PATCH 31/49] Extract theme preset utility --- lib/global-styles.php | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 38029b503b27b5..f954ed524a60ca 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -155,18 +155,18 @@ function gutenberg_experimental_global_styles_get_core() { } /** - * Return theme's Global Styles. It also fetches the editor palettes - * declared via add_theme_support. + * Returns the registered theme presets, if any. * - * @return array Global Styles tree. + * @return array */ -function gutenberg_experimental_global_styles_get_theme() { - $theme_supports = array(); +function gutenberg_experimental_global_styles_get_theme_presets() { + $theme_presets = gutenberg_experimental_global_styles_normalize_shape( array() ); + // Take colors from declared theme support. $theme_colors = get_theme_support( 'editor-color-palette' )[0]; if ( is_array( $theme_colors ) ) { foreach ( $theme_colors as $color ) { - $theme_supports['preset']['color'][ $color['slug'] ] = $color['color']; + $theme_presets['preset']['color'][ $color['slug'] ] = $color['color']; } } @@ -174,7 +174,7 @@ function gutenberg_experimental_global_styles_get_theme() { $theme_gradients = get_theme_support( 'editor-gradient-presets' )[0]; if ( is_array( $theme_gradients ) ) { foreach ( $theme_gradients as $gradient ) { - $theme_supports['preset']['gradient'][ $gradient['slug'] ] = $gradient['gradient']; + $theme_presets['preset']['gradient'][ $gradient['slug'] ] = $gradient['gradient']; } } @@ -182,10 +182,22 @@ function gutenberg_experimental_global_styles_get_theme() { $theme_font_sizes = get_theme_support( 'editor-font-sizes' )[0]; if ( is_array( $theme_font_sizes ) ) { foreach ( $theme_font_sizes as $font_size ) { - $theme_supports['preset']['font-size'][ $font_size['slug'] ] = $font_size['size']; + $theme_presets['preset']['font-size'][ $font_size['slug'] ] = $font_size['size']; } } + return $theme_presets; +} + +/** + * Return theme's Global Styles. It also fetches the editor palettes + * declared via add_theme_support. + * + * @return array Global Styles tree. + */ +function gutenberg_experimental_global_styles_get_theme() { + $theme_presets = gutenberg_experimental_global_styles_get_theme_presets(); + /* * We want the presets declared in theme.json * to take precedence over the ones declared via add_theme_support. @@ -205,7 +217,7 @@ function gutenberg_experimental_global_styles_get_theme() { ); $theme_config['styles']['globals'] = array_merge_recursive( - $theme_supports, + $theme_presets, $theme_config['styles']['globals'] ); From 3e9a2efc1ab247199d2856ffa5ca0e589a42413d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 12:45:14 +0200 Subject: [PATCH 32/49] Normalize presets as well --- lib/global-styles.php | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/lib/global-styles.php b/lib/global-styles.php index f954ed524a60ca..30b1572d812489 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -376,6 +376,34 @@ function gutenberg_experimental_global_styles_normalize_shape( $tree ) { $tree['styles']['globals'] = array(); } + if ( + ! array_key_exists( 'preset', $tree['styles']['globals'] ) || + ! is_array( $tree['styles']['globals']['preset'] ) + ) { + $tree['styles']['globals']['preset'] = array(); + } + + if ( + ! array_key_exists( 'color', $tree['styles']['globals']['preset'] ) || + ! is_array( $tree['styles']['globals']['preset']['color'] ) + ) { + $tree['styles']['globals']['preset']['color'] = array(); + } + + if ( + ! array_key_exists( 'font-size', $tree['styles']['globals']['preset'] ) || + ! is_array( $tree['styles']['globals']['preset']['font-size'] ) + ) { + $tree['styles']['globals']['preset']['font-size'] = array(); + } + + if ( + ! array_key_exists( 'gradient', $tree['styles']['globals']['preset'] ) || + ! is_array( $tree['styles']['globals']['preset']['gradient'] ) + ) { + $tree['styles']['globals']['preset']['gradient'] = array(); + } + if ( ! array_key_exists( 'blocks', $tree['styles'] ) || ! is_array( $tree['styles']['blocks'] ) From 88dfb6e5fb852691c3cb62e3eb0782443902a2c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 13:09:44 +0200 Subject: [PATCH 33/49] Add a helper function to merge trees --- lib/global-styles.php | 54 ++++++++++++++++++++++++++++--------------- 1 file changed, 36 insertions(+), 18 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 30b1572d812489..db54f28e5888b7 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -197,28 +197,19 @@ function gutenberg_experimental_global_styles_get_theme_presets() { */ function gutenberg_experimental_global_styles_get_theme() { $theme_presets = gutenberg_experimental_global_styles_get_theme_presets(); - - /* - * We want the presets declared in theme.json - * to take precedence over the ones declared via add_theme_support. - * - * However, at the moment, it's not clear how we're going to declare them - * in theme.json until we resolve issues related to i18n and - * unfold the proper theme.json hierarchy. See: - * - * https://github.com/wp-cli/i18n-command/pull/210 - * https://github.com/WordPress/gutenberg/issues/20588 - * - */ - $theme_config = gutenberg_experimental_global_styles_normalize_shape( + $theme_config = gutenberg_experimental_global_styles_normalize_shape( gutenberg_experimental_global_styles_get_from_file( locate_template( 'experimental-theme.json' ) ) ); - $theme_config['styles']['globals'] = array_merge_recursive( + /* + * We want the presets declared in theme.json + * to take precedence over the ones declared via add_theme_support. + */ + $theme_config = array_merge( $theme_presets, - $theme_config['styles']['globals'] + $theme_config ); return $theme_config; @@ -353,6 +344,33 @@ function gutenberg_experimental_global_styles_resolver_globals( $global_styles ) return $css_rules; } +/** + * Function that incorporates into the source tree + * the modifications given as updates. We use the source + * instead of creating a new array to keep memory usage down. + * + * @param array $source Source tree to be updated. + * @param array $updates Modifications to incorporate. + * + * @return void + */ +function gutenberg_experimental_global_styles_merge_trees( $source, $updates ) { + foreach ( array( 'color', 'font-size', 'gradient' ) as $property ) { + $source['styles']['globals']['preset'][ $property ] = array_merge( + $source['styles']['globals']['preset'][ $property ], + $updates['styles']['globals']['preset'][ $property ] + ); + } + + $block_data = gutenberg_experimental_global_styles_get_block_data(); + foreach ( $block_data as $block_name ) { + $source['styles']['blocks'][ $block_name ] = array_merge( + $source['styles']['blocks'][ $block_name ], + $updates['styles']['blocks'][ $block_name ] + ); + } +} + /** * Given a global styles tree, returns a normalized tree * that conforms to the expected shape. @@ -425,12 +443,12 @@ function gutenberg_experimental_global_styles_get_stylesheet() { $gs_theme = gutenberg_experimental_global_styles_get_theme(); $gs_user = gutenberg_experimental_global_styles_get_user(); - $gs_merged['styles']['globals'] = array_merge( + $gs_merged['styles']['globals'] = array_merge_recursive( $gs_core['styles']['globals'], $gs_theme['styles']['globals'], $gs_user['styles']['globals'] ); - $gs_merged['styles']['blocks'] = array_merge( + $gs_merged['styles']['blocks'] = array_merge_recursive( $gs_core['styles']['blocks'], $gs_theme['styles']['blocks'], $gs_user['styles']['blocks'] From dc776b27fe0b7ad85008d43bd622300cbb84d065 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 13:20:31 +0200 Subject: [PATCH 34/49] Improve normalization function --- lib/global-styles.php | 71 ++++++++++++++----------------------------- 1 file changed, 23 insertions(+), 48 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index db54f28e5888b7..a343b95dd8d43c 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -372,62 +372,37 @@ function gutenberg_experimental_global_styles_merge_trees( $source, $updates ) { } /** - * Given a global styles tree, returns a normalized tree - * that conforms to the expected shape. + * Given a global styles tree, it normalizes it + * to the expected shape. * - * @param array $tree Input tree to normalize. + * @param array $tree Source tree to normalize. * * @return array */ function gutenberg_experimental_global_styles_normalize_shape( $tree ) { - if ( - ! array_key_exists( 'styles', $tree ) || - ! is_array( $tree['styles'] ) - ) { - $tree['styles'] = array(); - } - - if ( - ! array_key_exists( 'globals', $tree['styles'] ) || - ! is_array( $tree['styles']['globals'] ) - ) { - $tree['styles']['globals'] = array(); - } - - if ( - ! array_key_exists( 'preset', $tree['styles']['globals'] ) || - ! is_array( $tree['styles']['globals']['preset'] ) - ) { - $tree['styles']['globals']['preset'] = array(); - } - - if ( - ! array_key_exists( 'color', $tree['styles']['globals']['preset'] ) || - ! is_array( $tree['styles']['globals']['preset']['color'] ) - ) { - $tree['styles']['globals']['preset']['color'] = array(); - } - - if ( - ! array_key_exists( 'font-size', $tree['styles']['globals']['preset'] ) || - ! is_array( $tree['styles']['globals']['preset']['font-size'] ) - ) { - $tree['styles']['globals']['preset']['font-size'] = array(); - } + $normalized_tree = array( + 'styles' => array( + 'globals' => array( + 'preset' => array( + 'color' => array(), + 'font-size' => array(), + 'gradient' => array(), + ), + ), + 'blocks' => array(), + ), + ); - if ( - ! array_key_exists( 'gradient', $tree['styles']['globals']['preset'] ) || - ! is_array( $tree['styles']['globals']['preset']['gradient'] ) - ) { - $tree['styles']['globals']['preset']['gradient'] = array(); + // Add the supported blocks, which we don't know prior which they are. + $block_data = gutenberg_experimental_global_styles_get_block_data(); + foreach ( array_keys( $block_data ) as $block_name ) { + $normalized_tree['styles']['blocks'][ $block_name ] = array(); } - if ( - ! array_key_exists( 'blocks', $tree['styles'] ) || - ! is_array( $tree['styles']['blocks'] ) - ) { - $tree['styles']['blocks'] = array(); - } + $tree = array_merge_recursive( + $normalized_tree, + $tree + ); return $tree; } From eb213834a0222ddb81f1ee9e263967268a7d589b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 13:24:24 +0200 Subject: [PATCH 35/49] Use the helper merge function --- lib/global-styles.php | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index a343b95dd8d43c..360684c72a59ae 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -207,7 +207,7 @@ function gutenberg_experimental_global_styles_get_theme() { * We want the presets declared in theme.json * to take precedence over the ones declared via add_theme_support. */ - $theme_config = array_merge( + $theme_config = gutenberg_experimental_global_styles_merge_trees( $theme_presets, $theme_config ); @@ -418,16 +418,8 @@ function gutenberg_experimental_global_styles_get_stylesheet() { $gs_theme = gutenberg_experimental_global_styles_get_theme(); $gs_user = gutenberg_experimental_global_styles_get_user(); - $gs_merged['styles']['globals'] = array_merge_recursive( - $gs_core['styles']['globals'], - $gs_theme['styles']['globals'], - $gs_user['styles']['globals'] - ); - $gs_merged['styles']['blocks'] = array_merge_recursive( - $gs_core['styles']['blocks'], - $gs_theme['styles']['blocks'], - $gs_user['styles']['blocks'] - ); + $gs_merged = gutenberg_experimental_global_styles_merge_trees( $gs_core, $gs_theme ); + $gs_merged = gutenberg_experimental_global_styles_merge_trees( $gs_merged, $gs_user ); $stylesheet = gutenberg_experimental_global_styles_resolver_globals( $gs_merged ); $stylesheet .= gutenberg_experimental_global_styles_resolver_block_styles( $gs_merged ); @@ -485,7 +477,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) { $settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id(); - $global_styles = array_merge( + $global_styles = gutenberg_experimental_global_styles_merge_trees( gutenberg_experimental_global_styles_get_core(), gutenberg_experimental_global_styles_get_theme() ); From 8450ae316c772fb977b2b6be6f27e06f26204d40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 14:00:02 +0200 Subject: [PATCH 36/49] Make merge utility take variable number of args --- lib/global-styles.php | 56 +++++++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 360684c72a59ae..a76b453118c4d2 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -162,27 +162,24 @@ function gutenberg_experimental_global_styles_get_core() { function gutenberg_experimental_global_styles_get_theme_presets() { $theme_presets = gutenberg_experimental_global_styles_normalize_shape( array() ); - // Take colors from declared theme support. $theme_colors = get_theme_support( 'editor-color-palette' )[0]; if ( is_array( $theme_colors ) ) { foreach ( $theme_colors as $color ) { - $theme_presets['preset']['color'][ $color['slug'] ] = $color['color']; + $theme_presets['styles']['globals']['preset']['color'][ $color['slug'] ] = $color['color']; } } - // Take gradients from declared theme support. $theme_gradients = get_theme_support( 'editor-gradient-presets' )[0]; if ( is_array( $theme_gradients ) ) { foreach ( $theme_gradients as $gradient ) { - $theme_presets['preset']['gradient'][ $gradient['slug'] ] = $gradient['gradient']; + $theme_presets['styles']['globals']['preset']['gradient'][ $gradient['slug'] ] = $gradient['gradient']; } } - // Take font-sizes from declared theme support. $theme_font_sizes = get_theme_support( 'editor-font-sizes' )[0]; if ( is_array( $theme_font_sizes ) ) { foreach ( $theme_font_sizes as $font_size ) { - $theme_presets['preset']['font-size'][ $font_size['slug'] ] = $font_size['size']; + $theme_presets['styles']['globals']['preset']['font-size'][ $font_size['slug'] ] = $font_size['size']; } } @@ -345,30 +342,38 @@ function gutenberg_experimental_global_styles_resolver_globals( $global_styles ) } /** - * Function that incorporates into the source tree - * the modifications given as updates. We use the source - * instead of creating a new array to keep memory usage down. + * Function that merges the given trees. * - * @param array $source Source tree to be updated. - * @param array $updates Modifications to incorporate. + * @param array ...$trees Trees to be merged. * - * @return void + * @return array The merge result. */ -function gutenberg_experimental_global_styles_merge_trees( $source, $updates ) { - foreach ( array( 'color', 'font-size', 'gradient' ) as $property ) { - $source['styles']['globals']['preset'][ $property ] = array_merge( - $source['styles']['globals']['preset'][ $property ], - $updates['styles']['globals']['preset'][ $property ] - ); +function gutenberg_experimental_global_styles_merge_trees( ...$trees ) { + $accumulator = gutenberg_experimental_global_styles_normalize_shape( array() ); + + foreach ( $trees as $tree ) { + foreach ( array_keys( $accumulator['styles']['globals']['preset'] ) as $property ) { + if ( ! empty( $tree['styles']['globals']['preset'][ $property ] ) ) { + $accumulator['styles']['globals']['preset'][ $property ] = array_merge( + $accumulator['styles']['globals']['preset'][ $property ], + $tree['styles']['globals']['preset'][ $property ] + ); + } + } } - $block_data = gutenberg_experimental_global_styles_get_block_data(); - foreach ( $block_data as $block_name ) { - $source['styles']['blocks'][ $block_name ] = array_merge( - $source['styles']['blocks'][ $block_name ], - $updates['styles']['blocks'][ $block_name ] - ); + foreach ( $trees as $tree ) { + foreach ( array_keys( $accumulator['styles']['blocks'] ) as $block_name ) { + if ( ! empty( $tree['styles']['blocks'][ $block_name ] ) ) { + $accumulator['styles']['blocks'][ $block_name ] = array_merge( + $accumulator['styles']['blocks'][ $block_name ], + $tree['styles']['blocks'][ $block_name ] + ); + } + } } + + return $accumulator; } /** @@ -418,8 +423,7 @@ function gutenberg_experimental_global_styles_get_stylesheet() { $gs_theme = gutenberg_experimental_global_styles_get_theme(); $gs_user = gutenberg_experimental_global_styles_get_user(); - $gs_merged = gutenberg_experimental_global_styles_merge_trees( $gs_core, $gs_theme ); - $gs_merged = gutenberg_experimental_global_styles_merge_trees( $gs_merged, $gs_user ); + $gs_merged = gutenberg_experimental_global_styles_merge_trees( $gs_core, $gs_theme, $gs_user ); $stylesheet = gutenberg_experimental_global_styles_resolver_globals( $gs_merged ); $stylesheet .= gutenberg_experimental_global_styles_resolver_block_styles( $gs_merged ); From f5df4d0ad45fa8114226f4cdb62c3b78cd0b812a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 14:06:04 +0200 Subject: [PATCH 37/49] Fix merge helper it should discard previous origin declarations if current origin has any --- lib/global-styles.php | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index a76b453118c4d2..a100f43570086e 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -354,10 +354,7 @@ function gutenberg_experimental_global_styles_merge_trees( ...$trees ) { foreach ( $trees as $tree ) { foreach ( array_keys( $accumulator['styles']['globals']['preset'] ) as $property ) { if ( ! empty( $tree['styles']['globals']['preset'][ $property ] ) ) { - $accumulator['styles']['globals']['preset'][ $property ] = array_merge( - $accumulator['styles']['globals']['preset'][ $property ], - $tree['styles']['globals']['preset'][ $property ] - ); + $accumulator['styles']['globals']['preset'][ $property ] = $tree['styles']['globals']['preset'][ $property ]; } } } @@ -365,10 +362,7 @@ function gutenberg_experimental_global_styles_merge_trees( ...$trees ) { foreach ( $trees as $tree ) { foreach ( array_keys( $accumulator['styles']['blocks'] ) as $block_name ) { if ( ! empty( $tree['styles']['blocks'][ $block_name ] ) ) { - $accumulator['styles']['blocks'][ $block_name ] = array_merge( - $accumulator['styles']['blocks'][ $block_name ], - $tree['styles']['blocks'][ $block_name ] - ); + $accumulator['styles']['blocks'][ $block_name ] = $tree['styles']['blocks'][ $block_name ]; } } } From 10a95066409c1f6ac241413a452221075a481d7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 14:15:03 +0200 Subject: [PATCH 38/49] Add core color presets --- experimental-default-global-styles.json | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json index 3653a9bfb0704e..3b8305a875cad1 100644 --- a/experimental-default-global-styles.json +++ b/experimental-default-global-styles.json @@ -3,8 +3,18 @@ "globals": { "preset": { "color": { - "background": "white", - "text": "black" + "pale-pink": "#f78da7", + "vivid-red": "#cf2e2e", + "luminous-vivid-orange": "#ff6900", + "luminous-vivid-amber": "#fcb900", + "light-green-cyan": "#7bdcb5", + "vivid-green-cyan": "#00d084", + "pale-cyan-blue": "#8ed1fc", + "vivid-cyan-blue": "#0693e3", + "vivid-purple": "#9b51e0", + "very-light-gray": "#eeeeee", + "cyan-bluish-gray": "#abb8c3", + "very-dark-gray": "#313131" } } } From 6e9e0f4a2a90ebf28f7024fcc43dbd64f2075d9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 14:25:12 +0200 Subject: [PATCH 39/49] Add core presets: font-size, gradient --- experimental-default-global-styles.json | 37 +++++++++++++++++++------ 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json index 3b8305a875cad1..d6ff30b18daf22 100644 --- a/experimental-default-global-styles.json +++ b/experimental-default-global-styles.json @@ -3,18 +3,39 @@ "globals": { "preset": { "color": { - "pale-pink": "#f78da7", - "vivid-red": "#cf2e2e", - "luminous-vivid-orange": "#ff6900", - "luminous-vivid-amber": "#fcb900", + "black": "#000000", + "cyan-bluish-gray": "#abb8c3", "light-green-cyan": "#7bdcb5", - "vivid-green-cyan": "#00d084", + "luminous-vivid-amber": "#fcb900", + "luminous-vivid-orange": "#ff6900", "pale-cyan-blue": "#8ed1fc", + "pale-pink": "#f78da7", "vivid-cyan-blue": "#0693e3", + "vivid-green-cyan": "#00d084", "vivid-purple": "#9b51e0", - "very-light-gray": "#eeeeee", - "cyan-bluish-gray": "#abb8c3", - "very-dark-gray": "#313131" + "vivid-red": "#cf2e2e", + "white": "#ffffff" + }, + "font-size": { + "small": 13, + "normal": 16, + "medium": 20, + "large": 36, + "huge": 48 + }, + "gradient": { + "blush-bordeaux": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)", + "blush-light-purple": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)", + "cool-to-warm-spectrum": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)", + "electric-grass": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)", + "light-green-cyan-to-vivid-green-cyan": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)", + "luminous-dusk": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)", + "luminous-vivid-amber-to-luminous-vivid-orange": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)", + "luminous-vivid-orange-to-vivid-red": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)", + "midnight": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)", + "pale-ocean": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)", + "very-light-gray-to-cyan-bluish-gray": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)", + "vivid-cyan-blue-to-vivid-purple": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)" } } } From f05817bf51f98a1108b15685e6462a41be8397e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 17:40:07 +0200 Subject: [PATCH 40/49] Adapt to new shape --- experimental-default-global-styles.json | 74 ++++++++++++------------- 1 file changed, 36 insertions(+), 38 deletions(-) diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json index d6ff30b18daf22..735fd2bc6e890f 100644 --- a/experimental-default-global-styles.json +++ b/experimental-default-global-styles.json @@ -1,42 +1,40 @@ { - "styles": { - "globals": { - "preset": { - "color": { - "black": "#000000", - "cyan-bluish-gray": "#abb8c3", - "light-green-cyan": "#7bdcb5", - "luminous-vivid-amber": "#fcb900", - "luminous-vivid-orange": "#ff6900", - "pale-cyan-blue": "#8ed1fc", - "pale-pink": "#f78da7", - "vivid-cyan-blue": "#0693e3", - "vivid-green-cyan": "#00d084", - "vivid-purple": "#9b51e0", - "vivid-red": "#cf2e2e", - "white": "#ffffff" - }, - "font-size": { - "small": 13, - "normal": 16, - "medium": 20, - "large": 36, - "huge": 48 - }, - "gradient": { - "blush-bordeaux": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)", - "blush-light-purple": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)", - "cool-to-warm-spectrum": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)", - "electric-grass": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)", - "light-green-cyan-to-vivid-green-cyan": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)", - "luminous-dusk": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)", - "luminous-vivid-amber-to-luminous-vivid-orange": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)", - "luminous-vivid-orange-to-vivid-red": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)", - "midnight": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)", - "pale-ocean": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)", - "very-light-gray-to-cyan-bluish-gray": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)", - "vivid-cyan-blue-to-vivid-purple": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)" - } + "global": { + "presets": { + "color": { + "black": "#000000", + "cyan-bluish-gray": "#abb8c3", + "light-green-cyan": "#7bdcb5", + "luminous-vivid-amber": "#fcb900", + "luminous-vivid-orange": "#ff6900", + "pale-cyan-blue": "#8ed1fc", + "pale-pink": "#f78da7", + "vivid-cyan-blue": "#0693e3", + "vivid-green-cyan": "#00d084", + "vivid-purple": "#9b51e0", + "vivid-red": "#cf2e2e", + "white": "#ffffff" + }, + "font-size": { + "small": 13, + "normal": 16, + "medium": 20, + "large": 36, + "huge": 48 + }, + "gradient": { + "blush-bordeaux": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)", + "blush-light-purple": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)", + "cool-to-warm-spectrum": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)", + "electric-grass": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)", + "light-green-cyan-to-vivid-green-cyan": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)", + "luminous-dusk": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)", + "luminous-vivid-amber-to-luminous-vivid-orange": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)", + "luminous-vivid-orange-to-vivid-red": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)", + "midnight": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)", + "pale-ocean": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)", + "very-light-gray-to-cyan-bluish-gray": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)", + "vivid-cyan-blue-to-vivid-purple": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)" } } } From 93fb8dd1cf691fe2ce868cb5e172a4cb0f49e725 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 18:04:59 +0200 Subject: [PATCH 41/49] Fix shape for helper functions --- lib/global-styles.php | 43 +++++++++++++++++++++---------------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index a100f43570086e..8866d997ec4dfe 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -165,21 +165,21 @@ function gutenberg_experimental_global_styles_get_theme_presets() { $theme_colors = get_theme_support( 'editor-color-palette' )[0]; if ( is_array( $theme_colors ) ) { foreach ( $theme_colors as $color ) { - $theme_presets['styles']['globals']['preset']['color'][ $color['slug'] ] = $color['color']; + $theme_presets['global']['presets']['color'][ $color['slug'] ] = $color['color']; } } $theme_gradients = get_theme_support( 'editor-gradient-presets' )[0]; if ( is_array( $theme_gradients ) ) { foreach ( $theme_gradients as $gradient ) { - $theme_presets['styles']['globals']['preset']['gradient'][ $gradient['slug'] ] = $gradient['gradient']; + $theme_presets['global']['presets']['gradient'][ $gradient['slug'] ] = $gradient['gradient']; } } $theme_font_sizes = get_theme_support( 'editor-font-sizes' )[0]; if ( is_array( $theme_font_sizes ) ) { foreach ( $theme_font_sizes as $font_size ) { - $theme_presets['styles']['globals']['preset']['font-size'][ $font_size['slug'] ] = $font_size['size']; + $theme_presets['global']['presets']['font-size'][ $font_size['slug'] ] = $font_size['size']; } } @@ -352,17 +352,19 @@ function gutenberg_experimental_global_styles_merge_trees( ...$trees ) { $accumulator = gutenberg_experimental_global_styles_normalize_shape( array() ); foreach ( $trees as $tree ) { - foreach ( array_keys( $accumulator['styles']['globals']['preset'] ) as $property ) { - if ( ! empty( $tree['styles']['globals']['preset'][ $property ] ) ) { - $accumulator['styles']['globals']['preset'][ $property ] = $tree['styles']['globals']['preset'][ $property ]; + foreach ( array_keys( $accumulator ) as $block_name ) { + foreach ( array_keys( $accumulator['global']['presets'] ) as $property ) { + if ( ! empty( $tree[ $block_name ]['presets'][ $property ] ) ) { + $accumulator[ $block_name ]['presets'][ $property ] = $tree[ $block_name ]['presets'][ $property ]; + } } } } foreach ( $trees as $tree ) { - foreach ( array_keys( $accumulator['styles']['blocks'] ) as $block_name ) { - if ( ! empty( $tree['styles']['blocks'][ $block_name ] ) ) { - $accumulator['styles']['blocks'][ $block_name ] = $tree['styles']['blocks'][ $block_name ]; + foreach ( array_keys( $accumulator ) as $block_name ) { + if ( ! empty( $tree[ $block_name ]['styles'] ) ) { + $accumulator[ $block_name ]['styles'] = $tree[ $block_name ]['styles']; } } } @@ -379,23 +381,20 @@ function gutenberg_experimental_global_styles_merge_trees( ...$trees ) { * @return array */ function gutenberg_experimental_global_styles_normalize_shape( $tree ) { - $normalized_tree = array( - 'styles' => array( - 'globals' => array( - 'preset' => array( - 'color' => array(), - 'font-size' => array(), - 'gradient' => array(), - ), - ), - 'blocks' => array(), + $block_shape = array( + 'styles' => array(), + 'features' => array(), + 'presets' => array( + 'color' => array(), + 'font-size' => array(), + 'gradient' => array(), ), ); - // Add the supported blocks, which we don't know prior which they are. - $block_data = gutenberg_experimental_global_styles_get_block_data(); + $normalized_tree = array( 'global' => array( $block_shape ) ); + $block_data = gutenberg_experimental_global_styles_get_block_data(); foreach ( array_keys( $block_data ) as $block_name ) { - $normalized_tree['styles']['blocks'][ $block_name ] = array(); + $normalized_tree[ $block_name ] = $block_shape; } $tree = array_merge_recursive( From 5ca82a9873d42082194c393edabb619589193b53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 18:39:12 +0200 Subject: [PATCH 42/49] Rearrange code to optimize for new shape --- lib/global-styles.php | 114 ++++++++++++++++++++++++++---------------- 1 file changed, 70 insertions(+), 44 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 8866d997ec4dfe..55a60e3b9bc8c2 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -19,16 +19,16 @@ function gutenberg_experimental_global_styles_has_theme_support() { * whose keys are the CSS custom properties * and its values the CSS custom properties' values. * - * @param array $global_styles Global Styles object to process. + * @param array $styles Global Styles object to process. * @param string $prefix Prefix to prepend to each variable. * @param string $token Token to use between levels. * * @return array The flattened tree. */ -function gutenberg_experimental_global_styles_get_css_vars( $global_styles, $prefix = '', $token = '--' ) { +function gutenberg_experimental_global_styles_get_css_vars( $styles, $prefix = '', $token = '--' ) { $result = array(); - foreach ( $global_styles as $key => $value ) { - $new_key = $prefix . str_replace( '/', '-', $key ); + foreach ( $styles as $property => $value ) { + $new_key = $prefix . str_replace( '/', '-', $property ); if ( is_array( $value ) ) { $new_prefix = $new_key . $token; @@ -274,71 +274,98 @@ function gutenberg_experimental_global_styles_get_block_data() { } /** - * Takes a tree and returns the CSS rules - * with the proper declarations. + * Takes a global styles tree and generates + * the corresponding stylesheet. + * + * @param array $tree Global Styles tree. * - * @param array $global_styles Global Styles tree. - * @return string A list of CSS rules. + * @return string */ -function gutenberg_experimental_global_styles_resolver_block_styles( $global_styles ) { - $css_rules = ''; - $styles = $global_styles['styles']['blocks']; - +function gutenberg_experimental_global_styles_resolver( $tree ) { + $stylesheet = ''; $block_data = gutenberg_experimental_global_styles_get_block_data(); - - foreach ( $styles as $block_name => $block_style ) { + foreach ( array_keys( $tree ) as $block_name ) { if ( ! array_key_exists( $block_name, $block_data ) || ! array_key_exists( 'selector', $block_data[ $block_name ] ) || ! array_key_exists( 'supports', $block_data[ $block_name ] ) ) { - // Do not process blocks that haven't declared support, + // Skip blocks that haven't declared support, // so we don't know to process. continue; } - $css_declarations = ''; - foreach ( $block_style as $property => $value ) { - // Only convert to CSS the style attributes the block has declared support for. - if ( in_array( $property, $block_data[ $block_name ]['supports'], true ) ) { - $css_declarations .= "\t" . $property . ': ' . $value . ";\n"; - } - } - if ( '' !== $css_declarations ) { - $css_rules .= $block_data[ $block_name ]['selector'] . " {\n"; - $css_rules .= $css_declarations; - $css_rules .= "}\n"; + $token = '--'; + $prefix = '--wp--preset' . $token; + $css_variables = gutenberg_experimental_global_styles_get_css_vars( $tree[ $block_name ]['presets'], $prefix, $token ); + + $stylesheet .= gutenberg_experimental_global_styles_resolver_styles( + $block_data[ $block_name ]['selector'], + $block_data[ $block_name ]['supports'], + array_merge( $tree[ $block_name ]['styles'], $css_variables ) + ); + } + return $stylesheet; +} + +/** + * Takes a tree and returns the CSS rule + * with the proper declarations. + * + * @param string $block_selector CSS selector for the block. + * @param array $block_supports A list of properties supported by the block. + * @param array $block_styles The list of properties/values to be converted to CSS. + * + * @return string The corresponding CSS rule. + */ +function gutenberg_experimental_global_styles_resolver_styles( $block_selector, $block_supports, $block_styles ) { + $css_rule = ''; + $css_declarations = ''; + foreach ( $block_styles as $property => $value ) { + // Only convert to CSS: + // + // 1) The style attributes the block has declared support for. + // 2) Any CSS custom property attached to the node. + if ( in_array( $property, $block_supports, true ) || strstr( $property, '--' ) ) { + $css_declarations .= "\t" . $property . ': ' . $value . ";\n"; } } + if ( '' !== $css_declarations ) { + $css_rule .= $block_selector . " {\n"; + $css_rule .= $css_declarations; + $css_rule .= "}\n"; + } - return $css_rules; + return $css_rule; } /** * Takes a tree and returns a CSS rule * that contains the corresponding CSS custom properties. * - * @param array $global_styles Global Styles tree. - * @return string A list of CSS rules. + * @param string $block_selector CSS selector for the block. + * @param array $presets Presets to convert to CSS variables. + * + * @return string The corresponding CSS rule. */ -function gutenberg_experimental_global_styles_resolver_globals( $global_styles ) { - $css_rules = ''; - $styles = $global_styles['styles']['globals']; - +function gutenberg_experimental_global_styles_resolver_presets( $block_selector, $presets ) { + $css_rule = ''; $token = '--'; - $prefix = '--wp' . $token; - $css_vars = gutenberg_experimental_global_styles_get_css_vars( $styles, $prefix, $token ); - if ( empty( $css_vars ) ) { - return $css_rules; + $prefix = '--wp--presets' . $token; + + $css_declarations = gutenberg_experimental_global_styles_get_css_vars( $presets, $prefix, $token ); + if ( empty( $css_declarations ) ) { + return $css_rule; } - $css_rules .= " :root {\n"; - foreach ( $css_vars as $var => $value ) { - $css_rules .= "\t" . $var . ': ' . $value . ";\n"; + error_log( 'declarations ' . print_r( $css_declarations, true ) ); + $css_rule .= $block_selector . " {\n"; + foreach ( $css_declarations as $property => $value ) { + $css_rule .= "\t" . $property . ': ' . $value . ";\n"; } - $css_rules .= "}\n"; + $css_rule .= "}\n"; - return $css_rules; + return $css_rule; } /** @@ -418,8 +445,7 @@ function gutenberg_experimental_global_styles_get_stylesheet() { $gs_merged = gutenberg_experimental_global_styles_merge_trees( $gs_core, $gs_theme, $gs_user ); - $stylesheet = gutenberg_experimental_global_styles_resolver_globals( $gs_merged ); - $stylesheet .= gutenberg_experimental_global_styles_resolver_block_styles( $gs_merged ); + $stylesheet = gutenberg_experimental_global_styles_resolver( $gs_merged ); if ( empty( $stylesheet ) ) { return; } From 52c9195583d73eed58391aaa7a7187b8542bf91f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 18:57:17 +0200 Subject: [PATCH 43/49] Remove error_log --- lib/global-styles.php | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 55a60e3b9bc8c2..1084d0cda940b9 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -358,7 +358,6 @@ function gutenberg_experimental_global_styles_resolver_presets( $block_selector, return $css_rule; } - error_log( 'declarations ' . print_r( $css_declarations, true ) ); $css_rule .= $block_selector . " {\n"; foreach ( $css_declarations as $property => $value ) { $css_rule .= "\t" . $property . ': ' . $value . ";\n"; From 43c5c91433df15f8dc363a5b7d63ffcebd671cfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 19:01:53 +0200 Subject: [PATCH 44/49] Naming: use schema instead of shape everywhere --- lib/global-styles.php | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 1084d0cda940b9..06fa8895dc3045 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -80,7 +80,7 @@ function gutenberg_experimental_global_styles_get_user() { } } - return gutenberg_experimental_global_styles_normalize_shape( $config ); + return gutenberg_experimental_global_styles_normalize_schema( $config ); } /** @@ -151,7 +151,7 @@ function gutenberg_experimental_global_styles_get_core() { dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json' ); - return gutenberg_experimental_global_styles_normalize_shape( $config ); + return gutenberg_experimental_global_styles_normalize_schema( $config ); } /** @@ -160,7 +160,7 @@ function gutenberg_experimental_global_styles_get_core() { * @return array */ function gutenberg_experimental_global_styles_get_theme_presets() { - $theme_presets = gutenberg_experimental_global_styles_normalize_shape( array() ); + $theme_presets = gutenberg_experimental_global_styles_normalize_schema( array() ); $theme_colors = get_theme_support( 'editor-color-palette' )[0]; if ( is_array( $theme_colors ) ) { @@ -194,7 +194,7 @@ function gutenberg_experimental_global_styles_get_theme_presets() { */ function gutenberg_experimental_global_styles_get_theme() { $theme_presets = gutenberg_experimental_global_styles_get_theme_presets(); - $theme_config = gutenberg_experimental_global_styles_normalize_shape( + $theme_config = gutenberg_experimental_global_styles_normalize_schema( gutenberg_experimental_global_styles_get_from_file( locate_template( 'experimental-theme.json' ) ) @@ -375,7 +375,7 @@ function gutenberg_experimental_global_styles_resolver_presets( $block_selector, * @return array The merge result. */ function gutenberg_experimental_global_styles_merge_trees( ...$trees ) { - $accumulator = gutenberg_experimental_global_styles_normalize_shape( array() ); + $accumulator = gutenberg_experimental_global_styles_normalize_schema( array() ); foreach ( $trees as $tree ) { foreach ( array_keys( $accumulator ) as $block_name ) { @@ -399,15 +399,14 @@ function gutenberg_experimental_global_styles_merge_trees( ...$trees ) { } /** - * Given a global styles tree, it normalizes it - * to the expected shape. + * Given a tree, it normalizes it to the expected schema. * * @param array $tree Source tree to normalize. * - * @return array + * @return array Normalized tree. */ -function gutenberg_experimental_global_styles_normalize_shape( $tree ) { - $block_shape = array( +function gutenberg_experimental_global_styles_normalize_schema( $tree ) { + $block_schema = array( 'styles' => array(), 'features' => array(), 'presets' => array( @@ -417,10 +416,10 @@ function gutenberg_experimental_global_styles_normalize_shape( $tree ) { ), ); - $normalized_tree = array( 'global' => array( $block_shape ) ); + $normalized_tree = array( 'global' => array( $block_schema ) ); $block_data = gutenberg_experimental_global_styles_get_block_data(); foreach ( array_keys( $block_data ) as $block_name ) { - $normalized_tree[ $block_name ] = $block_shape; + $normalized_tree[ $block_name ] = $block_schema; } $tree = array_merge_recursive( @@ -444,7 +443,7 @@ function gutenberg_experimental_global_styles_get_stylesheet() { $gs_merged = gutenberg_experimental_global_styles_merge_trees( $gs_core, $gs_theme, $gs_user ); - $stylesheet = gutenberg_experimental_global_styles_resolver( $gs_merged ); + $stylesheet = gutenberg_experimental_global_styles_resolver( $gs_merged ); if ( empty( $stylesheet ) ) { return; } From 15fbc4448666b257b0b16ed4724739d478aaf85e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 19:18:11 +0200 Subject: [PATCH 45/49] Update phpdoc --- lib/global-styles.php | 107 +++++++++++++++--------------------------- 1 file changed, 39 insertions(+), 68 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 06fa8895dc3045..f94ade05de966f 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -15,11 +15,11 @@ function gutenberg_experimental_global_styles_has_theme_support() { } /** - * Given a Global Styles tree, it creates a flattened tree + * Given a styles tree, it creates a flattened one * whose keys are the CSS custom properties * and its values the CSS custom properties' values. * - * @param array $styles Global Styles object to process. + * @param array $styles Styles object to process. * @param string $prefix Prefix to prepend to each variable. * @param string $token Token to use between levels. * @@ -44,31 +44,31 @@ function gutenberg_experimental_global_styles_get_css_vars( $styles, $prefix = ' } /** - * Returns an array containing the Global Styles - * found in a file, or a void array if none found. + * Processes a file that adheres to the theme.json + * schema and returns an array with its contents, + * or a void array if none found. * - * @param string $global_styles_path Path to file. - * @return array Global Styles tree. + * @param string $file_path Path to file. + * @return array Contents that adhere to the theme.json schema. */ -function gutenberg_experimental_global_styles_get_from_file( $global_styles_path ) { - $global_styles = array(); - if ( file_exists( $global_styles_path ) ) { +function gutenberg_experimental_global_styles_get_from_file( $file_path ) { + $config = array(); + if ( file_exists( $file_path ) ) { $decoded_file = json_decode( - file_get_contents( $global_styles_path ), + file_get_contents( $file_path ), true ); if ( is_array( $decoded_file ) ) { - $global_styles = $decoded_file; + $config = $decoded_file; } } - return $global_styles; + return $config; } /** - * Returns an array containing the user's Global Styles - * or a void array if none. + * Returns the user's preferences. * - * @return array Global Styles tree. + * @return array Config that adheres to the theme.json schema. */ function gutenberg_experimental_global_styles_get_user() { $config = array(); @@ -84,7 +84,7 @@ function gutenberg_experimental_global_styles_get_user() { } /** - * Returns the CPT that contains the user's Global Styles + * Returns the CPT that contains the user's preferences * for the current theme or a void array if none found. * It can also create and return a new draft CPT. * @@ -92,7 +92,7 @@ function gutenberg_experimental_global_styles_get_user() { * By default, only fetches published posts. * @param bool $should_create_draft Whether a new draft should be created * if no CPT was found. False by default. - * @return array Custom Post Type for the user's Global Styles. + * @return array Custom Post Type for the user's preferences. */ function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = array( 'publish' ), $should_create_draft = false ) { $user_cpt = array(); @@ -128,9 +128,9 @@ function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter } /** - * Returns the post ID of the CPT containing the user's Global Styles. + * Returns the post ID of the CPT containing the user's preferences. * - * @return integer Custom Post Type ID for the user's Global Styles. + * @return integer Custom Post Type ID for the user's preferences. */ function gutenberg_experimental_global_styles_get_user_cpt_id() { $user_cpt_id = null; @@ -142,9 +142,9 @@ function gutenberg_experimental_global_styles_get_user_cpt_id() { } /** - * Return core's Global Styles. + * Return core's preferences. * - * @return array Global Styles tree. + * @return array Config that adheres to the theme.json schema. */ function gutenberg_experimental_global_styles_get_core() { $config = gutenberg_experimental_global_styles_get_from_file( @@ -155,7 +155,7 @@ function gutenberg_experimental_global_styles_get_core() { } /** - * Returns the registered theme presets, if any. + * Returns the theme presets registered via add_theme_support, if any. * * @return array */ @@ -187,10 +187,11 @@ function gutenberg_experimental_global_styles_get_theme_presets() { } /** - * Return theme's Global Styles. It also fetches the editor palettes - * declared via add_theme_support. + * Returns the theme's preferences. It also fetches + * the existing presets the theme declared via add_theme_support + * and adds them to the global presets. * - * @return array Global Styles tree. + * @return array Config that adheres to the theme.json schema. */ function gutenberg_experimental_global_styles_get_theme() { $theme_presets = gutenberg_experimental_global_styles_get_theme_presets(); @@ -274,12 +275,12 @@ function gutenberg_experimental_global_styles_get_block_data() { } /** - * Takes a global styles tree and generates + * Takes a tree adhering to the theme.json schema and generates * the corresponding stylesheet. * - * @param array $tree Global Styles tree. + * @param array $tree Input tree. * - * @return string + * @return string Stylesheet. */ function gutenberg_experimental_global_styles_resolver( $tree ) { $stylesheet = ''; @@ -309,8 +310,7 @@ function gutenberg_experimental_global_styles_resolver( $tree ) { } /** - * Takes a tree and returns the CSS rule - * with the proper declarations. + * Generates CSS declarations for a block. * * @param string $block_selector CSS selector for the block. * @param array $block_supports A list of properties supported by the block. @@ -340,39 +340,11 @@ function gutenberg_experimental_global_styles_resolver_styles( $block_selector, } /** - * Takes a tree and returns a CSS rule - * that contains the corresponding CSS custom properties. - * - * @param string $block_selector CSS selector for the block. - * @param array $presets Presets to convert to CSS variables. - * - * @return string The corresponding CSS rule. - */ -function gutenberg_experimental_global_styles_resolver_presets( $block_selector, $presets ) { - $css_rule = ''; - $token = '--'; - $prefix = '--wp--presets' . $token; - - $css_declarations = gutenberg_experimental_global_styles_get_css_vars( $presets, $prefix, $token ); - if ( empty( $css_declarations ) ) { - return $css_rule; - } - - $css_rule .= $block_selector . " {\n"; - foreach ( $css_declarations as $property => $value ) { - $css_rule .= "\t" . $property . ': ' . $value . ";\n"; - } - $css_rule .= "}\n"; - - return $css_rule; -} - -/** - * Function that merges the given trees. + * Helper function that merges trees that adhere to the theme.json schema. * - * @param array ...$trees Trees to be merged. + * @param array ...$trees List of trees to be merged. * - * @return array The merge result. + * @return array The merged result. */ function gutenberg_experimental_global_styles_merge_trees( ...$trees ) { $accumulator = gutenberg_experimental_global_styles_normalize_schema( array() ); @@ -431,7 +403,8 @@ function gutenberg_experimental_global_styles_normalize_schema( $tree ) { } /** - * Returns the merged styles from core, theme, and user preferences. + * Returns the stylesheet resulting of merging + * core's, theme's, and user's preferences. * * @return string */ @@ -451,8 +424,8 @@ function gutenberg_experimental_global_styles_get_stylesheet() { } /** - * Fetches the Global Styles for each level (core, theme, user) - * and enqueues the resulting CSS custom properties. + * Fetches the preferences for each origin (core, theme, user) + * and enqueues the resulting stylesheet. */ function gutenberg_experimental_global_styles_enqueue_assets() { if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { @@ -481,9 +454,7 @@ function gutenberg_experimental_global_styles_is_site_editor() { } /** - * Makes the base Global Styles (core, theme) - * and the ID of the CPT that stores the user's Global Styles - * available to the client, to be used for live rendering the styles. + * Adds the necessary data for the Global Styles client UI to the block settings. * * @param array $settings Existing block editor settings. * @return array New block editor settings @@ -514,7 +485,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) { } /** - * Registers a Custom Post Type to store the user's Global Styles. + * Registers a Custom Post Type to store the user's preferences. */ function gutenberg_experimental_global_styles_register_cpt() { if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { From c45844058bba46158fb65a9951d4a79c516afd41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 May 2020 19:26:23 +0200 Subject: [PATCH 46/49] Simplify merge helper function --- lib/global-styles.php | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index f94ade05de966f..502d02b9d629bb 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -351,6 +351,12 @@ function gutenberg_experimental_global_styles_merge_trees( ...$trees ) { foreach ( $trees as $tree ) { foreach ( array_keys( $accumulator ) as $block_name ) { + // Merge styles. + if ( ! empty( $tree[ $block_name ]['styles'] ) ) { + $accumulator[ $block_name ]['styles'] = $tree[ $block_name ]['styles']; + } + + // Merge presets. foreach ( array_keys( $accumulator['global']['presets'] ) as $property ) { if ( ! empty( $tree[ $block_name ]['presets'][ $property ] ) ) { $accumulator[ $block_name ]['presets'][ $property ] = $tree[ $block_name ]['presets'][ $property ]; @@ -359,14 +365,6 @@ function gutenberg_experimental_global_styles_merge_trees( ...$trees ) { } } - foreach ( $trees as $tree ) { - foreach ( array_keys( $accumulator ) as $block_name ) { - if ( ! empty( $tree[ $block_name ]['styles'] ) ) { - $accumulator[ $block_name ]['styles'] = $tree[ $block_name ]['styles']; - } - } - } - return $accumulator; } From e484d7b7080e7b539b497a0a5a9e59ed45f45315 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 18 May 2020 17:43:13 +0200 Subject: [PATCH 47/49] Use preset format We cannot use the full preset schema, including names, because our tooling is not able to internationalize the names from the theme.json file, we can use the final format for them. --- experimental-default-global-styles.json | 157 ++++++++++++++++++------ lib/global-styles.php | 24 +++- 2 files changed, 143 insertions(+), 38 deletions(-) diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json index 735fd2bc6e890f..d4687a6a46ac61 100644 --- a/experimental-default-global-styles.json +++ b/experimental-default-global-styles.json @@ -1,41 +1,128 @@ { "global": { "presets": { - "color": { - "black": "#000000", - "cyan-bluish-gray": "#abb8c3", - "light-green-cyan": "#7bdcb5", - "luminous-vivid-amber": "#fcb900", - "luminous-vivid-orange": "#ff6900", - "pale-cyan-blue": "#8ed1fc", - "pale-pink": "#f78da7", - "vivid-cyan-blue": "#0693e3", - "vivid-green-cyan": "#00d084", - "vivid-purple": "#9b51e0", - "vivid-red": "#cf2e2e", - "white": "#ffffff" - }, - "font-size": { - "small": 13, - "normal": 16, - "medium": 20, - "large": 36, - "huge": 48 - }, - "gradient": { - "blush-bordeaux": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)", - "blush-light-purple": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)", - "cool-to-warm-spectrum": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)", - "electric-grass": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)", - "light-green-cyan-to-vivid-green-cyan": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)", - "luminous-dusk": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)", - "luminous-vivid-amber-to-luminous-vivid-orange": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)", - "luminous-vivid-orange-to-vivid-red": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)", - "midnight": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)", - "pale-ocean": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)", - "very-light-gray-to-cyan-bluish-gray": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)", - "vivid-cyan-blue-to-vivid-purple": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)" - } + "color": [ + { + "slug": "black", + "value": "#000000" + }, + { + "slug": "cyan-bluish-gray", + "value": "#abb8c3" + }, + { + "slug": "light-green-cyan", + "value": "#7bdcb5" + }, + { + "slug": "luminous-vivid-amber", + "value": "#fcb900" + }, + { + "slug": "luminous-vivid-orange", + "value": "#ff6900" + }, + { + "slug": "pale-cyan-blue", + "value": "#8ed1fc" + }, + { + "slug": "pale-pink", + "value": "#f78da7" + }, + { + "slug": "vivid-cyan-blue", + "value": "#0693e3" + }, + { + "slug": "vivid-green-cyan", + "value": "#00d084" + }, + { + "slug": "vivid-purple", + "value": "#9b51e0" + }, + { + "slug": "vivid-red", + "value": "#cf2e2e" + }, + { + "slug": "white", + "value": "#ffffff" + } + ], + "font-size": [ + { + "slug": "small", + "value": 13 + }, + { + "slug": "normal", + "value": 16 + }, + { + "slug": "medium", + "value": 20 + }, + { + "slug": "large", + "value": 36 + }, + { + "slug": "huge", + "value": 48 + } + ], + "gradient": [ + { + "slug": "blush-bordeaux", + "value": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)" + }, + { + "slug": "blush-light-purple", + "value": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)" + }, + { + "slug": "cool-to-warm-spectrum", + "value": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)" + }, + { + "slug": "electric-grass", + "value": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)" + }, + { + "slug": "light-green-cyan-to-vivid-green-cyan", + "value": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)" + }, + { + "slug": "luminous-dusk", + "value": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)" + }, + { + "slug": "luminous-vivid-amber-to-luminous-vivid-orange", + "value": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)" + }, + { + "slug": "luminous-vivid-orange-to-vivid-red", + "value": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)" + }, + { + "slug": "midnight", + "value": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)" + }, + { + "slug": "pale-ocean", + "value": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)" + }, + { + "slug": "very-light-gray-to-cyan-bluish-gray", + "value": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)" + }, + { + "slug": "vivid-cyan-blue-to-vivid-purple", + "value": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)" + } + ] } } } diff --git a/lib/global-styles.php b/lib/global-styles.php index 502d02b9d629bb..23b33f697c37ca 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -165,21 +165,30 @@ function gutenberg_experimental_global_styles_get_theme_presets() { $theme_colors = get_theme_support( 'editor-color-palette' )[0]; if ( is_array( $theme_colors ) ) { foreach ( $theme_colors as $color ) { - $theme_presets['global']['presets']['color'][ $color['slug'] ] = $color['color']; + $theme_presets['global']['presets']['color'][] = array( + 'slug' => $color['slug'], + 'value' => $color['color'], + ); } } $theme_gradients = get_theme_support( 'editor-gradient-presets' )[0]; if ( is_array( $theme_gradients ) ) { foreach ( $theme_gradients as $gradient ) { - $theme_presets['global']['presets']['gradient'][ $gradient['slug'] ] = $gradient['gradient']; + $theme_presets['global']['presets']['gradient'][] = array( + 'slug' => $gradient['slug'], + 'value' => $gradient['gradient'], + ); } } $theme_font_sizes = get_theme_support( 'editor-font-sizes' )[0]; if ( is_array( $theme_font_sizes ) ) { foreach ( $theme_font_sizes as $font_size ) { - $theme_presets['global']['presets']['font-size'][ $font_size['slug'] ] = $font_size['size']; + $theme_presets['global']['presets']['font-size'][] = array( + 'slug' => $font_size['slug'], + 'value' => $font_size['size'], + ); } } @@ -296,6 +305,15 @@ function gutenberg_experimental_global_styles_resolver( $tree ) { continue; } + // Flatten presets before converting them to variables. + foreach ( array_keys( $tree[ $block_name ]['presets'] ) as $preset_category ) { + $flattened_values = array(); + foreach ( $tree[ $block_name ]['presets'][ $preset_category ] as $preset_value ) { + $flattened_values[ $preset_value['slug'] ] = $preset_value['value']; + } + $tree[ $block_name ]['presets'][ $preset_category ] = $flattened_values; + } + $token = '--'; $prefix = '--wp--preset' . $token; $css_variables = gutenberg_experimental_global_styles_get_css_vars( $tree[ $block_name ]['presets'], $prefix, $token ); From 51c6a513f0289caaafba95e463c36d7b999c50e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 19 May 2020 12:08:35 +0200 Subject: [PATCH 48/49] Consolidate merge mechanics: - presets: each preset category (color, font-size, gradients) override each other - styles: leaf items override each other - features: leaf items override each other --- lib/global-styles.php | 53 +++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 30 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 23b33f697c37ca..ae3b947cbeb290 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -80,7 +80,7 @@ function gutenberg_experimental_global_styles_get_user() { } } - return gutenberg_experimental_global_styles_normalize_schema( $config ); + return $config; } /** @@ -151,7 +151,7 @@ function gutenberg_experimental_global_styles_get_core() { dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json' ); - return gutenberg_experimental_global_styles_normalize_schema( $config ); + return $config; } /** @@ -160,7 +160,7 @@ function gutenberg_experimental_global_styles_get_core() { * @return array */ function gutenberg_experimental_global_styles_get_theme_presets() { - $theme_presets = gutenberg_experimental_global_styles_normalize_schema( array() ); + $theme_presets = array(); $theme_colors = get_theme_support( 'editor-color-palette' )[0]; if ( is_array( $theme_colors ) ) { @@ -204,10 +204,8 @@ function gutenberg_experimental_global_styles_get_theme_presets() { */ function gutenberg_experimental_global_styles_get_theme() { $theme_presets = gutenberg_experimental_global_styles_get_theme_presets(); - $theme_config = gutenberg_experimental_global_styles_normalize_schema( - gutenberg_experimental_global_styles_get_from_file( - locate_template( 'experimental-theme.json' ) - ) + $theme_config = gutenberg_experimental_global_styles_get_from_file( + locate_template( 'experimental-theme.json' ) ); /* @@ -360,30 +358,29 @@ function gutenberg_experimental_global_styles_resolver_styles( $block_selector, /** * Helper function that merges trees that adhere to the theme.json schema. * - * @param array ...$trees List of trees to be merged. + * @param array $core Core origin. + * @param array $theme Theme origin. + * @param array $user = array() User origin. * * @return array The merged result. */ -function gutenberg_experimental_global_styles_merge_trees( ...$trees ) { - $accumulator = gutenberg_experimental_global_styles_normalize_schema( array() ); - - foreach ( $trees as $tree ) { - foreach ( array_keys( $accumulator ) as $block_name ) { - // Merge styles. - if ( ! empty( $tree[ $block_name ]['styles'] ) ) { - $accumulator[ $block_name ]['styles'] = $tree[ $block_name ]['styles']; - } - - // Merge presets. - foreach ( array_keys( $accumulator['global']['presets'] ) as $property ) { - if ( ! empty( $tree[ $block_name ]['presets'][ $property ] ) ) { - $accumulator[ $block_name ]['presets'][ $property ] = $tree[ $block_name ]['presets'][ $property ]; - } - } +function gutenberg_experimental_global_styles_merge_trees( $core, $theme, $user = array() ) { + $core = gutenberg_experimental_global_styles_normalize_schema( $core ); + $theme = gutenberg_experimental_global_styles_normalize_schema( $theme ); + $user = gutenberg_experimental_global_styles_normalize_schema( $user ); + $result = gutenberg_experimental_global_styles_normalize_schema( array() ); + + foreach ( array_keys( $core ) as $block_name ) { + foreach ( array( 'presets', 'styles', 'features' ) as $subtree ) { + $result[ $block_name ][ $subtree ] = array_merge( + $core[ $block_name ][ $subtree ], + $theme[ $block_name ][ $subtree ], + $user[ $block_name ][ $subtree ] + ); } } - return $accumulator; + return $result; } /** @@ -397,11 +394,7 @@ function gutenberg_experimental_global_styles_normalize_schema( $tree ) { $block_schema = array( 'styles' => array(), 'features' => array(), - 'presets' => array( - 'color' => array(), - 'font-size' => array(), - 'gradient' => array(), - ), + 'presets' => array(), ); $normalized_tree = array( 'global' => array( $block_schema ) ); From 26c2910eb67addbbfb8de842ad1c9fd5b4542dca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 19 May 2020 12:56:11 +0200 Subject: [PATCH 49/49] Improve comments --- lib/global-styles.php | 103 ++++++++++++++++++++++++++++-------------- 1 file changed, 68 insertions(+), 35 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index ae3b947cbeb290..0dc76e7776acc4 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -6,28 +6,50 @@ */ /** - * Whether the current theme has support for Global Styles. + * Whether the current theme has a theme.json file. * * @return boolean */ -function gutenberg_experimental_global_styles_has_theme_support() { +function gutenberg_experimental_global_styles_has_theme_json_support() { return is_readable( locate_template( 'experimental-theme.json' ) ); } /** - * Given a styles tree, it creates a flattened one - * whose keys are the CSS custom properties - * and its values the CSS custom properties' values. + * Given a tree, it creates a flattened one + * by merging the keys and binding the leaf values + * to the new keys. * - * @param array $styles Styles object to process. - * @param string $prefix Prefix to prepend to each variable. - * @param string $token Token to use between levels. + * This is thought to be useful to generate + * CSS Custom Properties from a tree, + * although there's nothing in the implementation + * of this function that requires that format. + * + * For example, assuming the given prefix is '--wp' + * and the token is '--', for this input tree: + * + * { + * 'property': 'value', + * 'nested-property': { + * 'sub-property': 'value' + * } + * } + * + * it'll return this output: + * + * { + * '--wp--property': 'value', + * '--wp--nested-property--sub-property': 'value' + * } + * + * @param array $tree Input tree to process. + * @param string $prefix Prefix to prepend to each variable. '' by default. + * @param string $token Token to use between levels. '--' by default. * * @return array The flattened tree. */ -function gutenberg_experimental_global_styles_get_css_vars( $styles, $prefix = '', $token = '--' ) { +function gutenberg_experimental_global_styles_get_css_vars( $tree, $prefix = '', $token = '--' ) { $result = array(); - foreach ( $styles as $property => $value ) { + foreach ( $tree as $property => $value ) { $new_key = $prefix . str_replace( '/', '-', $property ); if ( is_array( $value ) ) { @@ -66,7 +88,7 @@ function gutenberg_experimental_global_styles_get_from_file( $file_path ) { } /** - * Returns the user's preferences. + * Returns the user's origin config. * * @return array Config that adheres to the theme.json schema. */ @@ -84,15 +106,16 @@ function gutenberg_experimental_global_styles_get_user() { } /** - * Returns the CPT that contains the user's preferences + * Returns the CPT that contains the user's origin config * for the current theme or a void array if none found. + * * It can also create and return a new draft CPT. * - * @param array $post_status_filter Filter CPT by post status. - * By default, only fetches published posts. - * @param bool $should_create_draft Whether a new draft should be created - * if no CPT was found. False by default. - * @return array Custom Post Type for the user's preferences. + * @param array $post_status_filter Filter CPT by post status. + * ['publish'] by default, so it only fetches published posts. + * @param bool $should_create_draft Whether a new draft should be created if no CPT was found. + * False by default. + * @return array Custom Post Type for the user's origin config. */ function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = array( 'publish' ), $should_create_draft = false ) { $user_cpt = array(); @@ -128,9 +151,9 @@ function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter } /** - * Returns the post ID of the CPT containing the user's preferences. + * Returns the post ID of the CPT containing the user's origin config. * - * @return integer Custom Post Type ID for the user's preferences. + * @return integer */ function gutenberg_experimental_global_styles_get_user_cpt_id() { $user_cpt_id = null; @@ -142,7 +165,7 @@ function gutenberg_experimental_global_styles_get_user_cpt_id() { } /** - * Return core's preferences. + * Return core's origin config. * * @return array Config that adheres to the theme.json schema. */ @@ -157,7 +180,7 @@ function gutenberg_experimental_global_styles_get_core() { /** * Returns the theme presets registered via add_theme_support, if any. * - * @return array + * @return array Config that adheres to the theme.json schema. */ function gutenberg_experimental_global_styles_get_theme_presets() { $theme_presets = array(); @@ -196,9 +219,10 @@ function gutenberg_experimental_global_styles_get_theme_presets() { } /** - * Returns the theme's preferences. It also fetches - * the existing presets the theme declared via add_theme_support - * and adds them to the global presets. + * Returns the theme's origin config. + * + * It also fetches the existing presets the theme declared via add_theme_support + * and uses them if the theme hasn't declared any via theme.json. * * @return array Config that adheres to the theme.json schema. */ @@ -211,6 +235,15 @@ function gutenberg_experimental_global_styles_get_theme() { /* * We want the presets declared in theme.json * to take precedence over the ones declared via add_theme_support. + * + * Note that merging happens at the preset category level. Example: + * + * - if the theme declares a color palette via add_theme_support & + * a set of font sizes via theme.json, both will be included in the output. + * + * - if the theme declares a color palette both via add_theme_support & + * via theme.json, the later takes precedence. + * */ $theme_config = gutenberg_experimental_global_styles_merge_trees( $theme_presets, @@ -234,7 +267,7 @@ function gutenberg_experimental_global_styles_get_block_data() { $block_data = array( 'global' => array( 'selector' => ':root', - 'supports' => array(), + 'supports' => array(), // By being blank, the 'global' section won't output any style yet. ), 'core/paragraph' => array( 'selector' => 'p', @@ -299,11 +332,11 @@ function gutenberg_experimental_global_styles_resolver( $tree ) { ! array_key_exists( 'supports', $block_data[ $block_name ] ) ) { // Skip blocks that haven't declared support, - // so we don't know to process. + // because we don't know to process them. continue; } - // Flatten presets before converting them to variables. + // Extract the relevant preset info before converting them to CSS Custom Properties. foreach ( array_keys( $tree[ $block_name ]['presets'] ) as $preset_category ) { $flattened_values = array(); foreach ( $tree[ $block_name ]['presets'][ $preset_category ] as $preset_value ) { @@ -360,7 +393,7 @@ function gutenberg_experimental_global_styles_resolver_styles( $block_selector, * * @param array $core Core origin. * @param array $theme Theme origin. - * @param array $user = array() User origin. + * @param array $user User origin. An empty array by default. * * @return array The merged result. */ @@ -397,7 +430,7 @@ function gutenberg_experimental_global_styles_normalize_schema( $tree ) { 'presets' => array(), ); - $normalized_tree = array( 'global' => array( $block_schema ) ); + $normalized_tree = array(); $block_data = gutenberg_experimental_global_styles_get_block_data(); foreach ( array_keys( $block_data ) as $block_name ) { $normalized_tree[ $block_name ] = $block_schema; @@ -413,7 +446,7 @@ function gutenberg_experimental_global_styles_normalize_schema( $tree ) { /** * Returns the stylesheet resulting of merging - * core's, theme's, and user's preferences. + * core's, theme's, and user's origins. * * @return string */ @@ -437,7 +470,7 @@ function gutenberg_experimental_global_styles_get_stylesheet() { * and enqueues the resulting stylesheet. */ function gutenberg_experimental_global_styles_enqueue_assets() { - if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { + if ( ! gutenberg_experimental_global_styles_has_theme_json_support() ) { return; } @@ -470,7 +503,7 @@ function gutenberg_experimental_global_styles_is_site_editor() { */ function gutenberg_experimental_global_styles_settings( $settings ) { if ( - ! gutenberg_experimental_global_styles_has_theme_support() || + ! gutenberg_experimental_global_styles_has_theme_json_support() || ! gutenberg_experimental_global_styles_is_site_editor() ) { return $settings; @@ -486,7 +519,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) { $settings['__experimentalGlobalStylesBase'] = $global_styles; // Add the styles for the editor via the settings - // so they get processed as if they were added by add_editor_styles: + // so they get processed as if they were added via add_editor_styles: // they will get the editor wrapper class. $settings['styles'][] = array( 'css' => gutenberg_experimental_global_styles_get_stylesheet() ); @@ -494,10 +527,10 @@ function gutenberg_experimental_global_styles_settings( $settings ) { } /** - * Registers a Custom Post Type to store the user's preferences. + * Registers a Custom Post Type to store the user's origin config. */ function gutenberg_experimental_global_styles_register_cpt() { - if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { + if ( ! gutenberg_experimental_global_styles_has_theme_json_support() ) { return; }