Twenty Twelve: Table Block does not align center on front end

[truptikanzariya]

The table block align center isn't working properly in the Twenty Twelve theme.

​https://www.awesomescreenshot.com/video/19525205key=509a355b0cb5d20ad84771b9693fbad2

[rajinsharwar]

Hey @truptikanzariya, thanks for submitting the ticket. The video link you added doesn't seem to work, can you please re-check?

[huzaifaalmesbah]

Can you please verify your inserted video link, it doesn't seem to be working.

[truptikanzariya]

Hello,

​https://www.awesomescreenshot.com/video/19532120?key=9891a8b5829914f3496d8381b6e36b9f

[sabernhardt]

Table blocks in the editor

[sabernhardt]

Table blocks on the front, with aligncenter table on the left side

[akrocks]

Hello @huzaifaalmesbah @truptikanzariya @rajinsharwar,
After debugging the issue, found that there are some block styles that are overwriting the global aligncenter style.

More precisely, block-style contains unnecessary margin property on front-end & width property on editor-end which are not needed & are overwriting the global aligncenter's auto margin on front-end & auto width on editor-end.

Detailed Explanation

Front-end (Reason for broken centre alignment)

• margin: 0 0 20px of block-style is overwriting the margin-left: auto & margin-right: auto of global-style coming from .aligncenter class. As margin: 0 0 20px sets left & right margin to 0, the block remains left aligned in spite of the centre aligning the block.
  ​https://drive.google.com/file/d/1wMfdNTBjMYrxh3xgIRSP3gNE7QGeWpVY/view?usp=drive_link

Editor-end (Reason for broken right alignment)

• Block-style width: 100% cancels out the global-style float: right coming from classic.min.css & due to that block is not able to right align itself.
  ​https://drive.google.com/file/d/1JAQhUvJelVvmo6PAomBmGrPd3DE2PWcf/view?usp=drive_link

• The same happens when we left align the block, block-style width: 100% cancels out float: left global-style & thats why the style seems a little off on editor when we left align the block.
  • Front-end: ​https://drive.google.com/file/d/1U3jQMfmiRJEYeHgphYxA5QBCqtknuDF9/view?usp=drive_link
  • Editor-end: ​https://drive.google.com/file/d/1On2lmfNakxdUUYL1S0vjRVpB18X5qzBo/view?usp=drive_link

[akrocks]

Created Patch.

Trac ticket: https://core.trac.wordpress.org/ticket/58934

## Description

• This PR fixes the Twenty Twelve theme's table block styles for both front-end & editor-end.

## Screenshots/Screencasts

### Editor End

Before	After
:--:	:--:

### Front End

Before	After
:--:	:--:

[sainathpoojary]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/58934/58934.diff

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.26
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twelve 4.4
• MU Plugins: None activated
• Plugins: Test Reports 1.2.0

Actual Results

❌ Issue not resolved with patch.

Supplemental Artifacts

Before:

After:

[shraddhagore]

Patch Report

---

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/58934/58934.diff

Environment:
WordPress: 6.8-alpha-59274-src
Theme: Twenty Twelve, 4.4
Browser: Google Chrome
OS: Windows 11

Screenshots:
Before: ​https://prnt.sc/vrcnzU35H_E7 ​https://prnt.sc/EefwstHxt8_q
After: ​https://prnt.sc/PLwyqOsOK5dD ​https://prnt.sc/F2ftQ8W8LA-f

Comments:
The patch isn't working as expected. In the editor, the table doesn't appear to be right-aligned, but it displays correctly on the frontend. Conversely, in the editor, it seems to be center-aligned, yet it doesn't reflect that on the frontend.

[ugyensupport]

I would agree with @shraddhagore

[SirLouen]

@akrocks: according to @sainathpoojary and @shraddhagore it seems that the patch its not working, could you review the patch and submit some changes to sort it?

[akrocks]

Will look into this and submit an updated patch soon 👍

[akrocks]

Patch refreshed on current trunk and re-tested: ​https://github.com/WordPress/wordpress-develop/pull/4950 (new attachment: 58934.2.diff, generated from the PR).

@SirLouen this addresses the "changes-requested" keyword. The reports in comment:8 and comment:9 tested the older 58934.diff attachment (August 2023); with the refreshed patch failures are now fixed. Details and a few caveats below.

Environment

• WordPress: 7.2-alpha-63166-src (trunk@63999)
• PHP: 8.3.33
• Server: nginx
• Database: MySQL 9.7
• Browser: Chrome 152
• OS: macOS
• Theme: Twenty Twelve 4.9
• Plugins: none

Before the patch (narrow tables, "Fixed width table cells" turned off)

• Front end: the centered table is stuck to the left (0px / 523px gaps). .wp-block-table { margin: 0 0 20px; } in blocks.css overrides .aligncenter { margin-left: auto; margin-right: auto; }.
• Editor: the right-aligned table is drawn on the left, because the floated figure gets width: 100% from editor-blocks.css; text also cannot wrap beside floated tables.

After the patch

• Front end: the centered table has equal gaps on both sides (261px / 261px in a 625px column); right- and left-aligned tables sit at their sides; no horizontal overflow at a 375px viewport.
• Editor: centered (274px / 274px), right-aligned at the right edge, left-aligned at the left edge. The space under every table is 25px, the same as on the front end.

Why earlier testing may have looked wrong

1. The attachment tested (58934.diff, 1 August 2023) predates the PR commit (2 August 2023), so it may not match the PR. Please test 58934.2.diff, or the PR itself.
2. When this ticket was filed (July 2023), a new Table block used auto layout. Since March 2024 (​https://github.com/WordPress/gutenberg/pull/49672) new tables default to "Fixed width table cells", and a fixed-width table is 100% wide on the front end in every theme (I checked Twenty Twenty-One too), while the editor shrinks aligned tables. That comes from core's .has-fixed-layout { width: 100% } (​https://github.com/WordPress/gutenberg/issues/12294) and this patch does not change it. To see the alignment, turn "Fixed width table cells" off.
3. The stylesheet ?ver= strings are unchanged, so browsers can keep serving the old CSS. Please hard refresh, or disable the cache, when testing.

I also quoted the attribute values of the two new [data-align="center"] selectors to match the rest of editor-blocks.css.

If the team would rather have Twenty Twelve also shrink aligned fixed-width tables on the front end, to match its editor, that is one small extra rule (width: auto on .has-fixed-layout inside .aligncenter, .alignleft and .alignright). I left it out because it would make Twenty Twelve differ from core and the other themes. Happy to add it if you prefer.