List block v2: Add start, ordered and reversed list block attributes (#…

…39605)

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

@@ -1,18 +1,77 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import {
+	BlockControls,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import { ToolbarButton } from '@wordpress/components';
+import { isRTL, __ } from '@wordpress/i18n';
+import {
+	formatListBullets,
+	formatListBulletsRTL,
+	formatListNumbered,
+	formatListNumberedRTL,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import OrderedListSettings from '../ordered-list-settings';
 
 const TEMPLATE = [ [ 'core/list-item' ] ];
 
-function Edit() {
+function Edit( { attributes, setAttributes } ) {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list-item' ],
 		template: TEMPLATE,
 	} );
+	const { ordered, reversed, start } = attributes;
+	const TagName = ordered ? 'ol' : 'ul';
+
+	const controls = (
+		<BlockControls group="block">
+			<ToolbarButton
+				icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
+				title={ __( 'Unordered' ) }
+				describedBy={ __( 'Convert to unordered list' ) }
+				isActive={ ordered === false }
+				onClick={ () => {
+					setAttributes( { ordered: false } );
+				} }
+			/>
+			<ToolbarButton
+				icon={ isRTL() ? formatListNumberedRTL : formatListNumbered }
+				title={ __( 'Ordered' ) }
+				describedBy={ __( 'Convert to ordered list' ) }
+				isActive={ ordered === true }
+				onClick={ () => {
+					setAttributes( { ordered: true } );
+				} }
+			/>
+		</BlockControls>
+	);
 
-	return <ul { ...innerBlocksProps } />;
+	return (
+		<>
+			<TagName
+				reversed={ reversed }
+				start={ start }
+				{ ...innerBlocksProps }
+			/>
+			{ controls }
+			{ ordered && (
+				<OrderedListSettings
+					setAttributes={ setAttributes }
+					ordered={ ordered }
+					reversed={ reversed }
+					start={ start }
+				/>
+			) }
+		</>
+	);
 }
 
 export default Edit;

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

@@ -3,10 +3,16 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default function save() {
+export default function save( { attributes } ) {
+	const { ordered, reversed, start } = attributes;
+	const TagName = ordered ? 'ol' : 'ul';
 	return (
-		<ul { ...useBlockProps.save() }>
+		<TagName
+			reversed={ reversed }
+			start={ start }
+			{ ...useBlockProps.save() }
+		>
 			<InnerBlocks.Content />
-		</ul>
+		</TagName>
 	);
 }