Rename and stabilize useEditorFeature as useThemeSetting

packages/block-editor/README.md

@@ -653,6 +653,25 @@ _Returns_
 
 -   `Object`: Props to pass to the element to mark as a block.
 
+<a name="useThemeSetting" href="#useThemeSetting">#</a> **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.
+
 <a name="validateThemeColors" href="#validateThemeColors">#</a> **validateThemeColors**
 
 Given an array of theme colors checks colors for validity

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(

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 =

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'
 	);
 

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 (

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 );

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 <WrappedComponent { ...props } colors={ colors } />;
 		},
 		'withEditorColorPalette'

packages/block-editor/src/components/font-family/index.js

@@ -12,17 +12,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useEditorFeature from '../use-editor-feature';
+import useThemeSetting from '../use-theme-setting';
 
 export default function FontFamilyControl( {
 	value = '',
 	onChange,
 	fontFamilies,
 	...props
 } ) {
-	const blockLevelFontFamilies = useEditorFeature(
-		'typography.fontFamilies'
-	);
+	const blockLevelFontFamilies = useThemeSetting( 'typography.fontFamilies' );
 	if ( ! fontFamilies ) {
 		fontFamilies = blockLevelFontFamilies;
 	}

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'
 	);
 

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 (
 						<WrappedComponent

packages/block-editor/src/components/gradient-picker/control.js

@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import GradientPicker from './';
-import useEditorFeature from '../use-editor-feature';
+import useThemeSetting from '../use-theme-setting';
 
 export default function GradientPickerControl( {
 	className,
@@ -23,8 +23,8 @@ export default function GradientPickerControl( {
 	label = __( 'Gradient Presets' ),
 	...props
 } ) {
-	const gradients = useEditorFeature( 'color.gradients' );
-	const disableCustomGradients = ! useEditorFeature( 'color.customGradient' );
+	const gradients = useThemeSetting( 'color.gradients' );
+	const disableCustomGradients = ! useThemeSetting( 'color.customGradient' );
 	if ( isEmpty( gradients ) && disableCustomGradients ) {
 		return null;
 	}

packages/block-editor/src/components/gradient-picker/index.js

@@ -6,13 +6,13 @@ import { __experimentalGradientPicker as GradientPicker } from '@wordpress/compo
 /**
  * Internal dependencies
  */
-import useEditorFeature from '../use-editor-feature';
+import useThemeSetting from '../use-theme-setting';
 
 const EMPTY_ARRAY = [];
 
 function GradientPickerWithGradients( props ) {
-	const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY;
-	const disableCustomGradients = ! useEditorFeature( 'color.customGradient' );
+	const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const disableCustomGradients = ! useThemeSetting( 'color.customGradient' );
 
 	return (
 		<GradientPicker

packages/block-editor/src/components/gradient-picker/panel.js

@@ -13,10 +13,10 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import GradientPicker from './control';
-import useEditorFeature from '../use-editor-feature';
+import useThemeSetting from '../use-theme-setting';
 
 export default function GradientPanel( props ) {
-	const gradients = useEditorFeature( 'color.gradients' );
+	const gradients = useThemeSetting( 'color.gradients' );
 	if ( isEmpty( gradients ) ) {
 		return null;
 	}

packages/block-editor/src/components/gradients/use-gradient.js

@@ -13,7 +13,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { useBlockEditContext } from '../block-edit';
-import useEditorFeature from '../use-editor-feature';
+import useThemeSetting from '../use-theme-setting';
 import { store as blockEditorStore } from '../../store';
 
 const EMPTY_ARRAY = [];
@@ -67,7 +67,7 @@ export function __experimentalUseGradient( {
 } = {} ) {
 	const { clientId } = useBlockEditContext();
 
-	const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY;
+	const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY;
 	const { gradient, customGradient } = useSelect(
 		( select ) => {
 			const { getBlockAttributes } = select( blockEditorStore );

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';

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';
 

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

packages/block-editor/src/components/use-editor-feature/index.js → 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,17 +71,17 @@ 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 ) {
 				return experimentalFeaturesResult;
 			}
 
 			// 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;

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' ) ||