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

Create two-way data binding for ImageSizeControl #34649

Merged
merged 3 commits into from
Sep 13, 2021

Conversation

alshakero
Copy link
Contributor

Description

ImageSizeControl uses useDimensionHandler hook to store image dimensions.

This hook accepts default values and custom values. It derives its state from them (custom values then fails over to default values).

As common with derived state, a bug surfaces when custom values change, because the state remains outdated.

This commit observes custom values and updates the state when they're updated.

How has this been tested?

Using a local wp instance.

  1. Insert an image using the image block.
  2. Resize it using the resize box.
  3. Block control fields should update in real-time (on mouse up).

Screenshots

realtime-reszie.mov

Types of changes

Bug fix

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

Fixes: Automattic/wp-calypso#54800

`ImageSizeControl` uses `useDimensionHandler` hook to store image dimensions.
This hook accepts default values and custom values. It derives its state from them (custom values then fails over to default values). 

As common with derived state, a bug surfaces when custom values change, because the state remains outdated.

This commit observes custom values and updates the state when they're updated.
@alshakero alshakero changed the title Create two-way data binding for image ImageSizeControl Create two-way data binding for ImageSizeControl Sep 8, 2021
Tracking default values was a mistake. I think this should be the way to go.
@ivan-ottinger
Copy link
Contributor

I cannot officially review this PR, but tested the proposed change and it works as expected. 👍🏼

@yansern yansern self-requested a review September 10, 2021 14:14
Copy link
Contributor

@yansern yansern left a comment

Choose a reason for hiding this comment

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

Tested and working.

@yansern yansern merged commit 0a362fb into WordPress:trunk Sep 13, 2021
@yansern yansern added the [Block] Image Affects the Image Block label Sep 13, 2021
@github-actions github-actions bot added this to the Gutenberg 11.6 milestone Sep 13, 2021
@alshakero alshakero deleted the patch-3 branch September 13, 2021 11:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Image Affects the Image Block
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Image block: update dimensions in real time with drag & drop
3 participants