Opened 4 months ago
Last modified 4 months ago
#58934 new defect (bug)
Twenty Twelve: Table Block does not align center on front end
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | 5.0 |
Component: | Bundled Theme | Keywords: | has-patch |
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 (9)
#2
@
4 months ago
- Keywords needs-screenshots added
Can you please verify your inserted video link, it doesn't seem to be working.
#4
@
4 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
@
4 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.
4 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 |
:--: | :--: |
| |
Hey @truptikanzariya, thanks for submitting the ticket. The video link you added doesn't seem to work, can you please re-check?