Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try a fixed toolbar in the navigation page #21340

Merged
merged 9 commits into from
Apr 16, 2020
Merged

Try a fixed toolbar in the navigation page #21340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6fe780f
Render the block toolbar popover slot in the correct place
talldan Apr 2, 2020
ae996a8
Try fixed toolbar in navigation page
talldan Apr 2, 2020
a410a8b
Clear block selection when changing menus
talldan Apr 3, 2020
a45945c
Fix toolbar styles
talldan Apr 3, 2020
16cf957
Render the Popover.Slot for the block toolbar to ensure navigation mo…
talldan Apr 6, 2020
d8be3a9
Hide the fixed navigation menu page toolbar when entering navigation …
talldan Apr 8, 2020
a796f3c
Fix issue with navigation structure panel being always initially closed
talldan Apr 15, 2020
aff58f7
Do not show a Block Toolbar when the selected block does not exist
talldan Apr 15, 2020
a56ef6e
Account for multi-selections when determining whether a block is sele…
talldan Apr 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/edit-navigation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
1 change: 0 additions & 1 deletion packages/edit-navigation/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export default function Layout( { blockEditorSettings } ) {
<DropZoneProvider>
<FocusReturnProvider>
{ /* <Notices /> */ }
<Popover.Slot name="block-toolbar" />
<TabPanel
className="edit-navigation-layout__tab-panel"
tabs={ [
Expand Down
70 changes: 70 additions & 0 deletions packages/edit-navigation/src/components/menu-editor/block-editor-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import {
BlockList,
BlockToolbar,
NavigableToolbar,
ObserveTyping,
WritingFlow,
} from '@wordpress/block-editor';
import { Button, Panel, PanelBody, Popover } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

export default function BlockEditorPanel( { saveBlocks } ) {
const { isNavigationModeActive, hasSelectedBlock } = useSelect(
( select ) => {
const {
isNavigationMode,
getBlockSelectionStart,
getBlock,
} = select( 'core/block-editor' );

const selectionStartClientId = getBlockSelectionStart();

return {
isNavigationModeActive: isNavigationMode(),
hasSelectedBlock:
!! selectionStartClientId &&
!! getBlock( selectionStartClientId ),
};
},
[]
);

return (
<Panel
header={
<Button isPrimary onClick={ saveBlocks }>
{ __( 'Save navigation' ) }
</Button>
}
>
<PanelBody title={ __( 'Navigation menu' ) }>
<NavigableToolbar
Copy link
Member

Choose a reason for hiding this comment

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

Wouldn't it be fine to just render the toolbar slot in a fixed position?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Using the BlockToolbar component mirrors the way the fixed toolbar is implemented in the post editor. My thoughts were that this is preferable as the movers are implemented differently in BlockToolbar component—they're inline buttons. Whereas with the Slot, the movers reveal and have a drag handle, which doesn't seem like the right behaviour for an inline toolbar.

className={ classnames(
'edit-navigation-menu-editor__block-editor-toolbar',
{
'is-hidden': isNavigationModeActive,
}
) }
aria-label={ __( 'Block tools' ) }
>
{ hasSelectedBlock && <BlockToolbar hideDragHandle /> }
</NavigableToolbar>
<Popover.Slot name="block-toolbar" />
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
</WritingFlow>
</PanelBody>
</Panel>
);
}
46 changes: 8 additions & 38 deletions packages/edit-navigation/src/components/menu-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,16 @@
import {
BlockEditorKeyboardShortcuts,
BlockEditorProvider,
BlockList,
ObserveTyping,
WritingFlow,
__experimentalBlockNavigationList,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { Panel, PanelBody, Button } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';

/**
* 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 );
Expand All @@ -35,42 +31,16 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) {
settings={ {
...blockEditorSettings,
templateLock: 'all',
hasFixedToolbar: true,
} }
>
<BlockEditorKeyboardShortcuts />
<MenuEditorShortcuts saveBlocks={ saveBlocks } />
<Panel className="edit-navigation-menu-editor__panel">
<PanelBody
title={ __( 'Navigation structure' ) }
initialOpen={ isLargeViewport }
>
{ !! blocks.length && (
<__experimentalBlockNavigationList
blocks={ blocks }
selectedBlockClientId={ blocks[ 0 ].clientId }
selectBlock={ () => {} }
showNestedBlocks
showAppender
/>
) }
</PanelBody>
</Panel>
<Panel
header={
<Button isPrimary onClick={ saveBlocks }>
{ __( 'Save navigation' ) }
</Button>
}
className="edit-navigation-menu-editor__panel"
>
<PanelBody title={ __( 'Navigation menu' ) }>
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
</WritingFlow>
</PanelBody>
</Panel>
<NavigationStructurePanel
blocks={ blocks }
initialOpen={ isLargeViewport }
/>
<BlockEditorPanel saveBlocks={ saveBlocks } />
</BlockEditorProvider>
</div>
);
Expand Down
27 changes: 27 additions & 0 deletions packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/**
* WordPress dependencies
*/
import { __experimentalBlockNavigationList } from '@wordpress/block-editor';
import { Panel, PanelBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export default function NavigationStructurePanel( { blocks, initialOpen } ) {
return (
<Panel>
<PanelBody
title={ __( 'Navigation structure' ) }
initialOpen={ initialOpen }
>
{ !! blocks.length && (
<__experimentalBlockNavigationList
blocks={ blocks }
selectedBlockClientId={ blocks[ 0 ].clientId }
selectBlock={ () => {} }
showNestedBlocks
showAppender
/>
) }
</PanelBody>
</Panel>
);
}
40 changes: 40 additions & 0 deletions packages/edit-navigation/src/components/menu-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,44 @@
@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__block-editor-toolbar {
height: 46px;
margin-bottom: 12px;
border: 1px solid #e2e4e7;

// 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;
}


// 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;
}
}
}