Twenty Sixteen: Navigation block inherits colors from button styles

[poena]

Similar to #59924

The navigation block has an option called "Open on click" that is available when there is a submenu.

When the option is enabled, the parent menu item is a <button> element.
On the front of the website, this button inherits the background styles from the themes button CSS:

button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus {
	background: #007acc;
}

When the menu item is focused, activated or hovered over, the background color changes to blue.

Testing instructions:

1. Activate Twenty Sixteen
2. Make sure that your WordPress installation has some content that you can place in the navigation block, because you will need to create a submenu.
3. Create a new post or page.
4. Add a navigation block. In the block, select the inserter and add a link: this will be your parent menu item. Click on the link and select the option "Add submenu". Add a link.
5. Save.
6. Go to the front of the website.
7. Locate the navigation and hover over or move focus to the item that has the submenu.
8. Confirm that the background color of the menu item changes.

(You may also notice that if you set a background color on the submenu item in the block settings, this color only works in the editor, not the front, and this is a separate issue.)

[sabernhardt]

removes background, top and bottom padding, outline-offset and letter-spacing on buttons; removes side margins from submenus; adds side padding to modal

[sabernhardt]

The background, padding, outline-offset and letter-spacing needed to be updated for any button in the Navigation block. I also removed the margin on the submenu, making it work with LTR or RTL directions (without .rtl class). The open modal also need padding because the global CSS variables are not defined (likely the case in any classic theme).

Some of these styles should be changed in the editor's block styles instead of—or in addition to—theme edits.

On the other hand, maybe the Navigation block should not be supported inside the post content of a classic theme. It is not available in Widgets.

Issues in other bundled themes:

• Twenty Thirteen has dark text on an orange gradient background in all states plus an extra top border on :active.
• Twenty Fourteen has a green background with dark text on hover/focus.
• Twenty Fifteen and Twenty Seventeen have a medium gray background with dark text on hover/focus.
• See #59924 for Twenty Nineteen.
• Twenty Twenty-One does not have contrast problems except when hovering over links in the modal, but the caret looks odd inside the button and the button's negative outline-offset makes it cover text.

[poena]

@sabernhardt

Hi
can you clarify this?

Some of these styles should be changed in the editor's block styles instead of—or in addition to—theme edits.

I am asking because it would need opening a new issue in the Gutenberg GitHub repository.

the global CSS variables are not defined

The navigation block uses --wp--style--root-padding* which does not seem to be included for classic themes. But the block should still use the 1rem padding from the clamp(), even when the variable is missing?

From the block's scss file (Gutenberg v 17.7.0):

// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);

[sabernhardt]

Thanks for opening GB59360; the modal padding was my main concern in Gutenberg. A few properties could be a problem in more than one theme (top and bottom padding, outline-offset and/or background), but it seems less likely now that changing any of those in the block styles would help.

[karmatosed]

@sabernhardt can you confirm you are happy for testing and to move this to being considered for release now then? I think that is the case but wanted to be sure.

[sabernhardt]

Yes, it could be considered :)

[poena]

With "Open on click" enabled on the navigation block, before patch

[poena]

I am not able to apply the patch, I copy pasted the CSS to the theme manually to test it.

grunt patch:https://core.trac.wordpress.org/attachment/ticket/60374/60374.diff
package.json has not been modified.
Running "patch:https://core.trac.wordpress.org/attachment/ticket/60374/60374.diff" (patch) task
patching file src/wp-content/themes/twentysixteen/css/blocks.css
Assertion failed: hunk, file ../patch-2.5.9-src/patch.c, line 354

The button element that is the parent menu item is not styled the same way as the link elements. There should be a bottom border that is hidden on hover and focus. The button is missing hover styles except for the mouse pointer. This border should only be added to this element, not other buttons.

The style that sets the background color on buttons to transparent removes the background color on the submit button in the search block.
Because the text color on the button element is white, the icon in the search block is not visible when the block is added to the navigation.

(It does not affect the submit button in the login/out block)

[poena]

With "Open on click" enabled on the navigation block, with patch

[poena]

With "Open on click" enabled on the navigation block, with patch

• Removes left and right margins from the opened submenu at larger screen sizes.
• Resets styles for the submenu toggle (when it opens on click) plus the open and close buttons for the responsive container: background, border-radius, letter-spacing, outline-offset, and top and bottom padding.
• Adds a box-shadow to match the link styles if: the Navigation block is within .entry-content, the submenu is set to open on click, and the toggle button is not in hover or focus state.
• Adds a small amount of padding to the left and right sides of the responsive container when that is opened.

Trac 60374

[sabernhardt]

Moving to next milestone for more time to test

[karmatosed]

Assigning to myself so I can test with a possible view to commit based on what I find.

[karmatosed]

In testing this might be myself but I am unable to replicate the issue using the latest patch. I tried these settings, and it might be I am not replicating correctly, though.