diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js index 6b0a4ef2e08670..ebe472b047d51f 100644 --- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js @@ -18,6 +18,9 @@ import { } from '../use-global-styles-output'; import { ROOT_BLOCK_SELECTOR } from '../utils'; +const BASE_STYLES = + 'body {margin: 0;}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); }:where(body .is-layout-flex) { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }:where(body .is-layout-grid) { display:grid; }body .is-layout-grid > * { margin: 0; }'; + describe( 'global styles renderer', () => { describe( 'getNodesWithStyles', () => { it( 'should return the nodes with styles', () => { @@ -479,7 +482,7 @@ describe( 'global styles renderer', () => { }; expect( toStyles( tree, blockSelectors ) ).toEqual( - 'body {margin: 0;}:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-constrained > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-constrained > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(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; }:where(body .is-layout-constrained > .alignwide) { max-width: var(--wp--style--global--wide-size); }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }:where(body .is-layout-grid) { display:grid; }:where(body .is-layout-grid > *) { margin: 0; }' + + BASE_STYLES + ':where(body) {background-color: red;margin: 10px;padding: 10px;}:where(a) {color: blue;}a:hover{color: orange;}a:focus{color: orange;}:where(h1) {font-size: 42px;}:where(.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;}:where(h1,h2,h3,h4,h5,h6) {color: orange;}:where(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;}' + ':where(.wp-block-image img, .wp-block-image .wp-crop-area) {border-radius: 9999px;}:where(.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;}' @@ -522,7 +525,7 @@ describe( 'global styles renderer', () => { }; expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual( - 'body {margin: 0;}:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-constrained > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-constrained > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(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; }:where(body .is-layout-constrained > .alignwide) { max-width: var(--wp--style--global--wide-size); }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }:where(body .is-layout-grid) { display:grid; }:where(body .is-layout-grid > *) { margin: 0; }' + + BASE_STYLES + ':where(.wp-image-spacing) {padding-top: 1px;}:where(.wp-image-border-color) {border-color: red;}:where(.wp-image-border) {border-radius: 9999px;}:where(.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; }' ); @@ -570,7 +573,7 @@ describe( 'global styles renderer', () => { }; expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual( - 'body {margin: 0;}:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-constrained > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-constrained > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(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; }:where(body .is-layout-constrained > .alignwide) { max-width: var(--wp--style--global--wide-size); }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }:where(body .is-layout-grid) { display:grid; }:where(body .is-layout-grid > *) { margin: 0; }' + + BASE_STYLES + '.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; }' ); @@ -597,7 +600,7 @@ describe( 'global styles renderer', () => { }; expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual( - 'body {margin: 0;}:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-constrained > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-constrained > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-constrained > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(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; }:where(body .is-layout-constrained > .alignwide) { max-width: var(--wp--style--global--wide-size); }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }:where(body .is-layout-grid) { display:grid; }:where(body .is-layout-grid > *) { margin: 0; }' + + BASE_STYLES + '.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; }' ); @@ -716,7 +719,7 @@ describe( 'global styles renderer', () => { } ); expect( layoutStyles ).toEqual( - ':where(.is-layout-flex) { gap: 0.5em; }:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }' + ':where(.is-layout-flex) { 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; }:where(body .is-layout-flex) { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }' ); } ); @@ -733,7 +736,7 @@ describe( 'global styles renderer', () => { } ); expect( layoutStyles ).toEqual( - ':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 0.5em; }body { --wp--style--block-gap: 0.5em; }:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }' + ':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 0.5em; }body { --wp--style--block-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; }:where(body .is-layout-flex) { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }' ); } ); @@ -750,7 +753,7 @@ describe( 'global styles renderer', () => { } ); expect( layoutStyles ).toEqual( - ':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 12px; }body { --wp--style--block-gap: 12px; }:where(body .is-layout-flow > .alignleft) { float: left; margin-inline-start: 0; margin-inline-end: 2em; }:where(body .is-layout-flow > .alignright) { float: right; margin-inline-start: 2em; margin-inline-end: 0; }:where(body .is-layout-flow > .aligncenter) { margin-left: auto !important; margin-right: auto !important; }:where(body .is-layout-flex) { display:flex; }:where(body .is-layout-flex) { flex-wrap: wrap; align-items: center; }:where(body .is-layout-flex > *) { margin: 0; }' + ':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 12px; }body { --wp--style--block-gap: 12px; }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; }:where(body .is-layout-flex) { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }' ); } );