Skip to content

Commit

Permalink
First stab at accordion as block style
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamziel
adamziel committed Sep 27, 2021
1 parent ea471c0 commit 31d4d99
Show file tree
Hide file tree
Showing 5 changed files with 223 additions and 187 deletions.
8 changes: 8 additions & 0 deletions packages/block-library/src/navigation/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,14 @@
"__experimentalTextDecoration": true
}
},
"styles": [
{
"name": "dropdown",
"label": "Dropdown",
"isDefault": true
},
{ "name": "accordion", "label": "Accordion" }
],
"viewScript": "file:./view.min.js",
"editorStyle": "wp-block-navigation-editor",
"style": "wp-block-navigation"
Expand Down
186 changes: 166 additions & 20 deletions packages/block-library/src/navigation/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,26 +41,6 @@
background-color: inherit;
}

// 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__submenu-container {
opacity: 0;
visibility: hidden;
}
}

// Styles for submenu flyout.
.has-child {
&.is-selected,
&.has-child-selected {
> .wp-block-navigation__submenu-container {
display: flex;
opacity: 1;
visibility: visible;
}
}
}

// 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).
Expand Down Expand Up @@ -515,3 +495,169 @@ body.editor-styles-wrapper
margin-top: $grid-unit-20;
}
}

// Styles for dropdown style menu.
.wp-block-navigation:where(.is-style-dropdown),
.wp-block-navigation:where(:not(.is-style-dropdown):not(.is-style-accordion)) {
// Styles for submenu flyout.
.has-child {
&.is-selected,
&.has-child-selected {
> .wp-block-navigation__submenu-container {
display: flex;
opacity: 1;
visibility: visible;
}
}
}

// 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__submenu-container {
opacity: 0;
visibility: hidden;
}
}
}

// Styles for accordion style menu.
.wp-block-navigation.is-style-accordion {
padding: 0;

// Increase specificity.
.wp-block-navigation-item {
display: block;
margin: $grid-unit-10 0;

// Show submenus on click.
> .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;
display: none;
right: auto;
box-sizing: border-box;
}

// Fix focus outlines.
&.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);
}

&.block-editor-block-list__block:not([contenteditable]):focus::after {
display: none;
}

.wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
padding: 0.5em 1em;
margin-right: 0;
border-radius: $radius-block-ui;

&:hover {
box-shadow: 0 0 0 $border-width $gray-300;
}
}

.wp-block-navigation-link__label,
.wp-block-navigation-link__placeholder-text {
padding: $grid-unit-05;
padding-left: $grid-unit-10;
}

.wp-block-navigation-link__label {
// Without this Links with submenus display a pointer.
cursor: text;
}
}


// Basic Page List support.
ul.wp-block-page-list {
// Make it inert.
background: $gray-100;
border-radius: $radius-block-ui;
pointer-events: none;
margin-right: 0;

.wp-block-navigation-item {
color: $gray-700;
margin-bottom: 6px;
border-radius: $radius-block-ui;
padding: $grid-unit-05;
padding-left: $grid-unit-10;
}
}

// Submenu icon indicator.
.wp-block-navigation__submenu-icon {
position: absolute;
top: 15px;
left: 0;
padding: 0;
pointer-events: none;

svg {
// Point rightwards.
transform: rotate(-90deg);
transition: transform 0.2s ease;
@include reduce-motion("transition");
}
}

// Point downwards when open.
.wp-block-navigation-submenu.is-selected > .wp-block-navigation-item__content > .wp-block-navigation__submenu-icon svg,
.wp-block-navigation-submenu.has-child-selected > .wp-block-navigation-item__content > .wp-block-navigation__submenu-icon svg {
transform: rotate(0deg);
}

// Override inherited values to optimize menu items for the screen context.
.wp-block-navigation-submenu.has-child,
.wp-block-navigation-item.has-child {
cursor: default;
border-radius: $radius-block-ui;
}

// Override for deeply nested submenus.
.has-child .wp-block-navigation__container .wp-block-navigation__submenu-container {
left: auto;
}

// When editing a submenu with children, highlight the parent
// and adjust the spacing and submenu icon.
.wp-block-navigation-submenu.is-editing {
> .wp-block-navigation__submenu-container {
opacity: 1;
visibility: visible;
position: relative;
background: transparent;
top: auto;
left: auto;
padding-left: $grid-unit-20 + $grid-unit-05;
min-width: auto;
width: 100%;
border: none;
display: block;

&::before {
display: none;
}
}
}

// Appender styles
.block-list-appender {
// Make appender rows the same height as items and center the button vertically.
display: flex;
flex-direction: column;
justify-content: center;
height: $grid-unit-50;
margin: $grid-unit-10 0;
}

.block-editor-button-block-appender.block-list-appender__toggle {
margin: 0 0 0 $grid-unit-30;
padding: 0;
}
}
76 changes: 48 additions & 28 deletions packages/block-library/src/navigation/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,44 @@
a {
margin: 0;
}
}

// 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 unless they open on click.
&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
visibility: visible;
opacity: 1;
width: auto;
height: auto;
min-width: 200px;
}

// Keep submenus open when focus is within.
&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
visibility: visible;
opacity: 1;
width: auto;
height: auto;
min-width: 200px;
}

// Show submenus on click.
.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
visibility: visible;
opacity: 1;
width: auto;
height: auto;
min-width: 200px;
}
}

// Styles for dropdown style menu.
.wp-block-navigation:where(.is-style-dropdown) .has-child,
.wp-block-navigation:where(:not(.is-style-dropdown):not(.is-style-accordion)) .has-child {
:where(.wp-block-navigation__submenu-container) {
// Submenu indentation when there's no background.
left: -1em;
top: 100%;
Expand Down Expand Up @@ -171,36 +208,19 @@
}
}
}
}

// 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 unless they open on click.
&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
visibility: visible;
opacity: 1;
width: auto;
height: auto;
min-width: 200px;
}

// Keep submenus open when focus is within.
&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
visibility: visible;
opacity: 1;
width: auto;
height: auto;
min-width: 200px;
}
// Styles for submenu accordion.
// These are separated out with reduced specificity to allow better inheritance from Global Styles.
.wp-block-navigation:where(.is-style-accordion) .has-child {
display: block;
margin: $grid-unit-10 0;

// Show submenus on click.
.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
visibility: visible;
opacity: 1;
width: auto;
height: auto;
min-width: 200px;
// 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(.wp-block-navigation__submenu-container) {
position: relative;
}
}

Expand Down
Loading

0 comments on commit 31d4d99

Please sign in to comment.