From 7d637eb4af0b3f24307b9b473daf55b9b9b14685 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 15 Nov 2021 20:39:59 +0100 Subject: [PATCH 01/10] Revert "Revert "Adds a setting property that enables some other ones (#36246)" (#36477)" This reverts commit 94f0cb10009ff1ea3c08138b1a8c52534a78cf32. --- docs/how-to-guides/themes/theme-json.md | 8 +++ lib/class-wp-theme-json-gutenberg.php | 46 ++++++++++++++++- lib/theme.json | 1 + phpunit/class-wp-theme-json-test.php | 69 +++++++++++++++++++++++++ 4 files changed, 123 insertions(+), 1 deletion(-) diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md index 1f3c6eef1dfd2..dcf31eb67f259 100644 --- a/docs/how-to-guides/themes/theme-json.md +++ b/docs/how-to-guides/themes/theme-json.md @@ -282,6 +282,14 @@ Each block can configure any of these settings separately, providing a more fine Note, however, that not all settings are relevant for all blocks. The settings section provides an opt-in/opt-out mechanism for themes, but it's the block's responsibility to add support for the features that are relevant to it. For example, if a block doesn't implement the `dropCap` feature, a theme can't enable it for such a block through `theme.json`. +### Opt-in into appearance controls + +There's one special setting property, `appareance`, which can be a boolean and its default value is true. When this is enabled, the following setting properties will be on by default: + +- border: color, radius, style, width +- spacing: margin, padding, units +- typography: customFontSize, lineHeight + #### Backward compatibility with add_theme_support To retain backward compatibility, the existing `add_theme_support` declarations that configure the block editor are retrofit in the proper categories for the top-level section. For example, if a theme uses `add_theme_support('disable-custom-colors')`, it'll be the same as setting `settings.color.custom` to `false`. If the `theme.json` contains any settings, these will take precedence over the values declared via `add_theme_support`. This is the complete list of equivalences: diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 9cd8ee501b58d..9180a13e4e614 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -81,6 +81,7 @@ class WP_Theme_JSON_Gutenberg { ); const VALID_SETTINGS = array( + 'appearance' => null, 'border' => array( 'color' => null, 'radius' => null, @@ -292,7 +293,8 @@ public function __construct( $theme_json = array(), $origin = 'theme' ) { $valid_block_names = array_keys( self::get_blocks_metadata() ); $valid_element_names = array_keys( self::ELEMENTS ); - $this->theme_json = self::sanitize( $theme_json, $valid_block_names, $valid_element_names ); + $theme_json = self::sanitize( $theme_json, $valid_block_names, $valid_element_names ); + $this->theme_json = self::maybe_opt_in_into_settings( $theme_json ); // Internally, presets are keyed by origin. $nodes = self::get_setting_nodes( $this->theme_json ); @@ -307,6 +309,48 @@ public function __construct( $theme_json = array(), $origin = 'theme' ) { } } + /** + * Enables some opt-in settings if theme declared support. + * + * @param array $theme_json A theme.json structure to modify. + * @return array The modified theme.json structure. + */ + private static function maybe_opt_in_into_settings( $theme_json ) { + $new_theme_json = $theme_json; + + if ( isset( $new_theme_json['settings']['appearance'] ) ) { + self::do_opt_in_into_settings( $new_theme_json['settings'] ); + } + + if ( isset( $new_theme_json['settings']['blocks'] ) && is_array( $new_theme_json['settings']['blocks'] ) ) { + foreach ( $new_theme_json['settings']['blocks'] as &$block ) { + if ( isset( $block['appearance'] ) ) { + self::do_opt_in_into_settings( $block ); + } + } + } + + return $new_theme_json; + } + + /** + * Enables some settings. + * + * @param array $context The context to which the settings belong. + */ + private static function do_opt_in_into_settings( &$context ) { + gutenberg_experimental_set( $context, array( 'border', 'color' ), true ); + gutenberg_experimental_set( $context, array( 'border', 'radius' ), true ); + gutenberg_experimental_set( $context, array( 'border', 'style' ), true ); + gutenberg_experimental_set( $context, array( 'border', 'width' ), true ); + gutenberg_experimental_set( $context, array( 'spacing', 'margin' ), true ); + gutenberg_experimental_set( $context, array( 'spacing', 'padding' ), true ); + gutenberg_experimental_set( $context, array( 'spacing', 'units' ), true ); + gutenberg_experimental_set( $context, array( 'typography', 'customFontSize' ), true ); + gutenberg_experimental_set( $context, array( 'typography', 'lineHeight' ), true ); + unset( $context['appearance'] ); + } + /** * Sanitizes the input according to the schemas. * diff --git a/lib/theme.json b/lib/theme.json index 390776b22dc05..164ff59cf9661 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -1,6 +1,7 @@ { "version": 2, "settings": { + "appearance": true, "color": { "background": true, "palette": [ diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index d8c9f47a14607..55036af9c107d 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -188,6 +188,75 @@ function test_get_settings_presets_are_keyed_by_origin() { $this->assertEqualSetsWithIndex( $expected_no_origin, $actual_no_origin ); } + function test_get_settings_using_opt_in_key() { + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'appearance' => true, + 'blocks' => array( + 'core/paragraph' => array( + 'typography' => array( + 'lineHeight' => false, + ), + ), + 'core/group' => array( + 'appearance' => true, + 'typography' => array( + 'lineHeight' => false, // This is overridden by appearance. + ), + ), + ), + ), + ) + ); + + $actual = $theme_json->get_settings(); + $expected = array( + 'border' => array( + 'width' => true, + 'style' => true, + 'radius' => true, + 'color' => true, + ), + 'spacing' => array( + 'margin' => true, + 'padding' => true, + 'units' => true, + ), + 'typography' => array( + 'customFontSize' => true, + 'lineHeight' => true, + ), + 'blocks' => array( + 'core/paragraph' => array( + 'typography' => array( + 'lineHeight' => false, + ), + ), + 'core/group' => array( + 'border' => array( + 'width' => true, + 'style' => true, + 'radius' => true, + 'color' => true, + ), + 'spacing' => array( + 'margin' => true, + 'padding' => true, + 'units' => true, + ), + 'typography' => array( + 'customFontSize' => true, + 'lineHeight' => true, + ), + ), + ), + ); + + $this->assertEqualSetsWithIndex( $expected, $actual ); + } + function test_get_stylesheet_support_for_shorthand_and_longhand_values() { $theme_json = new WP_Theme_JSON_Gutenberg( array( From 844e0232ab05b2c6502d8e0f681f011d2ada5bfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 15 Nov 2021 20:47:01 +0100 Subject: [PATCH 02/10] Change appearance to appearanceTools --- docs/how-to-guides/themes/theme-json.md | 5 +++-- lib/class-wp-theme-json-gutenberg.php | 25 ++++++++++++++----------- lib/theme.json | 2 +- phpunit/class-wp-theme-json-test.php | 10 +++++----- 4 files changed, 23 insertions(+), 19 deletions(-) diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md index dcf31eb67f259..fab3ca5bb5e7e 100644 --- a/docs/how-to-guides/themes/theme-json.md +++ b/docs/how-to-guides/themes/theme-json.md @@ -218,6 +218,7 @@ The settings section has the following structure: { "version": 1, "settings": { + "appearanceTools": true, "border": { "color": false, "radius": false, @@ -282,9 +283,9 @@ Each block can configure any of these settings separately, providing a more fine Note, however, that not all settings are relevant for all blocks. The settings section provides an opt-in/opt-out mechanism for themes, but it's the block's responsibility to add support for the features that are relevant to it. For example, if a block doesn't implement the `dropCap` feature, a theme can't enable it for such a block through `theme.json`. -### Opt-in into appearance controls +### Opt-in into UI controls -There's one special setting property, `appareance`, which can be a boolean and its default value is true. When this is enabled, the following setting properties will be on by default: +There's one special setting property, `appearanceTools`, which is a boolean and its default value is true. When this is enabled, the following setting properties will be on by default: - border: color, radius, style, width - spacing: margin, padding, units diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 9180a13e4e614..33ee472532887 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -81,14 +81,14 @@ class WP_Theme_JSON_Gutenberg { ); const VALID_SETTINGS = array( - 'appearance' => null, - 'border' => array( + 'appearanceTools' => null, + 'border' => array( 'color' => null, 'radius' => null, 'style' => null, 'width' => null, ), - 'color' => array( + 'color' => array( 'background' => null, 'custom' => null, 'customDuotone' => null, @@ -101,18 +101,18 @@ class WP_Theme_JSON_Gutenberg { 'palette' => null, 'text' => null, ), - 'custom' => null, - 'layout' => array( + 'custom' => null, + 'layout' => array( 'contentSize' => null, 'wideSize' => null, ), - 'spacing' => array( + 'spacing' => array( 'blockGap' => null, 'margin' => null, 'padding' => null, 'units' => null, ), - 'typography' => array( + 'typography' => array( 'customFontSize' => null, 'dropCap' => null, 'fontFamilies' => null, @@ -318,13 +318,13 @@ public function __construct( $theme_json = array(), $origin = 'theme' ) { private static function maybe_opt_in_into_settings( $theme_json ) { $new_theme_json = $theme_json; - if ( isset( $new_theme_json['settings']['appearance'] ) ) { + if ( isset( $new_theme_json['settings']['appearanceTools'] ) ) { self::do_opt_in_into_settings( $new_theme_json['settings'] ); } if ( isset( $new_theme_json['settings']['blocks'] ) && is_array( $new_theme_json['settings']['blocks'] ) ) { foreach ( $new_theme_json['settings']['blocks'] as &$block ) { - if ( isset( $block['appearance'] ) ) { + if ( isset( $block['appearanceTools'] ) ) { self::do_opt_in_into_settings( $block ); } } @@ -339,7 +339,10 @@ private static function maybe_opt_in_into_settings( $theme_json ) { * @param array $context The context to which the settings belong. */ private static function do_opt_in_into_settings( &$context ) { - gutenberg_experimental_set( $context, array( 'border', 'color' ), true ); + // todo: take into account existing settings, if they exists + if ( ! isset( _wp_array_get( $context, array( 'border', 'color' ) ) ) { + gutenberg_experimental_set( $context, array( 'border', 'color' ), true ); + } gutenberg_experimental_set( $context, array( 'border', 'radius' ), true ); gutenberg_experimental_set( $context, array( 'border', 'style' ), true ); gutenberg_experimental_set( $context, array( 'border', 'width' ), true ); @@ -348,7 +351,7 @@ private static function do_opt_in_into_settings( &$context ) { gutenberg_experimental_set( $context, array( 'spacing', 'units' ), true ); gutenberg_experimental_set( $context, array( 'typography', 'customFontSize' ), true ); gutenberg_experimental_set( $context, array( 'typography', 'lineHeight' ), true ); - unset( $context['appearance'] ); + unset( $context['appearanceTools'] ); } /** diff --git a/lib/theme.json b/lib/theme.json index 164ff59cf9661..b201d17fb8f3a 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -1,7 +1,7 @@ { "version": 2, "settings": { - "appearance": true, + "appearanceTools": true, "color": { "background": true, "palette": [ diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 55036af9c107d..31d7442843d59 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -193,17 +193,17 @@ function test_get_settings_using_opt_in_key() { array( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, 'settings' => array( - 'appearance' => true, - 'blocks' => array( + 'appearanceTools' => true, + 'blocks' => array( 'core/paragraph' => array( 'typography' => array( 'lineHeight' => false, ), ), 'core/group' => array( - 'appearance' => true, - 'typography' => array( - 'lineHeight' => false, // This is overridden by appearance. + 'appearanceTools' => true, + 'typography' => array( + 'lineHeight' => false, // This should override appearanceTools. ), ), ), From 20f3e202cc93b5a8b5fec25c2956430013a94640 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Mon, 15 Nov 2021 20:47:48 +0100 Subject: [PATCH 03/10] Update test expectation --- phpunit/class-wp-theme-json-test.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 31d7442843d59..c76410ccf0b08 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -248,7 +248,7 @@ function test_get_settings_using_opt_in_key() { ), 'typography' => array( 'customFontSize' => true, - 'lineHeight' => true, + 'lineHeight' => false, ), ), ), From b75e226293e1f16647107e1b1b2ba59f3c5fe678 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 19 Nov 2021 12:40:06 +0100 Subject: [PATCH 04/10] Adapt code to new expectation --- lib/class-wp-theme-json-gutenberg.php | 28 ++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 33ee472532887..50e4fb2f7277a 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -339,18 +339,24 @@ private static function maybe_opt_in_into_settings( $theme_json ) { * @param array $context The context to which the settings belong. */ private static function do_opt_in_into_settings( &$context ) { - // todo: take into account existing settings, if they exists - if ( ! isset( _wp_array_get( $context, array( 'border', 'color' ) ) ) { - gutenberg_experimental_set( $context, array( 'border', 'color' ), true ); + $to_opt_in = array( + array( 'border', 'color' ), + array( 'border', 'radius' ), + array( 'border', 'style' ), + array( 'border', 'width' ), + array( 'spacing', 'margin' ), + array( 'spacing', 'padding' ), + array( 'spacing', 'units' ), + array( 'typography', 'customFontSize' ), + array( 'typography', 'lineHeight' ), + ); + + foreach ( $to_opt_in as $path ) { + if ( null === _wp_array_get( $context, $path, null ) ) { + _wp_array_set( $context, $path, true ); + } } - gutenberg_experimental_set( $context, array( 'border', 'radius' ), true ); - gutenberg_experimental_set( $context, array( 'border', 'style' ), true ); - gutenberg_experimental_set( $context, array( 'border', 'width' ), true ); - gutenberg_experimental_set( $context, array( 'spacing', 'margin' ), true ); - gutenberg_experimental_set( $context, array( 'spacing', 'padding' ), true ); - gutenberg_experimental_set( $context, array( 'spacing', 'units' ), true ); - gutenberg_experimental_set( $context, array( 'typography', 'customFontSize' ), true ); - gutenberg_experimental_set( $context, array( 'typography', 'lineHeight' ), true ); + unset( $context['appearanceTools'] ); } From 5a1f3fb992a5015eb3328d9b475c8f226a923160 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 19 Nov 2021 12:49:16 +0100 Subject: [PATCH 05/10] Update opt-in settings --- lib/class-wp-theme-json-gutenberg.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 50e4fb2f7277a..8ae6a99809e48 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -344,10 +344,10 @@ private static function do_opt_in_into_settings( &$context ) { array( 'border', 'radius' ), array( 'border', 'style' ), array( 'border', 'width' ), + array( 'color', 'link' ), array( 'spacing', 'margin' ), array( 'spacing', 'padding' ), array( 'spacing', 'units' ), - array( 'typography', 'customFontSize' ), array( 'typography', 'lineHeight' ), ); From 97a905931d7488d84ef6900cece70bb165015e3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 19 Nov 2021 12:54:28 +0100 Subject: [PATCH 06/10] Update opt-in settings --- lib/class-wp-theme-json-gutenberg.php | 2 +- lib/theme.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 8ae6a99809e48..558e6d22db2d3 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -345,9 +345,9 @@ private static function do_opt_in_into_settings( &$context ) { array( 'border', 'style' ), array( 'border', 'width' ), array( 'color', 'link' ), + array( 'spacing', 'blockGap' ), array( 'spacing', 'margin' ), array( 'spacing', 'padding' ), - array( 'spacing', 'units' ), array( 'typography', 'lineHeight' ), ); diff --git a/lib/theme.json b/lib/theme.json index b201d17fb8f3a..0c6ebf8590ca2 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -1,7 +1,7 @@ { "version": 2, "settings": { - "appearanceTools": true, + "appearanceTools": false, "color": { "background": true, "palette": [ From 4b3180b5a936df8112731a801e8b7492008ec2c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 19 Nov 2021 13:02:00 +0100 Subject: [PATCH 07/10] Update test expectations --- phpunit/class-wp-theme-json-test.php | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index c76410ccf0b08..57f44f1a6d4ed 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -219,14 +219,16 @@ function test_get_settings_using_opt_in_key() { 'radius' => true, 'color' => true, ), + 'color' => array( + 'link' => true, + ), 'spacing' => array( - 'margin' => true, - 'padding' => true, - 'units' => true, + 'blockGap' => true, + 'margin' => true, + 'padding' => true, ), 'typography' => array( - 'customFontSize' => true, - 'lineHeight' => true, + 'lineHeight' => true, ), 'blocks' => array( 'core/paragraph' => array( @@ -241,14 +243,16 @@ function test_get_settings_using_opt_in_key() { 'radius' => true, 'color' => true, ), + 'color' => array( + 'link' => true, + ), 'spacing' => array( - 'margin' => true, - 'padding' => true, - 'units' => true, + 'blockGap' => true, + 'margin' => true, + 'padding' => true, ), 'typography' => array( - 'customFontSize' => true, - 'lineHeight' => false, + 'lineHeight' => false, ), ), ), From b5abc4700c8c7746fec06598e0012ff33bb09b2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 19 Nov 2021 13:07:04 +0100 Subject: [PATCH 08/10] Update docs --- docs/how-to-guides/themes/theme-json.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md index fab3ca5bb5e7e..bc6b72a3a914e 100644 --- a/docs/how-to-guides/themes/theme-json.md +++ b/docs/how-to-guides/themes/theme-json.md @@ -285,11 +285,12 @@ Note, however, that not all settings are relevant for all blocks. The settings s ### Opt-in into UI controls -There's one special setting property, `appearanceTools`, which is a boolean and its default value is true. When this is enabled, the following setting properties will be on by default: +There's one special setting property, `appearanceTools`, which is a boolean and its default value is false. Themes can use this setting to enable the following ones: - border: color, radius, style, width -- spacing: margin, padding, units -- typography: customFontSize, lineHeight +- color: link +- spacing: blockGap, margin, padding +- typography: lineHeight #### Backward compatibility with add_theme_support From 1e7ed84bce0545cdaae35e83a3b41c8e43694046 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 19 Nov 2021 13:07:22 +0100 Subject: [PATCH 09/10] Update docs --- docs/how-to-guides/themes/theme-json.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md index bc6b72a3a914e..b10c55cf61c07 100644 --- a/docs/how-to-guides/themes/theme-json.md +++ b/docs/how-to-guides/themes/theme-json.md @@ -218,7 +218,7 @@ The settings section has the following structure: { "version": 1, "settings": { - "appearanceTools": true, + "appearanceTools": false, "border": { "color": false, "radius": false, From ebcf784795d3fce37ad630d78f03c8f5546c7377 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Fri, 19 Nov 2021 13:10:32 +0100 Subject: [PATCH 10/10] Add flag to schema --- schemas/json/theme.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 05b29178843ad..05f68bfbb2727 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -9,6 +9,11 @@ }, "settingsProperties": { "properties": { + "appearanceTools": { + "description": "Setting that enables ui tools. \nGutenberg plugin required.", + "type": "boolean", + "default": false + }, "border": { "description": "Settings related to borders.\nGutenberg plugin required.", "type": "object",