Support colspan attribute in table HTML, including when pasting

[mpkelly]

What?

Support colspan attribute on th and td when pasting tables in the Editor.

Why?

It was based on this requirement in #45774

How?

Testing Instructions

1. Check out this branch and try pasting tables in from external sources. The colspan attribute should be supported on th and td elements within thead, tbody and tfoot elements.

Screenshots or screencast

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @mpkelly! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[danielbachhuber]

Thanks for the PR, @mpkelly !

The table seems to be formatted correctly on paste:

However, I don't see any colspan="" on the serialized data...

Then, when I refresh, the formatting is lost:

Maybe packages/block-library/src/table/save.js needs to handle colspan? It'd probably be good to have update the tests for this particular scenario, too.

[mpkelly]

Thanks for the review, @danielbachhuber.

I will try and get this working now. I would also like to look at the list transformation you mentioned too.

[mpkelly]

It's now saving for me, and I can view it in a preview. I tried to add tests - just some snapshot tests - but it was too difficult. These simple components implicitly reference all kinds of stuff, which is likely why we don't have tests for the same functions in other blocks.

[danielbachhuber]

Works great in my testing!

The <thead> and <tfoot> persist through save:

[ellatrix]

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

[danielbachhuber]

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

[ellatrix]

Looks good to me! Will be interesting to add some UI for this. 😄

[github-actions]

Congratulations on your first merged pull request, @mpkelly! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

[mpkelly]

Thanks for the reviews and merge! I will look at moving the test in another PR.