Try alternate list item jump fix. #12941
Conversation
There was a problem hiding this comment.
I understand the intent to fix it "globally" across the editor but I'm not sure there should be a margin at all. I'd tend to think it should be up to the theme. Twenty Nineteen, for example, doesn't use a bottom margin on the list items so the preview in the editor wouldn't match the front end. Couple more considerations:
- the
0.5emvalue seems a bit opinionated, it also depends on the actual font size and may produce a not rounded computed value - not sure why the list elements should have a top margin
|
To clarify visually, here's a couple screenshots to illustrate the spacing between list items actually changes: before:
after:
Noting that either cases don't match the front-end, where the theme (in this case Twenty Nineteen) may use a different value (or no value at all) for the bottom margin. |
I agree, but given it inherits the margin from WordPress core, and until we can use Shadow DOM to prevent this bleed, are you familiar with any ways to unset this? I suppose we could use
Well it's "half a line-height", which optically feels appropriate for this. In my opinion, sure.
This rule is only for list item containers (ol/ul) that are nested inside others. Did I pull a monday and do something dumb when I could've done something obvious? |
|
Hm.. maybe we should really consider to take the adventurous route and fix it in core? Alternatively, what about something like |
|
I find the spacing between list items to be pretty dang small when unset like this:
However, I do agree it's a better fix for the problem. So for now that's what I've changed it to.
Until such a time as we can prevent CSS bleed from the admin itself, this would be the case, right? I.e. that is unchanged from master and this PR. I also know that I was of the opinion that we should fix it upstream. However in taking a very brief stab at this, this morning, it felt to me like this should be done in a more holistic admin-redesigny way. |
|
The margin is tighter in the change, but agreed that themes should be responsible for improving that experience. Where possible (and of course it's not always possible) there are always benefits to editor styles being as agnostic as possible. |
|
I don't understand why the tests are failing here. Edit: YAY, a rebase and forcepush fixed this. |
This PR is an alternative to #12590, and also fixes #12526. Props @Naerriel for initial work and inspiration. The different approach taken here is to embrace that we are applying a specific margin to our list items and overrides bleed from wp-admin. In doing so it moves these margins to the editor styles stylesheet, which is a more appropriate place for it.
jasmussen
force-pushed
the
try/alternate-lists-jump-fix
branch
from
0d2d36c
to
85b5456
Compare
|
Yay! |
…rnmobile/372-use-RichText-on-Title-block * 'master' of https://github.com/WordPress/gutenberg: Try alternate list item jump fix. (#12941) Mobile bottom sheet component (#13612) Remove unintentional right-margin on last odd-item. (#12199) Introduce left and right float alignment options to latest posts block (#8814) Fix Google Docs table paste (#13543) Increase bottom padding on gallery image caption (#13623) Fix the editor save keyboard shortcut not working in code editor view (#13159) Plugin: Deprecate gutenberg_add_admin_body_class (#13572) Rnmobile/upload media failed state (#13615) Make clickOnMoreMenuItem not dependent on aria labels (#13166) Add: className prop support to server side render. (#13568) Fix: Categories Block: hierarchical Dropdown (#13567) Docs: Add clarification about git workflow (#13534) Plugin: Remove `user_can_richedit` filtering (#13608) eslint-plugin: Add rule `no-unused-vars-before-return` (#12828) Image settings button (#13597) Fixed wording for the color picker saturation (#13479) # Conflicts: # packages/block-library/src/image/edit.native.js
* Try alternate list item jump fix. This PR is an alternative to #12590, and also fixes #12526. Props @Naerriel for initial work and inspiration. The different approach taken here is to embrace that we are applying a specific margin to our list items and overrides bleed from wp-admin. In doing so it moves these margins to the editor styles stylesheet, which is a more appropriate place for it. * Move to "initial".
* Try alternate list item jump fix. This PR is an alternative to #12590, and also fixes #12526. Props @Naerriel for initial work and inspiration. The different approach taken here is to embrace that we are applying a specific margin to our list items and overrides bleed from wp-admin. In doing so it moves these margins to the editor styles stylesheet, which is a more appropriate place for it. * Move to "initial".
This PR is an alternative to #12590, and also fixes #12526. Props @Naerriel for initial work and inspiration.
The different approach taken here is to embrace that we are applying a specific margin to our list items and overrides bleed from wp-admin. In doing so it moves these margins to the editor styles stylesheet, which is a more appropriate place for it.