Support colspan attribute in table HTML, including when pasting (W…

…ordPress#45981)

Co-authored-by: Daniel Bachhuber <[email protected]>

packages/block-library/src/table/block.json

@@ -47,6 +47,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
 						}
 					}
 				}
@@ -82,6 +87,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
 						}
 					}
 				}
@@ -117,6 +127,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
 						}
 					}
 				}

packages/block-library/src/table/edit.js

@@ -404,7 +404,7 @@ function TableEdit( {
 				<tr key={ rowIndex }>
 					{ cells.map(
 						(
-							{ content, tag: CellTag, scope, align },
+							{ content, tag: CellTag, scope, align, colspan },
 							columnIndex
 						) => (
 							<RichText
@@ -417,6 +417,7 @@ function TableEdit( {
 									'wp-block-table__cell-content'
 								) }
 								scope={ CellTag === 'th' ? scope : undefined }
+								colSpan={ colspan }
 								value={ content }
 								onChange={ onChange }
 								unstableOnFocus={ () => {

packages/block-library/src/table/save.js

@@ -43,7 +43,10 @@ export default function save( { attributes } ) {
 				{ rows.map( ( { cells }, rowIndex ) => (
 					<tr key={ rowIndex }>
 						{ cells.map(
-							( { content, tag, scope, align }, cellIndex ) => {
+							(
+								{ content, tag, scope, align, colspan },
+								cellIndex
+							) => {
 								const cellClasses = classnames( {
 									[ `has-text-align-${ align }` ]: align,
 								} );
@@ -62,6 +65,7 @@ export default function save( { attributes } ) {
 										scope={
 											tag === 'th' ? scope : undefined
 										}
+										colSpan={ colspan }
 									/>
 								);
 							}

packages/block-library/src/table/transforms.js

@@ -11,18 +11,19 @@ import { getListContentSchema } from '../list/transforms';
 
 const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
 	// lists are allowed on paste but will be transformed to simple content
-	// by transformContent below. See test/transform.js
+	// by transformContent below. 
 	tr: {
 		allowEmpty: true,
 		children: {
 			th: {
 				allowEmpty: true,
 				children: getListContentSchema( { phrasingContentSchema } ),
-				attributes: [ 'scope' ],
+				attributes: [ 'scope', 'colspan' ],
 			},
 			td: {
 				allowEmpty: true,
 				children: getListContentSchema( { phrasingContentSchema } ),
+				attributes: [ 'colspan' ],
 			},
 		},
 	},

packages/blocks/src/api/raw-handling/test/paste-handler.js

@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import { pasteHandler } from '@wordpress/blocks';
+/**
+ * Internal dependencies
+ */
+import { init as initAndRegisterTableBlock } from '../../../../../block-library/src/table';
+
+const tableWithHeaderFooterAndBodyUsingColspan = `
+<table>
+	<thead>
+    <tr>
+        <th colspan="2">Colspan 2</th>
+        <th>Header Cell</th>
+    </tr>
+    </thead>
+    <tfoot>
+    <tr>
+        <th colspan="2">Footer Cell</th>
+        <th>Footer Cell</th>
+    </tr>
+    </tfoot>
+    <tbody>
+    <tr>
+        <td colspan="2">Colspan 2</td>
+        <td>Cell Data</td>
+    </tr>
+    </tbody>
+</table>`;
+
+const googleDocsTableWithColspan = `
+<meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-b0f68bdd-7fff-a054-94d1-43c2fdedca2a">
+    <div dir="ltr" style="margin-left:0pt;" align="left">
+        <table style="border:none;border-collapse:collapse;">
+            <colgroup>
+                <col width="185"/>
+                <col width="439"/>
+            </colgroup>
+            <tbody>
+            <tr style="height:21pt">
+                <td colspan="2"
+                    style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+                    <p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+                            style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Test colspan</span>
+                    </p></td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+    <br/><br/></b>
+`;
+
+describe( 'pasteHandler', () => {
+	beforeAll( () => {
+		initAndRegisterTableBlock();
+	} );
+
+	it( 'can handle a table with thead, tbody and tfoot using colspan', () => {
+		const [ result ] = pasteHandler( {
+			HTML: tableWithHeaderFooterAndBodyUsingColspan,
+			tagName: 'p',
+			preserveWhiteSpace: false,
+		} );
+
+		expect( console ).toHaveLogged();
+
+		expect( result.attributes ).toEqual( {
+			hasFixedLayout: false,
+			caption: '',
+			head: [
+				{
+					cells: [
+						{ content: 'Colspan 2', tag: 'th', colspan: '2' },
+						{ content: 'Header Cell', tag: 'th' },
+					],
+				},
+			],
+			body: [
+				{
+					cells: [
+						{ content: 'Colspan 2', tag: 'td', colspan: '2' },
+						{ content: 'Cell Data', tag: 'td' },
+					],
+				},
+			],
+			foot: [
+				{
+					cells: [
+						{ content: 'Footer Cell', tag: 'th', colspan: '2' },
+						{ content: 'Footer Cell', tag: 'th' },
+					],
+				},
+			],
+		} );
+		expect( result.name ).toEqual( 'core/table' );
+		expect( result.isValid ).toBeTruthy();
+	} );
+
+	it( 'can handle a google docs table with colspan', () => {
+		const [ result ] = pasteHandler( {
+			HTML: googleDocsTableWithColspan,
+			tagName: 'p',
+			preserveWhiteSpace: false,
+		} );
+
+		expect( console ).toHaveLogged();
+
+		expect( result.attributes ).toEqual( {
+			body: [
+				{
+					cells: [
+						{
+							align: undefined,
+							colspan: '2',
+							content: 'Test colspan',
+							scope: undefined,
+							tag: 'td',
+						},
+					],
+				},
+			],
+			caption: '',
+			foot: [],
+			hasFixedLayout: false,
+			head: [],
+		} );
+		expect( result.name ).toEqual( 'core/table' );
+		expect( result.isValid ).toBeTruthy();
+	} );
+} );