diff --git a/docs/getting-started/faq.md b/docs/getting-started/faq.md index 87ac239e03190..4273c0cd775b7 100644 --- a/docs/getting-started/faq.md +++ b/docs/getting-started/faq.md @@ -95,7 +95,7 @@ This is the canonical list of keyboard shortcuts: ⇧⌘, - Open the block navigation menu. + Open the list view menu. Shift+Alt+O ⌃⌥O diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index c7bc54004e1d4..de9ec9d6917e5 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -141,7 +141,6 @@ $z-layers: ( // ...Except for popovers immediately beneath wp-admin menu on large breakpoints ".components-popover.block-editor-inserter__popover": 99999, ".components-popover.table-of-contents__popover": 99998, - ".components-popover.block-editor-block-navigation__popover": 99998, ".components-popover.customize-widgets-more-menu__content": 99998, ".components-popover.edit-post-more-menu__content": 99998, ".components-popover.edit-site-more-menu__content": 99998, diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index de7345280387a..414706ddf7433 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/packages/block-editor/src/components/block-navigation/dropdown.js @@ -10,7 +10,7 @@ import { listView } from '@wordpress/icons'; /** * Internal dependencies */ -import BlockNavigationTree from './tree'; +import ListView from '../list-view'; import { store as blockEditorStore } from '../../store'; function BlockNavigationDropdownToggle( { @@ -65,7 +65,7 @@ function BlockNavigationDropdown( { __( 'List view' ) }

- = 0 { - margin-left: ( $icon-size * $i ) + 4 * ($i - 1); - } - @else { - margin-left: ( $icon-size * $i ); - } - } -} - -.block-editor-block-navigation-leaf .block-editor-block-navigation__expander { - visibility: hidden; -} - -// Point downwards when open. -.block-editor-block-navigation-leaf[aria-expanded="true"] .block-editor-block-navigation__expander svg { - visibility: visible; - transition: transform 0.2s ease; - transform: rotate(90deg); - @include reduce-motion("transition"); -} - -// Point rightwards when closed -.block-editor-block-navigation-leaf[aria-expanded="false"] .block-editor-block-navigation__expander svg { - visibility: visible; - transform: rotate(0deg); - transition: transform 0.2s ease; - @include reduce-motion("transition"); -} diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 76d13b6222158..3cfa70c4b9f40 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -24,9 +24,6 @@ export { default as BlockColorsStyleSelector } from './color-style-selector'; export { default as BlockEdit, useBlockEditContext } from './block-edit'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; -export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-slot'; -export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor'; -export { default as __experimentalBlockNavigationTree } from './block-navigation/tree'; export { default as __experimentalBlockVariationPicker } from './block-variation-picker'; export { default as __experimentalBlockPatternSetup } from './block-pattern-setup'; export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms'; @@ -66,6 +63,9 @@ export { default as __experimentalLinkControlSearchInput } from './link-control/ export { default as __experimentalLinkControlSearchResults } from './link-control/search-results'; export { default as __experimentalLinkControlSearchItem } from './link-control/search-item'; export { default as LineHeightControl } from './line-height-control'; +export { default as __experimentalListView } from './list-view'; +export { ListViewBlockFill as __experimentalListViewBlockFill } from './list-view/block-slot'; +export { default as __experimentalListViewEditor } from './list-view/editor'; export { default as MediaReplaceFlow } from './media-replace-flow'; export { default as MediaPlaceholder } from './media-placeholder'; export { default as MediaUpload } from './media-upload'; diff --git a/packages/block-editor/src/components/block-navigation/README.md b/packages/block-editor/src/components/list-view/README.md similarity index 50% rename from packages/block-editor/src/components/block-navigation/README.md rename to packages/block-editor/src/components/list-view/README.md index 9491b9ad7ef01..f702c28702f8e 100644 --- a/packages/block-editor/src/components/block-navigation/README.md +++ b/packages/block-editor/src/components/list-view/README.md @@ -1,13 +1,13 @@ -# Block navigation +# List view -The BlockNavigation component provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other. +The ListView component provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other. Blocks that have child blocks (such as group or column blocks) are presented with the parent at the top and the nested children below. -In addition to presenting the structure of the blocks in the editor, the BlockNavigation component lets users navigate to each block by clicking on its line in the hierarchy tree. +In addition to presenting the structure of the blocks in the editor, the ListView component lets users navigate to each block by clicking on its line in the hierarchy tree. -![Block navigation](https://make.wordpress.org/core/files/2020/08/block-navigation.png) -![View of a group block navigation](https://make.wordpress.org/core/files/2020/08/view-of-group-block-navigation.png) +![List view](https://make.wordpress.org/core/files/2020/08/block-navigation.png) +![View of a group list view](https://make.wordpress.org/core/files/2020/08/view-of-group-block-navigation.png) ## Table of contents @@ -18,12 +18,12 @@ In addition to presenting the structure of the blocks in the editor, the BlockNa ### Usage -Renders a block navigation with default syles. +Renders a list view with default syles. ```jsx -import { BlockNavigation } from '@wordpress/block-editor'; +import { ListView } from '@wordpress/block-editor'; -const MyNavigation = () => ; +const MyNavigation = () => ; ``` ## Related components diff --git a/packages/block-editor/src/components/block-navigation/appender.js b/packages/block-editor/src/components/list-view/appender.js similarity index 77% rename from packages/block-editor/src/components/block-navigation/appender.js rename to packages/block-editor/src/components/list-view/appender.js index 92d60146ca9ba..229a391856eec 100644 --- a/packages/block-editor/src/components/block-navigation/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -14,11 +14,11 @@ import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import BlockNavigationLeaf from './leaf'; +import ListViewLeaf from './leaf'; import Inserter from '../inserter'; import { store as blockEditorStore } from '../../store'; -export default function BlockNavigationAppender( { +export default function ListViewAppender( { parentBlockClientId, position, level, @@ -38,8 +38,8 @@ export default function BlockNavigationAppender( { }, [ parentBlockClientId ] ); - const instanceId = useInstanceId( BlockNavigationAppender ); - const descriptionId = `block-navigation-appender-row__description_${ instanceId }`; + const instanceId = useInstanceId( ListViewAppender ); + const descriptionId = `list-view-appender-row__description_${ instanceId }`; const appenderPositionDescription = sprintf( /* translators: 1: The numerical position of the block that will be inserted. 2: The level of nesting for the block that will be inserted. */ @@ -49,7 +49,7 @@ export default function BlockNavigationAppender( { ); return ( - { ( { ref, tabIndex, onFocus } ) => ( -
+
{ appenderPositionDescription } @@ -77,6 +77,6 @@ export default function BlockNavigationAppender( {
) } - + ); } diff --git a/packages/block-editor/src/components/block-navigation/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js similarity index 79% rename from packages/block-editor/src/components/block-navigation/block-contents.js rename to packages/block-editor/src/components/list-view/block-contents.js index e941a5661b6b9..99ccc7907da44 100644 --- a/packages/block-editor/src/components/block-navigation/block-contents.js +++ b/packages/block-editor/src/components/list-view/block-contents.js @@ -12,13 +12,13 @@ import { forwardRef } from '@wordpress/element'; /** * Internal dependencies */ -import { useBlockNavigationContext } from './context'; -import BlockNavigationBlockSlot from './block-slot'; -import BlockNavigationBlockSelectButton from './block-select-button'; +import { useListViewContext } from './context'; +import ListViewBlockSlot from './block-slot'; +import ListViewBlockSelectButton from './block-select-button'; import BlockDraggable from '../block-draggable'; import { store as blockEditorStore } from '../../store'; -const BlockNavigationBlockContents = forwardRef( +const ListViewBlockContents = forwardRef( ( { onClick, @@ -35,7 +35,7 @@ const BlockNavigationBlockContents = forwardRef( const { __experimentalFeatures, blockDropTarget = {}, - } = useBlockNavigationContext(); + } = useListViewContext(); const { clientId } = block; @@ -79,23 +79,20 @@ const BlockNavigationBlockContents = forwardRef( const isDroppingToInnerBlocks = dropTargetRootClientId === clientId && dropPosition === 'inside'; - const className = classnames( - 'block-editor-block-navigation-block-contents', - { - 'is-dropping-before': isDroppingBefore || isBlockMoveTarget, - 'is-dropping-after': isDroppingAfter, - 'is-dropping-to-inner-blocks': isDroppingToInnerBlocks, - } - ); + const className = classnames( 'block-editor-list-view-block-contents', { + 'is-dropping-before': isDroppingBefore || isBlockMoveTarget, + 'is-dropping-after': isDroppingAfter, + 'is-dropping-to-inner-blocks': isDroppingToInnerBlocks, + } ); return ( { ( { draggable, onDragStart, onDragEnd } ) => __experimentalFeatures ? ( - ) : ( -
{ blockPositionDescription } @@ -87,4 +87,4 @@ function BlockNavigationBlockSelectButton( ); } -export default forwardRef( BlockNavigationBlockSelectButton ); +export default forwardRef( ListViewBlockSelectButton ); diff --git a/packages/block-editor/src/components/block-navigation/block-slot.js b/packages/block-editor/src/components/list-view/block-slot.js similarity index 74% rename from packages/block-editor/src/components/block-navigation/block-slot.js rename to packages/block-editor/src/components/list-view/block-slot.js index 10e01be823033..396a4d3ae3a50 100644 --- a/packages/block-editor/src/components/block-navigation/block-slot.js +++ b/packages/block-editor/src/components/list-view/block-slot.js @@ -23,30 +23,27 @@ import { __ } from '@wordpress/i18n'; */ import BlockIcon from '../block-icon'; import { BlockListBlockContext } from '../block-list/block'; -import BlockNavigationBlockSelectButton from './block-select-button'; +import ListViewBlockSelectButton from './block-select-button'; import { getBlockPositionDescription } from './utils'; import { store as blockEditorStore } from '../../store'; -import BlockNavigationExpander from './expander'; +import ListViewExpander from './expander'; -const getSlotName = ( clientId ) => `BlockNavigationBlock-${ clientId }`; +const getSlotName = ( clientId ) => `ListViewBlock-${ clientId }`; -function BlockNavigationBlockSlot( props, ref ) { +function ListViewBlockSlot( props, ref ) { const { clientId } = props.block; const { name } = useSelect( ( select ) => select( blockEditorStore ).getBlockName( clientId ), [ clientId ] ); - const instanceId = useInstanceId( BlockNavigationBlockSlot ); + const instanceId = useInstanceId( ListViewBlockSlot ); return ( { ( fills ) => { if ( ! fills.length ) { return ( - + ); } @@ -62,7 +59,7 @@ function BlockNavigationBlockSlot( props, ref ) { } = props; const blockType = getBlockType( name ); - const descriptionId = `block-navigation-block-slot__${ instanceId }`; + const descriptionId = `list-view-block-slot__${ instanceId }`; const blockPositionDescription = getBlockPositionDescription( position, siblingBlockCount, @@ -84,13 +81,11 @@ function BlockNavigationBlockSlot( props, ref ) { <>
- + { Children.map( fills, ( fill ) => cloneElement( fill, { @@ -104,7 +99,7 @@ function BlockNavigationBlockSlot( props, ref ) { ) }
{ blockPositionDescription } @@ -117,9 +112,9 @@ function BlockNavigationBlockSlot( props, ref ) { ); } -export default forwardRef( BlockNavigationBlockSlot ); +export default forwardRef( ListViewBlockSlot ); -export const BlockNavigationBlockFill = ( props ) => { +export const ListViewBlockFill = ( props ) => { const { clientId } = useContext( BlockListBlockContext ); return ; }; diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/list-view/block.js similarity index 86% rename from packages/block-editor/src/components/block-navigation/block.js rename to packages/block-editor/src/components/list-view/block.js index d15480fede10b..43fec6cf549e7 100644 --- a/packages/block-editor/src/components/block-navigation/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -20,17 +20,17 @@ import { useDispatch, useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import BlockNavigationLeaf from './leaf'; +import ListViewLeaf from './leaf'; import { BlockMoverUpButton, BlockMoverDownButton, } from '../block-mover/button'; -import BlockNavigationBlockContents from './block-contents'; +import ListViewBlockContents from './block-contents'; import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown'; -import { useBlockNavigationContext } from './context'; +import { useListViewContext } from './context'; import { store as blockEditorStore } from '../../store'; -export default function BlockNavigationBlock( { +export default function ListViewBlock( { block, isSelected, isBranchSelected, @@ -74,20 +74,20 @@ export default function BlockNavigationBlock( { const hasSiblings = siblingBlockCount > 0; const hasRenderedMovers = showBlockMovers && hasSiblings; const moverCellClassName = classnames( - 'block-editor-block-navigation-block__mover-cell', + 'block-editor-list-view-block__mover-cell', { 'is-visible': isHovered } ); const { __experimentalFeatures: withExperimentalFeatures, __experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures, isTreeGridMounted, - } = useBlockNavigationContext(); - const blockNavigationBlockSettingsClassName = classnames( - 'block-editor-block-navigation-block__menu-cell', + } = useListViewContext(); + const listViewBlockSettingsClassName = classnames( + 'block-editor-list-view-block__menu-cell', { 'is-visible': isHovered } ); - // If BlockNavigation has experimental features related to the Persistent List View, + // If ListView has experimental features related to the Persistent List View, // only focus the selected list item on mount; otherwise the list would always // try to steal the focus from the editor canvas. useEffect( () => { @@ -100,7 +100,7 @@ export default function BlockNavigationBlock( { } }, [] ); - // If BlockNavigation has experimental features (such as drag and drop) enabled, + // If ListView has experimental features (such as drag and drop) enabled, // leave the focus handling as it was before, to avoid accidental regressions. useEffect( () => { if ( withExperimentalFeatures && isSelected ) { @@ -132,7 +132,7 @@ export default function BlockNavigationBlock( { } ); return ( - { ( { ref, tabIndex, onFocus } ) => ( -
- + + { ( { ref, tabIndex, onFocus } ) => ( ) } - + ); } diff --git a/packages/block-editor/src/components/block-navigation/branch.js b/packages/block-editor/src/components/list-view/branch.js similarity index 90% rename from packages/block-editor/src/components/block-navigation/branch.js rename to packages/block-editor/src/components/list-view/branch.js index 163eedbfb0a80..fd6361d85ac7c 100644 --- a/packages/block-editor/src/components/block-navigation/branch.js +++ b/packages/block-editor/src/components/list-view/branch.js @@ -11,12 +11,12 @@ import { Fragment } from '@wordpress/element'; /** * Internal dependencies */ -import BlockNavigationBlock from './block'; -import BlockNavigationAppender from './appender'; +import ListViewBlock from './block'; +import ListViewAppender from './appender'; import { isClientIdSelected } from './utils'; -import { useBlockNavigationContext } from './context'; +import { useListViewContext } from './context'; -export default function BlockNavigationBranch( props ) { +export default function ListViewBranch( props ) { const { blocks, selectBlock, @@ -44,7 +44,7 @@ export default function BlockNavigationBranch( props ) { const rowCount = hasAppender ? blockCount + 1 : blockCount; const appenderPosition = rowCount; - const { expandedState, expand, collapse } = useBlockNavigationContext(); + const { expandedState, expand, collapse } = useListViewContext(); return ( <> @@ -95,7 +95,7 @@ export default function BlockNavigationBranch( props ) { return ( - { hasNestedBranch && isExpanded && ( - {}, }; diff --git a/packages/block-editor/src/components/block-navigation/context.js b/packages/block-editor/src/components/list-view/context.js similarity index 57% rename from packages/block-editor/src/components/block-navigation/context.js rename to packages/block-editor/src/components/list-view/context.js index 85cde846a826a..404a1403b0947 100644 --- a/packages/block-editor/src/components/block-navigation/context.js +++ b/packages/block-editor/src/components/list-view/context.js @@ -3,10 +3,9 @@ */ import { createContext, useContext } from '@wordpress/element'; -export const BlockNavigationContext = createContext( { +export const ListViewContext = createContext( { __experimentalFeatures: false, __experimentalPersistentListViewFeatures: false, } ); -export const useBlockNavigationContext = () => - useContext( BlockNavigationContext ); +export const useListViewContext = () => useContext( ListViewContext ); diff --git a/packages/block-editor/src/components/block-navigation/editor.js b/packages/block-editor/src/components/list-view/editor.js similarity index 68% rename from packages/block-editor/src/components/block-navigation/editor.js rename to packages/block-editor/src/components/list-view/editor.js index 140758a4a797f..1d3df28a61083 100644 --- a/packages/block-editor/src/components/block-navigation/editor.js +++ b/packages/block-editor/src/components/list-view/editor.js @@ -7,11 +7,11 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { RichText } from '../'; -import { BlockNavigationBlockFill } from './block-slot'; +import { ListViewBlockFill } from './block-slot'; -export default function BlockNavigationEditor( { value, onChange } ) { +export default function ListViewEditor( { value, onChange } ) { return ( - + - + ); } diff --git a/packages/block-editor/src/components/block-navigation/expander.js b/packages/block-editor/src/components/list-view/expander.js similarity index 87% rename from packages/block-editor/src/components/block-navigation/expander.js rename to packages/block-editor/src/components/list-view/expander.js index cb5ec6ab3f311..7512689b9cdb1 100644 --- a/packages/block-editor/src/components/block-navigation/expander.js +++ b/packages/block-editor/src/components/list-view/expander.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { chevronRightSmall, Icon } from '@wordpress/icons'; -export default function BlockNavigationExpander( { onClick } ) { +export default function ListViewExpander( { onClick } ) { return ( // Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js // @@ -14,7 +14,7 @@ export default function BlockNavigationExpander( { onClick } ) { // // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions onClick( event, { forceToggle: true } ) } aria-hidden="true" > diff --git a/packages/block-editor/src/components/block-navigation/tree.js b/packages/block-editor/src/components/list-view/index.js similarity index 82% rename from packages/block-editor/src/components/block-navigation/tree.js rename to packages/block-editor/src/components/list-view/index.js index ec0954d8dcbfc..c3a090c5c5209 100644 --- a/packages/block-editor/src/components/block-navigation/tree.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -16,10 +16,10 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import BlockNavigationBranch from './branch'; -import { BlockNavigationContext } from './context'; -import useBlockNavigationClientIds from './use-block-navigation-client-ids'; -import useBlockNavigationDropZone from './use-block-navigation-drop-zone'; +import ListViewBranch from './branch'; +import { ListViewContext } from './context'; +import useListViewClientIds from './use-list-view-client-ids'; +import useListViewDropZone from './use-list-view-drop-zone'; import { store as blockEditorStore } from '../../store'; const noop = () => {}; @@ -35,7 +35,7 @@ const expanded = ( state, action ) => { }; /** - * Wrap `BlockNavigationRows` with `TreeGrid`. BlockNavigationRows is a + * Wrap `ListViewRows` with `TreeGrid`. ListViewRows is a * recursive component (it renders itself), so this ensures TreeGrid is only * present at the very top of the navigation grid. * @@ -47,7 +47,7 @@ const expanded = ( state, action ) => { * @param {boolean} props.__experimentalFeatures Flag to enable experimental features. * @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment. */ -export default function BlockNavigationTree( { +export default function ListView( { blocks, showOnlyCurrentHierarchy, onSelect = noop, @@ -55,7 +55,7 @@ export default function BlockNavigationTree( { __experimentalPersistentListViewFeatures, ...props } ) { - const { clientIdsTree, selectedClientIds } = useBlockNavigationClientIds( + const { clientIdsTree, selectedClientIds } = useListViewClientIds( blocks, showOnlyCurrentHierarchy, __experimentalPersistentListViewFeatures @@ -70,10 +70,7 @@ export default function BlockNavigationTree( { ); const [ expandedState, setExpandedState ] = useReducer( expanded, {} ); - let { - ref: treeGridRef, - target: blockDropTarget, - } = useBlockNavigationDropZone(); + let { ref: treeGridRef, target: blockDropTarget } = useListViewDropZone(); const isMounted = useRef( false ); useEffect( () => { @@ -126,20 +123,20 @@ export default function BlockNavigationTree( { return ( - - + - + ); } diff --git a/packages/block-editor/src/components/block-navigation/leaf.js b/packages/block-editor/src/components/list-view/leaf.js similarity index 85% rename from packages/block-editor/src/components/block-navigation/leaf.js rename to packages/block-editor/src/components/list-view/leaf.js index d7fa8d58feb9a..9a2409d141e19 100644 --- a/packages/block-editor/src/components/block-navigation/leaf.js +++ b/packages/block-editor/src/components/list-view/leaf.js @@ -16,7 +16,7 @@ import useMovingAnimation from '../use-moving-animation'; const AnimatedTreeGridRow = animated( TreeGridRow ); -export default function BlockNavigationLeaf( { +export default function ListViewLeaf( { isSelected, position, level, @@ -36,10 +36,7 @@ export default function BlockNavigationLeaf( { return ( +
{}, wrapperComponent: ( props ) =>