Title: ui – WordPress Playground --- # Tag Archives: ui [ ](https://profiles.wordpress.org/fellyph/) [Fellyph Cintra](https://profiles.wordpress.org/fellyph/) 6:08 pm _on_ July 31, 2026 Tags: ui    # 󠀁[Meet the new WordPress Playground interface](https://make.wordpress.org/playground/2026/07/31/meet-the-new-wordpress-playground-interface/)󠁿 WordPress Playground has a new interface for its web instance. A customizable Dock brings tools that were previously spread across sidebars, modals, and popovers into one consistent toolbar at the bottom of the screen. The redesign addresses a discoverability problem. Playground can already save sites in the browser, switch between multiple sites, run Blueprints, edit files, inspect the database and logs, import complete sites, and export work in several formats. However, many of those features were easy to miss. Some users even assumed that every Playground was still temporary. ![](https://make.wordpress.org/playground/files/2026/07/new-playground-scaled.webp) ## From exploration to a shared design The new interface grew out of work at the WordPress Playground table during Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of [https://make.wordpress.org/](https://make.wordpress.org/) There are many teams that people can participate in, each with a different focus. [https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/](https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/) at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. [Learn more](https://central.wordcamp.org/about/). Europe 2026 in Kraków. Before the event, Adam Zieliński used AI tools to explore more than 400 interface variations. Those experiments were not production-ready designs, but they helped the team identify promising directions. At Contributor Day, designers and other contributors sketched alternatives, discussed how different audiences use Playground, and narrowed the proposals to the Dock interface. The goal was not only to refresh the visual design. The team wanted to reduce the space used by Playground controls, distinguish them from WordPress controls, and give every tool a predictable home. The Dock makes those capabilities visible without competing with the WordPress admin bar or taking space away from the site. It can appear as a compact toolbar, collapse to a minimal control, or expand into a full- width sticky bar. ![](https://make.wordpress.org/playground/files/2026/07/Dock-UI.webp) Dock UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. ![](https://make.wordpress.org/playground/files/2026/07/Minimal-Dock-UI.webp) Minimal Dock UI ![](https://make.wordpress.org/playground/files/2026/07/Sticky-Bar.webp) Sticky Bar ## The goal of this change Beyond the visual aspect, the goal was to use less space and differentiate from the WordPress admin bar. The new UI lists all main options as icons for the user: * **New:** Start a Playground from a searchable Blueprint gallery, a Blueprint URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, Blueprint JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML., a pull request preview, a GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. [https://github.com/](https://github.com/) repository, or a previously exported ZIP file. * **Playgrounds:** Switch between sites and manage recent autosaves and permanently saved Playgrounds. You can rename, save, reopen, or delete a site from its Actions menu. * **Blueprint:** Inspect or edit the current site’s `blueprint.json` recipe and export it for reuse. * **Site Settings:** Choose the WordPress version, PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. [https://www.php.net/manual/en/index.php](https://www.php.net/manual/en/index.php) version, and language, or rename the Playground. Changing the WordPress or PHP version creates a fresh Playground instead of silently changing the current site. * **Database:** Inspect or export the SQLite database with Adminer or phpMyAdmin. Both tools continue to open in a new tab to provide more working space. * **Files:** Browse, create, upload, edit, and download files from the WordPress instance. Desktop users can also drag files into the file manager; mobile users can use the upload control. * **Logs:** Review messages from PHP, WordPress, and Playground in one place. * **Export:** Download the current site as a ZIP file, copy a link to its original Blueprint setup, or export selected files to GitHub. The new UI provides a consistent experience, with all functionality available in modals on desktop and slide panels on mobile. It took the best of the UI and made all options available at the bottom. It provides easy access for mobile users to navigate across all options with a single thumb. ![](https://make.wordpress.org/playground/files/2026/07/new-playground-UI-1.gif) ## Existing capabilities, fewer clicks This release is primarily a navigation redesign, not a new set of Playground capabilities. Existing workflows now have a consistent entry point, and the autosave experience, file browser, and Blueprint editor received refinements. The **New** panel is one example. Workflows that previously lived in different parts of the interface now appear together. You can start with a Blueprint, preview a WordPress or GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/) pull request, import from GitHub, or restore a Playground ZIP without searching through separate menus. ![](https://make.wordpress.org/playground/files/2026/07/playground-blueprint-editor- scaled.png) The **Playgrounds** panel also makes persistence easier to understand. Saved sites and recent autosaves appear in separate groups, with preview thumbnails and recognizable names that help you find earlier work. ![](https://make.wordpress.org/playground/files/2026/07/playground-preview-scaled. webp) New Your Playgrounds panel ## Built with the community Community collaboration helped to shape the Dock from early sketches through the final feedback cycle. The challenge remains the same: make advanced tools useful to developers without overwhelming people who only want a quick, safe place to explore WordPress. The Dock gives the team a more flexible foundation for serving both groups. Thank you to [@ashfame](https://profiles.wordpress.org/ashfame/) for co-leading the Playground table at Contributor Day; [@berislavgrgicak](https://profiles.wordpress.org/berislavgrgicak/) and [@zieladam](https://profiles.wordpress.org/zieladam/) for gathering and shaping the ideas; [@corazondejaguar](https://profiles.wordpress.org/corazondejaguar/), [@feedmymedia](https://profiles.wordpress.org/feedmymedia/), [@tibibuzdugan](https://profiles.wordpress.org/tibibuzdugan/), and [@maxtudio](https://profiles.wordpress.org/maxtudio/) for the prototypes and design feedback; and @sufmitsingh and [@muryam](https://profiles.wordpress.org/muryam/) for helping with testing. ![](https://make.wordpress.org/playground/files/2026/07/contributor-day-group.jpg) Contributor Day WordCamp Europe 2026 ## Share your feedback Try the new interface on both desktop and mobile. If you find a bug or an unclear workflow, add it to the [New Dock UI review issue](https://github.com/WordPress/wordpress-playground/issues/4092). Helpful reports include: * Your device, operating system, and browser. * The steps you followed. * What you expected and what happened instead. * A screenshot or short recording, when possible. [#ui](https://make.wordpress.org/playground/tag/ui/) * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fplayground%2F2026%2F07%2F31%2Fmeet-the-new-wordpress-playground-interface%2F%23respond&locale=en_US)