Navigation: Add background color #19108

retrofox · 2019-12-12T19:20:03Z

Description

This PR adds the ability to set the background color to the Navigation menu. The scope of the current approach is:

Sets the background color only in the Navigation menu.
Sets the background color only in the menu at the top (level 0).
It adds contrast checker.
For submenus, it applies default colors, supporting light/dark styles.

How has this been tested?

Just create a Navigation menu and set the background color, click on the color selector button.

Confirm that the contrast checker works as expected.

Once you've set up the colors, check that it reflects them in the front-end.

Also, check how it looks in light/dark styles. You can set it up from the styles section in the sidebar.

Light style (default)

Dark style

Additionally, it fixes a visual bug about a really thin line in the arrow of a submenu.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR. .

apeatling · 2019-12-12T22:22:33Z

@retrofox I'm noticing vertical alignment differences between the editor and front end when the background color is in place. It defaults to the top in the editor and middle on the front end (with twentytwenty):

If there was a vertical alignment option for the navigation block, that might fix this discrepancy?

retrofox · 2019-12-13T13:43:24Z

@apeatling I've implemented a new commit which tries to fix the vertical alignment. Also, updated the screenshots of the PR description.

Copons · 2019-12-13T14:37:43Z

Damn @retrofox, you really had to open this last night! 😄

I didn't check in advance and open my version too: #19127
It also adds the Font Size controls, though, so if y'all are fully on board with having both text and background colors in the block toolbar, I can just simply drop the first 2 commits of my PR, and only keep the Font Size part.

retrofox · 2019-12-13T14:45:57Z

I didn't check in advance and open my version too: #19127

:-D

It also adds the Font Size controls, though, so if y'all are fully on board with having both text and background colors in the block toolbar, I can just simply drop the first 2 commits of my PR, and only keep the Font Size part.

I think it could be awesome since it reduces the introduced changes for testing and shipping.

getdave

Nice work @retrofox. Has this task suddenly become easier then because I remember there was a whole load of difficulty the first time? Anyway, great to see it in place.

I tested on Gutenberg Starter Theme. Generally all good apart from two minor issues:

I'm not seeing the color white available as a pallette option. Is this expected? I wanted white text on black (surely a common combination) but I was unable to achieve without choosing a custom color. I think pure white (and black) should always be available.
on the frontend that the first nav item has the padding on the anchor removed on the left hand side. This causes some odd alignment in some edge cases. Not sure if this is actually a bug though as I think it's only an issue due to the length of the nav items' text causing odd wrapping. Worth a check though...

getdave

Sorry forgot to leave my code review on my other review! Here are some things I noticed. Overall great job though.

packages/block-editor/src/components/color-palette/control.js

getdave · 2020-01-08T09:31:10Z

packages/block-library/src/navigation/block-colors-selector.js

+			<ContrastChecker
+				textColor={ textColor }
+				backgroundColor={ backgroundColor }
+				isLargeText={ false }


In the future will this need to be dynamic to accommodate the font size picker setting (cc @Copons)?

getdave · 2020-01-08T09:33:14Z

packages/block-library/src/navigation/block-colors-selector.js

