Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add useSettings hook for reading multiple settings at once #55337

Merged
merged 18 commits into from
Oct 19, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Migrate all remaining usages of useSetting
  • Loading branch information
jsnajdr committed Oct 19, 2023
commit c994be12d25097afac64862e9816293964bf8537
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ import BlockInvalidWarning from './block-invalid-warning';
import BlockOutline from './block-outline';
import { store as blockEditorStore } from '../../store';
import { useLayout } from './layout';
import useSetting from '../use-setting';
import { useSettings } from '../use-setting';

const emptyArray = [];
const EMPTY_ARRAY = [];

// Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference.
const wrapperPropsCache = new WeakMap();
Expand Down Expand Up @@ -215,7 +215,7 @@ function BlockListBlock( {
const parentLayout = useLayout() || {};
const defaultColors = useMobileGlobalStylesColors();
const globalStyle = useGlobalStyles();
const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray;
const [ fontSizes ] = useSettings( 'typography.fontSizes' );

const onRemove = useCallback(
() => removeBlock( clientId ),
Expand Down Expand Up @@ -257,7 +257,7 @@ function BlockListBlock( {
attributes,
defaultColors,
name,
fontSizes
fontSizes || EMPTY_ARRAY
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-list/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { createContext, useContext } from '@wordpress/element';
* Internal dependencies
*/
import { getLayoutType } from '../../layouts';
import useSetting from '../use-setting';
import { useSettings } from '../use-setting';

export const defaultLayout = { type: 'default' };

Expand All @@ -27,7 +27,7 @@ export function useLayout() {

export function LayoutStyle( { layout = {}, css, ...props } ) {
const layoutType = getLayoutType( layout.type );
const blockGapSupport = useSetting( 'spacing.blockGap' );
const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
const hasBlockGapSupport = blockGapSupport !== null;

if ( layoutType ) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
import AllInputControl from './all-input-control';
import InputControls from './input-controls';
import LinkedButton from './linked-button';
import useSetting from '../use-setting';
import { useSettings } from '../use-setting';
import {
getAllValue,
getAllUnit,
Expand Down Expand Up @@ -67,8 +67,9 @@ export default function BorderRadiusControl( { onChange, values } ) {
)[ 1 ],
} );

const [ availableUnits ] = useSettings( 'spacing.units' );
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
} );

const unit = getAllUnit( selectedUnits );
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/font-family/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import useSetting from '../use-setting';
import { useSettings } from '../use-setting';

export default function FontFamilyControl( {
value = '',
onChange,
fontFamilies,
...props
} ) {
const blockLevelFontFamilies = useSetting( 'typography.fontFamilies' );
const [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );
if ( ! fontFamilies ) {
fontFamilies = blockLevelFontFamilies;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Component } from '@wordpress/element';
* Internal dependencies
*/
import { getFontSize, getFontSizeClass } from './utils';
import useSetting from '../use-setting';
import { useSettings } from '../use-setting';

const DEFAULT_FONT_SIZES = [];

Expand Down Expand Up @@ -52,13 +52,11 @@ export default ( ...fontSizeNames ) => {
compose( [
createHigherOrderComponent(
( WrappedComponent ) => ( props ) => {
const fontSizes =
useSetting( 'typography.fontSizes' ) ||
DEFAULT_FONT_SIZES;
const [ fontSizes ] = useSettings( 'typography.fontSizes' );
return (
<WrappedComponent
{ ...props }
fontSizes={ fontSizes }
fontSizes={ fontSizes || DEFAULT_FONT_SIZES }
/>
);
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import useSetting from '../use-setting';
import { useSettings } from '../use-setting';

const RANGE_CONTROL_CUSTOM_SETTINGS = {
px: { max: 1000, step: 1 },
Expand Down Expand Up @@ -69,8 +69,9 @@ export default function HeightControl( {
} ) {
const customRangeValue = parseFloat( value );

const [ availableUnits ] = useSettings( 'spacing.units' );
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [
availableUnits: availableUnits || [
'%',
'px',
'em',
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export { useBlockEditingMode } from './block-editing-mode';
*/

export { default as BlockEditorProvider } from './provider';
export { useSettings, default as useSetting } from './use-setting';
export { useSettings, useSetting } from './use-setting';
export { useBlockCommands } from './use-block-commands';

/*
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/inner-blocks/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { useBlockEditContext } from '../block-edit/context';
import useBlockSync from '../provider/use-block-sync';
import { store as blockEditorStore } from '../../store';
import useBlockDropZone from '../use-block-drop-zone';
import useSetting from '../use-setting';
import { useSettings } from '../use-setting';

const EMPTY_OBJECT = {};

Expand Down Expand Up @@ -98,7 +98,7 @@ function UncontrolledInnerBlocks( props ) {

const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;

const defaultLayout = useSetting( 'layout' ) || EMPTY_OBJECT;
const [ defaultLayout ] = useSettings( 'layout' );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we keep the EMPTY_OBJECT fallback here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's not needed because defaultLayout is used only with an object spread operator, ...defaultLayout, which treats undefined or null as an empty object already.


const usedLayout = layout || defaultLayoutBlockSupport;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import useSetting from '../../components/use-setting';
import { useSettings } from '../../components/use-setting';

/**
* Control for letter-spacing.
Expand All @@ -28,8 +28,9 @@ export default function LetterSpacingControl( {
__unstableInputWidth = '60px',
...otherProps
} ) {
const [ availableUnits ] = useSettings( 'spacing.units' );
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
defaultValues: { px: 2, em: 0.2, rem: 0.2 },
} );
return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import useSetting from '../../use-setting';
import { useSettings } from '../../use-setting';

export default function useSpacingSizes() {
const spacingSizes = [
{ name: 0, slug: '0', size: 0 },
...( useSetting( 'spacing.spacingSizes' ) || [] ),
];
const spacingSizes = [ { name: 0, slug: '0', size: 0 } ];

const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' );
if ( settingsSizes ) {
spacingSizes.push( ...settingsSizes );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be nice to avoid the mutation here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that local mutation is fine, it's not worse in any way than creating a new array and concatenating existing arrays into it with the spread operator.

}

if ( spacingSizes.length > 8 ) {
spacingSizes.unshift( {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { settings } from '@wordpress/icons';
/**
* Internal dependencies
*/
import useSetting from '../../use-setting';
import { useSettings } from '../../use-setting';
import { store as blockEditorStore } from '../../../store';
import {
ALL_SIDES,
Expand Down Expand Up @@ -102,8 +102,9 @@ export default function SpacingInputControl( {
setShowCustomValueControl( true );
}

const [ availableUnits ] = useSettings( 'spacing.units' );
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
} );

let currentValue = null;
Expand Down
11 changes: 3 additions & 8 deletions packages/block-editor/src/components/unit-control/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,12 @@ import {
/**
* Internal dependencies
*/
import useSetting from '../use-setting';
import { useSettings } from '../use-setting';

export default function UnitControl( { units: unitsProp, ...props } ) {
const [ availableUnits ] = useSettings( 'spacing.units' );
const units = useCustomUnits( {
availableUnits: useSetting( 'spacing.units' ) || [
'%',
'px',
'em',
'rem',
'vw',
],
availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
units: unitsProp,
} );

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ export function useSettings( ...paths ) {
* const isEnabled = useSetting( 'typography.dropCap' );
* ```
*/
export default function useSetting( path ) {
export function useSetting( path ) {
const [ value ] = useSettings( path );
return value;
}
16 changes: 7 additions & 9 deletions packages/block-editor/src/hooks/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { getFilename } from '@wordpress/url';
*/
import InspectorControls from '../components/inspector-controls';
import MediaReplaceFlow from '../components/media-replace-flow';
import useSetting from '../components/use-setting';
import { useSettings } from '../components/use-setting';
import { cleanEmptyObject } from './utils';
import { store as blockEditorStore } from '../store';

Expand Down Expand Up @@ -281,19 +281,17 @@ function BackgroundImagePanelItem( props ) {
}

export function BackgroundImagePanel( props ) {
const isBackgroundImageSupported =
useSetting( 'background.backgroundImage' ) &&
hasBackgroundSupport( props.name, 'backgroundImage' );

if ( ! isBackgroundImageSupported ) {
const [ backgroundImage ] = useSettings( 'background.backgroundImage' );
if (
! backgroundImage ||
! hasBackgroundSupport( props.name, 'backgroundImage' )
) {
return null;
}

return (
<InspectorControls group="background">
{ isBackgroundImageSupported && (
<BackgroundImagePanelItem { ...props } />
) }
<BackgroundImagePanelItem { ...props } />
</InspectorControls>
);
}
8 changes: 4 additions & 4 deletions packages/block-editor/src/hooks/font-size.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
transformStyles,
shouldSkipSerialization,
} from './utils';
import useSetting from '../components/use-setting';
import { useSettings } from '../components/use-setting';
import { store as blockEditorStore } from '../store';
import {
getTypographyFontSizeValue,
Expand Down Expand Up @@ -122,7 +122,7 @@ export function FontSizeEdit( props ) {
attributes: { fontSize, style },
setAttributes,
} = props;
const fontSizes = useSetting( 'typography.fontSizes' );
const [ fontSizes ] = useSettings( 'typography.fontSizes' );

const onChange = ( value ) => {
const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;
Expand Down Expand Up @@ -167,7 +167,7 @@ export function FontSizeEdit( props ) {
* @return {boolean} Whether setting is disabled.
*/
export function useIsFontSizeDisabled( { name: blockName } = {} ) {
const fontSizes = useSetting( 'typography.fontSizes' );
const [ fontSizes ] = useSettings( 'typography.fontSizes' );
const hasFontSizes = !! fontSizes?.length;

return (
Expand All @@ -186,7 +186,7 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) {
*/
const withFontSizeInlineStyles = createHigherOrderComponent(
( BlockListBlock ) => ( props ) => {
const fontSizes = useSetting( 'typography.fontSizes' );
const [ fontSizes ] = useSettings( 'typography.fontSizes' );
const {
name: blockName,
attributes: { fontSize, style },
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/hooks/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { useEffect } from '@wordpress/element';
*/
import { store as blockEditorStore } from '../store';
import { InspectorControls } from '../components';
import useSetting from '../components/use-setting';
import { useSettings } from '../components/use-setting';
import { getLayoutType, getLayoutTypes } from '../layouts';
import { useBlockEditingMode } from '../components/block-editing-mode';
import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
Expand Down Expand Up @@ -123,7 +123,7 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
? { ...layout, type: 'constrained' }
: layout || {};
const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
const blockGapSupport = useSetting( 'spacing.blockGap' );
const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
const hasBlockGapSupport = blockGapSupport !== null;
const css = fullLayoutType?.getLayoutStyle?.( {
blockName,
Expand All @@ -142,7 +142,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
} = settings;

const { layout } = attributes;
const defaultThemeLayout = useSetting( 'layout' );
const [ defaultThemeLayout ] = useSettings( 'layout' );
const { themeSupportsLayout } = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
return {
Expand Down Expand Up @@ -375,7 +375,7 @@ export const withLayoutStyles = createHigherOrderComponent(
: null;
// Higher specificity to override defaults from theme.json.
const selector = `.wp-container-${ id }.wp-container-${ id }`;
const blockGapSupport = useSetting( 'spacing.blockGap' );
const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
const hasBlockGapSupport = blockGapSupport !== null;

// Get CSS string for the current layout type.
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/hooks/line-height.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { hasBlockSupport } from '@wordpress/blocks';
*/
import LineHeightControl from '../components/line-height-control';
import { cleanEmptyObject } from './utils';
import useSetting from '../components/use-setting';
import { useSettings } from '../components/use-setting';

export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';

Expand Down Expand Up @@ -54,9 +54,9 @@ export function LineHeightEdit( props ) {
* @return {boolean} Whether setting is disabled.
*/
export function useIsLineHeightDisabled( { name: blockName } = {} ) {
const isDisabled = ! useSetting( 'typography.lineHeight' );
const [ isEnabled ] = useSettings( 'typography.lineHeight' );

return (
! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled
! isEnabled || ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY )
);
}
Loading