Paste: allow list attributes (#17144)

WordPress · Oct 28, 2019 · ef2ecc7 · ef2ecc7
1 parent 4f2e7f2
commit ef2ecc7
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 10 deletions.
diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
@@ -14,6 +14,9 @@
 			"__unstableMultilineWrapperTags": [ "ol", "ul" ],
 			"default": ""
 		},
+		"type": {
+			"type": "string"
+		},
 		"start": {
 			"type": "number"
 		},

diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
@@ -32,7 +32,7 @@ export default function ListEdit( {
 	onReplace,
 	className,
 } ) {
-	const { ordered, values, reversed, start } = attributes;
+	const { ordered, values, type, reversed, start } = attributes;
 	const tagName = ordered ? 'ol' : 'ul';
 
 	const controls = ( { value, onChange } ) => (
@@ -130,6 +130,7 @@ export default function ListEdit( {
 			onRemove={ () => onReplace( [] ) }
 			start={ start }
 			reversed={ reversed }
+			type={ type }
 		>
 			{ controls }
 		</RichText>

diff --git a/packages/block-library/src/list/save.js b/packages/block-library/src/list/save.js
@@ -4,13 +4,14 @@
 import { RichText } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { ordered, values, reversed, start } = attributes;
+	const { ordered, values, type, reversed, start } = attributes;
 	const tagName = ordered ? 'ol' : 'ul';
 
 	return (
 		<RichText.Content
 			tagName={ tagName }
 			value={ values }
+			type={ type }
 			reversed={ reversed }
 			start={ start }
 			multiline="li"

diff --git a/packages/block-library/src/list/transforms.js b/packages/block-library/src/list/transforms.js
@@ -18,7 +18,7 @@ import {
 const listContentSchema = {
 	...getPhrasingContentSchema(),
 	ul: {},
-	ol: { attributes: [ 'type' ] },
+	ol: { attributes: [ 'type', 'start', 'reversed' ] },
 };
 
 // Recursion is needed.
@@ -77,12 +77,35 @@ const transforms = {
 				ul: listContentSchema.ul,
 			},
 			transform( node ) {
-				return createBlock( 'core/list', {
-					...getBlockAttributes(
-						'core/list',
-						node.outerHTML
-					),
+				const attributes = {
 					ordered: node.nodeName === 'OL',
+				};
+
+				if ( attributes.ordered ) {
+					const type = node.getAttribute( 'type' );
+
+					if ( type ) {
+						attributes.type = type;
+					}
+
+					if ( node.getAttribute( 'reversed' ) !== null ) {
+						attributes.reversed = true;
+					}
+
+					const start = parseInt( node.getAttribute( 'start' ), 10 );
+
+					if (
+						! isNaN( start ) &&
+						// start=1 only makes sense if the list is reversed.
+						( start !== 1 || attributes.reversed )
+					) {
+						attributes.start = start;
+					}
+				}
+
+				return createBlock( 'core/list', {
+					...getBlockAttributes( 'core/list', node.outerHTML ),
+					...attributes,
 				} );
 			},
 		},

diff --git a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
@@ -72,3 +72,13 @@ exports[`rawHandler should convert a caption shortcode with link 1`] = `
 <figure class=\\"wp-block-image alignnone\\"><a href=\\"http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg\\"><img src=\\"http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg?w=604\\" alt=\\"Bell on Wharf\\" class=\\"wp-image-754\\"/></a><figcaption>Bell on wharf in San Francisco</figcaption></figure>
 <!-- /wp:image -->"
 `;
+
+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\\"><li>1
+        <ol start=\\"2\\" reversed=\\"\\" type=\\"i\\">
+            <li>1</li>
+        </ol>
+    </li></ol>
+<!-- /wp:list -->"
+`;
diff --git a/test/integration/blocks-raw-handling.test.js b/test/integration/blocks-raw-handling.test.js
@@ -287,4 +287,9 @@ describe( 'rawHandler', () => {
 		const HTML = readFile( path.join( __dirname, 'fixtures/shortcode-caption-with-caption-link.html' ) );
 		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
 	} );
+
+	it( 'should convert a list with attributes', () => {
+		const HTML = readFile( path.join( __dirname, 'fixtures/list-with-attributes.html' ) );
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
 } );
diff --git a/test/integration/fixtures/list-with-attributes.html b/test/integration/fixtures/list-with-attributes.html
@@ -0,0 +1,7 @@
+<ol start="2" reversed type="i">
+    <li>1
+        <ol start="2" reversed type="i">
+            <li>1</li>
+        </ol>
+    </li>
+</ol>
diff --git a/test/integration/fixtures/ms-word-out.html b/test/integration/fixtures/ms-word-out.html
@@ -24,8 +24,8 @@ <h2>This is a heading level 2</h2>
 <ul><li>A</li><li>Bulleted<ul><li>Indented</li></ul></li><li>List</li></ul>
 <!-- /wp:list -->
 
-<!-- wp:list {"ordered":true} -->
-<ol><li>One</li><li>Two</li><li>Three</li></ol>
+<!-- wp:list {"ordered":true,"type":"1"} -->
+<ol type="1"><li>One</li><li>Two</li><li>Three</li></ol>
 <!-- /wp:list -->
 
 <!-- wp:table -->