Skip to content

Commit 5d0db58

Browse files
jasmussenjasmussen
authored
Polish navigation menu submenus. (#30335)
1 parent 2038491 commit 5d0db58

File tree

1 file changed

+105
-81
lines changed
  • packages/edit-navigation/src/components/editor

1 file changed

+105
-81
lines changed

‎packages/edit-navigation/src/components/editor/style.scss‎

Lines changed: 105 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -23,106 +23,130 @@
2323

2424
// This is the default font that is going to be used in the content of the areas (blocks).
2525
font-family: $default-font;
26-
}
2726

28-
// Increase specificity.
29-
.wp-block-navigation .wp-block-navigation-link {
30-
display: block;
27+
// Increase specificity.
28+
.wp-block-navigation-link {
29+
display: block;
3130

32-
// Show submenus on click.
33-
> .wp-block-navigation-link__container {
34-
// This unsets some styles inherited from the block, meant to only show submenus on click, not hover, when inside the editor.
35-
opacity: 1;
36-
visibility: visible;
37-
display: none;
38-
}
31+
// Show submenus on click.
32+
> .wp-block-navigation-link__container {
33+
// This unsets some styles inherited from the block, meant to only show submenus on click, not hover, when inside the editor.
34+
opacity: 1;
35+
visibility: visible;
36+
display: none;
37+
}
3938

40-
// Fix focus outlines.
41-
&.is-selected > .wp-block-navigation-link__content,
42-
&.is-selected:hover > .wp-block-navigation-link__content {
43-
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
44-
}
39+
// Fix focus outlines.
40+
&.is-selected > .wp-block-navigation-link__content,
41+
&.is-selected:hover > .wp-block-navigation-link__content {
42+
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
43+
}
4544

46-
&.block-editor-block-list__block:not([contenteditable]):focus::after {
47-
display: none;
45+
&.block-editor-block-list__block:not([contenteditable]):focus::after {
46+
display: none;
47+
}
48+
49+
// Menu items.
50+
.wp-block-navigation-link__content {
51+
margin-bottom: 6px;
52+
border-radius: $radius-block-ui;
53+
54+
&:hover {
55+
box-shadow: 0 0 0 $border-width $gray-300;
56+
}
57+
}
58+
59+
.wp-block-navigation-link__label,
60+
.wp-block-navigation-link__placeholder-text {
61+
padding: $grid-unit-05;
62+
padding-left: $grid-unit-10;
63+
}
64+
65+
.wp-block-navigation-link__label {
66+
// Without this Links with submenus display a pointer.
67+
cursor: text;
68+
}
4869
}
49-
}
5070

51-
.wp-block-navigation-link__content {
52-
margin-bottom: 6px;
53-
border-radius: $radius-block-ui;
5471

55-
&:hover {
56-
box-shadow: 0 0 0 $border-width $gray-300;
72+
// Basic Page List support.
73+
ul.wp-block-page-list {
74+
// Make it inert.
75+
background: $gray-100;
76+
border-radius: $radius-block-ui;
77+
pointer-events: none;
78+
79+
.wp-block-pages-list__item {
80+
color: $gray-700;
81+
margin-bottom: 6px;
82+
border-radius: $radius-block-ui;
83+
padding: $grid-unit-05;
84+
padding-left: $grid-unit-10;
85+
}
5786
}
58-
}
5987

60-
.wp-block-navigation-link__label,
61-
.wp-block-navigation-link__placeholder-text {
62-
padding: $grid-unit-05;
63-
padding-left: $grid-unit-10;
64-
}
88+
// Submenu icon indicator.
89+
.wp-block-navigation-link__submenu-icon {
90+
position: absolute;
91+
top: 6px;
92+
left: 0;
93+
padding: 6px;
94+
pointer-events: none;
6595

66-
.wp-block-navigation-link__label {
67-
// Without this Links with submenus display a pointer.
68-
cursor: text;
69-
}
96+
svg {
97+
// Point rightwards.
98+
transform: rotate(-90deg);
7099

71-
// Position the submenu icon so it appears to the left of
72-
// the Link. All the extra specificity is help override the
73-
// rotation on the SVG.
74-
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__submenu-icon {
75-
position: absolute;
76-
top: 6px;
77-
left: 2px;
78-
padding: 6px;
79-
pointer-events: none;
80-
81-
svg {
82-
padding: 0;
100+
transition: transform 0.2s ease;
101+
@include reduce-motion("transition");
102+
}
83103
}
84-
}
85104

86-
// Submenus
87-
// There's a bunch of stuff to override just to get submenus to
88-
// as a normal block element.
89-
.wp-block-navigation-link.has-child {
90-
cursor: default;
91-
border-radius: $radius-block-ui;
92-
}
105+
// Point downwards when open.
106+
.is-selected.has-child > .wp-block-navigation-link__submenu-icon svg,
107+
.has-child-selected.has-child > .wp-block-navigation-link__submenu-icon svg {
108+
transform: rotate(0deg);
109+
}
93110

94-
// Override Nav block styling for deeply nested submenus.
95-
.has-child .wp-block-navigation__container .wp-block-navigation__container,
96-
.has-child .wp-block-navigation__container .wp-block-navigation-link__container {
97-
left: auto;
98-
}
111+
// Override inherited values to optimize menu items for the screen context.
112+
.wp-block-navigation-link.has-child {
113+
cursor: default;
114+
border-radius: $radius-block-ui;
115+
}
99116

100-
// When editing a link with children, highlight the parent
101-
// and adjust the spacing and submenu icon.
102-
.wp-block-navigation-link.has-child.is-editing {
103-
> .wp-block-navigation__container,
104-
> .wp-block-navigation-link__container {
105-
opacity: 1;
106-
visibility: visible;
107-
position: relative;
108-
background: transparent;
109-
top: auto;
117+
// Override for deeply nested submenus.
118+
.has-child .wp-block-navigation__container .wp-block-navigation__container,
119+
.has-child .wp-block-navigation__container .wp-block-navigation-link__container {
110120
left: auto;
111-
padding-left: $grid-unit-15;
112-
min-width: auto;
113-
width: 100%;
114-
border: none;
115-
display: block;
121+
}
116122

117-
&::before {
118-
display: none;
123+
// When editing a link with children, highlight the parent
124+
// and adjust the spacing and submenu icon.
125+
.wp-block-navigation-link.has-child.is-editing {
126+
> .wp-block-navigation__container,
127+
> .wp-block-navigation-link__container {
128+
opacity: 1;
129+
visibility: visible;
130+
position: relative;
131+
background: transparent;
132+
top: auto;
133+
left: auto;
134+
padding-left: $grid-unit-15;
135+
min-width: auto;
136+
width: 100%;
137+
border: none;
138+
display: block;
139+
140+
&::before {
141+
display: none;
142+
}
119143
}
120144
}
121-
}
122145

123-
// Add Buttons
124-
.block-editor-button-block-appender.block-list-appender__toggle {
125-
margin: 0 0 0 $grid-unit-20;
126-
padding: 0;
146+
// Add buttons
147+
.block-editor-button-block-appender.block-list-appender__toggle {
148+
margin: 0 0 0 $grid-unit-20;
149+
padding: 0;
150+
}
127151
}
128152
}

0 commit comments

Comments
 (0)