@wordpress/block-library 8.11.0 → 8.12.1

package/src/loginout/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/loginout",
 	"title": "Login/out",
 	"category": "theme",
@@ -18,7 +18,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"className": true,
 		"typography": {
 			"fontSize": true,

package/src/media-text/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/media-text",
 	"title": "Media & Text",
 	"category": "media",

package/src/media-text/edit.js

@@ -44,7 +44,7 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	TEMPLATE,
 } from './constants';
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 
 const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 

package/src/missing/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/missing",
 	"title": "Unsupported",
 	"category": "text",

package/src/more/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/more",
 	"title": "More",
 	"category": "design",

package/src/more/edit.native.js

@@ -1,15 +1,10 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-import Hr from 'react-native-hr';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { withPreferredColorScheme } from '@wordpress/compose';
+import { HorizontalRule } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -41,15 +36,13 @@ export class MoreEdit extends Component {
 		);
 
 		return (
-			<View>
-				<Hr
-					text={ content }
-					marginLeft={ 0 }
-					marginRight={ 0 }
-					textStyle={ textStyle }
-					lineStyle={ lineStyle }
-				/>
-			</View>
+			<HorizontalRule
+				text={ content }
+				marginLeft={ 0 }
+				marginRight={ 0 }
+				textStyle={ textStyle }
+				lineStyle={ lineStyle }
+			/>
 		);
 	}
 }

package/src/navigation/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/navigation",
 	"title": "Navigation",
 	"category": "theme",
@@ -91,7 +91,6 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"anchor": true,
 		"html": false,
 		"inserter": true,
 		"typography": {
@@ -115,7 +114,7 @@
 				"blockGap": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"allowVerticalAlignment": false,

package/src/navigation/constants.js

@@ -19,3 +19,14 @@ export const PRIORITIZED_INSERTER_BLOCKS = [
 	'core/navigation-link/page',
 	'core/navigation-link',
 ];
+
+export const SELECT_NAVIGATION_MENUS_ARGS = [
+	'postType',
+	'wp_navigation',
+	{
+		per_page: 100,
+		status: [ 'publish', 'draft' ],
+		order: 'desc',
+		orderby: 'date',
+	},
+];

package/src/navigation/deprecated.js

@@ -121,7 +121,7 @@ const v6 = {
 				blockGap: true,
 			},
 		},
