Opened 21 months ago
Last modified 2 months ago
#58934 new defect (bug)
Twenty Twelve: Table Block does not align center on front end
Reported by: |
|
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)
Change History (13)
#2
@
21 months ago
- Keywords needs-screenshots added
Can you please verify your inserted video link, it doesn't seem to be working.
#4
@
21 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
#5
@
21 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)
margin: 0 0 20px
of block-style is overwriting themargin-left: auto
&margin-right: auto
of global-style coming from.aligncenter
class. Asmargin: 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-stylefloat: right
coming fromclassic.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 outfloat: left
global-style & thats why the style seems a little off on editor when we left align the block.
This ticket was mentioned in PR #4950 on WordPress/wordpress-develop by @akrocks.
21 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 |
:--: | :--: |
| |
### Front End
Before | After |
:--: | :--: |
| |
#7
@
11 months ago
- Keywords needs-testing added
- Milestone changed from Awaiting Review to Future Release
#8
@
3 months 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
#9
@
2 months ago
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.
Hey @truptikanzariya, thanks for submitting the ticket. The video link you added doesn't seem to work, can you please re-check?