@wordpress/block-editor 12.3.0 → 12.3.1

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -35,14 +35,13 @@ import { useShowMoversGestures } from '../block-toolbar/utils';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 function CopyMenuItem( { blocks, onCopy, label } ) {
 	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
 	const copyMenuItemBlocksLabel =
-		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy block' );
+		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy' );
 	const copyMenuItemLabel = label ? label : copyMenuItemBlocksLabel;
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
@@ -190,6 +189,7 @@ export function BlockSettingsDropdown( {
 			__experimentalUpdateSelection={ ! __experimentalSelectBlock }
 		>
 			{ ( {
+				canCopyStyles,
 				canDuplicate,
 				canInsertDefaultBlock,
 				canMove,
@@ -331,16 +331,18 @@ export function BlockSettingsDropdown( {
 									</>
 								) }
 							</MenuGroup>
-							<MenuGroup>
-								<CopyMenuItem
-									blocks={ blocks }
-									onCopy={ onCopy }
-									label={ __( 'Copy styles' ) }
-								/>
-								<MenuItem onClick={ onPasteStyles }>
-									{ __( 'Paste styles' ) }
-								</MenuItem>
-							</MenuGroup>
+							{ canCopyStyles && (
+								<MenuGroup>
+									<CopyMenuItem
+										blocks={ blocks }
+										onCopy={ onCopy }
+										label={ __( 'Copy styles' ) }
+									/>
+									<MenuItem onClick={ onPasteStyles }>
+										{ __( 'Paste styles' ) }
+									</MenuItem>
+								</MenuGroup>
+							) }
 							<BlockSettingsMenuControls.Slot
 								fillProps={ {
 									onClose,

package/src/components/block-switcher/index.js

@@ -196,8 +196,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						className="block-editor-block-switcher"
 						label={ blockSwitcherLabel }
 						popoverProps={ {
-							position: 'bottom right',
-							variant: 'toolbar',
+							placement: 'bottom-start',
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={

package/src/components/block-toolbar/style.scss

@@ -110,10 +110,6 @@
 		}
 	}
 
-	.block-editor-block-lock-toolbar {
-		margin-left: -$grid-unit-15 * 0.5 !important;
-	}
-
 	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
 	// This is best fixed by making the mover control area a proper single toolbar group.
 	.components-toolbar-group {

package/src/components/block-tools/index.js

@@ -59,6 +59,7 @@ export default function BlockTools( {
 		insertAfterBlock,
 		insertBeforeBlock,
 		clearSelectedBlock,
+		selectBlock,
 		moveBlocksUp,
 		moveBlocksDown,
 	} = useDispatch( blockEditorStore );
@@ -108,7 +109,15 @@ export default function BlockTools( {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
-				clearSelectedBlock();
+
+				// If there is more than one block selected, select the first
+				// block so that focus is directed back to the beginning of the selection.
+				// In effect, to the user this feels like deselecting the multi-selection.
+				if ( clientIds.length > 1 ) {
+					selectBlock( clientIds[ 0 ] );
+				} else {
+					clearSelectedBlock();
+				}
 				event.target.ownerDocument.defaultView
 					.getSelection()
 					.removeAllRanges();

package/src/components/block-vertical-alignment-control/ui.js

@@ -57,9 +57,7 @@ function BlockVerticalAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar
-		? { isCollapsed }
-		: { popoverProps: { variant: 'toolbar' } };
+	const extraProps = isToolbar ? { isCollapsed } : {};
 
 	return (
 		<UIComponent

package/src/components/colors/utils.js

@@ -1,11 +1,15 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
 
+/**
+ * Internal dependencies
+ */
+import { kebabCase } from '../../utils/object';
+
 extend( [ namesPlugin, a11yPlugin ] );
 
 /**

package/src/components/colors/with-colors.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -19,6 +14,7 @@ import {
 	getMostReadableColor,
 } from './utils';
 import useSetting from '../use-setting';
+import { kebabCase } from '../../utils/object';
 
 /**
  * Capitalizes the first letter in a string.

package/src/components/copy-handler/index.js

@@ -100,6 +100,11 @@ export function useClipboardHandler() {
 
 	return useRefEffect( ( node ) => {
 		function handler( event ) {
+			if ( event.defaultPrevented ) {
+				// This was likely already handled in rich-text/use-paste-handler.js.
+				return;
+			}
+
 			const selectedBlockClientIds = getSelectedBlockClientIds();
 
 			if ( selectedBlockClientIds.length === 0 ) {
@@ -127,7 +132,6 @@ export function useClipboardHandler() {
 				return;
 			}
 
-			const eventDefaultPrevented = event.defaultPrevented;
 			event.preventDefault();
 
 			const isSelectionMergeable = __unstableIsSelectionMergeable();
@@ -197,10 +201,6 @@ export function useClipboardHandler() {
 					__unstableDeleteSelection();
 				}
 			} else if ( event.type === 'paste' ) {
-				if ( eventDefaultPrevented ) {
-					// This was likely already handled in rich-text/use-paste-handler.js.
-					return;
-				}
 				const {
 					__experimentalCanUserUseUnfilteredHTML:
 						canUserUseUnfilteredHTML,

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;