@wordpress/block-editor 12.3.0 → 12.3.2

package/src/components/dimensions-tool/width-height-tool.js

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const SingleColumnToolsPanelItem = styled( ToolsPanelItem )`
+	grid-column: span 1;
+`;
+
+/**
+ * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
+ */
+
+/**
+ * @typedef {Object} WidthHeightToolValue
+ * @property {string} [width]  Width CSS value.
+ * @property {string} [height] Height CSS value.
+ */
+
+/**
+ * @callback WidthHeightToolOnChange
+ * @param {WidthHeightToolValue} nextValue Next dimensions value.
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} WidthHeightToolProps
+ * @property {string}                  [panelId]          ID of the panel that contains the controls.
+ * @property {WidthHeightToolValue}    [value]            Current dimensions values.
+ * @property {WidthHeightToolOnChange} [onChange]         Callback to update the dimensions values.
+ * @property {WPUnitControlUnit[]}     [units]            Units options.
+ * @property {boolean}                 [isShownByDefault] Whether the panel is shown by default.
+ */
+
+/**
+ * Component that renders controls to edit the dimensions of an image or container.
+ *
+ * @param {WidthHeightToolProps} props The component props.
+ *
+ * @return {import('@wordpress/element').WPElement} The width and height tool.
+ */
+export default function WidthHeightTool( {
+	panelId,
+	value = {},
+	onChange = () => {},
+	units,
+	isShownByDefault = true,
+} ) {
+	// null, undefined, and 'auto' all represent the default value.
+	const width = value.width === 'auto' ? '' : value.width ?? '';
+	const height = value.height === 'auto' ? '' : value.height ?? '';
+
+	const onDimensionChange = ( dimension ) => ( nextDimension ) => {
+		const nextValue = { ...value };
+		// Empty strings or undefined may be passed and both represent removing the value.
+		if ( ! nextDimension ) {
+			delete nextValue[ dimension ];
+		} else {
+			nextValue[ dimension ] = nextDimension;
+		}
+		onChange( nextValue );
+	};
+
+	return (
+		<>
+			<SingleColumnToolsPanelItem
+				label={ __( 'Width' ) }
+				isShownByDefault={ isShownByDefault }
+				hasValue={ () => width !== '' }
+				onDeselect={ onDimensionChange( 'width' ) }
+				panelId={ panelId }
+			>
+				<UnitControl
+					label={ __( 'Width' ) }
+					placeholder={ __( 'Auto' ) }
+					labelPosition="top"
+					units={ units }
+					min={ 0 }
+					value={ width }
+					onChange={ onDimensionChange( 'width' ) }
+					size={ '__unstable-large' }
+				/>
+			</SingleColumnToolsPanelItem>
+			<SingleColumnToolsPanelItem
+				label={ __( 'Height' ) }
+				isShownByDefault={ isShownByDefault }
+				hasValue={ () => height !== '' }
+				onDeselect={ onDimensionChange( 'height' ) }
+				panelId={ panelId }
+			>
+				<UnitControl
+					label={ __( 'Height' ) }
+					placeholder={ __( 'Auto' ) }
+					labelPosition="top"
+					units={ units }
+					min={ 0 }
+					value={ height }
+					onChange={ onDimensionChange( 'height' ) }
+					size={ '__unstable-large' }
+				/>
+			</SingleColumnToolsPanelItem>
+		</>
+	);
+}

package/src/components/duotone-control/index.js

@@ -36,7 +36,6 @@ function DuotoneControl( {
 			popoverProps={ {
 				className: 'block-editor-duotone-control__popover',
 				headerTitle: __( 'Duotone' ),
-				variant: 'toolbar',
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event ) => {

package/src/components/font-sizes/test/fluid-utils.js

@@ -17,6 +17,13 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			delete logged[ key ];
 		}
 	} );
+	it( 'should return `null` when given a font size is not a support value+unit', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize:
+				'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)',
+		} );
+		expect( fluidTypographyValues ).toBeNull();
+	} );
 
 	it( 'should return a fluid font size when given a min and max font size', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
@@ -67,91 +74,105 @@ describe( 'getComputedFluidTypographyValue()', () => {
 		);
 	} );
 
