Make WordPress Core

Opened 3 months ago

Last modified 2 months ago

#60374 new defect (bug)

Twenty Sixteen: Navigation block inherits colors from button styles

Reported by: poena's profile poena Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch 2nd-opinion
Focuses: Cc:

Description

Similar to https://core.trac.wordpress.org/ticket/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:

Activate Twenty Sixteen
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.
Create a new post or page.
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.
Save.
Go to the front of the website.
Locate the navigation and hover over or move focus to the item that has the submenu.
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.)

Attachments (1)

60374.diff (833 bytes) - added by sabernhardt 3 months ago.
removes background, top and bottom padding, outline-offset and letter-spacing on buttons; removes side margins from submenus; adds side padding to modal

Download all attachments as: .zip

Change History (4)

@sabernhardt
3 months ago

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

#1 @sabernhardt
3 months ago

  • Keywords has-patch 2nd-opinion added

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.
Last edited 3 months ago by sabernhardt (previous) (diff)

#2 @poena
2 months ago

@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);

#3 @sabernhardt
2 months ago

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.

Note: See TracTickets for help on using tickets.