@wordpress/block-editor 12.2.0 → 12.3.1

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/dimensions-panel.js

@@ -207,8 +207,19 @@ export default function DimensionsPanel( {
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
 } ) {
-	const decodeValue = ( rawValue ) =>
-		getValueFromVariable( { settings }, '', rawValue );
+	const decodeValue = ( rawValue ) => {
+		if ( rawValue && typeof rawValue === 'object' ) {
+			return Object.keys( rawValue ).reduce( ( acc, key ) => {
+				acc[ key ] = getValueFromVariable(
+					{ settings },
+					'',
+					rawValue[ key ]
+				);
+				return acc;
+			}, {} );
+		}
+		return getValueFromVariable( { settings }, '', rawValue );
+	};
 
 	const showSpacingPresetsControl = useHasSpacingPresets( settings );
 	const units = useCustomUnits( {
@@ -488,7 +499,6 @@ export default function DimensionsPanel( {
 							sides={ paddingSides }
 							units={ units }
 							allowReset={ false }
-							splitOnAxis={ isAxialPadding }
 							onMouseOver={ onMouseOverPadding }
 							onMouseOut={ onMouseLeaveControls }
 						/>
@@ -529,7 +539,6 @@ export default function DimensionsPanel( {
 							sides={ marginSides }
 							units={ units }
 							allowReset={ false }
-							splitOnAxis={ isAxialMargin }
 							onMouseOver={ onMouseOverMargin }
 							onMouseOut={ onMouseLeaveControls }
 						/>
@@ -576,10 +585,10 @@ export default function DimensionsPanel( {
 							label={ __( 'Block spacing' ) }
 							min={ 0 }
 							onChange={ setGapValues }
+							showSideInLabel={ false }
 							sides={ isAxialGap ? gapSides : [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.
 							values={ gapValues }
 							allowReset={ false }
-							splitOnAxis={ isAxialGap }
 						/>
 					) }
 				</ToolsPanelItem>

package/src/components/global-styles/get-block-css-selector.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, isEmpty } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ export function getBlockCSSSelector(
 	const { fallback = false } = options;
 	const { name, selectors, supports } = blockType;
 
-	const hasSelectors = ! isEmpty( selectors );
+	const hasSelectors = selectors && Object.keys( selectors ).length > 0;
 	const path = Array.isArray( target ) ? target.join( '.' ) : target;
 
 	// Root selector.

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/typography-utils.js

@@ -1,7 +1,10 @@
 /**
  * Internal dependencies
  */
-import { getTypographyFontSizeValue } from '../typography-utils';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from '../typography-utils';
 
 describe( 'typography utils', () => {
 	describe( 'getTypographyFontSizeValue', () => {
@@ -170,6 +173,58 @@ describe( 'typography utils', () => {
 					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
 			},
 
+			{
+				message:
+					'returns clamp value where min and max fluid values defined',
+				preset: {
+					size: '80px',
+					fluid: {
+						min: '70px',
+						max: '125px',
+					},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)',
+			},
+
+			{
+				message:
+					'should apply maxViewPortWidth as maximum viewport width',
+				preset: {
+					size: '80px',
+					fluid: {
+						min: '70px',
+						max: '125px',
+					},
+				},
+				typographySettings: {
+					fluid: {
+						maxViewPortWidth: '1100px',
+					},
+				},
+				expected:
+					'clamp(70px, 4.375rem + ((1vw - 3.2px) * 7.051), 125px)',
+			},
+
+			{
+				message: 'returns clamp value where max is equal to size',
+				preset: {
+					size: '7.8125rem',
+					fluid: {
+						min: '4.375rem',
+						max: '7.8125rem',
+					},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)',
+			},
+
 			{
 				message:
 					'should return clamp value if min font size is greater than max',
@@ -431,4 +486,87 @@ describe( 'typography utils', () => {
 			} );
 		} );
 	} );
+
+	describe( 'typography utils', () => {
+		[
+			{
+				message:
+					'should return `undefined` when settings is `undefined`',
+				settings: undefined,
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `undefined` when typography is `undefined`',
+				settings: {},
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `undefined` when typography.fluid is `undefined`',
+				settings: { typography: {} },
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `false` when typography.fluid is disabled by `false`',
+				settings: { typography: { fluid: false } },
+				expected: { fluid: false },
+			},
+
+			{
+				message: 'should return `{}` when typography.fluid is empty',
+				settings: { typography: { fluid: {} } },
+				expected: { fluid: {} },
+			},
+
+			{
+				message:
+					'should return false when typography.fluid is disabled and layout.wideSize is defined',
+				settings: {
+					typography: { fluid: false },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: { fluid: false },
+			},
+
+			{
+				message:
+					'should return true when fluid is enabled by a boolean',
+				settings: { typography: { fluid: true } },
+				expected: { fluid: true },
+			},
+
+			{
+				message:
+					'should return fluid settings with merged `layout.wideSize`d',
+				settings: {
+					typography: { fluid: { minFontSize: '16px' } },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: {
+					fluid: { maxViewPortWidth: '1000rem', minFontSize: '16px' },
+				},
+			},
+
+			{
+				message:
+					'should prioritize fluid `maxViewPortWidth` over `layout.wideSize`',
+				settings: {
+					typography: { fluid: { maxViewPortWidth: '10px' } },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: { fluid: { maxViewPortWidth: '10px' } },
+			},
+		].forEach( ( { message, settings, expected } ) => {
+			it( `${ message }`, () => {
+				expect(
+					getFluidTypographyOptionsFromSettings( settings )
+				).toEqual( expected );
+			} );
+		} );
+	} );
 } );

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