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

Jump to bottom

Navigation Block / Page List: Unify menu item styles. #29975

Merged
merged 1 commit into from
Mar 23, 2021
Merged

Navigation Block / Page List: Unify menu item styles. #29975

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
289 changes: 164 additions & 125 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,157 +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 {
display: block;
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
Open in desktop
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
Open in desktop
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
Open in desktop
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