From 882c47abce9bfdbfe3ea6d3cbe6598ee07c4ced4 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 7 May 2021 09:49:26 +0100 Subject: [PATCH 1/2] Rename and stabilize useEditorFeature as useThemeSetting --- packages/block-editor/README.md | 19 ++++++++++++++++++ .../src/components/block-list/block.native.js | 4 ++-- .../color-palette/with-color-context.js | 6 +++--- .../components/colors-gradients/control.js | 10 +++++----- .../panel-color-gradient-settings.js | 10 +++++----- .../src/components/colors/use-colors.js | 5 ++--- .../src/components/colors/with-colors.js | 5 ++--- .../src/components/font-family/index.js | 6 ++---- .../components/font-sizes/font-size-picker.js | 6 +++--- .../components/font-sizes/with-font-sizes.js | 4 ++-- .../src/components/gradient-picker/control.js | 6 +++--- .../src/components/gradient-picker/index.js | 6 +++--- .../src/components/gradient-picker/panel.js | 4 ++-- .../src/components/gradients/use-gradient.js | 4 ++-- packages/block-editor/src/components/index.js | 2 +- .../src/components/index.native.js | 2 +- .../src/components/unit-control/index.js | 4 ++-- .../index.js | 20 +++++++++---------- .../block-editor/src/hooks/border-color.js | 11 +++++----- packages/block-editor/src/hooks/border.js | 18 ++++++++--------- packages/block-editor/src/hooks/color.js | 10 +++++----- packages/block-editor/src/hooks/duotone.js | 6 +++--- .../block-editor/src/hooks/font-appearance.js | 6 +++--- .../block-editor/src/hooks/font-family.js | 6 +++--- packages/block-editor/src/hooks/font-size.js | 8 ++++---- packages/block-editor/src/hooks/layout.js | 6 +++--- .../block-editor/src/hooks/line-height.js | 4 ++-- packages/block-editor/src/hooks/margin.js | 4 ++-- packages/block-editor/src/hooks/padding.js | 4 ++-- .../block-editor/src/hooks/text-decoration.js | 4 ++-- .../block-editor/src/hooks/text-transform.js | 4 ++-- .../src/hooks/use-border-props.js | 4 ++-- .../block-editor/src/hooks/use-color-props.js | 6 +++--- .../block-library/src/button/color-edit.js | 6 +++--- .../block-library/src/cover/edit.native.js | 4 ++-- .../cover/overlay-color-settings.native.js | 6 +++--- packages/block-library/src/group/edit.js | 4 ++-- packages/block-library/src/paragraph/edit.js | 4 ++-- .../block-library/src/post-content/edit.js | 4 ++-- .../src/template-part/edit/inner-blocks.js | 4 ++-- .../src/components/visual-editor/index.js | 4 ++-- .../edit-site/src/components/editor/utils.js | 6 +++--- .../src/components/sidebar/border-panel.js | 16 +++++++-------- .../components/sidebar/color-palette-panel.js | 4 ++-- .../src/components/sidebar/color-panel.js | 10 +++++----- .../src/components/sidebar/spacing-panel.js | 8 ++++---- .../components/sidebar/typography-panel.js | 18 ++++++++--------- .../format-library/src/text-color/index.js | 6 +++--- 48 files changed, 171 insertions(+), 157 deletions(-) rename packages/block-editor/src/components/{use-editor-feature => use-theme-setting}/index.js (82%) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 6e61a3e60d8ef3..0caffaf083d513 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -654,6 +654,25 @@ _Returns_ - `Object`: Props to pass to the element to mark as a block. +# **useThemeSetting** + +Hook that retrieves the theme setting. +It works with nested objects using by finding the value at path. + +_Usage_ + +```js +const isEnabled = useThemeSetting( 'typography.dropCap' ); +``` + +_Parameters_ + +- _path_ `string`: The path to the setting. + +_Returns_ + +- `any`: Returns the value defined for the setting. + # **validateThemeColors** Given an array of theme colors checks colors for validity 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 38bc62c6ca8503..577d21b43c3b2d 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -20,7 +20,7 @@ import { getBlockType, __experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel, } from '@wordpress/blocks'; -import { __experimentalUseEditorFeature as useEditorFeature } from '@wordpress/block-editor'; +import { useThemeSetting } from '@wordpress/block-editor'; /** * Internal dependencies @@ -49,7 +49,7 @@ function BlockForType( { wrapperProps, blockWidth, } ) { - const defaultColors = useEditorFeature( 'color.palette' ) || emptyArray; + const defaultColors = useThemeSetting( 'color.palette' ) || emptyArray; const globalStyle = useGlobalStyles(); const mergedStyle = useMemo( () => { return getMergedGlobalStyles( 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 b115353e965de0..a062efb367e1bd 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 @@ -11,12 +11,12 @@ import { createHigherOrderComponent } from '@wordpress/compose'; /** * Internal dependencies */ -import useEditorFeature from '../use-editor-feature'; +import useThemeSetting from '../use-theme-setting'; export default createHigherOrderComponent( ( WrappedComponent ) => { return ( props ) => { - const colorsFeature = useEditorFeature( 'color.palette' ); - const disableCustomColorsFeature = ! useEditorFeature( 'color.custom' ); + const colorsFeature = useThemeSetting( 'color.palette' ); + const disableCustomColorsFeature = ! useThemeSetting( 'color.custom' ); const colors = props.colors === undefined ? colorsFeature : props.colors; const disableCustomColors = diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index acbdfbe5a58dfa..2d0ad0831c0f07 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -23,7 +23,7 @@ import { sprintf, __ } from '@wordpress/i18n'; */ import { getColorObjectByColorValue } from '../colors'; import { __experimentalGetGradientObjectByGradientValue } from '../gradients'; -import useEditorFeature from '../use-editor-feature'; +import useThemeSetting from '../use-theme-setting'; // translators: first %s: the color name or value (e.g. red or #ff0000) const colorIndicatorAriaLabel = __( '(Color: %s)' ); @@ -177,12 +177,12 @@ function ColorGradientControlInner( { function ColorGradientControlSelect( props ) { const colorGradientSettings = {}; - colorGradientSettings.colors = useEditorFeature( 'color.palette' ); - colorGradientSettings.gradients = useEditorFeature( 'color.gradients' ); - colorGradientSettings.disableCustomColors = ! useEditorFeature( + colorGradientSettings.colors = useThemeSetting( 'color.palette' ); + colorGradientSettings.gradients = useThemeSetting( 'color.gradients' ); + colorGradientSettings.disableCustomColors = ! useThemeSetting( 'color.custom' ); - colorGradientSettings.disableCustomGradients = ! useEditorFeature( + colorGradientSettings.disableCustomGradients = ! useThemeSetting( 'color.customGradient' ); diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js index 5b87595e7d5719..0209d5eedfb65f 100644 --- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js +++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js @@ -16,7 +16,7 @@ import { sprintf, __ } from '@wordpress/i18n'; import ColorGradientControl from './control'; import { getColorObjectByColorValue } from '../colors'; import { __experimentalGetGradientObjectByGradientValue } from '../gradients'; -import useEditorFeature from '../use-editor-feature'; +import useThemeSetting from '../use-theme-setting'; // translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000) const colorIndicatorAriaLabel = __( '(%s: color %s)' ); @@ -148,12 +148,12 @@ export const PanelColorGradientSettingsInner = ( { const PanelColorGradientSettingsSelect = ( props ) => { const colorGradientSettings = {}; - colorGradientSettings.colors = useEditorFeature( 'color.palette' ); - colorGradientSettings.gradients = useEditorFeature( 'color.gradients' ); - colorGradientSettings.disableCustomColors = ! useEditorFeature( + colorGradientSettings.colors = useThemeSetting( 'color.palette' ); + colorGradientSettings.gradients = useThemeSetting( 'color.gradients' ); + colorGradientSettings.disableCustomColors = ! useThemeSetting( 'color.custom' ); - colorGradientSettings.disableCustomGradients = ! useEditorFeature( + colorGradientSettings.disableCustomGradients = ! useThemeSetting( 'color.customGradient' ); return ( diff --git a/packages/block-editor/src/components/colors/use-colors.js b/packages/block-editor/src/components/colors/use-colors.js index 3d4cbf717ad5e5..0bde4097ef4203 100644 --- a/packages/block-editor/src/components/colors/use-colors.js +++ b/packages/block-editor/src/components/colors/use-colors.js @@ -25,7 +25,7 @@ import { import InspectorControls from '../inspector-controls'; import { useBlockEditContext } from '../block-edit'; import ColorPanel from './color-panel'; -import useEditorFeature from '../use-editor-feature'; +import useThemeSetting from '../use-theme-setting'; import { store as blockEditorStore } from '../../store'; function getComputedStyle( node ) { @@ -63,8 +63,7 @@ export default function __experimentalUseColors( deps = [] ) { const { clientId } = useBlockEditContext(); - const settingsColors = - useEditorFeature( 'color.palette' ) || DEFAULT_COLORS; + const settingsColors = useThemeSetting( 'color.palette' ) || DEFAULT_COLORS; const { attributes } = useSelect( ( select ) => { const { getBlockAttributes } = select( blockEditorStore ); diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js index 324c31b72a4812..fe4813fd9e9c3a 100644 --- a/packages/block-editor/src/components/colors/with-colors.js +++ b/packages/block-editor/src/components/colors/with-colors.js @@ -18,7 +18,7 @@ import { getColorObjectByAttributeValues, getMostReadableColor, } from './utils'; -import useEditorFeature from '../use-editor-feature'; +import useThemeSetting from '../use-theme-setting'; const DEFAULT_COLORS = []; @@ -47,8 +47,7 @@ const withCustomColorPalette = ( colorsArray ) => const withEditorColorPalette = () => createHigherOrderComponent( ( WrappedComponent ) => ( props ) => { - const colors = - useEditorFeature( 'color.palette' ) || DEFAULT_COLORS; + const colors = useThemeSetting( 'color.palette' ) || DEFAULT_COLORS; return ; }, 'withEditorColorPalette' diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index 0f15033ee55a85..dd5e5573b1bf13 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import useEditorFeature from '../use-editor-feature'; +import useThemeSetting from '../use-theme-setting'; export default function FontFamilyControl( { value = '', @@ -20,9 +20,7 @@ export default function FontFamilyControl( { fontFamilies, ...props } ) { - const blockLevelFontFamilies = useEditorFeature( - 'typography.fontFamilies' - ); + const blockLevelFontFamilies = useThemeSetting( 'typography.fontFamilies' ); if ( ! fontFamilies ) { fontFamilies = blockLevelFontFamilies; } 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 ed9291814292c5..0c9745e7bdf4ba 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,11 +6,11 @@ import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components'; /** * Internal dependencies */ -import useEditorFeature from '../use-editor-feature'; +import useThemeSetting from '../use-theme-setting'; function FontSizePicker( props ) { - const fontSizes = useEditorFeature( 'typography.fontSizes' ); - const disableCustomFontSizes = ! useEditorFeature( + const fontSizes = useThemeSetting( 'typography.fontSizes' ); + const disableCustomFontSizes = ! useThemeSetting( 'typography.customFontSize' ); 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 67d0b51c87b109..a47e3cb8345dab 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 @@ -13,7 +13,7 @@ import { Component } from '@wordpress/element'; * Internal dependencies */ import { getFontSize, getFontSizeClass } from './utils'; -import useEditorFeature from '../use-editor-feature'; +import useThemeSetting from '../use-theme-setting'; const DEFAULT_FONT_SIZES = []; @@ -49,7 +49,7 @@ export default ( ...fontSizeNames ) => { createHigherOrderComponent( ( WrappedComponent ) => ( props ) => { const fontSizes = - useEditorFeature( 'typography.fontSizes' ) || + useThemeSetting( 'typography.fontSizes' ) || DEFAULT_FONT_SIZES; return ( { const { getBlockAttributes } = select( blockEditorStore ); diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 17b324df56b50d..41418087c94451 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -142,4 +142,4 @@ export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursi export { default as BlockEditorProvider } from './provider'; export { default as __experimentalUseSimulatedMediaQuery } from './use-simulated-media-query'; -export { default as __experimentalUseEditorFeature } from './use-editor-feature'; +export { default as useThemeSetting } from './use-theme-setting'; diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index bb6175c5ffe93d..3e51a8209d3fed 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -49,7 +49,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 __experimentalUseEditorFeature } from './use-editor-feature'; +export { default as useThemeSetting } from './use-theme-setting'; export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders'; export { default as Warning } from './warning'; diff --git a/packages/block-editor/src/components/unit-control/index.js b/packages/block-editor/src/components/unit-control/index.js index 6de2564178f60b..46e873f629f1c9 100644 --- a/packages/block-editor/src/components/unit-control/index.js +++ b/packages/block-editor/src/components/unit-control/index.js @@ -6,7 +6,7 @@ import { __experimentalUnitControl as BaseUnitControl } from '@wordpress/compone /** * Internal dependencies */ -import useEditorFeature from '../use-editor-feature'; +import useThemeSetting from '../use-theme-setting'; export default function UnitControl( { units: unitsProp, ...props } ) { const units = useCustomUnits( unitsProp ); @@ -36,7 +36,7 @@ function filterUnitsWithSettings( settings = [], units = [] ) { * @return {Array} Filtered units based on settings. */ export function useCustomUnits( units ) { - const availableUnits = useEditorFeature( 'spacing.units' ); + const availableUnits = useThemeSetting( 'spacing.units' ); const usedUnits = filterUnitsWithSettings( ! availableUnits ? [] : availableUnits, units diff --git a/packages/block-editor/src/components/use-editor-feature/index.js b/packages/block-editor/src/components/use-theme-setting/index.js similarity index 82% rename from packages/block-editor/src/components/use-editor-feature/index.js rename to packages/block-editor/src/components/use-theme-setting/index.js index 1065859edc910b..5a36e338a4244d 100644 --- a/packages/block-editor/src/components/use-editor-feature/index.js +++ b/packages/block-editor/src/components/use-theme-setting/index.js @@ -50,19 +50,19 @@ const deprecatedFlags = { }; /** - * Hook that retrieves the setting for the given editor feature. + * Hook that retrieves the theme setting. * It works with nested objects using by finding the value at path. * - * @param {string} featurePath The path to the feature. + * @param {string} path The path to the setting. * * @return {any} Returns the value defined for the setting. * * @example * ```js - * const isEnabled = useEditorFeature( 'typography.dropCap' ); + * const isEnabled = useThemeSetting( 'typography.dropCap' ); * ``` */ -export default function useEditorFeature( featurePath ) { +export default function useThemeSetting( path ) { const { name: blockName } = useBlockEditContext(); const setting = useSelect( @@ -71,8 +71,8 @@ export default function useEditorFeature( featurePath ) { // 1 - Use __experimental features, if available. // We cascade to the all value if the block one is not available. - const defaultsPath = `__experimentalFeatures.${ featurePath }`; - const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ featurePath }`; + const defaultsPath = `__experimentalFeatures.${ path }`; + const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`; const experimentalFeaturesResult = get( settings, blockPath ) ?? get( settings, defaultsPath ); if ( experimentalFeaturesResult !== undefined ) { @@ -80,8 +80,8 @@ export default function useEditorFeature( featurePath ) { } // 2 - Use deprecated settings, otherwise. - const deprecatedSettingsValue = deprecatedFlags[ featurePath ] - ? deprecatedFlags[ featurePath ]( settings ) + const deprecatedSettingsValue = deprecatedFlags[ path ] + ? deprecatedFlags[ path ]( settings ) : undefined; if ( deprecatedSettingsValue !== undefined ) { return deprecatedSettingsValue; @@ -91,9 +91,9 @@ export default function useEditorFeature( featurePath ) { // 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 featurePath === 'typography.dropCap' ? true : undefined; + return path === 'typography.dropCap' ? true : undefined; }, - [ blockName, featurePath ] + [ blockName, path ] ); return setting; diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js index 511983d35fab1c..efc327dbaae848 100644 --- a/packages/block-editor/src/hooks/border-color.js +++ b/packages/block-editor/src/hooks/border-color.js @@ -19,7 +19,7 @@ import { getColorObjectByColorValue, getColorObjectByAttributeValues, } from '../components/colors'; -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; import { hasBorderSupport, shouldSkipSerialization } from './border'; import { cleanEmptyObject } from './utils'; @@ -44,10 +44,9 @@ export function BorderColorEdit( props ) { attributes: { borderColor, style }, setAttributes, } = props; - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; - - const disableCustomColors = ! useEditorFeature( 'color.custom' ); - const disableCustomGradients = ! useEditorFeature( 'color.customGradient' ); + const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; + const disableCustomColors = ! useThemeSetting( 'color.custom' ); + const disableCustomGradients = ! useThemeSetting( 'color.customGradient' ); const onChangeColor = ( value ) => { const colorObject = getColorObjectByColorValue( colors, value ); @@ -181,7 +180,7 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; const { borderColor } = attributes; - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; + const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; if ( ! hasBorderSupport( name, 'color' ) || diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index 9b4aa499f54cdd..93357fd55957a2 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/packages/block-editor/src/hooks/border.js @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import InspectorControls from '../components/inspector-controls'; -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; import { BorderColorEdit } from './border-color'; import { BorderRadiusEdit } from './border-radius'; import { BorderStyleEdit } from './border-style'; @@ -23,19 +23,19 @@ export function BorderPanel( props ) { const isSupported = hasBorderSupport( props.name ); const isColorSupported = - useEditorFeature( 'border.customColor' ) && + useThemeSetting( 'border.customColor' ) && hasBorderSupport( props.name, 'color' ); const isRadiusSupported = - useEditorFeature( 'border.customRadius' ) && + useThemeSetting( 'border.customRadius' ) && hasBorderSupport( props.name, 'radius' ); const isStyleSupported = - useEditorFeature( 'border.customStyle' ) && + useThemeSetting( 'border.customStyle' ) && hasBorderSupport( props.name, 'style' ); const isWidthSupported = - useEditorFeature( 'border.customWidth' ) && + useThemeSetting( 'border.customWidth' ) && hasBorderSupport( props.name, 'width' ); if ( isDisabled || ! isSupported ) { @@ -103,10 +103,10 @@ export function shouldSkipSerialization( blockType ) { */ const useIsBorderDisabled = () => { const configs = [ - ! useEditorFeature( 'border.customColor' ), - ! useEditorFeature( 'border.customRadius' ), - ! useEditorFeature( 'border.customStyle' ), - ! useEditorFeature( 'border.customWidth' ), + ! useThemeSetting( 'border.customColor' ), + ! useThemeSetting( 'border.customRadius' ), + ! useThemeSetting( 'border.customStyle' ), + ! useThemeSetting( 'border.customWidth' ), ]; return configs.every( Boolean ); diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 431e1956989ac4..a009956f759e1f 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -28,7 +28,7 @@ import { } from '../components/gradients'; import { cleanEmptyObject } from './utils'; import ColorPanel from './color-panel'; -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; export const COLOR_SUPPORT_KEY = 'color'; const EMPTY_ARRAY = []; @@ -214,9 +214,9 @@ const getLinkColorFromAttributeValue = ( colors, value ) => { */ export function ColorEdit( props ) { const { name: blockName, attributes } = props; - const isLinkColorEnabled = useEditorFeature( 'color.link' ); - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY; + const isLinkColorEnabled = useThemeSetting( 'color.link' ); + const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY; // Shouldn't be needed but right now the ColorGradientsPanel // can trigger both onChangeColor and onChangeBackground @@ -386,7 +386,7 @@ export const withColorPaletteStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; const { backgroundColor, textColor } = attributes; - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; + const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) { return ; } diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index dd2d27a784d7b2..0d3e3c55968fba 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -18,7 +18,7 @@ import { addFilter } from '@wordpress/hooks'; import { BlockControls, __experimentalDuotoneControl as DuotoneControl, - __experimentalUseEditorFeature as useEditorFeature, + useThemeSetting, } from '../components'; /** @@ -123,8 +123,8 @@ function DuotonePanel( { attributes, setAttributes } ) { const style = attributes?.style; const duotone = style?.color?.duotone; - const duotonePalette = useEditorFeature( 'color.duotone' ); - const colorPalette = useEditorFeature( 'color.palette' ); + const duotonePalette = useThemeSetting( 'color.duotone' ); + const colorPalette = useThemeSetting( 'color.palette' ); return ( diff --git a/packages/block-editor/src/hooks/font-appearance.js b/packages/block-editor/src/hooks/font-appearance.js index 52661ce0364118..44b5534ba0aab8 100644 --- a/packages/block-editor/src/hooks/font-appearance.js +++ b/packages/block-editor/src/hooks/font-appearance.js @@ -7,7 +7,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; * Internal dependencies */ import FontAppearanceControl from '../components/font-appearance-control'; -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; import { cleanEmptyObject } from './utils'; /** @@ -76,7 +76,7 @@ export function FontAppearanceEdit( props ) { */ export function useIsFontStyleDisabled( { name: blockName } = {} ) { const styleSupport = hasBlockSupport( blockName, FONT_STYLE_SUPPORT_KEY ); - const hasFontStyles = useEditorFeature( 'typography.customFontStyle' ); + const hasFontStyles = useThemeSetting( 'typography.customFontStyle' ); return ! styleSupport || ! hasFontStyles; } @@ -91,7 +91,7 @@ export function useIsFontStyleDisabled( { name: blockName } = {} ) { */ export function useIsFontWeightDisabled( { name: blockName } = {} ) { const weightSupport = hasBlockSupport( blockName, FONT_WEIGHT_SUPPORT_KEY ); - const hasFontWeights = useEditorFeature( 'typography.customFontWeight' ); + const hasFontWeights = useThemeSetting( 'typography.customFontWeight' ); return ! weightSupport || ! hasFontWeights; } diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index 859606e9cffb1c..6fcaf1ec08614b 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -12,7 +12,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; * Internal dependencies */ import { cleanEmptyObject } from './utils'; -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; import FontFamilyControl from '../components/font-family'; export const FONT_FAMILY_SUPPORT_KEY = '__experimentalFontFamily'; @@ -35,7 +35,7 @@ export function FontFamilyEdit( { setAttributes, attributes: { style = {} }, } ) { - const fontFamilies = useEditorFeature( 'typography.fontFamilies' ); + const fontFamilies = useThemeSetting( 'typography.fontFamilies' ); const isDisable = useIsFontFamilyDisabled( { name } ); if ( isDisable ) { @@ -82,7 +82,7 @@ export function FontFamilyEdit( { * @return {boolean} Whether setting is disabled. */ export function useIsFontFamilyDisabled( { name } ) { - const fontFamilies = useEditorFeature( 'typography.fontFamilies' ); + const fontFamilies = useThemeSetting( 'typography.fontFamilies' ); return ( ! fontFamilies || fontFamilies.length === 0 || diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 152f20602d65a1..88d94866858927 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -16,7 +16,7 @@ import { FontSizePicker, } from '../components/font-sizes'; import { cleanEmptyObject } from './utils'; -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; export const FONT_SIZE_SUPPORT_KEY = 'fontSize'; @@ -109,7 +109,7 @@ export function FontSizeEdit( props ) { setAttributes, } = props; const isDisabled = useIsFontSizeDisabled( props ); - const fontSizes = useEditorFeature( 'typography.fontSizes' ); + const fontSizes = useThemeSetting( 'typography.fontSizes' ); const onChange = ( value ) => { const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug; @@ -149,7 +149,7 @@ export function FontSizeEdit( props ) { * @return {boolean} Whether setting is disabled. */ export function useIsFontSizeDisabled( { name: blockName } = {} ) { - const fontSizes = useEditorFeature( 'typography.fontSizes' ); + const fontSizes = useThemeSetting( 'typography.fontSizes' ); const hasFontSizes = !! fontSizes?.length; return ( @@ -167,7 +167,7 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) { */ const withFontSizeInlineStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const fontSizes = useEditorFeature( 'typography.fontSizes' ); + const fontSizes = useThemeSetting( '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 fc8feb56e8875c..6b5a812ac8ef57 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -26,7 +26,7 @@ import { Icon, positionCenter, stretchWide } from '@wordpress/icons'; */ import { store as blockEditorStore } from '../store'; import { InspectorControls } from '../components'; -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; import { LayoutStyle } from '../components/block-list/layout'; const isWeb = Platform.OS === 'web'; @@ -61,7 +61,7 @@ const CSS_UNITS = [ function LayoutPanel( { setAttributes, attributes } ) { const { layout = {} } = attributes; const { wideSize, contentSize, inherit = false } = layout; - const defaultLayout = useEditorFeature( 'layout' ); + const defaultLayout = useThemeSetting( 'layout' ); const themeSupportsLayout = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings().supportsLayout; @@ -215,7 +215,7 @@ export const withLayoutStyles = createHigherOrderComponent( const { name, attributes } = props; const supportLayout = hasBlockSupport( name, '__experimentalLayout' ); const id = useInstanceId( BlockListBlock ); - const defaultLayout = useEditorFeature( 'layout' ) || {}; + const defaultLayout = useThemeSetting( 'layout' ) || {}; if ( ! supportLayout ) { return ; } diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js index d47e5eadf0788f..1c1414fde366fa 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 useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; export const LINE_HEIGHT_SUPPORT_KEY = 'lineHeight'; @@ -56,7 +56,7 @@ export function LineHeightEdit( props ) { * @return {boolean} Whether setting is disabled. */ export function useIsLineHeightDisabled( { name: blockName } = {} ) { - const isDisabled = ! useEditorFeature( 'typography.customLineHeight' ); + const isDisabled = ! useThemeSetting( 'typography.customLineHeight' ); return ( ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index a400a1eccb31a4..a28e0852960843 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -9,7 +9,7 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; /** * Internal dependencies */ -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing'; import { cleanEmptyObject } from './utils'; import { useCustomUnits } from '../components/unit-control'; @@ -32,7 +32,7 @@ export function hasMarginSupport( blockType ) { * @return {boolean} Whether margin setting is disabled. */ export function useIsMarginDisabled( { name: blockName } = {} ) { - const isDisabled = ! useEditorFeature( 'spacing.customMargin' ); + const isDisabled = ! useThemeSetting( 'spacing.customMargin' ); return ! hasMarginSupport( blockName ) || isDisabled; } diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index e366ed4de53dc9..2e0b048719de36 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -9,7 +9,7 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; /** * Internal dependencies */ -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing'; import { cleanEmptyObject } from './utils'; import { useCustomUnits } from '../components/unit-control'; @@ -61,7 +61,7 @@ export function hasPaddingSupport( blockType ) { * @return {boolean} Whether padding setting is disabled. */ export function useIsPaddingDisabled( { name: blockName } = {} ) { - const isDisabled = ! useEditorFeature( 'spacing.customPadding' ); + const isDisabled = ! useThemeSetting( 'spacing.customPadding' ); return ! hasPaddingSupport( blockName ) || isDisabled; } diff --git a/packages/block-editor/src/hooks/text-decoration.js b/packages/block-editor/src/hooks/text-decoration.js index d2433277e8d4b8..21d749e3465059 100644 --- a/packages/block-editor/src/hooks/text-decoration.js +++ b/packages/block-editor/src/hooks/text-decoration.js @@ -7,7 +7,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; * Internal dependencies */ import TextDecorationControl from '../components/text-decoration-control'; -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; import { cleanEmptyObject } from './utils'; /** @@ -64,7 +64,7 @@ export function useIsTextDecorationDisabled( { name: blockName } = {} ) { blockName, TEXT_DECORATION_SUPPORT_KEY ); - const hasTextDecoration = useEditorFeature( + const hasTextDecoration = useThemeSetting( 'typography.customTextDecorations' ); diff --git a/packages/block-editor/src/hooks/text-transform.js b/packages/block-editor/src/hooks/text-transform.js index fd317861f0e717..ff3e23508616d4 100644 --- a/packages/block-editor/src/hooks/text-transform.js +++ b/packages/block-editor/src/hooks/text-transform.js @@ -7,7 +7,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; * Internal dependencies */ import TextTransformControl from '../components/text-transform-control'; -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; import { cleanEmptyObject } from './utils'; /** @@ -64,7 +64,7 @@ export function useIsTextTransformDisabled( { name: blockName } = {} ) { blockName, TEXT_TRANSFORM_SUPPORT_KEY ); - const hasTextTransforms = useEditorFeature( + const hasTextTransforms = useThemeSetting( 'typography.customTextTransforms' ); return notSupported || ! hasTextTransforms; diff --git a/packages/block-editor/src/hooks/use-border-props.js b/packages/block-editor/src/hooks/use-border-props.js index 1e8a853057eeb9..c74609b5bf43f9 100644 --- a/packages/block-editor/src/hooks/use-border-props.js +++ b/packages/block-editor/src/hooks/use-border-props.js @@ -11,7 +11,7 @@ import { getColorClassName, getColorObjectByAttributeValues, } from '../components/colors'; -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; // This utility is intended to assist where the serialization of the border // block support is being skipped for a block but the border related CSS classes @@ -55,7 +55,7 @@ export function getBorderClassesAndStyles( { borderColor, style } ) { * @return {Object} ClassName & style props from border block support. */ export function useBorderProps( attributes ) { - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; + const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; const borderProps = getBorderClassesAndStyles( attributes ); // Force inline style to apply border color when themes do not load their diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js index 4522f5e34e8d2f..2385a19c80b409 100644 --- a/packages/block-editor/src/hooks/use-color-props.js +++ b/packages/block-editor/src/hooks/use-color-props.js @@ -15,7 +15,7 @@ import { __experimentalGetGradientClass, getGradientValueBySlug, } from '../components/gradients'; -import useEditorFeature from '../components/use-editor-feature'; +import useThemeSetting from '../components/use-theme-setting'; // The code in this file has largely been lifted from the color block support // hook. @@ -82,8 +82,8 @@ export function getColorClassesAndStyles( attributes ) { export function useColorProps( attributes ) { const { backgroundColor, textColor, gradient } = attributes; - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY; + const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY; const colorProps = getColorClassesAndStyles( attributes ); diff --git a/packages/block-library/src/button/color-edit.js b/packages/block-library/src/button/color-edit.js index e1ea55bf744e65..0f651e29586506 100644 --- a/packages/block-library/src/button/color-edit.js +++ b/packages/block-library/src/button/color-edit.js @@ -26,7 +26,7 @@ import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings, ContrastChecker, InspectorControls, - __experimentalUseEditorFeature as useEditorFeature, + useThemeSetting, } from '@wordpress/block-editor'; const EMPTY_ARRAY = []; @@ -125,8 +125,8 @@ function ColorPanel( { settings, clientId, enableContrastChecking = true } ) { */ function ColorEdit( props ) { const { attributes } = props; - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY; + const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY; // Shouldn't be needed but right now the ColorGradientsPanel // can trigger both onChangeColor and onChangeBackground diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 721b988b01b86c..42a893dde46e75 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -42,7 +42,7 @@ import { MediaUploadProgress, withColors, __experimentalUseGradient, - __experimentalUseEditorFeature as useEditorFeature, + useThemeSetting, store as blockEditorStore, } from '@wordpress/block-editor'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; @@ -139,7 +139,7 @@ const Cover = ( { const isImage = backgroundType === MEDIA_TYPE_IMAGE; const THEME_COLORS_COUNT = 4; - const colorsDefault = useEditorFeature( 'color.palette' ) || []; + const colorsDefault = useThemeSetting( 'color.palette' ) || []; const coverDefaultPalette = { colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ), }; diff --git a/packages/block-library/src/cover/overlay-color-settings.native.js b/packages/block-library/src/cover/overlay-color-settings.native.js index fec53f8add57f8..62e5c721c3a9cb 100644 --- a/packages/block-library/src/cover/overlay-color-settings.native.js +++ b/packages/block-library/src/cover/overlay-color-settings.native.js @@ -12,7 +12,7 @@ import { getGradientValueBySlug, getGradientSlugByValue, __experimentalPanelColorGradientSettings as PanelColorGradientSettings, - __experimentalUseEditorFeature as useEditorFeature, + useThemeSetting, } from '@wordpress/block-editor'; import { useMemo } from '@wordpress/element'; @@ -24,8 +24,8 @@ function OverlayColorSettings( { setAttributes, } ) { const EMPTY_ARRAY = []; - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY; + const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY; const gradientValue = customGradient || getGradientValueBySlug( gradients, gradient ); diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index bb88f00772a7e0..f916bba1037029 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -7,7 +7,7 @@ import { useBlockProps, InspectorAdvancedControls, __experimentalUseInnerBlocksProps as useInnerBlocksProps, - __experimentalUseEditorFeature as useEditorFeature, + useThemeSetting, store as blockEditorStore, } from '@wordpress/block-editor'; import { SelectControl } from '@wordpress/components'; @@ -25,7 +25,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { }, [ clientId ] ); - const defaultLayout = useEditorFeature( 'layout' ) || {}; + const defaultLayout = useThemeSetting( 'layout' ) || {}; const { tagName: TagName = 'div', templateLock, layout = {} } = attributes; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; const { contentSize, wideSize } = usedLayout; diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 7eda022a95bc92..a82e6a0149b00f 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, - __experimentalUseEditorFeature as useEditorFeature, + useThemeSetting, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { formatLtr } from '@wordpress/icons'; @@ -55,7 +55,7 @@ function ParagraphBlock( { clientId, } ) { const { align, content, direction, dropCap, placeholder } = attributes; - const isDropCapFeatureEnabled = useEditorFeature( 'typography.dropCap' ); + const isDropCapFeatureEnabled = useThemeSetting( 'typography.dropCap' ); const blockProps = useBlockProps( { className: classnames( { 'has-drop-cap': dropCap, diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index 88ee3d2098b63d..ccda954dd5018f 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/packages/block-library/src/post-content/edit.js @@ -6,7 +6,7 @@ import { useSelect } from '@wordpress/data'; import { useBlockProps, __experimentalUseInnerBlocksProps as useInnerBlocksProps, - __experimentalUseEditorFeature as useEditorFeature, + useThemeSetting, __experimentalUseNoRecursiveRenders as useNoRecursiveRenders, store as blockEditorStore, Warning, @@ -18,7 +18,7 @@ function Content( { layout, postType, postId } ) { const { getSettings } = select( blockEditorStore ); return getSettings()?.supportsLayout; }, [] ); - const defaultLayout = useEditorFeature( 'layout' ) || {}; + const defaultLayout = useThemeSetting( 'layout' ) || {}; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; const { contentSize, wideSize } = usedLayout; const alignments = 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 6ac67ee109faa3..160d11aa3e9081 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, __experimentalUseInnerBlocksProps as useInnerBlocksProps, - __experimentalUseEditorFeature as useEditorFeature, + useThemeSetting, store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; @@ -21,7 +21,7 @@ export default function TemplatePartInnerBlocks( { const { getSettings } = select( blockEditorStore ); return getSettings()?.supportsLayout; }, [] ); - const defaultLayout = useEditorFeature( 'layout' ) || {}; + const defaultLayout = useThemeSetting( 'layout' ) || {}; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; const { contentSize, wideSize } = usedLayout; const alignments = diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 8faaf999ed09c2..5dcbaec19338fd 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -24,7 +24,7 @@ import { __experimentalUseResizeCanvas as useResizeCanvas, __unstableUseCanvasClickRedirect as useCanvasClickRedirect, __unstableEditorStyles as EditorStyles, - __experimentalUseEditorFeature as useEditorFeature, + useThemeSetting, __experimentalLayoutStyle as LayoutStyle, __unstableUseMouseMoveTypingReset as useMouseMoveTypingReset, __unstableIframe as Iframe, @@ -114,7 +114,7 @@ export default function VisualEditor( { styles } ) { borderBottom: 0, }; const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode ); - const defaultLayout = useEditorFeature( 'layout' ); + const defaultLayout = useThemeSetting( 'layout' ); const { contentSize, wideSize } = defaultLayout || {}; const alignments = contentSize || wideSize diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index f35b24baec2a2e..ded55c3553f178 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -103,12 +103,12 @@ function getPresetMetadataFromStyleProperty( styleProperty ) { export const LINK_COLOR = '--wp--style--color--link'; export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`; -export function useEditorFeature( featurePath, blockName = '' ) { +export function useThemeSetting( path, blockName = '' ) { const settings = useSelect( ( select ) => { return select( editSiteStore ).getSettings(); } ); - const topLevelPath = `__experimentalFeatures.${ featurePath }`; - const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ featurePath }`; + const topLevelPath = `__experimentalFeatures.${ path }`; + const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`; return get( settings, blockPath ) ?? get( settings, topLevelPath ); } diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js index 9b95c4d861b564..cdcebaccc25b6d 100644 --- a/packages/edit-site/src/components/sidebar/border-panel.js +++ b/packages/edit-site/src/components/sidebar/border-panel.js @@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useEditorFeature } from '../editor/utils'; +import { useThemeSetting } from '../editor/utils'; const MIN_BORDER_RADIUS_VALUE = 0; const MAX_BORDER_RADIUS_VALUE = 50; @@ -35,28 +35,28 @@ export function useHasBorderPanel( { supports, name } ) { function useHasBorderColorControl( { supports, name } ) { return ( - useEditorFeature( 'border.customColor', name ) && + useThemeSetting( 'border.customColor', name ) && supports.includes( 'borderColor' ) ); } function useHasBorderRadiusControl( { supports, name } ) { return ( - useEditorFeature( 'border.customRadius', name ) && + useThemeSetting( 'border.customRadius', name ) && supports.includes( 'borderRadius' ) ); } function useHasBorderStyleControl( { supports, name } ) { return ( - useEditorFeature( 'border.customStyle', name ) && + useThemeSetting( 'border.customStyle', name ) && supports.includes( 'borderStyle' ) ); } function useHasBorderWidthControl( { supports, name } ) { return ( - useEditorFeature( 'border.customWidth', name ) && + useThemeSetting( 'border.customWidth', name ) && supports.includes( 'borderWidth' ) ); } @@ -85,9 +85,9 @@ export default function BorderPanel( { ); // Border color. - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; - const disableCustomColors = ! useEditorFeature( 'color.custom' ); - const disableCustomGradients = ! useEditorFeature( 'color.customGradient' ); + const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; + const disableCustomColors = ! useThemeSetting( 'color.custom' ); + const disableCustomGradients = ! useThemeSetting( 'color.customGradient' ); const hasBorderColor = useHasBorderColorControl( { supports, name } ); const borderColor = getStyle( name, 'borderColor' ); diff --git a/packages/edit-site/src/components/sidebar/color-palette-panel.js b/packages/edit-site/src/components/sidebar/color-palette-panel.js index 8fae2214124d7e..1633dec1542b31 100644 --- a/packages/edit-site/src/components/sidebar/color-palette-panel.js +++ b/packages/edit-site/src/components/sidebar/color-palette-panel.js @@ -13,7 +13,7 @@ import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import { useEditorFeature } from '../editor/utils'; +import { useThemeSetting } from '../editor/utils'; import { store as editSiteStore } from '../../store'; /** @@ -32,7 +32,7 @@ export default function ColorPalettePanel( { getSetting, setSetting, } ) { - const colors = useEditorFeature( 'color.palette', contextName ); + const colors = useThemeSetting( 'color.palette', contextName ); const userColors = getSetting( contextName, 'color.palette' ); const immutableColorSlugs = useSelect( ( select ) => { diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 9cc2067decbbf7..e2db34451e5a33 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { LINK_COLOR, useEditorFeature } from '../editor/utils'; +import { LINK_COLOR, useThemeSetting } from '../editor/utils'; import ColorPalettePanel from './color-palette-panel'; export function useHasColorPanel( { supports } ) { @@ -26,10 +26,10 @@ export default function ColorPanel( { getSetting, setSetting, } ) { - const colors = useEditorFeature( 'color.palette', name ); - const disableCustomColors = ! useEditorFeature( 'color.custom', name ); - const gradients = useEditorFeature( 'color.gradients', name ); - const disableCustomGradients = ! useEditorFeature( + const colors = useThemeSetting( 'color.palette', name ); + const disableCustomColors = ! useThemeSetting( 'color.custom', name ); + const gradients = useThemeSetting( 'color.gradients', name ); + const disableCustomGradients = ! useThemeSetting( 'color.customGradient', name ); diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js index 8672ae5d5be26c..757a606ea2c675 100644 --- a/packages/edit-site/src/components/sidebar/spacing-panel.js +++ b/packages/edit-site/src/components/sidebar/spacing-panel.js @@ -12,7 +12,7 @@ import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block /** * Internal dependencies */ -import { useEditorFeature } from '../editor/utils'; +import { useThemeSetting } from '../editor/utils'; const isWeb = Platform.OS === 'web'; const CSS_UNITS = [ @@ -51,13 +51,13 @@ export function useHasSpacingPanel( context ) { } function useHasPadding( { name, supports } ) { - const settings = useEditorFeature( 'spacing.customPadding', name ); + const settings = useThemeSetting( 'spacing.customPadding', name ); return settings && supports.includes( 'padding' ); } function useHasMargin( { name, supports } ) { - const settings = useEditorFeature( 'spacing.customMargin', name ); + const settings = useThemeSetting( 'spacing.customMargin', name ); return settings && supports.includes( 'margin' ); } @@ -69,7 +69,7 @@ function filterUnitsWithSettings( settings = [], units = [] ) { } function useCustomUnits( { units, contextName } ) { - const availableUnits = useEditorFeature( 'spacing.units', contextName ); + const availableUnits = useThemeSetting( 'spacing.units', contextName ); const usedUnits = filterUnitsWithSettings( ! availableUnits ? [] : availableUnits, units diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index 766a738a42cd2e..8577cc513ce1bf 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useEditorFeature } from '../editor/utils'; +import { useThemeSetting } from '../editor/utils'; export function useHasTypographyPanel( { supports, name } ) { const hasLineHeight = useHasLineHeightControl( { supports, name } ); @@ -24,17 +24,17 @@ export function useHasTypographyPanel( { supports, name } ) { function useHasLineHeightControl( { supports, name } ) { return ( - useEditorFeature( 'typography.customLineHeight', name ) && + useThemeSetting( 'typography.customLineHeight', name ) && supports.includes( 'lineHeight' ) ); } function useHasAppearanceControl( { supports, name } ) { const hasFontStyles = - useEditorFeature( 'typography.customFontStyle', name ) && + useThemeSetting( 'typography.customFontStyle', name ) && supports.includes( 'fontStyle' ); const hasFontWeights = - useEditorFeature( 'typography.customFontWeight', name ) && + useThemeSetting( 'typography.customFontWeight', name ) && supports.includes( 'fontWeight' ); return hasFontStyles || hasFontWeights; } @@ -44,17 +44,17 @@ export default function TypographyPanel( { getStyle, setStyle, } ) { - const fontSizes = useEditorFeature( 'typography.fontSizes', name ); - const disableCustomFontSizes = ! useEditorFeature( + const fontSizes = useThemeSetting( 'typography.fontSizes', name ); + const disableCustomFontSizes = ! useThemeSetting( 'typography.customFontSize', name ); - const fontFamilies = useEditorFeature( 'typography.fontFamilies', name ); + const fontFamilies = useThemeSetting( 'typography.fontFamilies', name ); const hasFontStyles = - useEditorFeature( 'typography.customFontStyle', name ) && + useThemeSetting( 'typography.customFontStyle', name ) && supports.includes( 'fontStyle' ); const hasFontWeights = - useEditorFeature( 'typography.customFontWeight', name ) && + useThemeSetting( 'typography.customFontWeight', name ) && supports.includes( 'fontWeight' ); const hasLineHeightEnabled = useHasLineHeightControl( { supports, name } ); const hasAppearanceControl = useHasAppearanceControl( { supports, name } ); diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js index b3083b35b79965..57f1a3502b7b41 100644 --- a/packages/format-library/src/text-color/index.js +++ b/packages/format-library/src/text-color/index.js @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; import { useCallback, useMemo, useState } from '@wordpress/element'; import { RichTextToolbarButton, - __experimentalUseEditorFeature as useEditorFeature, + useThemeSetting, } from '@wordpress/block-editor'; import { Icon, textColor as textColorIcon } from '@wordpress/icons'; import { removeFormat } from '@wordpress/rich-text'; @@ -32,8 +32,8 @@ function TextColorEdit( { activeAttributes, contentRef, } ) { - const allowCustomControl = useEditorFeature( 'color.custom' ); - const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; + const allowCustomControl = useThemeSetting( 'color.custom' ); + const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; const [ isAddingColor, setIsAddingColor ] = useState( false ); const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [ setIsAddingColor, From 33973ec50eff12be96e8605e1c7b8a41eb636ce8 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 11 May 2021 10:11:13 +0100 Subject: [PATCH 2/2] Rename to useSetting --- packages/block-editor/README.md | 6 +++--- .../src/components/block-list/block.native.js | 4 ++-- .../color-palette/with-color-context.js | 6 +++--- .../src/components/colors-gradients/control.js | 12 +++++------- .../panel-color-gradient-settings.js | 12 +++++------- .../src/components/colors/use-colors.js | 4 ++-- .../src/components/colors/with-colors.js | 4 ++-- .../src/components/font-family/index.js | 4 ++-- .../components/font-sizes/font-size-picker.js | 8 +++----- .../components/font-sizes/with-font-sizes.js | 4 ++-- .../src/components/gradient-picker/control.js | 6 +++--- .../src/components/gradient-picker/index.js | 6 +++--- .../src/components/gradient-picker/panel.js | 4 ++-- .../src/components/gradients/use-gradient.js | 4 ++-- packages/block-editor/src/components/index.js | 2 +- .../src/components/index.native.js | 2 +- .../src/components/unit-control/index.js | 4 ++-- .../index.js | 6 +++--- .../block-editor/src/hooks/border-color.js | 10 +++++----- packages/block-editor/src/hooks/border.js | 18 +++++++++--------- packages/block-editor/src/hooks/color.js | 10 +++++----- packages/block-editor/src/hooks/duotone.js | 6 +++--- .../block-editor/src/hooks/font-appearance.js | 6 +++--- packages/block-editor/src/hooks/font-family.js | 6 +++--- packages/block-editor/src/hooks/font-size.js | 8 ++++---- packages/block-editor/src/hooks/layout.js | 6 +++--- packages/block-editor/src/hooks/line-height.js | 4 ++-- packages/block-editor/src/hooks/margin.js | 4 ++-- packages/block-editor/src/hooks/padding.js | 4 ++-- .../block-editor/src/hooks/text-decoration.js | 6 ++---- .../block-editor/src/hooks/text-transform.js | 6 ++---- .../block-editor/src/hooks/use-border-props.js | 4 ++-- .../block-editor/src/hooks/use-color-props.js | 6 +++--- .../block-library/src/button/color-edit.js | 6 +++--- .../block-library/src/cover/edit.native.js | 4 ++-- .../src/cover/overlay-color-settings.native.js | 6 +++--- packages/block-library/src/group/edit.js | 4 ++-- packages/block-library/src/paragraph/edit.js | 4 ++-- .../block-library/src/post-content/edit.js | 4 ++-- .../src/template-part/edit/inner-blocks.js | 4 ++-- .../src/components/visual-editor/index.js | 4 ++-- .../edit-site/src/components/editor/utils.js | 2 +- .../src/components/sidebar/border-panel.js | 16 ++++++++-------- .../components/sidebar/color-palette-panel.js | 4 ++-- .../src/components/sidebar/color-panel.js | 13 +++++-------- .../src/components/sidebar/spacing-panel.js | 8 ++++---- .../src/components/sidebar/typography-panel.js | 18 +++++++++--------- .../format-library/src/text-color/index.js | 9 +++------ 48 files changed, 146 insertions(+), 162 deletions(-) rename packages/block-editor/src/components/{use-theme-setting => use-setting}/index.js (94%) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 0caffaf083d513..726990f0ac3637 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -654,15 +654,15 @@ _Returns_ - `Object`: Props to pass to the element to mark as a block. -# **useThemeSetting** +# **useSetting** -Hook that retrieves the theme setting. +Hook that retrieves the editor setting. It works with nested objects using by finding the value at path. _Usage_ ```js -const isEnabled = useThemeSetting( 'typography.dropCap' ); +const isEnabled = useSetting( 'typography.dropCap' ); ``` _Parameters_ 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 577d21b43c3b2d..6c576ebe95957a 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -20,7 +20,7 @@ import { getBlockType, __experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel, } from '@wordpress/blocks'; -import { useThemeSetting } from '@wordpress/block-editor'; +import { useSetting } from '@wordpress/block-editor'; /** * Internal dependencies @@ -49,7 +49,7 @@ function BlockForType( { wrapperProps, blockWidth, } ) { - const defaultColors = useThemeSetting( 'color.palette' ) || emptyArray; + const defaultColors = useSetting( 'color.palette' ) || emptyArray; const globalStyle = useGlobalStyles(); const mergedStyle = useMemo( () => { return getMergedGlobalStyles( 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 a062efb367e1bd..85bff66fa23d3a 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 @@ -11,12 +11,12 @@ import { createHigherOrderComponent } from '@wordpress/compose'; /** * Internal dependencies */ -import useThemeSetting from '../use-theme-setting'; +import useSetting from '../use-setting'; export default createHigherOrderComponent( ( WrappedComponent ) => { return ( props ) => { - const colorsFeature = useThemeSetting( 'color.palette' ); - const disableCustomColorsFeature = ! useThemeSetting( 'color.custom' ); + const colorsFeature = useSetting( 'color.palette' ); + const disableCustomColorsFeature = ! useSetting( 'color.custom' ); const colors = props.colors === undefined ? colorsFeature : props.colors; const disableCustomColors = diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 2d0ad0831c0f07..1fca410bc121f8 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -23,7 +23,7 @@ import { sprintf, __ } from '@wordpress/i18n'; */ import { getColorObjectByColorValue } from '../colors'; import { __experimentalGetGradientObjectByGradientValue } from '../gradients'; -import useThemeSetting from '../use-theme-setting'; +import useSetting from '../use-setting'; // translators: first %s: the color name or value (e.g. red or #ff0000) const colorIndicatorAriaLabel = __( '(Color: %s)' ); @@ -177,12 +177,10 @@ function ColorGradientControlInner( { function ColorGradientControlSelect( props ) { const colorGradientSettings = {}; - colorGradientSettings.colors = useThemeSetting( 'color.palette' ); - colorGradientSettings.gradients = useThemeSetting( 'color.gradients' ); - colorGradientSettings.disableCustomColors = ! useThemeSetting( - 'color.custom' - ); - colorGradientSettings.disableCustomGradients = ! useThemeSetting( + colorGradientSettings.colors = useSetting( 'color.palette' ); + colorGradientSettings.gradients = useSetting( 'color.gradients' ); + colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' ); + colorGradientSettings.disableCustomGradients = ! useSetting( 'color.customGradient' ); diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js index 0209d5eedfb65f..b8b09461b5e79a 100644 --- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js +++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js @@ -16,7 +16,7 @@ import { sprintf, __ } from '@wordpress/i18n'; import ColorGradientControl from './control'; import { getColorObjectByColorValue } from '../colors'; import { __experimentalGetGradientObjectByGradientValue } from '../gradients'; -import useThemeSetting from '../use-theme-setting'; +import useSetting from '../use-setting'; // translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000) const colorIndicatorAriaLabel = __( '(%s: color %s)' ); @@ -148,12 +148,10 @@ export const PanelColorGradientSettingsInner = ( { const PanelColorGradientSettingsSelect = ( props ) => { const colorGradientSettings = {}; - colorGradientSettings.colors = useThemeSetting( 'color.palette' ); - colorGradientSettings.gradients = useThemeSetting( 'color.gradients' ); - colorGradientSettings.disableCustomColors = ! useThemeSetting( - 'color.custom' - ); - colorGradientSettings.disableCustomGradients = ! useThemeSetting( + colorGradientSettings.colors = useSetting( 'color.palette' ); + colorGradientSettings.gradients = useSetting( 'color.gradients' ); + colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' ); + colorGradientSettings.disableCustomGradients = ! useSetting( 'color.customGradient' ); return ( diff --git a/packages/block-editor/src/components/colors/use-colors.js b/packages/block-editor/src/components/colors/use-colors.js index 0bde4097ef4203..bec2f7ff83c7e4 100644 --- a/packages/block-editor/src/components/colors/use-colors.js +++ b/packages/block-editor/src/components/colors/use-colors.js @@ -25,7 +25,7 @@ import { import InspectorControls from '../inspector-controls'; import { useBlockEditContext } from '../block-edit'; import ColorPanel from './color-panel'; -import useThemeSetting from '../use-theme-setting'; +import useSetting from '../use-setting'; import { store as blockEditorStore } from '../../store'; function getComputedStyle( node ) { @@ -63,7 +63,7 @@ export default function __experimentalUseColors( deps = [] ) { const { clientId } = useBlockEditContext(); - const settingsColors = useThemeSetting( 'color.palette' ) || DEFAULT_COLORS; + const settingsColors = useSetting( 'color.palette' ) || DEFAULT_COLORS; const { attributes } = useSelect( ( select ) => { const { getBlockAttributes } = select( blockEditorStore ); diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js index fe4813fd9e9c3a..0dfe68314ff1fb 100644 --- a/packages/block-editor/src/components/colors/with-colors.js +++ b/packages/block-editor/src/components/colors/with-colors.js @@ -18,7 +18,7 @@ import { getColorObjectByAttributeValues, getMostReadableColor, } from './utils'; -import useThemeSetting from '../use-theme-setting'; +import useSetting from '../use-setting'; const DEFAULT_COLORS = []; @@ -47,7 +47,7 @@ const withCustomColorPalette = ( colorsArray ) => const withEditorColorPalette = () => createHigherOrderComponent( ( WrappedComponent ) => ( props ) => { - const colors = useThemeSetting( 'color.palette' ) || DEFAULT_COLORS; + const colors = useSetting( 'color.palette' ) || DEFAULT_COLORS; return ; }, 'withEditorColorPalette' diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js index dd5e5573b1bf13..7316a70df15da6 100644 --- a/packages/block-editor/src/components/font-family/index.js +++ b/packages/block-editor/src/components/font-family/index.js @@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import useThemeSetting from '../use-theme-setting'; +import useSetting from '../use-setting'; export default function FontFamilyControl( { value = '', @@ -20,7 +20,7 @@ export default function FontFamilyControl( { fontFamilies, ...props } ) { - const blockLevelFontFamilies = useThemeSetting( 'typography.fontFamilies' ); + const blockLevelFontFamilies = useSetting( 'typography.fontFamilies' ); if ( ! fontFamilies ) { fontFamilies = blockLevelFontFamilies; } 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 0c9745e7bdf4ba..79b33de08a66e2 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,13 +6,11 @@ import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components'; /** * Internal dependencies */ -import useThemeSetting from '../use-theme-setting'; +import useSetting from '../use-setting'; function FontSizePicker( props ) { - const fontSizes = useThemeSetting( 'typography.fontSizes' ); - const disableCustomFontSizes = ! useThemeSetting( - 'typography.customFontSize' - ); + const fontSizes = useSetting( 'typography.fontSizes' ); + const disableCustomFontSizes = ! useSetting( 'typography.customFontSize' ); return ( { createHigherOrderComponent( ( WrappedComponent ) => ( props ) => { const fontSizes = - useThemeSetting( 'typography.fontSizes' ) || + useSetting( 'typography.fontSizes' ) || DEFAULT_FONT_SIZES; return ( { const { getBlockAttributes } = select( blockEditorStore ); diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 41418087c94451..51d9ba8c1a0dbe 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -142,4 +142,4 @@ export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursi export { default as BlockEditorProvider } from './provider'; export { default as __experimentalUseSimulatedMediaQuery } from './use-simulated-media-query'; -export { default as useThemeSetting } from './use-theme-setting'; +export { default as useSetting } from './use-setting'; diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 3e51a8209d3fed..b3617e95ef63eb 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -49,7 +49,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 useThemeSetting } from './use-theme-setting'; +export { default as useSetting } from './use-setting'; export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders'; export { default as Warning } from './warning'; diff --git a/packages/block-editor/src/components/unit-control/index.js b/packages/block-editor/src/components/unit-control/index.js index 46e873f629f1c9..af8f65c2dee6c3 100644 --- a/packages/block-editor/src/components/unit-control/index.js +++ b/packages/block-editor/src/components/unit-control/index.js @@ -6,7 +6,7 @@ import { __experimentalUnitControl as BaseUnitControl } from '@wordpress/compone /** * Internal dependencies */ -import useThemeSetting from '../use-theme-setting'; +import useSetting from '../use-setting'; export default function UnitControl( { units: unitsProp, ...props } ) { const units = useCustomUnits( unitsProp ); @@ -36,7 +36,7 @@ function filterUnitsWithSettings( settings = [], units = [] ) { * @return {Array} Filtered units based on settings. */ export function useCustomUnits( units ) { - const availableUnits = useThemeSetting( 'spacing.units' ); + const availableUnits = useSetting( 'spacing.units' ); const usedUnits = filterUnitsWithSettings( ! availableUnits ? [] : availableUnits, units diff --git a/packages/block-editor/src/components/use-theme-setting/index.js b/packages/block-editor/src/components/use-setting/index.js similarity index 94% rename from packages/block-editor/src/components/use-theme-setting/index.js rename to packages/block-editor/src/components/use-setting/index.js index 5a36e338a4244d..ec0e813eb8eace 100644 --- a/packages/block-editor/src/components/use-theme-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -50,7 +50,7 @@ const deprecatedFlags = { }; /** - * Hook that retrieves the theme setting. + * Hook that retrieves the editor setting. * It works with nested objects using by finding the value at path. * * @param {string} path The path to the setting. @@ -59,10 +59,10 @@ const deprecatedFlags = { * * @example * ```js - * const isEnabled = useThemeSetting( 'typography.dropCap' ); + * const isEnabled = useSetting( 'typography.dropCap' ); * ``` */ -export default function useThemeSetting( path ) { +export default function useSetting( path ) { const { name: blockName } = useBlockEditContext(); const setting = useSelect( diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js index efc327dbaae848..bcf89f31ac7913 100644 --- a/packages/block-editor/src/hooks/border-color.js +++ b/packages/block-editor/src/hooks/border-color.js @@ -19,7 +19,7 @@ import { getColorObjectByColorValue, getColorObjectByAttributeValues, } from '../components/colors'; -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; import { hasBorderSupport, shouldSkipSerialization } from './border'; import { cleanEmptyObject } from './utils'; @@ -44,9 +44,9 @@ export function BorderColorEdit( props ) { attributes: { borderColor, style }, setAttributes, } = props; - const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; - const disableCustomColors = ! useThemeSetting( 'color.custom' ); - const disableCustomGradients = ! useThemeSetting( 'color.customGradient' ); + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const disableCustomColors = ! useSetting( 'color.custom' ); + const disableCustomGradients = ! useSetting( 'color.customGradient' ); const onChangeColor = ( value ) => { const colorObject = getColorObjectByColorValue( colors, value ); @@ -180,7 +180,7 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; const { borderColor } = attributes; - const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; if ( ! hasBorderSupport( name, 'color' ) || diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index 93357fd55957a2..6749afa663482f 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/packages/block-editor/src/hooks/border.js @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import InspectorControls from '../components/inspector-controls'; -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; import { BorderColorEdit } from './border-color'; import { BorderRadiusEdit } from './border-radius'; import { BorderStyleEdit } from './border-style'; @@ -23,19 +23,19 @@ export function BorderPanel( props ) { const isSupported = hasBorderSupport( props.name ); const isColorSupported = - useThemeSetting( 'border.customColor' ) && + useSetting( 'border.customColor' ) && hasBorderSupport( props.name, 'color' ); const isRadiusSupported = - useThemeSetting( 'border.customRadius' ) && + useSetting( 'border.customRadius' ) && hasBorderSupport( props.name, 'radius' ); const isStyleSupported = - useThemeSetting( 'border.customStyle' ) && + useSetting( 'border.customStyle' ) && hasBorderSupport( props.name, 'style' ); const isWidthSupported = - useThemeSetting( 'border.customWidth' ) && + useSetting( 'border.customWidth' ) && hasBorderSupport( props.name, 'width' ); if ( isDisabled || ! isSupported ) { @@ -103,10 +103,10 @@ export function shouldSkipSerialization( blockType ) { */ const useIsBorderDisabled = () => { const configs = [ - ! useThemeSetting( 'border.customColor' ), - ! useThemeSetting( 'border.customRadius' ), - ! useThemeSetting( 'border.customStyle' ), - ! useThemeSetting( 'border.customWidth' ), + ! useSetting( 'border.customColor' ), + ! useSetting( 'border.customRadius' ), + ! useSetting( 'border.customStyle' ), + ! useSetting( 'border.customWidth' ), ]; return configs.every( Boolean ); diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index a009956f759e1f..288db9d69909a8 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -28,7 +28,7 @@ import { } from '../components/gradients'; import { cleanEmptyObject } from './utils'; import ColorPanel from './color-panel'; -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; export const COLOR_SUPPORT_KEY = 'color'; const EMPTY_ARRAY = []; @@ -214,9 +214,9 @@ const getLinkColorFromAttributeValue = ( colors, value ) => { */ export function ColorEdit( props ) { const { name: blockName, attributes } = props; - const isLinkColorEnabled = useThemeSetting( 'color.link' ); - const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY; + const isLinkColorEnabled = useSetting( 'color.link' ); + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; // Shouldn't be needed but right now the ColorGradientsPanel // can trigger both onChangeColor and onChangeBackground @@ -386,7 +386,7 @@ export const withColorPaletteStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; const { backgroundColor, textColor } = attributes; - const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) { return ; } diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js index 0d3e3c55968fba..885bb45a5d5e6a 100644 --- a/packages/block-editor/src/hooks/duotone.js +++ b/packages/block-editor/src/hooks/duotone.js @@ -18,7 +18,7 @@ import { addFilter } from '@wordpress/hooks'; import { BlockControls, __experimentalDuotoneControl as DuotoneControl, - useThemeSetting, + useSetting, } from '../components'; /** @@ -123,8 +123,8 @@ function DuotonePanel( { attributes, setAttributes } ) { const style = attributes?.style; const duotone = style?.color?.duotone; - const duotonePalette = useThemeSetting( 'color.duotone' ); - const colorPalette = useThemeSetting( 'color.palette' ); + const duotonePalette = useSetting( 'color.duotone' ); + const colorPalette = useSetting( 'color.palette' ); return ( diff --git a/packages/block-editor/src/hooks/font-appearance.js b/packages/block-editor/src/hooks/font-appearance.js index 44b5534ba0aab8..2268d27587f768 100644 --- a/packages/block-editor/src/hooks/font-appearance.js +++ b/packages/block-editor/src/hooks/font-appearance.js @@ -7,7 +7,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; * Internal dependencies */ import FontAppearanceControl from '../components/font-appearance-control'; -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; import { cleanEmptyObject } from './utils'; /** @@ -76,7 +76,7 @@ export function FontAppearanceEdit( props ) { */ export function useIsFontStyleDisabled( { name: blockName } = {} ) { const styleSupport = hasBlockSupport( blockName, FONT_STYLE_SUPPORT_KEY ); - const hasFontStyles = useThemeSetting( 'typography.customFontStyle' ); + const hasFontStyles = useSetting( 'typography.customFontStyle' ); return ! styleSupport || ! hasFontStyles; } @@ -91,7 +91,7 @@ export function useIsFontStyleDisabled( { name: blockName } = {} ) { */ export function useIsFontWeightDisabled( { name: blockName } = {} ) { const weightSupport = hasBlockSupport( blockName, FONT_WEIGHT_SUPPORT_KEY ); - const hasFontWeights = useThemeSetting( 'typography.customFontWeight' ); + const hasFontWeights = useSetting( 'typography.customFontWeight' ); return ! weightSupport || ! hasFontWeights; } diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index 6fcaf1ec08614b..f2c7e3f8ca14d7 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -12,7 +12,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; * Internal dependencies */ import { cleanEmptyObject } from './utils'; -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; import FontFamilyControl from '../components/font-family'; export const FONT_FAMILY_SUPPORT_KEY = '__experimentalFontFamily'; @@ -35,7 +35,7 @@ export function FontFamilyEdit( { setAttributes, attributes: { style = {} }, } ) { - const fontFamilies = useThemeSetting( 'typography.fontFamilies' ); + const fontFamilies = useSetting( 'typography.fontFamilies' ); const isDisable = useIsFontFamilyDisabled( { name } ); if ( isDisable ) { @@ -82,7 +82,7 @@ export function FontFamilyEdit( { * @return {boolean} Whether setting is disabled. */ export function useIsFontFamilyDisabled( { name } ) { - const fontFamilies = useThemeSetting( 'typography.fontFamilies' ); + const fontFamilies = useSetting( 'typography.fontFamilies' ); return ( ! fontFamilies || fontFamilies.length === 0 || diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 88d94866858927..c1605289ccbdcf 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -16,7 +16,7 @@ import { FontSizePicker, } from '../components/font-sizes'; import { cleanEmptyObject } from './utils'; -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; export const FONT_SIZE_SUPPORT_KEY = 'fontSize'; @@ -109,7 +109,7 @@ export function FontSizeEdit( props ) { setAttributes, } = props; const isDisabled = useIsFontSizeDisabled( props ); - const fontSizes = useThemeSetting( 'typography.fontSizes' ); + const fontSizes = useSetting( 'typography.fontSizes' ); const onChange = ( value ) => { const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug; @@ -149,7 +149,7 @@ export function FontSizeEdit( props ) { * @return {boolean} Whether setting is disabled. */ export function useIsFontSizeDisabled( { name: blockName } = {} ) { - const fontSizes = useThemeSetting( 'typography.fontSizes' ); + const fontSizes = useSetting( 'typography.fontSizes' ); const hasFontSizes = !! fontSizes?.length; return ( @@ -167,7 +167,7 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) { */ const withFontSizeInlineStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const fontSizes = useThemeSetting( 'typography.fontSizes' ); + const fontSizes = useSetting( '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 6b5a812ac8ef57..f0b144d3026ed8 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -26,7 +26,7 @@ import { Icon, positionCenter, stretchWide } from '@wordpress/icons'; */ import { store as blockEditorStore } from '../store'; import { InspectorControls } from '../components'; -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; import { LayoutStyle } from '../components/block-list/layout'; const isWeb = Platform.OS === 'web'; @@ -61,7 +61,7 @@ const CSS_UNITS = [ function LayoutPanel( { setAttributes, attributes } ) { const { layout = {} } = attributes; const { wideSize, contentSize, inherit = false } = layout; - const defaultLayout = useThemeSetting( 'layout' ); + const defaultLayout = useSetting( 'layout' ); const themeSupportsLayout = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings().supportsLayout; @@ -215,7 +215,7 @@ export const withLayoutStyles = createHigherOrderComponent( const { name, attributes } = props; const supportLayout = hasBlockSupport( name, '__experimentalLayout' ); const id = useInstanceId( BlockListBlock ); - const defaultLayout = useThemeSetting( 'layout' ) || {}; + const defaultLayout = useSetting( 'layout' ) || {}; if ( ! supportLayout ) { return ; } diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js index 1c1414fde366fa..9490f04a95051e 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 useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; export const LINE_HEIGHT_SUPPORT_KEY = 'lineHeight'; @@ -56,7 +56,7 @@ export function LineHeightEdit( props ) { * @return {boolean} Whether setting is disabled. */ export function useIsLineHeightDisabled( { name: blockName } = {} ) { - const isDisabled = ! useThemeSetting( 'typography.customLineHeight' ); + const isDisabled = ! useSetting( 'typography.customLineHeight' ); return ( ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js index a28e0852960843..570aaf994e1ea7 100644 --- a/packages/block-editor/src/hooks/margin.js +++ b/packages/block-editor/src/hooks/margin.js @@ -9,7 +9,7 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; /** * Internal dependencies */ -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing'; import { cleanEmptyObject } from './utils'; import { useCustomUnits } from '../components/unit-control'; @@ -32,7 +32,7 @@ export function hasMarginSupport( blockType ) { * @return {boolean} Whether margin setting is disabled. */ export function useIsMarginDisabled( { name: blockName } = {} ) { - const isDisabled = ! useThemeSetting( 'spacing.customMargin' ); + const isDisabled = ! useSetting( 'spacing.customMargin' ); return ! hasMarginSupport( blockName ) || isDisabled; } diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js index 2e0b048719de36..737cbb1ed82f48 100644 --- a/packages/block-editor/src/hooks/padding.js +++ b/packages/block-editor/src/hooks/padding.js @@ -9,7 +9,7 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; /** * Internal dependencies */ -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing'; import { cleanEmptyObject } from './utils'; import { useCustomUnits } from '../components/unit-control'; @@ -61,7 +61,7 @@ export function hasPaddingSupport( blockType ) { * @return {boolean} Whether padding setting is disabled. */ export function useIsPaddingDisabled( { name: blockName } = {} ) { - const isDisabled = ! useThemeSetting( 'spacing.customPadding' ); + const isDisabled = ! useSetting( 'spacing.customPadding' ); return ! hasPaddingSupport( blockName ) || isDisabled; } diff --git a/packages/block-editor/src/hooks/text-decoration.js b/packages/block-editor/src/hooks/text-decoration.js index 21d749e3465059..97585ddd1a0e7a 100644 --- a/packages/block-editor/src/hooks/text-decoration.js +++ b/packages/block-editor/src/hooks/text-decoration.js @@ -7,7 +7,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; * Internal dependencies */ import TextDecorationControl from '../components/text-decoration-control'; -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; import { cleanEmptyObject } from './utils'; /** @@ -64,9 +64,7 @@ export function useIsTextDecorationDisabled( { name: blockName } = {} ) { blockName, TEXT_DECORATION_SUPPORT_KEY ); - const hasTextDecoration = useThemeSetting( - 'typography.customTextDecorations' - ); + const hasTextDecoration = useSetting( 'typography.customTextDecorations' ); return notSupported || ! hasTextDecoration; } diff --git a/packages/block-editor/src/hooks/text-transform.js b/packages/block-editor/src/hooks/text-transform.js index ff3e23508616d4..f25dfb0b698c78 100644 --- a/packages/block-editor/src/hooks/text-transform.js +++ b/packages/block-editor/src/hooks/text-transform.js @@ -7,7 +7,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; * Internal dependencies */ import TextTransformControl from '../components/text-transform-control'; -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; import { cleanEmptyObject } from './utils'; /** @@ -64,8 +64,6 @@ export function useIsTextTransformDisabled( { name: blockName } = {} ) { blockName, TEXT_TRANSFORM_SUPPORT_KEY ); - const hasTextTransforms = useThemeSetting( - 'typography.customTextTransforms' - ); + const hasTextTransforms = useSetting( 'typography.customTextTransforms' ); return notSupported || ! hasTextTransforms; } diff --git a/packages/block-editor/src/hooks/use-border-props.js b/packages/block-editor/src/hooks/use-border-props.js index c74609b5bf43f9..ac9f7678cd7950 100644 --- a/packages/block-editor/src/hooks/use-border-props.js +++ b/packages/block-editor/src/hooks/use-border-props.js @@ -11,7 +11,7 @@ import { getColorClassName, getColorObjectByAttributeValues, } from '../components/colors'; -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; // This utility is intended to assist where the serialization of the border // block support is being skipped for a block but the border related CSS classes @@ -55,7 +55,7 @@ export function getBorderClassesAndStyles( { borderColor, style } ) { * @return {Object} ClassName & style props from border block support. */ export function useBorderProps( attributes ) { - const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; const borderProps = getBorderClassesAndStyles( attributes ); // Force inline style to apply border color when themes do not load their diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js index 2385a19c80b409..e10f8a171ee500 100644 --- a/packages/block-editor/src/hooks/use-color-props.js +++ b/packages/block-editor/src/hooks/use-color-props.js @@ -15,7 +15,7 @@ import { __experimentalGetGradientClass, getGradientValueBySlug, } from '../components/gradients'; -import useThemeSetting from '../components/use-theme-setting'; +import useSetting from '../components/use-setting'; // The code in this file has largely been lifted from the color block support // hook. @@ -82,8 +82,8 @@ export function getColorClassesAndStyles( attributes ) { export function useColorProps( attributes ) { const { backgroundColor, textColor, gradient } = attributes; - const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; const colorProps = getColorClassesAndStyles( attributes ); diff --git a/packages/block-library/src/button/color-edit.js b/packages/block-library/src/button/color-edit.js index 0f651e29586506..54ae46fb025513 100644 --- a/packages/block-library/src/button/color-edit.js +++ b/packages/block-library/src/button/color-edit.js @@ -26,7 +26,7 @@ import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings, ContrastChecker, InspectorControls, - useThemeSetting, + useSetting, } from '@wordpress/block-editor'; const EMPTY_ARRAY = []; @@ -125,8 +125,8 @@ function ColorPanel( { settings, clientId, enableContrastChecking = true } ) { */ function ColorEdit( props ) { const { attributes } = props; - const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; // Shouldn't be needed but right now the ColorGradientsPanel // can trigger both onChangeColor and onChangeBackground diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 42a893dde46e75..aff0c997360a36 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -42,7 +42,7 @@ import { MediaUploadProgress, withColors, __experimentalUseGradient, - useThemeSetting, + useSetting, store as blockEditorStore, } from '@wordpress/block-editor'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; @@ -139,7 +139,7 @@ const Cover = ( { const isImage = backgroundType === MEDIA_TYPE_IMAGE; const THEME_COLORS_COUNT = 4; - const colorsDefault = useThemeSetting( 'color.palette' ) || []; + const colorsDefault = useSetting( 'color.palette' ) || []; const coverDefaultPalette = { colors: colorsDefault.slice( 0, THEME_COLORS_COUNT ), }; diff --git a/packages/block-library/src/cover/overlay-color-settings.native.js b/packages/block-library/src/cover/overlay-color-settings.native.js index 62e5c721c3a9cb..08fa32878f4c6d 100644 --- a/packages/block-library/src/cover/overlay-color-settings.native.js +++ b/packages/block-library/src/cover/overlay-color-settings.native.js @@ -12,7 +12,7 @@ import { getGradientValueBySlug, getGradientSlugByValue, __experimentalPanelColorGradientSettings as PanelColorGradientSettings, - useThemeSetting, + useSetting, } from '@wordpress/block-editor'; import { useMemo } from '@wordpress/element'; @@ -24,8 +24,8 @@ function OverlayColorSettings( { setAttributes, } ) { const EMPTY_ARRAY = []; - const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; - const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY; + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY; const gradientValue = customGradient || getGradientValueBySlug( gradients, gradient ); diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index f916bba1037029..bcc3273771f493 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -7,7 +7,7 @@ import { useBlockProps, InspectorAdvancedControls, __experimentalUseInnerBlocksProps as useInnerBlocksProps, - useThemeSetting, + useSetting, store as blockEditorStore, } from '@wordpress/block-editor'; import { SelectControl } from '@wordpress/components'; @@ -25,7 +25,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { }, [ clientId ] ); - const defaultLayout = useThemeSetting( 'layout' ) || {}; + const defaultLayout = useSetting( 'layout' ) || {}; const { tagName: TagName = 'div', templateLock, layout = {} } = attributes; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; const { contentSize, wideSize } = usedLayout; diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index a82e6a0149b00f..e88bfc3c721179 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, - useThemeSetting, + useSetting, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { formatLtr } from '@wordpress/icons'; @@ -55,7 +55,7 @@ function ParagraphBlock( { clientId, } ) { const { align, content, direction, dropCap, placeholder } = attributes; - const isDropCapFeatureEnabled = useThemeSetting( 'typography.dropCap' ); + const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' ); const blockProps = useBlockProps( { className: classnames( { 'has-drop-cap': dropCap, diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index ccda954dd5018f..146ba624df7778 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/packages/block-library/src/post-content/edit.js @@ -6,7 +6,7 @@ import { useSelect } from '@wordpress/data'; import { useBlockProps, __experimentalUseInnerBlocksProps as useInnerBlocksProps, - useThemeSetting, + useSetting, __experimentalUseNoRecursiveRenders as useNoRecursiveRenders, store as blockEditorStore, Warning, @@ -18,7 +18,7 @@ function Content( { layout, postType, postId } ) { const { getSettings } = select( blockEditorStore ); return getSettings()?.supportsLayout; }, [] ); - const defaultLayout = useThemeSetting( 'layout' ) || {}; + const defaultLayout = useSetting( 'layout' ) || {}; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; const { contentSize, wideSize } = usedLayout; const alignments = 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 160d11aa3e9081..ab08775d01c940 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, __experimentalUseInnerBlocksProps as useInnerBlocksProps, - useThemeSetting, + useSetting, store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; @@ -21,7 +21,7 @@ export default function TemplatePartInnerBlocks( { const { getSettings } = select( blockEditorStore ); return getSettings()?.supportsLayout; }, [] ); - const defaultLayout = useThemeSetting( 'layout' ) || {}; + const defaultLayout = useSetting( 'layout' ) || {}; const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; const { contentSize, wideSize } = usedLayout; const alignments = diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 5dcbaec19338fd..6af956b461e4c7 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -24,7 +24,7 @@ import { __experimentalUseResizeCanvas as useResizeCanvas, __unstableUseCanvasClickRedirect as useCanvasClickRedirect, __unstableEditorStyles as EditorStyles, - useThemeSetting, + useSetting, __experimentalLayoutStyle as LayoutStyle, __unstableUseMouseMoveTypingReset as useMouseMoveTypingReset, __unstableIframe as Iframe, @@ -114,7 +114,7 @@ export default function VisualEditor( { styles } ) { borderBottom: 0, }; const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode ); - const defaultLayout = useThemeSetting( 'layout' ); + const defaultLayout = useSetting( 'layout' ); const { contentSize, wideSize } = defaultLayout || {}; const alignments = contentSize || wideSize diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index ded55c3553f178..6973aefe1ec36b 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/packages/edit-site/src/components/editor/utils.js @@ -103,7 +103,7 @@ function getPresetMetadataFromStyleProperty( styleProperty ) { export const LINK_COLOR = '--wp--style--color--link'; export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`; -export function useThemeSetting( path, blockName = '' ) { +export function useSetting( path, blockName = '' ) { const settings = useSelect( ( select ) => { return select( editSiteStore ).getSettings(); } ); diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js index cdcebaccc25b6d..46e27d6150accb 100644 --- a/packages/edit-site/src/components/sidebar/border-panel.js +++ b/packages/edit-site/src/components/sidebar/border-panel.js @@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useThemeSetting } from '../editor/utils'; +import { useSetting } from '../editor/utils'; const MIN_BORDER_RADIUS_VALUE = 0; const MAX_BORDER_RADIUS_VALUE = 50; @@ -35,28 +35,28 @@ export function useHasBorderPanel( { supports, name } ) { function useHasBorderColorControl( { supports, name } ) { return ( - useThemeSetting( 'border.customColor', name ) && + useSetting( 'border.customColor', name ) && supports.includes( 'borderColor' ) ); } function useHasBorderRadiusControl( { supports, name } ) { return ( - useThemeSetting( 'border.customRadius', name ) && + useSetting( 'border.customRadius', name ) && supports.includes( 'borderRadius' ) ); } function useHasBorderStyleControl( { supports, name } ) { return ( - useThemeSetting( 'border.customStyle', name ) && + useSetting( 'border.customStyle', name ) && supports.includes( 'borderStyle' ) ); } function useHasBorderWidthControl( { supports, name } ) { return ( - useThemeSetting( 'border.customWidth', name ) && + useSetting( 'border.customWidth', name ) && supports.includes( 'borderWidth' ) ); } @@ -85,9 +85,9 @@ export default function BorderPanel( { ); // Border color. - const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; - const disableCustomColors = ! useThemeSetting( 'color.custom' ); - const disableCustomGradients = ! useThemeSetting( 'color.customGradient' ); + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; + const disableCustomColors = ! useSetting( 'color.custom' ); + const disableCustomGradients = ! useSetting( 'color.customGradient' ); const hasBorderColor = useHasBorderColorControl( { supports, name } ); const borderColor = getStyle( name, 'borderColor' ); diff --git a/packages/edit-site/src/components/sidebar/color-palette-panel.js b/packages/edit-site/src/components/sidebar/color-palette-panel.js index 1633dec1542b31..e3fbda55711974 100644 --- a/packages/edit-site/src/components/sidebar/color-palette-panel.js +++ b/packages/edit-site/src/components/sidebar/color-palette-panel.js @@ -13,7 +13,7 @@ import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import { useThemeSetting } from '../editor/utils'; +import { useSetting } from '../editor/utils'; import { store as editSiteStore } from '../../store'; /** @@ -32,7 +32,7 @@ export default function ColorPalettePanel( { getSetting, setSetting, } ) { - const colors = useThemeSetting( 'color.palette', contextName ); + const colors = useSetting( 'color.palette', contextName ); const userColors = getSetting( contextName, 'color.palette' ); const immutableColorSlugs = useSelect( ( select ) => { diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index e2db34451e5a33..07c24f5f964da2 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { LINK_COLOR, useThemeSetting } from '../editor/utils'; +import { LINK_COLOR, useSetting } from '../editor/utils'; import ColorPalettePanel from './color-palette-panel'; export function useHasColorPanel( { supports } ) { @@ -26,13 +26,10 @@ export default function ColorPanel( { getSetting, setSetting, } ) { - const colors = useThemeSetting( 'color.palette', name ); - const disableCustomColors = ! useThemeSetting( 'color.custom', name ); - const gradients = useThemeSetting( 'color.gradients', name ); - const disableCustomGradients = ! useThemeSetting( - 'color.customGradient', - name - ); + const colors = useSetting( 'color.palette', name ); + const disableCustomColors = ! useSetting( 'color.custom', name ); + const gradients = useSetting( 'color.gradients', name ); + const disableCustomGradients = ! useSetting( 'color.customGradient', name ); const settings = []; diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js index 757a606ea2c675..e2618a48334984 100644 --- a/packages/edit-site/src/components/sidebar/spacing-panel.js +++ b/packages/edit-site/src/components/sidebar/spacing-panel.js @@ -12,7 +12,7 @@ import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block /** * Internal dependencies */ -import { useThemeSetting } from '../editor/utils'; +import { useSetting } from '../editor/utils'; const isWeb = Platform.OS === 'web'; const CSS_UNITS = [ @@ -51,13 +51,13 @@ export function useHasSpacingPanel( context ) { } function useHasPadding( { name, supports } ) { - const settings = useThemeSetting( 'spacing.customPadding', name ); + const settings = useSetting( 'spacing.customPadding', name ); return settings && supports.includes( 'padding' ); } function useHasMargin( { name, supports } ) { - const settings = useThemeSetting( 'spacing.customMargin', name ); + const settings = useSetting( 'spacing.customMargin', name ); return settings && supports.includes( 'margin' ); } @@ -69,7 +69,7 @@ function filterUnitsWithSettings( settings = [], units = [] ) { } function useCustomUnits( { units, contextName } ) { - const availableUnits = useThemeSetting( 'spacing.units', contextName ); + const availableUnits = useSetting( 'spacing.units', contextName ); const usedUnits = filterUnitsWithSettings( ! availableUnits ? [] : availableUnits, units diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index 8577cc513ce1bf..9752af7d2a90c3 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useThemeSetting } from '../editor/utils'; +import { useSetting } from '../editor/utils'; export function useHasTypographyPanel( { supports, name } ) { const hasLineHeight = useHasLineHeightControl( { supports, name } ); @@ -24,17 +24,17 @@ export function useHasTypographyPanel( { supports, name } ) { function useHasLineHeightControl( { supports, name } ) { return ( - useThemeSetting( 'typography.customLineHeight', name ) && + useSetting( 'typography.customLineHeight', name ) && supports.includes( 'lineHeight' ) ); } function useHasAppearanceControl( { supports, name } ) { const hasFontStyles = - useThemeSetting( 'typography.customFontStyle', name ) && + useSetting( 'typography.customFontStyle', name ) && supports.includes( 'fontStyle' ); const hasFontWeights = - useThemeSetting( 'typography.customFontWeight', name ) && + useSetting( 'typography.customFontWeight', name ) && supports.includes( 'fontWeight' ); return hasFontStyles || hasFontWeights; } @@ -44,17 +44,17 @@ export default function TypographyPanel( { getStyle, setStyle, } ) { - const fontSizes = useThemeSetting( 'typography.fontSizes', name ); - const disableCustomFontSizes = ! useThemeSetting( + const fontSizes = useSetting( 'typography.fontSizes', name ); + const disableCustomFontSizes = ! useSetting( 'typography.customFontSize', name ); - const fontFamilies = useThemeSetting( 'typography.fontFamilies', name ); + const fontFamilies = useSetting( 'typography.fontFamilies', name ); const hasFontStyles = - useThemeSetting( 'typography.customFontStyle', name ) && + useSetting( 'typography.customFontStyle', name ) && supports.includes( 'fontStyle' ); const hasFontWeights = - useThemeSetting( 'typography.customFontWeight', name ) && + useSetting( 'typography.customFontWeight', name ) && supports.includes( 'fontWeight' ); const hasLineHeightEnabled = useHasLineHeightControl( { supports, name } ); const hasAppearanceControl = useHasAppearanceControl( { supports, name } ); diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js index 57f1a3502b7b41..5fd4cfcfb1225c 100644 --- a/packages/format-library/src/text-color/index.js +++ b/packages/format-library/src/text-color/index.js @@ -8,10 +8,7 @@ import { isEmpty } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { useCallback, useMemo, useState } from '@wordpress/element'; -import { - RichTextToolbarButton, - useThemeSetting, -} from '@wordpress/block-editor'; +import { RichTextToolbarButton, useSetting } from '@wordpress/block-editor'; import { Icon, textColor as textColorIcon } from '@wordpress/icons'; import { removeFormat } from '@wordpress/rich-text'; @@ -32,8 +29,8 @@ function TextColorEdit( { activeAttributes, contentRef, } ) { - const allowCustomControl = useThemeSetting( 'color.custom' ); - const colors = useThemeSetting( 'color.palette' ) || EMPTY_ARRAY; + const allowCustomControl = useSetting( 'color.custom' ); + const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; const [ isAddingColor, setIsAddingColor ] = useState( false ); const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [ setIsAddingColor,