Allow lessons to support the Playground block's support for support for wide alignment

[jonathanbossenger]

The WordPress Playground block supports setting the block to the alignment options available (e.g., wide or full width) depending on the theme settings.

This is achieved by adding the playground block to a group block, and setting the align or width settings to the group block. An example of this can be seen at around 0:20 in the video attached to the PR that added this support to the block.

However, in the new Learn theme, adding a playground block to a lesson and setting the group to full width (with some padding) does not render the playground block at full width with the padding on the lesson front end.

Example lesson: https://learn.wordpress.org/wp-admin/post.php?post=258434&action=edit

Block editor view

Lesson front-end view

(The ultimate goal here is to replicate something like the Svelte.js REPL editor and make the best use of the available screen space when using Playground in code editor mode)

[jonathanbossenger]

I have added it to the Learning Pathways launch milestone, but I recognize that this might be out of scope for launch as it's being added so late in the game.

I also want to try and see if I can help with a fix for this sometime next week.

[adamwoodnz]

The screenshot doesn't look like it's taken with the new theme, here's what I see with the new theme at the 3 most common desktop sizes:

1920px	1366px	1536px

The content has a max width of 1160px, same as all our other wide templates, so in the first screenshot the playground block has hit that limit. We could look at allowing it to expand to the full width, @WordPress/meta-design thoughts?

[jonathanbossenger]

The screenshot doesn't look like it's taken with the new theme

I had set to preview the new theme in editor mode, but it didn't seem to be enabled for the front-end screenshot. I've updated that screenshot.

here's what I see with the new theme at the 3 most common desktop sizes:

This also raises a valid point. The only desktop size that would be useful if this were allowed is 1920px and above. Anything smaller and the playground in code editor mode is a less-than-great experience, as the code editor and preview are both pretty narrow.

I know the playground block has a setting to switch the code editor from side by side to top/bottom.

While still not the best user experience, it's better in the constrained view. It would be great if that could happen automatically if the playground is rendered inside a container at a set width. I'll see if I can raise this as an issue in the playground tools repository.

I would also be more than happy if there were a manual way to allow a Group block to expand outside of the max width by adding a custom class to the specific group blocks when used for a playground instance. That way, it has to be explicitly set anytime I want to use it for this specific use case, and it won't affect anything else on the site.

[jasmussen]

If allowing the code editor to be the equivalent of "full-wide", that seems like a fine initial solution as it allows you to resize the browser.

Anything else would likely require more complex development efforts, and if we're up for that, there are numerous opportunities:

• Button to allow collapsing the left sidebar.
• Button to open code sample in a new tab.
• Button to maximize the code sample.
• Buttons for changing layout to stacked or side by side.

I don't think we should necessarily do those above quite yet, but so if going edge to edge addresses the immediate need, I'd go with that. Though the 2px black border isn't great, neither is the shadow. Can we:

• Keep the inner padding that allows the shadow to be there.
• Remove the black border that frames the whole element.
• Remove the shadow, but instead apply a 1px light gray border and 2px border radius on the embed itself?

[jonathanbossenger]

If allowing the code editor to be the equivalent of "full-wide", that seems like a fine initial solution as it allows you to resize the browser.

Agreed, that would be my preference also, for the same reason.

Anything else would likely require more complex development efforts, and if we're up for that, there are numerous opportunities:

Excellent ideas, I'll raise them with the playground team.

[jonathanbossenger]

Though the 2px black border isn't great, neither is the shadow.

No, it isn't, that's because a developer (me) quickly threw the example together 😁

I'll implement those suggested changes on the Group block in the example, and then it will just be the full wide support that's needed.

Again, there's no rush here, this can happen after more high priority things.

[jasmussen]

Excellent ideas, I'll raise them with the playground team.

I think these ideas would actually need to be implemented here in the site itself. They'd be tools to just resize the Playground frame.

[jonathanbossenger]

I agree with the first one, but these three sound Playground Block specific

Button to open code sample in a new tab.
Button to maximize the code sample.
Buttons for changing layout to stacked or side by side.

[jonathanbossenger]

Remove the shadow, but instead apply a 1px light gray border and 2px border radius on the embed itself?

It looks like the shadow is on the playground block itself, and I cannot remove it from what I can see.

I'll have to raise this in the playground-tools repo as well.

[jonathanbossenger]

@brandonpayton, I'm looping you into this discussion as you're currently helping with other playground block integrations on Learn WordPress, and I'd appreciate your input.

I've enabled the public preview of the test post, so you can see it on the front end: https://learn.wordpress.org/?p=258434&post_type=lesson&preview=1&_ppp=cd1e317774

As mentioned earlier in this comment, we're working on updating the new Learn theme to support "full-wide" alignment for the Playground block inside a Group block. However, some additional suggestions for improvement have surfaced from this conversation.

Short term wins

For the short term, the following were suggested by Joen

• Keep the inner padding that allows the shadow to be there.
• Remove the black border that frames the whole element.
• Remove the shadow, but instead apply a 1px light gray border and 2px border radius on the embed itself?

