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

Map Block: Tweak the scroll-to-zoom behaviour. #14673

Merged
merged 5 commits into from
Feb 17, 2020
Merged

Conversation

pento
Copy link
Contributor

@pento pento commented Feb 13, 2020

This PR changes the behaviour of scroll-to-zoom on the map block.

Currently, it will capture the scroll event whenever the pointer is over the map block: this means that you can accidentally zoom when scrolling through a post.

In the block editor, it now only zooms when the block is selected: scrolling through a post won't accidentally be captured by an unselected map block.

On the front end, the there is now an option (defaulting to off) for enabling scroll to zoom.

Fixes #11904.

Changes proposed in this Pull Request:

  • Improve the usability of scroll to zoom.

Is this a new feature or does it add/remove features to an existing part of Jetpack?

  • Changes the behaviour of the map block.

Testing instructions:

  • Create a new post in the block editor, and add a map block.
  • Test that zooming only happens when the map block is selected.
  • Publish the post.
  • Test that zooming only happens on the front end when the "Scroll to zoom" option is toggled.

Screenshots

Proposed changelog entry for your changes:

  • Map Block: Prevent an unselected block from accidentally capturing scrolling, and add an option for toggling zoom to scroll behaviour in the published post.

@pento pento added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Status] Needs Review To request a review from Crew. Label will be renamed soon. [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack [Block] Map labels Feb 13, 2020
@pento pento added this to the 8.3 milestone Feb 13, 2020
@pento pento requested a review from a team February 13, 2020 23:32
@pento pento requested a review from a team as a code owner February 13, 2020 23:32
@pento pento self-assigned this Feb 13, 2020
@matticbot
Copy link
Contributor

Caution: This PR has changes that must be merged to WordPress.com
Hello pento! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D38908-code before merging this PR. Thank you!

@jetpackbot
Copy link

jetpackbot commented Feb 13, 2020

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: February 17, 2020.
Scheduled code freeze: February 10, 2020

Generated by 🚫 dangerJS against b4fd656

@matticbot
Copy link
Contributor

pento, Your synced wpcom patch D38908-code has been updated.

@glendaviesnz
Copy link
Contributor

glendaviesnz commented Feb 14, 2020

This worked as expected in the editor.

On the frontend it didn't zoom on scroll by default, but with the scrollToZoom toggle set to true it still didn't capture the scroll to zoom. The scrollToZoom prop seems to always be false on frontend render for me:

Screen Shot 2020-02-14 at 2 37 48 PM

@matticbot
Copy link
Contributor

pento, Your synced wpcom patch D38908-code has been updated.

@pento
Copy link
Contributor Author

pento commented Feb 14, 2020

Thanks for the review, @glendaviesnz! f6143f5 fixes that up, looks like I needed to save the attribute onto the <div>.

@pento
Copy link
Contributor Author

pento commented Feb 14, 2020

A note on there only being one item in the Settings panel, which looks a bit lonely: #14557 is also on my radar, that would go in it, too.

Copons
Copons previously approved these changes Feb 14, 2020
Copy link
Contributor

@Copons Copons left a comment

Choose a reason for hiding this comment

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

I've left a nitpick comment, but otherwise this LGTM!

@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Feb 14, 2020
jeherve
jeherve previously approved these changes Feb 14, 2020
Copy link
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

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

This works well in my tests! 👍

@pento pento dismissed stale reviews from jeherve and Copons via 1b31139 February 17, 2020 01:54
@matticbot
Copy link
Contributor

pento, Your synced wpcom patch D38908-code has been updated.

@pento
Copy link
Contributor Author

pento commented Feb 17, 2020

Ugh, auto-dismissing reviews is the worst, especially for a minor fix.

@jeherve, could you approve it again, so I can merge?

@matticbot
Copy link
Contributor

pento, Your synced wpcom patch D38908-code has been updated.

@pento pento merged commit 856c557 into master Feb 17, 2020
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Feb 17, 2020
@jeherve jeherve deleted the fix/11904-map-scroll-zoom branch February 18, 2020 08:14
jeherve added a commit that referenced this pull request Feb 25, 2020
jeherve added a commit that referenced this pull request Feb 25, 2020
* 8.3 release: changelog

* Changelog: add #14516

* Changelog: add #14574

* Bring in changes from 8.2.1 and 8.2.2

* Update stable version

* Bring in 8.2.3 changes

* Changelog: add #14714

* Changelog: add #14639

* Changelog: add #14678

* Changelog: add #14673

* Changelog: add #14687

* Changelog: add #14704

* Changelog: add #14702

* Changelog: add #14541

* Changelog: add #14657

* Changelog: add #14622

* Changelog: add #14582

* Changelog: add #14638

* Changelog: add #14633

* Changelog: add #14571

* Changelog: add #14592

* Changelog: add #14539

* Changelog: add #14514

* Changelog: add #14643

* Changelog: add #14494

* Changelog: add #13739

* Changelog: add #14707

* Changelog: add #14736

* Changelog: add #14706

* Changelog: add #14730

* Changelog: add #14685

* Changelog: add #14727

* Changelog: add #14711

* Changelog: add #14742

* Changelog: add #14746

* Changelog: add #14725

* Changelog: add #13999

* Changelog: add #14740

* Changelog: add #14759

* Changelog: add #14703

* Changelog: add #14753

* Changelog: add #14754

* Changelog: add #14645

* Cahngelog: add #14599
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Map [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack Touches WP.com Files [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Map Block: Add option to prevent map zoom if you scroll while cursor is on the map
6 participants