@wordpress/edit-site 4.2.0 → 4.3.2

package/src/components/global-styles/screen-block-list.js

@@ -2,13 +2,17 @@
  * WordPress dependencies
  */
 import { store as blocksStore } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf, _n } from '@wordpress/i18n';
 import {
 	FlexItem,
+	SearchControl,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
 import { BlockIcon } from '@wordpress/block-editor';
+import { useDebounce } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -59,9 +63,7 @@ function BlockMenuItem( { block } ) {
 	return (
 		<NavigationButton path={ '/blocks/' + block.name }>
 			<HStack justify="flex-start">
-				<FlexItem>
-					<BlockIcon icon={ block.icon } />
-				</FlexItem>
+				<BlockIcon icon={ block.icon } />
 				<FlexItem>{ block.title }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -70,6 +72,45 @@ function BlockMenuItem( { block } ) {
 
 function ScreenBlockList() {
 	const sortedBlockTypes = useSortedBlockTypes();
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const debouncedSpeak = useDebounce( speak, 500 );
+	const isMatchingSearchTerm = useSelect(
+		( select ) => select( blocksStore ).isMatchingSearchTerm,
+		[]
+	);
+	const filteredBlockTypes = useMemo( () => {
+		if ( ! filterValue ) {
+			return sortedBlockTypes;
+		}
+		return sortedBlockTypes.filter( ( blockType ) =>
+			isMatchingSearchTerm( blockType, filterValue )
+		);
+	}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );
+
+	const blockTypesListRef = useRef();
+
+	// Announce search results on change
+	useEffect( () => {
+		if ( ! filterValue ) {
+			return;
+		}
+		// We extract the results from the wrapper div's `ref` because
+		// filtered items can contain items that will eventually not
+		// render and there is no reliable way to detect when a child
+		// will return `null`.
+		// TODO: We should find a better way of handling this as it's
+		// fragile and depends on the number of rendered elements of `BlockMenuItem`,
+		// which is now one.
+		// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116
+		const count = blockTypesListRef.current.childElementCount;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage, count );
+	}, [ filterValue, debouncedSpeak ] );
+
 	return (
 		<>
 			<ScreenHeader
@@ -78,12 +119,24 @@ function ScreenBlockList() {
 					'Customize the appearance of specific blocks and for the whole site.'
 				) }
 			/>
-			{ sortedBlockTypes.map( ( block ) => (
-				<BlockMenuItem
-					block={ block }
-					key={ 'menu-itemblock-' + block.name }
-				/>
-			) ) }
+			<SearchControl
+				className="edit-site-block-types-search"
+				onChange={ setFilterValue }
+				value={ filterValue }
+				label={ __( 'Search for blocks' ) }
+				placeholder={ __( 'Search' ) }
+			/>
+			<div
+				ref={ blockTypesListRef }
+				className="edit-site-block-types-item-list"
+			>
+				{ filteredBlockTypes.map( ( block ) => (
+					<BlockMenuItem
+						block={ block }
+						key={ 'menu-itemblock-' + block.name }
+					/>
+				) ) }
+			</div>
 		</>
 	);
 }

package/src/components/global-styles/screen-colors.js

@@ -18,6 +18,7 @@ import Palette from './palette';
 import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
+import ColorIndicatorWrapper from './color-indicator-wrapper';
 
 function BackgroundColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
@@ -34,11 +35,11 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/background' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator
 						colorValue={ gradientValue ?? backgroundColor }
 					/>
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -57,9 +58,9 @@ function TextColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/text' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>
@@ -78,9 +79,9 @@ function LinkColorItem( { name, parentMenu } ) {
 	return (
 		<NavigationButton path={ parentMenu + '/colors/link' }>
 			<HStack justify="flex-start">
-				<FlexItem>
+				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
-				</FlexItem>
+				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButton>

package/src/components/global-styles/screen-root.js

@@ -10,15 +10,17 @@ import {
 	CardBody,
 	Card,
 	CardDivider,
+	CardMedia,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
-import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
+import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButton } from './navigation-button';
 import ContextMenu from './context-menu';
 import StylesPreview from './preview';
@@ -37,19 +39,19 @@ function ScreenRoot() {
 			<CardBody>
 				<VStack spacing={ 2 }>
 					<Card>
-						<StylesPreview />
+						<CardMedia>
+							<StylesPreview />
+						</CardMedia>
 					</Card>
 					{ !! variations?.length && (
 						<NavigationButton path="/variations">
 							<HStack justify="space-between">
-								<FlexItem>{ __( 'Other styles' ) }</FlexItem>
-								<FlexItem>
-									<Icon
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</FlexItem>
+								<FlexItem>{ __( 'Browse styles' ) }</FlexItem>
+								<IconWithCurrentColor
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
 							</HStack>
 						</NavigationButton>
 					) }
@@ -72,13 +74,9 @@ function ScreenRoot() {
 					<NavigationButton path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
-							<FlexItem>
-								<Icon
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</FlexItem>
+							<IconWithCurrentColor
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
 						</HStack>
 					</NavigationButton>
 				</ItemGroup>

package/src/components/global-styles/screen-style-variations.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
  */
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useMemo, useContext } from '@wordpress/element';
+import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import {
 	__experimentalGrid as Grid,
@@ -31,6 +31,7 @@ function compareVariations( a, b ) {
 }
 
 function Variation( { variation } ) {
+	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo( () => {
 		return {
@@ -77,8 +78,16 @@ function Variation( { variation } ) {
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
 				tabIndex="0"
+				aria-label={ variation?.title }
+				onFocus={ () => setIsFocused( true ) }
+				onBlur={ () => setIsFocused( false ) }
 			>
-				<StylesPreview height={ 100 } />
+				<div className="edit-site-global-styles-variations_item-preview">
+					<StylesPreview
+						label={ variation?.title }
+						isFocused={ isFocused }
+					/>
+				</div>
 			</div>
 		</GlobalStylesContext.Provider>
 	);
@@ -96,7 +105,7 @@ function ScreenStyleVariations() {
 	const withEmptyVariation = useMemo( () => {
 		return [
 			{
-				name: __( 'Default' ),
+				title: __( 'Default' ),
 				settings: {},
 				styles: {},
 			},
@@ -108,7 +117,7 @@ function ScreenStyleVariations() {
 		<>
 			<ScreenHeader
 				back="/"
-				title={ __( 'Other styles' ) }
+				title={ __( 'Browse styles' ) }
 				description={ __(
 					'Choose a different style combination for the theme styles'
 				) }

package/src/components/global-styles/style.scss

@@ -44,7 +44,8 @@
 	}
 }
 
-.edit-site-global-styles-header__description {
+.edit-site-global-styles-header__description,
+.edit-site-block-types-search {
 	padding: 0 $grid-unit-20;
 }
 
@@ -73,19 +74,31 @@
 
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
-	padding: $border-width * 2;
-	border-radius: $radius-block-ui;
-	border: $gray-200 $border-width solid;
 
-	&.is-active {
+	.edit-site-global-styles-variations_item-preview {
+		padding: $border-width * 2;
+		border-radius: $radius-block-ui;
+		border: $gray-200 $border-width solid;
+	}
+
+	&.is-active .edit-site-global-styles-variations_item-preview {
 		border: $gray-900 $border-width solid;
 	}
 
-	&:hover {
+	&:hover .edit-site-global-styles-variations_item-preview {
 		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 
-	&:focus {
+	&:focus .edit-site-global-styles-variations_item-preview {
 		border: var(--wp-admin-theme-color) $border-width solid;
 	}
 }
+
+.edit-site-global-styles-icon-with-current-color {
+	fill: currentColor;
+}
+
+.edit-site-global-styles__color-indicator-wrapper {
+	// Match the height of the rest of the icons (24px).
+	height: $grid-unit * 3;
+}

package/src/components/sidebar/index.js

@@ -14,6 +14,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
+import NavigationMenuSidebar from './navigation-menu-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
 import TemplateCard from './template-card';
@@ -57,6 +58,16 @@ export function SidebarComplementaryAreaFills() {
 	if ( ! isEditorSidebarOpened ) {
 		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
 	}
+
+	// Conditionally include NavMenu sidebar in Plugin only.
+	// Optimise for dead code elimination.
+	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
+	let MaybeNavigationMenuSidebar = 'Fragment';
+
+	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+		MaybeNavigationMenuSidebar = NavigationMenuSidebar;
+	}
+
 	return (
 		<>
 			<DefaultSidebar
@@ -77,6 +88,7 @@ export function SidebarComplementaryAreaFills() {
 				) }
 			</DefaultSidebar>
 			<GlobalStylesSidebar />
+			<MaybeNavigationMenuSidebar />
 		</>
 	);
 }

package/src/components/sidebar/navigation-menu-sidebar/index.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { FlexBlock, Flex } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { navigation } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import DefaultSidebar from '../default-sidebar';
+import NavigationInspector from './navigation-inspector';
+
+export default function NavigationMenuSidebar() {
+	return (
+		<DefaultSidebar
+			className="edit-site-navigation-menu-sidebar"
+			identifier="edit-site/navigation-menu"
+			title={ __( 'Navigation Menus' ) }
+			icon={ navigation }
+			closeLabel={ __( 'Close navigation menu sidebar' ) }
+			panelClassName="edit-site-navigation-menu-sidebar__panel"
+			header={
+				<Flex>
+					<FlexBlock>
+						<strong>{ __( 'Navigation Menus' ) }</strong>
+					</FlexBlock>
+				</Flex>
+			}
+		>
+			<NavigationInspector />
+		</DefaultSidebar>
+	);
+}

package/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js

@@ -0,0 +1,224 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
+import { SelectControl } from '@wordpress/components';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+import {
+	store as blockEditorStore,
+	BlockEditorProvider,
+} from '@wordpress/block-editor';
+import { speak } from '@wordpress/a11y';
+import { useInstanceId } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import NavigationMenu from './navigation-menu';
+
+const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
+
+export default function NavigationInspector() {
+	const {
+		selectedNavigationBlockId,
+		clientIdToRef,
+		navigationMenus,
+		isResolvingNavigationMenus,
+		hasResolvedNavigationMenus,
+		firstNavigationBlockId,
+	} = useSelect( ( select ) => {
+		const {
+			__experimentalGetActiveBlockIdByBlockNames,
+			__experimentalGetGlobalBlocksByName,
+			getBlock,
+		} = select( blockEditorStore );
+
+		const { getEntityRecords, hasFinishedResolution, isResolving } = select(
+			coreStore
+		);
+
+		const navigationMenusQuery = [
+			'postType',
+			'wp_navigation',
+			NAVIGATION_MENUS_QUERY[ 0 ],
+		];
+
+		// Get the active Navigation block (if present).
+		const selectedNavId = __experimentalGetActiveBlockIdByBlockNames(
+			'core/navigation'
+		);
+
+		// Get all Navigation blocks currently within the editor canvas.
+		const navBlockIds = __experimentalGetGlobalBlocksByName(
+			'core/navigation'
+		);
+		const idToRef = {};
+		navBlockIds.forEach( ( id ) => {
+			idToRef[ id ] = getBlock( id )?.attributes?.ref;
+		} );
+		return {
+			selectedNavigationBlockId: selectedNavId,
+			firstNavigationBlockId: navBlockIds?.[ 0 ],
+			clientIdToRef: idToRef,
+			navigationMenus: getEntityRecords( ...navigationMenusQuery ),
+			isResolvingNavigationMenus: isResolving(
+				'getEntityRecords',
+				navigationMenusQuery
+			),
+			hasResolvedNavigationMenus: hasFinishedResolution(
+				'getEntityRecords',
+				navigationMenusQuery
+			),
+		};
+	}, [] );
+
+	const navMenuListId = useInstanceId(
+		NavigationMenu,
+		'edit-site-navigation-inspector-menu'
+	);
+
+	const firstNavRefInTemplate = clientIdToRef[ firstNavigationBlockId ];
+	const firstNavigationMenuRef = navigationMenus?.[ 0 ]?.id;
+
+	// Default Navigation Menu is either:
+	// - the Navigation Menu referenced by the first Nav block within the template.
+	// - the first of the available Navigation Menus (`wp_navigation`) posts.
+	const defaultNavigationMenuId =
+		firstNavRefInTemplate || firstNavigationMenuRef;
+
+	// The Navigation Menu manually selected by the user within the Nav inspector.
+	const [ currentMenuId, setCurrentMenuId ] = useState(
+		firstNavRefInTemplate
+	);
+
+	// If a Nav block is selected within the canvas then set the
+	// Navigation Menu referenced by it's `ref` attribute  to be
+	// active within the Navigation sidebar.
+	useEffect( () => {
+		if ( selectedNavigationBlockId ) {
+			setCurrentMenuId( clientIdToRef[ selectedNavigationBlockId ] );
+		}
+	}, [ selectedNavigationBlockId ] );
+
+	let options = [];
+	if ( navigationMenus ) {
+		options = navigationMenus.map( ( { id, title } ) => ( {
+			value: id,
+			label: title.rendered,
+		} ) );
+	}
+
+	const [ innerBlocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		'wp_navigation',
+		{ id: currentMenuId || defaultNavigationMenuId }
+	);
+
+	const { isLoadingInnerBlocks, hasLoadedInnerBlocks } = useSelect(
+		( select ) => {
+			const { isResolving, hasFinishedResolution } = select( coreStore );
+			return {
+				isLoadingInnerBlocks: isResolving( 'getEntityRecord', [
+					'postType',
+					'wp_navigation',
+					currentMenuId || defaultNavigationMenuId,
+				] ),
+				hasLoadedInnerBlocks: hasFinishedResolution(
+					'getEntityRecord',
+					[
+						'postType',
+						'wp_navigation',
+						currentMenuId || defaultNavigationMenuId,
+					]
+				),
+			};
+		},
+		[ currentMenuId, defaultNavigationMenuId ]
+	);
+
+	const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks );
+
+	const hasMoreThanOneNavigationMenu = navigationMenus?.length > 1;
+
+	const hasNavigationMenus = !! navigationMenus?.length;
+
+	// Entity block editor will return entities that are not currently published.
+	// Guard by only allowing their usage if there are published Nav Menus.
+	const publishedInnerBlocks = hasNavigationMenus ? innerBlocks : [];
+
+	const hasInnerBlocks = !! publishedInnerBlocks?.length;
+
+	useEffect( () => {
+		if ( isResolvingNavigationMenus ) {
+			speak( 'Loading Navigation sidebar menus.' );
+		}
+
+		if ( hasResolvedNavigationMenus ) {
+			speak( 'Navigation sidebar menus have loaded.' );
+		}
+	}, [ isResolvingNavigationMenus, hasResolvedNavigationMenus ] );
+
+	useEffect( () => {
+		if ( isLoadingInnerBlocks ) {
+			speak( 'Loading Navigation sidebar selected menu items.' );
+		}
+
+		if ( hasLoadedInnerBlocks ) {
+			speak( 'Navigation sidebar selected menu items have loaded.' );
+		}
+	}, [ isLoadingInnerBlocks, hasLoadedInnerBlocks ] );
+
+	return (
+		<div className="edit-site-navigation-inspector">
+			{ hasResolvedNavigationMenus && ! hasNavigationMenus && (
+				<p className="edit-site-navigation-inspector__empty-msg">
+					{ __( 'There are no Navigation Menus.' ) }
+				</p>
+			) }
+
+			{ ! hasResolvedNavigationMenus && (
+				<div className="edit-site-navigation-inspector__placeholder" />
+			) }
+			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
+				<SelectControl
+					aria-controls={
+						// aria-controls should only apply when referenced element is in DOM
+						hasLoadedInnerBlocks ? navMenuListId : undefined
+					}
+					value={ currentMenuId || defaultNavigationMenuId }
+					options={ options }
+					onChange={ ( newMenuId ) =>
+						setCurrentMenuId( Number( newMenuId ) )
+					}
+				/>
+			) }
+			{ isLoading && (
+				<>
+					<div className="edit-site-navigation-inspector__placeholder is-child" />
+					<div className="edit-site-navigation-inspector__placeholder is-child" />
+					<div className="edit-site-navigation-inspector__placeholder is-child" />
+				</>
+			) }
+			{ hasInnerBlocks && ! isLoading && (
+				<BlockEditorProvider
+					value={ publishedInnerBlocks }
+					onChange={ onChange }
+					onInput={ onInput }
+				>
+					<NavigationMenu
+						id={ navMenuListId }
+						innerBlocks={ publishedInnerBlocks }
+					/>
+				</BlockEditorProvider>
+			) }
+
+			{ ! hasInnerBlocks && ! isLoading && (
+				<p className="edit-site-navigation-inspector__empty-msg">
+					{ __( 'Navigation Menu is empty.' ) }
+				</p>
+			) }
+		</div>
+	);
+}

package/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalListView as ListView,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+
+const ALLOWED_BLOCKS = {
+	'core/navigation': [
+		'core/navigation-link',
+		'core/search',
+		'core/social-links',
+		'core/page-list',
+		'core/spacer',
+		'core/home-link',
+		'core/site-title',
+		'core/site-logo',
+		'core/navigation-submenu',
+	],
+	'core/social-links': [ 'core/social-link' ],
+	'core/navigation-submenu': [
+		'core/navigation-link',
+		'core/navigation-submenu',
+	],
+	'core/navigation-link': [
+		'core/navigation-link',
+		'core/navigation-submenu',
+	],
+};
+
+export default function NavigationMenu( { innerBlocks, id } ) {
+	const { updateBlockListSettings } = useDispatch( blockEditorStore );
+
+	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
+	//Think through a better way of doing this, possible with adding allowed blocks to block library metadata
+	useEffect( () => {
+		updateBlockListSettings( '', {
+			allowedBlocks: ALLOWED_BLOCKS[ 'core/navigation' ],
+		} );
+		innerBlocks.forEach( ( block ) => {
+			if ( ALLOWED_BLOCKS[ block.name ] ) {
+				updateBlockListSettings( block.clientId, {
+					allowedBlocks: ALLOWED_BLOCKS[ block.name ],
+				} );
+			}
+		} );
+	}, [ updateBlockListSettings, innerBlocks ] );
+	return (
+		<>
+			<ListView
+				id={ id }
+				showNestedBlocks
+				expandNested={ false }
+				__experimentalFeatures
+				__experimentalPersistentListViewFeatures
+			/>
+		</>
+	);
+}