Cover: Padding: Fix reset + Visualize on hover #23041
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ItsJonQ
added
[Package] Components
ItsJonQ
requested review from
ajitbohra,
chrisvanpatten,
ellatrix,
Soean,
talldan and
youknowriad
as code owners
ItsJonQ
commented
Jun 9, 2020
|
|
||
| const initialValuesRef = useRef( values ); |
There was a problem hiding this comment.
No longer needed. It was previously used to hold onto the initial value for the session.
We need the reset action to completely nullify the box values.
ItsJonQ
commented
Jun 9, 2020
| label, | ||
| value, | ||
| ...props | ||
| } ) { | ||
| const bindHoverGesture = useHover( ( { event, ...state } ) => { |
|
Size Change: +716 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
|
Will this be added to 8.3.1? |
|
This is cool, Q! My local dev env is a bit challenged at the moment so I can't reliably test this. But based on the images, this seems to just need a code review! 👍 👍
Given this is still strictly opt-in and probably not yet on anyone's radar, it does not seem to warrant a point release. |
oandregal
approved these changes
Jun 10, 2020
|
This will be backported for 8.3 release as part of #23026 as the other bugfixes we prepared during RC testing (the hook namespace change is a must-have to avoid block deprecations in future releases). Certainly, the visualizers improvement is not a bugfix but a lovely feature! 🌟 As a general rule, I think it'd be good to only land bugfixes after RC. However, in this specific case, given that the PR does all the things at once and that it's a new feature yet to be released, I'm ok going ahead with this. Worst-case scenario, we have to do a 8.3.1. |
oandregal
pushed a commit
that referenced
this pull request
Jun 10, 2020
- Edit Site: fix template lookup. #22954 - Fix for FSE template parts: #23050 - Fix link color style rule. #23025 - Fix for link color: it needs to be opt-in. #23049 - Revert "Image Block: add caption field to placeholder" #23027 - Cover padding: reset button + hook namespace + improve visualizer #23041 - Fix failing 'Build artifacts' CI job (by updating `package-lock.json`): #23052
This was referenced Jun 24, 2020
Closed
This was referenced Nov 11, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This update fixes the reset handling for the new experimental Padding controls for the Cover block.
♻️ Reset Handling
Clicking reset now removes padding values completely.
It sets the values to
null, which removes inline styling rendering into the Cover. This is an important detail, as we should still allow for users to set values of0px, which is different than no value (null).✨ Improved Visualizers
The Padding visualizers have been enhanced to show when the user hovers any one of the Padding controls. The visualizers also maintain the ability to flash during changes. Previously, the visualizers only revealed themselves on change.
📖 Update padding style (hook) namespace
This update changes the style hook of padding to be namespaced as:
Previously, it existed as
In order for the visualizers to be programmatically triggered (by hover interactions), the show/hide values have also been added to the style Object as:
This works. However, I feel like there could be a better way to connect these 2 Components (while avoiding adding state to the global
wp.data). The solution I'm imagining would look similar to ZustandHow has this been tested?
To test...
npm run devadd_theme_support( 'experimental-custom-spacing' )(a place could be thenormalize-theme.phpfile, undernormalize_theme_init)Checklist:
Resolves: #23030