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.

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

[Image Block] Set default values of the width and height input fields according to the actual image dimensions #7687

Merged
merged 1 commit into from
Feb 4, 2019
Merged

[Image Block] Set default values of the width and height input fields according to the actual image dimensions #7687

merged 1 commit into from
Feb 4, 2019

Conversation

nfmohit
Copy link
Member

@nfmohit nfmohit commented Jul 3, 2018 •
edited by gziolo
Loading

Description

Fixes #7638.

This PR addresses #7638 which reports the unexpected behavior of changing the input values, as the placeholder shows the actual image dimensions but pressing the up/down arrows of the number input fields start their values from 0.

This PR strips out the placeholder from the mentioned fields and sets the actual dimensions as the default field values. The default values don't take effect until they are changed and when they are changed, values start changing from the displayed width or height values, which is described as the expected behavior in #7638.

How has this been tested?

This has been tested by going through the following steps:

  1. Add an image block into Gutenberg editor.
  2. Try changing the image's width/height using the number input field's up/down arrows provided by the browser.

The values should start changing from the actual image dimensions, as opposed to the previous behavior which started the change from 0. It has also been made sure that the default values do not take effect on the image until the field values are actually changed.

This was tested in WP 4.9.6, Gutenberg 3.1.1, Apache server with PHP 7.2.0 and MySQL 5.6.34. According to initial tests, the code doesn’t seem to affect any other areas.

Types of changes

This PR removes the placeholder attribute from the width and height number input fields. Then it sets the imageWidth and imageHeight variables in place of the blank value attribute when the dimensions are undefined.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.

@gziolo gziolo added [Block] Image Affects the Image Block [Type] Bug An existing feature does not function as intended labels Feb 1, 2019
@gziolo gziolo requested review from a team, Soean and ajitbohra February 1, 2019 08:48
@gziolo gziolo added this to the 5.1 (Gutenberg) milestone Feb 1, 2019
@antpb
Copy link
Contributor

antpb commented Feb 1, 2019

The changes look good to me but tests are failing. Seems unrelated to the changes?

@gziolo
Copy link
Member

gziolo commented Feb 1, 2019

It looks like this PR needs to be updated to align with the latest changes from master branch.

@nfmohit
Copy link
Member Author

nfmohit commented Feb 2, 2019

PR is refreshed, thank you for the review @gziolo ❤️

gziolo
gziolo approved these changes Feb 4, 2019
View reviewed changes
Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

This is a really nice improvement 👍

Nice work, thanks for being so patient to wait until this PR gets reviewed and refreshing it so quickly. Thank you for your contribution 💯

@gziolo gziolo merged commit 0f82867 into WordPress:master Feb 4, 2019
@nfmohit
Copy link
Member Author

nfmohit commented Feb 5, 2019

Thank you for the merge and for your kind words @gziolo ❤️

daniloercoli added a commit that referenced this pull request Feb 5, 2019
@daniloercoli
Merge branch 'master' of https://github.com/WordPress/gutenberg into …
70836f1 
…rnmobile/372-use-RichText-on-Title-block

* 'master' of https://github.com/WordPress/gutenberg: (22 commits)
  Make the modal title styling consistent (#13669)
  Disable navigation block for text mode. (#12185)
  Fix: Linting problem in modal example code (#13671)
  Add myself as a code owner to the annotations (#13672)
  Add more reviewers to CODEOWNERS.md file (#13667)
  Plugin: Remove jQuery heartbeat-to-hooks proxying (#13576)
  Workflow: Add repository CODEOWNERS file (#13604)
  Add a mobile minimum size for form fields (#13639)
  Update edit-save documentation  (#13578)
  Alt image setting (#13631)
  Fix: Allow years lower than 1970 in DateTime component. (#13602)
  Using addQueryArgs to generate Manage All Reusable Blocks link (#13653)
  Bump plugin version to 5.0.0-rc.1 (#13652)
  Update lodash to 4.17.10 (#13651)
  Refreshed PR (#9469)
  Set default values of the width and height input fields according to the actual image dimensions (#7687)
  12647 fix css color picker (#12747)
  Remove "we" from messages (#13644)
  Fix: Font size picker max width on mobile (#13264)
  Fix/issue 12501 menu item aria label
  ...
This was referenced Feb 18, 2019
Merged
Merged
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
@youknowriad
Set default values of the width and height input fields according to …
d76eab0 
…the actual image dimensions (#7687)
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
@youknowriad
Set default values of the width and height input fields according to …
1adf0d1 
…the actual image dimensions (#7687)
This was referenced Apr 30, 2020
Closed
Closed
Merged
Merged
Merged
Closed
Closed
Closed
Closed
Merged
This was referenced May 1, 2020
Closed
Merged
Closed
Merged
Closed
Closed
Closed
This was referenced Jul 16, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gziolo gziolo gziolo approved these changes

@Soean Soean Awaiting requested review from Soean

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@joemcgill joemcgill Awaiting requested review from joemcgill

@antpb antpb Awaiting requested review from antpb

Assignees
No one assigned
Labels
[Block] Image Affects the Image Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
5.1 (Gutenberg)
Development

Successfully merging this pull request may close these issues.
3 participants
@nfmohit @antpb @gziolo