Skip to content

Commit

Permalink
Navigation Block / Page List: Unify menu item styles.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasmussen
jasmussen committed Mar 19, 2021
1 parent f790903 commit 4ad0952
Show file tree
Hide file tree
Showing 5 changed files with 180 additions and 215 deletions.
288 changes: 164 additions & 124 deletions packages/block-library/src/navigation-link/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,156 +1,196 @@
.wp-block-navigation-link {
display: flex;
align-items: center;
position: relative;
margin: 0 0.5em 0 0;

.wp-block-navigation-link__container:empty {
display: none;
}
}
// 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.
.wp-block-navigation {
// Menu item container.
.wp-block-pages-list__item,
.wp-block-navigation-link {
display: flex;
align-items: center;
position: relative;
margin: 0 0.5em 0 0;

// Styles for submenu flyout.
.has-child {
> .wp-block-navigation-link__content {
padding-right: 0.5em;
.wp-block-navigation-link__container:empty {
display: none;
}
}

.wp-block-navigation-link__container {
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: inherit;
// Menu item link.
.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
// Inherit colors set by the block color definition.
color: inherit;
position: absolute;
left: 0;
top: 100%;
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-navigation-link {
> .wp-block-navigation-link__content {
flex-grow: 1;
}
> .wp-block-navigation-link__submenu-icon {
padding-right: 0.5em;
}
display: block;
padding: 0.5em 1em;
}

// 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;
}

@include break-medium {
left: 1.5em;

// Nested submenus sit to the left on large breakpoints
.wp-block-navigation-link__container {
left: 100%;
top: -1px;

// 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;
}
}
.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
text-decoration: inherit;

.wp-block-navigation-link__submenu-icon svg {
transform: rotate(0);
&:focus,
&:active {
text-decoration: inherit;
}
}
}

// 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.
&:not([style*="text-decoration"]) {
.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
text-decoration: none;

// Show submenus on hover.
&:hover > .wp-block-navigation-link__container {
visibility: visible;
opacity: 1;
&:focus,
&:active {
text-decoration: none;
}
}
}

// Keep submenus open when focus is within.
&:focus-within > .wp-block-navigation-link__container {
visibility: visible;
opacity: 1;
// This wraps just the innermost text for custom menu items.
.wp-block-navigation-link__label {
word-break: normal;
overflow-wrap: break-word;
}
}

// 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;
}
}
// Submenu indicator.
.wp-block-page-list__submenu-icon,
.wp-block-navigation-link__submenu-icon {
height: inherit;
padding: 0.375em 1em 0.375em 0;

// Force links to inherit text decoration applied to navigation block.
.wp-block-navigation[style*="text-decoration"] {
.wp-block-navigation-link__container,
.wp-block-navigation-link {
text-decoration: inherit;
}
.wp-block-navigation-link__content {
text-decoration: inherit;
svg {
fill: currentColor;

&:focus,
&:active {
text-decoration: inherit;
@include break-medium {
transform: rotate(90deg);
}
}
}
}

.wp-block-navigation:not([style*="text-decoration"]) {
.wp-block-navigation-link__content {
text-decoration: none;
// Styles for submenu flyout.
.has-child {
> .wp-block-pages-list__item__link,
> .wp-block-navigation-link__content {
padding-right: 0.5em;
}

&:focus,
&:active {
text-decoration: none;
.submenu-container,
.wp-block-navigation-link__container {
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: inherit;
color: inherit;
position: absolute;
left: 0;
top: 100%;
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;
}
}

@include break-medium {
left: 1.5em;

// Nested submenus sit to the left on large breakpoints.
.submenu-container,
.wp-block-navigation-link__container {
left: 100%;
top: -$border-width;

// 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(0);
}
}
}
}
}

// All links.
.wp-block-navigation-link__content {
color: inherit;
padding: 0.5em 1em;
// 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.

+ .wp-block-navigation-link__content {
padding-top: 0;
}
.has-text-color & {
color: inherit;
}
}
// Custom menu items.
// Show submenus on hover.
&:hover > .wp-block-navigation-link__container {
visibility: visible;
opacity: 1;
}

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

.wp-block-navigation-link__submenu-icon {
height: inherit;
padding: 0.375em 1em 0.375em 0;
// Page list menu items.
&:hover {
cursor: pointer;

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

@include break-medium {
transform: rotate(90deg);
&:focus-within {
cursor: pointer;

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

// 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;
}
}
3 changes: 2 additions & 1 deletion packages/block-library/src/navigation/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
// These need extra specificity.
.editor-styles-wrapper .wp-block-navigation {
ul {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
padding-left: 0;
Expand Down Expand Up @@ -50,7 +51,7 @@
}
}

// Styles for submenu flyout
// Styles for submenu flyout.
.has-child {
&.is-selected,
&.has-child-selected,
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/navigation/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@
}
}

// Navigation block inner container.
.wp-block-navigation__container {
// Vertically align child blocks, like Social Links or Search.
// Vertically center child blocks, like Social Links or Search.
align-items: center;

// Reset the default list styles
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/page-list/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
}
}

// Make links unclickable in the editor
// Make links unclickable in the editor.
.wp-block-pages-list__item__link {
pointer-events: none;
}
Expand Down
Loading

0 comments on commit 4ad0952

Please sign in to comment.