From 1b9157577fce4133e9be89c1d89cdd02918f6ba3 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 4 May 2022 11:01:03 +0800 Subject: [PATCH] Tidy list view props and deprecate `BlockNavigationDropdown` (#40777) * Remove __experimentalFeatures prop * Remove __experimentalPersistentListViewFeatures * Remove __experimentalHideContainerBlockActions in favor of checking block supports * Remove showNestedBlocks * Remove props pass through and tidy up docs * Deprecate BlockNavigationDropdown * Update changelog * Update package-lock --- package-lock.json | 1 + packages/block-editor/CHANGELOG.md | 5 ++ .../components/block-navigation/dropdown.js | 20 ++++--- .../src/components/list-view/block.js | 58 ++++++++----------- .../src/components/list-view/branch.js | 16 +---- .../src/components/list-view/context.js | 5 +- .../src/components/list-view/index.js | 50 ++++------------ .../secondary-sidebar/list-view-sidebar.js | 6 +- .../secondary-sidebar/list-view-sidebar.js | 6 +- .../navigation-menu.js | 7 +-- packages/edit-widgets/package.json | 1 + .../secondary-sidebar/list-view-sidebar.js | 7 +-- 12 files changed, 61 insertions(+), 121 deletions(-) diff --git a/package-lock.json b/package-lock.json index 52358637f8081..b10bf06cc2ce9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17636,6 +17636,7 @@ "@wordpress/compose": "file:packages/compose", "@wordpress/core-data": "file:packages/core-data", "@wordpress/data": "file:packages/data", + "@wordpress/deprecated": "file:packages/deprecated", "@wordpress/dom": "file:packages/dom", "@wordpress/element": "file:packages/element", "@wordpress/hooks": "file:packages/hooks", diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 64141bad9124e..1c88323207acd 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking change + +- `BlockNavigationDropdown` is now deprecated. Use the `Dropdown` component from the `@wordpress/components` package and the `ListView` component from this package ([#40777](https://github.com/WordPress/gutenberg/pull/40777)). +- `ListView` no longer accepts the `__experimentalFeatures`, `__experimentalPersistentListViewFeatures`, `__experimentalHideContainerBlockActions`, and `showNestedBlocks` props. Passing additional undocumented props through to `ListView` is also now disallowed. ([#40777](https://github.com/WordPress/gutenberg/pull/40777)). + ## 8.6.0 (2022-04-21) ## 8.5.0 (2022-04-08) diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js index a67d0aa2a4e4f..8574d66e94316 100644 --- a/packages/block-editor/src/components/block-navigation/dropdown.js +++ b/packages/block-editor/src/components/block-navigation/dropdown.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import deprecated from '@wordpress/deprecated'; + /** * WordPress dependencies */ @@ -36,10 +41,12 @@ function BlockNavigationDropdownToggle( { ); } -function BlockNavigationDropdown( - { isDisabled, __experimentalFeatures, ...props }, - ref -) { +function BlockNavigationDropdown( { isDisabled, ...props }, ref ) { + deprecated( 'wp.blockEditor.BlockNavigationDropdown', { + since: '6.1', + alternative: 'wp.components.Dropdown and wp.blockEditor.ListView', + } ); + const hasBlocks = useSelect( ( select ) => !! select( blockEditorStore ).getBlockCount(), [] @@ -65,10 +72,7 @@ function BlockNavigationDropdown( { __( 'List view' ) }

- + ) } /> diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 8a8b7edd210ac..f8645a1071ff1 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -6,6 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ +import { hasBlockSupport } from '@wordpress/blocks'; import { __experimentalTreeGridCell as TreeGridCell, __experimentalTreeGridItem as TreeGridItem, @@ -19,7 +20,7 @@ import { useCallback, memo, } from '@wordpress/element'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { sprintf, __ } from '@wordpress/i18n'; /** @@ -66,6 +67,19 @@ function ListViewBlock( { const { toggleBlockHighlight } = useDispatch( blockEditorStore ); const blockInformation = useBlockDisplayInformation( clientId ); + const blockName = useSelect( + ( select ) => select( blockEditorStore ).getBlockName( clientId ), + [ clientId ] + ); + + // When a block hides its toolbar it also hides the block settings menu, + // since that menu is part of the toolbar in the editor canvas. + // List View respects this by also hiding the block settings menu. + const showBlockActions = hasBlockSupport( + blockName, + '__experimentalToolbar', + true + ); const { isLocked } = useBlockLock( clientId ); const instanceId = useInstanceId( ListViewBlock ); const descriptionId = `list-view-block-select-button__${ instanceId }`; @@ -98,14 +112,7 @@ function ListViewBlock( { ) : __( 'Options' ); - const { - __experimentalFeatures: withExperimentalFeatures, - __experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures, - __experimentalHideContainerBlockActions: hideContainerBlockActions, - isTreeGridMounted, - expand, - collapse, - } = useListViewContext(); + const { isTreeGridMounted, expand, collapse } = useListViewContext(); const hasSiblings = siblingBlockCount > 0; const hasRenderedMovers = showBlockMovers && hasSiblings; @@ -123,27 +130,19 @@ function ListViewBlock( { // only focus the selected list item on mount; otherwise the list would always // try to steal the focus from the editor canvas. useEffect( () => { - if ( - withExperimentalPersistentListViewFeatures && - ! isTreeGridMounted && - isSelected - ) { + if ( ! isTreeGridMounted && isSelected ) { cellRef.current.focus(); } }, [] ); - const highlightBlock = withExperimentalPersistentListViewFeatures - ? toggleBlockHighlight - : () => {}; - const onMouseEnter = useCallback( () => { setIsHovered( true ); - highlightBlock( clientId, true ); - }, [ clientId, setIsHovered, highlightBlock ] ); + toggleBlockHighlight( clientId, true ); + }, [ clientId, setIsHovered, toggleBlockHighlight ] ); const onMouseLeave = useCallback( () => { setIsHovered( false ); - highlightBlock( clientId, false ); - }, [ clientId, setIsHovered, highlightBlock ] ); + toggleBlockHighlight( clientId, false ); + }, [ clientId, setIsHovered, toggleBlockHighlight ] ); const selectEditorBlock = useCallback( ( event ) => { @@ -174,18 +173,10 @@ function ListViewBlock( { [ clientId, expand, collapse, isExpanded ] ); - const showBlockActions = - withExperimentalFeatures && - // hide actions for blocks like core/widget-areas - ( ! hideContainerBlockActions || - ( hideContainerBlockActions && level > 1 ) ); - - const hideBlockActions = withExperimentalFeatures && ! showBlockActions; - let colSpan; if ( hasRenderedMovers ) { colSpan = 2; - } else if ( hideBlockActions ) { + } else if ( ! showBlockActions ) { colSpan = 3; } @@ -193,10 +184,9 @@ function ListViewBlock( { 'is-selected': isSelected, 'is-first-selected': isFirstSelectedBlock, 'is-last-selected': isLastSelectedBlock, - 'is-branch-selected': - withExperimentalPersistentListViewFeatures && isBranchSelected, + 'is-branch-selected': isBranchSelected, 'is-dragging': isDragged, - 'has-single-cell': hideBlockActions, + 'has-single-cell': ! showBlockActions, } ); // Only include all selected blocks if the currently clicked on block diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js index f40c8b262e681..5325d6a869591 100644 --- a/packages/block-editor/src/components/list-view/branch.js +++ b/packages/block-editor/src/components/list-view/branch.js @@ -85,7 +85,6 @@ function ListViewBranch( props ) { blocks, selectBlock, showBlockMovers, - showNestedBlocks, selectedClientIds, level = 1, path = '', @@ -95,11 +94,7 @@ function ListViewBranch( props ) { isExpanded, } = props; - const { - expandedState, - draggedClientIds, - __experimentalPersistentListViewFeatures, - } = useListViewContext(); + const { expandedState, draggedClientIds } = useListViewContext(); const filteredBlocks = compact( blocks ); const blockCount = filteredBlocks.length; @@ -119,19 +114,15 @@ function ListViewBranch( props ) { ); } - const usesWindowing = __experimentalPersistentListViewFeatures; - const { itemInView } = fixedListWindow; - const blockInView = - ! usesWindowing || itemInView( nextPosition ); + const blockInView = itemInView( nextPosition ); const position = index + 1; const updatedPath = path.length > 0 ? `${ path }_${ position }` : `${ position }`; - const hasNestedBlocks = - showNestedBlocks && !! innerBlocks && !! innerBlocks.length; + const hasNestedBlocks = !! innerBlocks?.length; const shouldExpand = hasNestedBlocks ? expandedState[ clientId ] ?? isExpanded @@ -179,7 +170,6 @@ function ListViewBranch( props ) { blocks={ innerBlocks } selectBlock={ selectBlock } showBlockMovers={ showBlockMovers } - showNestedBlocks={ showNestedBlocks } level={ level + 1 } path={ updatedPath } listPosition={ nextPosition + 1 } diff --git a/packages/block-editor/src/components/list-view/context.js b/packages/block-editor/src/components/list-view/context.js index 404a1403b0947..c837dce9ca23f 100644 --- a/packages/block-editor/src/components/list-view/context.js +++ b/packages/block-editor/src/components/list-view/context.js @@ -3,9 +3,6 @@ */ import { createContext, useContext } from '@wordpress/element'; -export const ListViewContext = createContext( { - __experimentalFeatures: false, - __experimentalPersistentListViewFeatures: false, -} ); +export const ListViewContext = createContext( {} ); export const useListViewContext = () => useContext( ListViewContext ); diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index 863d0988ac545..159be4f4d9ba8 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -48,33 +48,17 @@ const expanded = ( state, action ) => { export const BLOCK_LIST_ITEM_HEIGHT = 36; /** - * 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. + * Show a hierarchical list of blocks. * - * @param {Object} props Components props. - * @param {Array} props.blocks Custom subset of block client IDs to be used instead of the default hierarchy. - * @param {boolean} props.showNestedBlocks Flag to enable displaying nested blocks. - * @param {boolean} props.showBlockMovers Flag to enable block movers - * @param {boolean} props.__experimentalFeatures Flag to enable experimental features. - * @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment. - * @param {boolean} props.__experimentalHideContainerBlockActions Flag to hide actions of top level blocks (like core/widget-area) - * @param {string} props.id Unique identifier for the root list element (primarily for a11y purposes). - * @param {boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. - * @param {Object} ref Forwarded ref + * @param {Object} props Components props. + * @param {string} props.id An HTML element id for the root element of ListView. + * @param {Array} props.blocks Custom subset of block client IDs to be used instead of the default hierarchy. + * @param {boolean} props.showBlockMovers Flag to enable block movers + * @param {boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. + * @param {Object} ref Forwarded ref */ function ListView( - { - blocks, - __experimentalFeatures, - __experimentalPersistentListViewFeatures, - __experimentalHideContainerBlockActions, - showNestedBlocks, - showBlockMovers, - id, - isExpanded = false, - ...props - }, + { id, blocks, showBlockMovers = false, isExpanded = false }, ref ) { const { @@ -131,7 +115,7 @@ function ListView( BLOCK_LIST_ITEM_HEIGHT, visibleBlockCount, { - useWindowing: __experimentalPersistentListViewFeatures, + useWindowing: true, windowOverscan: 40, } ); @@ -181,25 +165,13 @@ function ListView( const contextValue = useMemo( () => ( { - __experimentalFeatures, - __experimentalPersistentListViewFeatures, - __experimentalHideContainerBlockActions, isTreeGridMounted: isMounted.current, draggedClientIds, expandedState, expand, collapse, } ), - [ - __experimentalFeatures, - __experimentalPersistentListViewFeatures, - __experimentalHideContainerBlockActions, - isMounted.current, - draggedClientIds, - expandedState, - expand, - collapse, - ] + [ isMounted.current, draggedClientIds, expandedState, expand, collapse ] ); return ( @@ -221,12 +193,10 @@ function ListView( diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js index cc09ac47ae7ae..10ee573e6257c 100644 --- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js @@ -60,11 +60,7 @@ export default function ListViewSidebar() { focusOnMountRef, ] ) } > - + ); diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js index 05dc3116bbb01..eaad82acafa27 100644 --- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js @@ -59,11 +59,7 @@ export default function ListViewSidebar() { focusOnMountRef, ] ) } > - + ); diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js index f77aa7e5489ee..25e035d0f06df 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js @@ -50,12 +50,7 @@ export default function NavigationMenu( { innerBlocks, id } ) { }, [ updateBlockListSettings, innerBlocks ] ); return ( <> - + ); } diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json index 1fd3a498e2e26..23d237e6c7315 100644 --- a/packages/edit-widgets/package.json +++ b/packages/edit-widgets/package.json @@ -35,6 +35,7 @@ "@wordpress/compose": "file:../compose", "@wordpress/core-data": "file:../core-data", "@wordpress/data": "file:../data", + "@wordpress/deprecated": "file:../deprecated", "@wordpress/dom": "file:../dom", "@wordpress/element": "file:../element", "@wordpress/hooks": "file:../hooks", diff --git a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js index b5d177a91f5f7..ee88c3088da11 100644 --- a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js @@ -60,12 +60,7 @@ export default function ListViewSidebar() { focusOnMountRef, ] ) } > - + );