Navigation: Implement new design for sub-menus #19681

retrofox · 2020-01-15T18:50:38Z

Description

This PR improves the sub-menus for the Navigation block. Significant changes:

Apply position absolute to sub-menus, removing the block movements when a sub-menu is opened/closed, making the UX less stressful for the user.
Propagate text and background colors to the sub-menus.
Apply Light/Dark styles only when it doesn't have a custom background color.
~~Apply the border-color getting its value from text color (to be defined/under discussion)~~

Design

The final design to implement on this PR was defined in #18310:

About technical implementation

We need to keep in mind that this PR propagates the color values from the Navigation block to each Navigation Item. It simplifies applying the styles via CSS, and get ready the code to apply custom colors to sub-menus/sub-items.

Tasks on this PR:

Propagate the color changes for background and text through to all submenus

How has this been tested?

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code has proper inline documentation.

apeatling · 2020-01-16T19:10:13Z

packages/block-library/src/navigation/editor.scss

+		background-color: $dark-style-sub-menu-background-color;
+	}
+}
+


Are these styles going to be portable to the front end and shared?

Are these styles going to be portable to the front end and shared?

Probably(?). I left the code there in case it doesn't set up background color. Guessing that transparent could be a problem. So it will apply the default background-color as long it doesn't already define a custom one.
Something to keep discussing, btw.

Something like this:

// No background color - Default / Light styles &:not(.has-background-color) .wp-block-navigation-link > .block-editor-inner-blocks { background-color: $light-style-sub-menu-background-color; }

I was talking about all the styles, not just the lines above. I was hoping we'd have a single stylesheet that can apply navigation structure to both the editor and the front end. Colors could be separated so they apply even in situations where you've set a different block style in the future and the structural look is totally different.

... was hoping we'd have a single stylesheet that can apply navigation structure to both the editor and the front end.

That makes totally sense to me. Let's find a way to isolate and consume these from both sides.

retrofox · 2020-01-17T11:47:49Z

packages/block-library/src/navigation-link/editor.scss

+			position: absolute;
+			right: 0;
+			top: 50%;
+			border-left: 4px solid transparent;


Can we consider using an icon or char instead of a border technique? Keep in mind that, at least for now, we have only two ways to apply colors: color and background-color. Applying border-color will be a pain.
We can use dashicons or even SVG.

:this: is no true, we can propagate the text color from the Navigation block and apply the border color with the same value.

packages/block-library/src/navigation-link/editor.scss

retrofox · 2020-01-23T12:43:22Z

packages/block-library/src/navigation/style.scss

+		min-height: $navigation-min-height;
 		align-items: center;
+
+		> .wp-block-navigation-link {
+			display: flex;
+			min-height: $navigation-min-height;
+			margin-top: 0;
+			margin-bottom: 0;
+		}


@frontdevde, not sure if it's the correct implementation. The idea behind this is to fit the .wp-block-navigation-link in height to its container.

obenland · 2020-01-23T17:55:29Z

@shaunandrews Do you think you'll have a chance today to try out these changes?

apeatling · 2020-01-23T18:11:23Z

This is starting to come together nicely! I think it could use a design lookover, especially around padding, borders, and spacing both in the editor and front end.

obenland · 2020-01-23T18:12:08Z

packages/block-library/src/navigation/index.php

