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.

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

Merge the block navigation and the document outline in the same popover/panel #14956

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 4 additions & 0 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,10 @@ Undocumented declaration.

Undocumented declaration.

<a name="BlockNavigation" href="#BlockNavigation">#</a> **BlockNavigation**

Undocumented declaration.

<a name="BlockNavigationDropdown" href="#BlockNavigationDropdown">#</a> **BlockNavigationDropdown**

Undocumented declaration.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,80 +1,13 @@
/**
* WordPress dependencies
*/
import { Button, Dropdown, SVG, Path } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
*/
import BlockNavigation from './';

const MenuIcon = (
<SVG
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<Path d="M13.8 5.2H3v1.5h10.8V5.2zm-3.6 12v1.5H21v-1.5H10.2zm7.2-6H6.6v1.5h10.8v-1.5z" />
</SVG>
);

function BlockNavigationDropdownToggle( { isEnabled, onToggle, isOpen } ) {
useShortcut(
'core/edit-post/toggle-block-navigation',
useCallback( onToggle, [ onToggle ] ),
{
bindGlobal: true,
isDisabled: ! isEnabled,
}
);
const shortcut = useSelect(
( select ) =>
select( 'core/keyboard-shortcuts' ).getShortcutRepresentation(
'core/edit-post/toggle-block-navigation'
),
[]
);

return (
<Button
icon={ MenuIcon }
aria-expanded={ isOpen }
onClick={ isEnabled ? onToggle : undefined }
label={ __( 'Block navigation' ) }
className="block-editor-block-navigation"
shortcut={ shortcut }
aria-disabled={ ! isEnabled }
/>
);
}

