Video summary
WordPress Playground has introduced a refreshed interface featuring a new documentation user interface located at the bottom of the page, designed to streamline navigation and reduce the number of clicks required to access core features. This updated layout presents eight primary buttons that correspond to the main areas of functionality within the playground environment. At the top of this section sits a familiar refresh button that allows users to reload specific changes without restarting the entire WordPress instance, while an auto-save option ensures that any modifications made are preserved automatically. This safety net is particularly useful if a user accidentally closes a tab or needs to recover work after reloading the page, effectively preventing data loss during active development sessions.
The new interface offers significant flexibility in managing screen real estate and customizing the workspace for different use cases. Users can choose to hide tools entirely to create a minimal view consisting only of the URL bar and refresh button, which is ideal for demonstrating themes or plugins without distraction. Alternatively, the documentation panel can be dragged to any corner of the screen to expand into full width, keeping all playground options accessible via an icon in that specific location. This drag-and-drop capability allows users to position their workspace exactly where it fits best, and the interface intelligently adapts between desktop and mobile versions to ensure a consistent experience across devices regardless of how much space is available on the screen.
The main button cluster now consolidates various options for launching new instances in an organized manner, including starting from blueprint galleries, creating projects via URL or direct editing, previewing core Gutenberg features with just two clicks, and importing directly from GitHub or ZIP files. A standout addition to this workflow is a live preview feature that displays thumbnails of saved playgrounds based on their specific themes, plugins, and content, making it easier for users to identify and manage multiple instances at a glance. Beyond launching projects, the interface provides robust management tools such as a file editor for modifying core code, database access through phpMyAdmin or Adminer, error logging for debugging issues, and settings controls that allow users to define specific WordPress versions, PHP environments, languages, and other instance behaviors.
Finally, the updated system includes powerful export capabilities that let users package their entire WordPress project as a downloadable ZIP file, generate shareable links for collaboration, or push projects directly to GitHub repositories. The documentation panel also supports renaming instances via a simple menu option located next to each entry, further enhancing organization and clarity within the workspace. Developers are encouraged to provide feedback on these new features through the official blog at make.wordpress.org/playground or by joining the community in the WordPress Slack channel under the #playground hashtag, ensuring that future updates continue to evolve based on user needs and suggestions.
Read the full video transcript
WordPress Playground has a new interface
with a doc UI that lives in the bottom
of the page. That makes the UI cleaner
and also help users to get into all main
features with fewer clicks.
To explain that better, I will show you
how that works at
playground.wordpress.net.
The house of WordPress Playground. As we
can see here, we have eight buttons with
the eight main areas of WordPress
Playground. On the top, we have this
refresh button. It's a button that have
existed before. So, if I'm doing some
change in the page and I want to reload
without reload all the WordPress
instance, that's the button. It's kind
of like the regular refresh button if
you are in a normal site. And I have a
URL that I have all the main address and
I have a quick access to them. And here
on the side of the URL, I have the auto
save option. So, that functionality was
a little bit like before the new UI
and it's a really powerful functionality
that will auto save the change that you
do on your WordPress Playground. And if
you want to come back there or for some
reasons that you just close the tab or
you reload all WordPress instance
accidentally, that auto save option will
help you to recover the work that you
have done before. Another nice feature
that I am seeing on the doc UI, if you
want more space, for example, you have
this option to hide tools and you have
this minimal UI only with the URL bar
and the reload button. And that's really
nice if you want to do some demo and
show all the features for a theme or
plugin, you can use that. And you can
also move that item that you can just
drag and drop, select the best position
to add this item.
We have also option to have like a full
width stick bar. That will be similar to
the experience that we had before. And
another functionality that I I think
that is super nice, if you even need
more space, you can just drag your doc
to the corner
and
will be a full width. And the playground
options will be listed here in that
playground icon. And if I want to come
back to that, I just click and my doc UI
gets back here.
And now let's talk about the main
buttons here. The new button will list
all the options to start a new
playground instance
with blueprint galleries, from a URL if
I'm hosting a blueprint in some address,
writing a new blueprint, so we have a
editor here. If I want to write
something from scratch, I can do that.
PR previews from WordPress core and
Gutenberg is a functionality that I have
already inside the WordPress playground,
but easily now with two clicks, you're
going to get that. And import a project
from GitHub and also import a zip file.
All those options existed before, but
now we group in a easy way. For example,
as I explained now, if I want to start a
new playground, all the options will be
here. And
if I have saved my playgrounds before, I
have this list that I can navigate all
the playgrounds that I have created
before. And the nicest thing from that
functionality, thanks for the feedback
from the community, is that preview. So,
if I make some change, I will see here
the preview of that playground instance.
If I'm using a specific theme and plugin
and videos, I will have the preview
here. And that will help users to easily
identify different instance of WordPress
playground. But if I want to name then,
also I can rename that. On the three
dots on the right side of each options,
I have the possibility to rename or to
delete those
playground instance. Clicking outside, I
will just move on to blueprints editor
with the classic item that we have
before, but we have more space, more
distribution.
That
pop-up UI you're going to have on the
desktop version, but if you're using a
mobile version, that UI will adapt as
well. That I'm feeling that super cool.
And settings
are here
that we can define the WordPress
version, PHP version, and some behaviors
of your WordPress instance such as the
language. And another caveat that
now WordPress Playground support all the
versions of WordPress. Even if you want
to try the version 0.7, you'll find here
as well.
Database is the support to PHP my admin
adminer. So, once you click that, it
will open a new tab and you can manage
the database from these WordPress
instance.
So, here I have a classic PHP my admin.
I can do change with SQL. And also I
have the option to export my SQL
database as well from that PHP my admin.
Moving on, I have the file editor. I
have a dedicated video talk about that,
but such such powerful tool. I can
change files here, and all those files
are related to that WordPress instance.
I can preview my change, I can drag drop
files, add new files, create new
folders. You can do anything that you
want with that functionality. Logs, all
the logs errors if you have some. So, if
you do some change and some change are
not behaving well, you can go to that
section and check if your WordPress
instance contain any error.
And the export button release the three
options to export this WordPress
instance.
With a download zip,
creating a shareable link, or exporting
this project to GitHub.
So, and if you have any feedback about
this new UI, we would love to hear. So,
contact us in our blog at
make.wordpress.org/playground
or at the playground Slack channel at
wordpress.org Slack
#playground. You're going to find us
there. Please share your feedback, your
opinions, and if you have any positive
feedback, also post that. That I would
love to share with the team.
And thank you so much to watch that
video, and see you at the next
playground update.