@wordpress/block-library 7.2.0 → 7.3.0

package/src/list-item/hooks/index.js

@@ -0,0 +1,3 @@
+export { default as useOutdentListItem } from './use-outdent-list-item';
+export { default as useIndentListItem } from './use-indent-list-item';
+export { default as useEnter } from './use-enter';

package/src/list-item/hooks/use-enter.js

@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	getDefaultBlockName,
+	cloneBlock,
+} from '@wordpress/blocks';
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { ENTER } from '@wordpress/keycodes';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import useIndentListItem from './use-indent-list-item';
+
+export default function useEnter( props ) {
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const {
+		getBlock,
+		getBlockRootClientId,
+		getBlockParents,
+		getBlockIndex,
+	} = useSelect( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	const [ canIndent, indentListItem ] = useIndentListItem(
+		propsRef.current.clientId
+	);
+	return useRefEffect(
+		( element ) => {
+			function onKeyDown( event ) {
+				if ( event.defaultPrevented || event.keyCode !== ENTER ) {
+					return;
+				}
+				const { content, clientId } = propsRef.current;
+				if ( content.length ) {
+					return;
+				}
+				event.preventDefault();
+				if ( canIndent ) {
+					indentListItem();
+					return;
+				}
+				// Here we are in top level list so we need to split.
+				const blockRootClientId = getBlockRootClientId( clientId );
+				const blockParents = getBlockParents( clientId );
+				const topParentListBlockClientId = blockParents[ 0 ];
+				const topParentListBlock = getBlock(
+					topParentListBlockClientId
+				);
+				const blockIndex = getBlockIndex( clientId );
+				const head = cloneBlock( {
+					...topParentListBlock,
+					innerBlocks: topParentListBlock.innerBlocks.slice(
+						0,
+						blockIndex
+					),
+				} );
+				const middle = createBlock( getDefaultBlockName() );
+				// Last list item might contain a `list` block innerBlock
+				// In that case append remaining innerBlocks blocks.
+				const after = [
+					...( topParentListBlock.innerBlocks[ blockIndex ]
+						.innerBlocks[ 0 ]?.innerBlocks || [] ),
+					...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
+				];
+				const tail = after.length
+					? [
+							cloneBlock( {
+								...topParentListBlock,
+								innerBlocks: after,
+							} ),
+					  ]
+					: [];
+				replaceBlocks(
+					blockRootClientId,
+					[ head, middle, ...tail ],
+					1,
+					0
+				);
+			}
+
+			element.addEventListener( 'keydown', onKeyDown );
+			return () => {
+				element.removeEventListener( 'keydown', onKeyDown );
+			};
+		},
+		[ canIndent ]
+	);
+}

package/src/list-item/hooks/use-indent-list-item.js

@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import { first } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { createListItem } from '../utils';
+
+export default function useIndentListItem( clientId ) {
+	const { canIndent } = useSelect(
+		( innerSelect ) => {
+			const { getBlockIndex } = innerSelect( blockEditorStore );
+			return {
+				canIndent: getBlockIndex( clientId ) > 0,
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlock,
+		getBlockOrder,
+		getSelectionStart,
+		getSelectionEnd,
+		getBlockIndex,
+	} = useSelect( blockEditorStore );
+
+	return [
+		canIndent,
+		useCallback( () => {
+			const selectionStart = getSelectionStart();
+			const selectionEnd = getSelectionEnd();
+
+			const parentId = getBlockRootClientId( clientId );
+			const previousSiblingId = getBlockOrder( parentId )[
+				getBlockIndex( clientId ) - 1
+			];
+			const previousSibling = getBlock( previousSiblingId );
+			const previousSiblingChildren =
+				first( previousSibling.innerBlocks )?.innerBlocks || [];
+			const previousSiblingListAttributes =
+				first( previousSibling.innerBlocks )?.attributes || {};
+			const block = getBlock( clientId );
+
+			const childListAttributes = first( block.innerBlocks )?.attributes;
+			const childItemBlocks =
+				first( block.innerBlocks )?.innerBlocks || [];
+
+			const newBlock = createListItem(
+				block.attributes,
+				childListAttributes,
+				childItemBlocks
+			);
+			// Replace the previous sibling of the block being indented and the indented block,
+			// with a new block whose attributes are equal to the ones of the previous sibling and
+			// whose descendants are the children of the previous sibling, followed by the indented block.
+			replaceBlocks(
+				[ previousSiblingId, clientId ],
+				[
+					createListItem(
+						previousSibling.attributes,
+						previousSiblingListAttributes,
+						[ ...previousSiblingChildren, newBlock ]
+					),
+				]
+			);
+
+			// Restore the selection state.
+			selectionChange(
+				newBlock.clientId,
+				selectionEnd.attributeKey,
+				selectionEnd.clientId === selectionStart.clientId
+					? selectionStart.offset
+					: selectionEnd.offset,
+				selectionEnd.offset
+			);
+		}, [ clientId ] ),
+	];
+}

package/src/list-item/hooks/use-outdent-list-item.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { createListItem } from '../utils';
+
+export default function useOutdentListItem( clientId ) {
+	const { canOutdent } = useSelect(
+		( innerSelect ) => {
+			const { getBlockRootClientId } = innerSelect( blockEditorStore );
+			const grandParentId = getBlockRootClientId(
+				getBlockRootClientId( clientId )
+			);
+			return {
+				canOutdent: !! grandParentId,
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockAttributes,
+		getBlock,
+		getBlockIndex,
+		getSelectionStart,
+		getSelectionEnd,
+	} = useSelect( blockEditorStore );
+
+	return [
+		canOutdent,
+		useCallback( () => {
+			const selectionStart = getSelectionStart();
+			const selectionEnd = getSelectionEnd();
+
+			const listParentId = getBlockRootClientId( clientId );
+			const listAttributes = getBlockAttributes( listParentId );
+			const listItemParentId = getBlockRootClientId( listParentId );
+			const listItemParentAttributes = getBlockAttributes(
+				listItemParentId
+			);
+
+			const index = getBlockIndex( clientId );
+			const siblingBlocks = getBlock( listParentId ).innerBlocks;
+			const previousSiblings = siblingBlocks.slice( 0, index );
+			const afterSiblings = siblingBlocks.slice( index + 1 );
+
+			// Create a new parent list item block with just the siblings
+			// that existed before the child item being outdent.
+			const newListItemParent = createListItem(
+				listItemParentAttributes,
+				listAttributes,
+				previousSiblings
+			);
+
+			const block = getBlock( clientId );
+			const childList = block.innerBlocks[ 0 ];
+			const childItems = childList?.innerBlocks || [];
+			const hasChildItems = !! childItems.length;
+
+			// Create a new list item block whose attributes are equal to the
+			// block being outdent and whose children are the children that it had (if any)
+			// followed by the siblings that existed after it.
+			const newItem = createListItem(
+				block.attributes,
+				hasChildItems ? childList.attributes : listAttributes,
+				[ ...childItems, ...afterSiblings ]
+			);
+
+			// Replace the parent list item block, with a new block containing
+			// the previous siblings, followed by another block containing after siblings
+			// in relation to the block being outdent.
+			replaceBlocks(
+				[ listItemParentId ],
+				[ newListItemParent, newItem ]
+			);
+
+			// Restore the selection state.
+			selectionChange(
+				newItem.clientId,
+				selectionEnd.attributeKey,
+				selectionEnd.clientId === selectionStart.clientId
+					? selectionStart.offset
+					: selectionEnd.offset,
+				selectionEnd.offset
+			);
+		}, [ clientId ] ),
+	];
+}

package/src/list-item/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { list as icon } from '@wordpress/icons';
+import { listItem as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

package/src/list-item/utils.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+export function createListItem( listItemAttributes, listAttributes, children ) {
+	return createBlock(
+		'core/list-item',
+		listItemAttributes,
+		! children || ! children.length
+			? []
+			: [ createBlock( 'core/list', listAttributes, children ) ]
+	);
+}

package/src/media-text/media-container.native.js

@@ -26,8 +26,6 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { withDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -152,10 +150,6 @@ class MediaContainer extends Component {
 	}
 
 	finishMediaUploadWithFailure() {
-		const { createErrorNotice } = this.props;
-
-		createErrorNotice( __( 'Failed to insert media.' ) );
-
 		this.setState( { isUploadInProgress: false } );
 	}
 
@@ -381,11 +375,4 @@ class MediaContainer extends Component {
 	}
 }
 
-export default compose( [
-	withDispatch( ( dispatch ) => {
-		const { createErrorNotice } = dispatch( noticesStore );
-
-		return { createErrorNotice };
-	} ),
-	withPreferredColorScheme,
-] )( MediaContainer );
+export default compose( [ withPreferredColorScheme ] )( MediaContainer );

package/src/navigation/block.json

@@ -59,6 +59,10 @@
 		},
 		"customOverlayTextColor": {
 			"type": "string"
+		},
+		"maxNestingLevel": {
+			"type": "number",
+			"default": 5
 		}
 	},
 	"usesContext": [ "navigationArea" ],
@@ -76,7 +80,8 @@
 		"showSubmenuIcon": "showSubmenuIcon",
 		"openSubmenusOnClick": "openSubmenusOnClick",
 		"style": "style",
-		"orientation": "orientation"
+		"orientation": "orientation",
+		"maxNestingLevel": "maxNestingLevel"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
@@ -90,6 +95,8 @@
 			"__experimentalFontWeight": true,
 			"__experimentalTextTransform": true,
 			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalSkipSerialization": [ "textDecoration" ],
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
@@ -104,6 +111,7 @@
 		"__experimentalLayout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
+			"allowVerticalAlignment": false,
 			"default": {
 				"type": "flex"
 			}

package/src/navigation/edit/index.js

@@ -38,13 +38,12 @@ import {
 	Button,
 	Spinner,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 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';
@@ -167,6 +166,10 @@ function Navigation( {
 	// the Select Menu dropdown.
 	useNavigationEntities();
 
+	const [ showNavigationMenuDeleteNotice ] = useNavigationNotice( {
+		name: 'block-library/core/navigation/delete',
+	} );
+
 	const [
 		showNavigationMenuCreateNotice,
 		hideNavigationMenuCreateNotice,
@@ -267,6 +270,7 @@ function Navigation( {
 	const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false );
 
 	const {
+		hasResolvedNavigationMenus,
 		isNavigationMenuResolved,
 		isNavigationMenuMissing,
 		navigationMenus,
@@ -280,12 +284,25 @@ function Navigation( {
 		hasResolvedCanUserCreateNavigationMenu,
 	} = useNavigationMenu( ref );
 
+	// Attempt to retrieve and prioritize any existing navigation menu unless
+	// a specific ref is allocated or the user is explicitly creating a new menu. The aim is
+	// for the block to "just work" from a user perspective using existing data.
+	useEffect( () => {
+		if (
+			isCreatingNavigationMenu ||
+			ref ||
+			! navigationMenus?.length ||
+			navigationMenus?.length > 1
+		) {
+			return;
+		}
+
+		setRef( navigationMenus[ 0 ].id );
+	}, [ navigationMenus ] );
+
 	const navRef = useRef();
-	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
 
-	const { listViewToolbarButton, listViewModal } = useListViewModal(
-		clientId
-	);
+	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
 
 	const {
 		convert,
@@ -310,6 +327,7 @@ function Navigation( {
 		! ref &&
 		! isCreatingNavigationMenu &&
 		! isConvertingClassicMenu &&
+		hasResolvedNavigationMenus &&
 		( ! hasUncontrolledInnerBlocks || isWithinUnassignedArea );
 
 	const isEntityAvailable =
@@ -322,10 +340,13 @@ function Navigation( {
 	// - there is a ref attribute pointing to a Navigation Post
 	// - the Navigation Post isn't available (hasn't resolved) yet.
 	const isLoading =
+		! hasResolvedNavigationMenus ||
 		isCreatingNavigationMenu ||
 		isConvertingClassicMenu ||
 		!! ( ref && ! isEntityAvailable && ! isConvertingClassicMenu );
 
+	const textDecoration = attributes.style?.typography?.textDecoration;
+
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: classnames( className, {
@@ -346,6 +367,7 @@ function Navigation( {
 				'background-color',
 				backgroundColor?.slug
 			) ]: !! backgroundColor?.slug,
+			[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
 		} ),
 		style: {
 			color: ! textColor?.slug && textColor?.color,
@@ -534,11 +556,12 @@ function Navigation( {
 		} );
 	}, [ clientId, ref ] );
 
-	// If the block has inner blocks, but no menu id, this was an older
-	// navigation block added before the block used a wp_navigation entity.
-	// Either this block was saved in the content or inserted by a pattern.
-	// Consider this 'unsaved'. Offer an uncontrolled version of inner blocks,
-	// that automatically saves the menu.
+	// If the block has inner blocks, but no menu id, then these blocks are either:
+	// - inserted via a pattern.
+	// - inserted directly via Code View (or otherwise).
+	// - from an older version of navigation block added before the block used a wp_navigation entity.
+	// Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
+	// that automatically saves the menu as an entity when changes are made to the inner blocks.
 	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
 	if ( hasUnsavedBlocks ) {
 		return (
@@ -566,6 +589,10 @@ function Navigation( {
 							setHasSavedUnsavedInnerBlocks( true );
 							// Switch to using the wp_navigation entity.
 							setRef( post.id );
+
+							showNavigationMenuCreateNotice(
+								__( `New Navigation Menu created.` )
+							);
 						} }
 					/>
 				</ResponsiveWrapper>
@@ -646,9 +673,7 @@ function Navigation( {
 							/>
 						</ToolbarGroup>
 					) }
-					<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
 				</BlockControls>
-				{ listViewModal }
 				<InspectorControls>
 					{ hasSubmenuIndicatorSetting && (
 						<PanelBody title={ __( 'Display' ) }>
@@ -794,7 +819,18 @@ function Navigation( {
 						{ hasResolvedCanUserDeleteNavigationMenu &&
 							canUserDeleteNavigationMenu && (
 								<NavigationMenuDeleteControl
-									onDelete={ resetToEmptyBlock }
+									onDelete={ ( deletedMenuTitle = '' ) => {
+										resetToEmptyBlock();
+										showNavigationMenuDeleteNotice(
+											sprintf(
+												// translators: %s: the name of a menu (e.g. Header navigation).
+												__(
+													'Navigation menu %s successfully deleted.'
+												),
+												deletedMenuTitle
+											)
+										);
+									} }
 								/>
 							) }
 					</InspectorControls>

package/src/navigation/edit/navigation-menu-delete-control.js

@@ -67,7 +67,7 @@ export default function NavigationMenuDeleteControl( { onDelete } ) {
 										id,
 										{ force: true }
 									);
-									onDelete();
+									onDelete( title );
 								} }
 							>
 								{ __( 'Confirm' ) }

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

@@ -10,7 +10,7 @@ import { useInnerBlocksProps } from '@wordpress/block-editor';
 import { Disabled, Spinner } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useContext, useEffect, useRef } from '@wordpress/element';
+import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,6 +25,22 @@ const DRAFT_MENU_PARAMS = [
 	{ status: 'draft', per_page: -1 },
 ];
 
+const DEFAULT_BLOCK = {
+	name: 'core/navigation-link',
+};
+
+const ALLOWED_BLOCKS = [
+	'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',
+];
+
 export default function UnsavedInnerBlocks( {
 	blockProps,
 	blocks,
@@ -33,6 +49,33 @@ export default function UnsavedInnerBlocks( {
 	onSave,
 	hasSelection,
 } ) {
+	const originalBlocks = useRef();
+
+	useEffect( () => {
+		// Initially store the uncontrolled inner blocks for
+		// dirty state comparison.
+		if ( ! originalBlocks?.current ) {
+			originalBlocks.current = blocks;
+		}
+	}, [ blocks ] );
+
+	// If the current inner blocks object is different in any way
+	// from the original inner blocks from the post content then the
+	// user has made changes to the inner blocks. At this point the inner
+	// blocks can be considered "dirty".
+	const innerBlocksAreDirty = blocks !== originalBlocks.current;
+
+	const shouldDirectInsert = useMemo(
+		() =>
+			blocks.every(
+				( { name } ) =>
+					name === 'core/navigation-link' ||
+					name === 'core/navigation-submenu' ||
+					name === 'core/page-list'
+			),
+		[ blocks ]
+	);
+
 	// The block will be disabled in a block preview, use this as a way of
 	// avoiding the side-effects of this component for block previews.
 	const isDisabled = useContext( Disabled.Context );
@@ -40,6 +83,9 @@ export default function UnsavedInnerBlocks( {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		renderAppender: hasSelection ? undefined : false,
+		allowedBlocks: ALLOWED_BLOCKS,
+		__experimentalDefaultBlock: DEFAULT_BLOCK,
+		__experimentalDirectInsert: shouldDirectInsert,
 	} );
 
 	const {
@@ -97,7 +143,8 @@ export default function UnsavedInnerBlocks( {
 			savingLock.current ||
 			! hasResolvedDraftNavigationMenus ||
 			! hasResolvedNavigationMenus ||
-			! hasSelection
+			! hasSelection ||
+			! innerBlocksAreDirty
 		) {
 			return;
 		}
@@ -118,19 +165,21 @@ export default function UnsavedInnerBlocks( {
 		blocks,
 	] );
 
+	const Wrapper = isSaving ? Disabled : 'div';
+
 	return (
-		<div className="wp-block-navigation__unsaved-changes">
-			<Disabled
+		<Wrapper className="wp-block-navigation__unsaved-changes">
+			<div
 				className={ classnames(
 					'wp-block-navigation__unsaved-changes-overlay',
 					{
-						'is-saving': hasSelection,
+						'is-saving': isSaving,
 					}
 				) }
 			>
 				<div { ...innerBlocksProps } />
-			</Disabled>
-			{ hasSelection && <Spinner /> }
-		</div>
+			</div>
+			{ isSaving && <Spinner /> }
+		</Wrapper>
 	);
 }

package/src/navigation/index.php

@@ -486,6 +486,10 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$layout_class .= ' no-wrap';
 	}
 
+	// Manually add block support text decoration as CSS class.
+	$text_decoration       = _wp_array_get( $attributes, array( 'style', 'typography', 'textDecoration' ), null );
+	$text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration );
+
 	$colors     = block_core_navigation_build_css_colors( $attributes );
 	$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
 	$classes    = array_merge(
@@ -493,7 +497,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$font_sizes['css_classes'],
 		$is_responsive_menu ? array( 'is-responsive' ) : array(),
 		$layout_class ? array( $layout_class ) : array(),
-		$is_fallback ? array( 'is-fallback' ) : array()
+		$is_fallback ? array( 'is-fallback' ) : array(),
+		$text_decoration ? array( $text_decoration_class ) : array()
 	);
 
 	$inner_blocks_html = '';