Table Block: Support rowspan attribute in table HTML, including when pasting #46629
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
t-hamano
changed the title
|
Size Change: +262 B (0%) Total Size: 1.31 MB
ℹ️ View Unchanged
|
t-hamano
commented
Dec 18, 2022
Comment on lines
44
to
45
| 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="{"1":2,"2":"Body Cell"}">Body Cell</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{"1":2,"2":"Body Cell"}">Body Cell</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" rowspan="2" colspan="1" data-sheets-value="{"1":2,"2":"Rowspan 2"}"><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="{"1":2,"2":"Colspan 2"}">Colspan 2</td></tr></tbody></table> |
There was a problem hiding this comment.
I don't know how the string was generated before the change, but this PR uses the HTML shown in the browser console.
There was a problem hiding this comment.
Could we restore the original string and add yours as a second test case?
There was a problem hiding this comment.
I understand! But I'm concerned about the different structure of the original string and the string I added.
@mpkelly
How was the original string generated?
There was a problem hiding this comment.
@t-hamano, I ran the test with a response I knew wouldn't match and then copied the actual output from the Jest test run and used that, after reviewing that it looked as expected.
t-hamano
added
[Type] Enhancement
danielbachhuber
approved these changes
Dec 19, 2022
There was a problem hiding this comment.
Seems to work well with my test document
Google Doc
Paste Into Gutenberg
Left a couple minor questions.
Comment on lines
44
to
45
| 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="{"1":2,"2":"Body Cell"}">Body Cell</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{"1":2,"2":"Body Cell"}">Body Cell</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" rowspan="2" colspan="1" data-sheets-value="{"1":2,"2":"Rowspan 2"}"><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="{"1":2,"2":"Colspan 2"}">Colspan 2</td></tr></tbody></table> |
There was a problem hiding this comment.
Could we restore the original string and add yours as a second test case?
|
cc @mpkelly if you want to review too! |
|
It looks fine to me. One of my review comments on the There is an example of me adding an integration test in another PR here. Edit. I see you just did that. Thanks, @t-hamano! |
|
@t-hamano, I've not tested the PR, but it would be good to confirm if block deprecation is needed here. I see that PR updates the markup in the save method. |
|
@Mamaduka |
|
@t-hamano, it is a rule of thumb. If you change the save method of a block, you need deprecation. I can do more testing on Monday. Can you share snippets of a table for testing 🙇 |
|
@Mamaduka If there is anything I should be prepared to do, please let me know 🙏 Markup for table block with colspan: <!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th colspan="2">Colspan 2</th><th>Header Cell</th></tr></thead><tbody><tr><td colspan="2">Colspan 2</td><td>Cell Data</td></tr></tbody><tfoot><tr><th colspan="2">Colspan 2</th><th>Footer Cell</th></tr></tfoot></table></figure>
<!-- /wp:table -->Markup for table block with rowspan: <!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th rowspan="2">Rowspan 2</th><th>Header Cell</th></tr><tr><th>Header Cell</th></tr></thead><tbody><tr><td rowspan="2">Rowspan 2</td><td>Cell Data</td></tr><tr><td>Cell Data</td></tr></tbody><tfoot><tr><td rowspan="2">Rowspan 2</td><td>Footer Cell</td></tr><tr><td>Footer Cell</td></tr></tfoot></table></figure>
<!-- /wp:table --> |
ellatrix
reviewed
Dec 23, 2022
| @@ -65,7 +77,12 @@ export default function save( { attributes } ) { | |||
| scope={ | |||
| tag === 'th' ? scope : undefined | |||
| } | |||
| colSpan={ colspan } | |||
| colSpan={ normalizeRowColSpan( | |||
There was a problem hiding this comment.
Should we not make sure these are validated on save rather than normalising on display?
There was a problem hiding this comment.
Considering the possibility of clipboard data containing colspan and rowspan being pasted, I thought it should be normalized in both the edit component and the save method. What do you think?
There was a problem hiding this comment.
I think it's better to normalise on paste
There was a problem hiding this comment.
I added the transform when pasted, i.e. in the type: 'raw' case.
The process is a bit complicated, but it should work as expected.
ellatrix
reviewed
Dec 23, 2022
| const [ result ] = pasteHandler( { | ||
| HTML: googleDocsTableWithColspan, | ||
| HTML: tableWithHeaderFooterAndBodyUsingRowspan, | ||
| tagName: 'p', | ||
| preserveWhiteSpace: false, | ||
| } ); | ||
|
|
||
| expect( console ).toHaveLogged(); | ||
|
|
||
| expect( result.attributes ).toEqual( { |
There was a problem hiding this comment.
Minor: why not check the serialised block like elsewhere in this file?
There was a problem hiding this comment.
Do you mean that the following should be checked with strings containing comments?
<!-- wp:table -->
<figure class="wp-block-table"><table>...</table></figure>
<!-- /wp:table -->There was a problem hiding this comment.
Yes. You could use .expect().toMatchInlineSnapshot() I think.
There was a problem hiding this comment.
There appears to be no serialized block string in the result variable.
Do I need to generate a serialized block from the result.attirbutes?
|
Flaky tests detected in 590c987. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3856263225
|
|
Personally, the table block already supports This PR has been approved but based on this comment, I have made changes to perform the normalization of attributes on paste. Also, if the deprecation mentioned in this comment needs to be addressed, I would be happy to work on it 🙏 |
t-hamano
force-pushed
the
add/rowspan-support-to-table
branch
from
590c987 to
5da6ba5
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Part of #45774
Related to #45981
What?
This PR adds support for the rowspan attribute to the table block. At the same time, I have taken the rowspan attribute into account when pasting into the editor.
Why?
In #45981, colspan is now supported.
I think it makes sense to support rowspan as well, since the table may have both merged rows and columns.
How?
I have made the same changes as were made in #45981.
At the same time, the following two changes are being taken:
pasteHandlerto includerowspan.rowspan/colspanattribute if the value is 1 (the default value).Testing Instructions
rowspan/colspanattributes (i.e., 1) are not added.966c8851cd037b957e932b01fa76ab53.mp4