From a646b056a8bfc4a7391f7318bae9874124aad2c5 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 19 Aug 2021 14:11:40 +0200 Subject: [PATCH 1/2] Refactor navigation block to use generic classnames. --- packages/base-styles/_z-index.scss | 4 +- .../src/navigation-link/editor.scss | 20 ++--- .../block-library/src/navigation/editor.scss | 6 +- .../block-library/src/navigation/style.scss | 84 ++++++++----------- .../block-library/src/page-list/style.scss | 2 +- .../src/components/editor/style.scss | 20 ++--- 6 files changed, 61 insertions(+), 75 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index de9ec9d6917e5..5b7ddc1a0f0e1 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -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, + ".has-child:hover .wp-block-navigation__submenu-container": 29, // Active pill button ".components-button {:focus or .is-primary}": 1, diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index a720088d055dd..e11e9c949381c 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -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. @@ -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; @@ -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; } @@ -96,7 +94,7 @@ } // This needs extra specificity. - &.wp-block-navigation-link__content { + &.wp-block-navigation-item__content { cursor: pointer; } } diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index fff28e42151ab..47fa26ce4920c 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -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; } @@ -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; @@ -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; } diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index b37e4dbd0244f..5172b8ca3ab6e 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -1,8 +1,12 @@ // 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; @@ -27,13 +31,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; } } @@ -50,9 +53,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; } @@ -78,7 +80,6 @@ } // Submenu indicator. - .wp-block-page-list__submenu-icon, .wp-block-navigation-link__submenu-icon { align-self: center; height: inherit; @@ -99,7 +100,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; @@ -115,15 +116,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; } @@ -143,8 +142,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. @@ -161,8 +159,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); } } @@ -174,13 +171,13 @@ // 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; } @@ -206,15 +203,13 @@ } // 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; } @@ -229,8 +224,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. @@ -245,8 +240,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. @@ -277,7 +272,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; } @@ -295,14 +290,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%; } @@ -311,8 +304,9 @@ // Default background and font color. .wp-block-navigation:not(.has-background) { + // @todo: check this one separately. .submenu-container, // This target items created by the Page List block. - .wp-block-navigation__container .wp-block-navigation-link__container { + .wp-block-navigation__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 @@ -374,8 +368,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; } @@ -432,10 +425,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; } @@ -456,8 +447,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; } } @@ -537,13 +527,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; @@ -552,8 +541,7 @@ border: none; } - .wp-block-navigation-link, - .wp-block-pages-list__item { + .wp-block-navigation-item { flex-direction: column; align-items: flex-start; } diff --git a/packages/block-library/src/page-list/style.scss b/packages/block-library/src/page-list/style.scss index 8b2355c8f9740..806c075319eaa 100644 --- a/packages/block-library/src/page-list/style.scss +++ b/packages/block-library/src/page-list/style.scss @@ -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; } diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss index eaa1ae7e3221e..74077954e1dc3 100644 --- a/packages/edit-navigation/src/components/editor/style.scss +++ b/packages/edit-navigation/src/components/editor/style.scss @@ -34,7 +34,7 @@ display: block; // Show submenus on click. - > .wp-block-navigation-link__container { + > .wp-block-navigation__submenu-container { // This unsets some styles inherited from the block, meant to only show submenus on click, not hover, when inside the editor. opacity: 1; visibility: visible; @@ -44,8 +44,8 @@ } // Fix focus outlines. - &.is-selected > .wp-block-navigation-link__content, - &.is-selected:hover > .wp-block-navigation-link__content { + &.is-selected > .wp-block-navigation-item__content, + &.is-selected:hover > .wp-block-navigation-item__content { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); } @@ -59,7 +59,7 @@ margin-right: 0; } - .wp-block-navigation-link__content.wp-block-navigation-link__content.wp-block-navigation-link__content { + .wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content { padding: 0.5em 1em; margin-bottom: 6px; margin-right: 0; @@ -91,7 +91,7 @@ pointer-events: none; margin-right: 0; - .wp-block-pages-list__item { + .wp-block-navigation-item { color: $gray-700; margin-bottom: 6px; border-radius: $radius-block-ui; @@ -101,7 +101,7 @@ } // Submenu icon indicator. - .wp-block-navigation-link__submenu-icon { + .wp-block-navigation__submenu-icon { position: absolute; top: 6px; left: 0; @@ -118,8 +118,8 @@ } // Point downwards when open. - .is-selected.has-child > .wp-block-navigation-link__submenu-icon svg, - .has-child-selected.has-child > .wp-block-navigation-link__submenu-icon svg { + .is-selected.has-child > .wp-block-navigation__submenu-icon svg, + .has-child-selected.has-child > .wp-block-navigation__submenu-icon svg { transform: rotate(0deg); } @@ -131,7 +131,7 @@ // Override for deeply nested submenus. .has-child .wp-block-navigation__container .wp-block-navigation__container, - .has-child .wp-block-navigation__container .wp-block-navigation-link__container { + .has-child .wp-block-navigation__container .wp-block-navigation__submenu-container { left: auto; } @@ -139,7 +139,7 @@ // and adjust the spacing and submenu icon. .wp-block-navigation-link.has-child.is-editing { > .wp-block-navigation__container, - > .wp-block-navigation-link__container { + > .wp-block-navigation__submenu-container { opacity: 1; visibility: visible; position: relative; From 8994a786e66f6b6f6b1481d71403d4317bc072a1 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 24 Aug 2021 11:08:32 +0200 Subject: [PATCH 2/2] Address feedback. --- .../block-library/src/navigation/style.scss | 26 ++----------------- 1 file changed, 2 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 5172b8ca3ab6e..59edade44dcfa 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -1,5 +1,4 @@ // Navigation block and menu item styles. -// as that block is meant to behave as menu items when leveraged. // These styles also affect the Page List block when used inside your navigation block. // // Classes: @@ -80,7 +79,7 @@ } // Submenu indicator. - .wp-block-navigation-link__submenu-icon { + .wp-block-navigation__submenu-icon { align-self: center; height: inherit; line-height: 0; @@ -181,25 +180,6 @@ 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; - } - } } // Submenu indentation when there's a background. @@ -304,9 +284,7 @@ // Default background and font color. .wp-block-navigation:not(.has-background) { - // @todo: check this one separately. - .submenu-container, // This target items created by the Page List block. - .wp-block-navigation__container .wp-block-navigation__submenu-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