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

Fix issue with missing styles for Page List in navigation. #31368

Merged
merged 1 commit into from
May 3, 2021
Merged

Fix issue with missing styles for Page List in navigation. #31368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
282 changes: 3 additions & 279 deletions packages/block-library/src/navigation-link/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,287 +1,11 @@
// Navigation item styles.
// This also styles navigation links inside the Page List block,
// as that block is meant to behave as menu items when leveraged.
// Contains styles only that are unique to the manually inserted menu item.
// Styles in the Navigation block itself target both custom menu items, and
// those from the Page List block.
.wp-block-navigation {
// Menu item container.
.wp-block-pages-list__item,
.wp-block-navigation-link {
display: flex;
align-items: center;
position: relative;

.wp-block-navigation-link__container:empty {
display: none;
}
}

// Menu item link.
.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
// Inherit colors set by the block color definition.
color: inherit;
display: block;
}

// Force links to inherit text decoration applied to navigation block.
// The extra selector adds specificity to ensure it works when user-set.
&[style*="text-decoration"] {
.wp-block-pages-list__item,
.wp-block-navigation-link__container,
.wp-block-navigation-link {
text-decoration: inherit;
}

.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
text-decoration: inherit;

&:focus,
&:active {
text-decoration: inherit;
}
}
}

&:not([style*="text-decoration"]) {
.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
text-decoration: none;

&:focus,
&:active {
text-decoration: none;
}
}
}

// This wraps just the innermost text for custom menu items.
.wp-block-navigation-link__label {
word-break: normal;
overflow-wrap: break-word;
}

// Submenu indicator.
.wp-block-page-list__submenu-icon,
.wp-block-navigation-link__submenu-icon {
height: inherit;

svg {
stroke: currentColor;
}
}

// Some themes have added custom padding to the link, which does not consider the Page List block.
// Unfortunately we now need to add extra specificity and undo that, so that the block still works.
.wp-block-pages-list__item .wp-block-pages-list__item__link,
.wp-block-navigation-link .wp-block-navigation-link__content.wp-block-navigation-link__content.wp-block-navigation-link__content {
padding: 0;
}

// Styles for submenu flyout.
.has-child {
// This adds a little space between the link and the dropdown icon.
> .wp-block-pages-list__item__link,
> .wp-block-navigation-link__content {
margin-right: 0.5em;
}

.submenu-container,
.wp-block-navigation-link__container {
background-color: inherit;
color: inherit;
position: absolute;
z-index: 2;
display: flex;
flex-direction: column;
align-items: normal;
min-width: 200px;

// Hide until hover or focus within.
opacity: 0;
transition: opacity 0.1s linear;
visibility: hidden;

> .wp-block-pages-list__item,
> .wp-block-navigation-link {
> .wp-block-pages-list__item__link,
> .wp-block-navigation-link__content {
flex-grow: 1;
}

> .wp-block-page-list__submenu-icon,
> .wp-block-navigation-link__submenu-icon {
padding-right: 0.5em;
}
}

// Nested submenus sit to the left on large breakpoints.
// On smaller breakpoints, they open vertically, accordion-style.
@include break-medium {
.submenu-container,
.wp-block-navigation-link__container {
// Prevent the menu from disappearing when the mouse is over the gap
&::before {
content: "";
position: absolute;
right: 100%;
height: 100%;
display: block;
width: 0.5em;
background: transparent;
}
}

// Reset the submenu indicator for horizontal flyouts.
.wp-block-page-list__submenu-icon svg,
.wp-block-navigation-link__submenu-icon svg {
transform: rotate(-90deg);
}
}
}

// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
// We will need to replace focus-within with a JS solution for IE keyboard support.

// Custom menu items.
// Show submenus on hover.
&:hover > .wp-block-navigation-link__container {
visibility: visible;
opacity: 1;
}

// Keep submenus open when focus is within.
&:focus-within > .wp-block-navigation-link__container {
visibility: visible;
opacity: 1;
}

// Page list menu items.
&:hover {
cursor: pointer;

> .submenu-container {
visibility: visible;
opacity: 1;
}
}

&:focus-within {
cursor: pointer;

> .submenu-container {
visibility: visible;
opacity: 1;
}
}
}


// When justified space-between, open submenus leftward for last menu item.
// When justified right, open all submenus leftwards.
&.items-justified-space-between > .submenu-container > .has-child:last-child,
&.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
&.items-justified-right .has-child {
// First submenu.
.submenu-container,
.wp-block-navigation-link__container {
left: auto;
right: 0;

// Nested submenus.
.submenu-container,
.wp-block-navigation-link__container {
left: auto;
right: 100%;
}
}
}
}

// Margins, paddings, and submenu positions.
// These need extra specificity to override potentially inherited properties.
.wp-block-navigation.wp-block-navigation {

// Menu items with no background.
.wp-block-page-list,
.wp-block-page-list > .wp-block-pages-list__item,
.wp-block-navigation__container > .wp-block-navigation-link {
margin: 0 2em 0 0;

// Margin of right-most margin should be zero, for right aligned or justified items.
&:last-child {
margin-right: 0;
}
}

// When the menu has a background, items have paddings, reduce margins to compensate.
// Treat margins and paddings differently when the block has a background.
&.has-background {
.wp-block-page-list,
.wp-block-page-list > .wp-block-pages-list__item,
.wp-block-navigation__container > .wp-block-navigation-link {
margin: 0 0.5em 0 0;
}

.wp-block-page-list .wp-block-pages-list__item__link,
.wp-block-navigation__container .wp-block-navigation-link__content {
padding: 0.5em 1em;
}
}

// Spacing in all submenus.
.has-child .submenu-container,
.has-child .wp-block-navigation-link__container {
.wp-block-pages-list__item,
.wp-block-navigation-link {
margin: 0;
}

.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
padding: 0.5em 1em;
}

// Submenu indentation when there's no background.
left: -1em;
top: 100%;

// Indentation for all submenus.
@include break-medium {
.submenu-container,
.wp-block-navigation-link__container {
left: 100%;
top: -1px; // Border width.
}
}
}

// Submenu indentation when there's a background.
&.has-background .has-child .submenu-container,
&.has-background .has-child .wp-block-navigation-link__container {
left: 0;
top: 100%;

// There's no border on submenus when there are backgrounds.
@include break-medium {
.submenu-container,
.wp-block-navigation-link__container {
left: 100%;
top: 0;
}
}
}
}

// Default background and font color.
.wp-block-navigation:not(.has-background) {
.submenu-container, // This target items created by the Page List block.
.wp-block-navigation__container .wp-block-navigation-link__container {
// Set a background color for submenus so that they're not transparent.
// NOTE TO DEVS - if refactoring this code, please double-check that
// submenus have a default background color, this feature has regressed
// several times, so care needs to be taken.
background-color: #fff;
color: #000;
border: 1px solid rgba(0, 0, 0, 0.15);
}
}
Loading