From 29c63c240c50f376e57f9d9e0a2d4b7ddd1c646d Mon Sep 17 00:00:00 2001 From: Copons Date: Mon, 17 May 2021 14:59:03 +0100 Subject: [PATCH] Use BlockNavigationTree as main component Replace the deprecated BlockNavigationTree with BlockNavigation Remove the deprecated BlockNavigationTree component Try renaming into ListView More renaming! --- docs/getting-started/faq.md | 2 +- packages/base-styles/_z-index.scss | 1 - .../components/block-navigation/dropdown.js | 4 +- .../components/block-navigation/style.scss | 329 +----------------- packages/block-editor/src/components/index.js | 6 +- .../{block-navigation => list-view}/README.md | 14 +- .../appender.js | 18 +- .../block-contents.js | 31 +- .../block-select-button.js | 18 +- .../block-slot.js | 29 +- .../{block-navigation => list-view}/block.js | 36 +- .../{block-navigation => list-view}/branch.js | 18 +- .../context.js | 5 +- .../{block-navigation => list-view}/editor.js | 8 +- .../expander.js | 4 +- .../tree.js => list-view/index.js} | 27 +- .../{block-navigation => list-view}/leaf.js | 7 +- .../list-item.js | 8 +- .../src/components/list-view/style.scss | 320 +++++++++++++++++ .../use-list-view-client-ids.js} | 10 +- .../use-list-view-drop-zone.js} | 25 +- .../{block-navigation => list-view}/utils.js | 0 packages/block-editor/src/style.scss | 1 + .../src/navigation/block-navigation-list.js | 4 +- .../specs/editor/blocks/columns.test.js | 2 +- .../specs/editor/blocks/cover.test.js | 2 +- .../specs/editor/plugins/block-icons.test.js | 2 +- .../editor/plugins/block-variations.test.js | 2 +- .../block-hierarchy-navigation.test.js | 12 +- .../experiments/document-settings.test.js | 2 +- .../experiments/multi-entity-saving.test.js | 2 +- .../components/header/header-toolbar/index.js | 2 +- .../header/header-toolbar/style.scss | 4 +- .../src/components/header/style.scss | 2 +- .../components/keyboard-shortcuts/index.js | 4 +- .../secondary-sidebar/list-view-sidebar.js | 4 +- .../secondary-sidebar/list-view-sidebar.js | 4 +- 37 files changed, 473 insertions(+), 496 deletions(-) rename packages/block-editor/src/components/{block-navigation => list-view}/README.md (51%) rename packages/block-editor/src/components/{block-navigation => list-view}/appender.js (77%) rename packages/block-editor/src/components/{block-navigation => list-view}/block-contents.js (79%) rename packages/block-editor/src/components/{block-navigation => list-view}/block-select-button.js (73%) rename packages/block-editor/src/components/{block-navigation => list-view}/block-slot.js (74%) rename packages/block-editor/src/components/{block-navigation => list-view}/block.js (86%) rename packages/block-editor/src/components/{block-navigation => list-view}/branch.js (90%) rename packages/block-editor/src/components/{block-navigation => list-view}/context.js (57%) rename packages/block-editor/src/components/{block-navigation => list-view}/editor.js (68%) rename packages/block-editor/src/components/{block-navigation => list-view}/expander.js (87%) rename packages/block-editor/src/components/{block-navigation/tree.js => list-view/index.js} (82%) rename packages/block-editor/src/components/{block-navigation => list-view}/leaf.js (85%) rename packages/block-editor/src/components/{block-navigation => list-view}/list-item.js (83%) create mode 100644 packages/block-editor/src/components/list-view/style.scss rename packages/block-editor/src/components/{block-navigation/use-block-navigation-client-ids.js => list-view/use-list-view-client-ids.js} (87%) rename packages/block-editor/src/components/{block-navigation/use-block-navigation-drop-zone.js => list-view/use-list-view-drop-zone.js} (90%) rename packages/block-editor/src/components/{block-navigation => list-view}/utils.js (100%) diff --git a/docs/getting-started/faq.md b/docs/getting-started/faq.md index 87ac239e031906..4273c0cd775b74 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 c7bc54004e1d49..de9ec9d6917e56 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 de7345280387ad..414706ddf74338 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 76d13b62221580..3cfa70c4b9f408 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 51% rename from packages/block-editor/src/components/block-navigation/README.md rename to packages/block-editor/src/components/list-view/README.md index 9491b9ad7ef013..934bb5a47a13e2 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 -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 92d60146ca9ba3..229a391856eecb 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 e941a5661b6b9d..99ccc7907da441 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 10e01be8230332..396a4d3ae3a50b 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 d15480fede10b3..43fec6cf549e78 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 163eedbfb0a80b..fd6361d85ac7cc 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 85cde846a826a5..404a1403b09477 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 140758a4a797f4..1d3df28a610835 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 cb5ec6ab3f3117..7512689b9cdb1c 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 ec0954d8dcbfc0..c3a090c5c52099 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 d7fa8d58feb9a2..9a2409d141e196 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 ) =>