function BlockNavigationDropdown( { isDisabled } ) {
const hasBlocks = useSelect(
( select ) => !! select( 'core/block-editor' ).getBlockCount(),
[]
);
const isEnabled = hasBlocks && ! isDisabled;

return (
<Dropdown
contentClassName="block-editor-block-navigation__popover"
position="bottom right"
renderToggle={ ( toggleProps ) => (
<BlockNavigationDropdownToggle
{ ...toggleProps }
isEnabled={ isEnabled }
/>
) }
renderContent={ ( { onClose } ) => (
<BlockNavigation onSelect={ onClose } />
) }
/>
);
function BlockNavigationDropdown() {
deprecated( 'BlockNavigationDropdown component', {
hint: 'This component is now include in the TableOfContents component.',
} );
return null;
}

export default BlockNavigationDropdown;
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { noop } from 'lodash';
import { withSelect, withDispatch } from '@wordpress/data';
import { NavigableMenu } from '@wordpress/components';
import { compose } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -36,9 +35,6 @@ function BlockNavigation( {
role="presentation"
className="block-editor-block-navigation__container"
>
<p className="block-editor-block-navigation__label">
{ __( 'Block navigation' ) }
</p>
{ hasHierarchy && (
<BlockNavigationList
blocks={ [ rootBlock ] }
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,6 @@
$tree-border-width: 2px;
$tree-item-height: 36px;

.block-editor-block-navigation__container {
padding: $grid-unit-10 - $border-width;
}

.block-editor-block-navigation__label {
margin: 0 0 $grid-unit-10;
color: $dark-gray-300;
}

.block-editor-block-navigation__list,
.block-editor-block-navigation__paragraph {
padding: 0;
Expand Down
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 @@ -13,6 +13,7 @@ export { default as BlockControls } from './block-controls';
export { default as BlockEdit, useBlockEditContext } from './block-edit';
export { default as BlockFormatControls } from './block-format-controls';
export { default as BlockIcon } from './block-icon';
export { default as BlockNavigation } from './block-navigation';
export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
Copy link
Contributor Author

@youknowriad youknowriad Apr 12, 2019

Choose a reason for hiding this comment

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

This dropdown won't be used anywhere in Gutenberg. I feel like we can probably safely remove it as I don't think third party developers would need this but since it's part of the public API, I kept it for now.

export { default as __experimentalBlockNavigationList } from './block-navigation/list';
export { default as __experimentalBlockPatterns } from './block-patterns';
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/editor/blocks/columns.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe( 'Columns', () => {
it( 'restricts all blocks inside the columns block', async () => {
await insertBlock( 'Columns' );
await page.click( '[aria-label="Two columns; equal split"]' );
await page.click( '[aria-label="Block navigation"]' );
await page.click( '[aria-label="Content structure"]' );
const columnBlockMenuItem = (
await page.$x(
'//button[contains(concat(" ", @class, " "), " block-editor-block-navigation__item-button ")][text()="Column"]'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ describe( 'Navigating the block hierarchy', () => {
await page.keyboard.type( 'First column' );

// Navigate to the columns blocks.
await page.click( '[aria-label="Block navigation"]' );
await page.click( '[aria-label="Content structure"]' );
const columnsBlockMenuItem = (
await page.$x(
"//button[contains(@class,'block-editor-block-navigation__item') and contains(text(), 'Columns')]"
Expand All @@ -52,7 +52,7 @@ describe( 'Navigating the block hierarchy', () => {
await page.keyboard.type( '3' );

// Navigate to the last column block.
await page.click( '[aria-label="Block navigation"]' );
await page.click( '[aria-label="Content structure"]' );
const lastColumnsBlockMenuItem = (
await page.$x(
"//button[contains(@class,'block-editor-block-navigation__item') and contains(text(), 'Column')]"
Expand Down Expand Up @@ -85,6 +85,7 @@ describe( 'Navigating the block hierarchy', () => {

// Navigate to the columns blocks using the keyboard.
await openBlockNavigator();
await pressKeyTimes( 'Tab', 2 );
await page.keyboard.press( 'Enter' );

// Move focus to the sidebar area.
Expand All @@ -98,7 +99,7 @@ describe( 'Navigating the block hierarchy', () => {

// Navigate to the last column in the columns block.
await openBlockNavigator();
await pressKeyTimes( 'Tab', 4 );
await pressKeyTimes( 'Tab', 6 );
await page.keyboard.press( 'Enter' );
await page.waitForSelector( '.is-selected[data-type="core/column"]' );

Expand Down Expand Up @@ -127,6 +128,7 @@ describe( 'Navigating the block hierarchy', () => {

// Return to first block.
await openBlockNavigator();
await pressKeyTimes( 'Tab', 2 );
await page.keyboard.press( 'Space' );

// Replace its content.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
Inserter,
BlockToolbar,
NavigableToolbar,
BlockNavigationDropdown,
ToolSelector,
} from '@wordpress/block-editor';
import {
Expand Down Expand Up @@ -68,7 +67,6 @@ function HeaderToolbar() {
<EditorHistoryUndo />
<EditorHistoryRedo />
<TableOfContents hasOutlineItemsDisabled={ isTextModeEnabled } />
<BlockNavigationDropdown isDisabled={ isTextModeEnabled } />
{ displayBlockToolbar && (
<div className="edit-post-header-toolbar__block-toolbar">
<BlockToolbar hideDragHandle />
Expand Down
58 changes: 40 additions & 18 deletions packages/editor/src/components/table-of-contents/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,56 @@
*/
import { __ } from '@wordpress/i18n';
import { Dropdown, Button } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { useSelect } from '@wordpress/data';
import { info } from '@wordpress/icons';
import { useCallback } from '@wordpress/element';
import { useShortcut } from '@wordpress/keyboard-shortcuts';

/**
* Internal dependencies
*/
import TableOfContentsPanel from './panel';

function TableOfContents( { hasBlocks, hasOutlineItemsDisabled } ) {
function TableOfContentsToggle( { isOpen, onToggle } ) {
useShortcut(
'core/edit-post/toggle-block-navigation',
useCallback( onToggle, [ onToggle ] ),
{
bindGlobal: true,
}
);
const { shortcut, hasBlocks } = useSelect( ( select ) => {
return {
shortcut: select(
'core/keyboard-shortcuts'
).getShortcutRepresentation(
'core/edit-post/toggle-block-navigation'
),

hasBlocks: !! select( 'core/block-editor' ).getBlockCount(),
};
}, [] );

return (
<Button
onClick={ hasBlocks ? onToggle : undefined }
icon={ info }
aria-expanded={ isOpen }
label={ __( 'Content structure' ) }
tooltipPosition="bottom"
aria-disabled={ ! hasBlocks }
shortcut={ shortcut }
/>
);
}

function TableOfContents( { hasOutlineItemsDisabled } ) {
return (
<Dropdown
position="bottom"
position="bottom right"
className="table-of-contents"
contentClassName="table-of-contents__popover"
renderToggle={ ( { isOpen, onToggle } ) => (
<Button
onClick={ hasBlocks ? onToggle : undefined }
icon={ info }
aria-expanded={ isOpen }
label={ __( 'Content structure' ) }
tooltipPosition="bottom"
aria-disabled={ ! hasBlocks }
/>
) }
renderToggle={ ( props ) => <TableOfContentsToggle { ...props } /> }
renderContent={ ( { onClose } ) => (
<TableOfContentsPanel
onRequestClose={ onClose }
Expand All @@ -37,8 +63,4 @@ function TableOfContents( { hasBlocks, hasOutlineItemsDisabled } ) {
);
}

export default withSelect( ( select ) => {
return {
hasBlocks: !! select( 'core/block-editor' ).getBlockCount(),
};
} )( TableOfContents );
export default TableOfContents;
Loading