@wordpress/block-editor 12.12.0 → 12.13.0

package/build-style/style-rtl.css

@@ -827,7 +827,7 @@
   outline: none;
 }
 .components-button.block-editor-block-mover-button:focus-visible::before {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 
@@ -1062,6 +1062,7 @@
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
   box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
 }
 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
   word-break: break-all;
@@ -3144,7 +3145,7 @@
   box-shadow: none;
 }
 .block-editor-url-popover .components-button.has-icon:not(:disabled):focus > svg {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 
@@ -3849,6 +3850,9 @@
 .block-editor-inserter__block-patterns-tabs div[role=listitem]:last-child {
   margin-top: auto;
 }
+.block-editor-inserter__block-patterns-tabs .block-editor-inserter__patterns-category {
+  padding-left: 4px;
+}
 
 .block-editor-inserter__patterns-category-dialog {
   background: #f0f0f0;
@@ -4066,17 +4070,20 @@
 .block-editor-inserter__media-tabs div[role=listitem]:last-child {
   margin-top: auto;
 }
-.block-editor-inserter__media-tabs__media-category.is-selected {
+.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category {
+  padding-left: 4px;
+}
+.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected {
   color: var(--wp-admin-theme-color);
   position: relative;
 }
-.block-editor-inserter__media-tabs__media-category.is-selected .components-flex-item {
+.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected .components-flex-item {
   filter: brightness(0.95);
 }
-.block-editor-inserter__media-tabs__media-category.is-selected svg {
+.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected svg {
   fill: var(--wp-admin-theme-color);
 }
-.block-editor-inserter__media-tabs__media-category.is-selected::after {
+.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected::after {
   content: "";
   position: absolute;
   top: 0;

package/build-style/style.css

@@ -827,7 +827,7 @@
   outline: none;
 }
 .components-button.block-editor-block-mover-button:focus-visible::before {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 
@@ -1062,6 +1062,7 @@
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
   box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
 }
 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
   word-break: break-all;
@@ -3145,7 +3146,7 @@
   box-shadow: none;
 }
 .block-editor-url-popover .components-button.has-icon:not(:disabled):focus > svg {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
 
@@ -3850,6 +3851,9 @@
 .block-editor-inserter__block-patterns-tabs div[role=listitem]:last-child {
   margin-top: auto;
 }
+.block-editor-inserter__block-patterns-tabs .block-editor-inserter__patterns-category {
+  padding-right: 4px;
+}
 
 .block-editor-inserter__patterns-category-dialog {
   background: #f0f0f0;
@@ -4067,17 +4071,20 @@
 .block-editor-inserter__media-tabs div[role=listitem]:last-child {
   margin-top: auto;
 }
-.block-editor-inserter__media-tabs__media-category.is-selected {
+.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category {
+  padding-right: 4px;
+}
+.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected {
   color: var(--wp-admin-theme-color);
   position: relative;
 }
-.block-editor-inserter__media-tabs__media-category.is-selected .components-flex-item {
+.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected .components-flex-item {
   filter: brightness(0.95);
 }
-.block-editor-inserter__media-tabs__media-category.is-selected svg {
+.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected svg {
   fill: var(--wp-admin-theme-color);
 }
-.block-editor-inserter__media-tabs__media-category.is-selected::after {
+.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected::after {
   content: "";
   position: absolute;
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.12.0",
+	"version": "12.13.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.44.0",
-		"@wordpress/api-fetch": "^6.41.0",
-		"@wordpress/blob": "^3.44.0",
-		"@wordpress/blocks": "^12.21.0",
-		"@wordpress/commands": "^0.15.0",
-		"@wordpress/components": "^25.10.0",
-		"@wordpress/compose": "^6.21.0",
-		"@wordpress/data": "^9.14.0",
-		"@wordpress/date": "^4.44.0",
-		"@wordpress/deprecated": "^3.44.0",
-		"@wordpress/dom": "^3.44.0",
-		"@wordpress/element": "^5.21.0",
-		"@wordpress/escape-html": "^2.44.0",
-		"@wordpress/hooks": "^3.44.0",
-		"@wordpress/html-entities": "^3.44.0",
-		"@wordpress/i18n": "^4.44.0",
-		"@wordpress/icons": "^9.35.0",
-		"@wordpress/is-shallow-equal": "^4.44.0",
-		"@wordpress/keyboard-shortcuts": "^4.21.0",
-		"@wordpress/keycodes": "^3.44.0",
-		"@wordpress/notices": "^4.12.0",
-		"@wordpress/preferences": "^3.21.0",
-		"@wordpress/private-apis": "^0.26.0",
-		"@wordpress/rich-text": "^6.21.0",
-		"@wordpress/style-engine": "^1.27.0",
-		"@wordpress/token-list": "^2.44.0",
-		"@wordpress/url": "^3.45.0",
-		"@wordpress/warning": "^2.44.0",
-		"@wordpress/wordcount": "^3.44.0",
+		"@wordpress/a11y": "^3.45.0",
+		"@wordpress/api-fetch": "^6.42.0",
+		"@wordpress/blob": "^3.45.0",
+		"@wordpress/blocks": "^12.22.0",
+		"@wordpress/commands": "^0.16.0",
+		"@wordpress/components": "^25.11.0",
+		"@wordpress/compose": "^6.22.0",
+		"@wordpress/data": "^9.15.0",
+		"@wordpress/date": "^4.45.0",
+		"@wordpress/deprecated": "^3.45.0",
+		"@wordpress/dom": "^3.45.0",
+		"@wordpress/element": "^5.22.0",
+		"@wordpress/escape-html": "^2.45.0",
+		"@wordpress/hooks": "^3.45.0",
+		"@wordpress/html-entities": "^3.45.0",
+		"@wordpress/i18n": "^4.45.0",
+		"@wordpress/icons": "^9.36.0",
+		"@wordpress/is-shallow-equal": "^4.45.0",
+		"@wordpress/keyboard-shortcuts": "^4.22.0",
+		"@wordpress/keycodes": "^3.45.0",
+		"@wordpress/notices": "^4.13.0",
+		"@wordpress/preferences": "^3.22.0",
+		"@wordpress/private-apis": "^0.27.0",
+		"@wordpress/rich-text": "^6.22.0",
+		"@wordpress/style-engine": "^1.28.0",
+		"@wordpress/token-list": "^2.45.0",
+		"@wordpress/url": "^3.46.0",
+		"@wordpress/warning": "^2.45.0",
+		"@wordpress/wordcount": "^3.45.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -71,12 +71,14 @@
 		"diff": "^4.0.2",
 		"dom-scroll-into-view": "^1.2.1",
 		"fast-deep-equal": "^3.1.3",
-		"inherits": "^2.0.3",
+		"memize": "^2.1.0",
+		"postcss": "^8.4.21",
+		"postcss-prefixwrap": "^1.41.0",
+		"postcss-urlrebase": "^1.0.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^4.5.1",
 		"rememo": "^4.0.2",
-		"remove-accents": "^0.5.0",
-		"traverse": "^0.6.6"
+		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -85,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f83bb1a71e8fa416131b81a9f282a72a1dc6c694"
+	"gitHead": "2a00e87b57b9c27ed2b9b0fd8d423ef3cada72c1"
 }

package/src/components/block-alignment-control/use-available-alignments.js

@@ -19,29 +19,43 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	if ( ! controls.includes( 'none' ) ) {
 		controls = [ 'none', ...controls ];
 	}
-	const {
-		wideControlsEnabled = false,
-		themeSupportsLayout,
-		isBlockBasedTheme,
-	} = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return {
-			wideControlsEnabled: settings.alignWide,
-			themeSupportsLayout: settings.supportsLayout,
-			isBlockBasedTheme: settings.__unstableIsBlockBasedTheme,
-		};
-	}, [] );
+	const isNoneOnly = controls.length === 1 && controls[ 0 ] === 'none';
+
+	const [ wideControlsEnabled, themeSupportsLayout, isBlockBasedTheme ] =
+		useSelect(
+			( select ) => {
+				// If `isNoneOnly` is true, we'll be returning early because there is
+				// nothing to filter on an empty array. We won't need the info from
+				// the `useSelect` but we must call it anyway because Rules of Hooks.
+				// So the callback returns early to avoid block editor subscription.
+				if ( isNoneOnly ) {
+					return [ false, false, false ];
+				}
+
+				const settings = select( blockEditorStore ).getSettings();
+				return [
+					settings.alignWide ?? false,
+					settings.supportsLayout,
+					settings.__unstableIsBlockBasedTheme,
+				];
+			},
+			[ isNoneOnly ]
+		);
 	const layout = useLayout();
+
+	if ( isNoneOnly ) {
+		return EMPTY_ARRAY;
+	}
+
 	const layoutType = getLayoutType( layout?.type );
-	const layoutAlignments = layoutType.getAlignments(
-		layout,
-		isBlockBasedTheme
-	);
 
 	if ( themeSupportsLayout ) {
-		const alignments = layoutAlignments.filter(
-			( { name: alignmentName } ) => controls.includes( alignmentName )
+		const layoutAlignments = layoutType.getAlignments(
+			layout,
+			isBlockBasedTheme
+		);
+		const alignments = layoutAlignments.filter( ( alignment ) =>
+			controls.includes( alignment.name )
 		);
 		// While we treat `none` as an alignment, we shouldn't return it if no
 		// other alignments exist.
@@ -55,25 +69,26 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) {
 		return EMPTY_ARRAY;
 	}
-	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
-	const enabledControls = controls
-		.filter(
-			( control ) =>
-				( layout.alignments || // Ignore the global wideAlignment check if the layout explicitely defines alignments.
-					wideControlsEnabled ||
-					! WIDE_CONTROLS.includes( control ) ) &&
-				availableAlignments.includes( control )
-		)
-		.map( ( enabledControl ) => ( { name: enabledControl } ) );
+
+	const alignments = controls
+		.filter( ( control ) => {
+			if ( layout.alignments ) {
+				return layout.alignments.includes( control );
+			}
+
+			if ( ! wideControlsEnabled && WIDE_CONTROLS.includes( control ) ) {
+				return false;
+			}
+
+			return DEFAULT_CONTROLS.includes( control );
+		} )
+		.map( ( name ) => ( { name } ) );
 
 	// While we treat `none` as an alignment, we shouldn't return it if no
 	// other alignments exist.
-	if (
-		enabledControls.length === 1 &&
-		enabledControls[ 0 ].name === 'none'
-	) {
+	if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
 		return EMPTY_ARRAY;
 	}
 
-	return enabledControls;
+	return alignments;
 }

package/src/components/block-list/block.native.js

@@ -38,9 +38,9 @@ import BlockInvalidWarning from './block-invalid-warning';
 import BlockOutline from './block-outline';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
-const emptyArray = [];
+const EMPTY_ARRAY = [];
 
 // Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference.
 const wrapperPropsCache = new WeakMap();
@@ -215,7 +215,7 @@ function BlockListBlock( {
 	const parentLayout = useLayout() || {};
 	const defaultColors = useMobileGlobalStylesColors();
 	const globalStyle = useGlobalStyles();
-	const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray;
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
 	const onRemove = useCallback(
 		() => removeBlock( clientId ),
@@ -257,7 +257,7 @@ function BlockListBlock( {
 			attributes,
 			defaultColors,
 			name,
-			fontSizes
+			fontSizes || EMPTY_ARRAY
 		);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [

package/src/components/block-list/layout.js

@@ -7,7 +7,7 @@ import { createContext, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { getLayoutType } from '../../layouts';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export const defaultLayout = { type: 'default' };
 
@@ -27,7 +27,7 @@ export function useLayout() {
 
 export function LayoutStyle( { layout = {}, css, ...props } ) {
 	const layoutType = getLayoutType( layout.type );
-	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
 
 	if ( layoutType ) {

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

@@ -58,7 +58,7 @@
 
 		&:focus,
 		&.is-active:focus {
-			box-shadow: inset 0 0 0 $border-width var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+			@include block-toolbar-button-style__focus();
 		}
 	}
 

package/src/components/border-radius-control/index.js

@@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
 import LinkedButton from './linked-button';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 import {
 	getAllValue,
 	getAllUnit,
@@ -67,8 +67,9 @@ export default function BorderRadiusControl( { onChange, values } ) {
 		)[ 1 ],
 	} );
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
 	} );
 
 	const unit = getAllUnit( selectedUnits );

package/src/components/color-palette/with-color-context.js

@@ -6,18 +6,18 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export default createHigherOrderComponent( ( WrappedComponent ) => {
 	return ( props ) => {
-		const colorsFeature = useSetting( 'color.palette' );
-		const disableCustomColorsFeature = ! useSetting( 'color.custom' );
-		const colors =
-			props.colors === undefined ? colorsFeature : props.colors;
-		const disableCustomColors =
-			props.disableCustomColors === undefined
-				? disableCustomColorsFeature
-				: props.disableCustomColors;
+		const [ colorsFeature, enableCustomColors ] = useSettings(
+			'color.palette',
+			'color.custom'
+		);
+		const {
+			colors = colorsFeature,
+			disableCustomColors = ! enableCustomColors,
+		} = props;
 		const hasColorsToChoose =
 			( colors && colors.length > 0 ) || ! disableCustomColors;
 		return (

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

@@ -13,7 +13,7 @@ import {
 	getColorObjectByAttributeValues,
 	getMostReadableColor,
 } from './utils';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 import { kebabCase } from '../../utils/object';
 
 /**
@@ -51,12 +51,11 @@ const withCustomColorPalette = ( colorsArray ) =>
 const withEditorColorPalette = () =>
 	createHigherOrderComponent(
 		( WrappedComponent ) => ( props ) => {
-			// Some color settings have a special handling for deprecated flags in `useSetting`,
-			// so we can't unwrap them by doing const { ... } = useSetting('color')
-			// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-			const userPalette = useSetting( 'color.palette.custom' );
-			const themePalette = useSetting( 'color.palette.theme' );
-			const defaultPalette = useSetting( 'color.palette.default' );
+			const [ userPalette, themePalette, defaultPalette ] = useSettings(
+				'color.palette.custom',
+				'color.palette.theme',
+				'color.palette.default'
+			);
 			const allColors = useMemo(
 				() => [
 					...( userPalette || [] ),

package/src/components/colors-gradients/control.js

@@ -18,7 +18,7 @@ import {
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 const colorsAndGradientKeys = [
 	'colors',
@@ -160,17 +160,20 @@ function ColorGradientControlInner( {
 }
 
 function ColorGradientControlSelect( props ) {
-	const colorGradientSettings = {};
-	colorGradientSettings.colors = useSetting( 'color.palette' );
-	colorGradientSettings.gradients = useSetting( 'color.gradients' );
-	colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );
-	colorGradientSettings.disableCustomGradients = ! useSetting(
+	const [ colors, gradients, customColors, customGradients ] = useSettings(
+		'color.palette',
+		'color.gradients',
+		'color.custom',
 		'color.customGradient'
 	);
 
 	return (
 		<ColorGradientControlInner
-			{ ...{ ...colorGradientSettings, ...props } }
+			colors={ colors }
+			gradients={ gradients }
+			disableCustomColors={ ! customColors }
+			disableCustomGradients={ ! customGradients }
+			{ ...props }
 		/>
 	);
 }

package/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js

@@ -7,7 +7,7 @@ import { _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 /**
  * Retrieves color and gradient related settings.
@@ -18,14 +18,34 @@ import useSetting from '../use-setting';
  * @return {Object} Color and gradient related settings.
  */
 export default function useMultipleOriginColorsAndGradients() {
+	const [
+		enableCustomColors,
+		customColors,
+		themeColors,
+		defaultColors,
+		shouldDisplayDefaultColors,
+		enableCustomGradients,
+		customGradients,
+		themeGradients,
+		defaultGradients,
+		shouldDisplayDefaultGradients,
+	] = useSettings(
+		'color.custom',
+		'color.palette.custom',
+		'color.palette.theme',
+		'color.palette.default',
+		'color.defaultPalette',
+		'color.customGradient',
+		'color.gradients.custom',
+		'color.gradients.theme',
+		'color.gradients.default',
+		'color.defaultGradients'
+	);
+
 	const colorGradientSettings = {
-		disableCustomColors: ! useSetting( 'color.custom' ),
-		disableCustomGradients: ! useSetting( 'color.customGradient' ),
+		disableCustomColors: ! enableCustomColors,
+		disableCustomGradients: ! enableCustomGradients,
 	};
-	const customColors = useSetting( 'color.palette.custom' );
-	const themeColors = useSetting( 'color.palette.theme' );
-	const defaultColors = useSetting( 'color.palette.default' );
-	const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' );
 
 	colorGradientSettings.colors = useMemo( () => {
 		const result = [];
@@ -62,18 +82,12 @@ export default function useMultipleOriginColorsAndGradients() {
 		}
 		return result;
 	}, [
-		defaultColors,
-		themeColors,
 		customColors,
+		themeColors,
+		defaultColors,
 		shouldDisplayDefaultColors,
 	] );
 
-	const customGradients = useSetting( 'color.gradients.custom' );
-	const themeGradients = useSetting( 'color.gradients.theme' );
-	const defaultGradients = useSetting( 'color.gradients.default' );
-	const shouldDisplayDefaultGradients = useSetting(
-		'color.defaultGradients'
-	);
 	colorGradientSettings.gradients = useMemo( () => {
 		const result = [];
 		if ( themeGradients && themeGradients.length ) {

package/src/components/font-family/index.js

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {
 	value = '',
@@ -15,7 +15,7 @@ export default function FontFamilyControl( {
 	fontFamilies,
 	...props
 } ) {
-	const blockLevelFontFamilies = useSetting( 'typography.fontFamilies' );
+	const [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );
 	if ( ! fontFamilies ) {
 		fontFamilies = blockLevelFontFamilies;
 	}

package/src/components/font-sizes/font-size-picker.js

@@ -6,17 +6,19 @@ import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 function FontSizePicker( props ) {
-	const fontSizes = useSetting( 'typography.fontSizes' );
-	const disableCustomFontSizes = ! useSetting( 'typography.customFontSize' );
+	const [ fontSizes, customFontSize ] = useSettings(
+		'typography.fontSizes',
+		'typography.customFontSize'
+	);
 
 	return (
 		<BaseFontSizePicker
 			{ ...props }
 			fontSizes={ fontSizes }
-			disableCustomFontSizes={ disableCustomFontSizes }
+			disableCustomFontSizes={ ! customFontSize }
 		/>
 	);
 }

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

@@ -8,7 +8,7 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import { getFontSize, getFontSizeClass } from './utils';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 const DEFAULT_FONT_SIZES = [];
 
@@ -52,13 +52,11 @@ export default ( ...fontSizeNames ) => {
 		compose( [
 			createHigherOrderComponent(
 				( WrappedComponent ) => ( props ) => {
-					const fontSizes =
-						useSetting( 'typography.fontSizes' ) ||
-						DEFAULT_FONT_SIZES;
+					const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 					return (
 						<WrappedComponent
 							{ ...props }
-							fontSizes={ fontSizes }
+							fontSizes={ fontSizes || DEFAULT_FONT_SIZES }
 						/>
 					);
 				},