Opened 4 years ago
Last modified 5 months ago
#53158 assigned defect (bug)
Twenty Twenty: Pullquote block editor styling does not match front
Reported by: | sabernhardt | Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | |
Component: | Bundled Theme | Keywords: | has-patch needs-testing |
Focuses: | css | Cc: |
Description
Twenty Nineteen has a similar discrepancy reported on #53112
When the pullquote has default alignment, the text is still Garamond italic in the editor.
Also, quotes aligned Wide or Full are not the larger font size.
Attachments (10)
Change History (25)
#3
@
4 years ago
@sabernhardt Are you working on a patch? Otherwise this is something I'd like to try :)
@
4 years ago
Some parent divs had .wp-block and some didn't. I couldn't find where to add it, so I removed it in the style selectors as it wasn't necessary anyway. The front-end also used rem values, but a font-size on the html element of 62.5%, so I recalculated the rem values for the admin styles.
#6
@
4 years ago
The font-sizes were also dynamic, so I also added the media queries for that. I thought I'd change all the inconsistencies I could find. I hope I got them all!
@
4 years ago
The margins on the right and left aligned wp-block have an inconsistency, where the right aligned has only a margin-right of 0, where the left aligned sets all margins to 0. This has to be tested with all blocks.
@
4 years ago
Added missing rules, making the files match. Also put every rule on a different line following standards.
#7
@
4 years ago
- Keywords needs-refresh added
@tomjdevisser Thanks for the patches! Sorry about my delay in reviewing...and because I did not realize earlier that this is quite complicated for your first bug. The 5.8 deadline is next Tuesday for review and commit, so I can make the next patch today (or tomorrow).
53158-3.patch still has some extra spaces after commas and before an opening curly bracket, and the RTL changes do not match the LTR version. Plus, the wide and full quote blocks do not need the larger font size outside the media queries (even though I think this discrepancy helps indicate that the text can be bigger, the front end has the same font size for all pullquote alignments on screens narrower than 700px).
I also just noticed that the left and right pullquotes are still centered in the editor. (My tests above only have one word per quote, so it's not obvious there.) When the font size increases to 32px, adding .editor-styles-wrapper .wp-block-pullquote p
in the latest patch correctly applies that style. However, several other styles use the outdated .wp-block[data-type="core/pullquote"][data-align="left"]
syntax. The next patch probably needs adjustments to at least these (which includes correcting the float direction with /*rtl:ignore*/):
.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote, .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote.is-style-solid-color blockquote { text-align: left; } .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .block-editor-block-list__block-edit, .editor-styles-wrapper .wp-block[data-align="left"] .wp-block-pullquote { float: left; margin-left: 20px; max-width: 260px; }
I'll start by taking the additional selectors from the RTL stylesheet part of the previous patch 53158-2.patch, making the following edits:
- Adding
blockquote
to the wide selector (line 1334) where the font size increases to 48px;.editor-styles-wrapper .wp-block[data-align="wide"] .wp-block-pullquote blockquote p,
- Making any necessary changes for the text alignment, max-width and float direction of left- and right-aligned pullquotes;
- Ensuring all the selector additions from the RTL stylesheet match the main (LTR) version.
@
3 years ago
adding styles for left and right alignment; using child selector for any aligned pullquotes
#8
@
3 years ago
- Keywords needs-testing added; needs-refresh removed
Further down the rabbit hole...
The full and width alignments needed the child selector to make sure those styles apply only on wide and full pullquote blocks. Otherwise, those styles would apply when a group or cover block is wide or full, even though the pullquote block inside it could have a different alignment.
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
3 years ago
#10
@
3 years ago
- Milestone changed from 5.8 to 5.9
- Owner sabernhardt deleted
- Status changed from accepted to assigned
With 5.8 Beta 1 minutes away, we're punting this to 5.9
to land there as this otherwise needs a quick review before heading towards commit
then.
#11
@
3 years ago
As long as I don't own this right now, it would help if a committer could claim ownership for the testing/review stage.
Moving to 5.8 because it would be nice to fix as many editor bugs in the default themes as possible. But with the focus on full site editing, this would need someone to own.