@wordpress/block-library 7.16.0 → 7.18.0

package/src/image/image.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, filter, isEmpty, map, pick, includes } from 'lodash';
+import { get, filter, isEmpty, map, pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,13 @@ import {
 	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
-import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
+import {
+	useEffect,
+	useMemo,
+	useState,
+	useRef,
+	useCallback,
+} from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
 import {
@@ -40,7 +46,12 @@ import {
 	getDefaultBlockName,
 	switchToBlockType,
 } from '@wordpress/blocks';
-import { crop, overlayText, upload } from '@wordpress/icons';
+import {
+	crop,
+	overlayText,
+	upload,
+	caption as captionIcon,
+} from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -88,8 +99,8 @@ export default function Image( {
 		sizeSlug,
 	} = attributes;
 	const imageRef = useRef();
-	const captionRef = useRef();
-	const prevUrl = usePrevious( url );
+	const prevCaption = usePrevious( caption );
+	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const { allowResize = true } = context;
 	const { getBlock } = useSelect( blockEditorStore );
 
@@ -145,7 +156,7 @@ export default function Image( {
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const isWideAligned = includes( [ 'wide', 'full' ], align );
+	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const [
 		{ loadedNaturalWidth, loadedNaturalHeight },
 		setLoadedNaturalSize,
@@ -180,15 +191,23 @@ export default function Image( {
 			.catch( () => {} );
 	}, [ id, url, isSelected, externalBlob ] );
 
-	// Focus the caption after inserting an image from the placeholder. This is
-	// done to preserve the behaviour of focussing the first tabbable element
-	// when a block is mounted. Previously, the image block would remount when
-	// the placeholder is removed. Maybe this behaviour could be removed.
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
 	useEffect( () => {
-		if ( url && ! prevUrl && isSelected ) {
-			captionRef.current.focus();
+		if ( caption && ! prevCaption ) {
+			setShowCaption( true );
 		}
-	}, [ url, prevUrl ] );
+	}, [ caption, prevCaption ] );
+
+	// Focus the caption when we click to add one.
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
 
 	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
@@ -297,8 +316,11 @@ export default function Image( {
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
+			if ( ! caption ) {
+				setShowCaption( false );
+			}
 		}
-	}, [ isSelected ] );
+	}, [ isSelected, caption ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
 	const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage;
@@ -319,6 +341,23 @@ export default function Image( {
 						onChange={ updateAlignment }
 					/>
 				) }
+				{ ! isContentLocked && (
+					<ToolbarButton
+						onClick={ () => {
+							setShowCaption( ! showCaption );
+							if ( showCaption && caption ) {
+								setAttributes( { caption: undefined } );
+							}
+						} }
+						icon={ captionIcon }
+						isPressed={ showCaption }
+						label={
+							showCaption
+								? __( 'Remove caption' )
+								: __( 'Add caption' )
+						}
+					/>
+				) }
 				{ ! multiImageSelection && ! isEditingImage && (
 					<ImageURLInputUI
 						url={ href || '' }
@@ -591,25 +630,28 @@ export default function Image( {
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
 			{ img }
-			{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-				<RichText
-					className={ __experimentalGetElementClassName( 'caption' ) }
-					ref={ captionRef }
-					tagName="figcaption"
-					aria-label={ __( 'Image caption text' ) }
-					placeholder={ __( 'Add caption' ) }
-					value={ caption }
-					onChange={ ( value ) =>
-						setAttributes( { caption: value } )
-					}
-					inlineToolbar
-					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter(
-							createBlock( getDefaultBlockName() )
-						)
-					}
-				/>
-			) }
+			{ showCaption &&
+				( ! RichText.isEmpty( caption ) || isSelected ) && (
+					<RichText
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+						ref={ captionRef }
+						tagName="figcaption"
+						aria-label={ __( 'Image caption text' ) }
+						placeholder={ __( 'Add caption' ) }
+						value={ caption }
+						onChange={ ( value ) =>
+							setAttributes( { caption: value } )
+						}
+						inlineToolbar
+						__unstableOnSplitAtEnd={ () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+						}
+					/>
+				) }
 		</ImageEditingProvider>
 	);
 }

package/src/image/transforms.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { every } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -157,8 +152,7 @@ const transforms = {
 						}
 					);
 				}
-				return every(
-					files,
+				return files.every(
 					( file ) => file.type.indexOf( 'image/' ) === 0
 				);
 			},

package/src/latest-posts/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, includes, pickBy } from 'lodash';
+import { get, pickBy } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -196,7 +196,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		} );
 		// We do nothing if the category is not selected
 		// from suggestions.
