Playground block: Strengthen CSS for activate button positioning #274
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
|
I wonder if shadow DOM or iframing the block would solve this entire class of issues. |
|
I was thinking that too but talked myself out of it because it seemed like we would still want to be affected by some core and theme styles. If that is not the case, using shadow DOM to isolate this block's content from external styles sounds like a great idea. |
|
Created an issue for trying style isolation using shadow DOM: #277 |
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.
What?
This plugin strengthens the margin property of the Playground block's activate button.
Why?
Today, when running with the p2020 theme on WordPress.com, another rule sets
margin-bottom: 0on top of ourmargin: autoand causes the button to be positioned at the bottom of the preview pane.After this change, the button renders in the context of the p2020 theme without issue:
Fixes #272
How?
This PR makes
margin: auto!important. It's a shame to need to do this, but AFAIK, there is no scenario in which we want a theme to be able to override the position of the Activate button.Testing Instructions
Because this is in the context of a theme running on a private site, it cannot be tested here, but I have tested this change privately, which is how the screenshot was taken.