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: |
|
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 (11)
#2
@
19 months ago
- Keywords needs-screenshots added
Can you please verify your inserted video link, it doesn't seem to be working.
#4
@
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
#5
@
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)
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.
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 |
:--: | :--: |
| |
### Front End
Before | After |
:--: | :--: |
| |
#7
@
8 months ago
- Keywords needs-testing added
- Milestone changed from Awaiting Review to Future Release
#8
@
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.
Hey @truptikanzariya, thanks for submitting the ticket. The video link you added doesn't seem to work, can you please re-check?