From 6fe780fe88f36d487fb5b06527bd29831c482a79 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 2 Apr 2020 09:49:17 +0800 Subject: [PATCH 1/9] Render the block toolbar popover slot in the correct place --- packages/edit-navigation/src/components/layout/index.js | 1 - packages/edit-navigation/src/components/menu-editor/index.js | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js index a79bbc922917ff..8459c6d45349f3 100644 --- a/packages/edit-navigation/src/components/layout/index.js +++ b/packages/edit-navigation/src/components/layout/index.js @@ -23,7 +23,6 @@ export default function Layout( { blockEditorSettings } ) { { /* */ } - + From ae996a8c58f4ecd12732f4d45ea6a3bbd78ecef6 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 2 Apr 2020 10:37:05 +0800 Subject: [PATCH 2/9] Try fixed toolbar in navigation page --- .../src/components/menu-editor/index.js | 15 +++++++++++---- .../src/components/menu-editor/style.scss | 19 +++++++++++++++++++ 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js index 10b051173ce7ca..d52ef43fc31ea2 100644 --- a/packages/edit-navigation/src/components/menu-editor/index.js +++ b/packages/edit-navigation/src/components/menu-editor/index.js @@ -5,13 +5,15 @@ import { BlockEditorKeyboardShortcuts, BlockEditorProvider, BlockList, + BlockToolbar, + NavigableToolbar, ObserveTyping, WritingFlow, __experimentalBlockNavigationList, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; -import { Button, Panel, PanelBody, Popover } from '@wordpress/components'; +import { Button, Panel, PanelBody } from '@wordpress/components'; /** * Internal dependencies @@ -35,11 +37,12 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) { settings={ { ...blockEditorSettings, templateLock: 'all', + hasFixedToolbar: true, } } > - + } - className="edit-navigation-menu-editor__panel" > - + + + diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss index 1c6ddda2c7bce6..44be0db644224c 100644 --- a/packages/edit-navigation/src/components/menu-editor/style.scss +++ b/packages/edit-navigation/src/components/menu-editor/style.scss @@ -5,4 +5,23 @@ @include break-medium { grid-template-columns: 280px 1fr; } + + // Make the block list take up the full width of the panel. + .block-editor-block-list__layout.is-root-container { + padding: 0; + } +} + +.edit-navigation-menu-editor__toolbar { + height: 46px; + margin-bottom: 16px; + border: 1px solid #e2e4e7; + + // Buttons in a fixed top toolbar seem to need their styles overriden. + .components-button { + height: 48px; + min-width: 42px; + padding-left: 11px; + padding-right: 6px; + } } From a410a8be4937f1ceb3a7b762778532e87b7b8bd8 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 3 Apr 2020 13:22:17 +0800 Subject: [PATCH 3/9] Clear block selection when changing menus --- .../menu-editor/block-editor-panel.js | 51 +++++++++++++++++++ .../src/components/menu-editor/index.js | 51 ++----------------- .../menu-editor/navigation-structure-panel.js | 30 +++++++++++ .../src/components/menu-editor/style.scss | 4 +- 4 files changed, 87 insertions(+), 49 deletions(-) create mode 100644 packages/edit-navigation/src/components/menu-editor/block-editor-panel.js create mode 100644 packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js new file mode 100644 index 00000000000000..e5d5ded7a3b8c1 --- /dev/null +++ b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js @@ -0,0 +1,51 @@ +/** + * WordPress dependencies + */ +import { useDispatch } from '@wordpress/data'; +import { useEffect } from '@wordpress/element'; + +import { + BlockList, + BlockToolbar, + NavigableToolbar, + ObserveTyping, + WritingFlow, +} from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; +import { Button, Panel, PanelBody } from '@wordpress/components'; + +export default function BlockEditorPanel( { menuId, saveBlocks } ) { + const { clearSelectedBlock } = useDispatch( 'core/block-editor' ); + + // Clear the selected block when the menu is changed. + // Block selection isn't cleared implicity by the block-editor store. + // Dispatching this action fixes an issue where the toolbar + // for a block continues to be displayed after it no longer exists. + useEffect( () => { + clearSelectedBlock(); + }, [ menuId ] ); + + return ( + + { __( 'Save navigation' ) } + + } + > + + + + + + + + + + + + ); +} diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js index d52ef43fc31ea2..ee831751d0bcbc 100644 --- a/packages/edit-navigation/src/components/menu-editor/index.js +++ b/packages/edit-navigation/src/components/menu-editor/index.js @@ -4,26 +4,18 @@ import { BlockEditorKeyboardShortcuts, BlockEditorProvider, - BlockList, - BlockToolbar, - NavigableToolbar, - ObserveTyping, - WritingFlow, - __experimentalBlockNavigationList, } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; -import { useViewportMatch } from '@wordpress/compose'; -import { Button, Panel, PanelBody } from '@wordpress/components'; /** * Internal dependencies */ import useNavigationBlocks from './use-navigation-blocks'; import MenuEditorShortcuts from './shortcuts'; +import BlockEditorPanel from './block-editor-panel'; +import NavigationStructurePanel from './navigation-structure-panel'; export default function MenuEditor( { menuId, blockEditorSettings } ) { const [ blocks, setBlocks, saveBlocks ] = useNavigationBlocks( menuId ); - const isLargeViewport = useViewportMatch( 'medium' ); return (
@@ -42,43 +34,8 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) { > - - - { !! blocks.length && ( - <__experimentalBlockNavigationList - blocks={ blocks } - selectedBlockClientId={ blocks[ 0 ].clientId } - selectBlock={ () => {} } - showNestedBlocks - showAppender - /> - ) } - - - - { __( 'Save navigation' ) } - - } - > - - - - - - - - - - - + +
); diff --git a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js new file mode 100644 index 00000000000000..92441ad9b1597c --- /dev/null +++ b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { __experimentalBlockNavigationList } from '@wordpress/block-editor'; +import { Panel, PanelBody } from '@wordpress/components'; +import { useViewportMatch } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; + +export default function NavigationStructurePanel( { blocks } ) { + const isLargeViewport = useViewportMatch( 'medium' ); + + return ( + + + { !! blocks.length && ( + <__experimentalBlockNavigationList + blocks={ blocks } + selectedBlockClientId={ blocks[ 0 ].clientId } + selectBlock={ () => {} } + showNestedBlocks + showAppender + /> + ) } + + + ); +} diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss index 44be0db644224c..f957e433f3a605 100644 --- a/packages/edit-navigation/src/components/menu-editor/style.scss +++ b/packages/edit-navigation/src/components/menu-editor/style.scss @@ -11,8 +11,8 @@ padding: 0; } } - -.edit-navigation-menu-editor__toolbar { + +.edit-navigation-menu-editor__block-editor-toolbar { height: 46px; margin-bottom: 16px; border: 1px solid #e2e4e7; From a45945c268a9b1ebefaa0315f215c84fbeec7b11 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 3 Apr 2020 15:35:22 +0800 Subject: [PATCH 4/9] Fix toolbar styles --- .../src/components/menu-editor/style.scss | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss index f957e433f3a605..37e5cfe3a64cc2 100644 --- a/packages/edit-navigation/src/components/menu-editor/style.scss +++ b/packages/edit-navigation/src/components/menu-editor/style.scss @@ -17,11 +17,21 @@ margin-bottom: 16px; border: 1px solid #e2e4e7; - // Buttons in a fixed top toolbar seem to need their styles overriden. - .components-button { - height: 48px; - min-width: 42px; - padding-left: 11px; - padding-right: 6px; + // Borders around toolbar segments. + .components-toolbar { + background: none; + // IE11 has thick paddings without this. + line-height: 0; + + // These margins make the buttons themselves overlap the chrome of the toolbar. + // This helps make them square, and maximize the hit area. + margin-top: -$border-width; + margin-bottom: -$border-width; + + // The component is born with a border, but we only need some of them. + border: 0; + + // Add a border after item groups to show as separator in the block toolbar. + border-right: $border-width solid $light-gray-500; } } From 16cf957e57fd23286bbd2110f2abd70ed6b64922 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 6 Apr 2020 12:05:42 +0800 Subject: [PATCH 5/9] Render the Popover.Slot for the block toolbar to ensure navigation mode works --- .../src/components/menu-editor/block-editor-panel.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js index e5d5ded7a3b8c1..54679cfaec2891 100644 --- a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js +++ b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js @@ -12,7 +12,7 @@ import { WritingFlow, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; -import { Button, Panel, PanelBody } from '@wordpress/components'; +import { Button, Panel, PanelBody, Popover } from '@wordpress/components'; export default function BlockEditorPanel( { menuId, saveBlocks } ) { const { clearSelectedBlock } = useDispatch( 'core/block-editor' ); @@ -40,6 +40,7 @@ export default function BlockEditorPanel( { menuId, saveBlocks } ) { > + From d8be3a905a2c46eb29afcd22b18579700a365349 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 8 Apr 2020 17:08:24 +0800 Subject: [PATCH 6/9] Hide the fixed navigation menu page toolbar when entering navigation mode --- package-lock.json | 1 + packages/edit-navigation/package.json | 1 + .../menu-editor/block-editor-panel.js | 18 ++++++++++++++++-- .../src/components/menu-editor/style.scss | 13 ++++++++++++- 4 files changed, 30 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 13c91692d0d5c9..d0a133d4eedfe5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11113,6 +11113,7 @@ "@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts", "@wordpress/media-utils": "file:packages/media-utils", "@wordpress/notices": "file:packages/notices", + "classnames": "^2.2.5", "lodash": "^4.17.15", "rememo": "^3.0.0" } diff --git a/packages/edit-navigation/package.json b/packages/edit-navigation/package.json index e7e79bf4b4066c..79cfa3da5bab1e 100644 --- a/packages/edit-navigation/package.json +++ b/packages/edit-navigation/package.json @@ -36,6 +36,7 @@ "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", "@wordpress/media-utils": "file:../media-utils", "@wordpress/notices": "file:../notices", + "classnames": "^2.2.5", "lodash": "^4.17.15", "rememo": "^3.0.0" }, diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js index 54679cfaec2891..d508056f8af337 100644 --- a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js +++ b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js @@ -1,7 +1,12 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; import { @@ -16,6 +21,10 @@ import { Button, Panel, PanelBody, Popover } from '@wordpress/components'; export default function BlockEditorPanel( { menuId, saveBlocks } ) { const { clearSelectedBlock } = useDispatch( 'core/block-editor' ); + const isNavigationModeActive = useSelect( + ( select ) => select( 'core/block-editor' ).isNavigationMode(), + [] + ); // Clear the selected block when the menu is changed. // Block selection isn't cleared implicity by the block-editor store. @@ -35,7 +44,12 @@ export default function BlockEditorPanel( { menuId, saveBlocks } ) { > diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss index 37e5cfe3a64cc2..588135bf34c892 100644 --- a/packages/edit-navigation/src/components/menu-editor/style.scss +++ b/packages/edit-navigation/src/components/menu-editor/style.scss @@ -14,7 +14,7 @@ .edit-navigation-menu-editor__block-editor-toolbar { height: 46px; - margin-bottom: 16px; + margin-bottom: 12px; border: 1px solid #e2e4e7; // Borders around toolbar segments. @@ -34,4 +34,15 @@ // Add a border after item groups to show as separator in the block toolbar. border-right: $border-width solid $light-gray-500; } + + + // When entering navigation mode, hide the toolbar, but do so in a way where the + // outer container retains its height to avoid the blocks moving upwards. + &.is-hidden { + border-color: transparent; + + .block-editor-block-toolbar { + display: none; + } + } } From a796f3cb5bfb107954b0537bd80ca6fc14304658 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 15 Apr 2020 12:21:48 +0800 Subject: [PATCH 7/9] Fix issue with navigation structure panel being always initially closed --- .../edit-navigation/src/components/menu-editor/index.js | 7 ++++++- .../components/menu-editor/navigation-structure-panel.js | 7 ++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js index ee831751d0bcbc..5eec32a9d1330c 100644 --- a/packages/edit-navigation/src/components/menu-editor/index.js +++ b/packages/edit-navigation/src/components/menu-editor/index.js @@ -5,6 +5,7 @@ import { BlockEditorKeyboardShortcuts, BlockEditorProvider, } from '@wordpress/block-editor'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -16,6 +17,7 @@ import NavigationStructurePanel from './navigation-structure-panel'; export default function MenuEditor( { menuId, blockEditorSettings } ) { const [ blocks, setBlocks, saveBlocks ] = useNavigationBlocks( menuId ); + const isLargeViewport = useViewportMatch( 'medium' ); return (
@@ -34,7 +36,10 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) { > - +
diff --git a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js index 92441ad9b1597c..68a105b4ee3caf 100644 --- a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js +++ b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js @@ -3,17 +3,14 @@ */ import { __experimentalBlockNavigationList } from '@wordpress/block-editor'; import { Panel, PanelBody } from '@wordpress/components'; -import { useViewportMatch } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -export default function NavigationStructurePanel( { blocks } ) { - const isLargeViewport = useViewportMatch( 'medium' ); - +export default function NavigationStructurePanel( { blocks, initialOpen } ) { return ( { !! blocks.length && ( <__experimentalBlockNavigationList From aff58f736002813db64cd128df8a772d89863b55 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 15 Apr 2020 13:42:17 +0800 Subject: [PATCH 8/9] Do not show a Block Toolbar when the selected block does not exist --- .../menu-editor/block-editor-panel.js | 32 +++++++++---------- .../src/components/menu-editor/index.js | 2 +- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js index d508056f8af337..6ab105f67c49ba 100644 --- a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js +++ b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js @@ -6,9 +6,6 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useDispatch, useSelect } from '@wordpress/data'; -import { useEffect } from '@wordpress/element'; - import { BlockList, BlockToolbar, @@ -16,24 +13,25 @@ import { ObserveTyping, WritingFlow, } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; import { Button, Panel, PanelBody, Popover } from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; -export default function BlockEditorPanel( { menuId, saveBlocks } ) { - const { clearSelectedBlock } = useDispatch( 'core/block-editor' ); - const isNavigationModeActive = useSelect( - ( select ) => select( 'core/block-editor' ).isNavigationMode(), +export default function BlockEditorPanel( { saveBlocks } ) { + const { isNavigationModeActive, hasSelectedBlock } = useSelect( + ( select ) => { + const { isNavigationMode, getSelectedBlock } = select( + 'core/block-editor' + ); + + return { + isNavigationModeActive: isNavigationMode(), + hasSelectedBlock: !! getSelectedBlock(), + }; + }, [] ); - // Clear the selected block when the menu is changed. - // Block selection isn't cleared implicity by the block-editor store. - // Dispatching this action fixes an issue where the toolbar - // for a block continues to be displayed after it no longer exists. - useEffect( () => { - clearSelectedBlock(); - }, [ menuId ] ); - return ( - + { hasSelectedBlock && } diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js index 5eec32a9d1330c..3e8297bdf54038 100644 --- a/packages/edit-navigation/src/components/menu-editor/index.js +++ b/packages/edit-navigation/src/components/menu-editor/index.js @@ -40,7 +40,7 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) { blocks={ blocks } initialOpen={ isLargeViewport } /> - + ); From a56ef6e303bfd5295049dd9f29cdbe1d3ae5ad28 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 15 Apr 2020 14:00:34 +0800 Subject: [PATCH 9/9] Account for multi-selections when determining whether a block is selected --- .../components/menu-editor/block-editor-panel.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js index 6ab105f67c49ba..2d4c6ad44abc6a 100644 --- a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js +++ b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js @@ -20,13 +20,19 @@ import { __ } from '@wordpress/i18n'; export default function BlockEditorPanel( { saveBlocks } ) { const { isNavigationModeActive, hasSelectedBlock } = useSelect( ( select ) => { - const { isNavigationMode, getSelectedBlock } = select( - 'core/block-editor' - ); + const { + isNavigationMode, + getBlockSelectionStart, + getBlock, + } = select( 'core/block-editor' ); + + const selectionStartClientId = getBlockSelectionStart(); return { isNavigationModeActive: isNavigationMode(), - hasSelectedBlock: !! getSelectedBlock(), + hasSelectedBlock: + !! selectionStartClientId && + !! getBlock( selectionStartClientId ), }; }, []