I have already removed the black border that framed the entire element as I'd added that in the Editor.

From what I can tell I'm not able to disable the shadow, or add the 1px light gray border and 2px border radius on the embed itself.

Is this something that could be added as a support to the Playground block, so that users could enable/disable the shadow, add a border to the embed, and increase the border radius?

Future enhancements

Additionally, you'll see Joen also had some other suggestions in his comment:

• Button to open code sample in a new tab.
• Button to maximize the code sample.
• Buttons for changing layout to stacked or side by side.

Would these also be features that could be added later on?

[brandonpayton]

From what I can tell I'm not able to disable the shadow, or add the 1px light gray border and 2px border radius on the embed itself.

Is this something that could be added as a support to the Playground block, so that users could enable/disable the shadow, add a border to the embed, and increase the border radius?

Offhand, this feels like a place for overriding styles in CSS rather than a place to implement style settings per block, but I've been away for the block editor for quite a while (until recently) and don't have a confident sense about these things.

@jasmussen, is this a place where blocks normally offer styling features, or should we just override the styles in CSS? I've been away from the block editor for a while (until recently) and don't have a confident sense about these things.

If we need to be able to customize these things in the block editor, border config seems like a reasonable block feature, but having an on/off shadow option seems a little strange to me, unless there are UI controls for customizing the shadow also. And at that point, it feels like we might be going a bit far, but I could be wrong.

Future enhancements

Additionally, you'll see Joen also had some other suggestions in his comment:

• Button to open code sample in a new tab.

There is now an "Open in New Tab" link in the footer that opens the Playground block in full page mode. Is this what you had in mind?

• Button to maximize the code sample.
• Buttons for changing layout to stacked or side by side.

Would these also be features that could be added later on?

These both sound like reasonable enhancements, and I've created issues for those here:

• Playground block: Add ability to maximize code sample playground-tools#334
• Playground block: Add ability to switch between side-by-side and top-bottom layouts at runtime playground-tools#335

[jonathanbossenger]

There is now an "Open in New Tab" link in the footer that opens the Playground block in full page mode. Is this what you had in mind?

Ooo! I do feel like we need to somehow make that more prominent because until today, I didn't even know it existed.

Is there a way to move that link to the top of the block, and include slightly more descriptive text

Quick example I hacked together using my browser's dev tools: https://github.com/user-attachments/assets/f592b8a8-17ef-424a-874f-a84796b715f3.

I appreciate this will affect how the block functions everywhere, so maybe a Setting on the block that allows the user to manage the location of the new tab link?

I'd also advocate for the slight wording change "Open this editor in a new, full-screen tab." as it's more descriptive.

But that, combined with the Learn theme supporting full wide on group blocks would solve all my problems.

Folks could continue using the block in the lesson, or open a new tab to complete the activity, and then close it to return to the lesson.

Win, win, and only requires two changes each.

[brandonpayton]

Ooo! I do feel like we need to somehow make that more prominent because until today, I didn't even know it existed.

Is there a way to move that link to the top of the block, and include slightly more descriptive text

I appreciate this will affect how the block functions everywhere, so maybe a Setting on the block that allows the user to manage the location of the new tab link?

Hmm, I haven't been 100% on what to do for this and delayed answering for a bit, but we should probably just talk about it. 😄

Here are my thoughts so far:

Maybe it is reasonable to add a setting to switch the Open in New Tab link from top to bottom. The bottom would remain as-is, but the top could be centered above the block. (Hopefully centering it would address @jarekmorawski's concern about the top location creating an asymmetrical gap).

Or maybe we should consider switching the Open in New Tab from bottom to top. For some contexts though, seeing the "Open in New" link above the block feels a bit odd.

Regarding the different wording, "Open this editor in a new, full-screen tab" feels a bit too verbose to me, but hopefully we can work on the wording and find something better for everyone. One thing we'll have to accommodate is the fact that the block can be configured with and without the code editor, so the link should not always say "Open this editor".

What do you think?

But that, combined with the Learn theme supporting full wide on group blocks would solve all my problems.

Awesome.

[jonathanbossenger]

I'm not bound to the idea of it being on top, or changing the wording, just throwing some ideas around.

TBH now that I know this button exists, if I'm able to set the block to wider than the content area, I can always just include text in the content above or below the block to instruct learners that the open in new tab link exists.

[brandonpayton]

ah, cool. Thanks for the context! In that case, I'll focus on the remaining A11y issue without a merged PR, and we can build on that later if needed.

[jonathanbossenger]

@adamwoodnz, I am noting that it seems we all agree that allowing "full-wide" here for now is a great way forward. Again, not urgent for launch, but a nice to have for after.

[jasmussen]

is this a place where blocks normally offer styling features, or should we just override the styles in CSS? I've been away from the block editor for a while (until recently) and don't have a confident sense about these things.

As a rule of thumb, if it requires custom CSS, the editor should eventually take that over and provide styling options. So absolutely, the goal here is to not require you to write custom CSS.

Custom CSS as applied here can be used as an interim solution if it's all the faster to implement and get this shipping.