@wordpress/block-library 7.8.0 → 7.11.0

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

@@ -16,6 +16,7 @@ import Clipboard from '@react-native-clipboard/clipboard';
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import {
+	requestMediaPicker,
 	setFeaturedImage,
 	sendMediaUpload,
 	subscribeMediaUpload,
@@ -49,6 +50,10 @@ jest.mock( 'lodash', () => {
 	return { ...actual, delay: ( cb ) => cb() };
 } );
 
+function mockGetMedia( media ) {
+	jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValue( media );
+}
+
 const apiFetchPromise = Promise.resolve( {} );
 
 const clipboardPromise = Promise.resolve( '' );
@@ -79,7 +84,7 @@ describe( 'Image Block', () => {
 			<a href="https://cldup.com/cXyG__fTLN.jpg">
 				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
 			</a>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -95,7 +100,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByText( 'None' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -105,7 +110,7 @@ describe( 'Image Block', () => {
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
 			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -121,7 +126,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByText( 'Media File' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -131,7 +136,7 @@ describe( 'Image Block', () => {
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
 			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -154,7 +159,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="http://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="http://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -164,7 +169,7 @@ describe( 'Image Block', () => {
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
 			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -192,7 +197,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByText( 'Media File' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -204,7 +209,7 @@ describe( 'Image Block', () => {
 			<a href="https://cldup.com/cXyG__fTLN.jpg">
 				<img src="https://cldup.com/cXyG__fTLN.jpg?w=683" alt="" class="wp-image-1"/>
 			</a>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -228,7 +233,7 @@ describe( 'Image Block', () => {
 			<a href="https://wordpress.org">
 				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
 			</a>
-		<figcaption>Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -246,7 +251,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( linkTargetButton );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org" target="_blank" rel="noreferrer noopener"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org" target="_blank" rel="noreferrer noopener"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -258,7 +263,7 @@ describe( 'Image Block', () => {
 			<a href="https://wordpress.org" target="_blank" rel="noreferrer noopener">
 				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
 			</a>
-			<figcaption>Mountain</figcaption>
+			<figcaption class="wp-element-caption">Mountain</figcaption>
 		</figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
@@ -277,7 +282,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( linkTargetButton );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -292,12 +297,6 @@ describe( 'Image Block', () => {
 			);
 		}
 
-		function mockGetMedia( media ) {
-			jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValueOnce(
-				media
-			);
-		}
-
 		it( 'does not prompt to replace featured image during a new image upload', () => {
 			// Arrange
 			const INITIAL_IMAGE = { id: 1, url: 'mock-url-1' };
@@ -406,4 +405,37 @@ describe( 'Image Block', () => {
 			);
 		} );
 	} );
+
+	it( 'sets src and alt attributes when selecting media', async () => {
+		const IMAGE = { id: 1, url: 'mock-image', alt: 'A beautiful mountain' };
+		requestMediaPicker.mockImplementationOnce(
+			( source, filter, multiple, callback ) => {
+				callback( {
+					id: IMAGE.id,
+					url: IMAGE.url,
+					alt: IMAGE.alt,
+				} );
+			}
+		);
+		mockGetMedia( {
+			id: IMAGE.id,
+			source_url: IMAGE.url,
+		} );
+
+		const initialHtml = `
+		<!-- wp:image -->
+		<figure class="wp-block-image">
+				<img alt="" />
+		</figure>
+		<!-- /wp:image -->`;
+		const screen = await initializeEditor( { initialHtml } );
+
+		fireEvent.press( screen.getByText( 'ADD IMAGE' ) );
+		fireEvent.press( screen.getByText( 'WordPress Media Library' ) );
+
+		const expectedHtml = `<!-- wp:image {"id":${ IMAGE.id },"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="${ IMAGE.url }" alt="${ IMAGE.alt }" class="wp-image-${ IMAGE.id }"/></figure>
+<!-- /wp:image -->`;
+		expect( getEditorHtml() ).toBe( expectedHtml );
+	} );
 } );

package/src/index.js

@@ -73,7 +73,6 @@ import * as postAuthor from './post-author';
 import * as postAuthorName from './post-author-name';
 import * as postAuthorBiography from './post-author-biography';
 import * as postComment from './post-comment';
-import * as postComments from './post-comments';
 import * as postCommentsCount from './post-comments-count';
 import * as postCommentsForm from './post-comments-form';
 import * as postCommentsLink from './post-comments-link';
@@ -228,7 +227,6 @@ const getAllBlocks = () => [
 	commentsPaginationNext,
 	commentsPaginationNumbers,
 	commentsPaginationPrevious,
-	postComments,
 	postCommentsForm,
 	tableOfContents,
 	homeLink,

package/src/index.native.js

@@ -179,14 +179,6 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 const iOSOnly = ( block ) =>
 	Platform.OS === 'ios' ? block : devOnly( block );
 
-// To be removed once Quote V2 is released on the web editor.
-function quoteCheck( quoteBlock, blocksFlags ) {
-	if ( blocksFlags?.__experimentalEnableQuoteBlockV2 ) {
-		quoteBlock.settings = quoteBlock?.settingsV2;
-	}
-	return quoteBlock;
-}
-
 // Hide the Classic block and SocialLink block
 addFilter(
 	'blocks.registerBlockType',
@@ -238,10 +230,9 @@ addFilter(
  *
  * registerCoreBlocks();
  * ```
- * @param {Object} [blocksFlags] Experimental flags
  *
  */
-export const registerCoreBlocks = ( blocksFlags ) => {
+export const registerCoreBlocks = () => {
 	// When adding new blocks to this list please also consider updating /src/block-support/supported-blocks.json in the Gutenberg-Mobile repo
 	[
 		paragraph,
@@ -254,7 +245,7 @@ export const registerCoreBlocks = ( blocksFlags ) => {
 		nextpage,
 		separator,
 		list,
-		quoteCheck( quote, blocksFlags ),
+		quote,
 		mediaText,
 		preformatted,
 		gallery,

package/src/latest-posts/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, includes, invoke, pickBy } from 'lodash';
+import { get, includes, pickBy } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -432,11 +432,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 			</BlockControls>
 			<ul { ...blockProps }>
 				{ displayPosts.map( ( post, i ) => {
-					const titleTrimmed = invoke( post, [
-						'title',
-						'rendered',
-						'trim',
-					] );
+					const titleTrimmed = post.title.rendered.trim();
 					let excerpt = post.excerpt.rendered;
 					const currentAuthor = authorList?.find(
 						( author ) => author.id === post.author

package/src/list/transforms.js

@@ -65,19 +65,6 @@ const transforms = {
 				} );
 			},
 		},
-		{
-			type: 'block',
-			blocks: [ 'core/quote', 'core/pullquote' ],
-			transform: ( { value, anchor } ) => {
-				return createBlock( 'core/list', {
-					values: toHTMLString( {
-						value: create( { html: value, multilineTag: 'p' } ),
-						multilineTag: 'li',
-					} ),
-					anchor,
-				} );
-			},
-		},
 		{
 			type: 'raw',
 			selector: 'ol,ul',
@@ -174,40 +161,6 @@ const transforms = {
 					} )
 				),
 		},
-		{
-			type: 'block',
-			blocks: [ 'core/quote' ],
-			transform: ( { values, anchor } ) => {
-				return createBlock( 'core/quote', {
-					value: toHTMLString( {
-						value: create( {
-							html: values,
-							multilineTag: 'li',
-							multilineWrapperTags: [ 'ul', 'ol' ],
-						} ),
-						multilineTag: 'p',
-					} ),
-					anchor,
-				} );
-			},
-		},
-		{
-			type: 'block',
-			blocks: [ 'core/pullquote' ],
-			transform: ( { values, anchor } ) => {
-				return createBlock( 'core/pullquote', {
-					value: toHTMLString( {
-						value: create( {
-							html: values,
-							multilineTag: 'li',
-							multilineWrapperTags: [ 'ul', 'ol' ],
-						} ),
-						multilineTag: 'p',
-					} ),
-					anchor,
-				} );
-			},
-		},
 		{
 			type: 'block',
 			blocks: [ 'core/table-of-contents' ],

package/src/list/v2/transforms.js

@@ -1,13 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { createBlock, switchToBlockType } from '@wordpress/blocks';
-import {
-	__UNSTABLE_LINE_SEPARATOR,
-	create,
-	split,
-	toHTMLString,
-} from '@wordpress/rich-text';
+/**
+ * External dependencies
+ */
+import { flatMap } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { create, split, toHTMLString } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -35,6 +38,15 @@ function getListContentSchema( { phrasingContentSchema } ) {
 	return listContentSchema;
 }
 
+function getListContentFlat( blocks ) {
+	return flatMap( blocks, ( { name, attributes, innerBlocks = [] } ) => {
+		if ( name === 'core/list-item' ) {
+			return [ attributes.content, ...getListContentFlat( innerBlocks ) ];
+		}
+		return getListContentFlat( innerBlocks );
+	} );
+}
+
 const transforms = {
 	from: [
 		{
@@ -66,26 +78,6 @@ const transforms = {
 				);
 			},
 		},
-		{
-			type: 'block',
-			blocks: [ 'core/quote', 'core/pullquote' ],
-			transform: ( { value, anchor } ) => {
-				return createBlock(
-					'core/list',
-					{
-						anchor,
-					},
-					split(
-						create( { html: value, multilineTag: 'p' } ),
-						__UNSTABLE_LINE_SEPARATOR
-					).map( ( result ) => {
-						return createBlock( 'core/list-item', {
-							content: toHTMLString( { value: result } ),
-						} );
-					} )
-				);
-			},
-		},
 		...[ '*', '-' ].map( ( prefix ) => ( {
 			type: 'prefix',
 			prefix,
@@ -123,25 +115,10 @@ const transforms = {
 			type: 'block',
 			blocks: [ block ],
 			transform: ( _attributes, childBlocks ) => {
-				return childBlocks
-					.filter( ( { name } ) => name === 'core/list-item' )
-					.map( ( { attributes } ) =>
-						createBlock( block, {
-							content: attributes.content,
-						} )
-					);
-			},
-		} ) ),
-		...[ 'core/quote', 'core/pullquote' ].map( ( block ) => ( {
-			type: 'block',
-			blocks: [ block ],
-			transform: ( attributes, innerBlocks ) => {
-				return switchToBlockType(
-					switchToBlockType(
-						createBlock( 'core/list', attributes, innerBlocks ),
-						'core/paragraph'
-					),
-					block
+				return getListContentFlat( childBlocks ).map( ( content ) =>
+					createBlock( block, {
+						content,
+					} )
 				);
 			},
 		} ) ),

package/src/list-item/edit.js

@@ -22,12 +22,13 @@ import { useMergeRefs } from '@wordpress/compose';
  */
 import {
 	useEnter,
-	useBackspace,
 	useSpace,
 	useIndentListItem,
 	useOutdentListItem,
 	useSplit,
+	useMerge,
 } from './hooks';
+import { convertToListItems } from './utils';
 
 function IndentUI( { clientId } ) {
 	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
@@ -40,14 +41,14 @@ function IndentUI( { clientId } ) {
 				title={ __( 'Outdent' ) }
 				describedBy={ __( 'Outdent list item' ) }
 				disabled={ ! canOutdent }
-				onClick={ outdentListItem }
+				onClick={ () => outdentListItem() }
 			/>
 			<ToolbarButton
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
 				title={ __( 'Indent' ) }
 				describedBy={ __( 'Indent list item' ) }
 				isDisabled={ ! canIndent }
-				onClick={ indentListItem }
+				onClick={ () => indentListItem() }
 			/>
 		</>
 	);
@@ -56,7 +57,6 @@ function IndentUI( { clientId } ) {
 export default function ListItemEdit( {
 	attributes,
 	setAttributes,
-	mergeBlocks,
 	onReplace,
 	clientId,
 } ) {
@@ -66,18 +66,14 @@ export default function ListItemEdit( {
 		allowedBlocks: [ 'core/list' ],
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
-	const useBackspaceRef = useBackspace( { clientId } );
 	const useSpaceRef = useSpace( clientId );
 	const onSplit = useSplit( clientId );
+	const onMerge = useMerge( clientId );
 	return (
 		<>
 			<li { ...innerBlocksProps }>
 				<RichText
-					ref={ useMergeRefs( [
-						useEnterRef,
-						useBackspaceRef,
-						useSpaceRef,
-					] ) }
+					ref={ useMergeRefs( [ useEnterRef, useSpaceRef ] ) }
 					identifier="content"
 					tagName="div"
 					onChange={ ( nextContent ) =>
@@ -87,8 +83,10 @@ export default function ListItemEdit( {
 					aria-label={ __( 'List text' ) }
 					placeholder={ placeholder || __( 'List' ) }
 					onSplit={ onSplit }
-					onMerge={ mergeBlocks }
-					onReplace={ onReplace }
+					onMerge={ onMerge }
+					onReplace={ ( blocks, ...args ) => {
+						onReplace( convertToListItems( blocks ), ...args );
+					} }
 				/>
 				{ innerBlocksProps.children }
 			</li>

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

@@ -1,6 +1,6 @@
 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';
-export { default as useBackspace } from './use-backspace';
 export { default as useSpace } from './use-space';
 export { default as useSplit } from './use-split';
+export { default as useMerge } from './use-merge';

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

@@ -18,7 +18,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import useOutdentListItem from './use-outdent-list-item';
 
 export default function useEnter( props ) {
-	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
 	const { getBlock, getBlockRootClientId, getBlockIndex } =
 		useSelect( blockEditorStore );
 	const propsRef = useRef( props );
@@ -42,8 +42,9 @@ export default function useEnter( props ) {
 					return;
 				}
 				// Here we are in top level list so we need to split.
-				const blockRootClientId = getBlockRootClientId( clientId );
-				const topParentListBlock = getBlock( blockRootClientId );
+				const topParentListBlock = getBlock(
+					getBlockRootClientId( clientId )
+				);
 				const blockIndex = getBlockIndex( clientId );
 				const head = cloneBlock( {
 					...topParentListBlock,
@@ -69,11 +70,13 @@ export default function useEnter( props ) {
 					  ]
 					: [];
 				replaceBlocks(
-					blockRootClientId,
+					topParentListBlock.clientId,
 					[ head, middle, ...tail ],
-					1,
-					0
+					1
 				);
+				// We manually change the selection here because we are replacing
+				// a different block than the selected one.
+				selectionChange( middle.clientId );
 			}
 
 			element.addEventListener( 'keydown', onKeyDown );

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

@@ -0,0 +1,141 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { getDefaultBlockName, switchToBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import useOutdentListItem from './use-outdent-list-item';
+
+import { name as listItemName } from '../block.json';
+
+export default function useMerge( clientId ) {
+	const registry = useRegistry();
+	const {
+		getPreviousBlockClientId,
+		getNextBlockClientId,
+		getBlockOrder,
+		getBlockRootClientId,
+		getBlockName,
+		getBlock,
+	} = useSelect( blockEditorStore );
+	const { mergeBlocks, moveBlocksToPosition, replaceBlock, selectBlock } =
+		useDispatch( blockEditorStore );
+	const [ , outdentListItem ] = useOutdentListItem( clientId );
+
+	function getTrailingId( id ) {
+		const order = getBlockOrder( id );
+
+		if ( ! order.length ) {
+			return id;
+		}
+
+		return getTrailingId( order[ order.length - 1 ] );
+	}
+
+	function getParentListItemId( id ) {
+		const listId = getBlockRootClientId( id );
+		const parentListItemId = getBlockRootClientId( listId );
+		if ( ! parentListItemId ) return;
+		if ( getBlockName( parentListItemId ) !== listItemName ) return;
+		return parentListItemId;
+	}
+
+	/**
+	 * Return the next list item with respect to the given list item. If none,
+	 * return the next list item of the parent list item if it exists.
+	 *
+	 * @param {string} id A list item client ID.
+	 * @return {string?} The client ID of the next list item.
+	 */
+	function _getNextId( id ) {
+		const next = getNextBlockClientId( id );
+		if ( next ) return next;
+		const parentListItemId = getParentListItemId( id );
+		if ( ! parentListItemId ) return;
+		return _getNextId( parentListItemId );
+	}
+
+	/**
+	 * Given a client ID, return the client ID of the list item on the next
+	 * line, regardless of indentation level.
+	 *
+	 * @param {string} id The client ID of the current list item.
+	 * @return {string?} The client ID of the next list item.
+	 */
+	function getNextId( id ) {
+		const order = getBlockOrder( id );
+
+		// If the list item does not have a nested list, return the next list
+		// item.
+		if ( ! order.length ) {
+			return _getNextId( id );
+		}
+
+		// Get the first list item in the nested list.
+		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 );
+				return;
+			}
+
+			if ( getParentListItemId( nextBlockClientId ) ) {
+				outdentListItem( nextBlockClientId );
+			} else {
+				registry.batch( () => {
+					moveBlocksToPosition(
+						getBlockOrder( nextBlockClientId ),
+						nextBlockClientId,
+						getPreviousBlockClientId( nextBlockClientId )
+					);
+					mergeBlocks( clientId, nextBlockClientId );
+				} );
+			}
+		} else {
+			// Merging is only done from the top level. For lowel levels, the
+			// list item is outdented instead.
+			const previousBlockClientId = getPreviousBlockClientId( clientId );
+			if ( getParentListItemId( clientId ) ) {
+				outdentListItem( clientId );
+			} else if ( previousBlockClientId ) {
+				const trailingId = getTrailingId( previousBlockClientId );
+				registry.batch( () => {
+					moveBlocksToPosition(
+						getBlockOrder( clientId ),
+						clientId,
+						previousBlockClientId
+					);
+					mergeBlocks( trailingId, clientId );
+				} );
+			} else {
+				switchToDefaultBlockType( forward );
+			}
+		}
+	};
+}