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

Refactor navigation block to use generic classnames. #34171

Merged
merged 2 commits into from
Aug 26, 2021
Merged

Refactor navigation block to use generic classnames. #34171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a646b05
Refactor navigation block to use generic classnames.
jasmussen Aug 19, 2021
8994a78
Address feedback.
jasmussen Aug 24, 2021
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
4 changes: 2 additions & 2 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ $z-layers: (
".wp-block-template-part__placeholder-preview-filter-input": 1,

// Navigation menu dropdown.
".has-child .wp-block-navigation-link__container": 28,
".has-child:hover .wp-block-navigation-link__container": 29,
".has-child .wp-block-navigation__submenu-container": 28,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It'd be great to have some docs in the navigation block's readme about how these classnames work.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I took a stab at that here: https://github.com/WordPress/gutenberg/pull/34344/files#diff-b43a36c885bf6479506b3541da11760e584757fd78809954b3ff785f54a2e11dR47 — let me know if that looks right to you.

".has-child:hover .wp-block-navigation__submenu-container": 29,

// Active pill button
".components-button {:focus or .is-primary}": 1,
Expand Down
20 changes: 9 additions & 11 deletions packages/block-library/src/navigation-link/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Normalize Link and edit containers, to look mostly the same.
.wp-block-navigation-link__container {
.wp-block-navigation__submenu-container {
border-radius: 0;

// Make it the same height as the appender to prevent a jump.
Expand All @@ -15,22 +15,20 @@
.wp-block-navigation .has-child {
cursor: pointer;

.submenu-container,
.wp-block-navigation-link__container {
z-index: z-index(".has-child .wp-block-navigation-link__container");
.wp-block-navigation__submenu-container {
z-index: z-index(".has-child .wp-block-navigation__submenu-container");
}

&:hover {
.submenu-container,
.wp-block-navigation-link__container {
z-index: z-index(".has-child:hover .wp-block-navigation-link__container");
.wp-block-navigation__submenu-container {
z-index: z-index(".has-child:hover .wp-block-navigation__submenu-container");
}
}

// Show on editor selected, even if on frontend it only stays open on focus-within.
&.is-selected,
&.has-child-selected {
> .wp-block-navigation-link__container {
> .wp-block-navigation__submenu-container {
// We use important here because if the parent block is selected and submenus are present, they should always be visible.
visibility: visible !important;
opacity: 1 !important;
Expand All @@ -44,11 +42,11 @@
*/

.wp-block-navigation-link {
.wp-block-navigation-link__container {
.wp-block-navigation__submenu-container {
display: block;
}

.wp-block-navigation-link__content {
.wp-block-navigation-item__content {
cursor: text;
}

Expand Down Expand Up @@ -96,7 +94,7 @@
}

// This needs extra specificity.
&.wp-block-navigation-link__content {
&.wp-block-navigation-item__content {
cursor: pointer;
}
}
6 changes: 3 additions & 3 deletions packages/block-library/src/navigation/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@

// Only show the flyout on hover if the parent menu item is selected.
.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover {
> .wp-block-navigation-link__container {
> .wp-block-navigation__submenu-container {
opacity: 0;
visibility: hidden;
}
Expand All @@ -47,7 +47,7 @@
.has-child {
&.is-selected,
&.has-child-selected {
> .wp-block-navigation-link__container {
> .wp-block-navigation__submenu-container {
display: flex;
opacity: 1;
visibility: visible;
Expand All @@ -58,7 +58,7 @@
// Show a submenu when generally dragging (is-dragging-components-draggable) if that
// submenu has children (has-child) and is being dragged within (is-dragging-within).
.is-dragging-components-draggable .has-child.is-dragging-within {
> .wp-block-navigation-link__container {
> .wp-block-navigation__submenu-container {
opacity: 1;
visibility: visible;
}
Expand Down
106 changes: 36 additions & 70 deletions packages/block-library/src/navigation/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
// Navigation block and menu item styles.
// This also styles navigation links inside the Page List block,
// as that block is meant to behave as menu items when leveraged.
// The CSS lives here so that it is output even if you only use a
// Page List block inside your navigation block.
// These styles also affect the Page List block when used inside your navigation block.
//
// Classes:
// - .wp-block-navigation__submenu-container targets submenu containers.
// - .wp-block-navigation-item targets the menu item itself.
// - .wp-block-navigation-item__content targets the link inside a menu item.
// - .wp-block-navigation__submenu-icon targets the chevron icon indicating submenus.
.wp-block-navigation {
position: relative;

Expand All @@ -27,13 +30,12 @@
}

// Menu item container.
.wp-block-pages-list__item,
.wp-block-navigation-link {
.wp-block-navigation-item {
display: flex;
align-items: center;
position: relative;

.wp-block-navigation-link__container:empty {
.wp-block-navigation__submenu-container:empty {
display: none;
}
}
Expand All @@ -50,9 +52,8 @@
// 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 {
.wp-block-navigation-item,
.wp-block-navigation__submenu-container {
text-decoration: inherit;
}

Expand All @@ -78,8 +79,7 @@
}

// Submenu indicator.
.wp-block-page-list__submenu-icon,
.wp-block-navigation-link__submenu-icon {
.wp-block-navigation__submenu-icon {
align-self: center;
height: inherit;
line-height: 0;
Expand All @@ -99,7 +99,7 @@
// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
// That way if padding is set in theme.json, it still wins.
// https://css-tricks.com/almanac/selectors/w/where/
:where(.submenu-container, .wp-block-navigation-link__container) {
:where(.wp-block-navigation__submenu-container) {
background-color: inherit;
color: inherit;
position: absolute;
Expand All @@ -115,15 +115,13 @@
visibility: hidden;

// Submenu items.
> .wp-block-pages-list__item,
> .wp-block-navigation-link {
> .wp-block-navigation-item {
> a {
display: flex;
flex-grow: 1;

// Right-align the chevron in submenus.
.wp-block-page-list__submenu-icon,
.wp-block-navigation-link__submenu-icon {
.wp-block-navigation__submenu-icon {
margin-right: 0;
margin-left: auto;
}
Expand All @@ -143,8 +141,7 @@
// 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 {
.wp-block-navigation__submenu-container {
left: 100%;
top: -1px; // Border width.

Expand All @@ -161,8 +158,7 @@
}

// Reset the submenu indicator for horizontal flyouts.
.wp-block-page-list__submenu-icon svg,
.wp-block-navigation-link__submenu-icon svg {
.wp-block-navigation__submenu-icon svg {
transform: rotate(-90deg);
}
}
Expand All @@ -174,47 +170,26 @@

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

// Keep submenus open when focus is within.
&:focus-within > .wp-block-navigation-link__container {
&:focus-within > .wp-block-navigation__submenu-container {
visibility: visible;
opacity: 1;
}
tellthemachines marked this conversation as resolved.
Show resolved Hide resolved

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

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

&:focus-within {
cursor: pointer;

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

// Submenu indentation when there's a background.
.wp-block-navigation.has-background .has-child .submenu-container,
.wp-block-navigation.has-background .has-child .wp-block-navigation-link__container {
.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-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 {
.wp-block-navigation__submenu-container {
left: 100%;
top: 0;
}
Expand All @@ -229,8 +204,8 @@

// 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 {
.wp-block-page-list > .wp-block-navigation-item,
.wp-block-navigation__container > .wp-block-navigation-item {
margin: 0 2em 0 0;

// Margin of right-most margin should be zero, for right aligned or justified items.
Expand All @@ -245,8 +220,8 @@
// https://css-tricks.com/almanac/selectors/w/where/
.wp-block-navigation:where(.has-background) {
.wp-block-page-list,
.wp-block-page-list > .wp-block-pages-list__item,
.wp-block-navigation__container > .wp-block-navigation-link {
.wp-block-page-list > .wp-block-navigation-item,
.wp-block-navigation__container > .wp-block-navigation-item {
margin: 0 0.5em 0 0;

// Don't show right margin on the last child.
Expand Down Expand Up @@ -277,7 +252,7 @@
}

// Provide a default padding for submenus who should always have some, regardless of the top level menu items.
.wp-block-navigation :where(.submenu-container, .wp-block-navigation-link__container) a {
.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
padding: 0.5em 1em;
}

Expand All @@ -295,14 +270,12 @@
.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child {

// First submenu.
.submenu-container,
.wp-block-navigation-link__container {
.wp-block-navigation__submenu-container {
left: auto;
right: 0;

// Nested submenus.
.submenu-container,
.wp-block-navigation-link__container {
.wp-block-navigation__submenu-container {
left: auto;
right: 100%;
}
Expand All @@ -311,8 +284,7 @@

// 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 {
.wp-block-navigation__submenu-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
Expand Down Expand Up @@ -374,8 +346,7 @@
.is-vertical.items-justified-right > ul {
align-items: flex-end;

.wp-block-navigation-link,
.wp-block-pages-list__item {
.wp-block-navigation-item {
margin-right: 0;
justify-content: flex-end;
}
Expand Down Expand Up @@ -432,10 +403,8 @@
// Remove background colors for items inside the overlay menu.
// Has to be !important to override global styles.
// @todo: We should revisit this so that the overlay colors can be applied, instead of the background.
.wp-block-pages-list__item .submenu-container,
.wp-block-navigation-link .wp-block-navigation-link__container,
.wp-block-pages-list__item,
.wp-block-navigation-link {
.wp-block-navigation-item .wp-block-navigation__submenu-container,
.wp-block-navigation-item {
color: inherit !important;
background: transparent !important;
}
Expand All @@ -456,8 +425,7 @@

&.is-menu-open {
// Override breakpoint-inherited submenu rules.
.submenu-container.submenu-container.submenu-container.submenu-container,
.wp-block-navigation-link__container.wp-block-navigation-link__container.wp-block-navigation-link__container.wp-block-navigation-link__container {
.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
left: 0;
}
}
Expand Down Expand Up @@ -537,13 +505,12 @@

// Always show submenus fully expanded inside the modal menu.
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
.wp-block-page-list__submenu-icon,
.wp-block-navigation-link__submenu-icon {
.wp-block-navigation__submenu-icon {
display: none;
}

.has-child .submenu-container,
.has-child .wp-block-navigation-link__container {
.has-child .wp-block-navigation__submenu-container {
position: relative;
opacity: 1;
visibility: visible;
Expand All @@ -552,8 +519,7 @@
border: none;
}

.wp-block-navigation-link,
.wp-block-pages-list__item {
.wp-block-navigation-item {
flex-direction: column;
align-items: flex-start;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/page-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

// Menu items generated by the page list do not get `has-[x]-background-color`,
// and must therefore inherit from the parent.
.wp-block-pages-list__item {
.wp-block-navigation-item {
background-color: inherit;
}

Expand Down
Loading