Make WordPress Core

Opened 19 months ago

Last modified 5 weeks ago

#58934 new defect (bug)

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

Reported by: truptikanzariya's profile truptikanzariya Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: css, administration Cc:

Description

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

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

Attachments (3)

2012-table-alignment-editor.png (42.6 KB) - added by sabernhardt 19 months ago.
Table blocks in the editor
2012-table-alignment-front.png (45.1 KB) - added by sabernhardt 19 months ago.
Table blocks on the front, with aligncenter table on the left side
58934.diff (1.3 KB) - added by akrocks 19 months ago.
Created Patch.

Download all attachments as: .zip

Change History (11)

#1 @rajinsharwar
19 months ago

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

#2 @huzaifaalmesbah
19 months ago

  • Keywords needs-screenshots added

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

#4 @sabernhardt
19 months ago

  • Component changed from Editor to Bundled Theme
  • Keywords needs-screenshots removed
  • Summary changed from Table Block align center not working. to Twenty Twelve: Table Block does not align center on front end
  • Version changed from trunk to 5.0

@sabernhardt
19 months ago

Table blocks in the editor

@sabernhardt
19 months ago

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

#5 @akrocks
19 months ago

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)
Editor-end (Reason for broken right alignment)
Last edited 19 months ago by akrocks (previous) (diff)

@akrocks
19 months ago

Created Patch.

This ticket was mentioned in PR #4950 on WordPress/wordpress-develop by @akrocks.


19 months ago
#6

  • Keywords has-patch added; needs-patch removed

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
:--: :--:
https://i0.wp.com/github.com/Pathan-Amaankhan/wordpress-develop/assets/63953699/4688b8e0-58f0-426b-a457-c0ad3ac69f7d https://i0.wp.com/github.com/Pathan-Amaankhan/wordpress-develop/assets/63953699/51ae913c-031a-4a99-94a6-6a7548547c90

### Front End

Before After
:--: :--:
https://i0.wp.com/github.com/Pathan-Amaankhan/wordpress-develop/assets/63953699/dbbff6a9-40f1-4e5a-97e3-96f213c612f5 https://i0.wp.com/github.com/Pathan-Amaankhan/wordpress-develop/assets/63953699/a95565b7-75c9-4395-b6aa-6c32ca6ae4de

#7 @karmatosed
8 months ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to Future Release

#8 @sainathpoojary
5 weeks ago

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:
https://utfs.io/f/PL8E4NiPUWyO5tfsbYD45jTOVwQ7E8qrYChcamIHyl0XDp9e

After:
https://utfs.io/f/PL8E4NiPUWyOomqvr4gRVfkrM3cxj5whHLEvyNZCb2PpWuod

Note: See TracTickets for help on using tickets.