-		if ( includes( allCategories, null ) ) {
+		if ( allCategories.includes( null ) ) {
 			return false;
 		}
 		setAttributes( { categories: allCategories } );

package/src/list/test/edit.native.js

@@ -3,6 +3,7 @@
  */
 import {
 	changeTextOfRichText,
+	changeAndSelectTextOfRichText,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
@@ -18,6 +19,7 @@ import {
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
+import { BACKSPACE } from '@wordpress/keycodes';
 
 describe( 'List block', () => {
 	beforeAll( () => {
@@ -210,7 +212,7 @@ describe( 'List block', () => {
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 2</li>
-		<!-- /wp:list-item -->	
+		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 3</li>
 		<!-- /wp:list-item --></ul>
@@ -238,7 +240,7 @@ describe( 'List block', () => {
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 2</li>
-		<!-- /wp:list-item -->	
+		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 3</li>
 		<!-- /wp:list-item --></ul>
@@ -277,7 +279,7 @@ describe( 'List block', () => {
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 2</li>
-		<!-- /wp:list-item -->	
+		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>Item 3</li>
 		<!-- /wp:list-item --></ul>
@@ -311,4 +313,101 @@ describe( 'List block', () => {
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'merges with other lists', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li><!-- /wp:list-item --></ul>
+		<!-- /wp:list --><!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li><!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ );
+		fireEvent.press( listBlock );
+
+		// Select List Item block
+		const listItemBlock = within( listBlock ).getByA11yLabel(
+			/List item Block\. Row 1/
+		);
+		fireEvent.press( listItemBlock );
+
+		// With cursor positioned at the beginning of the first List Item, press
+		// backward delete
+		const listItemField =
+			within( listItemBlock ).getByA11yLabel( /Text input. .*Two.*/ );
+		changeAndSelectTextOfRichText( listItemField, 'Two' );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+			"<!-- wp:list -->
+			<ul><!-- wp:list-item -->
+			<li>One</li>
+			<!-- /wp:list-item -->
+
+			<!-- wp:list-item -->
+			<li>Two</li>
+			<!-- /wp:list-item --></ul>
+			<!-- /wp:list -->"
+		` );
+	} );
+
+	it( 'unwraps list items when attempting to merge with non-list block', async () => {
+		const initialHtml = `<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>One</li><!-- /wp:list-item --><!-- wp:list-item -->
+		<li>Two</li><!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ );
+		fireEvent.press( listBlock );
+
+		// Select List Item block
+		const listItemBlock = within( listBlock ).getByA11yLabel(
+			/List item Block\. Row 1/
+		);
+		fireEvent.press( listItemBlock );
+
+		// With cursor positioned at the beginning of the first List Item, press
+		// backward delete
+		const listItemField =
+			within( listItemBlock ).getByA11yLabel( /Text input. .*One.*/ );
+		changeAndSelectTextOfRichText( listItemField, 'One' );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>One</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>Two</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
 } );

package/src/list/transforms.js

@@ -114,6 +114,17 @@ const transforms = {
 				);
 			},
 		} ) ),
+		{
+			type: 'block',
+			blocks: [ '*' ],
+			transform: ( _attributes, childBlocks ) => {
+				return getListContentFlat( childBlocks ).map( ( content ) =>
+					createBlock( 'core/paragraph', {
+						content,
+					} )
+				);
+			},
+		},
 	],
 };
 

package/src/list/utils.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, rawHandler } from '@wordpress/blocks';
 
 export function createListBlockFromDOMElement( listElement ) {
 	const listAttributes = {
@@ -70,15 +70,7 @@ export function migrateToListV2( attributes ) {
 		list.setAttribute( 'type', type );
 	}
 
-	const listBlock = createListBlockFromDOMElement( list );
+	const [ listBlock ] = rawHandler( { HTML: list.outerHTML } );
 
-	const { values: omittedValues, ...restAttributes } = attributes;
-
-	return [
-		{
-			...restAttributes,
-			...listBlock.attributes,
-		},
-		listBlock.innerBlocks,
-	];
+	return [ listBlock.attributes, listBlock.innerBlocks ];
 }

package/src/list-item/block.json

@@ -21,6 +21,19 @@
 	},
 	"supports": {
 		"className": false,
-		"__experimentalSelector": "li"
+		"__experimentalSelector": "li",
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	}
 }

package/src/list-item/edit.js

@@ -60,6 +60,7 @@ export default function ListItemEdit( {
 	setAttributes,
 	onReplace,
 	clientId,
+	mergeBlocks,
 } ) {
 	const { placeholder, content } = attributes;
 	const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
@@ -70,7 +71,7 @@ export default function ListItemEdit( {
 	const useEnterRef = useEnter( { content, clientId } );
 	const useSpaceRef = useSpace( clientId );
 	const onSplit = useSplit( clientId );
-	const onMerge = useMerge( clientId );
+	const onMerge = useMerge( clientId, mergeBlocks );
 	return (
 		<>
 			<li { ...innerBlocksProps }>

package/src/list-item/edit.native.js

@@ -35,6 +35,7 @@ export default function ListItemEdit( {
 	onReplace,
 	clientId,
 	style,
+	mergeBlocks,
 } ) {
 	const [ contentWidth, setContentWidth ] = useState();
 	const { placeholder, content } = attributes;
@@ -119,7 +120,7 @@ export default function ListItemEdit( {
 	const preventDefault = useRef( false );
 	const { onEnter } = useEnter( { content, clientId }, preventDefault );
 	const onSplit = useSplit( clientId );
-	const onMerge = useMerge( clientId );
+	const onMerge = useMerge( clientId, mergeBlocks );
 	const onSplitList = useCallback(
 		( value ) => {
 			if ( ! preventDefault.current ) {

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

@@ -3,7 +3,6 @@
  */
 import { useRegistry, useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { getDefaultBlockName, switchToBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -12,7 +11,7 @@ import useOutdentListItem from './use-outdent-list-item';
 
 import { name as listItemName } from '../block.json';
 
-export default function useMerge( clientId ) {
+export default function useMerge( clientId, onMerge ) {
 	const registry = useRegistry();
 	const {
 		getPreviousBlockClientId,
@@ -20,9 +19,8 @@ export default function useMerge( clientId ) {
 		getBlockOrder,
 		getBlockRootClientId,
 		getBlockName,
-		getBlock,
 	} = useSelect( blockEditorStore );
-	const { mergeBlocks, moveBlocksToPosition, replaceBlock, selectBlock } =
+	const { mergeBlocks, moveBlocksToPosition } =
 		useDispatch( blockEditorStore );
 	const [ , outdentListItem ] = useOutdentListItem( clientId );
 
@@ -79,29 +77,12 @@ export default function useMerge( clientId ) {
 		return getBlockOrder( order[ 0 ] )[ 0 ];
 	}
 
-	function switchToDefaultBlockType( forward ) {
-		const rootClientId = getBlockRootClientId( clientId );
-		const replacement = switchToBlockType(
-			getBlock( rootClientId ),
-			getDefaultBlockName()
-		);
-		const indexToSelect = forward ? replacement.length - 1 : 0;
-		const initialPosition = forward ? -1 : 0;
-		registry.batch( () => {
-			replaceBlock( rootClientId, replacement );
-			selectBlock(
-				replacement[ indexToSelect ].clientId,
-				initialPosition
-			);
-		} );
-	}
-
 	return ( forward ) => {
 		if ( forward ) {
 			const nextBlockClientId = getNextId( clientId );
 
 			if ( ! nextBlockClientId ) {
-				switchToDefaultBlockType( forward );
+				onMerge( forward );
 				return;
 			}
 
@@ -134,7 +115,7 @@ export default function useMerge( clientId ) {
 					mergeBlocks( trailingId, clientId );
 				} );
 			} else {
-				switchToDefaultBlockType( forward );
+				onMerge( forward );
 			}
 		}
 	};

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,12 +15,16 @@ export default function useOutdentListItem( clientId ) {
 	const registry = useRegistry();
 	const { canOutdent } = useSelect(
 		( innerSelect ) => {
-			const { getBlockRootClientId } = innerSelect( blockEditorStore );
+			const { getBlockRootClientId, getBlockName } =
+				innerSelect( blockEditorStore );
 			const grandParentId = getBlockRootClientId(
 				getBlockRootClientId( clientId )
 			);
+			const grandParentName = getBlockName( grandParentId );
+			const isListItem = grandParentName === listItemName;
+
 			return {
-				canOutdent: !! grandParentId,
+				canOutdent: isListItem,
 			};
 		},
 		[ clientId ]
@@ -57,7 +56,9 @@ export default function useOutdentListItem( clientId ) {
 	return [
 		canOutdent,
 		useCallback( ( clientIds = getSelectedBlockClientIds() ) => {
-			clientIds = castArray( clientIds );
+			if ( ! Array.isArray( clientIds ) ) {
+				clientIds = [ clientIds ];
+			}
 
 			if ( ! clientIds.length ) return;
 

package/src/navigation/block.json

@@ -67,6 +67,10 @@
 		"maxNestingLevel": {
 			"type": "number",
 			"default": 5
+		},
+		"templateLock": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "all", "insert", "contentOnly", false ]
 		}
 	},
 	"providesContext": {
@@ -88,7 +92,6 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"anchor": true,
 		"html": false,
 		"inserter": true,
 		"typography": {