Try: Remove padding from menu items when no background #30805

jasmussen · 2021-04-13T13:55:04Z

Description

I'd like to try and make this pattern for the navigation block:

But I can't, because individual menu items have a built-in padding:

While it would be nice to implement consistent dimension controls so paddings can be customized (and that will still be nice and possible once #28356 lands), this PR implements a new default, which fixes this:

The idea is pretty simple:

If your navigation block has no background, menu items have larger margin between them, but no padding. Submenus have padding, here.
If your navigation block has a background, menu items have padding, and smaller margin in between to compensate. Submenus have no padding, so menu items align.

Here are two examples. No background — notice how the navigation item aligns with the post title:

Yes background:

How has this been tested?

The testing instructions are:

Test vertical and horizontal navigation blocks with both Page List and custom menu items inside.
Be sure to have submenu items.
Test those with and without background colors.

When no background is there, the padding from menu items should be gone, but items should still be spaced harmoniously, inside and outside of submenus.

When there is a background, it should look the same as today.

Here's some testing content:

<!-- wp:paragraph -->
<p><strong>Menu with no background:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"orientation":"horizontal"} -->
<!-- wp:navigation-link {"label":"Gnome dioramas","type":"page","id":664,"url":"http://localhost:8888/?page_id=664","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"Cardboard Coffee","type":"post","id":816,"url":"http://localhost:8888/?p=816","kind":"post-type"} /-->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {"label":"Services","type":"page","id":656,"url":"http://localhost:8888/?page_id=656","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"The Tape Measure","id":28,"url":"http://localhost:8888/?p=28"} /-->

<!-- wp:navigation-link {"label":"Contact","type":"page","id":15,"url":"http://localhost:8888/?page_id=15","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"(no title)","type":"page","id":731,"url":"http://localhost:8888/?page_id=731","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Custom Template","type":"page","id":725,"url":"http://localhost:8888/?page_id=725","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"Cardboard Coffee","type":"post","id":816,"url":"http://localhost:8888/?p=816","kind":"post-type"} /-->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {"label":"Gnome dioramas","type":"page","id":664,"url":"http://localhost:8888/?page_id=664","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"(no title)","type":"page","id":731,"url":"http://localhost:8888/?page_id=731","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Home","type":"page","id":11,"url":"http://localhost:8888/","kind":"post-type"} /-->
<!-- /wp:navigation-link -->

<!-- wp:page-list /-->
<!-- /wp:navigation -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p><strong>Menu with a background:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"orientation":"horizontal","backgroundColor":"light-gray"} -->
<!-- wp:navigation-link {"label":"Gnome dioramas","type":"page","id":664,"url":"http://localhost:8888/?page_id=664","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"Cardboard Coffee","type":"post","id":816,"url":"http://localhost:8888/?p=816","kind":"post-type"} /-->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {"label":"Services","type":"page","id":656,"url":"http://localhost:8888/?page_id=656","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"The Tape Measure","id":28,"url":"http://localhost:8888/?p=28"} /-->

<!-- wp:navigation-link {"label":"Contact","type":"page","id":15,"url":"http://localhost:8888/?page_id=15","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"(no title)","type":"page","id":731,"url":"http://localhost:8888/?page_id=731","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Custom Template","type":"page","id":725,"url":"http://localhost:8888/?page_id=725","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"Cardboard Coffee","type":"post","id":816,"url":"http://localhost:8888/?p=816","kind":"post-type"} /-->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {"label":"Gnome dioramas","type":"page","id":664,"url":"http://localhost:8888/?page_id=664","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"(no title)","type":"page","id":731,"url":"http://localhost:8888/?page_id=731","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Home","type":"page","id":11,"url":"http://localhost:8888/","kind":"post-type"} /-->
<!-- /wp:navigation-link -->

<!-- wp:page-list /-->
<!-- /wp:navigation -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p><strong>Vertical with no background:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"orientation":"vertical"} -->
<!-- wp:navigation-link {"label":"Gnome dioramas","type":"page","id":664,"url":"http://localhost:8888/?page_id=664","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"Cardboard Coffee","type":"post","id":816,"url":"http://localhost:8888/?p=816","kind":"post-type"} /-->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {"label":"Services","type":"page","id":656,"url":"http://localhost:8888/?page_id=656","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"The Tape Measure","id":28,"url":"http://localhost:8888/?p=28"} /-->

<!-- wp:navigation-link {"label":"Contact","type":"page","id":15,"url":"http://localhost:8888/?page_id=15","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"(no title)","type":"page","id":731,"url":"http://localhost:8888/?page_id=731","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Custom Template","type":"page","id":725,"url":"http://localhost:8888/?page_id=725","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Gnome dioramas","type":"page","id":664,"url":"http://localhost:8888/?page_id=664","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"(no title)","type":"page","id":731,"url":"http://localhost:8888/?page_id=731","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Home","type":"page","id":11,"url":"http://localhost:8888/","kind":"post-type"} /-->
<!-- /wp:navigation-link -->

<!-- wp:page-list /-->
<!-- /wp:navigation -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p><strong>Veritcal with a background:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:navigation {"orientation":"vertical","backgroundColor":"light-gray"} -->
<!-- wp:navigation-link {"label":"Gnome dioramas","type":"page","id":664,"url":"http://localhost:8888/?page_id=664","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"Cardboard Coffee","type":"post","id":816,"url":"http://localhost:8888/?p=816","kind":"post-type"} /-->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {"label":"Services","type":"page","id":656,"url":"http://localhost:8888/?page_id=656","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"The Tape Measure","id":28,"url":"http://localhost:8888/?p=28"} /-->

<!-- wp:navigation-link {"label":"Contact","type":"page","id":15,"url":"http://localhost:8888/?page_id=15","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"(no title)","type":"page","id":731,"url":"http://localhost:8888/?page_id=731","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Custom Template","type":"page","id":725,"url":"http://localhost:8888/?page_id=725","kind":"post-type"} -->
<!-- wp:navigation-link {"label":"Cardboard Coffee","type":"post","id":816,"url":"http://localhost:8888/?p=816","kind":"post-type"} /-->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {"label":"Gnome dioramas","type":"page","id":664,"url":"http://localhost:8888/?page_id=664","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"(no title)","type":"page","id":731,"url":"http://localhost:8888/?page_id=731","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Home","type":"page","id":11,"url":"http://localhost:8888/","kind":"post-type"} /-->
<!-- /wp:navigation-link -->

<!-- wp:page-list /-->
<!-- /wp:navigation -->

☝️ That's tested with TwentyTwelve, you might need to add background colors again if you test in another theme. I will look at that use of has-background separately.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

github-actions · 2021-04-13T14:04:10Z

Size Change: +318 B (0%)

Total Size: 1.43 MB

Filename	Size	Change
`build/block-library/blocks/navigation-link/style-rtl.css`	1.17 kB	+99 B (+9%)	🔍
`build/block-library/blocks/navigation-link/style.css`	1.18 kB	+106 B (+10%)	⚠️
`build/block-library/blocks/navigation/editor-rtl.css`	1.18 kB	-55 B (-4%)
`build/block-library/blocks/navigation/editor.css`	1.18 kB	-55 B (-4%)
`build/block-library/editor-rtl.css`	9.72 kB	-51 B (-1%)
`build/block-library/editor.css`	9.71 kB	-51 B (-1%)
`build/block-library/style-rtl.css`	9.51 kB	+119 B (+1%)
`build/block-library/style.css`	9.52 kB	+121 B (+1%)
`build/components/index.js`	286 kB	+85 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.79 kB	0 B
`build/api-fetch/index.js`	3.42 kB	0 B
`build/autop/index.js`	2.82 kB	0 B
`build/blob/index.js`	665 B	0 B
`build/block-directory/index.js`	8.63 kB	0 B
`build/block-directory/style-rtl.css`	1 kB	0 B
`build/block-directory/style.css`	1.01 kB	0 B
`build/block-editor/index.js`	128 kB	0 B
`build/block-editor/style-rtl.css`	12.5 kB	0 B
`build/block-editor/style.css`	12.5 kB	0 B
`build/block-library/blocks/archives/editor-rtl.css`	61 B	0 B
`build/block-library/blocks/archives/editor.css`	60 B	0 B
`build/block-library/blocks/audio/editor-rtl.css`	58 B	0 B
`build/block-library/blocks/audio/editor.css`	58 B	0 B
`build/block-library/blocks/audio/style-rtl.css`	112 B	0 B
`build/block-library/blocks/audio/style.css`	112 B	0 B
`build/block-library/blocks/block/editor-rtl.css`	161 B	0 B
`build/block-library/blocks/block/editor.css`	161 B	0 B
`build/block-library/blocks/button/editor-rtl.css`	475 B	0 B
`build/block-library/blocks/button/editor.css`	474 B	0 B
`build/block-library/blocks/button/style-rtl.css`	503 B	0 B
`build/block-library/blocks/button/style.css`	503 B	0 B
`build/block-library/blocks/buttons/editor-rtl.css`	315 B	0 B
`build/block-library/blocks/buttons/editor.css`	315 B	0 B
`build/block-library/blocks/buttons/style-rtl.css`	368 B	0 B
`build/block-library/blocks/buttons/style.css`	368 B	0 B
`build/block-library/blocks/calendar/style-rtl.css`	208 B	0 B
`build/block-library/blocks/calendar/style.css`	208 B	0 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B	0 B
`build/block-library/blocks/categories/editor.css`	83 B	0 B
`build/block-library/blocks/categories/style-rtl.css`	79 B	0 B
`build/block-library/blocks/categories/style.css`	79 B	0 B
`build/block-library/blocks/code/style-rtl.css`	90 B	0 B
`build/block-library/blocks/code/style.css`	90 B	0 B
`build/block-library/blocks/columns/editor-rtl.css`	190 B	0 B
`build/block-library/blocks/columns/editor.css`	190 B	0 B
`build/block-library/blocks/columns/style-rtl.css`	436 B	0 B
`build/block-library/blocks/columns/style.css`	435 B	0 B
`build/block-library/blocks/cover/editor-rtl.css`	605 B	0 B
`build/block-library/blocks/cover/editor.css`	605 B	0 B
`build/block-library/blocks/cover/style-rtl.css`	1.23 kB	0 B
`build/block-library/blocks/cover/style.css`	1.23 kB	0 B
`build/block-library/blocks/embed/editor-rtl.css`	486 B	0 B
`build/block-library/blocks/embed/editor.css`	486 B	0 B
`build/block-library/blocks/embed/style-rtl.css`	401 B	0 B
`build/block-library/blocks/embed/style.css`	400 B	0 B
`build/block-library/blocks/file/editor-rtl.css`	175 B	0 B
`build/block-library/blocks/file/editor.css`	174 B	0 B
`build/block-library/blocks/file/style-rtl.css`	248 B	0 B
`build/block-library/blocks/file/style.css`	248 B	0 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.44 kB	0 B
`build/block-library/blocks/freeform/editor.css`	2.44 kB	0 B
`build/block-library/blocks/gallery/editor-rtl.css`	704 B	0 B
`build/block-library/blocks/gallery/editor.css`	705 B	0 B
`build/block-library/blocks/gallery/style-rtl.css`	1.09 kB	0 B
`build/block-library/blocks/gallery/style.css`	1.09 kB	0 B
`build/block-library/blocks/group/editor-rtl.css`	160 B	0 B
`build/block-library/blocks/group/editor.css`	160 B	0 B
`build/block-library/blocks/group/style-rtl.css`	57 B	0 B
`build/block-library/blocks/group/style.css`	57 B	0 B
`build/block-library/blocks/heading/editor-rtl.css`	129 B	0 B
`build/block-library/blocks/heading/editor.css`	129 B	0 B
`build/block-library/blocks/heading/style-rtl.css`	76 B	0 B
`build/block-library/blocks/heading/style.css`	76 B	0 B
`build/block-library/blocks/html/editor-rtl.css`	281 B	0 B
`build/block-library/blocks/html/editor.css`	281 B	0 B
`build/block-library/blocks/image/editor-rtl.css`	717 B	0 B
`build/block-library/blocks/image/editor.css`	716 B	0 B
`build/block-library/blocks/image/style-rtl.css`	476 B	0 B
`build/block-library/blocks/image/style.css`	478 B	0 B
`build/block-library/blocks/latest-comments/style-rtl.css`	281 B	0 B
`build/block-library/blocks/latest-comments/style.css`	282 B	0 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	137 B	0 B
`build/block-library/blocks/latest-posts/editor.css`	137 B	0 B
`build/block-library/blocks/latest-posts/style-rtl.css`	523 B	0 B
`build/block-library/blocks/latest-posts/style.css`	522 B	0 B
`build/block-library/blocks/legacy-widget/editor-rtl.css`	398 B	0 B
`build/block-library/blocks/legacy-widget/editor.css`	399 B	0 B
`build/block-library/blocks/list/style-rtl.css`	63 B	0 B
`build/block-library/blocks/list/style.css`	63 B	0 B
`build/block-library/blocks/media-text/editor-rtl.css`	191 B	0 B
`build/block-library/blocks/media-text/editor.css`	191 B	0 B
`build/block-library/blocks/media-text/style-rtl.css`	535 B	0 B
`build/block-library/blocks/media-text/style.css`	532 B	0 B
`build/block-library/blocks/more/editor-rtl.css`	434 B	0 B
`build/block-library/blocks/more/editor.css`	434 B	0 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	597 B	0 B
`build/block-library/blocks/navigation-link/editor.css`	597 B	0 B
`build/block-library/blocks/navigation/style-rtl.css`	204 B	0 B
`build/block-library/blocks/navigation/style.css`	205 B	0 B
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B	0 B
`build/block-library/blocks/nextpage/editor.css`	395 B	0 B
`build/block-library/blocks/page-list/editor-rtl.css`	239 B	0 B
`build/block-library/blocks/page-list/editor.css`	240 B	0 B
`build/block-library/blocks/page-list/style-rtl.css`	167 B	0 B
`build/block-library/blocks/page-list/style.css`	167 B	0 B
`build/block-library/blocks/paragraph/editor-rtl.css`	157 B	0 B
`build/block-library/blocks/paragraph/editor.css`	157 B	0 B
`build/block-library/blocks/paragraph/style-rtl.css`	247 B	0 B
`build/block-library/blocks/paragraph/style.css`	248 B	0 B
`build/block-library/blocks/post-author/editor-rtl.css`	209 B	0 B
`build/block-library/blocks/post-author/editor.css`	209 B	0 B
`build/block-library/blocks/post-author/style-rtl.css`	183 B	0 B
`build/block-library/blocks/post-author/style.css`	184 B	0 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	250 B	0 B
`build/block-library/blocks/post-comments-form/style.css`	250 B	0 B
`build/block-library/blocks/post-content/editor-rtl.css`	139 B	0 B
`build/block-library/blocks/post-content/editor.css`	139 B	0 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B	0 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B	0 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	69 B	0 B
`build/block-library/blocks/post-excerpt/style.css`	69 B	0 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	338 B	0 B
`build/block-library/blocks/post-featured-image/editor.css`	338 B	0 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	100 B	0 B
`build/block-library/blocks/post-featured-image/style.css`	100 B	0 B
`build/block-library/blocks/post-title/style-rtl.css`	60 B	0 B
`build/block-library/blocks/post-title/style.css`	60 B	0 B
`build/block-library/blocks/preformatted/style-rtl.css`	103 B	0 B
`build/block-library/blocks/preformatted/style.css`	103 B	0 B
`build/block-library/blocks/pullquote/editor-rtl.css`	183 B	0 B
`build/block-library/blocks/pullquote/editor.css`	183 B	0 B
`build/block-library/blocks/pullquote/style-rtl.css`	318 B	0 B
`build/block-library/blocks/pullquote/style.css`	318 B	0 B
`build/block-library/blocks/query-loop/editor-rtl.css`	83 B	0 B
`build/block-library/blocks/query-loop/editor.css`	82 B	0 B
`build/block-library/blocks/query-loop/style-rtl.css`	315 B	0 B
`build/block-library/blocks/query-loop/style.css`	317 B	0 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B	0 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B	0 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	270 B	0 B
`build/block-library/blocks/query-pagination/editor.css`	262 B	0 B
`build/block-library/blocks/query-pagination/style-rtl.css`	168 B	0 B
`build/block-library/blocks/query-pagination/style.css`	168 B	0 B
`build/block-library/blocks/query-title/editor-rtl.css`	86 B	0 B
`build/block-library/blocks/query-title/editor.css`	86 B	0 B
`build/block-library/blocks/query/editor-rtl.css`	810 B	0 B
`build/block-library/blocks/query/editor.css`	809 B	0 B
`build/block-library/blocks/quote/style-rtl.css`	169 B	0 B
`build/block-library/blocks/quote/style.css`	169 B	0 B
`build/block-library/blocks/rss/editor-rtl.css`	201 B	0 B
`build/block-library/blocks/rss/editor.css`	202 B	0 B
`build/block-library/blocks/rss/style-rtl.css`	290 B	0 B
`build/block-library/blocks/rss/style.css`	290 B	0 B
`build/block-library/blocks/search/editor-rtl.css`	189 B	0 B
`build/block-library/blocks/search/editor.css`	189 B	0 B
`build/block-library/blocks/search/style-rtl.css`	359 B	0 B
`build/block-library/blocks/search/style.css`	362 B	0 B
`build/block-library/blocks/separator/editor-rtl.css`	99 B	0 B
`build/block-library/blocks/separator/editor.css`	99 B	0 B
`build/block-library/blocks/separator/style-rtl.css`	251 B	0 B
`build/block-library/blocks/separator/style.css`	251 B	0 B
`build/block-library/blocks/shortcode/editor-rtl.css`	512 B	0 B
`build/block-library/blocks/shortcode/editor.css`	512 B	0 B
`build/block-library/blocks/site-logo/editor-rtl.css`	438 B	0 B
`build/block-library/blocks/site-logo/editor.css`	438 B	0 B
`build/block-library/blocks/site-logo/style-rtl.css`	150 B	0 B
`build/block-library/blocks/site-logo/style.css`	150 B	0 B
`build/block-library/blocks/social-link/editor-rtl.css`	164 B	0 B
`build/block-library/blocks/social-link/editor.css`	165 B	0 B
`build/block-library/blocks/social-links/editor-rtl.css`	796 B	0 B
`build/block-library/blocks/social-links/editor.css`	795 B	0 B
`build/block-library/blocks/social-links/style-rtl.css`	1.32 kB	0 B
`build/block-library/blocks/social-links/style.css`	1.33 kB	0 B
`build/block-library/blocks/spacer/editor-rtl.css`	308 B	0 B
`build/block-library/blocks/spacer/editor.css`	308 B	0 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B	0 B
`build/block-library/blocks/spacer/style.css`	48 B	0 B
`build/block-library/blocks/table/editor-rtl.css`	478 B	0 B
`build/block-library/blocks/table/editor.css`	478 B	0 B
`build/block-library/blocks/table/style-rtl.css`	402 B	0 B
`build/block-library/blocks/table/style.css`	402 B	0 B
`build/block-library/blocks/tag-cloud/editor-rtl.css`	118 B	0 B
`build/block-library/blocks/tag-cloud/editor.css`	118 B	0 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	94 B	0 B
`build/block-library/blocks/tag-cloud/style.css`	94 B	0 B
`build/block-library/blocks/template-part/editor-rtl.css`	552 B	0 B
`build/block-library/blocks/template-part/editor.css`	551 B	0 B
`build/block-library/blocks/term-description/editor-rtl.css`	90 B	0 B
`build/block-library/blocks/term-description/editor.css`	90 B	0 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B	0 B
`build/block-library/blocks/text-columns/editor.css`	95 B	0 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B	0 B
`build/block-library/blocks/text-columns/style.css`	166 B	0 B
`build/block-library/blocks/verse/style-rtl.css`	87 B	0 B
`build/block-library/blocks/verse/style.css`	87 B	0 B
`build/block-library/blocks/video/editor-rtl.css`	504 B	0 B
`build/block-library/blocks/video/editor.css`	503 B	0 B
`build/block-library/blocks/video/style-rtl.css`	173 B	0 B
`build/block-library/blocks/video/style.css`	173 B	0 B
`build/block-library/common-rtl.css`	1.31 kB	0 B
`build/block-library/common.css`	1.31 kB	0 B
`build/block-library/index.js`	153 kB	0 B
`build/block-library/reset-rtl.css`	502 B	0 B
`build/block-library/reset.css`	503 B	0 B
`build/block-library/theme-rtl.css`	692 B	0 B
`build/block-library/theme.css`	693 B	0 B
`build/block-serialization-default-parser/index.js`	1.87 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.06 kB	0 B
`build/blocks/index.js`	48.5 kB	0 B
`build/components/style-rtl.css`	16.3 kB	0 B
`build/components/style.css`	16.3 kB	0 B
`build/compose/index.js`	11.2 kB	0 B
`build/core-data/index.js`	17.1 kB	0 B
`build/customize-widgets/index.js`	7.09 kB	0 B
`build/customize-widgets/style-rtl.css`	630 B	0 B
`build/customize-widgets/style.css`	631 B	0 B
`build/data-controls/index.js`	838 B	0 B
`build/data/index.js`	8.88 kB	0 B
`build/date/index.js`	31.9 kB	0 B
`build/deprecated/index.js`	787 B	0 B
`build/dom-ready/index.js`	577 B	0 B
`build/dom/index.js`	5.09 kB	0 B
`build/edit-navigation/index.js`	17 kB	0 B
`build/edit-navigation/style-rtl.css`	2.86 kB	0 B
`build/edit-navigation/style.css`	2.86 kB	0 B
`build/edit-post/classic-rtl.css`	454 B	0 B
`build/edit-post/classic.css`	454 B	0 B
`build/edit-post/index.js`	307 kB	0 B
`build/edit-post/style-rtl.css`	6.98 kB	0 B
`build/edit-post/style.css`	6.97 kB	0 B
`build/edit-site/index.js`	28.3 kB	0 B
`build/edit-site/style-rtl.css`	4.9 kB	0 B
`build/edit-site/style.css`	4.89 kB	0 B
`build/edit-widgets/index.js`	15.7 kB	0 B
`build/edit-widgets/style-rtl.css`	2.97 kB	0 B
`build/edit-widgets/style.css`	2.98 kB	0 B
`build/editor/index.js`	42.5 kB	0 B
`build/editor/style-rtl.css`	3.92 kB	0 B
`build/editor/style.css`	3.92 kB	0 B
`build/element/index.js`	4.62 kB	0 B
`build/escape-html/index.js`	735 B	0 B
`build/format-library/index.js`	6.76 kB	0 B
`build/format-library/style-rtl.css`	637 B	0 B
`build/format-library/style.css`	639 B	0 B
`build/hooks/index.js`	2.28 kB	0 B
`build/html-entities/index.js`	622 B	0 B
`build/i18n/index.js`	4.04 kB	0 B
`build/is-shallow-equal/index.js`	699 B	0 B
`build/keyboard-shortcuts/index.js`	2.53 kB	0 B
`build/keycodes/index.js`	1.96 kB	0 B
`build/list-reusable-blocks/index.js`	3.19 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	629 B	0 B
`build/list-reusable-blocks/style.css`	628 B	0 B
`build/media-utils/index.js`	5.38 kB	0 B
`build/notices/index.js`	1.86 kB	0 B
`build/nux/index.js`	3.42 kB	0 B
`build/nux/style-rtl.css`	731 B	0 B
`build/nux/style.css`	727 B	0 B
`build/plugins/index.js`	2.96 kB	0 B
`build/primitives/index.js`	1.42 kB	0 B
`build/priority-queue/index.js`	790 B	0 B
`build/react-i18n/index.js`	1.46 kB	0 B
`build/redux-routine/index.js`	2.84 kB	0 B
`build/reusable-blocks/index.js`	3.79 kB	0 B
`build/reusable-blocks/style-rtl.css`	225 B	0 B
`build/reusable-blocks/style.css`	225 B	0 B
`build/rich-text/index.js`	13.5 kB	0 B
`build/server-side-render/index.js`	2.6 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.27 kB	0 B
`build/url/index.js`	3.02 kB	0 B
`build/viewport/index.js`	1.86 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.22 kB	0 B

_{compressed-size-action}

priethor · 2021-04-22T11:56:03Z

Nice pattern to implement! 👍
Looks pretty good on TT1 blocks, spacing changes as expected depending on background color both in horizontal and vertical Navigation blocks:

Tested and looking good on classic themes like Kadence or Tweny Twenty, which look perfect as well, and TT1 and Astra, which have some unrelated issues with the Page List's internal padding.

priethor

Submenu items align as well with their parents, both with and without background color.

Apr-22-2021.14-04-35.mp4

jasmussen · 2021-04-23T07:57:20Z

Thanks so much for the review and the merge, I think this one should be able to open up a number of great starting patterns!

I still have some submenu and color work to do (see #30831), and there are some z-index issues with multiple menus that I'd love to address. But all of this, as with of course any followups I need to do as a result of this one, it's all on my list and you know where to find me 👌

jasmussen added the [Block] Navigation Affects the Navigation Block label Apr 13, 2021

jasmussen self-assigned this Apr 13, 2021

Try: Remove padding from menu items when no background

a5df608

jasmussen force-pushed the try/navigation-no-padding branch from 3af17af to a5df608 Compare April 14, 2021 07:47

jasmussen mentioned this pull request Apr 14, 2021

Build Tooling: Update development tools to work with PostCSS (try 2) #30347

Merged

6 tasks

Refactor margins and paddings.

05c8f69

jasmussen marked this pull request as ready for review April 14, 2021 09:45

jasmussen requested a review from ajitbohra as a code owner April 14, 2021 09:45

jasmussen requested review from georgeh and mkaz April 14, 2021 09:45

jasmussen mentioned this pull request Apr 14, 2021

Try: Provide a baseline submenu background color. #30831

Closed

7 tasks

jasmussen requested a review from a team April 22, 2021 07:22

priethor self-requested a review April 22, 2021 12:01

priethor approved these changes Apr 22, 2021

View reviewed changes

draganescu merged commit 2cb11b0 into trunk Apr 23, 2021

draganescu deleted the try/navigation-no-padding branch April 23, 2021 06:36

github-actions bot added this to the Gutenberg 10.6 milestone Apr 23, 2021

This was referenced Apr 26, 2021

Fix submenu hover issue. #31195

Merged

Fix navigation screen collapsing regression. #31228

Merged

jasmussen mentioned this pull request Aug 4, 2021

Tune appender margin. #33866

Merged

7 tasks

jasmussen mentioned this pull request Aug 27, 2021

Fix navigation block classname issues #34344

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try: Remove padding from menu items when no background #30805

Try: Remove padding from menu items when no background #30805

jasmussen commented Apr 13, 2021 •

edited

Loading

github-actions bot commented Apr 13, 2021 •

edited

Loading

priethor commented Apr 22, 2021

priethor left a comment

jasmussen commented Apr 23, 2021

Try: Remove padding from menu items when no background #30805

Try: Remove padding from menu items when no background #30805

Conversation

jasmussen commented Apr 13, 2021 • edited Loading

Description

How has this been tested?

Checklist:

github-actions bot commented Apr 13, 2021 • edited Loading

priethor commented Apr 22, 2021

priethor left a comment

Choose a reason for hiding this comment

jasmussen commented Apr 23, 2021

jasmussen commented Apr 13, 2021 •

edited

Loading

github-actions bot commented Apr 13, 2021 •

edited

Loading