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,
] ) }
>
-
+
);