Opened 3 years ago
Closed 2 years ago
#58708 closed defect (bug) (duplicate)
Twenty Seventeen: caption alignment is different in editor and frontend
| Reported by: | pitamdey | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | |
| Component: | Bundled Theme | Version: | 5.8 |
| Severity: | normal | Keywords: | has-screenshots has-patch needs-testing |
| Cc: | Focuses: | css |
Description
In Twenty Seventeen theme the table caption is center in the editor but it is aligned to the left in the frontend
Attachments (4)
Change History (12)
#1
@
3 years ago
We just have to make the apply the text align : center to the table block.
Something like this :
.wp-block-table figcaption {
text-align: center !important;
}
#2
@
3 years ago
- Summary Twenty Seventeen : Table caption alignment is different in editor and frontend → Twenty Seventeen: Table caption alignment is different in editor and frontend
- Version → 5.8
Thanks for the report!
The figcaption for all blocks except the Gallery was set to align left, not center, in both the editor and front. However, the .wp-block-table class is not the first in the attribute within the editor, so [class^="wp-block-"] does not work there.
[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
font-style: italic;
margin-bottom: 1.5em;
text-align: left;
}
The patch on #56747 should fix this, too.
#3
@
3 years ago
- Summary Twenty Seventeen: Table caption alignment is different in editor and frontend → Twenty Seventeen: caption alignment is different in editor and frontend
#5
@
3 years ago
The alignment discrepancy is the same for any blocks with a figcaption: Image, Video, Table, YouTube embed, etc. It could have been caused by GB32454.
We could consider fixing the mismatch on this ticket, with 56747.patch, and then revisiting the other changes for italics on #56747.
@
2 years ago
updates editor styles figcaption styles for when the block's classes list does not begin with wp-block- (refreshes 56747.patch)
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
Editor View