WordPress · gwwar · Feb 3, 2022 · Feb 2, 2022 · Feb 17, 2022
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const __unstableBlockNameContext = createContext( '' );
+
+export default __unstableBlockNameContext;
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __unstableBlockToolbarLastItem, Slot } = createSlotFill(
+	'__unstableBlockToolbarLastItem'
+);
+
+__unstableBlockToolbarLastItem.Slot = Slot;
+
+export default __unstableBlockToolbarLastItem;
@@ -19,9 +19,11 @@ import BlockMover from '../block-mover';
 import BlockParentSelector from '../block-parent-selector';
 import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
+import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
+import __unstableBlockNameContext from './block-name-context';
 
 export default function BlockToolbar( { hideDragHandle } ) {
 	const {
@@ -140,6 +142,11 @@ export default function BlockToolbar( { hideDragHandle } ) {
 						group="other"
 						className="block-editor-block-toolbar__slot"
 					/>
+					<__unstableBlockNameContext.Provider
+						value={ blockType?.name }
+					>
+						<__unstableBlockToolbarLastItem.Slot />
+					</__unstableBlockNameContext.Provider>
 				</>
 			) }
 			<BlockSettingsMenu clientIds={ blockClientIds } />

@@ -98,6 +98,8 @@ export { default as withColorContext } from './color-palette/with-color-context'
  */
 
 export { default as __unstableBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item';
+export { default as __unstableBlockToolbarLastItem } from './block-toolbar/block-toolbar-last-item';
+export { default as __unstableBlockNameContext } from './block-toolbar/block-name-context';
 export { default as __unstableInserterMenuExtension } from './inserter-menu-extension';
 export { default as __experimentalPreviewOptions } from './preview-options';
 export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -59,6 +64,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @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 {boolean}  props.__experimentalDarkMode                   Flag to turn on dark mode
  * @param {Object}  ref                                            Forwarded ref
  */
 function ListView(
@@ -67,6 +73,7 @@ function ListView(
 		__experimentalFeatures,
 		__experimentalPersistentListViewFeatures,
 		__experimentalHideContainerBlockActions,
+		__experimentalDarkMode,
 		showNestedBlocks,
 		showBlockMovers,
 		...props
@@ -205,7 +212,9 @@ function ListView(
 				blockDropTarget={ blockDropTarget }
 			/>
 			<TreeGrid
-				className="block-editor-list-view-tree"
+				className={ classnames( 'block-editor-list-view-tree', {
+					'is-dark': __experimentalDarkMode,
+				} ) }
 				aria-label={ __( 'Block navigation structure' ) }
 				ref={ treeGridRef }
 				onCollapseRow={ collapseRow }

@@ -366,3 +366,16 @@ $block-navigation-max-indent: 8;
 	height: 36px;
 }
 
+.block-editor-list-view-tree.is-dark {
+	background: $gray-900;
+	.block-editor-list-view-block-contents {
+		color: $gray-100;
+	}
+	.block-editor-list-view-leaf.is-branch-selected:not(.is-selected) {
+		background: var(--wp-admin-theme-color-darker-20);
+	}
+	.block-editor-block-mover-button,
+	.block-editor-list-view-block__menu {
+		color: $gray-100;
+	}
+}
@@ -278,6 +278,29 @@ export const getGlobalBlockCount = createSelector(
 	( state ) => [ state.blocks.order, state.blocks.byClientId ]
 );
 
+/**
+ * Returns all global blocks that match a blockName. Results include nested blocks.
+ *
+ * @param {Object}  state     Global application state.
+ * @param {?string} blockName Optional block name, if not specified, returns an empty array.
+ *
+ * @return {Array} Array of clientIds of blocks with name equal to blockName.
+ */
+export const __experimentalGetGlobalBlocksByName = createSelector(
+	( state, blockName ) => {
+		if ( ! blockName ) {
+			return EMPTY_ARRAY;
+		}
+		const clientIds = getClientIdsWithDescendants( state );
+		const foundBlocks = clientIds.filter( ( clientId ) => {
+			const block = state.blocks.byClientId[ clientId ];
+			return block.name === blockName;
+		} );
+		return foundBlocks.length > 0 ? foundBlocks : EMPTY_ARRAY;
+	},
+	( state ) => [ state.blocks.order, state.blocks.byClientId ]
+);
+
 /**
  * Given an array of block client IDs, returns the corresponding array of block
  * objects.

@@ -77,6 +77,7 @@ const {
 	__unstableGetClientIdsTree,
 	__experimentalGetPatternTransformItems,
 	wasBlockJustInserted,
+	__experimentalGetGlobalBlocksByName,
 } = selectors;
 
 describe( 'selectors', () => {
@@ -797,6 +798,68 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( '__experimentalGetGlobalBlocksByName', () => {
+		const state = {
+			blocks: {
+				byClientId: {
+					123: { clientId: 123, name: 'core/heading' },
+					456: { clientId: 456, name: 'core/paragraph' },
+					789: { clientId: 789, name: 'core/paragraph' },
+					1011: { clientId: 1011, name: 'core/group' },
+					1213: { clientId: 1213, name: 'core/paragraph' },
+					1415: { clientId: 1213, name: 'core/paragraph' },
+				},
+				attributes: {
+					123: {},
+					456: {},
+					789: {},
+					1011: {},
+					1213: {},
+					1415: {},
+				},
+				order: {
+					'': [ 123, 456, 1011 ],
+					1011: [ 1415, 1213 ],
+				},
+				parents: {
+					123: '',
+					456: '',
+					1011: '',
+					1213: 1011,
+					1415: 1011,
+				},
+			},
+		};
+
+		it( 'should return the clientIds of blocks of a given type', () => {
+			expect(
+				__experimentalGetGlobalBlocksByName( state, 'core/heading' )
+			).toStrictEqual( [ 123 ] );
+		} );
+
+		it( 'should return the clientIds of blocks of a given type even if blocks are nested', () => {
+			expect(
+				__experimentalGetGlobalBlocksByName( state, 'core/paragraph' )
+			).toStrictEqual( [ 456, 1415, 1213 ] );
+		} );
+
+		it( 'Should return empty array if no blocks match. The empty array should be the same reference', () => {
+			const result = __experimentalGetGlobalBlocksByName(
+				state,
+				'test/missing'
+			);
+			expect(
+				__experimentalGetGlobalBlocksByName( state, 'test/missing' )
+			).toStrictEqual( [] );
+			expect(
+				__experimentalGetGlobalBlocksByName(
+					state,
+					'test/missing2'
+				) === result
+			).toBe( true );
+		} );
+	} );
+
 	describe( 'getSelectedBlockClientId', () => {
 		it( 'should return null if no block is selected', () => {
 			const state = {

@@ -44,7 +44,6 @@ import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
  */
-import useListViewModal from './use-list-view-modal';
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 import Placeholder from './placeholder';
@@ -233,10 +232,6 @@ function Navigation( {
 	const navRef = useRef();
 	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
 
-	const { listViewToolbarButton, listViewModal } = useListViewModal(
-		clientId
-	);
-
 	const {
 		convert,
 		status: classicMenuConversionStatus,
@@ -591,9 +586,7 @@ function Navigation( {
 							/>
 						</ToolbarGroup>
 					) }
-					<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
 				</BlockControls>
-				{ listViewModal }
 				<InspectorControls>
 					{ hasSubmenuIndicatorSetting && (
 						<PanelBody title={ __( 'Display' ) }>

@@ -162,6 +162,14 @@ export const defaultEntities = [
 		baseURLParams: { context: 'edit' },
 		key: 'plugin',
 	},
+	{
+		label: __( 'Navigation' ),
+		name: 'navigationMenu',
+		kind: 'root',
+		baseURL: '/wp/v2/navigation',
+		baseURLParams: { context: 'edit' },
+		plural: 'navigationMenus',
+	},
 ];
 
 export const kinds = [

@@ -231,7 +231,7 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) {
  */
 export async function toggleGlobalStyles() {
 	await page.click(
-		'.edit-site-header__actions button[aria-label="Styles"]'
+		'.interface-interface-skeleton__drawer button[aria-label="Styles"]'
 	);
 }
 
@@ -241,7 +241,7 @@ export async function toggleGlobalStyles() {
  * @param {string} panelName Name of the panel that is going to be opened.
  */
 export async function openGlobalStylesPanel( panelName ) {
-	const selector = `//div[@aria-label="Settings"]//button[.//*[text()="${ panelName }"]]`;
+	const selector = `//div[contains(@class, "edit-site-global-styles-sidebar__panel")]//button[.//*[text()="${ panelName }"]]`;
 	await ( await page.waitForXPath( selector ) ).click();
 }
 
@@ -250,6 +250,6 @@ export async function openGlobalStylesPanel( panelName ) {
  */
 export async function openPreviousGlobalStylesPanel() {
 	await page.click(
-		'div[aria-label="Settings"] button[aria-label="Navigate to the previous view"]'
+		'.edit-site-global-styles-sidebar__panel button[aria-label="Navigate to the previous view"]'
 	);
 }
@@ -71,7 +71,7 @@ async function getCustomFontSizeValue() {
 async function getColorValue( colorType ) {
 	return page.evaluate( ( _colorType ) => {
 		return document.evaluate(
-			`substring-before(substring-after(//div[@aria-label="Settings"]//button[.//*[text()="${ _colorType }"]]//*[contains(@class,"component-color-indicator")]/@style, "background: "), ";")`,
+			`substring-before(substring-after(//div[contains(@class, "edit-site-global-styles-sidebar__panel")]//button[.//*[text()="${ _colorType }"]]//*[contains(@class,"component-color-indicator")]/@style, "background: "), ";")`,
 			document,
 			null,
 			XPathResult.ANY_TYPE,