Skip to content

Commit

Permalink
Try a toolbar for the block navigator
Browse files Browse the repository at this point in the history
  • Loading branch information
talldan committed Apr 17, 2020
1 parent 10e19e0 commit e6cba6a
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 8 deletions.
25 changes: 25 additions & 0 deletions packages/block-editor/src/components/block-navigation/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -93,3 +93,28 @@ $tree-item-height: 36px;
.components-popover.block-editor-block-navigation__popover {
z-index: z-index(".components-popover.block-editor-block-navigation__popover");
}

.block-editor-block-navigation-toolbar {
display: flex;
flex-direction: row;
height: 48px;
margin-bottom: 16px;
border: 1px solid #e2e4e7;

.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;
}
}
49 changes: 49 additions & 0 deletions packages/block-editor/src/components/block-navigation/toolbar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { Button, ToolbarGroup } from '@wordpress/components';
import { insertAfter, trash } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import BlockActions from '../block-actions';
import BlockMover from '../block-mover';

export default function BlockNavigationToolbar() {
const blockClientIds = useSelect( ( select ) =>
select( 'core/block-editor' ).getSelectedBlockClientIds()
);

return (
<BlockActions clientIds={ blockClientIds }>
{ ( { canDuplicate, isLocked, onDuplicate, onRemove } ) => (
<div className="block-editor-block-navigation-toolbar">
<BlockMover
clientIds={ blockClientIds }
__experimentalOrientation="vertical"
hideDragHandle
/>
{ ! isLocked && (
<ToolbarGroup>
{ canDuplicate && (
<Button
onClick={ onDuplicate }
label={ __( 'Duplicate block' ) }
icon={ insertAfter }
/>
) }
<Button
onClick={ onRemove }
label={ __( 'Remove block' ) }
icon={ trash }
/>
</ToolbarGroup>
) }
</div>
) }
</BlockActions>
);
}
1 change: 1 addition & 0 deletions packages/block-editor/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export { default as BlockFormatControls } from './block-format-controls';
export { default as BlockIcon } from './block-icon';
export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
export { default as __experimentalBlockNavigationList } from './block-navigation/list';
export { default as __experimentalBlockNavigationToolbar } from './block-navigation/toolbar';
export { default as __experimentalBlockPatterns } from './block-patterns';
export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,25 +1,39 @@
/**
* WordPress dependencies
*/
import { __experimentalBlockNavigationList } from '@wordpress/block-editor';
import {
__experimentalBlockNavigationToolbar as BlockNavigationToolbar,
__experimentalBlockNavigationList as BlockNavigationList,
} from '@wordpress/block-editor';
import { Panel, PanelBody } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

export default function NavigationStructurePanel( { blocks, initialOpen } ) {
const selectedBlockClientIds = useSelect( ( select ) =>
select( 'core/block-editor' ).getSelectedBlockClientIds()
);

const { selectBlock } = useDispatch( 'core/block-editor' );
return (
<Panel className="edit-navigation-menu-editor__navigation-structure-panel">
<PanelBody
title={ __( 'Navigation structure' ) }
initialOpen={ initialOpen }
>
{ !! blocks.length && (
<__experimentalBlockNavigationList
blocks={ blocks }
selectedBlockClientId={ blocks[ 0 ].clientId }
selectBlock={ () => {} }
showNestedBlocks
showAppender
/>
<>
<BlockNavigationToolbar />
<BlockNavigationList
blocks={ blocks }
selectedBlockClientId={
selectedBlockClientIds[ 0 ]
}
selectBlock={ selectBlock }
showNestedBlocks
showAppender
/>
</>
) }
</PanelBody>
</Panel>
Expand Down

0 comments on commit e6cba6a

Please sign in to comment.