Search Block: Add border radius support using CSS variable approach #27991
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
aaronrobertshaw
requested review from
ajitbohra,
ellatrix,
spacedmonkey,
talldan and
TimothyBJacobs
as code owners
6 tasks
|
Tested and confirmed that this works as expected on each step. 👍 |
|
Size Change: +347 B (0%) Total Size: 1.3 MB
ℹ️ View Unchanged
|
6 tasks
|
👋 I've already commented on #27664 (comment) with more details, but wanted to surface it here as well: I think we don't want to pursue this direction for the search block. |
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
This PR adds a CSS variable (aka custom property) to the border radius block support and leverages this to apply border radii to the search block and its inner elements as needed.
The updates also handle adjusting the border radius when the search button is placed "inside" the search container. This allows the inner border radius to visually match the outer container without appearing to have "fat corners" as illustrated here.
As per current recommendations, this will not introduce any border radius controls into the editor's sidebar. It is also an alternative approach to #27664
How has this been tested?
Manually and unit test:
npm run test-unit:watch packages/block-editor/src/hooks/test/style.jsTesting Instructions
lib/experiment-default-theme.jsonfile into a theme's root folder asexperimental-theme.jsonexperimental-theme.jsonfile from step 2 and the following context at the JSON's top level. (example gist)experimental-theme.jsonfile again, this time turning on theborder.customRadiusflagScreenshots
Search Block with attribute set
Search Block testing with controls turned on
Types of changes
New feature.
Checklist: