Implement the nested block behavior in list block v2 (#39487)

* Implement the nested block behavior in list block v2

* Remove nested list wrapper div

* add fixture

Co-authored-by: Ella van Durpe <ella@vandurpe.com>
Co-authored-by: ntsekouras <ntsekouras@outlook.com>

docs/reference-guides/core-blocks.md

@@ -323,6 +323,15 @@ Create a bulleted or numbered list. ([Source](https://github.com/WordPress/guten
 -	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~className~~
 -	**Attributes:** ordered, placeholder, reversed, start, type, values
 
+## List item
+
+Create a list item. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list-item))
+
+-	**Name:** core/list-item
+-	**Category:** text
+-	**Supports:** ~~className~~
+-	**Attributes:** content, placeholder
+
 ## Login/out
 
 Show login & logout links. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/loginout))

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.

packages/block-library/src/list-item/block.json

@@ -0,0 +1,26 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/list-item",
+	"title": "List item",
+	"category": "text",
+	"parent": [ "core/list" ],
+	"description": "Create a list item.",
+	"textdomain": "default",
+	"attributes": {
+		"placeholder": {
+			"type": "string"
+		},
+		"content": {
+			"type": "string",
+			"source": "html",
+    		"selector": "li",
+			"default": "",
+			"__experimentalRole": "content"
+		}
+	},
+	"supports": {
+		"className": false,
+		"__experimentalSelector": "li"
+	}
+}

packages/block-library/src/list-item/edit.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function ListItemEdit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/list' ],
+	} );
+
+	return (
+		<li { ...innerBlocksProps }>
+			<RichText
+				identifier="content"
+				tagName="div"
+				onChange={ ( nextContent ) =>
+					setAttributes( { content: nextContent } )
+				}
+				value={ attributes.content }
+				aria-label={ __( 'List text' ) }
+				placeholder={ attributes.placeholder || __( 'List' ) }
+			/>
+			{ innerBlocksProps.children }
+		</li>
+	);
+}

packages/block-library/src/list-item/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { list 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,
+};

packages/block-library/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>
+	);
+}

packages/block-library/src/list/v2/edit.js

@@ -1,5 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+const TEMPLATE = [ [ 'core/list-item' ] ];
+
 function Edit() {
-	return <div>List block v2</div>;
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/list-item' ],
+		template: TEMPLATE,
+	} );
+
+	return <ul { ...innerBlocksProps } />;
 }
 
 export default Edit;

packages/block-library/src/list/v2/save.js

@@ -1,5 +1,12 @@
-function Save() {
-	return <div>List block v2</div>;
-}
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default Save;
+export default function save() {
+	return (
+		<ul { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</ul>
+	);
+}

test/integration/fixtures/blocks/core__list-item.html

@@ -0,0 +1 @@
+<!-- wp:list-item --><li></li><!-- /wp:list-item -->

test/integration/fixtures/blocks/core__list-item.json

@@ -0,0 +1,10 @@
+[
+	{
+		"name": "core/list-item",
+		"isValid": true,
+		"attributes": {
+			"content": ""
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__list-item.parsed.json

@@ -0,0 +1,9 @@
+[
+	{
+		"blockName": "core/list-item",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "<li></li>",
+		"innerContent": [ "<li></li>" ]
+	}
+]

test/integration/fixtures/blocks/core__list-item.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item -->