List Block: Fix numbering style to be applied correctly (#53301)

* List Block: Fix numbering style to be applied correctly * Use inline style instead of type attributes * Add deprecation * Try to fix unit test * Try to fix unit test * Try to fix raw-handling test * Fix fixture files * refactoring
WordPress · Sep 14, 2023 · 3e680d7 · 3e680d7 · github-actions · Sep 14, 2023
1 parent 40c9f17
commit 3e680d7
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 27 deletions.
diff --git a/packages/block-library/src/list/deprecated.js b/packages/block-library/src/list/deprecated.js
@@ -1,13 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
-import { migrateToListV2 } from './utils';
+import { migrateToListV2, migrateTypeToInlineStyle } from './utils';
 
 const v0 = {
 	attributes: {
@@ -138,6 +138,87 @@ const v1 = {
 	migrate: migrateToListV2,
 };
 
+// In #53301 changed to use the inline style instead of type attribute.
+const v2 = {
+	attributes: {
+		ordered: {
+			type: 'boolean',
+			default: false,
+			__experimentalRole: 'content',
+		},
+		values: {
+			type: 'string',
+			source: 'html',
+			selector: 'ol,ul',
+			multiline: 'li',
+			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
+			default: '',
+			__experimentalRole: 'content',
+		},
+		type: {
+			type: 'string',
+		},
+		start: {
+			type: 'number',
+		},
+		reversed: {
+			type: 'boolean',
+		},
+		placeholder: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		className: false,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		__unstablePasteTextInline: true,
+		__experimentalSelector: 'ol,ul',
+		__experimentalSlashInserter: true,
+	},
+	isEligible( { type } ) {
+		return !! type;
+	},
+	save( { attributes } ) {
+		const { ordered, type, reversed, start } = attributes;
+		const TagName = ordered ? 'ol' : 'ul';
+		return (
+			<TagName { ...useBlockProps.save( { type, reversed, start } ) }>
+				<InnerBlocks.Content />
+			</TagName>
+		);
+	},
+	migrate: migrateTypeToInlineStyle,
+};
+
 /**
  * New deprecations need to be placed first
  * for them to have higher priority.
@@ -146,4 +227,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1, v0 ];
+export default [ v2, v1, v0 ];
diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
@@ -124,9 +124,14 @@ function IndentUI( { clientId } ) {
 }
 
 export default function Edit( { attributes, setAttributes, clientId, style } ) {
+	const { ordered, type, reversed, start } = attributes;
 	const blockProps = useBlockProps( {
-		...( Platform.isNative && { style } ),
+		style: {
+			...( Platform.isNative && style ),
+			listStyleType: ordered && type !== 'decimal' ? type : undefined,
+		},
 	} );
+
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list-item' ],
 		template: TEMPLATE,
@@ -140,7 +145,6 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 		__experimentalCaptureToolbars: true,
 	} );
 	useMigrateOnLoad( attributes, clientId );
-	const { ordered, type, reversed, start } = attributes;
 
 	const controls = (
 		<BlockControls group="block">
@@ -172,7 +176,6 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 				ordered={ ordered }
 				reversed={ reversed }
 				start={ start }
-				type={ type }
 				{ ...innerBlocksProps }
 			/>
 			{ controls }

diff --git a/packages/block-library/src/list/ordered-list-settings.js b/packages/block-library/src/list/ordered-list-settings.js
@@ -33,11 +33,26 @@ const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 				__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' ) },
+					{
+						label: __( 'Numbers' ),
+						value: 'decimal',
+					},
+					{
+						label: __( 'Uppercase letters' ),
+						value: 'upper-alpha',
+					},
+					{
+						label: __( 'Lowercase letters' ),
+						value: 'lower-alpha',
+					},
+					{
+						label: __( 'Uppercase Roman numerals' ),
+						value: 'upper-roman',
+					},
+					{
+						label: __( 'Lowercase Roman numerals' ),
+						value: 'lower-roman',
+					},
 				] }
 				value={ type }
 				onChange={ ( newValue ) => setAttributes( { type: newValue } ) }

diff --git a/packages/block-library/src/list/save.js b/packages/block-library/src/list/save.js
@@ -7,7 +7,16 @@ export default function save( { attributes } ) {
 	const { ordered, type, reversed, start } = attributes;
 	const TagName = ordered ? 'ol' : 'ul';
 	return (
-		<TagName { ...useBlockProps.save( { type, reversed, start } ) }>
+		<TagName
+			{ ...useBlockProps.save( {
+				reversed,
+				start,
+				style: {
+					listStyleType:
+						ordered && type !== 'decimal' ? type : undefined,
+				},
+			} ) }
+		>
 			<InnerBlocks.Content />
 		</TagName>
 	);

diff --git a/packages/block-library/src/list/utils.js b/packages/block-library/src/list/utils.js
@@ -3,15 +3,23 @@
  */
 import { createBlock, rawHandler } from '@wordpress/blocks';
 
+const LIST_STYLES = {
+	A: 'upper-alpha',
+	a: 'lower-alpha',
+	I: 'upper-roman',
+	i: 'lower-roman',
+};
+
 export function createListBlockFromDOMElement( listElement ) {
+	const type = listElement.getAttribute( 'type' );
 	const listAttributes = {
 		ordered: 'OL' === listElement.tagName,
 		anchor: listElement.id === '' ? undefined : listElement.id,
 		start: listElement.getAttribute( 'start' )
 			? parseInt( listElement.getAttribute( 'start' ), 10 )
 			: undefined,
 		reversed: listElement.hasAttribute( 'reversed' ) ? true : undefined,
-		type: listElement.getAttribute( 'type' ) ?? undefined,
+		type: type && LIST_STYLES[ type ] ? LIST_STYLES[ type ] : undefined,
 	};
 
 	const innerBlocks = Array.from( listElement.children ).map(
@@ -78,3 +86,16 @@ export function migrateToListV2( attributes ) {
 		listBlock.innerBlocks,
 	];
 }
+
+export function migrateTypeToInlineStyle( attributes ) {
+	const { type } = attributes;
+
+	if ( type && LIST_STYLES[ type ] ) {
+		return {
+			...attributes,
+			type: LIST_STYLES[ type ],
+		};
+	}
+
+	return attributes;
+}
diff --git a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
@@ -14,10 +14,10 @@ exports[`Blocks raw handling pasteHandler google-docs-table 1`] = `"<br><br><br>
 
 exports[`Blocks raw handling pasteHandler google-docs-table-with-colspan 1`] = `"<br><br>Test colspan<br><br>"`;
 
-exports[`Blocks raw handling pasteHandler google-docs-table-with-rowspan 1`] = `"<br><br>Test rowspan<br><br>"`;
-
 exports[`Blocks raw handling pasteHandler google-docs-table-with-comments 1`] = `"<br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III"`;
 
+exports[`Blocks raw handling pasteHandler google-docs-table-with-rowspan 1`] = `"<br><br>Test rowspan<br><br>"`;
+
 exports[`Blocks raw handling pasteHandler google-docs-with-comments 1`] = `"This is a <strong>title</strong><br><br>This is a <em>heading</em><br><br>Formatting test: <strong>bold</strong>, <em>italic</em>, <a href="https://w.org/">link</a>, <s>strikethrough</s>, <sup>superscript</sup>, <sub>subscript</sub>, <strong><em>nested</em></strong>.<br><br>A<br>Bulleted<br>Indented<br>List<br><br>One<br>Two<br>Three<br><br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br><br><br><br><br><br>An image:<br><br><img src="https://lh4.googleusercontent.com/ID" width="544" height="184"><br><br>"`;
 
 exports[`Blocks raw handling pasteHandler gutenberg 1`] = `"Test"`;
@@ -174,10 +174,10 @@ exports[`rawHandler should convert a caption shortcode with link 1`] = `
 `;
 
 exports[`rawHandler should convert a list with attributes 1`] = `
-"<!-- wp:list {"ordered":true,"type":"i","start":2,"reversed":true} -->
-<ol type="i" reversed start="2"><!-- wp:list-item -->
-<li>1<!-- wp:list {"ordered":true,"type":"i","start":2,"reversed":true} -->
-<ol type="i" reversed start="2"><!-- wp:list-item -->
+"<!-- wp:list {"ordered":true,"type":"lower-roman","start":2,"reversed":true} -->
+<ol reversed start="2" style="list-style-type:lower-roman"><!-- wp:list-item -->
+<li>1<!-- wp:list {"ordered":true,"type":"lower-roman","start":2,"reversed":true} -->
+<ol reversed start="2" style="list-style-type:lower-roman"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list --></li>

diff --git a/...ures/blocks/core__list__ol-with-type.html → ...res/blocks/core__list__deprecated-v2.html b/...ures/blocks/core__list__ol-with-type.html → ...res/blocks/core__list__deprecated-v2.html
diff --git a/...ures/blocks/core__list__ol-with-type.json → ...res/blocks/core__list__deprecated-v2.json b/...ures/blocks/core__list__ol-with-type.json → ...res/blocks/core__list__deprecated-v2.json
@@ -5,7 +5,7 @@
 		"attributes": {
 			"ordered": true,
 			"values": "",
-			"type": "A"
+			"type": "upper-alpha"
 		},
 		"innerBlocks": [
 			{

diff --git a/...ocks/core__list__ol-with-type.parsed.json → ...cks/core__list__deprecated-v2.parsed.json b/...ocks/core__list__ol-with-type.parsed.json → ...cks/core__list__deprecated-v2.parsed.json
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:list {"ordered":true,"type":"upper-alpha"} -->
+<ol style="list-style-type:upper-alpha"><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->
diff --git a/test/integration/fixtures/blocks/core__list__ol-with-type.serialized.html b/test/integration/fixtures/blocks/core__list__ol-with-type.serialized.html
diff --git a/test/integration/fixtures/documents/ms-word-out.html b/test/integration/fixtures/documents/ms-word-out.html
@@ -36,8 +36,8 @@ <h2 class="wp-block-heading">This is a heading level 2</h2>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
 
-<!-- wp:list {"ordered":true,"type":"1"} -->
-<ol type="1"><!-- wp:list-item -->
+<!-- wp:list {"ordered":true} -->
+<ol><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->