Table Block: Preserve Column Alignment when Pasting Markdown Tables by Sukhendu2002 · Pull Request #69322 · WordPress/gutenberg

Sukhendu2002 · 2025-02-26T10:10:40Z

What?

This PR improves the Table block by making sure column alignments are preserved when pasting Markdown tables.

Testing Instructions

Open the editor in a post or page.
Copy and paste this Markdown table into the editor:

| A - Left | B - Centered | C - Right | D - None |
| :------- | :----------: | --------: | -------- |
| 100      |     150      |       200 | 250      |
| 200      |     250      |       300 | 350      |
| 300      |     350      |       400 | 450      |
| 400      |     450      |       500 | 550      |
| 500      |     550      |       600 | 650      |

The table should appear in the editor with the correct column alignments.

Screenshots or screencast

Before	After

github-actions · 2025-02-26T10:52:19Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: dcalhoun <dpcalhoun@git.wordpress.org>
Co-authored-by: stronenv <vevas@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

t-hamano

Sorry for the late reply.

I'm not sure why we need to use the getAlignmentFromStyle() function to extract the text alignment style.

Can't we extract simply like this?

gutenberg/packages/block-library/src/paragraph/transforms.js

Lines 26 to 34 in e49849c

    
           const { textAlign } = node.style || {}; 
        
           if ( 
        
           	textAlign === 'left' || 
        
           	textAlign === 'center' || 
        
           	textAlign === 'right' 
        
           ) { 
        
           	attributes.align = textAlign; 
        
           }

Additionally, it would be good to add a unit test here:

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

Line 64 in e49849c

describe( 'pasteHandler', () => {

Sukhendu2002 · 2025-04-09T07:34:22Z

You're right! I've simplified the implementation and also added a unit test.

t-hamano · 2025-04-09T09:47:13Z

I'm not familiar with the native app, but I think we need to update this field to fix the Mobile unit test:

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

Line 8 in f23eaaa

supportedMobileTransforms: [],

transformationCategories.richText is probably correct, but I'm not sure 🤔

cc @dcalhoun @geriux We are trying to preserve column alignment when pasting table HTML that has alignment applied. However, mobile unit tests are failing, with the align attribute being undefined.

dcalhoun · 2025-04-09T12:18:37Z

cc @dcalhoun @geriux We are trying to preserve column alignment when pasting table HTML that has alignment applied. However, mobile unit tests are failing, with the align attribute being undefined.

I believe the test failure stems from subtle differences in global Document implementations between web and native mobile; the latter relies upon rudimentary implementations provided by a library.

For this particular context, the paste-handler ultimately relies upon createHTMLDocument. I do not see a simple solution at this time, and I cannot dedicate additional time researching, unfortunately. My recommendation is to disable the paste-handler test for the native editor.

diff --git a/test/native/jest.config.js b/test/native/jest.config.js
index 7123275873..d91d3fd5a3 100644
--- a/test/native/jest.config.js
+++ b/test/native/jest.config.js
@@ -27,6 +27,9 @@ const RAW_HANDLING_UNSUPPORTED_UNIT_TESTS = [
 	'figure-content-reducer',
 	'normalise-blocks',
 	'image-corrector',
+	// Disabled due to jsdom-jscore-rn limitations
+	// See: https://github.com/WordPress/gutenberg/pull/69322#issuecomment-2789510963
+	'paste-handler',
 ];
 
 module.exports = {

Additional context: the Table block type is unsupported in the native mobile editor, so the proposed changes should have no impact on the native mobile editor.

t-hamano · 2025-04-09T15:27:28Z

@dcalhoun Thank you for the feedback!

@Sukhendu2002 Can we use the following approach?

My recommendation is to disable the paste-handler test for the native editor.

t-hamano

LGTM!

…ordPress#69322) * Preserve column alignment when pasting Markdown tables * Simplify column alignment extraction and add unit tests * Rename markdownTableHTML variable and reorder test cases * Disable paste-handler test in native * Update test description Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: dcalhoun <dpcalhoun@git.wordpress.org> Co-authored-by: stronenv <vevas@git.wordpress.org>

Preserve column alignment when pasting Markdown tables

881a537

Sukhendu2002 marked this pull request as ready for review February 26, 2025 10:52

Sukhendu2002 requested review from ajitbohra and fabiankaegy as code owners February 26, 2025 10:52

t-hamano added [Type] Enhancement A suggestion for improvement. [Block] Table Affects the Table Block labels Feb 27, 2025

t-hamano reviewed Apr 9, 2025

View reviewed changes

Simplify column alignment extraction and add unit tests

05853ef

t-hamano reviewed Apr 9, 2025

View reviewed changes

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

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

Rename markdownTableHTML variable and reorder test cases

ff99dd9

Disable paste-handler test in native

0910963

Sukhendu2002 requested a review from t-hamano April 9, 2025 16:21

t-hamano approved these changes Apr 10, 2025

View reviewed changes

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

Update test description

b65ddd9

t-hamano merged commit 19c58af into WordPress:trunk Apr 10, 2025

github-actions Bot added this to the Gutenberg 20.7 milestone Apr 10, 2025

Navigation Menu

Repository navigation

Table Block: Preserve Column Alignment when Pasting Markdown Tables - #69322

Table Block: Preserve Column Alignment when Pasting Markdown Tables#69322
t-hamano merged 5 commits into
WordPress:trunkfrom
Sukhendu2002:feature/table-markdown-alignment

Sukhendu2002 commented Feb 26, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Feb 26, 2025 •

edited

Loading

Uh oh!

t-hamano left a comment

Uh oh!

Sukhendu2002 commented Apr 9, 2025

Uh oh!

Uh oh!

Uh oh!

t-hamano commented Apr 9, 2025

Uh oh!

dcalhoun commented Apr 9, 2025 •

edited

Loading

Uh oh!

t-hamano commented Apr 9, 2025

Uh oh!

t-hamano left a comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	const { textAlign } = node.style \|\| {};

	if (
	textAlign === 'left' \|\|
	textAlign === 'center' \|\|
	textAlign === 'right'
	) {
	attributes.align = textAlign;
	}

Conversation

Sukhendu2002 commented Feb 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Testing Instructions

Screenshots or screencast

Uh oh!

github-actions Bot commented Feb 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Sukhendu2002 commented Apr 9, 2025

Uh oh!

Uh oh!

Uh oh!

t-hamano commented Apr 9, 2025

Uh oh!

dcalhoun commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

t-hamano commented Apr 9, 2025

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Sukhendu2002 commented Feb 26, 2025 •

edited

Loading

github-actions Bot commented Feb 26, 2025 •

edited

Loading

dcalhoun commented Apr 9, 2025 •

edited

Loading