Cover: Alternate approach to handling border support in editor #40774
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
|
Size Change: +729 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
7 tasks
The use of ResizableBox within the Cover block wrapper causes problems when the wrapper may have a border applied to it. Additionally, clipping the content via overflow: hidden also cuts off the drag handle. The approach in this commit attempts to avoid these.
aaronrobertshaw
force-pushed
the
update/add-border-support-to-cover
branch
from
02f3b46
to
2160121
Compare
|
Closing this in favour of #41153 as it is more likely to land. |
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.
Related:
The use of ResizableBox within the Cover block wrapper causes problems when the wrapper may have a border applied to it. Additionally, clipping the content via overflow: hidden also cuts off the drag handle. The approach in this commit attempts to avoid these.
What?
Adds border support to the Cover block via an alternate approach to those explored in #31370.
Why?
This alternate approach is necessary to improve the behaviour of how the Cover block behaves in the editor when borders are applied.
Within the editor the Cover block introduces a
ResizableBoxcomponent so that the Cover block can be resized via drag handles. ThisResizableBoxcauses the block to not behave well in the editor. If not for this, the block would only need a simple block.json change.How?
overflow: hiddento the frontend CSS so cover background honors any border radiusDrawbacks
There are other blocks where the block support doesn't play well with the theme.json generated styles. I believe buttons and search blocks are examples of this. Given the importance of the Cover block I'm not convinced that we want that here as well.
Testing Instructions
Screenshots or screencast
Screen.Recording.2022-05-03.at.3.10.05.pm.mp4