diff --git a/lib/global-styles.php b/lib/global-styles.php index 1b6d5aa6bc2c83..c9f0845bfdfb65 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -5,6 +5,21 @@ * @package gutenberg */ +/** + * Returns the paths to get the information about a particular + * style property from the block.json or the theme.json. + */ +function gutenberg_experimental_global_styles_get_mappings() { + return array( + 'line-height' => array( 'typography', 'lineHeight' ), + 'font-size' => array( 'typography', 'fontSize' ), + 'background' => array( 'color', 'gradient' ), + 'background-color' => array( 'color', 'background' ), + 'color' => array( 'color', 'text' ), + '--wp--style--color--link' => array( 'color', 'link' ), + ); +} + /** * Whether the current theme has a theme.json file. * @@ -269,19 +284,17 @@ function gutenberg_experimental_global_styles_get_theme() { * @return array Style features supported by the block. */ function gutenberg_experimental_global_styles_get_supported_styles( $supports ) { - $style_features = array( - '--wp--style--color--link' => array( '__experimentalColor', 'linkColor' ), - 'background-color' => array( '__experimentalColor' ), - 'background' => array( '__experimentalColor', 'gradients' ), - 'block-align' => array( 'align' ), - 'color' => array( '__experimentalColor' ), - 'font-size' => array( '__experimentalFontSize' ), - 'line-height' => array( '__experimentalLineHeight' ), + $mappings = array_merge( + gutenberg_experimental_global_styles_get_mappings(), + // TODO: remove from here and access directly from lib/blocks.php. + array( + 'block-align' => array( 'align' ), + ) ); $supported_features = array(); - foreach ( $style_features as $style_feature => $path ) { - if ( gutenberg_experimental_get( $supports, $path ) ) { + foreach ( $mappings as $style_feature => $path ) { + if ( gutenberg_experimental_get( $supports, array_merge( array( '__experimentalStyles' ), $path ) ) ) { $supported_features[] = $style_feature; } } @@ -370,14 +383,7 @@ function gutenberg_experimental_global_styles_get_block_data() { * @return array Containing a set of css rules. */ function gutenberg_experimental_global_styles_flatten_styles_tree( $styles ) { - $mappings = array( - 'line-height' => array( 'typography', 'lineHeight' ), - 'font-size' => array( 'typography', 'fontSize' ), - 'background' => array( 'color', 'gradient' ), - 'background-color' => array( 'color', 'background' ), - 'color' => array( 'color', 'text' ), - '--wp--style--color--link' => array( 'color', 'link' ), - ); + $mappings = gutenberg_experimental_global_styles_get_mappings(); $result = array(); diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 5cc3fb51c6c8b9..de589c3fe43f99 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -30,7 +30,7 @@ import { import { cleanEmptyObject } from './utils'; import ColorPanel from './color-panel'; -export const COLOR_SUPPORT_KEY = '__experimentalColor'; +export const COLOR_SUPPORT_KEY = '__experimentalStyles.color'; const hasColorSupport = ( blockType ) => Platform.OS === 'web' && hasBlockSupport( blockType, COLOR_SUPPORT_KEY ); @@ -42,7 +42,7 @@ const hasLinkColorSupport = ( blockType ) => { const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY ); - return isObject( colorSupport ) && !! colorSupport.linkColor; + return isObject( colorSupport ) && !! colorSupport.link; }; const hasGradientSupport = ( blockType ) => { @@ -52,7 +52,7 @@ const hasGradientSupport = ( blockType ) => { const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY ); - return isObject( colorSupport ) && !! colorSupport.gradients; + return isObject( colorSupport ) && !! colorSupport.gradient; }; /** diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 08b3b6c4df32db..6dc4a65a23e71a 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -18,7 +18,7 @@ import { import { cleanEmptyObject } from './utils'; import { createHigherOrderComponent } from '@wordpress/compose'; -export const FONT_SIZE_SUPPORT_KEY = '__experimentalFontSize'; +export const FONT_SIZE_SUPPORT_KEY = '__experimentalStyles.typography.fontSize'; /** * Filters registered block settings, extending attributes to include diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js index 8881fdbbcb17f0..9121624b959593 100644 --- a/packages/block-editor/src/hooks/line-height.js +++ b/packages/block-editor/src/hooks/line-height.js @@ -10,7 +10,8 @@ import { useSelect } from '@wordpress/data'; import LineHeightControl from '../components/line-height-control'; import { cleanEmptyObject } from './utils'; -export const LINE_HEIGHT_SUPPORT_KEY = '__experimentalLineHeight'; +export const LINE_HEIGHT_SUPPORT_KEY = + '__experimentalStyles.typography.lineHeight'; /** * Inspector control panel containing the line height related configuration diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index 0a84a4a35d7812..cfd820b7fe2614 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -14,9 +14,13 @@ ], "html": false, "lightBlockWrapper": true, - "__experimentalColor": { - "gradients": true, - "linkColor": true + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "link": true, + "text": true + } } } } diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 1e32b1443cbc85..bb3d3da9526572 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -15,9 +15,13 @@ "anchor": true, "html": false, "lightBlockWrapper": true, - "__experimentalColor": { - "gradients": true, - "linkColor": true + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "link": true, + "text": true + } } } } diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index fd03a4487ee5aa..29a961e61a1801 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -23,11 +23,6 @@ "anchor": true, "className": false, "lightBlockWrapper": true, - "__experimentalColor": { - "linkColor": true - }, - "__experimentalFontSize": true, - "__experimentalLineHeight": true, "__experimentalSelector": { "core/heading/h1": "h1", "core/heading/h2": "h2", @@ -36,6 +31,17 @@ "core/heading/h5": "h5", "core/heading/h6": "h6" }, + "__experimentalStyles": { + "color": { + "background": true, + "link": true, + "text": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + }, "__unstablePasteTextInline": true } } diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index 012e6c253280df..fb023dc61486b3 100644 --- a/packages/block-library/src/media-text/block.json +++ b/packages/block-library/src/media-text/block.json @@ -85,9 +85,13 @@ ], "html": false, "lightBlockWrapper": true, - "__experimentalColor": { - "gradients": true, - "linkColor": true + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "link": true, + "text": true + } } } } diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 24df851e88011b..efc7b08fe67f53 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -30,17 +30,23 @@ "anchor": true, "className": false, "lightBlockWrapper": true, - "__experimentalColor": { - "linkColor": true - }, - "__experimentalFontSize": true, - "__experimentalLineHeight": true, "__experimentalFeatures": { "typography": { "dropCap": true } }, "__experimentalSelector": "p", + "__experimentalStyles": { + "color": { + "background": true, + "link": true, + "text": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + }, "__unstablePasteTextInline": true } } diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index 3e788777dec81d..fc347afbccbc3c 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -27,11 +27,17 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalFontSize": true, - "__experimentalColor": { - "gradients": true, - "linkColor": true - }, - "__experimentalLineHeight": true + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "link": true, + "text": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + } } } diff --git a/packages/block-library/src/post-comments-count/block.json b/packages/block-library/src/post-comments-count/block.json index 5908f13b721c76..ce086942f145e3 100644 --- a/packages/block-library/src/post-comments-count/block.json +++ b/packages/block-library/src/post-comments-count/block.json @@ -12,10 +12,16 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { - "gradients": true - }, - "__experimentalFontSize": true, - "__experimentalLineHeight": true + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "text": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + } } } diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json index c0e131b83b231b..dc2403b470032f 100644 --- a/packages/block-library/src/post-comments-form/block.json +++ b/packages/block-library/src/post-comments-form/block.json @@ -13,11 +13,17 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { - "gradients": true, - "linkColor": true - }, - "__experimentalFontSize": true, - "__experimentalLineHeight": true + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "link": true, + "text": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + } } } diff --git a/packages/block-library/src/post-comments/block.json b/packages/block-library/src/post-comments/block.json index 51dbb5c22dcbcc..7c83b06b344e3b 100644 --- a/packages/block-library/src/post-comments/block.json +++ b/packages/block-library/src/post-comments/block.json @@ -17,11 +17,17 @@ "wide", "full" ], - "__experimentalFontSize": true, - "__experimentalColor": { - "gradients": true, - "linkColor": true - }, - "__experimentalLineHeight": true + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "link": true, + "text": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + } } } diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json index 872bf705c01162..74a20b4622238f 100644 --- a/packages/block-library/src/post-date/block.json +++ b/packages/block-library/src/post-date/block.json @@ -16,10 +16,16 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { - "gradients": true - }, - "__experimentalFontSize": true, - "__experimentalLineHeight": true + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "text": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + } } } diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json index 28952d268ff922..8d57fa9443de22 100644 --- a/packages/block-library/src/post-excerpt/block.json +++ b/packages/block-library/src/post-excerpt/block.json @@ -24,11 +24,17 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalFontSize": true, - "__experimentalColor": { - "gradients": true, - "linkColor": true - }, - "__experimentalLineHeight": true + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "link": true, + "text": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + } } } diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json index ec3cad1f435ae8..0f709f58d18820 100644 --- a/packages/block-library/src/post-title/block.json +++ b/packages/block-library/src/post-title/block.json @@ -17,11 +17,6 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { - "gradients": true - }, - "__experimentalFontSize": true, - "__experimentalLineHeight": true, "__experimentalSelector": { "core/post-title/h1": "h1", "core/post-title/h2": "h2", @@ -30,6 +25,17 @@ "core/post-title/h5": "h5", "core/post-title/h6": "h6", "core/post-title/p": "p" + }, + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "text": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } } } } diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json index b0b4d5ab95b0b0..2701b500214b4e 100644 --- a/packages/block-library/src/site-tagline/block.json +++ b/packages/block-library/src/site-tagline/block.json @@ -9,10 +9,16 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { - "gradients": true - }, - "__experimentalFontSize": true, - "__experimentalLineHeight": true + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "text": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + } } } diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json index 4817093296629a..ab054e4d39f033 100644 --- a/packages/block-library/src/site-title/block.json +++ b/packages/block-library/src/site-title/block.json @@ -13,10 +13,16 @@ "supports": { "html": false, "lightBlockWrapper": true, - "__experimentalColor": { - "gradients": true - }, - "__experimentalFontSize": true, - "__experimentalLineHeight": true + "__experimentalStyles": { + "color": { + "background": true, + "gradient": true, + "text": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + } } } diff --git a/phpunit/class-block-supported-styles-test.php b/phpunit/class-block-supported-styles-test.php index c4596be98e9ca1..3c44876601f560 100644 --- a/phpunit/class-block-supported-styles-test.php +++ b/phpunit/class-block-supported-styles-test.php @@ -95,7 +95,12 @@ function test_named_color_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => true, + '__experimentalStyles' => array( + 'color' => array( + 'background' => true, + 'text' => true, + ), + ), ), 'render_callback' => true, ); @@ -127,7 +132,12 @@ function test_custom_color_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => true, + '__experimentalStyles' => array( + 'color' => array( + 'background' => true, + 'text' => true, + ), + ), ), 'render_callback' => true, ); @@ -164,8 +174,12 @@ function test_named_link_color_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => array( - 'linkColor' => true, + '__experimentalStyles' => array( + 'color' => array( + 'background' => true, + 'link' => true, + 'text' => true, + ), ), ), 'render_callback' => true, @@ -195,8 +209,12 @@ function test_custom_link_color_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => array( - 'linkColor' => true, + '__experimentalStyles' => array( + 'color' => array( + 'background' => true, + 'link' => true, + 'text' => true, + ), ), ), 'render_callback' => true, @@ -226,8 +244,12 @@ function test_named_gradient_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => array( - 'gradients' => true, + '__experimentalStyles' => array( + 'color' => array( + 'background' => true, + 'gradient' => true, + 'text' => true, + ), ), ), 'render_callback' => true, @@ -257,8 +279,12 @@ function test_custom_gradient_support() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => array( - 'gradients' => true, + '__experimentalStyles' => array( + 'color' => array( + 'background' => true, + 'gradient' => true, + 'text' => true, + ), ), ), 'render_callback' => true, @@ -324,7 +350,11 @@ function test_named_font_size() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalFontSize' => true, + '__experimentalStyles' => array( + 'typography' => array( + 'fontSize' => true, + ), + ), ), 'render_callback' => true, ); @@ -353,7 +383,11 @@ function test_custom_font_size() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalFontSize' => true, + '__experimentalStyles' => array( + 'typography' => array( + 'fontSize' => true, + ), + ), ), 'render_callback' => true, ); @@ -410,7 +444,11 @@ function test_line_height() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalLineHeight' => true, + '__experimentalStyles' => array( + 'typography' => array( + 'lineHeight' => true, + ), + ), ), 'render_callback' => true, ); @@ -522,13 +560,17 @@ function test_all_supported() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalColor' => array( - 'gradients' => true, - 'linkColor' => true, + '__experimentalStyles' => array( + 'color' => array( + 'gradient' => true, + 'link' => true, + ), + 'typography' => array( + 'fontSize' => true, + 'lineHeight' => true, + ), ), - '__experimentalFontSize' => true, - '__experimentalLineHeight' => true, - 'align' => true, + 'align' => true, ), 'render_callback' => true, ); @@ -570,7 +612,11 @@ function test_one_supported() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - '__experimentalFontSize' => true, + '__experimentalStyles' => array( + 'typography' => array( + 'fontSize' => true, + ), + ), ), 'render_callback' => true, ); @@ -611,13 +657,17 @@ function test_render_callback_required() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( - 'align' => true, - '__experimentalColor' => array( - 'gradients' => true, - 'linkColor' => true, + 'align' => true, + '__experimentalStyles' => array( + 'color' => array( + 'gradient' => true, + 'link' => true, + ), + 'typography' => array( + 'fontSize' => true, + 'lineHeight' => true, + ), ), - '__experimentalFontSize' => true, - '__experimentalLineHeight' => true, ), ); $this->register_block_type( 'core/example', $block_type_settings );