From 544f111907d8076f88922090d0856122bd71567f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 1 Aug 2022 10:03:23 +0100 Subject: [PATCH 1/2] Initial refactor --- .../src/navigation/edit/index.js | 37 ++--------------- .../src/navigation/edit/use-inner-blocks.js | 41 +++++++++++++++++++ 2 files changed, 45 insertions(+), 33 deletions(-) create mode 100644 packages/block-library/src/navigation/edit/use-inner-blocks.js diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 920d1fdc4bc4c..7b0773f5f051e 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -28,7 +28,7 @@ import { } from '@wordpress/block-editor'; import { EntityProvider } from '@wordpress/core-data'; -import { useDispatch, useSelect, useRegistry } from '@wordpress/data'; +import { useDispatch, useRegistry } from '@wordpress/data'; import { PanelBody, ToggleControl, @@ -61,8 +61,7 @@ import useConvertClassicToBlockMenu, { CLASSIC_MENU_CONVERSION_SUCCESS, } from './use-convert-classic-menu-to-block-menu'; import useCreateNavigationMenu from './use-create-navigation-menu'; - -const EMPTY_ARRAY = []; +import { useInnerBlocks } from './use-inner-blocks'; function getComputedStyle( node ) { return node.ownerDocument.defaultView.getComputedStyle( node ); @@ -191,36 +190,8 @@ function Navigation( { uncontrolledInnerBlocks, isInnerBlockSelected, hasSubmenus, - } = useSelect( - ( select ) => { - const { getBlock, getBlocks, hasSelectedInnerBlock } = - select( blockEditorStore ); - - // This relies on the fact that `getBlock` won't return controlled - // inner blocks, while `getBlocks` does. It might be more stable to - // introduce a selector like `getUncontrolledInnerBlocks`, just in - // case `getBlock` is fixed. - const _uncontrolledInnerBlocks = getBlock( clientId ).innerBlocks; - const _hasUncontrolledInnerBlocks = - !! _uncontrolledInnerBlocks?.length; - const _controlledInnerBlocks = _hasUncontrolledInnerBlocks - ? EMPTY_ARRAY - : getBlocks( clientId ); - const innerBlocks = _hasUncontrolledInnerBlocks - ? _uncontrolledInnerBlocks - : _controlledInnerBlocks; - - return { - hasSubmenus: !! innerBlocks.find( - ( block ) => block.name === 'core/navigation-submenu' - ), - hasUncontrolledInnerBlocks: _hasUncontrolledInnerBlocks, - uncontrolledInnerBlocks: _uncontrolledInnerBlocks, - isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ), - }; - }, - [ clientId ] - ); + } = useInnerBlocks( clientId ); + const { replaceInnerBlocks, selectBlock, diff --git a/packages/block-library/src/navigation/edit/use-inner-blocks.js b/packages/block-library/src/navigation/edit/use-inner-blocks.js new file mode 100644 index 0000000000000..932ec79030e8b --- /dev/null +++ b/packages/block-library/src/navigation/edit/use-inner-blocks.js @@ -0,0 +1,41 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; + +const EMPTY_ARRAY = []; + +export function useInnerBlocks( clientId ) { + return useSelect( + ( select ) => { + const { getBlock, getBlocks, hasSelectedInnerBlock } = + select( blockEditorStore ); + + // This relies on the fact that `getBlock` won't return controlled + // inner blocks, while `getBlocks` does. It might be more stable to + // introduce a selector like `getUncontrolledInnerBlocks`, just in + // case `getBlock` is fixed. + const _uncontrolledInnerBlocks = getBlock( clientId ).innerBlocks; + const _hasUncontrolledInnerBlocks = + !! _uncontrolledInnerBlocks?.length; + const _controlledInnerBlocks = _hasUncontrolledInnerBlocks + ? EMPTY_ARRAY + : getBlocks( clientId ); + const innerBlocks = _hasUncontrolledInnerBlocks + ? _uncontrolledInnerBlocks + : _controlledInnerBlocks; + + return { + hasSubmenus: !! innerBlocks.find( + ( block ) => block.name === 'core/navigation-submenu' + ), + hasUncontrolledInnerBlocks: _hasUncontrolledInnerBlocks, + uncontrolledInnerBlocks: _uncontrolledInnerBlocks, + controlledInnerBlocks: _controlledInnerBlocks, + isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ), + }; + }, + [ clientId ] + ); +} From 35731254ea829947c7d4bf4d7ddcb2eca6ce56a5 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 27 Jul 2022 16:46:50 +0100 Subject: [PATCH 2/2] Extract unrelated submenus concept from hook --- packages/block-library/src/navigation/edit/index.js | 6 +++++- .../src/navigation/edit/use-inner-blocks.js | 10 ++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 7b0773f5f051e..a83d5d3545371 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -189,9 +189,13 @@ function Navigation( { hasUncontrolledInnerBlocks, uncontrolledInnerBlocks, isInnerBlockSelected, - hasSubmenus, + innerBlocks, } = useInnerBlocks( clientId ); + const hasSubmenus = !! innerBlocks.find( + ( block ) => block.name === 'core/navigation-submenu' + ); + const { replaceInnerBlocks, selectBlock, diff --git a/packages/block-library/src/navigation/edit/use-inner-blocks.js b/packages/block-library/src/navigation/edit/use-inner-blocks.js index 932ec79030e8b..70a8415e1f993 100644 --- a/packages/block-library/src/navigation/edit/use-inner-blocks.js +++ b/packages/block-library/src/navigation/edit/use-inner-blocks.js @@ -17,19 +17,17 @@ export function useInnerBlocks( clientId ) { // introduce a selector like `getUncontrolledInnerBlocks`, just in // case `getBlock` is fixed. const _uncontrolledInnerBlocks = getBlock( clientId ).innerBlocks; + const _hasUncontrolledInnerBlocks = !! _uncontrolledInnerBlocks?.length; const _controlledInnerBlocks = _hasUncontrolledInnerBlocks ? EMPTY_ARRAY : getBlocks( clientId ); - const innerBlocks = _hasUncontrolledInnerBlocks - ? _uncontrolledInnerBlocks - : _controlledInnerBlocks; return { - hasSubmenus: !! innerBlocks.find( - ( block ) => block.name === 'core/navigation-submenu' - ), + innerBlocks: _hasUncontrolledInnerBlocks + ? _uncontrolledInnerBlocks + : _controlledInnerBlocks, hasUncontrolledInnerBlocks: _hasUncontrolledInnerBlocks, uncontrolledInnerBlocks: _uncontrolledInnerBlocks, controlledInnerBlocks: _controlledInnerBlocks,