Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

toStyles: don't mutate the tree argument #49806

Merged
merged 6 commits into from
Apr 18, 2023
+189 −67
Merged

toStyles: don't mutate the tree argument #49806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ee3ec04
toStyles: add semicolon to featured selector rules
jsnajdr Apr 13, 2023
aab6e55
toStyles: extract style variations object to a variable
jsnajdr Apr 13, 2023
4ad7d71
toStyles awkward code style fixes: remove unneeded git status and use…
jsnajdr Apr 13, 2023
cba4442
toStyles: add more unit tests, for feature, variation and duotone sel…
jsnajdr Apr 13, 2023
77c6256
toStyles: clone styles when picking from tree
jsnajdr Apr 13, 2023
412e004
toStyles tests: freeze tree object to prevent mutations
jsnajdr Apr 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 125 additions & 3 deletions packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -480,10 +480,128 @@ describe( 'global styles renderer', () => {
expect( toStyles( tree, blockSelectors ) ).toEqual(
'body {margin: 0;}' +
'body{background-color: red;margin: 10px;padding: 10px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px}.wp-block-image{color: red;}.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; }' +
'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px;}.wp-block-image{color: red;}.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; }' +
'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
);
} );

it( 'should handle feature selectors', () => {
const tree = {
styles: {
blocks: {
'core/image': {
color: {
text: 'red',
},
spacing: {
padding: {
top: '1px',
},
},
border: {
color: 'red',
radius: '9999px',
},
},
},
},
};

const blockSelectors = {
'core/image': {
selector: '.wp-image',
featureSelectors: {
spacing: '.wp-image-spacing',
border: {
root: '.wp-image-border',
color: '.wp-image-border-color',
},
},
},
};

expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
'body {margin: 0;}' +
'.wp-image-spacing{padding-top: 1px;}.wp-image-border-color{border-color: red;}.wp-image-border{border-radius: 9999px;}.wp-image{color: red;}' +
'.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; }'
);
} );

it( 'should handle block variations', () => {
const tree = {
styles: {
blocks: {
'core/image': {
variations: {
foo: {
color: {
text: 'blue',
},
spacing: {
padding: {
top: '2px',
},
},
border: {
color: 'blue',
},
},
},
},
},
},
};

const blockSelectors = {
'core/image': {
selector: '.wp-image',
featureSelectors: {
spacing: '.wp-image-spacing',
border: {
root: '.wp-image-border',
color: '.wp-image-border-color',
},
},
styleVariationSelectors: {
foo: '.is-style-foo.wp-image',
},
},
};

expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
'body {margin: 0;}' +
'.is-style-foo.wp-image.wp-image-spacing{padding-top: 2px;}.is-style-foo.wp-image.wp-image-border-color{border-color: blue;}.is-style-foo.wp-image{color: blue;}' +
'.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; }'
);
} );

it( 'should handle duotone filter', () => {
const tree = {
styles: {
blocks: {
'core/image': {
filter: {
duotone: 'blur(5px)',
},
},
},
},
};

const blockSelectors = {
'core/image': {
selector: '.wp-image',
duotoneSelector: '.wp-image img',
},
};

expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
'body {margin: 0;}' +
'.wp-image img{filter: blur(5px);}' +
'.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; }'
);
} );

it( 'should output content and wide size variables if values are specified', () => {
const tree = {
settings: {
Expand All @@ -493,7 +611,7 @@ describe( 'global styles renderer', () => {
},
},
};
expect( toStyles( tree, 'body' ) ).toEqual(
expect( toStyles( Object.freeze( tree ), 'body' ) ).toEqual(
'body {margin: 0; --wp--style--global--content-size: 840px; --wp--style--global--wide-size: 1100px;}.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; }'
);
} );
Expand Down Expand Up @@ -678,8 +796,9 @@ describe( 'global styles renderer', () => {
selectors: imageSelectors,
};
const blockTypes = [ imageBlock ];
const getBlockStyles = () => [ { name: 'foo' } ];

expect( getBlockSelectors( blockTypes, () => {} ) ).toEqual( {
expect( getBlockSelectors( blockTypes, getBlockStyles ) ).toEqual( {
'core/image': {
name: imageBlock.name,
selector: imageSelectors.root,
Expand All @@ -690,6 +809,9 @@ describe( 'global styles renderer', () => {
border: '.my-image img, .my-image .crop-area',
filter: { duotone: 'img' },
},
styleVariationSelectors: {
foo: '.is-style-foo.my-image',
},
hasLayoutSupport: false,
},
} );
Expand Down
Loading