Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

List block: avoid "jump" when nesting a list item #12526

Closed
afercia opened this issue Dec 2, 2018 · 5 comments · Fixed by #12941
Closed

List block: avoid "jump" when nesting a list item #12526

afercia opened this issue Dec 2, 2018 · 5 comments · Fixed by #12941
Labels
[Block] List Affects the List Block Good First Issue An issue that's suitable for someone looking to contribute for the first time [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Dec 2, 2018

When nesting a list item, there's a visible vertical "jump" of the item (and the whole UI below it). Here's a GIF:

nested list jump

This happens because any <li> element in the WordPress admin inherits a margin-bottom: 6px; from common.css. All that's needed to avoid this unpleasant "jump" is to reset the bottom margin to 0 in the List block editor.scss. /Cc @jasmussen
@afercia afercia added [Type] Bug An existing feature does not function as intended Good First Issue An issue that's suitable for someone looking to contribute for the first time [Block] List Affects the List Block labels Dec 2, 2018
@jasmussen
Copy link
Contributor

Good ticket.

It is an easy fix. But given any fix for this will land in phase 2 country, I wonder if the real fix should happen upstream?

I'm open to either way.

@afercia
Copy link
Contributor Author

afercia commented Dec 3, 2018

I wonder if the real fix should happen upstream?

I can't fix it upstream, for sentimental reasons 🙂

https://core.trac.wordpress.org/changeset/138

See also:

@jasmussen
Copy link
Contributor

Thank you for the deep dive!

Maybe I'll fix it then :D THE TIME HAS COME!

@Hitendrachopda
Copy link

Hello there,

I have find out solution for the blinking list element once create child hierarchic.

Please check below css and update it to solve the issue.
Path: plugins/gutenberg/build/block-library/editor.css

Code:
.block-library-list .editor-rich-text__tinymce ul li{
margin-bottom:5px;
line-height: 2.2;
}

Thanks,

@Naerriel Naerriel mentioned this issue Dec 4, 2018
Closed
4 tasks
jasmussen pushed a commit that referenced this issue Dec 17, 2018
Try alternate list item jump fix.
9c1c5b1 
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 jasmussen mentioned this issue Dec 17, 2018
Merged
@jasmussen
Copy link
Contributor

Thanks all for the discussion. I've finally had time to think more about this, sorry for the delay. I created #12941 to fix it, as an alternative to #12590.

jasmussen pushed a commit that referenced this issue Jan 15, 2019
Try alternate list item jump fix.
4409b13 
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 added a commit that referenced this issue Feb 1, 2019
@jasmussen
Try alternate list item jump fix. (#12941)
532ed5f 
* 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".
youknowriad pushed a commit that referenced this issue Mar 6, 2019
@jasmussen @youknowriad
Try alternate list item jump fix. (#12941)
cbdf96e 
* 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".
youknowriad pushed a commit that referenced this issue Mar 6, 2019
@jasmussen @youknowriad
Try alternate list item jump fix. (#12941)
78f99d7 
* 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".
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Block] List Affects the List Block Good First Issue An issue that's suitable for someone looking to contribute for the first time [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
3 participants
@jasmussen @afercia @Hitendrachopda