diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index eefef7bbb41bfd..15ffdcf969edbd 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -8,7 +8,7 @@ display: flex; align-items: center; position: relative; - margin: 0 0.5em 0 0; + margin: 0 2em 0 0; .wp-block-navigation-link__container:empty { display: none; @@ -27,7 +27,21 @@ // Inherit colors set by the block color definition. color: inherit; display: block; - padding: 0.5em 1em; + } + + // Treat margins and paddings differently when the block has a background. + &.has-background { + // Menu item container. + .wp-block-pages-list__item, + .wp-block-navigation-link { + margin: 0 0.5em 0 0; + } + + // Menu item link. + .wp-block-pages-list__item__link, + .wp-block-navigation-link__content { + padding: 0.5em 1em; + } } // Force links to inherit text decoration applied to navigation block. @@ -216,6 +230,9 @@ color: #000; border: 1px solid rgba(0, 0, 0, 0.15); + // Add some padding to menus even if the parent menu item doesn't have. + padding: 1em; + .submenu-container, .wp-block-navigation-link__container { top: -1px; diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index fdc50a010e89e3..f9a4e10213b538 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -15,13 +15,14 @@ // Unset horizontal and vertical margin rules from editor normalization stylesheet. // Both margin-left: auto; and margin-right: auto; from .wp-block, and also // margin: revert; from .editor-styles-wrapper ul li. + // These rules are not necessary for block themes. .block-editor-block-list__block { margin: 0; // This CSS provides a little spacing between blocks. // It matches a rule in style.scss exactly, but needs higher specificity due to the unsetting of inherited styles above. &.wp-block-navigation-link { - margin: 0 0.5em 0 0; + margin: 0 2em 0 0; } &.has-child .block-editor-block-list__block.wp-block-navigation-link { @@ -34,6 +35,13 @@ margin-right: 0; } } + + &.block-editor-block-list__block.has-background { + .wp-block-pages-list__item.wp-block-pages-list__item, + .wp-block-navigation-link.wp-block-navigation-link { + margin: 0 0.5em 0 0; + } + } }