@wordpress/block-editor 12.22.0 → 12.24.0

package/src/components/global-styles/style.scss

@@ -2,7 +2,7 @@
 	fill: currentColor;
 }
 
-// @todo: Ideally, popover, swatch size, and gap values should be CSS variables
+// @todo Ideally, popover, swatch size, and gap values should be CSS variables
 // to apply precise grid layouts.
 // https://github.com/WordPress/gutenberg/blob/954ecae571abbddc113d3a4bd8e1a72230180554/packages/block-editor/src/components/duotone-control/style.scss#L3-L9
 .block-editor-global-styles__shadow-popover-container {
@@ -70,3 +70,74 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
+
+.block-editor-global-styles-background-panel__inspector-media-replace-container {
+	position: relative;
+	// Since there is no option to skip rendering the drag'n'drop icon in drop
+	// zone, we hide it for now.
+	.components-drop-zone__content-icon {
+		display: none;
+	}
+
+	button.components-button {
+		color: $gray-900;
+		box-shadow: inset 0 0 0 $border-width $gray-400;
+		width: 100%;
+		display: block;
+		height: $grid-unit-50;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+
+	.block-editor-global-styles-background-panel__inspector-media-replace-title {
+		word-break: break-all;
+		// The Button component is white-space: nowrap, and that won't work with line-clamp.
+		white-space: normal;
+
+		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+		text-align: start;
+		text-align-last: center;
+	}
+
+	.components-dropdown {
+		display: block;
+	}
+}
+
+.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
+	display: block;
+	width: 20px;
+	height: 20px;
+	flex: none;
+	background: #fff;
+}
+
+.block-editor-global-styles-background-panel__inspector-image-indicator {
+	background-size: cover;
+	border-radius: $radius-round;
+	width: 20px;
+	height: 20px;
+	display: block;
+	position: relative;
+}
+
+.block-editor-global-styles-background-panel__inspector-image-indicator::after {
+	content: "";
+	position: absolute;
+	top: -1px;
+	left: -1px;
+	bottom: -1px;
+	right: -1px;
+	border-radius: $radius-round;
+	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+	// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
+	border: 1px solid transparent;
+	box-sizing: inherit;
+}
+

package/src/{hooks/test/background.js → components/global-styles/test/background-panel.js}

@@ -5,7 +5,8 @@
 import {
 	backgroundPositionToCoords,
 	coordsToBackgroundPosition,
-} from '../background';
+	hasBackgroundImageValue,
+} from '../background-panel';
 
 describe( 'backgroundPositionToCoords', () => {
 	it( 'should return the correct coordinates for a percentage value using 2-value syntax', () => {
@@ -48,3 +49,37 @@ describe( 'coordsToBackgroundPosition', () => {
 		expect( coordsToBackgroundPosition( {} ) ).toBeUndefined();
 	} );
 } );
+
+describe( 'hasBackgroundImageValue', () => {
+	it( 'should return `true` when id and url exist', () => {
+		expect(
+			hasBackgroundImageValue( {
+				background: { backgroundImage: { id: 1, url: 'url' } },
+			} )
+		).toBe( true );
+	} );
+
+	it( 'should return `true` when only url exists', () => {
+		expect(
+			hasBackgroundImageValue( {
+				background: { backgroundImage: { url: 'url' } },
+			} )
+		).toBe( true );
+	} );
+
+	it( 'should return `true` when only id exists', () => {
+		expect(
+			hasBackgroundImageValue( {
+				background: { backgroundImage: { id: 1 } },
+			} )
+		).toBe( true );
+	} );
+
+	it( 'should return `false` when id and url do not exist', () => {
+		expect(
+			hasBackgroundImageValue( {
+				background: { backgroundImage: {} },
+			} )
+		).toBe( false );
+	} );
+} );

package/src/components/global-styles/test/get-global-styles-changes.js

@@ -17,6 +17,15 @@ import {
 describe( 'getGlobalStylesChanges and utils', () => {
 	const next = {
 		styles: {
+			background: {
+				backgroundImage: {
+					url: 'https://example.com/image.jpg',
+					source: 'file',
+				},
+				backgroundSize: 'contain',
+				backgroundPosition: '30% 30%',
+				backgroundRepeat: 'no-repeat',
+			},
 			typography: {
 				fontSize: 'var(--wp--preset--font-size--potato)',
 				fontStyle: 'normal',
@@ -84,6 +93,15 @@ describe( 'getGlobalStylesChanges and utils', () => {
 	};
 	const previous = {
 		styles: {
+			background: {
+				backgroundImage: {
+					url: 'https://example.com/image_new.jpg',
+					source: 'file',
+				},
+				backgroundSize: 'contain',
+				backgroundPosition: '40% 77%',
+				backgroundRepeat: 'repeat',
+			},
 			typography: {
 				fontSize: 'var(--wp--preset--font-size--fungus)',
 				fontStyle: 'normal',
@@ -195,7 +213,7 @@ describe( 'getGlobalStylesChanges and utils', () => {
 		it( 'returns a list of changes', () => {
 			const result = getGlobalStylesChanges( next, previous );
 			expect( result ).toEqual( [
-				'Colors, Typography styles.',
+				'Background, Colors, Typography styles.',
 				'Test pumpkin flowers block.',
 				'H3, Caption, H6, Link elements.',
 				'Color, Typography settings.',
@@ -204,10 +222,10 @@ describe( 'getGlobalStylesChanges and utils', () => {
 
 		it( 'returns a list of truncated changes', () => {
 			const resultA = getGlobalStylesChanges( next, previous, {
-				maxResults: 3,
+				maxResults: 4,
 			} );
 			expect( resultA ).toEqual( [
-				'Colors, Typography styles.',
+				'Background, Colors, Typography styles.',
 				'Test pumpkin flowers block.',
 			] );
 		} );
@@ -254,6 +272,7 @@ describe( 'getGlobalStylesChanges and utils', () => {
 			const resultA = getGlobalStylesChangelist( next, previous );
 
 			expect( resultA ).toEqual( [
+				[ 'styles', 'Background' ],
 				[ 'styles', 'Colors' ],
 				[ 'styles', 'Typography' ],
 				[ 'blocks', 'Test pumpkin flowers' ],

package/src/components/global-styles/test/use-global-styles-output.js

@@ -16,7 +16,7 @@ import {
 	getStylesDeclarations,
 	processCSSNesting,
 } from '../use-global-styles-output';
-import { ROOT_BLOCK_SELECTOR } from '../utils';
+import { ROOT_BLOCK_SELECTOR, ROOT_CSS_PROPERTIES_SELECTOR } from '../utils';
 
 describe( 'global styles renderer', () => {
 	describe( 'getNodesWithStyles', () => {
@@ -254,7 +254,7 @@ describe( 'global styles renderer', () => {
 							],
 						},
 					},
-					selector: ROOT_BLOCK_SELECTOR,
+					selector: ROOT_CSS_PROPERTIES_SELECTOR,
 				},
 				{
 					presets: {
@@ -342,7 +342,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toCustomProperties( tree, blockSelectors ) ).toEqual(
-				'body{--wp--preset--color--white: white;--wp--preset--color--black: black;--wp--preset--color--white-2-black: value;--wp--custom--white-2-black: value;--wp--custom--font-primary: value;--wp--custom--line-height--body: 1.7;--wp--custom--line-height--heading: 1.3;}h1,h2,h3,h4,h5,h6{--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 23px;}'
+				':root{--wp--preset--color--white: white;--wp--preset--color--black: black;--wp--preset--color--white-2-black: value;--wp--custom--white-2-black: value;--wp--custom--font-primary: value;--wp--custom--line-height--body: 1.7;--wp--custom--line-height--heading: 1.3;}h1,h2,h3,h4,h5,h6{--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 23px;}'
 			);
 		} );
 	} );
@@ -480,10 +480,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				'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); }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{background-color: red;margin: 10px;padding: 10px;}a:where(:not(.wp-element-button)){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):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:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button)){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):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; }' +
-					'.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;}'
+				'body {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.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; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:where(body){background-color: red;margin: 10px;padding: 10px;}:where(a:where(:not(.wp-element-button))){color: blue;}a:where(:not(.wp-element-button)):hover{color: orange;}a:where(:not(.wp-element-button)):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:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover{color: red;}h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):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;}'
 			);
 		} );
 
@@ -523,9 +520,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
-				'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); }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; }' +
-					'.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; }'
+				'body {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.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; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }: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; }'
 			);
 		} );
 
@@ -571,9 +566,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
-				'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); }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; }' +
-					'.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; }'
+				'body {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.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; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { 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; }'
 			);
 		} );
 
@@ -598,9 +591,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
-				'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); }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; }' +
-					'.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; }'
+				'body {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.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; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { 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; }'
 			);
 		} );
 
@@ -614,7 +605,7 @@ describe( 'global styles renderer', () => {
 				},
 			};
 			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; }'
+				':root { --wp--style--global--content-size: 840px; --wp--style--global--wide-size: 1100px;}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; }'
 			);
 		} );
 	} );
@@ -717,7 +708,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				':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; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
+				':where(.is-layout-flex) { gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -734,7 +725,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; }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-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
+				':where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(.is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:where(.is-layout-flex) { gap: 0.5em; }:root { --wp--style--block-gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -751,7 +742,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; }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-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
+				':where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(.is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(.is-layout-flex) { gap: 12px; }:root { --wp--style--block-gap: 12px; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -768,7 +759,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex { gap: 12px; }'
+				':where(.wp-block-group-is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(.wp-block-group-is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(.wp-block-group-is-layout-flex) { gap: 12px; }'
 			);
 		} );
 

package/src/components/global-styles/use-global-styles-output.js

@@ -19,6 +19,7 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import {
 	PRESET_METADATA,
 	ROOT_BLOCK_SELECTOR,
+	ROOT_CSS_PROPERTIES_SELECTOR,
 	scopeSelector,
 	appendToSelector,
 	getBlockStyleVariationSelector,
@@ -526,10 +527,10 @@ export function getLayoutStyles( {
 							} else {
 								combinedSelector =
 									selector === ROOT_BLOCK_SELECTOR
-										? `:where(${ selector } .${ className })${
+										? `:where(.${ className })${
 												spacingStyle?.selector || ''
 										  }`
-										: `${ selector }-${ className }${
+										: `:where(${ selector }-${ className })${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -543,7 +544,7 @@ export function getLayoutStyles( {
 		);
 		// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
 		if ( selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport ) {
-			ruleset += `${ selector } { --wp--style--block-gap: ${ gapValue }; }`;
+			ruleset += `${ ROOT_CSS_PROPERTIES_SELECTOR } { --wp--style--block-gap: ${ gapValue }; }`;
 		}
 	}
 
@@ -574,7 +575,7 @@ export function getLayoutStyles( {
 						}
 
 						if ( declarations.length ) {
-							const combinedSelector = `${ selector } .${ className }${
+							const combinedSelector = `.${ className }${
 								baseStyle?.selector || ''
 							}`;
 							ruleset += `${ combinedSelector } { ${ declarations.join(
@@ -729,7 +730,7 @@ export const getNodesWithSettings = ( tree, blockSelectors ) => {
 		nodes.push( {
 			presets,
 			custom,
-			selector: ROOT_BLOCK_SELECTOR,
+			selector: ROOT_CSS_PROPERTIES_SELECTOR,
 		} );
 	}
 
@@ -781,24 +782,28 @@ export const toStyles = (
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
 	const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
 	const { contentSize, wideSize } = tree?.settings?.layout || {};
+	let ruleset = '';
+
+	if ( contentSize || wideSize ) {
+		ruleset += `${ ROOT_CSS_PROPERTIES_SELECTOR } {`;
+		ruleset = contentSize
+			? ruleset + ` --wp--style--global--content-size: ${ contentSize };`
+			: ruleset;
+		ruleset = wideSize
+			? ruleset + ` --wp--style--global--wide-size: ${ wideSize };`
+			: ruleset;
+		ruleset += '}';
+	}
 
 	/*
-	 * Reset default browser margin on the root body element.
-	 * This is set on the root selector **before** generating the ruleset
+	 * Reset default browser margin on the body element.
+	 * This is set on the body selector **before** generating the ruleset
 	 * from the `theme.json`. This is to ensure that if the `theme.json` declares
 	 * `margin` in its `spacing` declaration for the `body` element then these
 	 * user-generated values take precedence in the CSS cascade.
 	 * @link https://github.com/WordPress/gutenberg/issues/36147.
 	 */
-	let ruleset = 'body {margin: 0;';
-
-	if ( contentSize ) {
-		ruleset += ` --wp--style--global--content-size: ${ contentSize };`;
-	}
-
-	if ( wideSize ) {
-		ruleset += ` --wp--style--global--wide-size: ${ wideSize };`;
-	}
+	ruleset += 'body {margin: 0;';
 
 	// Root padding styles should only be output for full templates, not patterns or template parts.
 	if ( useRootPaddingAlign && isTemplate ) {
@@ -839,7 +844,7 @@ export const toStyles = (
 					( [ cssSelector, declarations ] ) => {
 						if ( declarations.length ) {
 							const rules = declarations.join( ';' );
-							ruleset += `${ cssSelector }{${ rules };}`;
+							ruleset += `:where(${ cssSelector }){${ rules };}`;
 						}
 					}
 				);
@@ -932,7 +937,9 @@ export const toStyles = (
 				isTemplate
 			);
 			if ( declarations?.length ) {
-				ruleset += `${ selector }{${ declarations.join( ';' ) };}`;
+				ruleset += `:where(${ selector }){${ declarations.join(
+					';'
+				) };}`;
 			}
 
 			// Check for pseudo selector in `styles` and handle separately.
@@ -993,14 +1000,17 @@ export const toStyles = (
 			`:where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
 		ruleset =
 			ruleset +
-			':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
+			':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
 		ruleset =
 			ruleset +
-			':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
+			':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
 	}
 
 	nodesWithSettings.forEach( ( { selector, presets } ) => {
-		if ( ROOT_BLOCK_SELECTOR === selector ) {
+		if (
+			ROOT_BLOCK_SELECTOR === selector ||
+			ROOT_CSS_PROPERTIES_SELECTOR === selector
+		) {
 			// Do not add extra specificity for top-level classes.
 			selector = '';
 		}
@@ -1211,6 +1221,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			updatedConfig,
 			blockSelectors
 		);
+
 		const globalStyles = toStyles(
 			updatedConfig,
 			blockSelectors,

package/src/components/global-styles/utils.js

@@ -11,6 +11,7 @@ import { getValueFromObjectPath } from '../../utils/object';
 
 /* Supporting data. */
 export const ROOT_BLOCK_SELECTOR = 'body';
+export const ROOT_CSS_PROPERTIES_SELECTOR = ':root';
 
 export const PRESET_METADATA = [
 	{

package/src/components/iframe/index.js

@@ -228,7 +228,10 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
-		windowResizeRef,
+		// Avoid resize listeners when not needed, these will trigger
+		// unnecessary re-renders when animating the iframe width, or when
+		// expanding preview iframes.
+		scale === 1 ? null : windowResizeRef,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
@@ -244,12 +247,12 @@ function Iframe( {
 				height: auto !important;
 				min-height: 100%;
 			}
-
-			body {
+			/* Lowest specificity to not override global styles */
+			:where(body) {
 				margin: 0;
 				/* Default background color in case zoom out mode background
 				colors the html element */
-				background: white;
+				background-color: white;
 			}
 		</style>
 		${ styles }
@@ -269,29 +272,29 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
+	scale =
+		typeof scale === 'function'
+			? scale( contentWidth, contentHeight )
+			: scale;
+
 	useEffect( () => {
 		if ( ! iframeDocument ) {
 			return;
 		}
 
-		const _scale =
-			typeof scale === 'function'
-				? scale( contentWidth, contentHeight )
-				: scale;
-
-		if ( _scale !== 1 ) {
+		if ( scale !== 1 ) {
 			// Hack to get proper margins when scaling the iframe document.
-			const bottomFrameSize = frameSize - contentHeight * ( 1 - _scale );
+			const bottomFrameSize = frameSize - contentHeight * ( 1 - scale );
 
 			iframeDocument.body.classList.add( 'is-zoomed-out' );
 
-			iframeDocument.documentElement.style.transform = `scale( ${ _scale } )`;
+			iframeDocument.documentElement.style.transform = `scale( ${ scale } )`;
 			iframeDocument.documentElement.style.marginTop = `${ frameSize }px`;
 			// TODO: `marginBottom` doesn't work in Firefox. We need another way to do this.
 			iframeDocument.documentElement.style.marginBottom = `${ bottomFrameSize }px`;
-			if ( iframeWindowInnerHeight > contentHeight * _scale ) {
+			if ( iframeWindowInnerHeight > contentHeight * scale ) {
 				iframeDocument.body.style.minHeight = `${ Math.floor(
-					( iframeWindowInnerHeight - 2 * frameSize ) / _scale
+					( iframeWindowInnerHeight - 2 * frameSize ) / scale
 				) }px`;
 			}
 

package/src/components/image-editor/cropper.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Spinner } from '@wordpress/components';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -20,7 +21,6 @@ export default function ImageCropper( {
 	url,
 	width,
 	height,
-	clientWidth,
 	naturalHeight,
 	naturalWidth,
 	borderProps,
@@ -36,6 +36,8 @@ export default function ImageCropper( {
 		setZoom,
 		rotation,
 	} = useImageEditingContext();
+	const [ contentResizeListener, { width: clientWidth } ] =
+		useResizeObserver();
 
 	let editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth;
 
@@ -43,7 +45,7 @@ export default function ImageCropper( {
 		editedHeight = ( clientWidth * naturalWidth ) / naturalHeight;
 	}
 
-	return (
+	const area = (
 		<div
 			className={ classnames(
 				'wp-block-image__crop-area',
@@ -79,4 +81,11 @@ export default function ImageCropper( {
 			{ isInProgress && <Spinner /> }
 		</div>
 	);
+
+	return (
+		<>
+			{ contentResizeListener }
+			{ area }
+		</>
+	);
 }

package/src/components/image-editor/index.js

@@ -19,7 +19,6 @@ export default function ImageEditor( {
 	url,
 	width,
 	height,
-	clientWidth,
 	naturalHeight,
 	naturalWidth,
 	onSaveImage,
@@ -40,7 +39,6 @@ export default function ImageEditor( {
 				url={ url }
 				width={ width }
 				height={ height }
-				clientWidth={ clientWidth }
 				naturalHeight={ naturalHeight }
 				naturalWidth={ naturalWidth }
 			/>