Gutenberg: List block: avoid "jump" when nesting a list item

[afercia]

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

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

[jasmussen]

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]

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:

• https://core.trac.wordpress.org/browser/trunk/wp-admin/b2.css?rev=312
• https://core.trac.wordpress.org/changeset/313
• https://core.trac.wordpress.org/changeset/644
• https://core.trac.wordpress.org/changeset/6778

[jasmussen]

Thank you for the deep dive!

Maybe _I'll_ fix it then :D THE TIME HAS COME!

[Hitendrachopda]

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,

[jasmussen]

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.