@@ -271,12 +267,18 @@ function register_block_core_navigation() {
 				'customTextColor'       => array(
 					'type' => 'string',
 				),
+				'valueTextColor'        => array(


Which "value" is that? Could we find a more descriptive name here?

This value (already removed) came from the use-colors hook. I had modified introduced the ability to set up this attribute from there, too.
The reason was to be able to pick up the color value of the text, independently if it was defined using a custom color or a palette color, to apply to the border-color property.
I've removed all this stuff and replaced it using the CSS currentColor property.

I've restored these changes. Going to explain why in the use-colors hook change.

Basically this attribute will store the color value beyond how it was defined, either picking up from the colors palette or using the custom color panel.

…er with whatever the selected background color is.

…> level so links are now full width and everywhere in the menus is hoverable/clickable. Focus rings look nicer now too.

… width. This means that long submenu items will wrap. I also set a lower line height on items so that it was more obvious that a wrapped submenu item was one item,

…dPress/gutenberg into update/navigation-submenu-new-design

retrofox · 2020-02-03T22:21:36Z

Thanks, folks for reviewing and helping with the development. 👍

retrofox force-pushed the update/navigation-add-background-color branch 2 times, most recently from e7abf4a to 96bce70 Compare January 15, 2020 21:28

retrofox force-pushed the update/navigation-submenu-new-design branch from aae0082 to 7b7db07 Compare January 15, 2020 22:28

retrofox changed the base branch from update/navigation-add-background-color to master January 15, 2020 22:28

retrofox added the [Type] Enhancement A suggestion for improvement. label Jan 15, 2020

retrofox assigned retrofox and frontdevde Jan 16, 2020

This was referenced Jan 16, 2020

NavigationMenu: set appender color #18327

Closed

Navigation Block: sub-menu items design #18310

Closed

apeatling reviewed Jan 16, 2020

View reviewed changes

retrofox commented Jan 17, 2020

View reviewed changes

retrofox mentioned this pull request Jan 17, 2020

Navigation Block: Add submenu chevron w/ setting #19601

Merged

3 tasks

retrofox added the [Feature] List View Menu item in the top toolbar to select blocks from a list of links. label Jan 20, 2020

retrofox changed the title ~~[wip] Navigation: Implement new design for sub-menus~~ Navigation: Implement new design for sub-menus Jan 20, 2020

retrofox force-pushed the update/navigation-submenu-new-design branch 2 times, most recently from c6a7c66 to aeeec37 Compare January 21, 2020 22:21

retrofox mentioned this pull request Jan 21, 2020

Navigation Menu: Optionally use arrow for dropdowns. #18396

Closed

This was referenced Jan 22, 2020

Nav Block: Aligning items right does not provide any default edge padding #19688

Closed

Nav Block: Smaller viewport widths losing container padding #19689

Closed

retrofox commented Jan 22, 2020

View reviewed changes

packages/block-library/src/navigation-link/editor.scss Outdated Show resolved Hide resolved

retrofox commented Jan 23, 2020

View reviewed changes

apeatling added the Needs Design Feedback Needs general design feedback. label Jan 23, 2020

obenland reviewed Jan 23, 2020

View reviewed changes

retrofox marked this pull request as ready for review January 23, 2020 18:17

retrofox requested review from ajitbohra and ellatrix as code owners January 23, 2020 18:17

apeatling and others added 9 commits February 3, 2020 09:12

Restore the border on sub menus, but use alpha so that it blends bett…

af68327

…er with whatever the selected background color is.

Align flyout submenu tops.

cd57c64

Use $border-width instead of a magic number for submenu alignment

58a12fa

Removed ul and li padding on submenus and moved them into the link <a…

c36b0bd

…> level so links are now full width and everywhere in the menus is hoverable/clickable. Focus rings look nicer now too.

Set a fixed width on submenu widths instead of relying on the content…

a030050

… width. This means that long submenu items will wrap. I also set a lower line height on items so that it was more obvious that a wrapped submenu item was one item,

Move padding from li to a on top-level items.

2c9ea88

Moved caret on submenu icon left a bit more.

a6f57b5

Better align grandchild links with bottom child links

5164cfe

navigation: remove is level zero arg

a039f32

retrofox force-pushed the update/navigation-submenu-new-design branch from 84d4d56 to a039f32 Compare February 3, 2020 17:38

retrofox and others added 8 commits February 3, 2020 09:58

navigation: remove flex-wrap in to fix nav width

0bc5610

navigation: handling default true value for arrow

4a10e6d

Set top: 100% on navigation submenu instead of magic number

a250ed9

Left align submenus

a0733e8

navigation: fix showing submenu icon

7d4f59c

navigation: fixing linting errors

9954be5

Merge branch 'update/navigation-submenu-new-design' of github.com:Wor…

ff180ad

…dPress/gutenberg into update/navigation-submenu-new-design

navigation: fix setting link width

0930619

retrofox merged commit 83e26a8 into master Feb 3, 2020

retrofox deleted the update/navigation-submenu-new-design branch February 3, 2020 22:21

github-actions bot added this to the Gutenberg 7.5 milestone Feb 3, 2020

This was referenced Feb 3, 2020

[wip] navigation: set padding/margin of items #19791

Closed

Navigation Block: vertically align items. #18399

Closed

jorgefilipecosta modified the milestones: Gutenberg 7.5, Gutenberg 7.4 Feb 4, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Navigation: Implement new design for sub-menus #19681

Navigation: Implement new design for sub-menus #19681

retrofox commented Jan 15, 2020 •

edited

Loading

apeatling Jan 16, 2020 •

edited

Loading

retrofox Jan 17, 2020

retrofox Jan 17, 2020

apeatling Jan 20, 2020

retrofox Jan 20, 2020

retrofox Jan 17, 2020 •

edited

Loading

retrofox Jan 23, 2020

obenland commented Jan 23, 2020

apeatling commented Jan 23, 2020

obenland Jan 23, 2020

retrofox Jan 23, 2020 •

edited

Loading

retrofox Jan 23, 2020

retrofox Jan 23, 2020

retrofox commented Feb 3, 2020

Navigation: Implement new design for sub-menus #19681

Navigation: Implement new design for sub-menus #19681

Conversation

retrofox commented Jan 15, 2020 • edited Loading

Description

Design

About technical implementation

How has this been tested?

Screenshots

Types of changes

Checklist:

apeatling Jan 16, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

retrofox Jan 17, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

obenland commented Jan 23, 2020

apeatling commented Jan 23, 2020

Choose a reason for hiding this comment

retrofox Jan 23, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

retrofox commented Feb 3, 2020

retrofox commented Jan 15, 2020 •

edited

Loading

apeatling Jan 16, 2020 •

edited

Loading

retrofox Jan 17, 2020 •

edited

Loading

retrofox Jan 23, 2020 •

edited

Loading