diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 8dde6c399ba3f..8963e11095700 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1133,6 +1133,7 @@ public function get_stylesheet( $type = 'all' ) { * Merge new incoming data. * * @param WP_Theme_JSON $incoming Data to merge. + * @param string $origin origin of the incoming data (e.g: core, theme, or user). */ public function merge( $incoming, $origin ) { diff --git a/packages/edit-site/src/components/editor/test/global-styles-renderer.js b/packages/edit-site/src/components/editor/test/global-styles-renderer.js index 9d0f510c4be59..37798630dcd8e 100644 --- a/packages/edit-site/src/components/editor/test/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/test/global-styles-renderer.js @@ -214,10 +214,20 @@ describe( 'global styles renderer', () => { const tree = { settings: { color: { - palette: [ - { name: 'White', slug: 'white', color: 'white' }, - { name: 'Black', slug: 'black', color: 'black' }, - ], + palette: { + user: [ + { + name: 'White', + slug: 'white', + color: 'white', + }, + { + name: 'Black', + slug: 'black', + color: 'black', + }, + ], + }, }, custom: { 'font-primary': 'value', @@ -229,18 +239,20 @@ describe( 'global styles renderer', () => { blocks: { 'core/heading': { typography: { - fontSizes: [ - { - name: 'small', - slug: 'small', - size: '12px', - }, - { - name: 'medium', - slug: 'medium', - size: '23px', - }, - ], + fontSizes: { + theme: [ + { + name: 'small', + slug: 'small', + size: '12px', + }, + { + name: 'medium', + slug: 'medium', + size: '23px', + }, + ], + }, }, }, }, @@ -264,10 +276,20 @@ describe( 'global styles renderer', () => { const tree = { settings: { color: { - palette: [ - { name: 'White', slug: 'white', color: 'white' }, - { name: 'Black', slug: 'black', color: 'black' }, - ], + palette: { + core: [ + { + name: 'White', + slug: 'white', + color: 'white', + }, + { + name: 'Black', + slug: 'black', + color: 'black', + }, + ], + }, }, }, styles: { diff --git a/phpunit/class-wp-theme-json-schema-v0-test.php b/phpunit/class-wp-theme-json-schema-v0-test.php index aad503dc7c161..d2fd23e04edf4 100644 --- a/phpunit/class-wp-theme-json-schema-v0-test.php +++ b/phpunit/class-wp-theme-json-schema-v0-test.php @@ -335,129 +335,132 @@ function test_get_settings() { function test_get_stylesheet() { $root_name = WP_Theme_JSON_Schema_V0::ROOT_BLOCK_NAME; $all_blocks_name = WP_Theme_JSON_Schema_V0::ALL_BLOCKS_NAME; - - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'settings' => array( - $all_blocks_name => array( - 'color' => array( - 'text' => 'value', - 'palette' => array( - array( - 'slug' => 'white', - 'color' => 'white', - ), - array( - 'slug' => 'black', - 'color' => 'black', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'settings' => array( + $all_blocks_name => array( + 'color' => array( + 'text' => 'value', + 'palette' => array( + array( + 'slug' => 'white', + 'color' => 'white', + ), + array( + 'slug' => 'black', + 'color' => 'black', + ), ), ), - ), - 'typography' => array( - 'fontFamilies' => array( - array( - 'slug' => 'small', - 'fontFamily' => '14px', + 'typography' => array( + 'fontFamilies' => array( + array( + 'slug' => 'small', + 'fontFamily' => '14px', + ), + array( + 'slug' => 'big', + 'fontFamily' => '41px', + ), ), - array( - 'slug' => 'big', - 'fontFamily' => '41px', + ), + 'misc' => 'value', + ), + $root_name => array( + 'color' => array( + 'palette' => array( + array( + 'slug' => 'grey', + 'color' => 'grey', + ), ), ), ), - 'misc' => 'value', - ), - $root_name => array( - 'color' => array( - 'palette' => array( - array( - 'slug' => 'grey', - 'color' => 'grey', + 'core/group' => array( + 'custom' => array( + 'base-font' => 16, + 'line-height' => array( + 'small' => 1.2, + 'medium' => 1.4, + 'large' => 1.8, ), ), ), ), - 'core/group' => array( - 'custom' => array( - 'base-font' => 16, - 'line-height' => array( - 'small' => 1.2, - 'medium' => 1.4, - 'large' => 1.8, + 'styles' => array( + $root_name => array( + 'color' => array( + 'link' => '#111', + 'text' => 'var:preset|color|grey', ), + 'misc' => 'value', ), - ), - ), - 'styles' => array( - $root_name => array( - 'color' => array( - 'link' => '#111', - 'text' => 'var:preset|color|grey', - ), - 'misc' => 'value', - ), - 'core/group' => array( - 'color' => array( - 'link' => '#333', - ), - 'spacing' => array( - 'padding' => array( - 'top' => '12px', - 'bottom' => '24px', + 'core/group' => array( + 'color' => array( + 'link' => '#333', + ), + 'spacing' => array( + 'padding' => array( + 'top' => '12px', + 'bottom' => '24px', + ), ), ), - ), - 'core/heading/h1' => array( - 'color' => array( - 'link' => '#111', - ), - 'typography' => array( - 'fontSize' => '1em', - ), - ), - 'core/heading/h2' => array( - 'color' => array( - 'link' => '#222', - ), - 'typography' => array( - 'fontSize' => '2em', - ), - ), - 'core/post-title/h2' => array( - 'color' => array( - 'link' => '#222', - ), - 'typography' => array( - 'fontSize' => '2em', - ), - ), - 'core/post-title/h5' => array( - 'color' => array( - 'link' => '#555', + 'core/heading/h1' => array( + 'color' => array( + 'link' => '#111', + ), + 'typography' => array( + 'fontSize' => '1em', + ), ), - 'typography' => array( - 'fontSize' => '5em', + 'core/heading/h2' => array( + 'color' => array( + 'link' => '#222', + ), + 'typography' => array( + 'fontSize' => '2em', + ), ), - ), - 'core/query-title/h4' => array( - 'color' => array( - 'link' => '#444', + 'core/post-title/h2' => array( + 'color' => array( + 'link' => '#222', + ), + 'typography' => array( + 'fontSize' => '2em', + ), ), - 'typography' => array( - 'fontSize' => '4em', + 'core/post-title/h5' => array( + 'color' => array( + 'link' => '#555', + ), + 'typography' => array( + 'fontSize' => '5em', + ), ), - ), - 'core/query-title/h5' => array( - 'color' => array( - 'link' => '#555', + 'core/query-title/h4' => array( + 'color' => array( + 'link' => '#444', + ), + 'typography' => array( + 'fontSize' => '4em', + ), ), - 'typography' => array( - 'fontSize' => '5em', + 'core/query-title/h5' => array( + 'color' => array( + 'link' => '#555', + ), + 'typography' => array( + 'fontSize' => '5em', + ), ), ), - ), - 'misc' => 'value', - ) + 'misc' => 'value', + ) + ), + 'core' ); $this->assertEquals( diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 769fc8c0011db..c38aa1d9ae768 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -57,107 +57,111 @@ function test_get_settings() { } function test_get_stylesheet() { - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'settings' => array( - 'color' => array( - 'text' => 'value', - 'palette' => array( - array( - 'slug' => 'grey', - 'color' => 'grey', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'color' => array( + 'text' => 'value', + 'palette' => array( + array( + 'slug' => 'grey', + 'color' => 'grey', + ), ), ), - ), - 'typography' => array( - 'fontFamilies' => array( - array( - 'slug' => 'small', - 'fontFamily' => '14px', - ), - array( - 'slug' => 'big', - 'fontFamily' => '41px', + 'typography' => array( + 'fontFamilies' => array( + array( + 'slug' => 'small', + 'fontFamily' => '14px', + ), + array( + 'slug' => 'big', + 'fontFamily' => '41px', + ), ), ), - ), - 'misc' => 'value', - 'blocks' => array( - 'core/group' => array( - 'custom' => array( - 'base-font' => 16, - 'line-height' => array( - 'small' => 1.2, - 'medium' => 1.4, - 'large' => 1.8, + 'misc' => 'value', + 'blocks' => array( + 'core/group' => array( + 'custom' => array( + 'base-font' => 16, + 'line-height' => array( + 'small' => 1.2, + 'medium' => 1.4, + 'large' => 1.8, + ), ), ), ), ), - ), - 'styles' => array( - 'color' => array( - 'text' => 'var:preset|color|grey', - ), - 'misc' => 'value', - 'elements' => array( - 'link' => array( - 'color' => array( - 'text' => '#111', - 'background' => '#333', - ), + 'styles' => array( + 'color' => array( + 'text' => 'var:preset|color|grey', ), - ), - 'blocks' => array( - 'core/group' => array( - 'elements' => array( - 'link' => array( - 'color' => array( - 'text' => '#111', - ), - ), - ), - 'spacing' => array( - 'padding' => array( - 'top' => '12px', - 'bottom' => '24px', + 'misc' => 'value', + 'elements' => array( + 'link' => array( + 'color' => array( + 'text' => '#111', + 'background' => '#333', ), ), ), - 'core/heading' => array( - 'color' => array( - 'text' => '#123456', - ), - 'elements' => array( - 'link' => array( - 'color' => array( - 'text' => '#111', - 'background' => '#333', + 'blocks' => array( + 'core/group' => array( + 'elements' => array( + 'link' => array( + 'color' => array( + 'text' => '#111', + ), ), - 'typography' => array( - 'fontSize' => '60px', + ), + 'spacing' => array( + 'padding' => array( + 'top' => '12px', + 'bottom' => '24px', ), ), ), - ), - 'core/post-date' => array( - 'color' => array( - 'text' => '#123456', + 'core/heading' => array( + 'color' => array( + 'text' => '#123456', + ), + 'elements' => array( + 'link' => array( + 'color' => array( + 'text' => '#111', + 'background' => '#333', + ), + 'typography' => array( + 'fontSize' => '60px', + ), + ), + ), ), - 'elements' => array( - 'link' => array( - 'color' => array( - 'background' => '#777', - 'text' => '#555', + 'core/post-date' => array( + 'color' => array( + 'text' => '#123456', + ), + 'elements' => array( + 'link' => array( + 'color' => array( + 'background' => '#777', + 'text' => '#555', + ), ), ), ), ), ), - ), - 'misc' => 'value', - ) + 'misc' => 'value', + ) + ), + 'core' ); $this->assertEquals( @@ -175,24 +179,28 @@ function test_get_stylesheet() { } function test_get_stylesheet_preset_classes_work_with_compounded_selectors() { - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'settings' => array( - 'blocks' => array( - 'core/heading' => array( - 'color' => array( - 'palette' => array( - array( - 'slug' => 'white', - 'color' => '#fff', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'blocks' => array( + 'core/heading' => array( + 'color' => array( + 'palette' => array( + array( + 'slug' => 'white', + 'color' => '#fff', + ), ), ), ), ), ), - ), - ) + ) + ), + 'theme' ); $this->assertEquals( @@ -202,33 +210,37 @@ function test_get_stylesheet_preset_classes_work_with_compounded_selectors() { } function test_get_stylesheet_preset_rules_come_after_block_rules() { - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'settings' => array( - 'blocks' => array( - 'core/group' => array( - 'color' => array( - 'palette' => array( - array( - 'slug' => 'grey', - 'color' => 'grey', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'blocks' => array( + 'core/group' => array( + 'color' => array( + 'palette' => array( + array( + 'slug' => 'grey', + 'color' => 'grey', + ), ), ), ), ), ), - ), - 'styles' => array( - 'blocks' => array( - 'core/group' => array( - 'color' => array( - 'text' => 'red', + 'styles' => array( + 'blocks' => array( + 'core/group' => array( + 'color' => array( + 'text' => 'red', + ), ), ), ), - ), - ) + ) + ), + 'theme' ); $this->assertEquals( @@ -242,34 +254,38 @@ function test_get_stylesheet_preset_rules_come_after_block_rules() { } public function test_get_stylesheet_preset_values_are_marked_as_important() { - $theme_json = new WP_Theme_JSON_Gutenberg( - array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'settings' => array( - 'color' => array( - 'palette' => array( - array( - 'slug' => 'grey', - 'color' => 'grey', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'color' => array( + 'palette' => array( + array( + 'slug' => 'grey', + 'color' => 'grey', + ), ), ), ), - ), - 'styles' => array( - 'blocks' => array( - 'core/paragraph' => array( - 'color' => array( - 'text' => 'red', - 'background' => 'blue', - ), - 'typography' => array( - 'fontSize' => '12px', - 'lineHeight' => '1.3', + 'styles' => array( + 'blocks' => array( + 'core/paragraph' => array( + 'color' => array( + 'text' => 'red', + 'background' => 'blue', + ), + 'typography' => array( + 'fontSize' => '12px', + 'lineHeight' => '1.3', + ), ), ), ), - ), - ) + ) + ), + 'core' ); $this->assertEquals( @@ -279,35 +295,42 @@ public function test_get_stylesheet_preset_values_are_marked_as_important() { } public function test_merge_incoming_data() { - $initial = array( - 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, - 'settings' => array( - 'color' => array( - 'custom' => false, - 'palette' => array( - array( - 'slug' => 'red', - 'color' => 'red', + $theme_json = new WP_Theme_JSON_Gutenberg( array() ); + $theme_json->merge( + new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'color' => array( + 'custom' => false, + 'palette' => array( + array( + 'slug' => 'red', + 'color' => 'red', + ), + array( + 'slug' => 'green', + 'color' => 'green', + ), + ), ), - array( - 'slug' => 'green', - 'color' => 'green', + 'blocks' => array( + 'core/paragraph' => array( + 'color' => array( + 'custom' => false, + ), + ), ), ), - ), - 'blocks' => array( - 'core/paragraph' => array( - 'color' => array( - 'custom' => false, + 'styles' => array( + 'typography' => array( + 'fontSize' => '12', ), ), - ), - ), - 'styles' => array( - 'typography' => array( - 'fontSize' => '12', - ), + + ) ), + 'core' ); $add_new_block = array( @@ -437,29 +460,37 @@ public function test_merge_incoming_data() { 'custom' => true, 'customGradient' => true, 'palette' => array( - array( - 'slug' => 'blue', - 'color' => 'blue', + 'core' => array( + array( + 'slug' => 'blue', + 'color' => 'blue', + ), ), ), 'gradients' => array( - array( - 'slug' => 'gradient', - 'gradient' => 'gradient', + 'core' => array( + array( + 'slug' => 'gradient', + 'gradient' => 'gradient', + ), ), ), ), 'typography' => array( 'fontSizes' => array( - array( - 'slug' => 'fontSize', - 'size' => 'fontSize', + 'core' => array( + array( + 'slug' => 'fontSize', + 'size' => 'fontSize', + ), ), ), 'fontFamilies' => array( - array( - 'slug' => 'fontFamily', - 'fontFamily' => 'fontFamily', + 'core' => array( + array( + 'slug' => 'fontFamily', + 'fontFamily' => 'fontFamily', + ), ), ), ), @@ -501,14 +532,13 @@ public function test_merge_incoming_data() { ), ); - $theme_json = new WP_Theme_JSON_Gutenberg( $initial ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_new_block ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_key_in_settings ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_key_in_settings ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_styles ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_key_in_styles ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_invalid_context ) ); - $theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_presets ) ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_new_block ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_key_in_settings ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_key_in_settings ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_styles ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_key_in_styles ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_invalid_context ), 'core' ); + $theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_presets ), 'core' ); $actual = $theme_json->get_raw_data(); $this->assertEqualSetsWithIndex( $expected, $actual );