[wp-trac] [WordPress Trac] #60374: Twenty Sixteen: Navigation block inherits colors from button styles

[WordPress Trac]

#60374: Twenty Sixteen: Navigation block inherits colors from button styles
-------------------------------------+-----------------------
 Reporter:  poena                    |       Owner:  (none)
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  6.6
Component:  Bundled Theme            |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:  css
-------------------------------------+-----------------------
Changes (by sabernhardt):

 * keywords:  has-patch changes-requested => has-patch needs-testing


Old 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.)

New description:

 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.)

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/60374#comment:15>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform