mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2026-08-16 14:50:29 +00:00
Editor: update duotone support.
Updates duotone support after stabilisation of selectors API and adds a few small code quality and UI improvements. Props onemaggie, peterwilsoncc, ajlende, audrasjb, mikeschroder, ramonopoly. Fixes #58555. git-svn-id: https://develop.svn.wordpress.org/trunk@56101 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Isabel Brison
@@ -0,0 +1,124 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Test the block WP_Duotone class.
|
||||
*
|
||||
* @package WordPress
|
||||
*/
|
||||
|
||||
class Tests_Block_Supports_DuoTones extends WP_UnitTestCase {
|
||||
/**
|
||||
* Cleans up CSS added to block-supports from duotone styles. We neeed to do this
|
||||
* in order to avoid impacting other tests.
|
||||
*/
|
||||
public static function wpTearDownAfterClass() {
|
||||
WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests whether the duotone preset class is added to the block.
|
||||
*
|
||||
* @ticket 58555
|
||||
*
|
||||
* @covers ::render_duotone_support
|
||||
*/
|
||||
public function test_render_duotone_support_preset() {
|
||||
$block = array(
|
||||
'blockName' => 'core/image',
|
||||
'attrs' => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|blue-orange' ) ) ),
|
||||
);
|
||||
$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
|
||||
$expected = '<figure class="wp-block-image size-full wp-duotone-blue-orange"><img src="/my-image.jpg" /></figure>';
|
||||
$this->assertSame( $expected, WP_Duotone::render_duotone_support( $block_content, $block ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests whether the duotone unset class is added to the block.
|
||||
*
|
||||
* @ticket 58555
|
||||
*
|
||||
* @covers ::render_duotone_support
|
||||
*/
|
||||
public function test_render_duotone_support_css() {
|
||||
$block = array(
|
||||
'blockName' => 'core/image',
|
||||
'attrs' => array( 'style' => array( 'color' => array( 'duotone' => 'unset' ) ) ),
|
||||
);
|
||||
$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
|
||||
$expected = '/<figure class="wp-block-image size-full wp-duotone-unset-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
|
||||
$this->assertMatchesRegularExpression( $expected, WP_Duotone::render_duotone_support( $block_content, $block ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests whether the duotone custom class is added to the block.
|
||||
*
|
||||
* @covers ::render_duotone_support
|
||||
*/
|
||||
public function test_render_duotone_support_custom() {
|
||||
$block = array(
|
||||
'blockName' => 'core/image',
|
||||
'attrs' => array( 'style' => array( 'color' => array( 'duotone' => array( '#FFFFFF', '#000000' ) ) ) ),
|
||||
);
|
||||
$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
|
||||
$expected = '/<figure class="wp-block-image size-full wp-duotone-ffffff-000000-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
|
||||
$this->assertMatchesRegularExpression( $expected, WP_Duotone::render_duotone_support( $block_content, $block ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests whether the slug is extracted from the attribute.
|
||||
*
|
||||
* @dataProvider data_get_slug_from_attribute
|
||||
* @covers ::get_slug_from_attribute
|
||||
*/
|
||||
public function test_get_slug_from_attribute( $data_attr, $expected ) {
|
||||
|
||||
$reflection = new ReflectionMethod( 'WP_Duotone', 'get_slug_from_attribute' );
|
||||
$reflection->setAccessible( true );
|
||||
|
||||
$this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Data provider.
|
||||
*
|
||||
* @return array[].
|
||||
*/
|
||||
public function data_get_slug_from_attribute() {
|
||||
return array(
|
||||
'pipe-slug' => array( 'var:preset|duotone|blue-orange', 'blue-orange' ),
|
||||
'css-var' => array( 'var(--wp--preset--duotone--blue-orange)', 'blue-orange' ),
|
||||
'css-var-invalid-slug-chars' => array( 'var(--wp--preset--duotone--.)', '.' ),
|
||||
'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', '' ),
|
||||
'invalid' => array( 'not a valid attribute', '' ),
|
||||
'css-var-no-value' => array( 'var(--wp--preset--duotone--)', '' ),
|
||||
'pipe-slug-no-value' => array( 'var:preset|duotone|', '' ),
|
||||
'css-var-spaces' => array( 'var(--wp--preset--duotone-- ', '' ),
|
||||
'pipe-slug-spaces' => array( 'var:preset|duotone| ', '' ),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @dataProvider data_is_preset
|
||||
*/
|
||||
public function test_is_preset( $data_attr, $expected ) {
|
||||
$reflection = new ReflectionMethod( 'WP_Duotone', 'is_preset' );
|
||||
$reflection->setAccessible( true );
|
||||
|
||||
$this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Data provider.
|
||||
*
|
||||
* @return array[].
|
||||
*/
|
||||
public function data_is_preset() {
|
||||
return array(
|
||||
'pipe-slug' => array( 'var:preset|duotone|blue-orange', true ),
|
||||
'css-var' => array( 'var(--wp--preset--duotone--blue-orange)', true ),
|
||||
'css-var-invalid-slug-chars' => array( 'var(--wp--preset--duotone--.)', false ),
|
||||
'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', false ),
|
||||
'invalid' => array( 'not a valid attribute', false ),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
<?php
|
||||
/**
|
||||
* Tests wp_get_global_styles_svg_filters().
|
||||
*
|
||||
* @group themes
|
||||
*/
|
||||
class Tests_Theme_wpGetGlobalStylesSvgFilters extends WP_UnitTestCase {
|
||||
public function set_up() {
|
||||
parent::set_up();
|
||||
// Clear caches.
|
||||
wp_clean_themes_cache();
|
||||
}
|
||||
|
||||
public function tear_down() {
|
||||
wp_clean_themes_cache();
|
||||
|
||||
parent::tear_down();
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests that switching themes recalculates the svgs.
|
||||
*
|
||||
* @covers ::wp_get_global_styles_svg_filters
|
||||
*
|
||||
* @ticket 57568
|
||||
*/
|
||||
public function test_switching_themes_should_recalculate_svg() {
|
||||
$svg_for_default_theme = wp_get_global_styles_svg_filters();
|
||||
switch_theme( 'block-theme' );
|
||||
$svg_for_block_theme = wp_get_global_styles_svg_filters();
|
||||
switch_theme( WP_DEFAULT_THEME );
|
||||
|
||||
$this->assertStringContainsString( '<svg', $svg_for_default_theme, 'Default theme should contain SVG' );
|
||||
$this->assertStringContainsString( '<svg', $svg_for_default_theme, 'Block theme should contain SVG' );
|
||||
$this->assertNotSame( $svg_for_default_theme, $svg_for_block_theme, 'Cache value should have changed' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests that the function relies on the development mode for whether to use caching.
|
||||
*
|
||||
* @ticket 57487
|
||||
*
|
||||
* @covers ::wp_get_global_styles_svg_filters
|
||||
*/
|
||||
public function test_caching_is_used_when_developing_theme() {
|
||||
global $_wp_tests_development_mode;
|
||||
|
||||
switch_theme( 'block-theme' );
|
||||
|
||||
// Store SVG in cache.
|
||||
$svg = '<svg></svg>';
|
||||
wp_cache_set( 'wp_get_global_styles_svg_filters', $svg, 'theme_json' );
|
||||
|
||||
// By default, caching should be used, so the above value will be returned.
|
||||
$_wp_tests_development_mode = '';
|
||||
$this->assertSame( $svg, wp_get_global_styles_svg_filters(), 'Caching was not used despite development mode disabled' );
|
||||
|
||||
// When the development mode is set to 'theme', caching should not be used.
|
||||
$_wp_tests_development_mode = 'theme';
|
||||
$this->assertNotSame( $svg, wp_get_global_styles_svg_filters(), 'Caching was used despite theme development mode' );
|
||||
}
|
||||
}
|
||||
|
||||
@@ -636,7 +636,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
|
||||
)
|
||||
);
|
||||
|
||||
$variables = "body{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--duotone--custom-duotone: url('#wp-duotone-custom-duotone');--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}";
|
||||
$variables = 'body{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
|
||||
$styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}';
|
||||
$presets = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';
|
||||
$all = $variables . $styles . $presets;
|
||||
|
||||
Reference in New Issue
Block a user