-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
RangeControl - tick marks, withInputField & reset button doesn't work as expected. #20236
Comments
Hi @adsheyn, thank you for reporting this issue.
withInputField and Tick marks were only introduced in Gutenberg 7.5 and will not be part of WordPress 5.4, so they don't work in Gutenberg 7.4.
Until WordPress 5.3 reset was not something automatic. When reset was clicked a call to onChange with an undefined input was done. The component using range control was responsible for handling a call in onChange with an undefined value and resetting the input to its original value. RangeControl can not know what should be set when reset is clicked it depends on the use case. Testing this, I found that in Gutenberg 7.5 reset tries to set the value back to its original value when the component was mounted. I think this change should be reverted as it goes against what was documented:
In WordPress 5.4 beta, if we changed the width of a column and pressed reset, it would always revert to auto. In Gutenberg 7.5, reset reverts to the original value since the component was mounted. It means that if the width was A, and I change it to B when I press reset it goes back to A, If I change it back to B, close the column settings panel, open the columns settings panel, change the value to C and press reset it goes back to B instead of going back to A. cc: @ItsJonQ I think we may need to change how the reset is handled on the new version of RangeControl as it may break users of the component relying on the documented behavior. E.g: on the test block I provided reset always reverted the value back to 3 and now that is not the case. Test Block I used (possible to test by pasting this code in the browser console and inserting TestRangeControl block):
|
@jorgefilipecosta Thanks for the heads up + detailed break down! I'll take a look at this right away 🙏 |
@ItsJonQ previously I provided the wrong sample, I updated it. |
@jorgefilipecosta Thank you for that info! I just pushed up a PR to hopefully resolve these scenarios! |
@jorgefilipecosta Thank you for looking into this issue. EDIT: Now, after updating to 7.5 it is not possible to scroll down the page on mobile devices. |
@jorgefilipecosta Is this really the expected behavior? Why can't the input field show the actual value 0? |
Because when no value is provided we don't know the default value (it may be different from 0) e.g: if rangecontrol is used to pick a font size when no value is provided the default font size is not 0 it maybe 12, 14 or even 50, showing empty for defaults seems more accurate as when a value is undefined it may not be 0.
This was the result of another issue that is already fixed. If the problem is still happening in the last version please leave a comment and we will debug the issue further. Regarding the original issue, it also seems fixed so I'm going to close the issue for now. Thank you all for the insights provided. |
Describe the bug
https://developer.wordpress.org/block-editor/components/range-control/#marks
No tick marks are displayed.
Desktop (please complete the following information):
The text was updated successfully, but these errors were encountered: