Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support colspan attribute in table HTML, including when pasting #45981

Merged
merged 4 commits into from
Nov 30, 2022
Merged

Support colspan attribute in table HTML, including when pasting #45981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
15455fb
Support colspan attribute on tables when pasting
mpkelly Nov 22, 2022
3ce585d
Support saving colspan
mpkelly Nov 29, 2022
f4d1e86
Merge branch 'trunk' into add/colspan-support-to-tables
danielbachhuber Nov 30, 2022
041661d
Remove unnecessary code comments
danielbachhuber Nov 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions packages/block-library/src/table/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,11 @@
"type": "string",
"source": "attribute",
"attribute": "data-align"
},
"colspan": {
"type": "string",
"source": "attribute",
"attribute": "colspan"
}
}
}
Expand Down Expand Up @@ -82,6 +87,11 @@
"type": "string",
"source": "attribute",
"attribute": "data-align"
},
"colspan": {
"type": "string",
"source": "attribute",
"attribute": "colspan"
}
}
}
Expand Down Expand Up @@ -117,6 +127,11 @@
"type": "string",
"source": "attribute",
"attribute": "data-align"
},
"colspan": {
"type": "string",
"source": "attribute",
"attribute": "colspan"
}
}
}
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/table/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,7 +404,7 @@ function TableEdit( {
<tr key={ rowIndex }>
{ cells.map(
(
{ content, tag: CellTag, scope, align },
{ content, tag: CellTag, scope, align, colspan },
columnIndex
) => (
<RichText
Expand All @@ -417,6 +417,7 @@ function TableEdit( {
'wp-block-table__cell-content'
) }
scope={ CellTag === 'th' ? scope : undefined }
colSpan={ colspan }
value={ content }
onChange={ onChange }
unstableOnFocus={ () => {
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/table/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
} );
Expand All @@ -62,6 +65,7 @@ export default function save( { attributes } ) {
scope={
tag === 'th' ? scope : undefined
}
colSpan={ colspan }
/>
);
}
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/table/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@ const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
th: {
allowEmpty: true,
children: phrasingContentSchema,
attributes: [ 'scope' ],
attributes: [ 'scope', 'colspan' ],
},
td: {
allowEmpty: true,
children: phrasingContentSchema,
attributes: [ 'colspan' ],
},
},
},
Expand Down
131 changes: 131 additions & 0 deletions packages/blocks/src/api/raw-handling/test/paste-handler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor: this maybe makes more sense to add to the integration tests, which has all blocks loaded.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ellatrix Would it make sense to keep this existing test and add it to integration tests?

`;

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();
} );
} );