From 73f8ad691eb8e454d9ea150cdafe43dd3b75efec Mon Sep 17 00:00:00 2001 From: Nick Diego Date: Fri, 3 May 2024 10:35:11 -0400 Subject: [PATCH] Local Navigation Bar: Fix alignment of dropdown caret (#606) * Fix alignment of dropdown caret in local nav. * Fix bugs with initial implementation. * Linting. * Modify how padding is applied. * Linting. * Update value to match padding variable used. --- .../local-navigation-bar/postcss/style.pcss | 16 ++++++++++------ .../blocks/local-navigation-bar/src/view.js | 3 ++- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss b/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss index 069a2cc0d..7feddf2db 100644 --- a/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss +++ b/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss @@ -110,8 +110,13 @@ position: relative !important; top: 0 !important; - /* Matches the padding of the global header button. */ - padding-right: calc(16px + var(--wp--custom--alignment--scroll-bar-width)) !important; + /* Needed for aligning the dropdown caret correctly. */ + padding-right: 0; + + /* Add right padding if the dropdown caret is not being displayed. */ + & nav:not(.wporg-is-mobile-nav):not(.wporg-is-collapsed-nav) { + padding-right: var(--wp--preset--spacing--edge-space); + } & .global-header__wporg-logo-mark { display: none; @@ -225,6 +230,9 @@ & .wp-block-navigation__responsive-container-close { padding: 17px; + /* Add right padding to correctly align the dropdown caret. */ + padding-right: calc(16px + var(--wp--custom--alignment--scroll-bar-width)); + &:focus-visible { outline: none; border-radius: 2px; @@ -234,10 +242,6 @@ & .wp-block-navigation__responsive-container-close { margin-block-start: calc(var(--wp--custom--local-navigation-bar--spacing--height) * -1) !important; - - @media (max-width: 600px) { - margin-inline-end: calc(16px + var(--wp--custom--alignment--scroll-bar-width)); - } } & .wp-block-navigation__responsive-close, diff --git a/mu-plugins/blocks/local-navigation-bar/src/view.js b/mu-plugins/blocks/local-navigation-bar/src/view.js index d0f3eefb9..99ec8a803 100644 --- a/mu-plugins/blocks/local-navigation-bar/src/view.js +++ b/mu-plugins/blocks/local-navigation-bar/src/view.js @@ -82,7 +82,8 @@ function init() { window.innerWidth - parseInt( paddingInlineStart, 10 ) - parseInt( paddingInlineEnd, 10 ) - - parseInt( gap, 10 ); + parseInt( gap, 10 ) - + 20; // 20px right padding is added when the collapsed nav is hidden. const titleElement = container.querySelector( '.wp-block-site-title, div.wp-block-group' ); if ( ! titleElement ) {