wordpress-playground-block: Require Activation Before Loading Playground Iframe #183
Conversation
|
This is a work in progress. At least the presentation needs improved, if nothing else. Here's how it currently looks: |
|
A couple of thoughts on this: Maybe the entire container should be made clickable to activate with a message like "Click to Activate WordPress Playground" or something like that. Let's add a block setting like "Require Activation" to control this behavior, defaulting to ON. |
I am also exploring whether it makes more sense to just require activation of the Playground iframe itself instead of requiring activation for the whole block. |
| <Button | ||
| className="wordpress-playground-activate-button" | ||
| onClick={() => setActivated(true)} | ||
| >Activate WordPress Playground</Button> |
There was a problem hiding this comment.
| >Activate WordPress Playground</Button> | |
| >Activate live preview</Button> |
There was a problem hiding this comment.
Thanks, @adamziel! That describes the intent much better.
Should "live preview" be capitalized like "Activate Live Preview" or do we typically lowercase subsequent words on buttons?
There was a problem hiding this comment.
I like the capitalization! And let's also add aria attributes to communicate this will create an iframe with a full WordPress site embedded in it, and that it may be a challenge for screen readers.
There was a problem hiding this comment.
👍 That sounds good.
If we do this, then the "Run" button of the code editor doesn't immediately have a loaded iframe to interact with. But we can make the Run button auto-activate the iframe and run when the iframe is loaded. |
brandonpayton
force-pushed
the
add-activation-button
branch
from
c9f62a4 to
472234a
Compare
|
Current rendering when activation is limited to iframe area: The code editor seems like it should be taking the full vertical space down to the bar containing the "Run" button. Will look at fixing this in a separate PR. And the area with the activation button seems too empty and like its are needs to be more visually distinct from the background. Also, when cursor hovers over the Activation button, the button's background changes to the same color as the container background. |
|
Activation button position is currently off in the editor: |
|
The off-center button was due to a caching issue. The button's background is transparent in the edtor though, and that needs fixed. I added a block setting "Require live preview activation" and defaulted it to true. Here is the setting when disabled: The language could be improved. So far, I've found it challenging to keep the text descriptive yet brief. |
|
I added an ARIA description to the Activate button:
It is untested in an actual Screen Reader, so I made a note to do that. |
|
What appears to be left on this PR:
|
|
FYI @alexstine. There's still some work left to do here, but I just wanted to share the "activate preview" button for the WordPress Playground block is on its way. Nothing actionable for now :-) |
This button must be clicked before the code editor and Playground load. This will help avoid: - distracting screen readers with auto-loading iframes - auto-using network bandwidth to load Playground, even if it is not used.
Render the rest of the block as usual.
brandonpayton
force-pushed
the
add-activation-button
branch
from
fd9dafe to
6a84011
Compare
These should all be addressed. I believe this PR is ready for review. |
|
This is great, thank you so much @brandonpayton! The only note I have is related to the "Require live preview activation" switch in wp-admin. It works, but changing its value doesn't update the live preview in the editor. I thought it was broken for a second:
Other than that, this is solid. I'll go ahead and merge and let's address the preview problem in a follow up PR. Thank you so much @brandonpayton! |
Thank you, @adamziel!
I wrestled with what to do here and settled on the current, confusing behavior. 😅 I agree that we should fix it and created an issue. |
What?
This PR updates the wordpress-playground-block to only load Playground after an Activate button has been clicked.
Why?
IFrames can create difficulty for those using Screen Readers. See: #, #
Requiring user action to load Playground will help avoid distracting screen readers with auto-loading iframes. As a bonus, it would also stop the block from automatically consuming network bandwidth to download Playground assets, even if Playground will not be used.
How?
This button must be clicked before the code editor and Playground load, so the iframe no longer loads immediately.
Questions
Would it be better to just gate the iframe with an Activate button? Perhaps that doesn't make sense because of the expected interaction with the code editor, but I think it might look better than a single activation button in the middle of a large block like this one.