List block: Add numbering type selection (#51186)

Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>

packages/block-library/src/list/ordered-list-settings.js

@@ -3,9 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
-import { TextControl, PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	TextControl,
+	PanelBody,
+	ToggleControl,
+	SelectControl,
+} from '@wordpress/components';
 
-const OrderedListSettings = ( { setAttributes, reversed, start } ) => (
+const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 	<InspectorControls>
 		<PanelBody title={ __( 'Ordered list settings' ) }>
 			<TextControl
@@ -24,6 +29,19 @@ const OrderedListSettings = ( { setAttributes, reversed, start } ) => (
 				value={ Number.isInteger( start ) ? start.toString( 10 ) : '' }
 				step="1"
 			/>
+			<SelectControl
+				__nextHasNoMarginBottom
+				label={ __( 'Numbering style' ) }
+				options={ [
+					{ value: '1', label: __( 'Numbers' ) },
+					{ value: 'A', label: __( 'Uppercase letters' ) },
+					{ value: 'a', label: __( 'Lowercase letters' ) },
+					{ value: 'I', label: __( 'Uppercase Roman numerals' ) },
+					{ value: 'i', label: __( 'Lowercase Roman numerals' ) },
+				] }
+				value={ type }
+				onChange={ ( newValue ) => setAttributes( { type: newValue } ) }
+			/>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				label={ __( 'Reverse list numbering' ) }

test/integration/fixtures/blocks/core__list__ol-with-type.html

@@ -0,0 +1,7 @@
+<!-- wp:list {"ordered":true,"type":"A"} -->
+<ol type="A">
+	<!-- wp:list-item -->
+	<li>Item 1</li>
+	<!-- /wp:list-item -->
+</ol>
+<!-- /wp:list -->

test/integration/fixtures/blocks/core__list__ol-with-type.json

@@ -0,0 +1,21 @@
+[
+	{
+		"name": "core/list",
+		"isValid": true,
+		"attributes": {
+			"ordered": true,
+			"values": "",
+			"type": "A"
+		},
+		"innerBlocks": [
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Item 1"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]

test/integration/fixtures/blocks/core__list__ol-with-type.parsed.json

@@ -0,0 +1,20 @@
+[
+	{
+		"blockName": "core/list",
+		"attrs": {
+			"ordered": true,
+			"type": "A"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/list-item",
+				"attrs": {},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<li>Item 1</li>\n\t",
+				"innerContent": [ "\n\t<li>Item 1</li>\n\t" ]
+			}
+		],
+		"innerHTML": "\n<ol type=\"A\">\n\t\n</ol>\n",
+		"innerContent": [ "\n<ol type=\"A\">\n\t", null, "\n</ol>\n" ]
+	}
+]

test/integration/fixtures/blocks/core__list__ol-with-type.serialized.html

@@ -0,0 +1,5 @@
+<!-- wp:list {"ordered":true,"type":"A"} -->
+<ol type="A"><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->