vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: Update the ThemeJson unit test to cover custom CSS feature.

Browse Source 
In #59499 a fix have been shipped to theme.json custom CSS
when applied to blocks with multiple CSS selectors.
This commit covers that fix with a unit test.

Props wildworks.
Fixes #60294.

git-svn-id: https://develop.svn.wordpress.org/trunk@57333 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Riad Benguella 2024-01-23 09:04:51 +00:00
parent d0262ec696
commit e42e65def6
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
tests/phpunit/tests/theme/wpThemeJson.php
View File

@ -4688,29 +4688,37 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
*/
public function data_process_blocks_custom_css() {
return array(
// Simple CSS without any child selectors.
'no child selectors' => array(
// Simple CSS without any nested selectors.
'no nested selectors' => array(
'input' => array(
'selector' => '.foo',
'css' => 'color: red; margin: auto;',
),
'expected' => '.foo{color: red; margin: auto;}',
),
// CSS with child selectors.
'with children' => array(
// CSS with nested selectors.
'with nested selector' => array(
'input' => array(
'selector' => '.foo',
'css' => 'color: red; margin: auto; & .bar{color: blue;}',
'css' => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;}',
),
'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}',
'expected' => '.foo{color: red; margin: auto;}.foo.one{color: blue;}.foo .two{color: green;}',
),
// CSS with child selectors and pseudo elements.
'with children and pseudo elements' => array(
// CSS with pseudo elements.
'with pseudo elements' => array(
'input' => array(
'selector' => '.foo',
'css' => 'color: red; margin: auto; & .bar{color: blue;} &::before{color: green;}',
'css' => 'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;} &.one::before{color: yellow;} & .two::before{color: purple;}',
),
'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}.foo::before{color: green;}',
'expected' => '.foo{color: red; margin: auto;}.foo::before{color: blue;}.foo ::before{color: green;}.foo.one::before{color: yellow;}.foo .two::before{color: purple;}',
),
// CSS with multiple root selectors.
'with multiple root selectors' => array(
'input' => array(
'selector' => '.foo, .bar',
'css' => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;} &.three::before{color: orange;} & .four::before{color: skyblue;}',
),
'expected' => '.foo, .bar{color: red; margin: auto;}.foo.one, .bar.one{color: blue;}.foo .two, .bar .two{color: green;}.foo::before, .bar::before{color: yellow;}.foo ::before, .bar ::before{color: purple;}.foo.three::before, .bar.three::before{color: orange;}.foo .four::before, .bar .four::before{color: skyblue;}',
),
);
}