-	describe( 'getTypographyValueAndUnit', () => {
-		it( 'should return the expected return values', () => {
-			[
-				{
-					value: null,
-					expected: null,
-				},
-				{
-					value: false,
-					expected: null,
-				},
-				{
-					value: true,
-					expected: null,
-				},
-				{
-					value: [ '10' ],
-					expected: null,
-				},
-				{
-					value: '10vh',
-					expected: null,
-				},
-				{
-					value: 'calc(2 * 10px)',
-					expected: null,
-				},
-				{
-					value: 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)',
-					expected: null,
-				},
-				{
-					value: '10',
-					expected: {
-						value: 10,
-						unit: 'px',
-					},
+	it( 'should return null when maximumViewPortWidth is not a supported value or unit', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+			maximumViewPortWidth: 'min(calc(100% - 60px), 1200px)',
+		} );
+		expect( fluidTypographyValues ).toBeNull();
+	} );
+
+	it( 'should return `null` font size when minimumViewPortWidth is not a supported value or unit', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '33px',
+			minimumViewPortWidth: 'calc(100% - 60px)',
+		} );
+		expect( fluidTypographyValues ).toBeNull();
+	} );
+} );
+
+describe( 'getTypographyValueAndUnit', () => {
+	it( 'should return the expected return values', () => {
+		[
+			{
+				value: null,
+				expected: null,
+			},
+			{
+				value: false,
+				expected: null,
+			},
+			{
+				value: true,
+				expected: null,
+			},
+			{
+				value: [ '10' ],
+				expected: null,
+			},
+			{
+				value: '10vh',
+				expected: null,
+			},
+			{
+				value: 'calc(2 * 10px)',
+				expected: null,
+			},
+			{
+				value: 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)',
+				expected: null,
+			},
+			{
+				value: '10',
+				expected: {
+					value: 10,
+					unit: 'px',
 				},
-				{
+			},
+			{
+				value: 11,
+				expected: {
 					value: 11,
-					expected: {
-						value: 11,
-						unit: 'px',
-					},
+					unit: 'px',
 				},
-				{
+			},
+			{
+				value: 11.234,
+				expected: {
 					value: 11.234,
-					expected: {
-						value: 11.234,
-						unit: 'px',
-					},
+					unit: 'px',
 				},
-				{
-					value: '12rem',
-					expected: {
-						value: 12,
-						unit: 'rem',
-					},
+			},
+			{
+				value: '12rem',
+				expected: {
+					value: 12,
+					unit: 'rem',
 				},
-				{
-					value: '12px',
-					expected: {
-						value: 12,
-						unit: 'px',
-					},
+			},
+			{
+				value: '12px',
+				expected: {
+					value: 12,
+					unit: 'px',
 				},
-				{
-					value: '12em',
-					expected: {
-						value: 12,
-						unit: 'em',
-					},
+			},
+			{
+				value: '12em',
+				expected: {
+					value: 12,
+					unit: 'em',
 				},
-				{
-					value: '12.74em',
-					expected: {
-						value: 12.74,
-						unit: 'em',
-					},
+			},
+			{
+				value: '12.74em',
+				expected: {
+					value: 12.74,
+					unit: 'em',
 				},
-			].forEach( ( { value, expected } ) => {
-				expect( getTypographyValueAndUnit( value ) ).toEqual(
-					expected
-				);
-			} );
+			},
+		].forEach( ( { value, expected } ) => {
+			expect( getTypographyValueAndUnit( value ) ).toEqual( expected );
 		} );
 	} );
 } );

package/src/components/font-sizes/utils.js

@@ -1,7 +1,7 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { kebabCase } from 'lodash';
+import { kebabCase } from '../../utils/object';
 
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.

package/src/components/global-styles/color-panel.js

@@ -525,14 +525,14 @@ export default function ColorPanel( {
 			isShownByDefault: defaultControls.background,
 			indicators: [ gradient ?? backgroundColor ],
 			tabs: [
-				{
+				hasSolidColors && {
 					key: 'background',
 					label: __( 'Solid' ),
 					inheritedValue: backgroundColor,
 					setValue: setBackgroundColor,
 					userValue: userBackgroundColor,
 				},
-				{
+				hasGradientColors && {
 					key: 'gradient',
 					label: __( 'Gradient' ),
 					inheritedValue: gradient,
@@ -540,7 +540,7 @@ export default function ColorPanel( {
 					userValue: userGradient,
 					isGradient: true,
 				},
-			],
+			].filter( Boolean ),
 		},
 		showLinkPanel && {
 			key: 'link',

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

@@ -6,6 +6,7 @@ export {
 } from './hooks';
 export { getBlockCSSSelector } from './get-block-css-selector';
 export {
+	getLayoutStyles,
 	useGlobalStylesOutput,
 	useGlobalStylesOutputWithConfig,
 } from './use-global-styles-output';

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

@@ -478,7 +478,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				'body {margin: 0;}' +
+				'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{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; }' +
 					'.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;}'
@@ -521,7 +521,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
-				'body {margin: 0;}' +
+				'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; }'
 			);
@@ -569,7 +569,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
-				'body {margin: 0;}' +
+				'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; }'
 			);
@@ -596,7 +596,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
-				'body {margin: 0;}' +
+				'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; }'
 			);
@@ -706,7 +706,8 @@ describe( 'global styles renderer', () => {
 			const style = { spacing: { blockGap: '12px' } };
 
 			const layoutStyles = getLayoutStyles( {
-				tree: layoutDefinitionsTree,
+				layoutDefinitions:
+					layoutDefinitionsTree.settings.layout.definitions,
 				style,
 				selector: 'body',
 				hasBlockGapSupport: false,
@@ -722,7 +723,8 @@ describe( 'global styles renderer', () => {
 			const style = {};
 
 			const layoutStyles = getLayoutStyles( {
-				tree: layoutDefinitionsTree,
+				layoutDefinitions:
+					layoutDefinitionsTree.settings.layout.definitions,
 				style,
 				selector: 'body',
 				hasBlockGapSupport: true,
@@ -738,7 +740,8 @@ describe( 'global styles renderer', () => {
 			const style = { spacing: { blockGap: '12px' } };
 
 			const layoutStyles = getLayoutStyles( {
-				tree: layoutDefinitionsTree,
+				layoutDefinitions:
+					layoutDefinitionsTree.settings.layout.definitions,
 				style,
 				selector: 'body',
 				hasBlockGapSupport: true,
@@ -754,7 +757,8 @@ describe( 'global styles renderer', () => {
 			const style = { spacing: { blockGap: '12px' } };
 
 			const layoutStyles = getLayoutStyles( {
-				tree: layoutDefinitionsTree,
+				layoutDefinitions:
+					layoutDefinitionsTree.settings.layout.definitions,
 				style,
 				selector: '.wp-block-group',
 				hasBlockGapSupport: true,
@@ -770,7 +774,8 @@ describe( 'global styles renderer', () => {
 			const style = { spacing: { blockGap: '12px' } };
 
 			const layoutStyles = getLayoutStyles( {
-				tree: layoutDefinitionsTree,
+				layoutDefinitions:
+					layoutDefinitionsTree.settings.layout.definitions,
 				style,
 				selector: '.wp-block-group',
 				hasBlockGapSupport: false, // This means that the fallback value will be used instead of the "real" one.

package/src/components/global-styles/typography-panel.js

@@ -50,19 +50,22 @@ export function useHasTypographyPanel( settings ) {
 function useHasFontSizeControl( settings ) {
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
 	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
-	const fontSizes =
-		fontSizesPerOrigin?.custom ??
-		fontSizesPerOrigin?.theme ??
-		fontSizesPerOrigin.default;
+	const fontSizes = []
+		.concat( fontSizesPerOrigin?.custom ?? [] )
+		.concat( fontSizesPerOrigin?.theme ?? [] )
+		.concat( fontSizesPerOrigin.default ?? [] );
 	return !! fontSizes?.length || ! disableCustomFontSizes;
 }
 
 function useHasFontFamilyControl( settings ) {
 	const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
-	const fontFamilies =
-		fontFamiliesPerOrigin?.custom ??
-		fontFamiliesPerOrigin?.theme ??
-		fontFamiliesPerOrigin?.default;
+	const fontFamilies = []
+		.concat( fontFamiliesPerOrigin?.custom ?? [] )
+		.concat( fontFamiliesPerOrigin?.theme ?? [] )
+		.concat( fontFamiliesPerOrigin?.default ?? [] )
+		.sort( ( a, b ) =>
+			( a?.name || a?.slug ).localeCompare( b?.name || a?.slug )
+		);
 	return !! fontFamilies?.length;
 }
 
@@ -153,10 +156,10 @@ export default function TypographyPanel( {
 	// Font Family
 	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
 	const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
-	const fontFamilies =
-		fontFamiliesPerOrigin?.custom ??
-		fontFamiliesPerOrigin?.theme ??
-		fontFamiliesPerOrigin?.default;
+	const fontFamilies = []
+		.concat( fontFamiliesPerOrigin?.custom ?? [] )
+		.concat( fontFamiliesPerOrigin?.theme ?? [] )
+		.concat( fontFamiliesPerOrigin?.default ?? [] );
 	const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );
 	const setFontFamily = ( newValue ) => {
 		const slug = fontFamilies?.find(
@@ -179,10 +182,10 @@ export default function TypographyPanel( {
 	const hasFontSizeEnabled = useHasFontSizeControl( settings );
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
 	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
-	const fontSizes =
-		fontSizesPerOrigin?.custom ??
-		fontSizesPerOrigin?.theme ??
-		fontSizesPerOrigin.default;
+	const fontSizes = []
+		.concat( fontSizesPerOrigin?.custom ?? [] )
+		.concat( fontSizesPerOrigin?.theme ?? [] )
+		.concat( fontSizesPerOrigin.default ?? [] );
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
 	const setFontSize = ( newValue, metadata ) => {
 		const actualValue = !! metadata?.slug

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, kebabCase, set } from 'lodash';
+import { get, set } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -31,6 +31,8 @@ import { useGlobalSetting } from './hooks';
 import { PresetDuotoneFilter } from '../duotone/components';
 import { getGapCSSValue } from '../../hooks/gap';
 import { store as blockEditorStore } from '../../store';
+import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
+import { kebabCase } from '../../utils/object';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -416,7 +418,7 @@ export function getStylesDeclarations(
  * in theme.json, and outputting common layout styles, and specific blockGap values.
  *
  * @param {Object}  props
- * @param {Object}  props.tree                  A theme.json tree containing layout definitions.
+ * @param {Object}  props.layoutDefinitions     Layout definitions, keyed by layout type.
  * @param {Object}  props.style                 A style object containing spacing values.
  * @param {string}  props.selector              Selector used to group together layout styling rules.
  * @param {boolean} props.hasBlockGapSupport    Whether or not the theme opts-in to blockGap support.
@@ -425,7 +427,7 @@ export function getStylesDeclarations(
  * @return {string} Generated CSS rules for the layout styles.
  */
 export function getLayoutStyles( {
-	tree,
+	layoutDefinitions = LAYOUT_DEFINITIONS,
 	style,
 	selector,
 	hasBlockGapSupport,
@@ -447,8 +449,8 @@ export function getLayoutStyles( {
 		}
 	}
 
-	if ( gapValue && tree?.settings?.layout?.definitions ) {
-		Object.values( tree.settings.layout.definitions ).forEach(
+	if ( gapValue && layoutDefinitions ) {
+		Object.values( layoutDefinitions ).forEach(
 			( { className, name, spacingStyles } ) => {
 				// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
 				if (
@@ -513,12 +515,9 @@ export function getLayoutStyles( {
 	}
 
 	// Output base styles
-	if (
-		selector === ROOT_BLOCK_SELECTOR &&
-		tree?.settings?.layout?.definitions
-	) {
+	if ( selector === ROOT_BLOCK_SELECTOR && layoutDefinitions ) {
 		const validDisplayModes = [ 'block', 'flex', 'grid' ];
-		Object.values( tree.settings.layout.definitions ).forEach(
+		Object.values( layoutDefinitions ).forEach(
 			( { className, displayMode, baseStyles } ) => {
 				if (
 					displayMode &&
@@ -880,7 +879,6 @@ export const toStyles = (
 				( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
 			) {
 				ruleset += getLayoutStyles( {
-					tree,
 					style: styles,
 					selector,
 					hasBlockGapSupport,
@@ -1033,7 +1031,9 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 				duotoneSupport && scopeSelector( rootSelector, duotoneSupport );
 		}
 
-		const hasLayoutSupport = !! blockType?.supports?.__experimentalLayout;
+		const hasLayoutSupport =
+			!! blockType?.supports?.layout ||
+			!! blockType?.supports?.__experimentalLayout;
 		const fallbackGapValue =
 			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
 

package/src/components/iframe/index.js

@@ -226,7 +226,7 @@ function Iframe( {
 	// content.
 	const html =
 		'<!doctype html>' +
-		'<style>html{height:auto!important;}body{margin:0}</style>' +
+		'<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>' +
 		( assets?.styles ?? '' );
 
 	const [ src, cleanup ] = useMemo( () => {

package/src/components/image-editor/aspect-ratio-dropdown.js

@@ -54,7 +54,7 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 						} }
 						value={ aspect }
 						aspectRatios={ [
-							// All ratios should be mirrored in PostFeaturedImage in @wordpress/block-library
+							// All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
 							{
 								title: __( 'Original' ),
 								aspect: defaultAspect,

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

@@ -2,5 +2,4 @@ export const MIN_ZOOM = 100;
 export const MAX_ZOOM = 300;
 export const POPOVER_PROPS = {
 	placement: 'bottom-start',
-	variant: 'toolbar',
 };

package/src/components/image-editor/use-save-image.js

@@ -66,7 +66,6 @@ export default function useSaveImage( {
 				onSaveImage( {
 					id: response.id,
 					url: response.source_url,
-					height: height && width ? width / aspect : undefined,
 				} );
 			} )
 			.catch( ( error ) => {

package/src/components/image-size-control/index.js

@@ -8,6 +8,7 @@ import {
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -30,6 +31,11 @@ export default function ImageSizeControl( {
 	onChange,
 	onChangeImage = noop,
 } ) {
+	deprecated( 'wp.blockEditor.__experimentalImageSizeControl', {
+		since: '6.3',
+		alternative:
+			'wp.blockEditor.privateApis.DimensionsTool and wp.blockEditor.privateApis.ResolutionTool',
+	} );
 	const { currentHeight, currentWidth, updateDimension, updateDimensions } =
 		useDimensionHandler( height, width, imageHeight, imageWidth, onChange );