-const renderContent = ( { value, onChange = noop } ) => ( () => {
+const renderContent = ( {
+	textColor,
+	onTextColorChange = noop,


I wonder whether you need to consider preserving the old API for this component by aliasing onTextColorChange to onChange? This might help preserve backwards compatibility across components which will be expecting the old [onChange] API.

Isn't there some kind of deprecation utility in Gutenberg which you can call programmatically to silently warn developers they are consuming an old API?

getdave · 2020-01-08T09:34:43Z

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

@@ -32,7 +32,8 @@
 		padding-right: 0;
 		margin-left: 0;
 		margin-right: 0;
-		margin-bottom: 1em; // Useful for when items wrap.
+		margin-bottom: 0; // Useful for when items wrap.


"Useful" is a little vague to me coming to this code. Should we consider updating to explain why it's useful?

ok, going to research why and how it's useful since I haven't added that comment.

getdave · 2020-01-08T09:35:36Z

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

@@ -32,7 +32,8 @@
 		padding-right: 0;
 		margin-left: 0;
 		margin-right: 0;
-		margin-bottom: 1em; // Useful for when items wrap.
+		margin-bottom: 0; // Useful for when items wrap.
+		min-height: 46px;


This looks like a magic number. Is there a SASS variable you could use that would be more appropriate? If not then it's worth adding a comment to explain why you need to use this specific value here. I find it's helpful to other developers who won't have your context.

getdave · 2020-01-08T09:36:17Z

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

+	min-height: 60px;
+	padding-top: 7px;
+	padding-bottom: 7px;


Magic numbers? Worth checking whether can be created from variables? If not then consider adding comments to explain why they exist.

getdave · 2020-01-08T09:36:56Z

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

+	min-height: 60px;
+	padding-top: 7px;
+	padding-bottom: 7px;
+	align-items: center;


This is potentially a major change wrapped up here. I know Matias had a PR open to handle vertical alignment. I wonder whether it would be better to resolve this in that PR?

it could be. Maybe we should remove these changes from here and delegate the vertical alignment to the other PR.

However, I suggest keeping these changes until the new PR ships. Although it doesn't seem to be a solid solution, at least it gets visually better.

apeatling · 2020-01-08T18:05:43Z

@retrofox Alignment is looking better, thanks. I think we need to avoid applying the background color to sub menu items, this is what it looks like on the front end using Twenty Twenty:

As a user I would only expect the background color to apply to the top level items to create a "bar", or "column" depending on the orientation. Sub menus when popping up I think need to be handled differently in terms of background color.

retrofox · 2020-01-08T19:46:12Z

I think we need to avoid applying the background color to sub menu items,...

could we consider the mobile case as well?

Testing with Twenty Twenty as well

retrofox · 2020-01-08T20:20:11Z

Sub menus when popping up I think need to be handled differently in terms of background color.

What criteria we should apply? I was thinking about setting a transparent background color, but not sure.
Thanks @apeatling for your gfeedback.

retrofox · 2020-01-08T20:31:44Z

maybe @karmatosed could help us with some suggestions?

apeatling · 2020-01-09T16:27:24Z

The ideal would be that you could set a different background and text color for submenu items.

What criteria we should apply? I was thinking about setting a transparent background color, but not sure.

I think transparent is problematic, it means that the background behind would interfere with the menu item and in some cases make it unreadable.

My first thought is the simplest direction is we set a background color and text color that we know will work all the time (black text on white background).

My second thought is would it be possible to set it to the default colors defined by the active theme? A combination with good contrast. Using these colors the case of TwentyTwenty:

The border and arrow are white for submenu items, so there is a clash there that would need to be resolved.

apeatling · 2020-01-10T16:50:27Z

Following up that @retrofox and I chatted and we'll stick with light/dark styles for submenus as they exist now, and make sure the background color set only applies to top level items.

obenland · 2020-01-14T17:47:35Z

In Twenty Twenty:

Setting the background color to red, auto-updates the font color, but doesn't update it in the icon (I also wonder if the + button color should update as well, but that might be out of scope for this PR):

In the front-end, the font-color doesn't get updated and child items no longer get indented:

retrofox · 2020-01-14T18:23:37Z

Setting the background color to red, auto-updates the font color, but doesn't update it in the icon

Going to implement it.

(I also wonder if the + button color should update as well, but that might be out of scope for this PR):

I created a PR for this. #18327

In the front-end, the font-color doesn't get updated

What Color did you set?

and child items no longer get indented:

Looking, wondering if it's related to the changes introduced here.

obenland · 2020-01-14T18:25:08Z

In the front-end, the font-color doesn't get updated

What Color did you set?

I just set the background color, no font color

retrofox · 2020-01-14T18:28:32Z

In the front-end, the font-color doesn't get updated
What Color did you set?

I just set the background color, no font color

In that case, the text color is the default text-color defined by the theme, which is the same color that the background-color that you set it up.

if you set background-color black, it will work (in its manner :-/ )

obenland · 2020-01-14T23:05:12Z

packages/block-editor/src/components/colors/use-colors.js

 			colorSettings,
 			colorPanelProps,
 			contrastCheckers,
 			detectedBackgroundColor,
 			detectedColor,
 			panelChildren,
+


Stray new line

apeatling · 2020-01-15T17:46:52Z

For reference I'm adding a visual of what background color support allows this block to do:

Also combining with a group block (and the ability to reduce or eliminate group block padding) you can accomplish a navigation bar effect you see in many existing themes.

retrofox · 2020-01-15T17:59:46Z

For reference I'm adding a visual of what background color support allows this block to do:

It looks very good, Andy. Nice tests!

apeatling · 2020-01-15T18:35:24Z

Re-reviewed and this is looking good. There are smaller improvements that we can make that I will follow up with new issues for, not blocking anything here though. 👍

shaunandrews · 2020-01-15T20:33:53Z

Could we update the color of the inserter icon to match the selected text color? Would that be too weird? Otherwise, the default grey clashes with many background colors.

retrofox · 2020-01-15T20:47:55Z

Could we update the color of the inserter icon to match the selected text color? Would that be too weird? Otherwise, the default grey clashes with many background colors.

We worked on this many days ago. Glad to update the PR. Could you take a look at the comments there since there are different alternatives beyond the mine one. 🙇

navigation: add background color palette navigation: add background color feature navigation: add contrast checker navigation: set background color in front-end navigation: adjust vertical alignment navigation: apply colors to the selector icon navigation: add vars and improve inline doc. navigation: organize styles - create color section navigation: remove duplicated CSS rules navigation: use SCSS vars for colors navigation: tidy sub menu arrow styles navigation: fix arrow border issue navigation: re-write replaceing margin by padding navigation: apply only text color to anchor elements This commit needs pulish the code, but let's keep as it in order to test the approach navigation: set explicitly text color for submenu navigation: rename vars. navigation: clean unused code navigation: rollback passing attrs param to fn navigation: fix scss linting errors navigation: fix ph linting errors navigation: fix linting errors navigation: add styles instead of replace Update submenu styles to fix indentation of child submenus to match visual design currently in master. navigation: apply colors only in the main menu navigation: don't inherit bgc for sub-menus use-color: add initialOpen prop to Panel navigation: refactoring colrios selector It re implements the colors selector taking advantge of a better usage of the use-colors hook. Also, it adds the `Colors Setting` in the sidebar. navigation: refact -> hook data to colors icon navigation: restore disabling eslint rule navigation: fix re-rendering dropdown issue navigation: propagate colors rightly navigation: fix linting errors use-colors: remove line break navigation: fix the arrow alignment in the front end navigation: fix issue when no children

retrofox requested review from obenland, getdave and jorgefilipecosta December 12, 2019 19:20

retrofox added this to 👀 PRs to review in Navigation editor via automation Dec 12, 2019

retrofox moved this from 👀 PRs to review to 💻 Issues in progress in Navigation editor Dec 12, 2019

retrofox changed the title ~~Navigation: Add background color palette~~ Navigation: Add background color Dec 12, 2019

retrofox marked this pull request as ready for review December 12, 2019 19:28

retrofox requested review from ajitbohra, Soean and talldan as code owners December 12, 2019 19:28

retrofox moved this from 💻 Issues in progress to 👀 PRs to review in Navigation editor Dec 12, 2019

retrofox requested review from shaunandrews and jasmussen December 13, 2019 13:40

retrofox force-pushed the update/navigation-add-background-color branch from c87d141 to 85d8e1e Compare December 13, 2019 14:09

Copons mentioned this pull request Dec 13, 2019

Navigation: Add font size attribute #19127

Merged

6 tasks

retrofox requested a review from Copons December 13, 2019 14:48

retrofox added [Block] Navigation Affects the Navigation Block [Type] Enhancement A suggestion for improvement. labels Dec 13, 2019

apeatling mentioned this pull request Jan 6, 2020

FSE: Add transform + upgrade nudge from A8c Nav Block to Core Nav Block Automattic/wp-calypso#38197

Closed

retrofox force-pushed the update/navigation-add-background-color branch from 85d8e1e to 4525d69 Compare January 7, 2020 20:35

retrofox requested review from ellatrix and youknowriad as code owners January 7, 2020 20:35

getdave reviewed Jan 8, 2020

View reviewed changes

getdave requested changes Jan 8, 2020

View reviewed changes

retrofox force-pushed the update/navigation-add-background-color branch from 4525d69 to e9e8e42 Compare January 8, 2020 15:12

retrofox force-pushed the update/navigation-add-background-color branch 3 times, most recently from 11dd3ee to cdc41cc Compare January 13, 2020 22:40

obenland reviewed Jan 14, 2020

View reviewed changes

getdave approved these changes Jan 15, 2020

View reviewed changes

retrofox force-pushed the update/navigation-add-background-color branch from 2ad3374 to c8a2afd Compare January 15, 2020 17:50

apeatling self-requested a review January 15, 2020 18:35

apeatling approved these changes Jan 15, 2020

View reviewed changes

retrofox force-pushed the update/navigation-add-background-color branch from d52641a to bd7ba6a Compare January 15, 2020 20:20

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

retrofox merged commit e8fcacc into master Jan 15, 2020

Navigation editor automation moved this from 👀 PRs to review to ✅ Done Jan 15, 2020

talldan deleted the update/navigation-add-background-color branch January 16, 2020 04:47

retrofox mentioned this pull request Jan 17, 2020

Colors Selector: Add contrast checker #18513

Closed

2 tasks

ellatrix added this to the Gutenberg 7.3 milestone Jan 20, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Navigation: Add background color #19108

Navigation: Add background color #19108

retrofox commented Dec 12, 2019 •

edited

apeatling commented Dec 12, 2019

retrofox commented Dec 13, 2019 •

edited

Copons commented Dec 13, 2019

retrofox commented Dec 13, 2019

getdave left a comment

getdave left a comment

getdave Jan 8, 2020 •

edited

getdave Jan 8, 2020 •

edited

getdave Jan 8, 2020

retrofox Jan 8, 2020

getdave Jan 8, 2020

getdave Jan 8, 2020

getdave Jan 8, 2020

retrofox Jan 8, 2020

retrofox Jan 8, 2020

apeatling commented Jan 8, 2020

retrofox commented Jan 8, 2020

retrofox commented Jan 8, 2020

retrofox commented Jan 8, 2020

apeatling commented Jan 9, 2020 •

edited

apeatling commented Jan 10, 2020 •

edited

obenland commented Jan 14, 2020 •

edited

retrofox commented Jan 14, 2020

obenland commented Jan 14, 2020 •

edited

retrofox commented Jan 14, 2020

obenland Jan 14, 2020

apeatling commented Jan 15, 2020

retrofox commented Jan 15, 2020

apeatling commented Jan 15, 2020

shaunandrews commented Jan 15, 2020

retrofox commented Jan 15, 2020

Navigation: Add background color #19108

Navigation: Add background color #19108

Conversation

retrofox commented Dec 12, 2019 • edited

Description

How has this been tested?

Checklist:

apeatling commented Dec 12, 2019

retrofox commented Dec 13, 2019 • edited

Copons commented Dec 13, 2019

retrofox commented Dec 13, 2019

getdave left a comment

Choose a reason for hiding this comment

getdave left a comment

Choose a reason for hiding this comment

getdave Jan 8, 2020 • edited

Choose a reason for hiding this comment

getdave Jan 8, 2020 • edited

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

apeatling commented Jan 8, 2020

retrofox commented Jan 8, 2020

retrofox commented Jan 8, 2020

retrofox commented Jan 8, 2020

apeatling commented Jan 9, 2020 • edited

apeatling commented Jan 10, 2020 • edited

obenland commented Jan 14, 2020 • edited

retrofox commented Jan 14, 2020

obenland commented Jan 14, 2020 • edited

retrofox commented Jan 14, 2020

Choose a reason for hiding this comment

apeatling commented Jan 15, 2020

retrofox commented Jan 15, 2020

apeatling commented Jan 15, 2020

shaunandrews commented Jan 15, 2020

retrofox commented Jan 15, 2020

retrofox commented Dec 12, 2019 •

edited

retrofox commented Dec 13, 2019 •

edited

getdave Jan 8, 2020 •

edited

getdave Jan 8, 2020 •

edited

apeatling commented Jan 9, 2020 •

edited

apeatling commented Jan 10, 2020 •

edited

obenland commented Jan 14, 2020 •

edited

obenland commented Jan 14, 2020 •

edited