Editor: Add support for editing block style variations in global styles.

To allow editing of block style variations in global styles, this changeset adds the following for server side support:

* building of block style schema into `WP_Theme_JSON::sanitize()`.
* appending of style variation selectors to block metadata in `WP_Theme_JSON::get_blocks_metadata()`.
* building of selectors and variations for nodes in `WP_Theme_JSON::get_block_nodes()`.

Tests for happy and unhappy paths are included.

Reference:
* [https://github.com/WordPress/gutenberg/pull/46343 Gutenberg PR 46343]

Follow-up to [54118], [50973], [50959].

Props isabel_brison, 
Fixes #57583.

git-svn-id: https://develop.svn.wordpress.org/trunk@55172 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Tonya Mork
2023-02-01 13:41:16 +00:00
parent 6036ee03af
commit 52e5e065b3
2 changed files with 396 additions and 8 deletions
+300
View File
@@ -3595,6 +3595,306 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
$this->assertSame( $expected, $root_rules . $style_rules );
}
/**
* @ticket 57583
*
* @dataProvider data_sanitize_for_block_with_style_variations
*
* @param array $theme_json_variations Theme.json variations to test.
* @param array $expected_sanitized Expected results after sanitizing.
*/
public function test_sanitize_for_block_with_style_variations( $theme_json_variations, $expected_sanitized ) {
$theme_json = new WP_Theme_JSON(
array(
'version' => 2,
'styles' => array(
'blocks' => array(
'core/quote' => $theme_json_variations,
),
),
)
);
// Validate structure is sanitized.
$sanitized_theme_json = $theme_json->get_raw_data();
$this->assertIsArray( $sanitized_theme_json, 'Sanitized theme.json is not an array data type' );
$this->assertArrayHasKey( 'styles', $sanitized_theme_json, 'Sanitized theme.json does not have an "styles" key' );
$this->assertSameSetsWithIndex( $expected_sanitized, $sanitized_theme_json['styles'], 'Sanitized theme.json styles does not match' );
}
/**
* Data provider.
*
* @return array
*/
public function data_sanitize_for_block_with_style_variations() {
return array(
'1 variation with 1 invalid property' => array(
'theme_json_variations' => array(
'variations' => array(
'plain' => array(
'color' => array(
'background' => 'hotpink',
),
),
),
),
'expected_sanitized' => array(
'blocks' => array(
'core/quote' => array(
'variations' => array(
'plain' => array(
'color' => array(
'background' => 'hotpink',
),
),
),
),
),
),
),
'1 variation with 2 invalid properties' => array(
'theme_json_variations' => array(
'variations' => array(
'plain' => array(
'color' => array(
'background' => 'hotpink',
),
'invalidProperty1' => 'value1',
'invalidProperty2' => 'value2',
),
),
),
'expected_sanitized' => array(
'blocks' => array(
'core/quote' => array(
'variations' => array(
'plain' => array(
'color' => array(
'background' => 'hotpink',
),
),
),
),
),
),
),
'2 variations with 1 invalid property' => array(
'theme_json_variations' => array(
'variations' => array(
'plain' => array(
'color' => array(
'background' => 'hotpink',
),
'invalidProperty1' => 'value1',
),
'basic' => array(
'color' => array(
'background' => '#ffffff',
'text' => '#000000',
),
'foo' => 'bar',
),
),
),
'expected_sanitized' => array(
'blocks' => array(
'core/quote' => array(
'variations' => array(
'plain' => array(
'color' => array(
'background' => 'hotpink',
),
),
'basic' => array(
'color' => array(
'background' => '#ffffff',
'text' => '#000000',
),
),
),
),
),
),
),
);
}
/**
* @ticket 57583
*
* @dataProvider data_sanitize_with_invalid_style_variation
*
* @param array $theme_json_variations The theme.json variations to test.
*/
public function test_sanitize_with_invalid_style_variation( $theme_json_variations ) {
$theme_json = new WP_Theme_JSON(
array(
'version' => 2,
'styles' => array(
'blocks' => array(
'core/quote' => $theme_json_variations,
),
),
)
);
// Validate structure is sanitized.
$sanitized_theme_json = $theme_json->get_raw_data();
$this->assertIsArray( $sanitized_theme_json, 'Sanitized theme.json is not an array data type' );
$this->assertArrayNotHasKey( 'styles', $sanitized_theme_json, 'Sanitized theme.json should not have a "styles" key' );
}
/**
* Data provider.
*
* @return array
*/
public function data_sanitize_with_invalid_style_variation() {
return array(
'empty string variation' => array(
array(
'variations' => '',
),
),
'boolean variation' => array(
array(
'variations' => false,
),
),
);
}
/**
* @ticket 57583
*
* @dataProvider data_get_styles_for_block_with_style_variations
*
* @param array $theme_json_variations Theme.json variations to test.
* @param string $metadata_variations Style variations to test.
* @param string $expected Expected results for styling.
*/
public function test_get_styles_for_block_with_style_variations( $theme_json_variations, $metadata_variations, $expected ) {
$theme_json = new WP_Theme_JSON(
array(
'version' => 2,
'styles' => array(
'blocks' => array(
'core/quote' => $theme_json_variations,
),
),
)
);
// Validate styles are generated properly.
$metadata = array(
'path' => array( 'styles', 'blocks', 'core/quote' ),
'selector' => '.wp-block-quote',
'variations' => $metadata_variations,
);
$actual_styles = $theme_json->get_styles_for_block( $metadata );
$this->assertSame( $expected, $actual_styles );
}
/**
* Data provider.
*
* @return array
*/
public function data_get_styles_for_block_with_style_variations() {
$plain = array(
'metadata' => array(
'path' => array( 'styles', 'blocks', 'core/quote', 'variations', 'plain' ),
'selector' => '.is-style-plain.is-style-plain.wp-block-quote',
),
'styles' => '.is-style-plain.is-style-plain.wp-block-quote{background-color: hotpink;}',
);
$basic = array(
'metadata' => array(
'path' => array( 'styles', 'blocks', 'core/quote', 'variations', 'basic' ),
'selector' => '.is-style-basic.is-style-basic.wp-block-quote',
),
'styles' => '.is-style-basic.is-style-basic.wp-block-quote{background-color: #ffffff;color: #000000;}',
);
return array(
'1 variation with 1 invalid property' => array(
'theme_json_variations' => array(
'variations' => array(
'plain' => array(
'color' => array(
'background' => 'hotpink',
),
),
),
),
'metadata_variation' => array( $plain['metadata'] ),
'expected' => $plain['styles'],
),
'1 variation with 2 invalid properties' => array(
'theme_json_variations' => array(
'variations' => array(
'plain' => array(
'color' => array(
'background' => 'hotpink',
),
'invalidProperty1' => 'value1',
'invalidProperty2' => 'value2',
),
),
),
'metadata_variation' => array( $plain['metadata'] ),
'expected' => $plain['styles'],
),
'2 variations with 1 invalid property' => array(
'theme_json_variations' => array(
'variations' => array(
'plain' => array(
'color' => array(
'background' => 'hotpink',
),
'invalidProperty1' => 'value1',
),
'basic' => array(
'color' => array(
'background' => '#ffffff',
'text' => '#000000',
),
'foo' => 'bar',
),
),
),
'metadata_variation' => array( $plain['metadata'], $basic['metadata'] ),
'expected_styles' => $plain['styles'] . $basic['styles'],
),
'2 variations with multiple invalid properties' => array(
'theme_json_variations' => array(
'variations' => array(
'plain' => array(
'color' => array(
'background' => 'hotpink',
),
'invalidProperty1' => 'value1',
'invalidProperty2' => 'value2',
),
'basic' => array(
'foo' => 'foo',
'color' => array(
'background' => '#ffffff',
'text' => '#000000',
),
'bar' => 'bar',
'baz' => 'baz',
),
),
),
'metadata_variation' => array( $plain['metadata'], $basic['metadata'] ),
'expected_styles' => $plain['styles'] . $basic['styles'],
),
);
}
/**
* @ticket 56611
*/