-		__experimentalLayout: {
+		layout: {
 			allowSwitching: false,
 			allowInheriting: false,
 			default: {

package/src/navigation/edit/index.js

@@ -26,6 +26,7 @@ import {
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 
@@ -67,6 +68,9 @@ import { detectColors } from './utils';
 import ManageMenusButton from './manage-menus-button';
 import MenuInspectorControls from './menu-inspector-controls';
 import DeletedNavigationWarning from './deleted-navigation-warning';
+import { unlock } from '../../lock-unlock';
+
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
 function Navigation( {
 	attributes,
@@ -114,6 +118,8 @@ function Navigation( {
 	const recursionId = `navigationMenu/${ ref }`;
 	const hasAlreadyRendered = useHasRecursion( recursionId );
 
+	const blockEditingMode = useBlockEditingMode();
+
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
 	const { menus: classicMenus } = useNavigationEntities();
@@ -282,6 +288,7 @@ function Navigation( {
 	const textDecoration = attributes.style?.typography?.textDecoration;
 
 	const hasBlockOverlay = useBlockOverlayActive( clientId );
+	const isResponsive = 'never' !== overlayMenu;
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: classnames( className, {
@@ -291,7 +298,7 @@ function Navigation( {
 			'items-justified-center': justifyContent === 'center',
 			'is-vertical': orientation === 'vertical',
 			'no-wrap': flexWrap === 'nowrap',
-			'is-responsive': 'never' !== overlayMenu,
+			'is-responsive': isResponsive,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName( 'color', textColor?.slug ) ]:
 				!! textColor?.slug,
@@ -473,7 +480,6 @@ function Navigation( {
 
 	const hasManagePermissions =
 		canUserCreateNavigationMenu || canUserUpdateNavigationMenu;
-	const isResponsive = 'never' !== overlayMenu;
 
 	const overlayMenuPreviewClasses = classnames(
 		'wp-block-navigation__overlay-menu-preview',
@@ -652,15 +658,16 @@ function Navigation( {
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
 					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
 				/>
-				{ stylingInspectorControls }
+				{ blockEditingMode === 'default' && stylingInspectorControls }
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
 					hasIcon={ hasIcon }
 					icon={ icon }
-					isResponsive={ 'never' !== overlayMenu }
+					isResponsive={ isResponsive }
 					isHiddenByDefault={ 'always' === overlayMenu }
 					overlayBackgroundColor={ overlayBackgroundColor }
 					overlayTextColor={ overlayTextColor }
@@ -693,6 +700,7 @@ function Navigation( {
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
 					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
 				/>
 				<DeletedNavigationWarning
 					onCreateNew={ createUntitledEmptyNavigationMenu }
@@ -760,9 +768,10 @@ function Navigation( {
 					onSelectClassicMenu={ onSelectClassicMenu }
 					onSelectNavigationMenu={ onSelectNavigationMenu }
 					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
 				/>
-				{ stylingInspectorControls }
-				{ isEntityAvailable && (
+				{ blockEditingMode === 'default' && stylingInspectorControls }
+				{ blockEditingMode === 'default' && isEntityAvailable && (
 					<InspectorControls group="advanced">
 						{ hasResolvedCanUserUpdateNavigationMenu &&
 							canUserUpdateNavigationMenu && (

package/src/navigation/edit/leaf-more-menu.js

@@ -15,8 +15,7 @@ import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [

package/src/navigation/edit/menu-inspector-controls.js

@@ -19,7 +19,7 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import NavigationMenuSelector from './navigation-menu-selector';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import useNavigationMenu from '../use-navigation-menu';
 import LeafMoreMenu from './leaf-more-menu';
@@ -32,6 +32,49 @@ const BLOCKS_WITH_LINK_UI_SUPPORT = [
 	'core/navigation-link',
 	'core/navigation-submenu',
 ];
+const { PrivateListView } = unlock( blockEditorPrivateApis );
+
+function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const supportsLinkControls = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
+		insertedBlock?.name
+	);
+	const blockWasJustInserted = insertedBlock?.clientId === block.clientId;
+	const showLinkControls = supportsLinkControls && blockWasJustInserted;
+
+	if ( ! showLinkControls ) {
+		return null;
+	}
+
+	const setInsertedBlockAttributes =
+		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
+			if ( ! _insertedBlockClientId ) return;
+			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
+		};
+
+	return (
+		<LinkUI
+			clientId={ insertedBlock?.clientId }
+			link={ insertedBlock?.attributes }
+			onClose={ () => {
+				setInsertedBlock( null );
+			} }
+			hasCreateSuggestion={ false }
+			onChange={ ( updatedValue ) => {
+				updateAttributes(
+					updatedValue,
+					setInsertedBlockAttributes( insertedBlock?.clientId ),
+					insertedBlock?.attributes
+				);
+				setInsertedBlock( null );
+			} }
+			onCancel={ () => {
+				setInsertedBlock( null );
+			} }
+		/>
+	);
+}
 
 const MainContent = ( {
 	clientId,
@@ -40,26 +83,13 @@ const MainContent = ( {
 	isNavigationMenuMissing,
 	onCreateNew,
 } ) => {
-	const { PrivateListView } = unlock( blockEditorPrivateApis );
-
-	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
-	// This is required else the list view will display the entire block tree.
-	const clientIdsTree = useSelect(
+	const hasChildren = useSelect(
 		( select ) => {
-			const { __unstableGetClientIdsTree } = select( blockEditorStore );
-			return __unstableGetClientIdsTree( clientId );
+			return !! select( blockEditorStore ).getBlockCount( clientId );
 		},
 		[ clientId ]
 	);
 
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const setInsertedBlockAttributes =
-		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
-			if ( ! _insertedBlockClientId ) return;
-			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
-		};
-
 	const { navigationMenu } = useNavigationMenu( currentMenuId );
 
 	if ( currentMenuId && isNavigationMenuMissing ) {
@@ -80,62 +110,20 @@ const MainContent = ( {
 				'You have not yet created any menus. Displaying a list of your Pages'
 		  );
 
-	const renderLinkUI = (
-		currentBlock,
-		lastInsertedBlock,
-		setLastInsertedBlock
-	) => {
-		const blockSupportsLinkUI = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
-			lastInsertedBlock?.name
-		);
-		const currentBlockWasJustInserted =
-			lastInsertedBlock?.clientId === currentBlock.clientId;
-
-		const shouldShowLinkUIForBlock =
-			blockSupportsLinkUI && currentBlockWasJustInserted;
-
-		return (
-			shouldShowLinkUIForBlock && (
-				<LinkUI
-					clientId={ lastInsertedBlock?.clientId }
-					link={ lastInsertedBlock?.attributes }
-					onClose={ () => {
-						setLastInsertedBlock( null );
-					} }
-					hasCreateSuggestion={ false }
-					onChange={ ( updatedValue ) => {
-						updateAttributes(
-							updatedValue,
-							setInsertedBlockAttributes(
-								lastInsertedBlock?.clientId
-							),
-							lastInsertedBlock?.attributes
-						);
-						setLastInsertedBlock( null );
-					} }
-					onCancel={ () => {
-						setLastInsertedBlock( null );
-					} }
-				/>
-			)
-		);
-	};
-
 	return (
 		<div className="wp-block-navigation__menu-inspector-controls">
-			{ clientIdsTree.length === 0 && (
+			{ ! hasChildren && (
 				<p className="wp-block-navigation__menu-inspector-controls__empty-message">
 					{ __( 'This navigation menu is empty.' ) }
 				</p>
 			) }
 			<PrivateListView
-				blocks={ clientIdsTree }
 				rootClientId={ clientId }
 				isExpanded
 				description={ description }
 				showAppender
 				blockSettingsMenu={ LeafMoreMenu }
-				renderAdditionalBlockUI={ renderLinkUI }
+				additionalBlockContent={ AdditionalBlockContent }
 			/>
 		</div>
 	);
@@ -150,6 +138,7 @@ const MenuInspectorControls = ( props ) => {
 		onSelectClassicMenu,
 		onSelectNavigationMenu,
 		isManageMenusButtonDisabled,
+		blockEditingMode,
 	} = props;
 
 	return (
@@ -162,22 +151,24 @@ const MenuInspectorControls = ( props ) => {
 					>
 						{ __( 'Menu' ) }
 					</Heading>
-					<NavigationMenuSelector
-						currentMenuId={ currentMenuId }
-						onSelectClassicMenu={ onSelectClassicMenu }
-						onSelectNavigationMenu={ onSelectNavigationMenu }
-						onCreateNew={ onCreateNew }
-						createNavigationMenuIsSuccess={
-							createNavigationMenuIsSuccess
-						}
-						createNavigationMenuIsError={
-							createNavigationMenuIsError
-						}
-						actionLabel={ actionLabel }
-						isManageMenusButtonDisabled={
-							isManageMenusButtonDisabled
-						}
-					/>
+					{ blockEditingMode === 'default' && (
+						<NavigationMenuSelector
+							currentMenuId={ currentMenuId }
+							onSelectClassicMenu={ onSelectClassicMenu }
+							onSelectNavigationMenu={ onSelectNavigationMenu }
+							onCreateNew={ onCreateNew }
+							createNavigationMenuIsSuccess={
+								createNavigationMenuIsSuccess
+							}
+							createNavigationMenuIsError={
+								createNavigationMenuIsError
+							}
+							actionLabel={ actionLabel }
+							isManageMenusButtonDisabled={
+								isManageMenusButtonDisabled
+							}
+						/>
+					) }
 				</HStack>
 				<MainContent { ...props } />
 			</PanelBody>

package/src/navigation/edit/navigation-menu-selector.js

@@ -19,12 +19,22 @@ import { useEntityProp } from '@wordpress/core-data';
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 
-function buildMenuLabel( title, id ) {
-	const label =
-		decodeEntities( title?.rendered ) ||
+function buildMenuLabel( title, id, status ) {
+	if ( ! title?.rendered ) {
 		/* translators: %s is the index of the menu in the list of menus. */
-		sprintf( __( '(no title %s)' ), id );
-	return label;
+		return sprintf( __( '(no title %s)' ), id );
+	}
+
+	if ( status === 'publish' ) {
+		return decodeEntities( title?.rendered );
+	}
+
+	return sprintf(
+		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
+		__( '%1$s (%2$s)' ),
+		decodeEntities( title?.rendered ),
+		status
+	);
 }
 
 function NavigationMenuSelector( {
@@ -61,8 +71,8 @@ function NavigationMenuSelector( {
 
 	const menuChoices = useMemo( () => {
 		return (
-			navigationMenus?.map( ( { id, title }, index ) => {
-				const label = buildMenuLabel( title, index + 1 );
+			navigationMenus?.map( ( { id, title, status }, index ) => {
+				const label = buildMenuLabel( title, index + 1, status );
 
 				return {
 					value: id,

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -11,7 +11,11 @@ import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { areBlocksDirty } from './are-blocks-dirty';
-import { DEFAULT_BLOCK, ALLOWED_BLOCKS } from '../constants';
+import {
+	DEFAULT_BLOCK,
+	ALLOWED_BLOCKS,
+	SELECT_NAVIGATION_MENUS_ARGS,
+} from '../constants';
 
 const EMPTY_OBJECT = {};
 
@@ -82,11 +86,7 @@ export default function UnsavedInnerBlocks( {
 				isSaving: isSavingEntityRecord( 'postType', 'wp_navigation' ),
 				hasResolvedAllNavigationMenus: hasFinishedResolution(
 					'getEntityRecords',
-					[
-						'postType',
-						'wp_navigation',
-						{ per_page: -1, status: [ 'publish', 'draft' ] },
-					]
+					SELECT_NAVIGATION_MENUS_ARGS
 				),
 			};
 		},

package/src/navigation/editor.scss

@@ -503,28 +503,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	left: 0;
 }
 
-// Without this, the block cannot be selected, nor does the right container get focus.
-// @todo: this is disruptive. Ideally we can retire a few of the containers,
-// so focus is applied naturally on the block container.
-// It's important the right container has focus, otherwise you can't press
-// "Delete" to remove the block.
-.wp-block-navigation__responsive-container,
-.wp-block-navigation__responsive-close {
-	@include break-small() {
-		pointer-events: none;
-
-		.wp-block-navigation__responsive-container-close,
-		.block-editor-block-list__layout * {
-			pointer-events: all;
-		}
-	}
-
-	// Page List items should remain inert.
-	.wp-block-pages-list__item__link {
-		pointer-events: none;
-	}
-}
-
 // The menu and close buttons need higher specificity in the editor.
 .components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
 .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {