Refactor: useBlockTools hook #58979
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { getBlockType, hasBlockSupport } from '@wordpress/blocks'; | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { store as blockEditorStore } from '../../store'; | ||
| import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls'; | ||
|
|
||
| /** | ||
| * Returns true if the block toolbar should be shown. | ||
| * | ||
| * @return {boolean} Whether the block toolbar component will be rendered. | ||
| */ | ||
| export function useHasBlockToolbar() { | ||
| const hasAnyBlockControls = useHasAnyBlockControls(); | ||
| return useSelect( | ||
| ( select ) => { | ||
| const { | ||
| getBlockEditingMode, | ||
| getBlockName, | ||
| getSelectedBlockClientIds, | ||
| } = select( blockEditorStore ); | ||
|
|
||
| const selectedBlockClientIds = getSelectedBlockClientIds(); | ||
| const selectedBlockClientId = selectedBlockClientIds[ 0 ]; | ||
|
Comment on lines
+27
to
+28
There was a problem hiding this comment. Suggestion: We can probably use There was a problem hiding this comment. I do think that would be a good change because
So, as it would be a functional change, I think we should do it in a follow-up. |
||
| const isDefaultEditingMode = | ||
| getBlockEditingMode( selectedBlockClientId ) === 'default'; | ||
| const blockType = | ||
| selectedBlockClientId && | ||
| getBlockType( getBlockName( selectedBlockClientId ) ); | ||
| const isToolbarEnabled = | ||
| blockType && | ||
| hasBlockSupport( blockType, '__experimentalToolbar', true ); | ||
|
|
||
| if ( | ||
| ! isToolbarEnabled || | ||
| ( ! isDefaultEditingMode && ! hasAnyBlockControls ) | ||
| ) { | ||
| return false; | ||
| } | ||
|
Comment on lines
+38
to
+43
There was a problem hiding this comment. This is the same check that |
||
|
|
||
| return true; | ||
| }, | ||
| [ hasAnyBlockControls ] | ||
| ); | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { store as blockEditorStore } from '../../store'; | ||
| import { useHasBlockToolbar } from '../block-toolbar/use-has-block-toolbar'; | ||
|
|
||
| /** | ||
| * Source of truth for which block tools are showing in the block editor. | ||
| * | ||
| * @return {Object} Object of which block tools will be shown. | ||
| */ | ||
| export function useShowBlockTools() { | ||
| const hasBlockToolbar = useHasBlockToolbar(); | ||
|
|
||
| return useSelect( | ||
| ( select ) => { | ||
| const { | ||
| getSelectedBlockClientId, | ||
| getFirstMultiSelectedBlockClientId, | ||
| getBlock, | ||
| getSettings, | ||
| hasMultiSelection, | ||
| __unstableGetEditorMode, | ||
| isTyping, | ||
| } = select( blockEditorStore ); | ||
|
|
||
| const clientId = | ||
| getSelectedBlockClientId() || | ||
| getFirstMultiSelectedBlockClientId(); | ||
|
|
||
| const { name = '', attributes = {} } = getBlock( clientId ) || {}; | ||
| const editorMode = __unstableGetEditorMode(); | ||
| const hasSelectedBlock = clientId && name; | ||
| const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( { | ||
| name, | ||
| attributes, | ||
| } ); | ||
| const _showEmptyBlockSideInserter = | ||
| clientId && | ||
| ! isTyping() && | ||
| editorMode === 'edit' && | ||
| isUnmodifiedDefaultBlock( { name, attributes } ); | ||
| const maybeShowBreadcrumb = | ||
| hasSelectedBlock && | ||
| ! hasMultiSelection() && | ||
| ( editorMode === 'navigation' || editorMode === 'zoom-out' ); | ||
|
|
||
| return { | ||
| showEmptyBlockSideInserter: _showEmptyBlockSideInserter, | ||
| showBreadcrumb: | ||
| ! _showEmptyBlockSideInserter && maybeShowBreadcrumb, | ||
| showBlockToolbarPopover: | ||
| hasBlockToolbar && | ||
| ! getSettings().hasFixedToolbar && | ||
| ! _showEmptyBlockSideInserter && | ||
| hasSelectedBlock && | ||
| ! isEmptyDefaultBlock && | ||
| ! maybeShowBreadcrumb, | ||
| showFixedToolbar: | ||
| editorMode !== 'zoom-out' && | ||
| hasBlockToolbar && | ||
| getSettings().hasFixedToolbar, | ||
|
Comment on lines
+55
to
+68
There was a problem hiding this comment. This hook subscribes to four values. Three of these are only used by I'm unsure if moving the selection of values used only by There was a problem hiding this comment. I had concerns about that too. However, the information we need for There was a problem hiding this comment. This is probably fine. We can always refactor if CodeVitals catches any perf regression. There was a problem hiding this comment. It's fine, it's not worth trying to optimise performance here because there's only one block toolbar visible at any point in time. There was a problem hiding this comment. Or maybe not, looking at the comments below. Not sure if this is the cause of the regression though. |
||
| }; | ||
| }, | ||
| [ hasBlockToolbar ] | ||
| ); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This isn't a check to know if it will show or not, but rather if it can be shown. Like, does the current selection have a block toolbar it can render?
useShowBlockToolbarmakes me think it will do something to display the toolbar.