Skip to content

Commit

Permalink
Block editor: remove 4 useSelect in favour of context (#56915)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix authored Dec 11, 2023
1 parent b6860f0 commit 7358f66
Show file tree
Hide file tree
Showing 14 changed files with 119 additions and 109 deletions.
12 changes: 8 additions & 4 deletions packages/block-editor/src/components/block-controls/hook.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,18 @@
* Internal dependencies
*/
import groups from './groups';
import useDisplayBlockControls from '../use-display-block-controls';
import {
useBlockEditContext,
mayDisplayControlsKey,
mayDisplayParentControlsKey,
} from '../block-edit/context';

export default function useBlockControlsFill( group, shareWithChildBlocks ) {
const { isDisplayed, isParentDisplayed } = useDisplayBlockControls();
if ( isDisplayed ) {
const context = useBlockEditContext();
if ( context[ mayDisplayControlsKey ] ) {
return groups[ group ]?.Fill;
}
if ( isParentDisplayed && shareWithChildBlocks ) {
if ( context[ mayDisplayParentControlsKey ] && shareWithChildBlocks ) {
return groups.parent.Fill;
}
return null;
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-controls/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ describe( 'BlockControls', () => {
it( 'should render a dynamic toolbar of controls', () => {
render(
<SlotFillProvider>
<BlockEdit name="core/test-block" isSelected>
<BlockEdit name="core/test-block" mayDisplayControls>
<BlockControls controls={ controls }>
<p>Child</p>
</BlockControls>
Expand All @@ -84,7 +84,7 @@ describe( 'BlockControls', () => {
it( 'should render its children', () => {
render(
<SlotFillProvider>
<BlockEdit name="core/test-block" isSelected>
<BlockEdit name="core/test-block" mayDisplayControls>
<BlockControls controls={ controls }>
<p>Child</p>
</BlockControls>
Expand All @@ -99,7 +99,7 @@ describe( 'BlockControls', () => {
it( 'should a dynamic toolbar when passed as children', () => {
render(
<SlotFillProvider>
<BlockEdit name="core/test-block" isSelected>
<BlockEdit name="core/test-block" mayDisplayControls>
<BlockControls>
<ToolbarGroup controls={ controls } />
</BlockControls>
Expand Down
3 changes: 3 additions & 0 deletions packages/block-editor/src/components/block-edit/context.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
*/
import { createContext, useContext } from '@wordpress/element';

export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );

export const DEFAULT_BLOCK_EDIT_CONTEXT = {
name: '',
isSelected: false,
Expand Down
46 changes: 36 additions & 10 deletions packages/block-editor/src/components/block-edit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ import { hasBlockSupport } from '@wordpress/blocks';
* Internal dependencies
*/
import Edit from './edit';
import { BlockEditContextProvider, useBlockEditContext } from './context';
import {
BlockEditContextProvider,
useBlockEditContext,
mayDisplayControlsKey,
mayDisplayParentControlsKey,
} from './context';

/**
* The `useBlockEditContext` hook provides information about the block this hook is being used in.
Expand All @@ -20,7 +25,13 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
*/
export { useBlockEditContext };

export default function BlockEdit( props ) {
export default function BlockEdit( {
mayDisplayControls,
mayDisplayParentControls,
// The remaining props are passed through the BlockEdit filters and are thus
// public API!
...props
} ) {
const {
name,
isSelected,
Expand All @@ -32,19 +43,34 @@ export default function BlockEdit( props ) {
const layoutSupport =
hasBlockSupport( name, 'layout', false ) ||
hasBlockSupport( name, '__experimentalLayout', false );
const context = {
name,
isSelected,
clientId,
layout: layoutSupport ? layout : null,
__unstableLayoutClassNames,
};
return (
<BlockEditContextProvider
// It is important to return the same object if props haven't
// changed to avoid unnecessary rerenders.
// See https://reactjs.org/docs/context.html#caveats.
value={ useMemo( () => context, Object.values( context ) ) }
value={ useMemo(
() => ( {
name,
isSelected,
clientId,
layout: layoutSupport ? layout : null,
__unstableLayoutClassNames,
// We use symbols in favour of an __unstable prefix to avoid
// usage outside of the package (this context is exposed).
[ mayDisplayControlsKey ]: mayDisplayControls,
[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
} ),
[
name,
isSelected,
clientId,
layoutSupport,
layout,
__unstableLayoutClassNames,
mayDisplayControls,
mayDisplayParentControls,
]
) }
>
<Edit { ...props } />
</BlockEditContextProvider>
Expand Down
9 changes: 6 additions & 3 deletions packages/block-editor/src/components/block-info-slot-fill/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,17 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import useDisplayBlockControls from '../use-display-block-controls';
import {
useBlockEditContext,
mayDisplayControlsKey,
} from '../block-edit/context';

const { createPrivateSlotFill } = unlock( componentsPrivateApis );
const { Fill, Slot } = createPrivateSlotFill( 'BlockInformation' );

const BlockInfo = ( props ) => {
const { isDisplayed } = useDisplayBlockControls();
if ( ! isDisplayed ) {
const context = useBlockEditContext();
if ( ! context[ mayDisplayControlsKey ] ) {
return null;
}
return <Fill { ...props } />;
Expand Down
24 changes: 23 additions & 1 deletion packages/block-editor/src/components/block-list/block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
switchToBlockType,
getDefaultBlockName,
isUnmodifiedBlock,
store as blocksStore,
} from '@wordpress/blocks';
import { withFilters } from '@wordpress/components';
import {
Expand Down Expand Up @@ -95,21 +96,40 @@ function BlockListBlock( {
themeSupportsLayout,
isTemporarilyEditingAsBlocks,
blockEditingMode,
mayDisplayControls,
mayDisplayParentControls,
} = useSelect(
( select ) => {
const {
getSettings,
__unstableGetTemporarilyEditingAsBlocks,
getBlockEditingMode,
getBlockName,
isFirstMultiSelectedBlock,
getMultiSelectedBlockClientIds,
hasSelectedInnerBlock,
} = select( blockEditorStore );
const { hasBlockSupport } = select( blocksStore );
return {
themeSupportsLayout: getSettings().supportsLayout,
isTemporarilyEditingAsBlocks:
__unstableGetTemporarilyEditingAsBlocks() === clientId,
blockEditingMode: getBlockEditingMode( clientId ),
mayDisplayControls:
isSelected ||
( isFirstMultiSelectedBlock( clientId ) &&
getMultiSelectedBlockClientIds().every(
( id ) => getBlockName( id ) === name
) ),
mayDisplayParentControls:
hasBlockSupport(
getBlockName( clientId ),
'__experimentalExposeControlsToChildren',
false
) && hasSelectedInnerBlock( clientId ),
};
},
[ clientId ]
[ clientId, isSelected, name ]
);
const { removeBlock } = useDispatch( blockEditorStore );
const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
Expand Down Expand Up @@ -137,6 +157,8 @@ function BlockListBlock( {
__unstableParentLayout={
Object.keys( parentLayout ).length ? parentLayout : undefined
}
mayDisplayControls={ mayDisplayControls }
mayDisplayParentControls={ mayDisplayParentControls }
/>
);

Expand Down
11 changes: 11 additions & 0 deletions packages/block-editor/src/components/block-list/block.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ function BlockListBlock( {
isDescendentBlockSelected,
isParentSelected,
order,
mayDisplayControls,
} = useSelect(
( select ) => {
const {
Expand All @@ -158,6 +159,9 @@ function BlockListBlock( {
getSelectedBlockClientId,
getSettings,
hasSelectedInnerBlock,
getBlockName,
isFirstMultiSelectedBlock,
getMultiSelectedBlockClientIds,
} = select( blockEditorStore );
const currentBlockType = getBlockType( name || 'core/missing' );
const currentBlockCategory = currentBlockType?.category;
Expand Down Expand Up @@ -205,6 +209,12 @@ function BlockListBlock( {
isDescendentBlockSelected: descendentBlockSelected,
isParentSelected: parentSelected,
order: blockOrder,
mayDisplayControls:
isSelected ||
( isFirstMultiSelectedBlock( clientId ) &&
getMultiSelectedBlockClientIds().every(
( id ) => getBlockName( id ) === name
) ),
};
},
[ clientId, isSelected, name, rootClientId ]
Expand Down Expand Up @@ -346,6 +356,7 @@ function BlockListBlock( {
: undefined
}
wrapperProps={ wrapperProps }
mayDisplayControls={ mayDisplayControls }
/>
<View onLayout={ onLayout } />
</GlobalStylesContext.Provider>
Expand Down
9 changes: 6 additions & 3 deletions packages/block-editor/src/components/inspector-controls/fill.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ import { useEffect, useContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import useDisplayBlockControls from '../use-display-block-controls';
import {
useBlockEditContext,
mayDisplayControlsKey,
} from '../block-edit/context';
import groups from './groups';

export default function InspectorControlsFill( {
Expand All @@ -33,13 +36,13 @@ export default function InspectorControlsFill( {
group = __experimentalGroup;
}

const { isDisplayed } = useDisplayBlockControls();
const context = useBlockEditContext();
const Fill = groups[ group ]?.Fill;
if ( ! Fill ) {
warning( `Unknown InspectorControls group "${ group }" provided.` );
return null;
}
if ( ! isDisplayed ) {
if ( ! context[ mayDisplayControlsKey ] ) {
return null;
}

Expand Down
9 changes: 6 additions & 3 deletions packages/block-editor/src/components/inspector-controls/fill.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ import deprecated from '@wordpress/deprecated';
* Internal dependencies
*/
import groups from './groups';
import useDisplayBlockControls from '../use-display-block-controls';
import {
useBlockEditContext,
mayDisplayControlsKey,
} from '../block-edit/context';
import { BlockSettingsButton } from '../block-settings';

export default function InspectorControlsFill( {
Expand All @@ -35,14 +38,14 @@ export default function InspectorControlsFill( {
);
group = __experimentalGroup;
}
const { isDisplayed } = useDisplayBlockControls();
const context = useBlockEditContext();

const Fill = groups[ group ]?.Fill;
if ( ! Fill ) {
warning( `Unknown InspectorControls group "${ group }" provided.` );
return null;
}
if ( ! isDisplayed ) {
if ( ! context[ mayDisplayControlsKey ] ) {
return null;
}

Expand Down
42 changes: 0 additions & 42 deletions packages/block-editor/src/components/use-display-block-controls/index.js
View file

This file was deleted.

33 changes: 0 additions & 33 deletions packages/block-editor/src/components/use-display-block-controls/index.native.js
View file

This file was deleted.

Loading

1 comment on commit 7358f66

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 7358f66.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7165872651
📝 Reported issues:

Please sign in to comment.