Table Block: Support rowspan attribute in table HTML, including when …

…pasting
WordPress · Dec 18, 2022 · a1d414d · a1d414d · github-actions · Dec 18, 2022
1 parent 4b4c4be
commit a1d414d
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 61 deletions.
diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json
@@ -52,6 +52,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "colspan"
+						},
+						"rowspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "rowspan"
 						}
 					}
 				}
@@ -92,6 +97,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "colspan"
+						},
+						"rowspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "rowspan"
 						}
 					}
 				}
@@ -132,6 +142,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "colspan"
+						},
+						"rowspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "rowspan"
 						}
 					}
 				}

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -57,6 +57,7 @@ import {
 	toggleSection,
 	isEmptyTableSection,
 } from './state';
+import { normalizeRowColSpan } from './utils';
 
 const ALIGNMENT_CONTROLS = [
 	{
@@ -404,7 +405,14 @@ function TableEdit( {
 				<tr key={ rowIndex }>
 					{ cells.map(
 						(
-							{ content, tag: CellTag, scope, align, colspan },
+							{
+								content,
+								tag: CellTag,
+								scope,
+								align,
+								colspan,
+								rowspan,
+							},
 							columnIndex
 						) => (
 							<RichText
@@ -417,7 +425,8 @@ function TableEdit( {
 									'wp-block-table__cell-content'
 								) }
 								scope={ CellTag === 'th' ? scope : undefined }
-								colSpan={ colspan }
+								colSpan={ normalizeRowColSpan( colspan ) }
+								rowSpan={ normalizeRowColSpan( rowspan ) }
 								value={ content }
 								onChange={ onChange }
 								unstableOnFocus={ () => {

diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js
@@ -14,6 +14,11 @@ import {
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { normalizeRowColSpan } from './utils';
+
 export default function save( { attributes } ) {
 	const { hasFixedLayout, head, body, foot, caption } = attributes;
 	const isEmpty = ! head.length && ! body.length && ! foot.length;
@@ -44,7 +49,14 @@ export default function save( { attributes } ) {
 					<tr key={ rowIndex }>
 						{ cells.map(
 							(
-								{ content, tag, scope, align, colspan },
+								{
+									content,
+									tag,
+									scope,
+									align,
+									colspan,
+									rowspan,
+								},
 								cellIndex
 							) => {
 								const cellClasses = classnames( {
@@ -65,7 +77,12 @@ export default function save( { attributes } ) {
 										scope={
 											tag === 'th' ? scope : undefined
 										}
-										colSpan={ colspan }
+										colSpan={ normalizeRowColSpan(
+											colspan
+										) }
+										rowSpan={ normalizeRowColSpan(
+											rowspan
+										) }
 									/>
 								);
 							}

diff --git a/packages/block-library/src/table/transforms.js b/packages/block-library/src/table/transforms.js
@@ -5,12 +5,12 @@ const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
 			th: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'scope', 'colspan' ],
+				attributes: [ 'scope', 'colspan', 'rowspan' ],
 			},
 			td: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'colspan' ],
+				attributes: [ 'colspan', 'rowspan' ],
 			},
 		},
 	},

diff --git a/packages/block-library/src/table/utils.js b/packages/block-library/src/table/utils.js
@@ -0,0 +1,10 @@
+/**
+ * Normalize the row or column span value.
+ *
+ * @param {number|undefined} rowColSpan normalized value.
+ */
+export function normalizeRowColSpan( rowColSpan ) {
+	return parseInt( rowColSpan, 10 ) && parseInt( rowColSpan, 10 ) !== 1
+		? parseInt( rowColSpan, 10 )
+		: undefined;
+}
diff --git a/packages/blocks/src/api/raw-handling/test/paste-handler.js b/packages/blocks/src/api/raw-handling/test/paste-handler.js
@@ -7,58 +7,52 @@ import { pasteHandler } from '@wordpress/blocks';
  */
 import { init as initAndRegisterTableBlock } from '../../../../../block-library/src/table';
 
-const tableWithHeaderFooterAndBodyUsingColspan = `
+const tableWithHeaderFooterAndBodyUsingColspanAndRowspan = `
 <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>
+		<tr>
+			<th>Header Cell</th>
+			<th>Header Cell</th>
+			<th rowspan="2">Rowspan 2</th>
+		</tr>
+		<tr>
+			<th colspan="2">Colspan 2</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>Body Cell</td>
+			<td>Body Cell</td>
+			<td rowspan="2">Rowspan 2</td>
+		</tr>
+		<tr>
+			<td colspan="2">Colspan 2</td>
+		</tr>
+	</tbody>
+	<tfoot>
+		<tr>
+			<td>Footer Cell</td>
+			<td>Footer Cell</td>
+			<td rowspan="2">Rowspan 2</td>
+		</tr>
+		<tr>
+			<td colspan="2">Colspan 2</td>
+		</tr>
+	</tfoot>
 </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>
+const googleDocsTableWithColspanAndRowspan = `
+<google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none"><colgroup><col width="100"/><col width="100"/><col width="100"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Body Cell&quot;}">Body Cell</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Body Cell&quot;}">Body Cell</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" rowspan="2" colspan="1" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Rowspan 2&quot;}"><span><div style="max-height:42px">Rowspan 2</div></span></td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" rowspan="1" colspan="2" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Colspan 2&quot;}">Colspan 2</td></tr></tbody></table>
 `;
 
 describe( 'pasteHandler', () => {
 	beforeAll( () => {
 		initAndRegisterTableBlock();
 	} );
 
-	it( 'can handle a table with thead, tbody and tfoot using colspan', () => {
+	it( 'can handle a table with thead, tbody and tfoot using colspan and rowspan', () => {
 		const [ result ] = pasteHandler( {
-			HTML: tableWithHeaderFooterAndBodyUsingColspan,
+			HTML: tableWithHeaderFooterAndBodyUsingColspanAndRowspan,
 			tagName: 'p',
 			preserveWhiteSpace: false,
 		} );
@@ -71,24 +65,84 @@ describe( 'pasteHandler', () => {
 			head: [
 				{
 					cells: [
-						{ content: 'Colspan 2', tag: 'th', colspan: '2' },
-						{ content: 'Header Cell', tag: 'th' },
+						{
+							content: 'Header Cell',
+							tag: 'th',
+						},
+						{
+							content: 'Header Cell',
+							tag: 'th',
+						},
+						{
+							content: 'Rowspan 2',
+							tag: 'th',
+							rowspan: '2',
+						},
+					],
+				},
+				{
+					cells: [
+						{
+							content: 'Colspan 2',
+							tag: 'th',
+							colspan: '2',
+						},
 					],
 				},
 			],
 			body: [
 				{
 					cells: [
-						{ content: 'Colspan 2', tag: 'td', colspan: '2' },
-						{ content: 'Cell Data', tag: 'td' },
+						{
+							content: 'Body Cell',
+							tag: 'td',
+						},
+						{
+							content: 'Body Cell',
+							tag: 'td',
+						},
+						{
+							content: 'Rowspan 2',
+							tag: 'td',
+							rowspan: '2',
+						},
+					],
+				},
+				{
+					cells: [
+						{
+							content: 'Colspan 2',
+							tag: 'td',
+							colspan: '2',
+						},
 					],
 				},
 			],
 			foot: [
 				{
 					cells: [
-						{ content: 'Footer Cell', tag: 'th', colspan: '2' },
-						{ content: 'Footer Cell', tag: 'th' },
+						{
+							content: 'Footer Cell',
+							tag: 'td',
+						},
+						{
+							content: 'Footer Cell',
+							tag: 'td',
+						},
+						{
+							content: 'Rowspan 2',
+							tag: 'td',
+							rowspan: '2',
+						},
+					],
+				},
+				{
+					cells: [
+						{
+							content: 'Colspan 2',
+							tag: 'td',
+							colspan: '2',
+						},
 					],
 				},
 			],
@@ -97,33 +151,50 @@ describe( 'pasteHandler', () => {
 		expect( result.isValid ).toBeTruthy();
 	} );
 
-	it( 'can handle a google docs table with colspan', () => {
+	it( 'can handle a google docs table with colspan and rowspan', () => {
 		const [ result ] = pasteHandler( {
-			HTML: googleDocsTableWithColspan,
+			HTML: googleDocsTableWithColspanAndRowspan,
 			tagName: 'p',
 			preserveWhiteSpace: false,
 		} );
 
 		expect( console ).toHaveLogged();
 
 		expect( result.attributes ).toEqual( {
+			hasFixedLayout: false,
+			caption: '',
 			body: [
 				{
 					cells: [
 						{
-							align: undefined,
-							colspan: '2',
-							content: 'Test colspan',
-							scope: undefined,
+							content: 'Body Cell',
+							tag: 'td',
+						},
+						{
+							content: 'Body Cell',
+							tag: 'td',
+						},
+						{
+							content: 'Rowspan 2',
 							tag: 'td',
+							colspan: '1',
+							rowspan: '2',
+						},
+					],
+				},
+				{
+					cells: [
+						{
+							content: 'Colspan 2',
+							tag: 'td',
+							colspan: '2',
+							rowspan: '1',
 						},
 					],
 				},
 			],
-			caption: '',
-			foot: [],
-			hasFixedLayout: false,
 			head: [],
+			foot: [],
 		} );
 		expect( result.name ).toEqual( 'core/table' );
 		expect( result.isValid ).toBeTruthy();