From 5d24f76f52ca879ced404638fdc36ae15e9b7f2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Thu, 19 Aug 2021 17:46:50 +0200 Subject: [PATCH 01/10] Move CSS to block.json --- packages/block-library/src/button/block.json | 16 ++++++++++++++++ packages/block-library/src/button/style.scss | 5 ----- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index f86030c7460a57..47c8a268e59ccd 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -91,6 +91,22 @@ }, "__experimentalSelector": ".wp-block-button__link" }, + "blockStyles": { + "border": { + "radius": "9999px" + }, + "color": { + "text": "#fff", + "background": "#32373c" + }, + "typography": { + "fontSize": "1.125em", + "textDecoration": "none" + }, + "spacing": { + "padding": "calc(0.667em + 2px) calc(1.333em + 2px)" + } + }, "styles": [ { "name": "fill", "label": "Fill", "isDefault": true }, { "name": "outline", "label": "Outline" } diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index f03929b0ebfb72..389b86194ad0c1 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -4,14 +4,9 @@ $blocks-block__margin: 0.5em; // Prefer the link selector instead of the regular button classname // to support the previous markup in addition to the new one. .wp-block-button__link { - color: $white; - background-color: #32373c; - border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape. box-shadow: none; cursor: pointer; display: inline-block; - font-size: 1.125em; - padding: calc(0.667em + 2px) calc(1.333em + 2px); // The extra 2px are added to size solids the same as the outline versions. text-align: center; text-decoration: none; word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here. From 2ecf48cfaa4e0641e4b7f122e928c212449bae5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Tue, 24 May 2022 14:47:44 +0200 Subject: [PATCH 02/10] Add block CSS as the first step in the CSS chain --- docs/reference-guides/core-blocks.md | 2 +- ...class-wp-theme-json-resolver-gutenberg.php | 33 +++++++++++++++++ packages/block-library/src/button/block.json | 37 +++++++++++-------- 3 files changed, 55 insertions(+), 17 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 6aa6ec62d7e096..186a46236709da 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -50,7 +50,7 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu - **Name:** core/button - **Category:** design -- **Supports:** align, anchor, color (background, gradients, text), spacing (padding), typography (fontSize), ~~alignWide~~, ~~reusable~~ +- **Supports:** align, anchor, blockStyles (border, color, spacing, typography), color (background, gradients, text), spacing (padding), typography (fontSize), ~~alignWide~~, ~~reusable~~ - **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textColor, title, url, width ## Buttons diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index 960ea659e8d2ee..db2546356d782d 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -98,4 +98,37 @@ public static function get_theme_data( $deprecated = array(), $settings = array( return $with_theme_supports; } + public static function get_block_data() { + $registry = WP_Block_Type_Registry::get_instance(); + $blocks = $registry->get_all_registered(); + $config = array( 'version' => 1 ); + foreach( $blocks as $block_name => $block_type ) { + if ( isset( $block_type->supports['blockStyles'] ) ) { + $config['styles']['blocks'][ $block_name ] = $block_type->supports['blockStyles']; + } + } + + // Core here means it's the lower level part of the styles chain. + // It can be a core or a third-party block. + return new WP_Theme_JSON( $config, 'core' ); + } + + public static function get_merged_data( $origin = 'custom' ) { + if ( is_array( $origin ) ) { + _deprecated_argument( __FUNCTION__, '5.9' ); + } + + $result = new WP_Theme_JSON_Gutenberg(); + $result->merge( static::get_core_data() ); + $result->merge( static::get_block_data() ); + $result->merge( static::get_theme_data() ); + + if ( 'custom' === $origin ) { + $result->merge( static::get_user_data() ); + } + + return $result; + } + + } diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 47c8a268e59ccd..ec34588f261027 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -89,22 +89,27 @@ "radius": true } }, - "__experimentalSelector": ".wp-block-button__link" - }, - "blockStyles": { - "border": { - "radius": "9999px" - }, - "color": { - "text": "#fff", - "background": "#32373c" - }, - "typography": { - "fontSize": "1.125em", - "textDecoration": "none" - }, - "spacing": { - "padding": "calc(0.667em + 2px) calc(1.333em + 2px)" + "__experimentalSelector": ".wp-block-button__link", + "blockStyles": { + "border": { + "radius": "9999px" + }, + "color": { + "text": "#fff", + "background": "#32373c" + }, + "typography": { + "fontSize": "1.125em", + "textDecoration": "none" + }, + "spacing": { + "padding": { + "top": "calc(0.667em + 2px)", + "right": "calc(1.333em + 2px)", + "bottom": "calc(0.667em + 2px)", + "left": "calc(1.333em + 2px)" + } + } } }, "styles": [ From a239e869e1c148ae753a31986ce4c23071ed6d49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Tue, 24 May 2022 15:05:11 +0200 Subject: [PATCH 03/10] Add support for JSON comments --- .../class-wp-theme-json-resolver-gutenberg.php | 16 +++++++++++++--- packages/block-library/src/button/block.json | 2 ++ 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index db2546356d782d..bf493df6b9dcfa 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -102,9 +102,9 @@ public static function get_block_data() { $registry = WP_Block_Type_Registry::get_instance(); $blocks = $registry->get_all_registered(); $config = array( 'version' => 1 ); - foreach( $blocks as $block_name => $block_type ) { + foreach ( $blocks as $block_name => $block_type ) { if ( isset( $block_type->supports['blockStyles'] ) ) { - $config['styles']['blocks'][ $block_name ] = $block_type->supports['blockStyles']; + $config['styles']['blocks'][ $block_name ] = static::removeJsonComments( $block_type->supports['blockStyles'] ); } } @@ -113,6 +113,17 @@ public static function get_block_data() { return new WP_Theme_JSON( $config, 'core' ); } + private static function removeJsonComments( $array ) { + unset( $array['//'] ); + foreach ( $array as $k => $v ) { + if ( is_array( $v ) ) { + $array[ $k ] = static::removeJsonComments( $v ); + } + } + + return $array; + } + public static function get_merged_data( $origin = 'custom' ) { if ( is_array( $origin ) ) { _deprecated_argument( __FUNCTION__, '5.9' ); @@ -122,7 +133,6 @@ public static function get_merged_data( $origin = 'custom' ) { $result->merge( static::get_core_data() ); $result->merge( static::get_block_data() ); $result->merge( static::get_theme_data() ); - if ( 'custom' === $origin ) { $result->merge( static::get_user_data() ); } diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index ec34588f261027..7a45a1564bb488 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -92,6 +92,7 @@ "__experimentalSelector": ".wp-block-button__link", "blockStyles": { "border": { + "//": "100% causes an oval, but any explicit but really high value retains the pill shape.", "radius": "9999px" }, "color": { @@ -104,6 +105,7 @@ }, "spacing": { "padding": { + "//": "The extra 2px are added to size solids the same as the outline versions.", "top": "calc(0.667em + 2px)", "right": "calc(1.333em + 2px)", "bottom": "calc(0.667em + 2px)", From 5f00b48fc3d8e4829d35ee93687087e212d9f6d8 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 10 Jun 2022 13:07:37 +0100 Subject: [PATCH 04/10] rename blockStyles to __experimentalStyle --- lib/experimental/class-wp-theme-json-resolver-gutenberg.php | 4 ++-- packages/block-library/src/button/block.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index bf493df6b9dcfa..c6ba46a70e5090 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -103,8 +103,8 @@ public static function get_block_data() { $blocks = $registry->get_all_registered(); $config = array( 'version' => 1 ); foreach ( $blocks as $block_name => $block_type ) { - if ( isset( $block_type->supports['blockStyles'] ) ) { - $config['styles']['blocks'][ $block_name ] = static::removeJsonComments( $block_type->supports['blockStyles'] ); + if ( isset( $block_type->supports['__experimentalStyle'] ) ) { + $config['styles']['blocks'][ $block_name ] = static::removeJsonComments( $block_type->supports['__experimentalStyle'] ); } } diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 7a45a1564bb488..20c20771b4b565 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -90,7 +90,7 @@ } }, "__experimentalSelector": ".wp-block-button__link", - "blockStyles": { + "__experimentalStyle": { "border": { "//": "100% causes an oval, but any explicit but really high value retains the pill shape.", "radius": "9999px" From 6f5b3dcfabede5dfc45de05a6d7bccacc29305e3 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 10 Jun 2022 13:47:35 +0100 Subject: [PATCH 05/10] Add doc block comment --- lib/experimental/class-wp-theme-json-resolver-gutenberg.php | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index c6ba46a70e5090..98a705ee09f311 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -98,6 +98,11 @@ public static function get_theme_data( $deprecated = array(), $settings = array( return $with_theme_supports; } + /** + * Gets the styles for blocks from the block.json file. + * + * @return WP_Theme_JSON object with the styles for each block. + */ public static function get_block_data() { $registry = WP_Block_Type_Registry::get_instance(); $blocks = $registry->get_all_registered(); From 9de58cb8348b0e3345dcb32871be36af4df5e7bc Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 10 Jun 2022 14:16:19 +0100 Subject: [PATCH 06/10] add docblocks --- ...class-wp-theme-json-resolver-gutenberg.php | 39 +++++++++++++++++-- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index 98a705ee09f311..a53d1e94cc584e 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -101,7 +101,7 @@ public static function get_theme_data( $deprecated = array(), $settings = array( /** * Gets the styles for blocks from the block.json file. * - * @return WP_Theme_JSON object with the styles for each block. + * @return WP_Theme_JSON */ public static function get_block_data() { $registry = WP_Block_Type_Registry::get_instance(); @@ -109,7 +109,7 @@ public static function get_block_data() { $config = array( 'version' => 1 ); foreach ( $blocks as $block_name => $block_type ) { if ( isset( $block_type->supports['__experimentalStyle'] ) ) { - $config['styles']['blocks'][ $block_name ] = static::removeJsonComments( $block_type->supports['__experimentalStyle'] ); + $config['styles']['blocks'][ $block_name ] = static::remove_JSON_comments( $block_type->supports['__experimentalStyle'] ); } } @@ -118,17 +118,48 @@ public static function get_block_data() { return new WP_Theme_JSON( $config, 'core' ); } - private static function removeJsonComments( $array ) { + /** + * When given an array, this will remove any keys with the name `//`. + * + * @return array The filtered array. + */ + private static function remove_JSON_comments( $array ) { unset( $array['//'] ); foreach ( $array as $k => $v ) { if ( is_array( $v ) ) { - $array[ $k ] = static::removeJsonComments( $v ); + $array[ $k ] = static::remove_JSON_comments( $v ); } } return $array; } + /** + * Returns the data merged from multiple origins. + * + * There are three sources of data (origins) for a site: + * default, theme, and custom. The custom's has higher priority + * than the theme's, and the theme's higher than default's. + * + * Unlike the getters {@link get_core_data}, + * {@link get_theme_data}, and {@link get_user_data}, + * this method returns data after it has been merged + * with the previous origins. This means that if the same piece of data + * is declared in different origins (user, theme, and core), + * the last origin overrides the previous. + * + * For example, if the user has set a background color + * for the paragraph block, and the theme has done it as well, + * the user preference wins. + * + * @since 5.8.0 + * @since 5.9.0 Added user data, removed the `$settings` parameter, + * added the `$origin` parameter. + * + * @param string $origin Optional. To what level should we merge data. + * Valid values are 'theme' or 'custom'. Default 'custom'. + * @return WP_Theme_JSON + */ public static function get_merged_data( $origin = 'custom' ) { if ( is_array( $origin ) ) { _deprecated_argument( __FUNCTION__, '5.9' ); From 1607e131abca436fd9969f9faac630ef56b09d19 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 10 Jun 2022 14:24:36 +0100 Subject: [PATCH 07/10] update docblock --- lib/experimental/class-wp-theme-json-resolver-gutenberg.php | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index a53d1e94cc584e..9868d9974ab048 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -121,6 +121,7 @@ public static function get_block_data() { /** * When given an array, this will remove any keys with the name `//`. * + * @param array The array to filter. * @return array The filtered array. */ private static function remove_JSON_comments( $array ) { From 6fbf6fb883b794c4074aa27444eb16b196ae6fcd Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 10 Jun 2022 14:33:28 +0100 Subject: [PATCH 08/10] fix docblock --- lib/experimental/class-wp-theme-json-resolver-gutenberg.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php index 9868d9974ab048..6cb5ce994fce45 100644 --- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php @@ -121,7 +121,7 @@ public static function get_block_data() { /** * When given an array, this will remove any keys with the name `//`. * - * @param array The array to filter. + * @param array $array The array to filter. * @return array The filtered array. */ private static function remove_JSON_comments( $array ) { From 6764a20d52079a918ea35244e8e26475f6c13f15 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 10 Jun 2022 14:44:13 +0100 Subject: [PATCH 09/10] update docts --- docs/reference-guides/core-blocks.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 186a46236709da..f563b2ff9590c9 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -50,7 +50,7 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu - **Name:** core/button - **Category:** design -- **Supports:** align, anchor, blockStyles (border, color, spacing, typography), color (background, gradients, text), spacing (padding), typography (fontSize), ~~alignWide~~, ~~reusable~~ +- **Supports:** align, anchor, __experimentalStyle (border, color, spacing, typography), color (background, gradients, text), spacing (padding), typography (fontSize), ~~alignWide~~, ~~reusable~~ - **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textColor, title, url, width ## Buttons @@ -60,7 +60,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt - **Name:** core/buttons - **Category:** design - **Supports:** align (full, wide), anchor, spacing (blockGap, margin) -- **Attributes:** +- **Attributes:** ## Calendar @@ -168,7 +168,7 @@ Contains the block elements used to display a comment, like the title, date, aut - **Name:** core/comment-template - **Category:** design - **Supports:** align, ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Comments @@ -204,7 +204,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu - **Name:** core/comments-pagination-numbers - **Category:** theme - **Supports:** ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Previous Page @@ -420,7 +420,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com - **Name:** core/nextpage - **Category:** design - **Supports:** ~~className~~, ~~customClassName~~, ~~html~~ -- **Attributes:** +- **Attributes:** ## Page List @@ -528,7 +528,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/ - **Name:** core/post-content - **Category:** theme - **Supports:** align (full, wide), ~~html~~ -- **Attributes:** +- **Attributes:** ## Post Date @@ -573,7 +573,7 @@ Contains the block elements used to render a post, like the title, date, feature - **Name:** core/post-template - **Category:** theme - **Supports:** align, ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Post Terms @@ -627,7 +627,7 @@ Contains the block elements used to render content when no query results are fou - **Name:** core/query-no-results - **Category:** theme - **Supports:** align, color (background, gradients, link, text), ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Pagination @@ -654,7 +654,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word - **Name:** core/query-pagination-numbers - **Category:** theme - **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Previous Page From e40b8cf9bddd76e77dbade8eb12f9ae174217eaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Fri, 10 Jun 2022 16:08:38 +0200 Subject: [PATCH 10/10] Rebuild docs --- docs/reference-guides/core-blocks.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index f563b2ff9590c9..6aa6ec62d7e096 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -50,7 +50,7 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu - **Name:** core/button - **Category:** design -- **Supports:** align, anchor, __experimentalStyle (border, color, spacing, typography), color (background, gradients, text), spacing (padding), typography (fontSize), ~~alignWide~~, ~~reusable~~ +- **Supports:** align, anchor, color (background, gradients, text), spacing (padding), typography (fontSize), ~~alignWide~~, ~~reusable~~ - **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textColor, title, url, width ## Buttons @@ -60,7 +60,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt - **Name:** core/buttons - **Category:** design - **Supports:** align (full, wide), anchor, spacing (blockGap, margin) -- **Attributes:** +- **Attributes:** ## Calendar @@ -168,7 +168,7 @@ Contains the block elements used to display a comment, like the title, date, aut - **Name:** core/comment-template - **Category:** design - **Supports:** align, ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Comments @@ -204,7 +204,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu - **Name:** core/comments-pagination-numbers - **Category:** theme - **Supports:** ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Previous Page @@ -420,7 +420,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com - **Name:** core/nextpage - **Category:** design - **Supports:** ~~className~~, ~~customClassName~~, ~~html~~ -- **Attributes:** +- **Attributes:** ## Page List @@ -528,7 +528,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/ - **Name:** core/post-content - **Category:** theme - **Supports:** align (full, wide), ~~html~~ -- **Attributes:** +- **Attributes:** ## Post Date @@ -573,7 +573,7 @@ Contains the block elements used to render a post, like the title, date, feature - **Name:** core/post-template - **Category:** theme - **Supports:** align, ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Post Terms @@ -627,7 +627,7 @@ Contains the block elements used to render content when no query results are fou - **Name:** core/query-no-results - **Category:** theme - **Supports:** align, color (background, gradients, link, text), ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Pagination @@ -654,7 +654,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word - **Name:** core/query-pagination-numbers - **Category:** theme - **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ -- **Attributes:** +- **Attributes:** ## Previous Page