Combine useSetting functions

packages/block-editor/README.md

@@ -668,6 +668,8 @@ const isEnabled = useSetting( 'typography.dropCap' );
 _Parameters_
 
 -   _path_ `string`: The path to the setting.
+-   _name_ `string`: The block name. Leave empty to use name from useBlockEditContext.
+-   _store_ `Object`: The store. Defaults to blockEditorStore if empty.
 
 _Returns_
 

packages/block-editor/src/components/use-setting/index.js

@@ -53,7 +53,9 @@ const deprecatedFlags = {
  * 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.
+ * @param {string} path  The path to the setting.
+ * @param {string} name  The block name. Leave empty to use name from useBlockEditContext.
+ * @param {Object} store The store. Defaults to blockEditorStore if empty.
  *
  * @return {any} Returns the value defined for the setting.
  *
@@ -62,17 +64,20 @@ const deprecatedFlags = {
  * const isEnabled = useSetting( 'typography.dropCap' );
  * ```
  */
-export default function useSetting( path ) {
+export default function useSetting( path, name = '', store ) {
 	const { name: blockName } = useBlockEditContext();
+	const _blockName = '' === name ? blockName : name;
+
+	store = store || blockEditorStore;
 
 	const setting = useSelect(
 		( select ) => {
-			const settings = select( blockEditorStore ).getSettings();
+			const settings = select( store ).getSettings();
 
 			// 1 - Use __experimental features, if available.
 			// We cascade to the all value if the block one is not available.
 			const defaultsPath = `__experimentalFeatures.${ path }`;
-			const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`;
+			const blockPath = `__experimentalFeatures.blocks.${ _blockName }.${ path }`;
 			const experimentalFeaturesResult =
 				get( settings, blockPath ) ?? get( settings, defaultsPath );
 			if ( experimentalFeaturesResult !== undefined ) {
@@ -93,7 +98,7 @@ export default function useSetting( path ) {
 			// To remove when __experimentalFeatures are ported to core.
 			return path === 'typography.dropCap' ? true : undefined;
 		},
-		[ blockName, path ]
+		[ _blockName, path ]
 	);
 
 	return setting;

packages/edit-site/src/components/editor/utils.js

@@ -2,14 +2,6 @@
  * External dependencies
  */
 import { get, find, forEach, camelCase, isString } from 'lodash';
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
 
 /* Supporting data */
 export const ROOT_BLOCK_NAME = 'root';
@@ -103,15 +95,6 @@ function getPresetMetadataFromStyleProperty( styleProperty ) {
 export const LINK_COLOR = '--wp--style--color--link';
 export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`;
 
-export function useSetting( path, blockName = '' ) {
-	const settings = useSelect( ( select ) => {
-		return select( editSiteStore ).getSettings();
-	} );
-	const topLevelPath = `__experimentalFeatures.${ path }`;
-	const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ path }`;
-	return get( settings, blockPath ) ?? get( settings, topLevelPath );
-}
-
 export function getPresetVariable( styles, context, propertyName, value ) {
 	if ( ! value ) {
 		return value;

packages/edit-site/src/components/sidebar/border-panel.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	useSetting,
 	__experimentalBorderStyleControl as BorderStyleControl,
 	__experimentalColorGradientControl as ColorGradientControl,
 } from '@wordpress/block-editor';
@@ -11,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useSetting } from '../editor/utils';
+import { store as editSiteStore } from '../../store';
 
 const MIN_BORDER_RADIUS_VALUE = 0;
 const MAX_BORDER_RADIUS_VALUE = 50;
@@ -35,28 +36,28 @@ export function useHasBorderPanel( { supports, name } ) {
 
 function useHasBorderColorControl( { supports, name } ) {
 	return (
-		useSetting( 'border.customColor', name ) &&
+		useSetting( 'border.customColor', name, editSiteStore ) &&
 		supports.includes( 'borderColor' )
 	);
 }
 
 function useHasBorderRadiusControl( { supports, name } ) {
 	return (
-		useSetting( 'border.customRadius', name ) &&
+		useSetting( 'border.customRadius', name, editSiteStore ) &&
 		supports.includes( 'borderRadius' )
 	);
 }
 
 function useHasBorderStyleControl( { supports, name } ) {
 	return (
-		useSetting( 'border.customStyle', name ) &&
+		useSetting( 'border.customStyle', name, editSiteStore ) &&
 		supports.includes( 'borderStyle' )
 	);
 }
 
 function useHasBorderWidthControl( { supports, name } ) {
 	return (
-		useSetting( 'border.customWidth', name ) &&
+		useSetting( 'border.customWidth', name, editSiteStore ) &&
 		supports.includes( 'borderWidth' )
 	);
 }
@@ -85,9 +86,18 @@ export default function BorderPanel( {
 	);
 
 	// Border color.
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const disableCustomColors = ! useSetting( 'color.custom' );
-	const disableCustomGradients = ! useSetting( 'color.customGradient' );
+	const colors =
+		useSetting( 'color.palette', '', editSiteStore ) || EMPTY_ARRAY;
+	const disableCustomColors = ! useSetting(
+		'color.custom',
+		'',
+		editSiteStore
+	);
+	const disableCustomGradients = ! useSetting(
+		'color.customGradient',
+		'',
+		editSiteStore
+	);
 	const hasBorderColor = useHasBorderColorControl( { supports, name } );
 	const borderColor = getStyle( name, 'borderColor' );
 

packages/edit-site/src/components/sidebar/color-palette-panel.js

@@ -9,11 +9,11 @@ import { get } from 'lodash';
 import { __experimentalColorEdit as ColorEdit } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { useSetting } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useSetting } from '../editor/utils';
 import { store as editSiteStore } from '../../store';
 
 /**
@@ -32,7 +32,7 @@ export default function ColorPalettePanel( {
 	getSetting,
 	setSetting,
 } ) {
-	const colors = useSetting( 'color.palette', contextName );
+	const colors = useSetting( 'color.palette', contextName, editSiteStore );
 	const userColors = getSetting( contextName, 'color.palette' );
 	const immutableColorSlugs = useSelect(
 		( select ) => {

packages/edit-site/src/components/sidebar/color-panel.js

@@ -1,14 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import {
+	useSetting,
+	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { LINK_COLOR, useSetting } from '../editor/utils';
+import { LINK_COLOR } from '../editor/utils';
 import ColorPalettePanel from './color-palette-panel';
+import { store as editSiteStore } from '../../store';
 
 export function useHasColorPanel( { supports } ) {
 	return (
@@ -26,10 +30,18 @@ export default function ColorPanel( {
 	getSetting,
 	setSetting,
 } ) {
-	const colors = useSetting( 'color.palette', name );
-	const disableCustomColors = ! useSetting( 'color.custom', name );
+	const colors = useSetting( 'color.palette', name, editSiteStore );
+	const disableCustomColors = ! useSetting(
+		'color.custom',
+		name,
+		editSiteStore
+	);
 	const gradients = useSetting( 'color.gradients', name );
-	const disableCustomGradients = ! useSetting( 'color.customGradient', name );
+	const disableCustomGradients = ! useSetting(
+		'color.customGradient',
+		name,
+		editSiteStore
+	);
 
 	const settings = [];
 

packages/edit-site/src/components/sidebar/spacing-panel.js

@@ -7,12 +7,15 @@ import {
 	__experimentalBoxControl as BoxControl,
 	PanelBody,
 } from '@wordpress/components';
-import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
+import {
+	useSetting,
+	__experimentalUseCustomSides as useCustomSides,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useSetting } from '../editor/utils';
+import { store as editSiteStore } from '../../store';
 
 const isWeb = Platform.OS === 'web';
 const CSS_UNITS = [
@@ -51,13 +54,13 @@ export function useHasSpacingPanel( context ) {
 }
 
 function useHasPadding( { name, supports } ) {
-	const settings = useSetting( 'spacing.customPadding', name );
+	const settings = useSetting( 'spacing.customPadding', name, editSiteStore );
 
 	return settings && supports.includes( 'padding' );
 }
 
 function useHasMargin( { name, supports } ) {
-	const settings = useSetting( 'spacing.customMargin', name );
+	const settings = useSetting( 'spacing.customMargin', name, editSiteStore );
 
 	return settings && supports.includes( 'margin' );
 }
@@ -69,7 +72,11 @@ function filterUnitsWithSettings( settings = [], units = [] ) {
 }
 
 function useCustomUnits( { units, contextName } ) {
-	const availableUnits = useSetting( 'spacing.units', contextName );
+	const availableUnits = useSetting(
+		'spacing.units',
+		contextName,
+		editSiteStore
+	);
 	const usedUnits = filterUnitsWithSettings(
 		! availableUnits ? [] : availableUnits,
 		units

packages/edit-site/src/components/sidebar/typography-panel.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	useSetting,
 	LineHeightControl,
 	__experimentalFontFamilyControl as FontFamilyControl,
 	__experimentalFontAppearanceControl as FontAppearanceControl,
@@ -12,7 +13,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useSetting } from '../editor/utils';
+import { store as editSiteStore } from '../../store';
 
 export function useHasTypographyPanel( { supports, name } ) {
 	const hasLineHeight = useHasLineHeightControl( { supports, name } );
@@ -24,17 +25,17 @@ export function useHasTypographyPanel( { supports, name } ) {
 
 function useHasLineHeightControl( { supports, name } ) {
 	return (
-		useSetting( 'typography.customLineHeight', name ) &&
+		useSetting( 'typography.customLineHeight', name, editSiteStore ) &&
 		supports.includes( 'lineHeight' )
 	);
 }
 
 function useHasAppearanceControl( { supports, name } ) {
 	const hasFontStyles =
-		useSetting( 'typography.customFontStyle', name ) &&
+		useSetting( 'typography.customFontStyle', name, editSiteStore ) &&
 		supports.includes( 'fontStyle' );
 	const hasFontWeights =
-		useSetting( 'typography.customFontWeight', name ) &&
+		useSetting( 'typography.customFontWeight', name, editSiteStore ) &&
 		supports.includes( 'fontWeight' );
 	return hasFontStyles || hasFontWeights;
 }
@@ -44,17 +45,22 @@ export default function TypographyPanel( {
 	getStyle,
 	setStyle,
 } ) {
-	const fontSizes = useSetting( 'typography.fontSizes', name );
+	const fontSizes = useSetting( 'typography.fontSizes', name, editSiteStore );
 	const disableCustomFontSizes = ! useSetting(
 		'typography.customFontSize',
-		name
+		name,
+		editSiteStore
+	);
+	const fontFamilies = useSetting(
+		'typography.fontFamilies',
+		name,
+		editSiteStore
 	);
-	const fontFamilies = useSetting( 'typography.fontFamilies', name );
 	const hasFontStyles =
-		useSetting( 'typography.customFontStyle', name ) &&
+		useSetting( 'typography.customFontStyle', name, editSiteStore ) &&
 		supports.includes( 'fontStyle' );
 	const hasFontWeights =
-		useSetting( 'typography.customFontWeight', name ) &&
+		useSetting( 'typography.customFontWeight', name, editSiteStore ) &&
 		supports.includes( 'fontWeight' );
 	const hasLineHeightEnabled = useHasLineHeightControl( { supports, name } );
 	const hasAppearanceControl = useHasAppearanceControl( { supports, name } );