WIP: Use inner blocks for lists

WordPress · Mar 15, 2022 · 5a731f9 · 5a731f9
1 parent 03fd2b6
commit 5a731f9
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 157 deletions.
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
@@ -46,6 +46,7 @@ import * as image from './image';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
+import * as listItem from './list-item';
 import * as logInOut from './loginout';
 import * as mediaText from './media-text';
 import * as missing from './missing';
@@ -135,6 +136,7 @@ export const __experimentalGetCoreBlocks = () => [
 	heading,
 	gallery,
 	list,
+	listItem,
 	quote,
 
 	// Register all remaining core blocks.

diff --git a/packages/block-library/src/list-item/edit.js b/packages/block-library/src/list-item/edit.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export const ListItem = () => (
+	<li>
+		<InnerBlocks />
+	</li>
+);
diff --git a/packages/block-library/src/list-item/index.js b/packages/block-library/src/list-item/index.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { list as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { ListItem as edit } from './edit';
+import { save } from './save';
+
+export const name = 'core/list-item';
+
+export const settings = {
+	apiVersion: 2,
+	category: 'text',
+	description: 'Individual list item in a list',
+	edit,
+	icon,
+	name: 'core/list-item',
+	parent: [ 'core/list' ],
+	title: 'List Item',
+	save,
+};
diff --git a/packages/block-library/src/list-item/save.js b/packages/block-library/src/list-item/save.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export const save = () => (
+	<li>
+		<InnerBlocks.Content />
+	</li>
+);
diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
@@ -1,170 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { __, _x, isRTL } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
-import {
-	RichText,
-	BlockControls,
-	RichTextShortcut,
-	useBlockProps,
-} from '@wordpress/block-editor';
-import { ToolbarButton } from '@wordpress/components';
-import {
-	__unstableCanIndentListItems as canIndentListItems,
-	__unstableCanOutdentListItems as canOutdentListItems,
-	__unstableIndentListItems as indentListItems,
-	__unstableOutdentListItems as outdentListItems,
-	__unstableChangeListType as changeListType,
-	__unstableIsListRootSelected as isListRootSelected,
-	__unstableIsActiveListType as isActiveListType,
-} from '@wordpress/rich-text';
-import {
-	formatListBullets,
-	formatListBulletsRTL,
-	formatListNumbered,
-	formatListNumberedRTL,
-	formatIndent,
-	formatIndentRTL,
-	formatOutdent,
-	formatOutdentRTL,
-} from '@wordpress/icons';
+import { InnerBlocks } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { name } from './';
 import OrderedListSettings from './ordered-list-settings';
 
-export default function ListEdit( {
-	attributes,
-	setAttributes,
-	mergeBlocks,
-	onReplace,
-	style,
-} ) {
-	const { ordered, values, type, reversed, start, placeholder } = attributes;
-	const tagName = ordered ? 'ol' : 'ul';
-
-	const controls = ( { value, onChange, onFocus } ) => (
-		<>
-			<RichTextShortcut
-				type="primary"
-				character="["
-				onUse={ () => {
-					onChange( outdentListItems( value ) );
-				} }
-			/>
-			<RichTextShortcut
-				type="primary"
-				character="]"
-				onUse={ () => {
-					onChange( indentListItems( value, { type: tagName } ) );
-				} }
-			/>
-			<RichTextShortcut
-				type="primary"
-				character="m"
-				onUse={ () => {
-					onChange( indentListItems( value, { type: tagName } ) );
-				} }
-			/>
-			<RichTextShortcut
-				type="primaryShift"
-				character="m"
-				onUse={ () => {
-					onChange( outdentListItems( value ) );
-				} }
-			/>
-			<BlockControls group="block">
-				<ToolbarButton
-					icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
-					title={ __( 'Unordered' ) }
-					describedBy={ __( 'Convert to unordered list' ) }
-					isActive={ isActiveListType( value, 'ul', tagName ) }
-					onClick={ () => {
-						onChange( changeListType( value, { type: 'ul' } ) );
-						onFocus();
-
-						if ( isListRootSelected( value ) ) {
-							setAttributes( { ordered: false } );
-						}
-					} }
-				/>
-				<ToolbarButton
-					icon={
-						isRTL() ? formatListNumberedRTL : formatListNumbered
-					}
-					title={ __( 'Ordered' ) }
-					describedBy={ __( 'Convert to ordered list' ) }
-					isActive={ isActiveListType( value, 'ol', tagName ) }
-					onClick={ () => {
-						onChange( changeListType( value, { type: 'ol' } ) );
-						onFocus();
-
-						if ( isListRootSelected( value ) ) {
-							setAttributes( { ordered: true } );
-						}
-					} }
-				/>
-				<ToolbarButton
-					icon={ isRTL() ? formatOutdentRTL : formatOutdent }
-					title={ __( 'Outdent' ) }
-					describedBy={ __( 'Outdent list item' ) }
-					shortcut={ _x( 'Backspace', 'keyboard key' ) }
-					isDisabled={ ! canOutdentListItems( value ) }
-					onClick={ () => {
-						onChange( outdentListItems( value ) );
-						onFocus();
-					} }
-				/>
-				<ToolbarButton
-					icon={ isRTL() ? formatIndentRTL : formatIndent }
-					title={ __( 'Indent' ) }
-					describedBy={ __( 'Indent list item' ) }
-					shortcut={ _x( 'Space', 'keyboard key' ) }
-					isDisabled={ ! canIndentListItems( value ) }
-					onClick={ () => {
-						onChange( indentListItems( value, { type: tagName } ) );
-						onFocus();
-					} }
-				/>
-			</BlockControls>
-		</>
-	);
-
-	const blockProps = useBlockProps( {
-		style,
-	} );
+export default function ListEdit( { attributes, setAttributes } ) {
+	const { ordered, reversed, start, placeholder } = attributes;
 
 	return (
 		<>
-			<RichText
-				identifier="values"
-				multiline="li"
-				tagName={ tagName }
-				onChange={ ( nextValues ) =>
-					setAttributes( { values: nextValues } )
-				}
-				value={ values }
-				aria-label={ __( 'List text' ) }
-				placeholder={ placeholder || __( 'List' ) }
-				onMerge={ mergeBlocks }
-				onSplit={ ( value ) =>
-					createBlock( name, { ...attributes, values: value } )
-				}
-				__unstableOnSplitMiddle={ () =>
-					createBlock( 'core/paragraph' )
-				}
-				onReplace={ onReplace }
-				onRemove={ () => onReplace( [] ) }
-				start={ start }
-				reversed={ reversed }
-				type={ type }
-				{ ...blockProps }
-			>
-				{ controls }
-			</RichText>
+			<ul>
+				<InnerBlocks allowedBlocks={ [ 'core/list-item' ] } />
+			</ul>
 			{ ordered && (
 				<OrderedListSettings
 					setAttributes={ setAttributes }

diff --git a/packages/block-library/src/list/save.js b/packages/block-library/src/list/save.js
@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { ordered, values, type, reversed, start } = attributes;
 	const TagName = ordered ? 'ol' : 'ul';
 
 	return (
 		<TagName { ...useBlockProps.save( { type, reversed, start } ) }>
-			<RichText.Content value={ values } multiline="li" />
+			{ /*<RichText.Content value={ values } multiline="li" />*/ }
+			<InnerBlocks.Content />
 		</TagName>
 	);
 }