From c68156d690338356afeeb838b986c0dc5d952df8 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 13 May 2021 10:41:45 +0300 Subject: [PATCH 1/4] Add a name param to useSetting --- packages/block-editor/README.md | 1 + packages/block-editor/src/components/use-setting/index.js | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 726990f0ac3637..fc87b8f3a75c02 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -668,6 +668,7 @@ 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. _Returns_ diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index ec0e813eb8eace..2822efa2fa2e72 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -54,6 +54,7 @@ const deprecatedFlags = { * It works with nested objects using by finding the value at path. * * @param {string} path The path to the setting. + * @param {string} name The block name. Leave empty to use name from useBlockEditContext. * * @return {any} Returns the value defined for the setting. * @@ -62,8 +63,9 @@ const deprecatedFlags = { * const isEnabled = useSetting( 'typography.dropCap' ); * ``` */ -export default function useSetting( path ) { +export default function useSetting( path, name = '' ) { const { name: blockName } = useBlockEditContext(); + const _blockName = '' === name ? blockName : name; const setting = useSelect( ( select ) => { @@ -72,7 +74,7 @@ export default function useSetting( path ) { // 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 +95,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; From d78d7f188cc7a5561ea15169d326a9f05ebf9d47 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 13 May 2021 10:43:07 +0300 Subject: [PATCH 2/4] Use useSetting from @wordpress/block-editor --- .../edit-site/src/components/sidebar/border-panel.js | 6 +----- .../src/components/sidebar/color-palette-panel.js | 2 +- .../edit-site/src/components/sidebar/color-panel.js | 7 +++++-- .../edit-site/src/components/sidebar/spacing-panel.js | 10 ++++------ .../src/components/sidebar/typography-panel.js | 6 +----- 5 files changed, 12 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js index 46e27d6150accb..3308c7d9f1f2e3 100644 --- a/packages/edit-site/src/components/sidebar/border-panel.js +++ b/packages/edit-site/src/components/sidebar/border-panel.js @@ -2,17 +2,13 @@ * WordPress dependencies */ import { + useSetting, __experimentalBorderStyleControl as BorderStyleControl, __experimentalColorGradientControl as ColorGradientControl, } from '@wordpress/block-editor'; import { PanelBody, RangeControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -/** - * Internal dependencies - */ -import { useSetting } from '../editor/utils'; - const MIN_BORDER_RADIUS_VALUE = 0; const MAX_BORDER_RADIUS_VALUE = 50; const MIN_BORDER_WIDTH = 0; 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 e3fbda55711974..1b3569da66e2f5 100644 --- a/packages/edit-site/src/components/sidebar/color-palette-panel.js +++ b/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'; /** diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 07c24f5f964da2..b5669d1e221b60 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -1,13 +1,16 @@ /** * 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'; export function useHasColorPanel( { supports } ) { diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js index e2618a48334984..577c839740b2a4 100644 --- a/packages/edit-site/src/components/sidebar/spacing-panel.js +++ b/packages/edit-site/src/components/sidebar/spacing-panel.js @@ -7,12 +7,10 @@ import { __experimentalBoxControl as BoxControl, PanelBody, } from '@wordpress/components'; -import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import { useSetting } from '../editor/utils'; +import { + useSetting, + __experimentalUseCustomSides as useCustomSides, +} from '@wordpress/block-editor'; const isWeb = Platform.OS === 'web'; const CSS_UNITS = [ diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index 9752af7d2a90c3..0770ad19a64ee4 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { + useSetting, LineHeightControl, __experimentalFontFamilyControl as FontFamilyControl, __experimentalFontAppearanceControl as FontAppearanceControl, @@ -9,11 +10,6 @@ import { import { PanelBody, FontSizePicker } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -/** - * Internal dependencies - */ -import { useSetting } from '../editor/utils'; - export function useHasTypographyPanel( { supports, name } ) { const hasLineHeight = useHasLineHeightControl( { supports, name } ); const hasFontAppearance = useHasAppearanceControl( { supports, name } ); From c794874b94b3e7a8487c974bb1b3ef4c82842366 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 13 May 2021 11:02:31 +0300 Subject: [PATCH 3/4] fix the store --- packages/block-editor/README.md | 1 + .../src/components/use-setting/index.js | 11 +++++--- .../src/components/sidebar/border-panel.js | 28 ++++++++++++++----- .../components/sidebar/color-palette-panel.js | 2 +- .../src/components/sidebar/color-panel.js | 15 ++++++++-- .../src/components/sidebar/spacing-panel.js | 15 ++++++++-- .../components/sidebar/typography-panel.js | 26 +++++++++++------ 7 files changed, 72 insertions(+), 26 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index fc87b8f3a75c02..55b66826ce30d2 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -669,6 +669,7 @@ _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_ diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js index 2822efa2fa2e72..1435aa53ca480e 100644 --- a/packages/block-editor/src/components/use-setting/index.js +++ b/packages/block-editor/src/components/use-setting/index.js @@ -53,8 +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} name The block name. Leave empty to use name from useBlockEditContext. + * @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. * @@ -63,13 +64,15 @@ const deprecatedFlags = { * const isEnabled = useSetting( 'typography.dropCap' ); * ``` */ -export default function useSetting( path, name = '' ) { +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. diff --git a/packages/edit-site/src/components/sidebar/border-panel.js b/packages/edit-site/src/components/sidebar/border-panel.js index 3308c7d9f1f2e3..bb33840aafcafc 100644 --- a/packages/edit-site/src/components/sidebar/border-panel.js +++ b/packages/edit-site/src/components/sidebar/border-panel.js @@ -9,6 +9,11 @@ import { import { PanelBody, RangeControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../store'; + const MIN_BORDER_RADIUS_VALUE = 0; const MAX_BORDER_RADIUS_VALUE = 50; const MIN_BORDER_WIDTH = 0; @@ -31,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' ) ); } @@ -81,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' ); 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 1b3569da66e2f5..c56d54e6d0f773 100644 --- a/packages/edit-site/src/components/sidebar/color-palette-panel.js +++ b/packages/edit-site/src/components/sidebar/color-palette-panel.js @@ -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 ) => { diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index b5669d1e221b60..652580b519290f 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n'; */ import { LINK_COLOR } from '../editor/utils'; import ColorPalettePanel from './color-palette-panel'; +import { store as editSiteStore } from '../../store'; export function useHasColorPanel( { supports } ) { return ( @@ -29,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 = []; diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js index 577c839740b2a4..492a10ae1a8fe7 100644 --- a/packages/edit-site/src/components/sidebar/spacing-panel.js +++ b/packages/edit-site/src/components/sidebar/spacing-panel.js @@ -12,6 +12,11 @@ import { __experimentalUseCustomSides as useCustomSides, } from '@wordpress/block-editor'; +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../store'; + const isWeb = Platform.OS === 'web'; const CSS_UNITS = [ { @@ -49,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' ); } @@ -67,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 diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index 0770ad19a64ee4..ae20c4e0ddf7bd 100644 --- a/packages/edit-site/src/components/sidebar/typography-panel.js +++ b/packages/edit-site/src/components/sidebar/typography-panel.js @@ -10,6 +10,11 @@ import { import { PanelBody, FontSizePicker } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../store'; + export function useHasTypographyPanel( { supports, name } ) { const hasLineHeight = useHasLineHeightControl( { supports, name } ); const hasFontAppearance = useHasAppearanceControl( { supports, name } ); @@ -20,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; } @@ -40,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 } ); From d2fbd0995748c050b69c542efdbf49c716dfe6f8 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 13 May 2021 11:02:54 +0300 Subject: [PATCH 4/4] cleanup --- .../edit-site/src/components/editor/utils.js | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js index 6973aefe1ec36b..75496521454543 100644 --- a/packages/edit-site/src/components/editor/utils.js +++ b/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;