Search Block: Add border radius support using skip serialization feature #30227
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
aaronrobertshaw
added
[Block] Search
6 tasks
|
Size Change: +4.93 kB (0%) Total Size: 1.42 MB
ℹ️ View Unchanged
|
20 tasks
grzim
reviewed
Mar 26, 2021
stacimc
reviewed
Mar 30, 2021
There was a problem hiding this comment.
This tests well for me in the editor and frontend, with each of the button position options. Tested in Twenty Twenty One, Blank Canvas. I'm a bit new to the block support discussion but took a read through and this approach looks consistent per #28913. Lgtm!
ockham
reviewed
Mar 31, 2021
ockham
approved these changes
Mar 31, 2021
aaronrobertshaw
deleted the
update/search-block-use-border-radius-support
branch
ramonjd
approved these changes
Apr 7, 2021
There was a problem hiding this comment.
Tests well according to instructions
- In the inspector panel, drag the border radius slider and confirm the block updates as expected ✅
- Update the radius via the input field and confirm that change is reflected ✅
- Confirm the border radius reset button works ✅
- Try setting various border radius values with different layout options selected e.g. button inside, no button etc. ✅
- Switch the block to position the button inside and set a non-zero border radius ✅
Open dev tools and confirm:
- Inner input and button have the border radius you set ✅
- The inner wrapper has an adjust border radius (the radius set + default padding i.e. 4px) ✅
- Save post and confirm border radius displays correctly on frontend ✅
7 tasks
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.
Description
Opts into border radius block support for the Search block.
The changes also include using the new
__experimentalSkipSerializationblock support feature. This allows finer grained control over where and how the border radius values are applied.In the Search block's specific use case, we can adjust the inner wrapper's border radius so that it remains visually consistent with the radii of the input and button when the button is placed inside it.
For comparison purposes this has been created in a separate PR so it is easier to compare with the previous approach (#27664) and evaluate how the new
__experimentalSkipSerializationaffected this use case.How has this been tested?
Manually.
Setup
settings.defaults.border.customRadiusby setting it to true.Testing Instructions
Screenshots
Types of changes
New feature. Enhancement.
Checklist: