diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index ea67d3bc7b8df0..85c3032c8b5fd2 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -653,6 +653,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/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 abbf333442cb0c..86580705a3ac96 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 f8c4e2053b5dd5..df85b3bd2bb8dd 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,7 +51,7 @@ export function useHasSpacingPanel( context ) { export function useHasPadding( { name, supports } ) { return ( - useEditorFeature( 'spacing.customPadding', name ) && + useThemeSetting( 'spacing.customPadding', name ) && supports.includes( 'padding' ) ); } @@ -63,7 +63,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,