Shortcode: Prevent external styling of editing UI#49723
Merged
Conversation
Mamaduka
commented
Apr 11, 2023
| border: $border-width solid $gray-900 !important; | ||
| box-shadow: none !important; | ||
| border-radius: $radius-block-ui !important; | ||
| box-sizing: border-box; |
Member
Author
There was a problem hiding this comment.
I included the box-sizing to contain a text area inside the placeholder for some themes, like 2023.
Screeenshot
|
Size Change: -391 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
jasmussen
approved these changes
Apr 12, 2023
Contributor
jasmussen
left a comment
There was a problem hiding this comment.
It's unfortunate we need to use !important's, but it does seem the simplest way to protect from bleed, short of a massive shadow dom refactor. It's especially unfortunate that we have to replicate all those styles as is — it's likely to cause drift if, say, the default visual style for code inputs changes. Would a mixin make sense?
Giving preliminary approval still, since this fixes the issue and works as is.
While I'm here, I wonder if we should remove the "resize" property from the field. Since it's using an auto-expanding textarea you can't resize it vertically, only horizontally:
And as noted, it does auto resize, and scroll once the max height is reached:
So the resize only actually serves to let you break the appearance. What do you think?
Member
Author
|
Thanks for the feedback, @jasmussen! Yes, input styles reset would be great that we could use for different blocks. What would be the best place for a similar mixin? The "resizing" option comes from the |
Contributor
It doesn't feel entirely systematized in a proper way, but for a few focus styles we've so far placed these in
Perhaps |
Member
Author
I checked, and that's how the post text editor disabled it. So that should work here as well :)
Sounds good. Should I land this and create a new PR that introduces the mixing and updates HTML and Shortcode blocks? |
Contributor
Whichever you prefer! |
|
Flaky tests detected in 33d2fc3. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4676308573
|
12 tasks
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
What?
Fixes #49482.
The input field for the Shortcode block isn't meant to be styled by themes.
How?
I borrowed a fix from #34727.
Testing Instructions
Screenshots or screencast
Before
After
