Rename to useSetting

packages/block-editor/README.md

@@ -654,15 +654,15 @@ _Returns_
 
 -   `Object`: Props to pass to the element to mark as a block.
 
-<a name="useThemeSetting" href="#useThemeSetting">#</a> **useThemeSetting**
+<a name="useSetting" href="#useSetting">#</a> **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_

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(

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 =

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

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 (

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

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

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

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

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

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 useThemeSetting from '../use-theme-setting';
+import useSetting from '../use-setting';
 
 const DEFAULT_FONT_SIZES = [];
 
@@ -49,7 +49,7 @@ export default ( ...fontSizeNames ) => {
 			createHigherOrderComponent(
 				( WrappedComponent ) => ( props ) => {
 					const fontSizes =
-						useThemeSetting( 'typography.fontSizes' ) ||
+						useSetting( '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 useThemeSetting from '../use-theme-setting';
+import useSetting from '../use-setting';
 
 export default function GradientPickerControl( {
 	className,
@@ -23,8 +23,8 @@ export default function GradientPickerControl( {
 	label = __( 'Gradient Presets' ),
 	...props
 } ) {
-	const gradients = useThemeSetting( 'color.gradients' );
-	const disableCustomGradients = ! useThemeSetting( 'color.customGradient' );
+	const gradients = useSetting( 'color.gradients' );
+	const disableCustomGradients = ! useSetting( '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 useThemeSetting from '../use-theme-setting';
+import useSetting from '../use-setting';
 
 const EMPTY_ARRAY = [];
 
 function GradientPickerWithGradients( props ) {
-	const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY;
-	const disableCustomGradients = ! useThemeSetting( 'color.customGradient' );
+	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const disableCustomGradients = ! useSetting( '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 useThemeSetting from '../use-theme-setting';
+import useSetting from '../use-setting';
 
 export default function GradientPanel( props ) {
-	const gradients = useThemeSetting( 'color.gradients' );
+	const gradients = useSetting( '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 useThemeSetting from '../use-theme-setting';
+import useSetting from '../use-setting';
 import { store as blockEditorStore } from '../../store';
 
 const EMPTY_ARRAY = [];
@@ -67,7 +67,7 @@ export function __experimentalUseGradient( {
 } = {} ) {
 	const { clientId } = useBlockEditContext();
 
-	const gradients = useThemeSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	const gradients = useSetting( '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 useThemeSetting } from './use-theme-setting';
+export { default as useSetting } from './use-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 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';
 

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

packages/block-editor/src/components/use-theme-setting/index.js → 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(

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

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