Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Playground block: Strengthen CSS for activate button positioning #274

Merged
merged 1 commit into from
May 22, 2024

Conversation

 brandonpayton
Copy link
Member

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: 0 on top of our margin: auto and causes the button to be positioned at the bottom of the preview pane.
 CleanShot 2024-05-21 at 17 40  51@2x

After this change, the button renders in the context of the p2020 theme without issue:
 Screenshot 2024-05-21 at 10 39 23 PM

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.

 @brandonpayton brandonpayton added Bug Something isn't working Playground block labels May 22, 2024
 @brandonpayton brandonpayton self-assigned this May 22, 2024
 @adamziel adamziel merged commit 4742c66 into trunk May 22, 2024
2 checks passed
 @adamziel adamziel deleted the strengthen-activate-button-style branch May 22, 2024 03:27
 @adamziel
Copy link
Collaborator

adamziel commented May 22, 2024

I wonder if shadow DOM or iframing the block would solve this entire class of issues.

 @brandonpayton
Copy link
Member Author

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.

 @brandonpayton
Copy link
Member Author

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
Labels
Bug Something isn't working Playground block
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Playground block: Activate button going out of viewport
2 participants