Skip to content

Fix for navigation anchor links to close modal #45829

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 2 commits into from
Nov 17, 2022
Merged

Fix for navigation anchor links to close modal #45829

merged 2 commits into from
Nov 17, 2022

Conversation

@coreyworrell
Copy link
Contributor

@coreyworrell coreyworrell commented Nov 16, 2022

What?

Allows the navigation block modal to close if you click on an item that is linked to an anchor on the current page.

Why?

Currently links like /#anchor or /some-page/#anchor do not close the modal. It only closes if the href exactly starts with #. So if you are on /some-page/ and you click the /some-page/#anchor link, it will scroll down to the anchor, but the modal will remain open.

How?

Modified the link click handler to test if the href contains a hash and it matches the current page (protocol, host, pathname, and search).

Testing Instructions

  1. Insert a Navigation block (in header through Site Editor for example), make sure modal is set to mobile or always.
  2. Insert a navigation item to a page such as /page/#anchor
  3. From other page (not /page/), open modal menu, click link. Modal should remain open as browser navigation happens.
  4. From new page /page/, open modal menu, click link. Modal should close and you remain on page (and browser scrolls to the anchor if you've added an element with the anchor ID).
  5. You can test with anchors to other websites, pages, etc to verify that the modal only closes if the exact page and query parameters are met

Screenshots or screencast

@codesandbox
Copy link

codesandbox bot commented Nov 16, 2022

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 16, 2022
@github-actions
Copy link

github-actions bot commented Nov 16, 2022

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @coreyworrell! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@coreyworrell coreyworrell mentioned this pull request Nov 16, 2022
Closed
@talldan talldan added the [Block] Navigation Affects the Navigation Block label Nov 17, 2022
@talldan talldan linked an issue Nov 17, 2022 that may be closed by this pull request
Fix Nav block anchor link closing #45608
Closed
talldan
talldan reviewed Nov 17, 2022
View reviewed changes
Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this, it fixes the issue for me.

@talldan talldan merged commit 7147465 into WordPress:trunk Nov 17, 2022
@github-actions
Copy link

github-actions bot commented Nov 17, 2022

Congratulations on your first merged pull request, @coreyworrell! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

@github-actions github-actions bot added this to the Gutenberg 14.7 milestone Nov 17, 2022
@getdave
Copy link
Contributor

getdave commented Nov 17, 2022

@coreyworrell Thanks so much for taking the time here and congrats on your first Gutenberg PR 🥳

@coreyworrell coreyworrell deleted the update/fix-nav-block-anchor-link-closing branch November 17, 2022 18:40
@DaisyOlsen DaisyOlsen added the [Type] Enhancement A suggestion for improvement. label Nov 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@talldan talldan talldan approved these changes

@tellthemachines tellthemachines Awaiting requested review from tellthemachines

Assignees

No one assigned

Labels

[Block] Navigation Affects the Navigation Block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 14.7

Development

Successfully merging this pull request may close these issues.

Fix Nav block anchor link closing

4 participants

@coreyworrell @getdave @talldan @DaisyOlsen