@wordpress/block-library 7.1.0 → 7.3.0

package/src/list-item/edit.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+	BlockControls,
+} from '@wordpress/block-editor';
+import { isRTL, __ } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
+import { ToolbarButton } from '@wordpress/components';
+import {
+	formatOutdent,
+	formatOutdentRTL,
+	formatIndentRTL,
+	formatIndent,
+} from '@wordpress/icons';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { useEnter, useIndentListItem, useOutdentListItem } from './hooks';
+
+function IndentUI( { clientId } ) {
+	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
+	const [ canOutdent, outdentListItem ] = useOutdentListItem( clientId );
+
+	return (
+		<>
+			<ToolbarButton
+				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
+				title={ __( 'Outdent' ) }
+				describedBy={ __( 'Outdent list item' ) }
+				disabled={ ! canOutdent }
+				onClick={ outdentListItem }
+			/>
+			<ToolbarButton
+				icon={ isRTL() ? formatIndentRTL : formatIndent }
+				title={ __( 'Indent' ) }
+				describedBy={ __( 'Indent list item' ) }
+				isDisabled={ ! canIndent }
+				onClick={ indentListItem }
+			/>
+		</>
+	);
+}
+
+export default function ListItemEdit( {
+	name,
+	attributes,
+	setAttributes,
+	mergeBlocks,
+	onReplace,
+	clientId,
+} ) {
+	const { placeholder, content } = attributes;
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/list' ],
+	} );
+	const useEnterRef = useEnter( { content, clientId } );
+	return (
+		<>
+			<li { ...innerBlocksProps }>
+				<RichText
+					ref={ useMergeRefs( [ useEnterRef ] ) }
+					identifier="content"
+					tagName="div"
+					onChange={ ( nextContent ) =>
+						setAttributes( { content: nextContent } )
+					}
+					value={ content }
+					aria-label={ __( 'List text' ) }
+					placeholder={ placeholder || __( 'List' ) }
+					onSplit={ ( value ) => {
+						return createBlock( name, {
+							...attributes,
+							content: value,
+						} );
+					} }
+					onMerge={ mergeBlocks }
+					onReplace={ onReplace }
+				/>
+				{ innerBlocksProps.children }
+			</li>
+			<BlockControls group="block">
+				<IndentUI clientId={ clientId } />
+			</BlockControls>
+		</>
+	);
+}

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

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { listItem as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+	merge( attributes, attributesToMerge ) {
+		return {
+			...attributes,
+			content: attributes.content + attributesToMerge.content,
+		};
+	},
+};

package/src/list-item/save.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	return (
+		<li { ...useBlockProps.save() }>
+			<RichText.Content value={ attributes.content } />
+			<InnerBlocks.Content />
+		</li>
+	);
+}

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/edit.js

@@ -161,7 +161,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 	const image = useSelect(
 		( select ) =>
 			mediaId && isSelected
-				? select( coreStore ).getMedia( mediaId )
+				? select( coreStore ).getMedia( mediaId, { context: 'view' } )
 				: null,
 		[ isSelected, mediaId ]
 	);

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' ) }