From 02d9b61e2c9e51d275c1f840457d5dbee304c37b Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 11 Oct 2023 14:36:11 +0200 Subject: [PATCH 01/18] useSetting: optimize by not constructing path strings --- .../src/components/use-setting/index.js | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index 1ae672103015c..82ef0d24a523f 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -162,12 +162,12 @@ export default function useSetting( path ) { ); result = getValueFromObjectPath( - candidateAtts, - `settings.blocks.${ blockName }.${ normalizedPath }` + candidateAtts.settings?.blocks?.[ blockName ], + normalizedPath ) ?? getValueFromObjectPath( - candidateAtts, - `settings.${ normalizedPath }` + candidateAtts.settings, + normalizedPath ); if ( result !== undefined ) { // Stop the search for more distant ancestors and move on. @@ -179,11 +179,15 @@ export default function useSetting( path ) { // 2. Fall back to the settings from the block editor store (__experimentalFeatures). const settings = select( blockEditorStore ).getSettings(); if ( result === undefined ) { - const defaultsPath = `__experimentalFeatures.${ normalizedPath }`; - const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ normalizedPath }`; result = - getValueFromObjectPath( settings, blockPath ) ?? - getValueFromObjectPath( settings, defaultsPath ); + getValueFromObjectPath( + settings.__experimentalFeatures?.blocks?.[ blockName ], + normalizedPath + ) ?? + getValueFromObjectPath( + settings.__experimentalFeatures, + normalizedPath + ); } // Return if the setting was found in either the block instance or the store. From d157e182033aa19912a2b7ee2cdef829af3fa3bd Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 11 Oct 2023 14:50:53 +0200 Subject: [PATCH 02/18] useSetting: handle the case where clientId is null --- .../src/components/use-setting/index.js | 69 ++++++++++--------- 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index 82ef0d24a523f..f1116998348fa 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -107,7 +107,7 @@ const removeCustomPrefixes = ( path ) => { * ``` */ export default function useSetting( path ) { - const { name: blockName, clientId } = useBlockEditContext(); + const { name: blockName, clientId = null } = useBlockEditContext(); return useSelect( ( select ) => { @@ -136,26 +136,30 @@ export default function useSetting( path ) { // 1. Take settings from the block instance or its ancestors. // Start from the current block and work our way up the ancestors. - const candidates = [ - clientId, - ...select( blockEditorStore ).getBlockParents( + if ( clientId ) { + const candidates = [ clientId, - /* ascending */ true - ), - ]; - - for ( const candidateClientId of candidates ) { - const candidateBlockName = - select( blockEditorStore ).getBlockName( - candidateClientId - ); - if ( - hasBlockSupport( - candidateBlockName, - '__experimentalSettings', - false - ) - ) { + ...select( blockEditorStore ).getBlockParents( + clientId, + /* ascending */ true + ), + ]; + + for ( const candidateClientId of candidates ) { + const candidateBlockName = + select( blockEditorStore ).getBlockName( + candidateClientId + ); + if ( + ! hasBlockSupport( + candidateBlockName, + '__experimentalSettings', + false + ) + ) { + continue; + } + const candidateAtts = select( blockEditorStore ).getBlockAttributes( candidateClientId @@ -178,16 +182,18 @@ export default function useSetting( path ) { // 2. Fall back to the settings from the block editor store (__experimentalFeatures). const settings = select( blockEditorStore ).getSettings(); + if ( result === undefined && blockName ) { + result = getValueFromObjectPath( + settings.__experimentalFeatures?.blocks?.[ blockName ], + normalizedPath + ); + } + if ( result === undefined ) { - result = - getValueFromObjectPath( - settings.__experimentalFeatures?.blocks?.[ blockName ], - normalizedPath - ) ?? - getValueFromObjectPath( - settings.__experimentalFeatures, - normalizedPath - ); + result = getValueFromObjectPath( + settings.__experimentalFeatures, + normalizedPath + ); } // Return if the setting was found in either the block instance or the store. @@ -204,9 +210,8 @@ export default function useSetting( path ) { } // 3. Otherwise, use deprecated settings. - const deprecatedSettingsValue = deprecatedFlags[ normalizedPath ] - ? deprecatedFlags[ normalizedPath ]( settings ) - : undefined; + const deprecatedSettingsValue = + deprecatedFlags[ normalizedPath ]?.( settings ); if ( deprecatedSettingsValue !== undefined ) { return deprecatedSettingsValue; } From 501b03976663b7751a7285da324680c4f1c1c931 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Thu, 12 Oct 2023 12:19:28 +0200 Subject: [PATCH 03/18] getValueFromObjectPath: memoize splitting path into array, like lodash.get does --- package-lock.json | 2 ++ packages/block-editor/package.json | 1 + packages/block-editor/src/utils/object.js | 5 ++++- 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 535b581ec3870..4987c088829b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56019,6 +56019,7 @@ "dom-scroll-into-view": "^1.2.1", "fast-deep-equal": "^3.1.3", "inherits": "^2.0.3", + "memize": "^2.1.0", "react-autosize-textarea": "^7.1.0", "react-easy-crop": "^4.5.1", "rememo": "^4.0.2", @@ -69429,6 +69430,7 @@ "dom-scroll-into-view": "^1.2.1", "fast-deep-equal": "^3.1.3", "inherits": "^2.0.3", + "memize": "^2.1.0", "react-autosize-textarea": "^7.1.0", "react-easy-crop": "^4.5.1", "rememo": "^4.0.2", diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index feafe8f16e82e..225d9c987638a 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -72,6 +72,7 @@ "dom-scroll-into-view": "^1.2.1", "fast-deep-equal": "^3.1.3", "inherits": "^2.0.3", + "memize": "^2.1.0", "react-autosize-textarea": "^7.1.0", "react-easy-crop": "^4.5.1", "rememo": "^4.0.2", diff --git a/packages/block-editor/src/utils/object.js b/packages/block-editor/src/utils/object.js index ed81450e49ab9..e54990db1d066 100644 --- a/packages/block-editor/src/utils/object.js +++ b/packages/block-editor/src/utils/object.js @@ -2,6 +2,7 @@ * External dependencies */ import { paramCase } from 'change-case'; +import memoize from 'memize'; /** * Converts a path to an array of its fragments. @@ -112,6 +113,8 @@ export function setImmutably( object, path, value ) { return newObject; } +const stringToPath = memoize( ( path ) => path.split( '.' ) ); + /** * Helper util to return a value from a certain path of the object. * Path is specified as either: @@ -125,7 +128,7 @@ export function setImmutably( object, path, value ) { * @return {*} Value of the object property at the specified path. */ export const getValueFromObjectPath = ( object, path, defaultValue ) => { - const normalizedPath = Array.isArray( path ) ? path : path.split( '.' ); + const normalizedPath = Array.isArray( path ) ? path : stringToPath( path ); let value = object; normalizedPath.forEach( ( fieldName ) => { value = value?.[ fieldName ]; From ffd13a2fbcabb46927ae165cb5e6d0521e05ada2 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Thu, 12 Oct 2023 12:23:10 +0200 Subject: [PATCH 04/18] useSetting: memoize results of PATHS_WITH_MERGE transforms --- .../src/components/use-setting/index.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index f1116998348fa..d6c97dc821473 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -93,6 +93,18 @@ const removeCustomPrefixes = ( path ) => { return prefixedFlags[ path ] || path; }; +const mergeCache = new WeakMap(); +function mergeOrigins( value ) { + let result = mergeCache.get( value ); + if ( ! result ) { + result = [ 'default', 'theme', 'custom' ].flatMap( + ( key ) => value[ key ] ?? [] + ); + mergeCache.set( value, result ); + } + return result; +} + /** * Hook that retrieves the given setting for the block instance in use. * @@ -199,12 +211,7 @@ export default function useSetting( path ) { // Return if the setting was found in either the block instance or the store. if ( result !== undefined ) { if ( PATHS_WITH_MERGE[ normalizedPath ] ) { - return [ 'default', 'theme', 'custom' ].reduce( - ( acc, key ) => { - return acc.concat( result[ key ] ?? [] ); - }, - [] - ); + return mergeOrigins( result ); } return result; } From 5c88662244f21dc6796a04d94b3a1da692ccf85e Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Thu, 12 Oct 2023 12:45:03 +0200 Subject: [PATCH 05/18] Add useSettings hook for batched setting retrieval --- packages/block-editor/README.md | 14 ++ packages/block-editor/src/components/index.js | 2 +- .../src/components/index.native.js | 2 +- .../src/components/use-setting/index.js | 191 ++++++++++-------- 4 files changed, 120 insertions(+), 89 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 063a96384708c..5c6ad9d43a94d 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -962,6 +962,20 @@ _Returns_ - `any`: Returns the value defined for the setting. +### useSettings + +Hook that retrieves the given setting for the block instance in use. + +It looks up the settings first in the block instance hierarchy. If none is found, it'll look it up in the block editor store. + +_Parameters_ + +- _paths_ `string[]`: The path to the setting. + +_Returns_ + +- `any[]`: Returns the values defined for the settings. + ### Warning _Related_ diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 1622cecc150ed..86cf900c01523 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -165,7 +165,7 @@ export { useBlockEditingMode } from './block-editing-mode'; */ export { default as BlockEditorProvider } from './provider'; -export { default as useSetting } from './use-setting'; +export { useSettings, default as useSetting } from './use-setting'; export { useBlockCommands } from './use-block-commands'; /* diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index a89fdb9d6ac63..eebfcb31a9502 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -59,7 +59,7 @@ export { default as BlockCaption } from './block-caption'; export { default as Caption } from './caption'; export { default as PanelColorSettings } from './panel-color-settings'; export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings'; -export { default as useSetting } from './use-setting'; +export { useSettings, default as useSetting } from './use-setting'; export { RecursionProvider as __experimentalRecursionProvider, useHasRecursion as __experimentalUseHasRecursion, diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index d6c97dc821473..20815d8c237a9 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -6,6 +6,7 @@ import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE, hasBlockSupport, } from '@wordpress/blocks'; +import { useMemo } from '@wordpress/element'; import { applyFilters } from '@wordpress/hooks'; /** @@ -111,67 +112,63 @@ function mergeOrigins( value ) { * It looks up the settings first in the block instance hierarchy. * If none is found, it'll look it up in the block editor store. * - * @param {string} path The path to the setting. - * @return {any} Returns the value defined for the setting. - * @example - * ```js - * const isEnabled = useSetting( 'typography.dropCap' ); - * ``` + * @param {string[]} paths The path to the setting. + * @return {any[]} Returns the values defined for the settings. */ -export default function useSetting( path ) { +export function useSettings( paths ) { const { name: blockName, clientId = null } = useBlockEditContext(); + paths = useMemo( () => paths, paths ); + return useSelect( ( select ) => { - if ( blockedPaths.includes( path ) ) { - // eslint-disable-next-line no-console - console.warn( - 'Top level useSetting paths are disabled. Please use a subpath to query the information needed.' - ); - return undefined; - } - - // 0. Allow third parties to filter the block's settings at runtime. - let result = applyFilters( - 'blockEditor.useSetting.before', - undefined, - path, - clientId, - blockName - ); - - if ( undefined !== result ) { - return result; - } - - const normalizedPath = removeCustomPrefixes( path ); - - // 1. Take settings from the block instance or its ancestors. - // Start from the current block and work our way up the ancestors. - if ( clientId ) { - const candidates = [ - clientId, - ...select( blockEditorStore ).getBlockParents( + const candidates = clientId + ? [ clientId, - /* ascending */ true - ), - ]; - - for ( const candidateClientId of candidates ) { - const candidateBlockName = - select( blockEditorStore ).getBlockName( - candidateClientId - ); - if ( - ! hasBlockSupport( + ...select( blockEditorStore ).getBlockParents( + clientId, + /* ascending */ true + ), + ].filter( ( candidateClientId ) => { + const candidateBlockName = + select( blockEditorStore ).getBlockName( + candidateClientId + ); + return hasBlockSupport( candidateBlockName, '__experimentalSettings', false - ) - ) { - continue; - } + ); + } ) + : []; + + return paths.map( ( path ) => { + if ( blockedPaths.includes( path ) ) { + // eslint-disable-next-line no-console + console.warn( + 'Top level useSetting paths are disabled. Please use a subpath to query the information needed.' + ); + return undefined; + } + + // 0. Allow third parties to filter the block's settings at runtime. + let result = applyFilters( + 'blockEditor.useSetting.before', + undefined, + path, + clientId, + blockName + ); + + if ( undefined !== result ) { + return result; + } + const normalizedPath = removeCustomPrefixes( path ); + + // 1. Take settings from the block instance or its ancestors. + // Start from the current block and work our way up the ancestors. + for ( const candidateClientId of candidates ) { const candidateAtts = select( blockEditorStore ).getBlockAttributes( candidateClientId @@ -190,45 +187,65 @@ export default function useSetting( path ) { break; } } - } - - // 2. Fall back to the settings from the block editor store (__experimentalFeatures). - const settings = select( blockEditorStore ).getSettings(); - if ( result === undefined && blockName ) { - result = getValueFromObjectPath( - settings.__experimentalFeatures?.blocks?.[ blockName ], - normalizedPath - ); - } - if ( result === undefined ) { - result = getValueFromObjectPath( - settings.__experimentalFeatures, - normalizedPath - ); - } + // 2. Fall back to the settings from the block editor store (__experimentalFeatures). + const settings = select( blockEditorStore ).getSettings(); + if ( result === undefined && blockName ) { + result = getValueFromObjectPath( + settings.__experimentalFeatures?.blocks?.[ blockName ], + normalizedPath + ); + } + + if ( result === undefined ) { + result = getValueFromObjectPath( + settings.__experimentalFeatures, + normalizedPath + ); + } + + // Return if the setting was found in either the block instance or the store. + if ( result !== undefined ) { + if ( PATHS_WITH_MERGE[ normalizedPath ] ) { + return mergeOrigins( result ); + } + return result; + } - // Return if the setting was found in either the block instance or the store. - if ( result !== undefined ) { - if ( PATHS_WITH_MERGE[ normalizedPath ] ) { - return mergeOrigins( result ); + // 3. Otherwise, use deprecated settings. + const deprecatedSettingsValue = + deprecatedFlags[ normalizedPath ]?.( settings ); + if ( deprecatedSettingsValue !== undefined ) { + return deprecatedSettingsValue; } - return result; - } - - // 3. Otherwise, use deprecated settings. - const deprecatedSettingsValue = - deprecatedFlags[ normalizedPath ]?.( settings ); - if ( deprecatedSettingsValue !== undefined ) { - return deprecatedSettingsValue; - } - - // 4. Fallback for typography.dropCap: - // This is only necessary to support typography.dropCap. - // when __experimentalFeatures are not present (core without plugin). - // To remove when __experimentalFeatures are ported to core. - return normalizedPath === 'typography.dropCap' ? true : undefined; + + // 4. Fallback for typography.dropCap: + // This is only necessary to support typography.dropCap. + // when __experimentalFeatures are not present (core without plugin). + // To remove when __experimentalFeatures are ported to core. + return normalizedPath === 'typography.dropCap' + ? true + : undefined; + } ); }, - [ blockName, clientId, path ] + [ blockName, clientId, paths ] ); } + +/** + * Hook that retrieves the given setting for the block instance in use. + * + * It looks up the settings first in the block instance hierarchy. + * If none is found, it'll look it up in the block editor store. + * + * @param {string} path The path to the setting. + * @return {any} Returns the value defined for the setting. + * @example + * ```js + * const isEnabled = useSetting( 'typography.dropCap' ); + * ``` + */ +export default function useSetting( path ) { + const [ value ] = useSettings( [ path ] ); + return value; +} From 09becfcc4b83724e26e0c923b032b59bc7879b01 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Thu, 12 Oct 2023 13:24:23 +0200 Subject: [PATCH 06/18] Rewrite usages of useSetting to useSettings --- .../color-palette/with-color-context.js | 18 +-- .../components/colors-gradients/control.js | 21 +-- ...se-multiple-origin-colors-and-gradients.js | 44 ++++-- .../src/components/colors/with-colors.js | 13 +- .../components/font-sizes/font-size-picker.js | 10 +- .../src/components/gradients/use-gradient.js | 14 +- packages/block-editor/src/hooks/color.js | 11 +- packages/block-editor/src/hooks/duotone.js | 32 +++-- packages/block-editor/src/hooks/position.js | 8 +- .../block-editor/src/hooks/use-color-props.js | 35 +++-- packages/block-editor/src/hooks/utils.js | 131 ++++++++++++------ 11 files changed, 211 insertions(+), 126 deletions(-) diff --git a/packages/block-editor/src/components/color-palette/with-color-context.js b/packages/block-editor/src/components/color-palette/with-color-context.js index 4c60a44b9348e..2c6857d5a16fd 100644 --- a/packages/block-editor/src/components/color-palette/with-color-context.js +++ b/packages/block-editor/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-setting'; 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 ( diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 14fb9841e5f92..7f07de37fb367 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -18,7 +18,7 @@ import { /** * Internal dependencies */ -import useSetting from '../use-setting'; +import { useSettings } from '../use-setting'; 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( - 'color.customGradient' - ); + const [ colors, gradients, customColors, customGradients ] = useSettings( [ + 'color.palette', + 'color.gradients', + 'color.custom', + 'color.customGradient', + ] ); return ( ); } diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js index 917ca04783de1..041ca4f7d0fe2 100644 --- a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js +++ b/packages/block-editor/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-setting'; /** * 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 ) { diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js index e2fbd0b89b5ad..6edc4cd53e087 100644 --- a/packages/block-editor/src/components/colors/with-colors.js +++ b/packages/block-editor/src/components/colors/with-colors.js @@ -13,7 +13,7 @@ import { getColorObjectByAttributeValues, getMostReadableColor, } from './utils'; -import useSetting from '../use-setting'; +import { useSettings } from '../use-setting'; 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 || [] ), diff --git a/packages/block-editor/src/components/font-sizes/font-size-picker.js b/packages/block-editor/src/components/font-sizes/font-size-picker.js index 9f195310367fc..60497449b1f31 100644 --- a/packages/block-editor/src/components/font-sizes/font-size-picker.js +++ b/packages/block-editor/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-setting'; function FontSizePicker( props ) { - const fontSizes = useSetting( 'typography.fontSizes' ); - const disableCustomFontSizes = ! useSetting( 'typography.customFontSize' ); + const [ fontSizes, customFontSizes ] = useSettings( [ + 'typography.fontSizes', + 'typography.customFontSize', + ] ); return ( ); } diff --git a/packages/block-editor/src/components/gradients/use-gradient.js b/packages/block-editor/src/components/gradients/use-gradient.js index e899f9c919770..183f9d7f3bef1 100644 --- a/packages/block-editor/src/components/gradients/use-gradient.js +++ b/packages/block-editor/src/components/gradients/use-gradient.js @@ -8,7 +8,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; * Internal dependencies */ import { useBlockEditContext } from '../block-edit'; -import useSetting from '../use-setting'; +import { useSettings } from '../use-setting'; import { store as blockEditorStore } from '../../store'; export function __experimentalGetGradientClass( gradientSlug ) { @@ -60,9 +60,15 @@ export function __experimentalUseGradient( { } = {} ) { const { clientId } = useBlockEditContext(); - const userGradientPalette = useSetting( 'color.gradients.custom' ); - const themeGradientPalette = useSetting( 'color.gradients.theme' ); - const defaultGradientPalette = useSetting( 'color.gradients.default' ); + const [ + userGradientPalette, + themeGradientPalette, + defaultGradientPalette, + ] = useSettings( [ + 'color.gradients.custom', + 'color.gradients.theme', + 'color.gradients.default', + ] ); const allGradients = useMemo( () => [ ...( userGradientPalette || [] ), diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index a20c2a98b5f1d..8c0e047744a84 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -25,7 +25,7 @@ import { shouldSkipSerialization, useBlockSettings, } from './utils'; -import useSetting from '../components/use-setting'; +import { useSettings } from '../components/use-setting'; import InspectorControls from '../components/inspector-controls'; import { useHasColorPanel, @@ -368,9 +368,12 @@ export const withColorPaletteStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; const { backgroundColor, textColor } = attributes; - 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 colors = useMemo( () => [ ...( userPalette || [] ), diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 39a8979782a0c..eebd5bb32569b 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -25,7 +25,7 @@ import { BlockControls, InspectorControls, __experimentalDuotoneControl as DuotoneControl, - useSetting, + useSettings, } from '../components'; import { getDuotoneFilter, @@ -56,20 +56,20 @@ const isSafari = extend( [ namesPlugin ] ); function useMultiOriginPresets( { presetSetting, defaultSetting } ) { - const disableDefault = ! useSetting( defaultSetting ); - const userPresets = - useSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY; - const themePresets = - useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY; - const defaultPresets = - useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY; + const [ enableDefault, userPresets, themePresets, defaultPresets ] = + useSettings( [ + defaultSetting, + `${ presetSetting }.custom`, + `${ presetSetting }.theme`, + `${ presetSetting }.default`, + ] ); return useMemo( () => [ - ...userPresets, - ...themePresets, - ...( disableDefault ? EMPTY_ARRAY : defaultPresets ), + ...( userPresets || EMPTY_ARRAY ), + ...( themePresets || EMPTY_ARRAY ), + ...( ( enableDefault && defaultPresets ) || EMPTY_ARRAY ), ], - [ disableDefault, userPresets, themePresets, defaultPresets ] + [ enableDefault, userPresets, themePresets, defaultPresets ] ); } @@ -111,9 +111,13 @@ function DuotonePanel( { attributes, setAttributes, name } ) { presetSetting: 'color.palette', defaultSetting: 'color.defaultPalette', } ); - const disableCustomColors = ! useSetting( 'color.custom' ); + const [ enableCustomColors, enableCustomDuotone ] = useSettings( [ + 'color.custom', + 'color.customDuotone', + ] ); + const disableCustomColors = ! enableCustomColors; const disableCustomDuotone = - ! useSetting( 'color.customDuotone' ) || + ! enableCustomDuotone || ( colorPalette?.length === 0 && disableCustomColors ); if ( duotonePalette?.length === 0 && disableCustomDuotone ) { diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 7c1bff6e99692..777edf054506d 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -26,7 +26,7 @@ import { addFilter } from '@wordpress/hooks'; * Internal dependencies */ import BlockList from '../components/block-list'; -import useSetting from '../components/use-setting'; +import { useSettings } from '../components/use-setting'; import InspectorControls from '../components/inspector-controls'; import useBlockDisplayInformation from '../components/use-block-display-information'; import { cleanEmptyObject } from './utils'; @@ -197,8 +197,10 @@ export function resetPosition( { attributes = {}, setAttributes } ) { * @return {boolean} Whether padding setting is disabled. */ export function useIsPositionDisabled( { name: blockName } = {} ) { - const allowFixed = useSetting( 'position.fixed' ); - const allowSticky = useSetting( 'position.sticky' ); + const [ allowFixed, allowSticky ] = useSettings( [ + 'position.fixed', + 'position.sticky', + ] ); const isDisabled = ! allowFixed && ! allowSticky; return ! hasPositionSupport( blockName ) || isDisabled; diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js index 77dedf19a28bd..2113532f4aad0 100644 --- a/packages/block-editor/src/hooks/use-color-props.js +++ b/packages/block-editor/src/hooks/use-color-props.js @@ -20,7 +20,7 @@ import { __experimentalGetGradientClass, getGradientValueBySlug, } from '../components/gradients'; -import useSetting from '../components/use-setting'; +import { useSettings } from '../components/use-setting'; // The code in this file has largely been lifted from the color block support // hook. @@ -73,8 +73,6 @@ export function getColorClassesAndStyles( attributes ) { }; } -const EMPTY_OBJECT = {}; - /** * Determines the color related props for a block derived from its color block * support attributes. @@ -89,13 +87,22 @@ const EMPTY_OBJECT = {}; export function useColorProps( attributes ) { const { backgroundColor, textColor, gradient } = attributes; - // 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 gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT; + const [ + userPalette, + themePalette, + defaultPalette, + userGradients, + themeGradients, + defaultGradients, + ] = useSettings( [ + 'color.palette.custom', + 'color.palette.theme', + 'color.palette.default', + 'color.gradients.custom', + 'color.gradients.theme', + 'color.gradients.default', + ] ); + const colors = useMemo( () => [ ...( userPalette || [] ), @@ -106,11 +113,11 @@ export function useColorProps( attributes ) { ); const gradients = useMemo( () => [ - ...( gradientsPerOrigin?.custom || [] ), - ...( gradientsPerOrigin?.theme || [] ), - ...( gradientsPerOrigin?.default || [] ), + ...( userGradients || [] ), + ...( themeGradients || [] ), + ...( defaultGradients || [] ), ], - [ gradientsPerOrigin ] + [ userGradients, themeGradients, defaultGradients ] ); const colorProps = getColorClassesAndStyles( attributes ); diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index 8e0d422c5fbec..d1b29e31eceaa 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -7,7 +7,7 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ -import { useSetting } from '../components'; +import { useSettings } from '../components'; import { useSettingsForBlockElement } from '../components/global-styles/hooks'; import { getValueFromObjectPath, setImmutably } from '../utils/object'; @@ -126,48 +126,93 @@ export function shouldSkipSerialization( blockType, featureSet, feature ) { * @return {Object} Settings object. */ export function useBlockSettings( name, parentLayout ) { - const fontFamilies = useSetting( 'typography.fontFamilies' ); - const fontSizes = useSetting( 'typography.fontSizes' ); - const customFontSize = useSetting( 'typography.customFontSize' ); - const fontStyle = useSetting( 'typography.fontStyle' ); - const fontWeight = useSetting( 'typography.fontWeight' ); - const lineHeight = useSetting( 'typography.lineHeight' ); - const textColumns = useSetting( 'typography.textColumns' ); - const textDecoration = useSetting( 'typography.textDecoration' ); - const writingMode = useSetting( 'typography.writingMode' ); - const textTransform = useSetting( 'typography.textTransform' ); - const letterSpacing = useSetting( 'typography.letterSpacing' ); - const padding = useSetting( 'spacing.padding' ); - const margin = useSetting( 'spacing.margin' ); - const blockGap = useSetting( 'spacing.blockGap' ); - const spacingSizes = useSetting( 'spacing.spacingSizes' ); - const units = useSetting( 'spacing.units' ); - const minHeight = useSetting( 'dimensions.minHeight' ); - const layout = useSetting( 'layout' ); - const borderColor = useSetting( 'border.color' ); - const borderRadius = useSetting( 'border.radius' ); - const borderStyle = useSetting( 'border.style' ); - const borderWidth = useSetting( 'border.width' ); - const customColorsEnabled = useSetting( 'color.custom' ); - const customColors = useSetting( 'color.palette.custom' ); - const customDuotone = useSetting( 'color.customDuotone' ); - const themeColors = useSetting( 'color.palette.theme' ); - const defaultColors = useSetting( 'color.palette.default' ); - const defaultPalette = useSetting( 'color.defaultPalette' ); - const defaultDuotone = useSetting( 'color.defaultDuotone' ); - const userDuotonePalette = useSetting( 'color.duotone.custom' ); - const themeDuotonePalette = useSetting( 'color.duotone.theme' ); - const defaultDuotonePalette = useSetting( 'color.duotone.default' ); - const userGradientPalette = useSetting( 'color.gradients.custom' ); - const themeGradientPalette = useSetting( 'color.gradients.theme' ); - const defaultGradientPalette = useSetting( 'color.gradients.default' ); - const defaultGradients = useSetting( 'color.defaultGradients' ); - const areCustomGradientsEnabled = useSetting( 'color.customGradient' ); - const isBackgroundEnabled = useSetting( 'color.background' ); - const isLinkEnabled = useSetting( 'color.link' ); - const isTextEnabled = useSetting( 'color.text' ); - const isHeadingEnabled = useSetting( 'color.heading' ); - const isButtonEnabled = useSetting( 'color.button' ); + const [ + fontFamilies, + fontSizes, + customFontSize, + fontStyle, + fontWeight, + lineHeight, + textColumns, + textDecoration, + writingMode, + textTransform, + letterSpacing, + padding, + margin, + blockGap, + spacingSizes, + units, + minHeight, + layout, + borderColor, + borderRadius, + borderStyle, + borderWidth, + customColorsEnabled, + customColors, + customDuotone, + themeColors, + defaultColors, + defaultPalette, + defaultDuotone, + userDuotonePalette, + themeDuotonePalette, + defaultDuotonePalette, + userGradientPalette, + themeGradientPalette, + defaultGradientPalette, + defaultGradients, + areCustomGradientsEnabled, + isBackgroundEnabled, + isLinkEnabled, + isTextEnabled, + isHeadingEnabled, + isButtonEnabled, + ] = useSettings( [ + 'typography.fontFamilies', + 'typography.fontSizes', + 'typography.customFontSize', + 'typography.fontStyle', + 'typography.fontWeight', + 'typography.lineHeight', + 'typography.textColumns', + 'typography.textDecoration', + 'typography.writingMode', + 'typography.textTransform', + 'typography.letterSpacing', + 'spacing.padding', + 'spacing.margin', + 'spacing.blockGap', + 'spacing.spacingSizes', + 'spacing.units', + 'dimensions.minHeight', + 'layout', + 'border.color', + 'border.radius', + 'border.style', + 'border.width', + 'color.custom', + 'color.palette.custom', + 'color.customDuotone', + 'color.palette.theme', + 'color.palette.default', + 'color.defaultPalette', + 'color.defaultDuotone', + 'color.duotone.custom', + 'color.duotone.theme', + 'color.duotone.default', + 'color.gradients.custom', + 'color.gradients.theme', + 'color.gradients.default', + 'color.defaultGradients', + 'color.customGradient', + 'color.background', + 'color.link', + 'color.text', + 'color.heading', + 'color.button', + ] ); const rawSettings = useMemo( () => { return { From bf20388c8dec8574e49094c75440bb128de733f8 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Fri, 13 Oct 2023 12:05:51 +0200 Subject: [PATCH 07/18] Fix unit tests for useSetting, run hooks inside React render --- .../src/components/use-setting/test/index.js | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/use-setting/test/index.js b/packages/block-editor/src/components/use-setting/test/index.js index 1c625c8a1969c..e4aa314970133 100644 --- a/packages/block-editor/src/components/use-setting/test/index.js +++ b/packages/block-editor/src/components/use-setting/test/index.js @@ -1,8 +1,14 @@ +/** + * External dependencies + */ +import { render } from '@testing-library/react'; + /** * WordPress dependencies */ import { addFilter, removeFilter } from '@wordpress/hooks'; import { useSelect } from '@wordpress/data'; +import { useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -38,6 +44,18 @@ const mockCurrentBlockContext = ( ); }; +function runHook( hookCb ) { + let storedResult; + function TestHook() { + const result = hookCb(); + useEffect( () => { + storedResult = result; + }, [ result ] ); + } + render( ); + return storedResult; +} + describe( 'useSetting', () => { beforeEach( () => { setupSelectMock(); @@ -59,7 +77,8 @@ describe( 'useSetting', () => { name: 'core/test-block', } ); - expect( useSetting( 'layout.contentSize' ) ).toBe( '840px' ); + const result = runHook( () => useSetting( 'layout.contentSize' ) ); + expect( result ).toBe( '840px' ); } ); it( 'uses blockEditor.useSetting.before hook override', () => { @@ -89,7 +108,8 @@ describe( 'useSetting', () => { } ); - expect( useSetting( 'layout.contentSize' ) ).toBe( '960px' ); + const result = runHook( () => useSetting( 'layout.contentSize' ) ); + expect( result ).toBe( '960px' ); removeFilter( 'blockEditor.useSetting.before', From 938b1ff63dc84c21b50ab9fdc44ca02477afbd1c Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Fri, 13 Oct 2023 13:27:58 +0200 Subject: [PATCH 08/18] Fix docs plural/singular --- packages/block-editor/README.md | 8 ++++---- .../block-editor/src/components/use-setting/index.js | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 5c6ad9d43a94d..ae89afc934dcf 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -946,7 +946,7 @@ _Parameters_ Hook that retrieves the given setting for the block instance in use. -It looks up the settings first in the block instance hierarchy. If none is found, it'll look it up in the block editor store. +It looks up the setting first in the block instance hierarchy. If none is found, it'll look it up in the block editor settings. _Usage_ @@ -964,13 +964,13 @@ _Returns_ ### useSettings -Hook that retrieves the given setting for the block instance in use. +Hook that retrieves the given settings for the block instance in use. -It looks up the settings first in the block instance hierarchy. If none is found, it'll look it up in the block editor store. +It looks up the settings first in the block instance hierarchy. If none are found, it'll look them up in the block editor settings. _Parameters_ -- _paths_ `string[]`: The path to the setting. +- _paths_ `string[]`: The paths to the settings. _Returns_ diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index 20815d8c237a9..d42dcbf0db222 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -107,12 +107,12 @@ function mergeOrigins( value ) { } /** - * Hook that retrieves the given setting for the block instance in use. + * Hook that retrieves the given settings for the block instance in use. * * It looks up the settings first in the block instance hierarchy. - * If none is found, it'll look it up in the block editor store. + * If none are found, it'll look them up in the block editor settings. * - * @param {string[]} paths The path to the setting. + * @param {string[]} paths The paths to the settings. * @return {any[]} Returns the values defined for the settings. */ export function useSettings( paths ) { @@ -235,8 +235,8 @@ export function useSettings( paths ) { /** * Hook that retrieves the given setting for the block instance in use. * - * It looks up the settings first in the block instance hierarchy. - * If none is found, it'll look it up in the block editor store. + * It looks up the setting first in the block instance hierarchy. + * If none is found, it'll look it up in the block editor settings. * * @param {string} path The path to the setting. * @return {any} Returns the value defined for the setting. From 97408682da20494f40794a16c863363c68965ddb Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Mon, 16 Oct 2023 15:20:47 +0200 Subject: [PATCH 09/18] Refactor to vararg paths --- .../components/color-palette/with-color-context.js | 6 +++--- .../src/components/colors-gradients/control.js | 6 +++--- .../use-multiple-origin-colors-and-gradients.js | 6 +++--- .../src/components/colors/with-colors.js | 6 +++--- .../src/components/font-sizes/font-size-picker.js | 6 +++--- .../src/components/gradients/use-gradient.js | 6 +++--- .../block-editor/src/components/use-setting/index.js | 5 +++-- packages/block-editor/src/hooks/color.js | 6 +++--- packages/block-editor/src/hooks/duotone.js | 12 ++++++------ packages/block-editor/src/hooks/position.js | 6 +++--- packages/block-editor/src/hooks/use-color-props.js | 6 +++--- packages/block-editor/src/hooks/utils.js | 6 +++--- 12 files changed, 39 insertions(+), 38 deletions(-) diff --git a/packages/block-editor/src/components/color-palette/with-color-context.js b/packages/block-editor/src/components/color-palette/with-color-context.js index 2c6857d5a16fd..f7a906c61c78a 100644 --- a/packages/block-editor/src/components/color-palette/with-color-context.js +++ b/packages/block-editor/src/components/color-palette/with-color-context.js @@ -10,10 +10,10 @@ import { useSettings } from '../use-setting'; export default createHigherOrderComponent( ( WrappedComponent ) => { return ( props ) => { - const [ colorsFeature, enableCustomColors ] = useSettings( [ + const [ colorsFeature, enableCustomColors ] = useSettings( 'color.palette', - 'color.custom', - ] ); + 'color.custom' + ); const { colors = colorsFeature, disableCustomColors = ! enableCustomColors, diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 7f07de37fb367..b22e57b618f9b 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -160,12 +160,12 @@ function ColorGradientControlInner( { } function ColorGradientControlSelect( props ) { - const [ colors, gradients, customColors, customGradients ] = useSettings( [ + const [ colors, gradients, customColors, customGradients ] = useSettings( 'color.palette', 'color.gradients', 'color.custom', - 'color.customGradient', - ] ); + 'color.customGradient' + ); return ( const withEditorColorPalette = () => createHigherOrderComponent( ( WrappedComponent ) => ( props ) => { - const [ userPalette, themePalette, defaultPalette ] = useSettings( [ + const [ userPalette, themePalette, defaultPalette ] = useSettings( 'color.palette.custom', 'color.palette.theme', - 'color.palette.default', - ] ); + 'color.palette.default' + ); const allColors = useMemo( () => [ ...( userPalette || [] ), diff --git a/packages/block-editor/src/components/font-sizes/font-size-picker.js b/packages/block-editor/src/components/font-sizes/font-size-picker.js index 60497449b1f31..a0f2367b24a15 100644 --- a/packages/block-editor/src/components/font-sizes/font-size-picker.js +++ b/packages/block-editor/src/components/font-sizes/font-size-picker.js @@ -9,10 +9,10 @@ import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components'; import { useSettings } from '../use-setting'; function FontSizePicker( props ) { - const [ fontSizes, customFontSizes ] = useSettings( [ + const [ fontSizes, customFontSizes ] = useSettings( 'typography.fontSizes', - 'typography.customFontSize', - ] ); + 'typography.customFontSize' + ); return ( [ ...( userGradientPalette || [] ), diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index d42dcbf0db222..cdcde393b6034 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -115,9 +115,10 @@ function mergeOrigins( value ) { * @param {string[]} paths The paths to the settings. * @return {any[]} Returns the values defined for the settings. */ -export function useSettings( paths ) { +export function useSettings( ...paths ) { const { name: blockName, clientId = null } = useBlockEditContext(); + // eslint-disable-next-line react-hooks/exhaustive-deps paths = useMemo( () => paths, paths ); return useSelect( @@ -246,6 +247,6 @@ export function useSettings( paths ) { * ``` */ export default function useSetting( path ) { - const [ value ] = useSettings( [ path ] ); + const [ value ] = useSettings( path ); return value; } diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 8c0e047744a84..752b8ab4b9d5c 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -368,11 +368,11 @@ export const withColorPaletteStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; const { backgroundColor, textColor } = attributes; - const [ userPalette, themePalette, defaultPalette ] = useSettings( [ + const [ userPalette, themePalette, defaultPalette ] = useSettings( 'color.palette.custom', 'color.palette.theme', - 'color.palette.default', - ] ); + 'color.palette.default' + ); const colors = useMemo( () => [ diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index eebd5bb32569b..1c46246d10641 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -57,12 +57,12 @@ extend( [ namesPlugin ] ); function useMultiOriginPresets( { presetSetting, defaultSetting } ) { const [ enableDefault, userPresets, themePresets, defaultPresets ] = - useSettings( [ + useSettings( defaultSetting, `${ presetSetting }.custom`, `${ presetSetting }.theme`, - `${ presetSetting }.default`, - ] ); + `${ presetSetting }.default` + ); return useMemo( () => [ ...( userPresets || EMPTY_ARRAY ), @@ -111,10 +111,10 @@ function DuotonePanel( { attributes, setAttributes, name } ) { presetSetting: 'color.palette', defaultSetting: 'color.defaultPalette', } ); - const [ enableCustomColors, enableCustomDuotone ] = useSettings( [ + const [ enableCustomColors, enableCustomDuotone ] = useSettings( 'color.custom', - 'color.customDuotone', - ] ); + 'color.customDuotone' + ); const disableCustomColors = ! enableCustomColors; const disableCustomDuotone = ! enableCustomDuotone || diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 777edf054506d..941710eb0628a 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -197,10 +197,10 @@ export function resetPosition( { attributes = {}, setAttributes } ) { * @return {boolean} Whether padding setting is disabled. */ export function useIsPositionDisabled( { name: blockName } = {} ) { - const [ allowFixed, allowSticky ] = useSettings( [ + const [ allowFixed, allowSticky ] = useSettings( 'position.fixed', - 'position.sticky', - ] ); + 'position.sticky' + ); const isDisabled = ! allowFixed && ! allowSticky; return ! hasPositionSupport( blockName ) || isDisabled; diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js index 2113532f4aad0..a753a2154e0ed 100644 --- a/packages/block-editor/src/hooks/use-color-props.js +++ b/packages/block-editor/src/hooks/use-color-props.js @@ -94,14 +94,14 @@ export function useColorProps( attributes ) { userGradients, themeGradients, defaultGradients, - ] = useSettings( [ + ] = useSettings( 'color.palette.custom', 'color.palette.theme', 'color.palette.default', 'color.gradients.custom', 'color.gradients.theme', - 'color.gradients.default', - ] ); + 'color.gradients.default' + ); const colors = useMemo( () => [ diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index d1b29e31eceaa..e7c71ea5551f8 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -169,7 +169,7 @@ export function useBlockSettings( name, parentLayout ) { isTextEnabled, isHeadingEnabled, isButtonEnabled, - ] = useSettings( [ + ] = useSettings( 'typography.fontFamilies', 'typography.fontSizes', 'typography.customFontSize', @@ -211,8 +211,8 @@ export function useBlockSettings( name, parentLayout ) { 'color.link', 'color.text', 'color.heading', - 'color.button', - ] ); + 'color.button' + ); const rawSettings = useMemo( () => { return { From 79e62a3cf9eca951a806dada1f9ba4a11986eb14 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Tue, 17 Oct 2023 09:23:39 +0200 Subject: [PATCH 10/18] Group block: remove unused usedLayout variable --- packages/block-library/src/group/edit.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 0f24efe3b0233..4d5354eff0180 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -7,7 +7,6 @@ import { useBlockProps, InspectorControls, useInnerBlocksProps, - useSetting, store as blockEditorStore, } from '@wordpress/block-editor'; import { SelectControl } from '@wordpress/components'; @@ -98,11 +97,7 @@ function GroupEdit( { } = attributes; // Layout settings. - const defaultLayout = useSetting( 'layout' ) || {}; - const usedLayout = ! layout?.type - ? { ...defaultLayout, ...layout, type: 'default' } - : { ...defaultLayout, ...layout }; - const { type = 'default' } = usedLayout; + const { type = 'default' } = layout; const layoutSupportEnabled = themeSupportsLayout || type === 'flex' || type === 'grid'; @@ -112,7 +107,7 @@ function GroupEdit( { } ); const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( { attributes, - usedLayoutType: usedLayout?.type, + usedLayoutType: type, hasInnerBlocks, } ); From c994be12d25097afac64862e9816293964bf8537 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Tue, 17 Oct 2023 12:02:48 +0200 Subject: [PATCH 11/18] Migrate all remaining usages of useSetting --- .../src/components/block-list/block.native.js | 8 +++---- .../src/components/block-list/layout.js | 4 ++-- .../components/border-radius-control/index.js | 5 +++-- .../src/components/font-family/index.js | 4 ++-- .../components/font-sizes/with-font-sizes.js | 8 +++---- .../src/components/height-control/index.js | 5 +++-- packages/block-editor/src/components/index.js | 2 +- .../src/components/inner-blocks/index.js | 4 ++-- .../letter-spacing-control/index.js | 5 +++-- .../hooks/use-spacing-sizes.js | 12 ++++++----- .../input-controls/spacing-input-control.js | 5 +++-- .../src/components/unit-control/index.js | 11 +++------- .../src/components/use-setting/index.js | 2 +- packages/block-editor/src/hooks/background.js | 16 +++++++------- packages/block-editor/src/hooks/font-size.js | 8 +++---- packages/block-editor/src/hooks/layout.js | 8 +++---- .../block-editor/src/hooks/line-height.js | 6 +++--- .../block-editor/src/layouts/constrained.js | 11 +++------- packages/block-library/src/column/edit.js | 11 +++------- .../block-library/src/column/edit.native.js | 11 +++------- .../block-library/src/columns/edit.native.js | 11 +++------- .../src/cover/controls.native.js | 11 +++------- .../block-library/src/cover/edit/index.js | 5 +++-- .../src/cover/edit/inspector-controls.js | 11 +++------- packages/block-library/src/image/image.js | 4 ++-- packages/block-library/src/paragraph/edit.js | 4 ++-- .../post-featured-image/dimension-controls.js | 6 +++--- packages/block-library/src/search/edit.js | 8 ++++--- packages/block-library/src/spacer/controls.js | 21 ++++++++----------- .../src/spacer/controls.native.js | 11 +++------- packages/block-library/src/spacer/edit.js | 4 ++-- .../block-library/src/spacer/edit.native.js | 11 +++++----- packages/block-library/src/tag-cloud/edit.js | 10 +++------ .../src/template-part/edit/inner-blocks.js | 6 +++--- .../global-styles-context/utils.native.js | 4 ++-- .../src/components/visual-editor/index.js | 4 ++-- .../format-library/src/text-color/index.js | 8 ++++--- .../src/text-color/index.native.js | 4 ++-- 38 files changed, 125 insertions(+), 164 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 405a883ed3b23..9ba21991e7233 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/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-setting'; -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 }, [ diff --git a/packages/block-editor/src/components/block-list/layout.js b/packages/block-editor/src/components/block-list/layout.js index d7a9113ebfa0f..899a24571c206 100644 --- a/packages/block-editor/src/components/block-list/layout.js +++ b/packages/block-editor/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-setting'; 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 ) { diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js index 0f9041389f244..423f120e922b7 100644 --- a/packages/block-editor/src/components/border-radius-control/index.js +++ b/packages/block-editor/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-setting'; 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 ); diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index 08e17313368a6..f33743667b126 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/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-setting'; 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; } diff --git a/packages/block-editor/src/components/font-sizes/with-font-sizes.js b/packages/block-editor/src/components/font-sizes/with-font-sizes.js index 50f3ea7782817..135bed72122de 100644 --- a/packages/block-editor/src/components/font-sizes/with-font-sizes.js +++ b/packages/block-editor/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-setting'; 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 ( ); }, diff --git a/packages/block-editor/src/components/height-control/index.js b/packages/block-editor/src/components/height-control/index.js index 538662c7626fc..e984be2e2ac9a 100644 --- a/packages/block-editor/src/components/height-control/index.js +++ b/packages/block-editor/src/components/height-control/index.js @@ -17,7 +17,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import useSetting from '../use-setting'; +import { useSettings } from '../use-setting'; const RANGE_CONTROL_CUSTOM_SETTINGS = { px: { max: 1000, step: 1 }, @@ -69,8 +69,9 @@ export default function HeightControl( { } ) { const customRangeValue = parseFloat( value ); + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ + availableUnits: availableUnits || [ '%', 'px', 'em', diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 86cf900c01523..5d665e2ea5a94 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -165,7 +165,7 @@ export { useBlockEditingMode } from './block-editing-mode'; */ export { default as BlockEditorProvider } from './provider'; -export { useSettings, default as useSetting } from './use-setting'; +export { useSettings, useSetting } from './use-setting'; export { useBlockCommands } from './use-block-commands'; /* diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 9e0e4f19cfc7e..14b1188cf49ba 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -29,7 +29,7 @@ import { useBlockEditContext } from '../block-edit/context'; import useBlockSync from '../provider/use-block-sync'; import { store as blockEditorStore } from '../../store'; import useBlockDropZone from '../use-block-drop-zone'; -import useSetting from '../use-setting'; +import { useSettings } from '../use-setting'; const EMPTY_OBJECT = {}; @@ -98,7 +98,7 @@ function UncontrolledInnerBlocks( props ) { const { allowSizingOnChildren = false } = defaultLayoutBlockSupport; - const defaultLayout = useSetting( 'layout' ) || EMPTY_OBJECT; + const [ defaultLayout ] = useSettings( 'layout' ); const usedLayout = layout || defaultLayoutBlockSupport; diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js index 757eab60e50ae..5f1aac559139d 100644 --- a/packages/block-editor/src/components/letter-spacing-control/index.js +++ b/packages/block-editor/src/components/letter-spacing-control/index.js @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import useSetting from '../../components/use-setting'; +import { useSettings } from '../../components/use-setting'; /** * Control for letter-spacing. @@ -28,8 +28,9 @@ export default function LetterSpacingControl( { __unstableInputWidth = '60px', ...otherProps } ) { + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ], + availableUnits: availableUnits || [ 'px', 'em', 'rem' ], defaultValues: { px: 2, em: 0.2, rem: 0.2 }, } ); return ( diff --git a/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js b/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js index 4a24482f3b1e4..b5a9bf3858e85 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js +++ b/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js @@ -6,13 +6,15 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import useSetting from '../../use-setting'; +import { useSettings } from '../../use-setting'; export default function useSpacingSizes() { - const spacingSizes = [ - { name: 0, slug: '0', size: 0 }, - ...( useSetting( 'spacing.spacingSizes' ) || [] ), - ]; + const spacingSizes = [ { name: 0, slug: '0', size: 0 } ]; + + const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' ); + if ( settingsSizes ) { + spacingSizes.push( ...settingsSizes ); + } if ( spacingSizes.length > 8 ) { spacingSizes.unshift( { diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js index 1b324835e362d..1c57137670bb0 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js @@ -20,7 +20,7 @@ import { settings } from '@wordpress/icons'; /** * Internal dependencies */ -import useSetting from '../../use-setting'; +import { useSettings } from '../../use-setting'; import { store as blockEditorStore } from '../../../store'; import { ALL_SIDES, @@ -102,8 +102,9 @@ export default function SpacingInputControl( { setShowCustomValueControl( true ); } + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ], + availableUnits: availableUnits || [ 'px', 'em', 'rem' ], } ); let currentValue = null; diff --git a/packages/block-editor/src/components/unit-control/index.js b/packages/block-editor/src/components/unit-control/index.js index 5af8830dc48c2..435a5c5bfc798 100644 --- a/packages/block-editor/src/components/unit-control/index.js +++ b/packages/block-editor/src/components/unit-control/index.js @@ -9,17 +9,12 @@ import { /** * Internal dependencies */ -import useSetting from '../use-setting'; +import { useSettings } from '../use-setting'; export default function UnitControl( { units: unitsProp, ...props } ) { + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - '%', - 'px', - 'em', - 'rem', - 'vw', - ], + availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ], units: unitsProp, } ); diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index cdcde393b6034..f02e4932b962d 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -246,7 +246,7 @@ export function useSettings( ...paths ) { * const isEnabled = useSetting( 'typography.dropCap' ); * ``` */ -export default function useSetting( path ) { +export function useSetting( path ) { const [ value ] = useSettings( path ); return value; } diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js index 4c2849eb8cef2..cc66f519f50e5 100644 --- a/packages/block-editor/src/hooks/background.js +++ b/packages/block-editor/src/hooks/background.js @@ -29,7 +29,7 @@ import { getFilename } from '@wordpress/url'; */ import InspectorControls from '../components/inspector-controls'; import MediaReplaceFlow from '../components/media-replace-flow'; -import useSetting from '../components/use-setting'; +import { useSettings } from '../components/use-setting'; import { cleanEmptyObject } from './utils'; import { store as blockEditorStore } from '../store'; @@ -281,19 +281,17 @@ function BackgroundImagePanelItem( props ) { } export function BackgroundImagePanel( props ) { - const isBackgroundImageSupported = - useSetting( 'background.backgroundImage' ) && - hasBackgroundSupport( props.name, 'backgroundImage' ); - - if ( ! isBackgroundImageSupported ) { + const [ backgroundImage ] = useSettings( 'background.backgroundImage' ); + if ( + ! backgroundImage || + ! hasBackgroundSupport( props.name, 'backgroundImage' ) + ) { return null; } return ( - { isBackgroundImageSupported && ( - - ) } + ); } diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index a9d2facfa2670..827bc2d6e2847 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -22,7 +22,7 @@ import { transformStyles, shouldSkipSerialization, } from './utils'; -import useSetting from '../components/use-setting'; +import { useSettings } from '../components/use-setting'; import { store as blockEditorStore } from '../store'; import { getTypographyFontSizeValue, @@ -122,7 +122,7 @@ export function FontSizeEdit( props ) { attributes: { fontSize, style }, setAttributes, } = props; - const fontSizes = useSetting( 'typography.fontSizes' ); + const [ fontSizes ] = useSettings( 'typography.fontSizes' ); const onChange = ( value ) => { const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug; @@ -167,7 +167,7 @@ export function FontSizeEdit( props ) { * @return {boolean} Whether setting is disabled. */ export function useIsFontSizeDisabled( { name: blockName } = {} ) { - const fontSizes = useSetting( 'typography.fontSizes' ); + const [ fontSizes ] = useSettings( 'typography.fontSizes' ); const hasFontSizes = !! fontSizes?.length; return ( @@ -186,7 +186,7 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) { */ const withFontSizeInlineStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const fontSizes = useSetting( 'typography.fontSizes' ); + const [ fontSizes ] = useSettings( 'typography.fontSizes' ); const { name: blockName, attributes: { fontSize, style }, diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index c194e0a2c5f78..b34aa70ef40c5 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -24,7 +24,7 @@ import { useEffect } from '@wordpress/element'; */ import { store as blockEditorStore } from '../store'; import { InspectorControls } from '../components'; -import useSetting from '../components/use-setting'; +import { useSettings } from '../components/use-setting'; import { getLayoutType, getLayoutTypes } from '../layouts'; import { useBlockEditingMode } from '../components/block-editing-mode'; import { LAYOUT_DEFINITIONS } from '../layouts/definitions'; @@ -123,7 +123,7 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) { ? { ...layout, type: 'constrained' } : layout || {}; const fullLayoutType = getLayoutType( usedLayout?.type || 'default' ); - const blockGapSupport = useSetting( 'spacing.blockGap' ); + const [ blockGapSupport ] = useSettings( 'spacing.blockGap' ); const hasBlockGapSupport = blockGapSupport !== null; const css = fullLayoutType?.getLayoutStyle?.( { blockName, @@ -142,7 +142,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { } = settings; const { layout } = attributes; - const defaultThemeLayout = useSetting( 'layout' ); + const [ defaultThemeLayout ] = useSettings( 'layout' ); const { themeSupportsLayout } = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return { @@ -375,7 +375,7 @@ export const withLayoutStyles = createHigherOrderComponent( : null; // Higher specificity to override defaults from theme.json. const selector = `.wp-container-${ id }.wp-container-${ id }`; - const blockGapSupport = useSetting( 'spacing.blockGap' ); + const [ blockGapSupport ] = useSettings( 'spacing.blockGap' ); const hasBlockGapSupport = blockGapSupport !== null; // Get CSS string for the current layout type. diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js index b835f54a12b6c..3043cad16f076 100644 --- a/packages/block-editor/src/hooks/line-height.js +++ b/packages/block-editor/src/hooks/line-height.js @@ -8,7 +8,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; */ import LineHeightControl from '../components/line-height-control'; import { cleanEmptyObject } from './utils'; -import useSetting from '../components/use-setting'; +import { useSettings } from '../components/use-setting'; export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight'; @@ -54,9 +54,9 @@ export function LineHeightEdit( props ) { * @return {boolean} Whether setting is disabled. */ export function useIsLineHeightDisabled( { name: blockName } = {} ) { - const isDisabled = ! useSetting( 'typography.lineHeight' ); + const [ isEnabled ] = useSettings( 'typography.lineHeight' ); return ( - ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled + ! isEnabled || ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) ); } diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js index 9e4bdee1dfa96..5e2a1eed512d9 100644 --- a/packages/block-editor/src/layouts/constrained.js +++ b/packages/block-editor/src/layouts/constrained.js @@ -21,7 +21,7 @@ import { getCSSRules } from '@wordpress/style-engine'; /** * Internal dependencies */ -import useSetting from '../components/use-setting'; +import { useSettings } from '../components/use-setting'; import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils'; import { getGapCSSValue } from '../hooks/gap'; import { shouldSkipSerialization } from '../hooks/utils'; @@ -60,14 +60,9 @@ export default { label: __( 'Justify items right' ), }, ]; + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - '%', - 'px', - 'em', - 'rem', - 'vw', - ], + availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ], } ); return ( <> diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js index 88169b655a787..8fed5e85f00cb 100644 --- a/packages/block-library/src/column/edit.js +++ b/packages/block-library/src/column/edit.js @@ -12,7 +12,7 @@ import { BlockVerticalAlignmentToolbar, InspectorControls, useBlockProps, - useSetting, + useSettings, useInnerBlocksProps, store as blockEditorStore, } from '@wordpress/block-editor'; @@ -33,14 +33,9 @@ function ColumnEdit( { [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - '%', - 'px', - 'em', - 'rem', - 'vw', - ], + availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ], } ); const { columnsIds, hasChildBlocks, rootClientId } = useSelect( diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index 7e18e73a9b14a..50528ca0855e2 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -15,7 +15,7 @@ import { BlockVerticalAlignmentToolbar, InspectorControls, store as blockEditorStore, - useSetting, + useSettings, } from '@wordpress/block-editor'; import { PanelBody, @@ -60,14 +60,9 @@ function ColumnEdit( { const [ widthUnit, setWidthUnit ] = useState( valueUnit || '%' ); + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - '%', - 'px', - 'em', - 'rem', - 'vw', - ], + availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ], } ); const updateAlignment = ( alignment ) => { diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js index aa862c815b928..2782085e5e55f 100644 --- a/packages/block-library/src/columns/edit.native.js +++ b/packages/block-library/src/columns/edit.native.js @@ -23,7 +23,7 @@ import { BlockControls, BlockVerticalAlignmentToolbar, BlockVariationPicker, - useSetting, + useSettings, store as blockEditorStore, } from '@wordpress/block-editor'; import { withDispatch, useSelect } from '@wordpress/data'; @@ -106,14 +106,9 @@ function ColumnsEditContainer( { const { verticalAlignment, align } = attributes; const { width } = sizes || {}; + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - '%', - 'px', - 'em', - 'rem', - 'vw', - ], + availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ], } ); useEffect( () => { diff --git a/packages/block-library/src/cover/controls.native.js b/packages/block-library/src/cover/controls.native.js index 558db2ec87d61..252211bfcf17b 100644 --- a/packages/block-library/src/cover/controls.native.js +++ b/packages/block-library/src/cover/controls.native.js @@ -22,7 +22,7 @@ import { import { plus } from '@wordpress/icons'; import { useState, useCallback, useRef } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; -import { useSetting, MediaUpload } from '@wordpress/block-editor'; +import { useSettings, MediaUpload } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** @@ -68,14 +68,9 @@ function Controls( { [ minHeight ] ); + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - 'px', - 'em', - 'rem', - 'vw', - 'vh', - ], + availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ], defaultValues: { px: 430, em: 20, rem: 20, vw: 20, vh: 50 }, } ); diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index b5bcaee6d3b78..ab49d58b766b0 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -14,7 +14,7 @@ import { withColors, ColorPalette, useBlockProps, - useSetting, + useSettings, useInnerBlocksProps, __experimentalUseGradient, store as blockEditorStore, @@ -318,7 +318,8 @@ function CoverEdit( { const blockProps = useBlockProps( { ref } ); // Check for fontSize support before we pass a fontSize attribute to the innerBlocks. - const hasFontSizes = !! useSetting( 'typography.fontSizes' )?.length; + const [ fontSizes ] = useSettings( 'typography.fontSizes' ); + const hasFontSizes = fontSizes?.length > 0; const innerBlocksTemplate = getInnerBlocksTemplate( { fontSize: hasFontSizes ? 'large' : undefined, } ); diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js index d0e0695ebf685..3ed0ae872f933 100644 --- a/packages/block-library/src/cover/edit/inspector-controls.js +++ b/packages/block-library/src/cover/edit/inspector-controls.js @@ -20,7 +20,7 @@ import { import { useInstanceId } from '@wordpress/compose'; import { InspectorControls, - useSetting, + useSettings, __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, __experimentalUseGradient, __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, @@ -42,14 +42,9 @@ function CoverHeightInput( { const inputId = `block-cover-height-input-${ instanceId }`; const isPx = unit === 'px'; + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - 'px', - 'em', - 'rem', - 'vw', - 'vh', - ], + availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ], defaultValues: { px: 430, '%': 20, em: 20, rem: 20, vw: 20, vh: 50 }, } ); diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 1f602c4380e88..5167916ff259b 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -24,7 +24,7 @@ import { __experimentalImageURLInputUI as ImageURLInputUI, MediaReplaceFlow, store as blockEditorStore, - useSetting, + useSettings, BlockAlignmentControl, __experimentalImageEditor as ImageEditor, __experimentalGetElementClassName, @@ -369,7 +369,7 @@ export default function Image( { availableUnits: [ 'px' ], } ); - const lightboxSetting = useSetting( 'lightbox' ); + const [ lightboxSetting ] = useSettings( 'lightbox' ); const showLightboxToggle = !! lightbox || lightboxSetting?.allowEditing === true; diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 21f692bd25b26..37a9c2ab9b10a 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -18,7 +18,7 @@ import { InspectorControls, RichText, useBlockProps, - useSetting, + useSettings, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { formatLtr } from '@wordpress/icons'; @@ -58,7 +58,7 @@ function ParagraphBlock( { clientId, } ) { const { align, content, direction, dropCap, placeholder } = attributes; - const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' ); + const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' ); const blockProps = useBlockProps( { ref: useOnEnter( { clientId, content } ), className: classnames( { diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index 5e1204922880c..03a2d2849dae3 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -10,7 +10,7 @@ import { __experimentalUseCustomUnits as useCustomUnits, __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; -import { InspectorControls, useSetting } from '@wordpress/block-editor'; +import { InspectorControls, useSettings } from '@wordpress/block-editor'; const SCALE_OPTIONS = ( <> @@ -53,9 +53,9 @@ const DimensionControls = ( { setAttributes, imageSizeOptions = [], } ) => { - const defaultUnits = [ 'px', '%', 'vw', 'em', 'rem' ]; + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || defaultUnits, + availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ], } ); const onDimensionChange = ( dimension, nextValue ) => { const parsedValue = parseFloat( nextValue ); diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 616478d8013f7..52f89d344cdf0 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -16,7 +16,7 @@ import { getTypographyClassesAndStyles as useTypographyProps, store as blockEditorStore, __experimentalGetElementClassName, - useSetting, + useSettings, } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect, useRef } from '@wordpress/element'; @@ -125,8 +125,10 @@ export default function SearchEdit( { } const colorProps = useColorProps( attributes ); - const fluidTypographySettings = useSetting( 'typography.fluid' ); - const layout = useSetting( 'layout' ); + const [ fluidTypographySettings, layout ] = useSettings( + 'typography.fluid', + 'layout' + ); const typographyProps = useTypographyProps( attributes, { typography: { fluid: fluidTypographySettings, diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js index d999550f16f33..91a1e79be173e 100644 --- a/packages/block-library/src/spacer/controls.js +++ b/packages/block-library/src/spacer/controls.js @@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n'; import { InspectorControls, - useSetting, + useSettings, __experimentalSpacingSizesControl as SpacingSizesControl, isValueSpacingPreset, } from '@wordpress/block-editor'; @@ -25,22 +25,19 @@ import { MIN_SPACER_SIZE } from './constants'; function DimensionInput( { label, onChange, isResizing, value = '' } ) { const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' ); - const spacingSizes = useSetting( 'spacing.spacingSizes' ); + const [ spacingSizes, spacingUnits ] = useSettings( + 'spacing.spacingSizes', + 'spacing.units' + ); // In most contexts the spacer size cannot meaningfully be set to a // percentage, since this is relative to the parent container. This // unit is disabled from the UI. - const availableUnitSettings = ( - useSetting( 'spacing.units' ) || undefined - )?.filter( ( availableUnit ) => availableUnit !== '%' ); + const availableUnits = spacingUnits + ? spacingUnits.filter( ( unit ) => unit !== '%' ) + : [ 'px', 'em', 'rem', 'vw', 'vh' ]; const units = useCustomUnits( { - availableUnits: availableUnitSettings || [ - 'px', - 'em', - 'rem', - 'vw', - 'vh', - ], + availableUnits, defaultValues: { px: 100, em: 10, rem: 10, vw: 10, vh: 25 }, } ); diff --git a/packages/block-library/src/spacer/controls.native.js b/packages/block-library/src/spacer/controls.native.js index 644359b107275..6aacfae19fa82 100644 --- a/packages/block-library/src/spacer/controls.native.js +++ b/packages/block-library/src/spacer/controls.native.js @@ -8,7 +8,7 @@ import { __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; import { useCallback } from '@wordpress/element'; -import { useSetting } from '@wordpress/block-editor'; +import { useSettings } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** @@ -59,14 +59,9 @@ function Controls( { [ height, width ] ); + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - 'px', - 'em', - 'rem', - 'vw', - 'vh', - ], + availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ], defaultValues: DEFAULT_VALUES, } ); diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index 1786c435ebbf2..11133732042d3 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { useBlockProps, - useSetting, + useSettings, getCustomValueFromPreset, getSpacingPresetCssVar, store as blockEditorStore, @@ -107,7 +107,7 @@ const SpacerEdit = ( { const { layout = {} } = blockStyle; const { selfStretch, flexSize } = layout; - const spacingSizes = useSetting( 'spacing.spacingSizes' ); + const [ spacingSizes ] = useSettings( 'spacing.spacingSizes' ); const [ isResizing, setIsResizing ] = useState( false ); const [ temporaryHeight, setTemporaryHeight ] = useState( null ); diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index ca5cfa409939b..614624570a6d9 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -11,7 +11,7 @@ import { withPreferredColorScheme } from '@wordpress/compose'; import { InspectorControls, isValueSpacingPreset, - useSetting, + useSettings, getCustomValueFromPreset, getPxFromCssUnit, } from '@wordpress/block-editor'; @@ -39,10 +39,11 @@ const Spacer = ( { fontSize: DEFAULT_FONT_SIZE, }; const { height, width } = attributes; - const spacingSizes = [ - { name: 0, slug: '0', size: 0 }, - ...( useSetting( 'spacing.spacingSizes' ) || [] ), - ]; + const spacingSizes = [ { name: 0, slug: '0', size: 0 } ]; + const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' ); + if ( settingsSizes ) { + spacingSizes.push( ...settingsSizes ); + } const { orientation } = context; const defaultStyle = getStylesFromColorScheme( styles.staticSpacer, diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 4dbec86fff520..a52c68bc6a739 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps, - useSetting, + useSettings, } from '@wordpress/block-editor'; import ServerSideRender from '@wordpress/server-side-render'; import { store as coreStore } from '@wordpress/core-data'; @@ -49,13 +49,9 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { largestFontSize, } = attributes; + const [ availableUnits ] = useSettings( 'spacing.units' ); const units = useCustomUnits( { - availableUnits: useSetting( 'spacing.units' ) || [ - '%', - 'px', - 'em', - 'rem', - ], + availableUnits: availableUnits || [ '%', 'px', 'em', 'rem' ], } ); const getTaxonomyOptions = () => { diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js index b17428bbdbb40..146877ee0287c 100644 --- a/packages/block-library/src/template-part/edit/inner-blocks.js +++ b/packages/block-library/src/template-part/edit/inner-blocks.js @@ -5,7 +5,7 @@ import { useEntityBlockEditor } from '@wordpress/core-data'; import { InnerBlocks, useInnerBlocksProps, - useSetting, + useSettings, store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; @@ -21,8 +21,8 @@ export default function TemplatePartInnerBlocks( { const { getSettings } = select( blockEditorStore ); return getSettings()?.supportsLayout; }, [] ); - const defaultLayout = useSetting( 'layout' ) || {}; - const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; + const [ defaultLayout ] = useSettings( 'layout' ); + const usedLayout = layout?.inherit ? defaultLayout || {} : layout; const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js index d494ca3cedbdb..8b0e92e70f5ae 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/components/src/mobile/global-styles-context/utils.native.js @@ -9,7 +9,7 @@ import { Dimensions } from 'react-native'; */ import { getPxFromCssUnit, - useSetting, + useSettings, useMultipleOriginColorsAndGradients, } from '@wordpress/block-editor'; @@ -357,7 +357,7 @@ export function useMobileGlobalStylesColors( type = 'colors' ) { // Default editor colors/gradients if it's not a block-based theme. const colorPalette = type === 'colors' ? 'color.palette' : 'color.gradients'; - const editorDefaultPalette = useSetting( colorPalette ); + const [ editorDefaultPalette ] = useSettings( colorPalette ); return availableThemeColors.length >= 1 ? availableThemeColors diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 14b6bf475045e..bd236551c7cf1 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -14,7 +14,7 @@ import { __unstableUseTypewriter as useTypewriter, __unstableUseTypingObserver as useTypingObserver, __experimentalUseResizeCanvas as useResizeCanvas, - useSetting, + useSettings, __experimentalRecursionProvider as RecursionProvider, privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; @@ -171,7 +171,7 @@ export default function VisualEditor( { styles } ) { borderBottom: 0, }; const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode ); - const globalLayoutSettings = useSetting( 'layout' ); + const [ globalLayoutSettings ] = useSettings( 'layout' ); const previewMode = 'is-' + deviceType.toLowerCase() + '-preview'; let animatedStyles = isTemplateMode diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js index a0545a3dbc247..630431dc50fa0 100644 --- a/packages/format-library/src/text-color/index.js +++ b/packages/format-library/src/text-color/index.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { useCallback, useMemo, useState } from '@wordpress/element'; -import { RichTextToolbarButton, useSetting } from '@wordpress/block-editor'; +import { RichTextToolbarButton, useSettings } from '@wordpress/block-editor'; import { Icon, color as colorIcon, @@ -61,8 +61,10 @@ function TextColorEdit( { activeAttributes, contentRef, } ) { - const allowCustomControl = useSetting( 'color.custom' ); - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const [ allowCustomControl, colors = EMPTY_ARRAY ] = useSettings( + 'color.custom', + 'color.palette' + ); const [ isAddingColor, setIsAddingColor ] = useState( false ); const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index 5f133383ae1d1..21db4c2a444f3 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -8,7 +8,7 @@ import { StyleSheet, View } from 'react-native'; */ import { __ } from '@wordpress/i18n'; import { useCallback, useMemo, useState } from '@wordpress/element'; -import { BlockControls, useSetting } from '@wordpress/block-editor'; +import { BlockControls, useSettings } from '@wordpress/block-editor'; import { ToolbarGroup, ToolbarButton, @@ -72,7 +72,7 @@ function TextColorEdit( { activeAttributes, contentRef, } ) { - const allowCustomControl = useSetting( 'color.custom' ); + const [ allowCustomControl ] = useSettings( 'color.custom' ); const colors = useMobileGlobalStylesColors(); const [ isAddingColor, setIsAddingColor ] = useState( false ); const enableIsAddingColor = useCallback( From 2205c386d5d48a15ff5b38aaa4781d9cdaeab89a Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Tue, 17 Oct 2023 12:10:26 +0200 Subject: [PATCH 12/18] Update docs --- packages/block-editor/README.md | 6 ++++++ .../src/components/use-setting/README.md | 19 +++++++++---------- .../src/components/use-setting/index.js | 4 ++++ 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index ae89afc934dcf..7cb75dc1e09eb 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -968,6 +968,12 @@ Hook that retrieves the given settings for the block instance in use. It looks up the settings first in the block instance hierarchy. If none are found, it'll look them up in the block editor settings. +_Usage_ + +```js +const [ fixed, sticky ] = useSettings( 'position.fixed', 'position.sticky' ); +``` + _Parameters_ - _paths_ `string[]`: The paths to the settings. diff --git a/packages/block-editor/src/components/use-setting/README.md b/packages/block-editor/src/components/use-setting/README.md index 96f3c68fbcfad..83ab802edea83 100644 --- a/packages/block-editor/src/components/use-setting/README.md +++ b/packages/block-editor/src/components/use-setting/README.md @@ -1,8 +1,8 @@ -## Use Setting +## Use Settings -`useSetting` is a hook that will retrive the setting for the block instance that's in use. +`useSettings` is a hook that will retrieve the settings for the block instance that's in use. -It does the lookup of the setting in the following order: +It does the lookup of the settings in the following order: 1. Third parties can provide the settings for the block using the filter `blockEditor.useSetting.before`. 2. If no third parties have provided this setting, then it looks up in the block instance hierachy starting from the current block and working its way upwards to its ancestors. @@ -20,20 +20,19 @@ It does the lookup of the setting in the following order: This will fetch the default color palette based on the block instance. ```jsx -import { useSetting } from '@wordpress/block-editor'; +import { useSettings } from '@wordpress/block-editor'; -const defaultColorPalette = useSetting( 'color.palette.default' ); +const [ defaultColorPalette ] = useSettings( 'color.palette.default' ); ``` Refer [here](https://github.com/WordPress/gutenberg/blob/HEAD/docs/how-to-guides/curating-the-editor-experience.md?plain=1#L330) in order to understand how the filter mentioned above `blockEditor.useSetting.before` can be used. ### Props -This hooks accepts the following props. +This hooks accepts the following arguments. -#### `path` +#### `paths` -- **Type:** `String` -- **Default:** `undefined` +- **Type:** `Array` -The path to the setting that is to be used for a block. Ex: `typography.fontSizes` \ No newline at end of file +Array of paths to the settings to be retrieved. E.g., `[ 'typography.fontSizes' ]` diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index f02e4932b962d..a7cbaf1be57df 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -114,6 +114,10 @@ function mergeOrigins( value ) { * * @param {string[]} paths The paths to the settings. * @return {any[]} Returns the values defined for the settings. + * @example + * ```js + * const [ fixed, sticky ] = useSettings( 'position.fixed', 'position.sticky' ); + * ``` */ export function useSettings( ...paths ) { const { name: blockName, clientId = null } = useBlockEditContext(); From 01604290865ae9ca0d33791e29452a2fb17abc42 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Tue, 17 Oct 2023 12:12:05 +0200 Subject: [PATCH 13/18] Rename use-setting to use-settings --- packages/block-editor/src/components/block-list/block.native.js | 2 +- packages/block-editor/src/components/block-list/layout.js | 2 +- .../block-editor/src/components/border-radius-control/index.js | 2 +- .../src/components/color-palette/with-color-context.js | 2 +- .../block-editor/src/components/colors-gradients/control.js | 2 +- .../use-multiple-origin-colors-and-gradients.js | 2 +- packages/block-editor/src/components/colors/with-colors.js | 2 +- packages/block-editor/src/components/font-family/index.js | 2 +- .../block-editor/src/components/font-sizes/font-size-picker.js | 2 +- .../block-editor/src/components/font-sizes/with-font-sizes.js | 2 +- packages/block-editor/src/components/gradients/use-gradient.js | 2 +- packages/block-editor/src/components/height-control/index.js | 2 +- packages/block-editor/src/components/index.js | 2 +- packages/block-editor/src/components/index.native.js | 2 +- packages/block-editor/src/components/inner-blocks/index.js | 2 +- .../block-editor/src/components/letter-spacing-control/index.js | 2 +- .../components/spacing-sizes-control/hooks/use-spacing-sizes.js | 2 +- .../input-controls/spacing-input-control.js | 2 +- packages/block-editor/src/components/unit-control/index.js | 2 +- .../src/components/{use-setting => use-settings}/README.md | 0 .../src/components/{use-setting => use-settings}/index.js | 0 .../src/components/{use-setting => use-settings}/test/index.js | 0 packages/block-editor/src/hooks/background.js | 2 +- packages/block-editor/src/hooks/color.js | 2 +- packages/block-editor/src/hooks/font-size.js | 2 +- packages/block-editor/src/hooks/layout.js | 2 +- packages/block-editor/src/hooks/line-height.js | 2 +- packages/block-editor/src/hooks/position.js | 2 +- packages/block-editor/src/hooks/use-color-props.js | 2 +- packages/block-editor/src/layouts/constrained.js | 2 +- 30 files changed, 27 insertions(+), 27 deletions(-) rename packages/block-editor/src/components/{use-setting => use-settings}/README.md (100%) rename packages/block-editor/src/components/{use-setting => use-settings}/index.js (100%) rename packages/block-editor/src/components/{use-setting => use-settings}/test/index.js (100%) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 9ba21991e7233..c6cce290985c2 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -38,7 +38,7 @@ import BlockInvalidWarning from './block-invalid-warning'; import BlockOutline from './block-outline'; import { store as blockEditorStore } from '../../store'; import { useLayout } from './layout'; -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; const EMPTY_ARRAY = []; diff --git a/packages/block-editor/src/components/block-list/layout.js b/packages/block-editor/src/components/block-list/layout.js index 899a24571c206..a7de26cc5a0fa 100644 --- a/packages/block-editor/src/components/block-list/layout.js +++ b/packages/block-editor/src/components/block-list/layout.js @@ -7,7 +7,7 @@ import { createContext, useContext } from '@wordpress/element'; * Internal dependencies */ import { getLayoutType } from '../../layouts'; -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; export const defaultLayout = { type: 'default' }; diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js index 423f120e922b7..4c614084a7e20 100644 --- a/packages/block-editor/src/components/border-radius-control/index.js +++ b/packages/block-editor/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 { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; import { getAllValue, getAllUnit, diff --git a/packages/block-editor/src/components/color-palette/with-color-context.js b/packages/block-editor/src/components/color-palette/with-color-context.js index f7a906c61c78a..62b8c1bc4b618 100644 --- a/packages/block-editor/src/components/color-palette/with-color-context.js +++ b/packages/block-editor/src/components/color-palette/with-color-context.js @@ -6,7 +6,7 @@ import { createHigherOrderComponent } from '@wordpress/compose'; /** * Internal dependencies */ -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; export default createHigherOrderComponent( ( WrappedComponent ) => { return ( props ) => { diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index b22e57b618f9b..51912e0a74e9d 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -18,7 +18,7 @@ import { /** * Internal dependencies */ -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; const colorsAndGradientKeys = [ 'colors', diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js index 0fca7c2e26668..ee27960529ede 100644 --- a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js +++ b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js @@ -7,7 +7,7 @@ import { _x } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; /** * Retrieves color and gradient related settings. diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js index 4e1d319e299e5..5946ca90d8bbd 100644 --- a/packages/block-editor/src/components/colors/with-colors.js +++ b/packages/block-editor/src/components/colors/with-colors.js @@ -13,7 +13,7 @@ import { getColorObjectByAttributeValues, getMostReadableColor, } from './utils'; -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; import { kebabCase } from '../../utils/object'; /** diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index f33743667b126..4a40a880e537c 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; export default function FontFamilyControl( { value = '', diff --git a/packages/block-editor/src/components/font-sizes/font-size-picker.js b/packages/block-editor/src/components/font-sizes/font-size-picker.js index a0f2367b24a15..90f873b9abbcd 100644 --- a/packages/block-editor/src/components/font-sizes/font-size-picker.js +++ b/packages/block-editor/src/components/font-sizes/font-size-picker.js @@ -6,7 +6,7 @@ import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components'; /** * Internal dependencies */ -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; function FontSizePicker( props ) { const [ fontSizes, customFontSizes ] = useSettings( diff --git a/packages/block-editor/src/components/font-sizes/with-font-sizes.js b/packages/block-editor/src/components/font-sizes/with-font-sizes.js index 135bed72122de..8402a2c23afeb 100644 --- a/packages/block-editor/src/components/font-sizes/with-font-sizes.js +++ b/packages/block-editor/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 { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; const DEFAULT_FONT_SIZES = []; diff --git a/packages/block-editor/src/components/gradients/use-gradient.js b/packages/block-editor/src/components/gradients/use-gradient.js index b7957a34a2b96..938a60143d767 100644 --- a/packages/block-editor/src/components/gradients/use-gradient.js +++ b/packages/block-editor/src/components/gradients/use-gradient.js @@ -8,7 +8,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; * Internal dependencies */ import { useBlockEditContext } from '../block-edit'; -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; import { store as blockEditorStore } from '../../store'; export function __experimentalGetGradientClass( gradientSlug ) { diff --git a/packages/block-editor/src/components/height-control/index.js b/packages/block-editor/src/components/height-control/index.js index e984be2e2ac9a..e179752249744 100644 --- a/packages/block-editor/src/components/height-control/index.js +++ b/packages/block-editor/src/components/height-control/index.js @@ -17,7 +17,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; const RANGE_CONTROL_CUSTOM_SETTINGS = { px: { max: 1000, step: 1 }, diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 5d665e2ea5a94..08247d8cdb014 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -165,7 +165,7 @@ export { useBlockEditingMode } from './block-editing-mode'; */ export { default as BlockEditorProvider } from './provider'; -export { useSettings, useSetting } from './use-setting'; +export { useSettings, useSetting } from './use-settings'; export { useBlockCommands } from './use-block-commands'; /* diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index eebfcb31a9502..de134f1b5e3bc 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -59,7 +59,7 @@ export { default as BlockCaption } from './block-caption'; export { default as Caption } from './caption'; export { default as PanelColorSettings } from './panel-color-settings'; export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings'; -export { useSettings, default as useSetting } from './use-setting'; +export { useSettings, default as useSetting } from './use-settings'; export { RecursionProvider as __experimentalRecursionProvider, useHasRecursion as __experimentalUseHasRecursion, diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 14b1188cf49ba..f5f216d6072e4 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -29,7 +29,7 @@ import { useBlockEditContext } from '../block-edit/context'; import useBlockSync from '../provider/use-block-sync'; import { store as blockEditorStore } from '../../store'; import useBlockDropZone from '../use-block-drop-zone'; -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; const EMPTY_OBJECT = {}; diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js index 5f1aac559139d..2c36e59cd8241 100644 --- a/packages/block-editor/src/components/letter-spacing-control/index.js +++ b/packages/block-editor/src/components/letter-spacing-control/index.js @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useSettings } from '../../components/use-setting'; +import { useSettings } from '../../components/use-settings'; /** * Control for letter-spacing. diff --git a/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js b/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js index b5a9bf3858e85..e75f3519a1ca6 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js +++ b/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js @@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useSettings } from '../../use-setting'; +import { useSettings } from '../../use-settings'; export default function useSpacingSizes() { const spacingSizes = [ { name: 0, slug: '0', size: 0 } ]; diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js index 1c57137670bb0..a7efd10bce712 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js @@ -20,7 +20,7 @@ import { settings } from '@wordpress/icons'; /** * Internal dependencies */ -import { useSettings } from '../../use-setting'; +import { useSettings } from '../../use-settings'; import { store as blockEditorStore } from '../../../store'; import { ALL_SIDES, diff --git a/packages/block-editor/src/components/unit-control/index.js b/packages/block-editor/src/components/unit-control/index.js index 435a5c5bfc798..a1ce0281759c0 100644 --- a/packages/block-editor/src/components/unit-control/index.js +++ b/packages/block-editor/src/components/unit-control/index.js @@ -9,7 +9,7 @@ import { /** * Internal dependencies */ -import { useSettings } from '../use-setting'; +import { useSettings } from '../use-settings'; export default function UnitControl( { units: unitsProp, ...props } ) { const [ availableUnits ] = useSettings( 'spacing.units' ); diff --git a/packages/block-editor/src/components/use-setting/README.md b/packages/block-editor/src/components/use-settings/README.md similarity index 100% rename from packages/block-editor/src/components/use-setting/README.md rename to packages/block-editor/src/components/use-settings/README.md diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-settings/index.js similarity index 100% rename from packages/block-editor/src/components/use-setting/index.js rename to packages/block-editor/src/components/use-settings/index.js diff --git a/packages/block-editor/src/components/use-setting/test/index.js b/packages/block-editor/src/components/use-settings/test/index.js similarity index 100% rename from packages/block-editor/src/components/use-setting/test/index.js rename to packages/block-editor/src/components/use-settings/test/index.js diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js index cc66f519f50e5..f78341e16df8e 100644 --- a/packages/block-editor/src/hooks/background.js +++ b/packages/block-editor/src/hooks/background.js @@ -29,7 +29,7 @@ import { getFilename } from '@wordpress/url'; */ import InspectorControls from '../components/inspector-controls'; import MediaReplaceFlow from '../components/media-replace-flow'; -import { useSettings } from '../components/use-setting'; +import { useSettings } from '../components/use-settings'; import { cleanEmptyObject } from './utils'; import { store as blockEditorStore } from '../store'; diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 752b8ab4b9d5c..19fe4b0ea5ecd 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -25,7 +25,7 @@ import { shouldSkipSerialization, useBlockSettings, } from './utils'; -import { useSettings } from '../components/use-setting'; +import { useSettings } from '../components/use-settings'; import InspectorControls from '../components/inspector-controls'; import { useHasColorPanel, diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 827bc2d6e2847..146abe1d1f72f 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -22,7 +22,7 @@ import { transformStyles, shouldSkipSerialization, } from './utils'; -import { useSettings } from '../components/use-setting'; +import { useSettings } from '../components/use-settings'; import { store as blockEditorStore } from '../store'; import { getTypographyFontSizeValue, diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index b34aa70ef40c5..95fc90fc0446f 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -24,7 +24,7 @@ import { useEffect } from '@wordpress/element'; */ import { store as blockEditorStore } from '../store'; import { InspectorControls } from '../components'; -import { useSettings } from '../components/use-setting'; +import { useSettings } from '../components/use-settings'; import { getLayoutType, getLayoutTypes } from '../layouts'; import { useBlockEditingMode } from '../components/block-editing-mode'; import { LAYOUT_DEFINITIONS } from '../layouts/definitions'; diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js index 3043cad16f076..5f8df2549cc4b 100644 --- a/packages/block-editor/src/hooks/line-height.js +++ b/packages/block-editor/src/hooks/line-height.js @@ -8,7 +8,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; */ import LineHeightControl from '../components/line-height-control'; import { cleanEmptyObject } from './utils'; -import { useSettings } from '../components/use-setting'; +import { useSettings } from '../components/use-settings'; export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight'; diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 941710eb0628a..d040a2c39d21d 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -26,7 +26,7 @@ import { addFilter } from '@wordpress/hooks'; * Internal dependencies */ import BlockList from '../components/block-list'; -import { useSettings } from '../components/use-setting'; +import { useSettings } from '../components/use-settings'; import InspectorControls from '../components/inspector-controls'; import useBlockDisplayInformation from '../components/use-block-display-information'; import { cleanEmptyObject } from './utils'; diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js index a753a2154e0ed..679f0b7accbf7 100644 --- a/packages/block-editor/src/hooks/use-color-props.js +++ b/packages/block-editor/src/hooks/use-color-props.js @@ -20,7 +20,7 @@ import { __experimentalGetGradientClass, getGradientValueBySlug, } from '../components/gradients'; -import { useSettings } from '../components/use-setting'; +import { useSettings } from '../components/use-settings'; // The code in this file has largely been lifted from the color block support // hook. diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js index 5e2a1eed512d9..7fe0d5ff0b526 100644 --- a/packages/block-editor/src/layouts/constrained.js +++ b/packages/block-editor/src/layouts/constrained.js @@ -21,7 +21,7 @@ import { getCSSRules } from '@wordpress/style-engine'; /** * Internal dependencies */ -import { useSettings } from '../components/use-setting'; +import { useSettings } from '../components/use-settings'; import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils'; import { getGapCSSValue } from '../hooks/gap'; import { shouldSkipSerialization } from '../hooks/utils'; From f8beb3e2e428bad81203e4db9490ca539120e595 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Tue, 17 Oct 2023 12:13:39 +0200 Subject: [PATCH 14/18] Update unit tests --- .../src/components/use-settings/test/index.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/use-settings/test/index.js b/packages/block-editor/src/components/use-settings/test/index.js index e4aa314970133..bbf59dd63a133 100644 --- a/packages/block-editor/src/components/use-settings/test/index.js +++ b/packages/block-editor/src/components/use-settings/test/index.js @@ -13,10 +13,10 @@ import { useEffect } from '@wordpress/element'; /** * Internal dependencies */ -import useSetting from '..'; +import { useSettings } from '..'; import * as BlockEditContext from '../../block-edit/context'; -// Mock useSelect() functions used by useSetting() +// Mock useSelect() functions used by useSettings() jest.mock( '@wordpress/data/src/components/use-select' ); let selectMock = {}; @@ -56,7 +56,7 @@ function runHook( hookCb ) { return storedResult; } -describe( 'useSetting', () => { +describe( 'useSettings', () => { beforeEach( () => { setupSelectMock(); mockCurrentBlockContext(); @@ -77,8 +77,8 @@ describe( 'useSetting', () => { name: 'core/test-block', } ); - const result = runHook( () => useSetting( 'layout.contentSize' ) ); - expect( result ).toBe( '840px' ); + const result = runHook( () => useSettings( 'layout.contentSize' ) ); + expect( result ).toEqual( [ '840px' ] ); } ); it( 'uses blockEditor.useSetting.before hook override', () => { @@ -108,8 +108,8 @@ describe( 'useSetting', () => { } ); - const result = runHook( () => useSetting( 'layout.contentSize' ) ); - expect( result ).toBe( '960px' ); + const result = runHook( () => useSettings( 'layout.contentSize' ) ); + expect( result ).toEqual( [ '960px' ] ); removeFilter( 'blockEditor.useSetting.before', From c8e020cbbbab983f388ab1d6928ac4527f8007e9 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Tue, 17 Oct 2023 12:22:09 +0200 Subject: [PATCH 15/18] Add jsdoc for the mergeOrigins helper --- .../block-editor/src/components/use-settings/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/use-settings/index.js b/packages/block-editor/src/components/use-settings/index.js index a7cbaf1be57df..c82881f70d640 100644 --- a/packages/block-editor/src/components/use-settings/index.js +++ b/packages/block-editor/src/components/use-settings/index.js @@ -94,7 +94,14 @@ const removeCustomPrefixes = ( path ) => { return prefixedFlags[ path ] || path; }; -const mergeCache = new WeakMap(); +/** + * For settings like `color.palette`, which have a value that is an object + * with `default`, `theme`, `custom`, with field values that are arrays of + * items, merge these three arrays into one and return it. The calculation + * is memoized so that identical input values produce identical output. + * @param {Object} value Object to merge + * @return {Array} Array of merged items + */ function mergeOrigins( value ) { let result = mergeCache.get( value ); if ( ! result ) { @@ -105,6 +112,7 @@ function mergeOrigins( value ) { } return result; } +const mergeCache = new WeakMap(); /** * Hook that retrieves the given settings for the block instance in use. From 7e530bc242f727c36a9a50ed84c719f706ee976e Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Tue, 17 Oct 2023 12:26:05 +0200 Subject: [PATCH 16/18] Fixup customFontSize variable name --- .../src/components/font-sizes/font-size-picker.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/font-sizes/font-size-picker.js b/packages/block-editor/src/components/font-sizes/font-size-picker.js index 90f873b9abbcd..959b2c23806de 100644 --- a/packages/block-editor/src/components/font-sizes/font-size-picker.js +++ b/packages/block-editor/src/components/font-sizes/font-size-picker.js @@ -9,7 +9,7 @@ import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components'; import { useSettings } from '../use-settings'; function FontSizePicker( props ) { - const [ fontSizes, customFontSizes ] = useSettings( + const [ fontSizes, customFontSize ] = useSettings( 'typography.fontSizes', 'typography.customFontSize' ); @@ -18,7 +18,7 @@ function FontSizePicker( props ) { ); } From 9ebf69913856f4e57b7d3ec7d39b89ff50f04f35 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 18 Oct 2023 10:31:48 +0200 Subject: [PATCH 17/18] Deprecate useSetting for real --- packages/block-editor/CHANGELOG.md | 20 +++++++++---------- packages/block-editor/README.md | 2 ++ .../src/components/use-settings/index.js | 10 +++++++++- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index df264090d6f0d..5c6e9a5602add 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,23 +2,25 @@ ## Unreleased +- Deprecated the `useSetting` function in favor of new `useSettings` one that can retrieve multiple settings at once ([#55337](https://github.com/WordPress/gutenberg/pull/55337)). + ## 12.12.0 (2023-10-18) ## 12.11.0 (2023-10-05) -- Deprecated `CopyHandler`, absorbed into `WritingFlow`. +- Deprecated `CopyHandler`, absorbed into `WritingFlow`. ## 12.10.0 (2023-09-20) -- The Deprecated multiline prop on RichText will now fall back to using multiple - rich text instances instead of a single multiline instance. The prop remains - deprecated. +- The Deprecated multiline prop on RichText will now fall back to using multiple + rich text instances instead of a single multiline instance. The prop remains + deprecated. ## 12.9.0 (2023-08-31) ### Enhancements -- Embed the `ObserveTyping` behavior within the `BlockList` component making to simplify instanciations of third-party block editors. +- Embed the `ObserveTyping` behavior within the `BlockList` component making to simplify instanciations of third-party block editors. ## 12.8.0 (2023-08-16) @@ -32,13 +34,12 @@ ### Enhancements -- Add `HeadingLevelDropdown` component for selecting H1-H6 and paragraph HTML tags from the block toolbar. +- Add `HeadingLevelDropdown` component for selecting H1-H6 and paragraph HTML tags from the block toolbar. ### Bug Fix - Fluid typography: custom font-sizes should use max viewport width ([#51516](https://github.com/WordPress/gutenberg/pull/51516)). - ## 12.3.0 (2023-06-07) ## 12.2.0 (2023-05-24) @@ -51,11 +52,10 @@ ### Breaking Changes -- Renamed utility function `immutableSet` to `setImmutably` ([#50040](https://github.com/WordPress/gutenberg/pull/50040)). +- Renamed utility function `immutableSet` to `setImmutably` ([#50040](https://github.com/WordPress/gutenberg/pull/50040)). ## 11.8.0 (2023-04-12) - ## 11.7.0 (2023-03-29) - `ImageSizeControl`: Update image size label ([#49112](https://github.com/WordPress/gutenberg/pull/49112)). @@ -102,7 +102,7 @@ ### Bug Fix - `SpacingSizesControl`: Change ARIA role from `region` to `group` to avoid unwanted ARIA landmark regions ([#46530](https://github.com/WordPress/gutenberg/pull/46530)). -- `FocalPointPicker`: Fix layout misalignment when placed in the `BlockInspector` ([#46631](https://github.com/WordPress/gutenberg/pull/46631)). +- `FocalPointPicker`: Fix layout misalignment when placed in the `BlockInspector` ([#46631](https://github.com/WordPress/gutenberg/pull/46631)). ## 10.5.0 (2022-11-16) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 7cb75dc1e09eb..02671d5dca0e3 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -944,6 +944,8 @@ _Parameters_ ### useSetting +> **Deprecated** 6.4.0 Use useSettings instead. + Hook that retrieves the given setting for the block instance in use. It looks up the setting first in the block instance hierarchy. If none is found, it'll look it up in the block editor settings. diff --git a/packages/block-editor/src/components/use-settings/index.js b/packages/block-editor/src/components/use-settings/index.js index c82881f70d640..12a442c5c98f3 100644 --- a/packages/block-editor/src/components/use-settings/index.js +++ b/packages/block-editor/src/components/use-settings/index.js @@ -1,11 +1,12 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE, hasBlockSupport, } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; +import deprecated from '@wordpress/deprecated'; import { useMemo } from '@wordpress/element'; import { applyFilters } from '@wordpress/hooks'; @@ -253,12 +254,19 @@ export function useSettings( ...paths ) { * * @param {string} path The path to the setting. * @return {any} Returns the value defined for the setting. + * @deprecated 6.4.0 Use useSettings instead. * @example * ```js * const isEnabled = useSetting( 'typography.dropCap' ); * ``` */ export function useSetting( path ) { + deprecated( 'wp.blockEditor.useSetting', { + since: '6.4', + alternative: 'wp.blockEditor.useSettings', + note: 'The new useSettings function can retrieve multiple settings at once, with better performance.', + } ); + const [ value ] = useSettings( path ); return value; } From 8a312bed8daaeb02263d0740d8e607fd933e21eb Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Wed, 18 Oct 2023 21:18:54 +0200 Subject: [PATCH 18/18] Unit test for deprecated useSetting --- .../src/components/use-settings/test/index.js | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/use-settings/test/index.js b/packages/block-editor/src/components/use-settings/test/index.js index bbf59dd63a133..89de12655338f 100644 --- a/packages/block-editor/src/components/use-settings/test/index.js +++ b/packages/block-editor/src/components/use-settings/test/index.js @@ -13,7 +13,7 @@ import { useEffect } from '@wordpress/element'; /** * Internal dependencies */ -import { useSettings } from '..'; +import { useSettings, useSetting } from '..'; import * as BlockEditContext from '../../block-edit/context'; // Mock useSelect() functions used by useSettings() @@ -116,4 +116,26 @@ describe( 'useSettings', () => { 'test/useSetting.before' ); } ); + + it( 'supports also the deprecated useSetting function', () => { + mockSettings( { + blocks: { + 'core/test-block': { + layout: { + contentSize: '840px', + }, + }, + }, + } ); + + mockCurrentBlockContext( { + name: 'core/test-block', + } ); + + const result = runHook( () => useSetting( 'layout.contentSize' ) ); + expect( result ).toBe( '840px' ); + expect( console ).toHaveWarnedWith( + 'wp.blockEditor.useSetting is deprecated since version 6.4. Please use wp.blockEditor.useSettings instead.' + ); + } ); } );