From 9e62436c31591f421d3567be9f303721dcb36a52 Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 24 Jan 2023 17:25:08 +0000 Subject: [PATCH 1/2] Refactor to have an onSelect event. (+1 squashed commit) Squashed commits: [d32556f7ff] Add ability to open the editor on the selected post on navigation. --- .../components/navigation-inspector/index.js | 17 +++++++++++++- .../navigation-inspector/navigation-menu.js | 2 +- .../index.js | 22 ++++++++++++++++++- 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/navigation-inspector/index.js b/packages/edit-site/src/components/navigation-inspector/index.js index 12d5b9819debd..a006d6b6c0962 100644 --- a/packages/edit-site/src/components/navigation-inspector/index.js +++ b/packages/edit-site/src/components/navigation-inspector/index.js @@ -20,7 +20,21 @@ import NavigationMenu from './navigation-menu'; const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ]; -export default function NavigationInspector() { +function SelectionEffect( { onSelect } ) { + const selectedBlock = useSelect( ( select ) => { + const { getSelectedBlock } = select( blockEditorStore ); + return getSelectedBlock(); + } ); + // When a navigation item is selected call the onSelect callback. + useEffect( () => { + if ( selectedBlock ) { + onSelect( selectedBlock ); + } + }, [ selectedBlock ] ); + return null; +} + +export default function NavigationInspector( { onSelect } ) { const { selectedNavigationBlockId, clientIdToRef, @@ -207,6 +221,7 @@ export default function NavigationInspector() { onInput={ onInput } > + { onSelect && } ) } diff --git a/packages/edit-site/src/components/navigation-inspector/navigation-menu.js b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js index cf70394e194bc..e281166f99cfb 100644 --- a/packages/edit-site/src/components/navigation-inspector/navigation-menu.js +++ b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js @@ -56,5 +56,5 @@ export default function NavigationMenu( { innerBlocks } ) { } ); }, [ updateBlockListSettings, innerBlocks ] ); - return ; + return ; } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js index eae9e9cd7f19d..c25c0e1956f02 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js @@ -2,14 +2,34 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { useCallback } from '@wordpress/element'; /** * Internal dependencies */ import SidebarNavigationScreen from '../sidebar-navigation-screen'; import NavigationInspector from '../navigation-inspector'; +import { useHistory } from '../routes'; export default function SidebarNavigationScreenNavigationMenus() { + const history = useHistory(); + const onSelect = useCallback( + ( selectedBlock ) => { + const { attributes } = selectedBlock; + if ( + attributes.kind === 'post-type' && + attributes.id && + attributes.type && + history + ) { + history.push( { + postType: attributes.type, + postId: attributes.id, + } ); + } + }, + [ history ] + ); return ( - + } /> From f5213e080795958286f7459fc60c6f0c8e6108f3 Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 2 Feb 2023 22:08:45 +0000 Subject: [PATCH 2/2] onSelect in the click event. --- .../src/components/off-canvas-editor/index.js | 10 ++++++++-- .../components/navigation-inspector/index.js | 20 ++++--------------- .../navigation-inspector/navigation-menu.js | 4 ++-- 3 files changed, 14 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js index 593a2c2e97ca3..4066aba9f1f9c 100644 --- a/packages/block-editor/src/components/off-canvas-editor/index.js +++ b/packages/block-editor/src/components/off-canvas-editor/index.js @@ -60,7 +60,8 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; * @param {boolean} props.showBlockMovers Flag to enable block movers * @param {boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. * @param {Object} props.LeafMoreMenu Optional more menu substitution. - * @param {string} props.description Optional accessible description for the tree grid component. + * @param {string} props.description Optional accessible description for the tree grid component. + * @param {string} props.onSelect Optional callback to be invoked when a block is selected. * @param {Object} ref Forwarded ref */ function OffCanvasEditor( @@ -71,9 +72,11 @@ function OffCanvasEditor( isExpanded = false, LeafMoreMenu, description = __( 'Block navigation structure' ), + onSelect, }, ref ) { + const { getBlock } = useSelect( blockEditorStore ); const { clientIdsTree, draggedClientIds, selectedClientIds } = useListViewClientIds( blocks ); @@ -113,8 +116,11 @@ function OffCanvasEditor( ( event, blockClientId ) => { updateBlockSelection( event, blockClientId ); setSelectedTreeId( blockClientId ); + if ( onSelect ) { + onSelect( getBlock( blockClientId ) ); + } }, - [ setSelectedTreeId, updateBlockSelection ] + [ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ] ); useEffect( () => { isMounted.current = true; diff --git a/packages/edit-site/src/components/navigation-inspector/index.js b/packages/edit-site/src/components/navigation-inspector/index.js index a006d6b6c0962..e109878f65466 100644 --- a/packages/edit-site/src/components/navigation-inspector/index.js +++ b/packages/edit-site/src/components/navigation-inspector/index.js @@ -20,20 +20,6 @@ import NavigationMenu from './navigation-menu'; const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ]; -function SelectionEffect( { onSelect } ) { - const selectedBlock = useSelect( ( select ) => { - const { getSelectedBlock } = select( blockEditorStore ); - return getSelectedBlock(); - } ); - // When a navigation item is selected call the onSelect callback. - useEffect( () => { - if ( selectedBlock ) { - onSelect( selectedBlock ); - } - }, [ selectedBlock ] ); - return null; -} - export default function NavigationInspector( { onSelect } ) { const { selectedNavigationBlockId, @@ -220,8 +206,10 @@ export default function NavigationInspector( { onSelect } ) { onChange={ onChange } onInput={ onInput } > - - { onSelect && } + ) } diff --git a/packages/edit-site/src/components/navigation-inspector/navigation-menu.js b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js index e281166f99cfb..9e201a660f80a 100644 --- a/packages/edit-site/src/components/navigation-inspector/navigation-menu.js +++ b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js @@ -36,7 +36,7 @@ const ALLOWED_BLOCKS = { ], }; -export default function NavigationMenu( { innerBlocks } ) { +export default function NavigationMenu( { innerBlocks, onSelect } ) { const { updateBlockListSettings } = useDispatch( blockEditorStore ); const { OffCanvasEditor } = unlock( blockEditorExperiments ); @@ -56,5 +56,5 @@ export default function NavigationMenu( { innerBlocks } ) { } ); }, [ updateBlockListSettings, innerBlocks ] ); - return ; + return ; }