Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon in page list submenu is sometimes miss placed #38204

Closed
carolinan opened this issue Jan 25, 2022 · 3 comments
Closed

Icon in page list submenu is sometimes miss placed #38204

carolinan opened this issue Jan 25, 2022 · 3 comments
Labels
[Block] Navigation Affects the Navigation Block [Block] Page List Affects the Page List Block

Comments

@carolinan
Copy link
Contributor

Description

This is an edge case that I noticed in Twenty Twenty-Two.

When a page list is used in a navigation block, and the page list has submenus with submenus, the icon arrow that indicates the submenu is sometimes miss placed, slightly too far to the right. This places part of the the icon outside the background color of the list element.
This only seem to happen when you hover over the last menu item to the right.

Step-by-step reproduction instructions

  1. On your WordPress install, Import the theme test data from https://github.com/WPTT/theme-test-data.
    This is because it includes the pages and child pages that are needed to reproduce the problem.

  2. Activate Twenty Twenty-Two

By default, all the pages from the theme test data will be used in the navigation block that is in the themes header.
Or, you can select the option "Select all pages" in the navigation block.

The last item on the first row on the menu should be "Level 1" and it should have three sub menu items.

  1. View the front of the website. Hover over "Level 1" See that the submenu icon is missplaced.

Screenshots, screen recording, code snippet

missplaced arrow icon in the submenu of the page list

Environment info

WordPress (5.9-RC4-52638) with and without Gutenberg trunk
Windows 10, Chrome

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@carolinan
Copy link
Contributor Author

Both the button and the span inside the button uses the class wp-block-navigation__submenu-icon which adds a left margin.
I suspect the problem here is that the margin is duplicated.

<button aria-label="Level 1 submenu" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false"><span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span></button>

@carolinan carolinan added [Block] Page List Affects the Page List Block [Block] Navigation Affects the Navigation Block labels Jan 25, 2022
@jasmussen
Copy link
Contributor

This PR should fix it, but I could use advice on how to land it: #37003

@jasmussen
Copy link
Contributor

I'm closing this one as fixed by 37003, but please reopen if that wasn't the case!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block [Block] Page List Affects the Page List Block
Projects
None yet
Development

No branches or pull requests

2 participants