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