{"id":644,"date":"2026-07-31T18:08:54","date_gmt":"2026-07-31T18:08:54","guid":{"rendered":"https:\/\/make.wordpress.org\/playground\/?p=644"},"modified":"2026-07-31T18:08:54","modified_gmt":"2026-07-31T18:08:54","slug":"meet-the-new-wordpress-playground-interface","status":"publish","type":"post","link":"https:\/\/make.wordpress.org\/playground\/2026\/07\/31\/meet-the-new-wordpress-playground-interface\/","title":{"rendered":"Meet the new WordPress Playground interface"},"content":{"rendered":"<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"New Playground UI\" width=\"776\" height=\"437\" src=\"https:\/\/www.youtube.com\/embed\/nYVTxr9MFK8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1729\" src=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/new-playground-scaled.webp\" alt=\"\" class=\"wp-image-680\" srcset=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/new-playground-scaled.webp 2560w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/new-playground-300x203.webp 300w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/new-playground-767x518.webp 767w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/new-playground-1024x691.webp 1024w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/new-playground-1536x1037.webp 1536w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/new-playground-2048x1383.webp 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">From exploration to a shared design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The new interface grew out of work at the WordPress Playground table during <span tabindex='0' class='glossary-item-container'>Contributor Day<span class='glossary-item-hidden-content'><span class='glossary-item-header'>Contributor Day<\/span> <span class='glossary-item-description'>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 <a href=\"https:\/\/make.wordpress.org\/\">https:\/\/make.wordpress.org\/<\/a> There are many teams that people can participate in, each with a different focus. <a href=\"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\/<\/a><\/span><\/span><\/span> at <span tabindex='0' class='glossary-item-container'>WordCamp<span class='glossary-item-hidden-content'><span class='glossary-item-header'>WordCamp<\/span> <span class='glossary-item-description'>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\u2019ve learned throughout the year and share the joy. <a href=\"https:\/\/central.wordcamp.org\/about\/\">Learn more<\/a>.<\/span><\/span><\/span> Europe 2026 in Krak\u00f3w.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before the event, Adam Zieli\u0144ski 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"181\" data-id=\"699\" src=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/Dock-UI.webp\" alt=\"\" class=\"wp-image-699\" style=\"border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px\" srcset=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/Dock-UI.webp 710w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/Dock-UI-300x76.webp 300w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\"><figcaption class=\"wp-element-caption\">Dock <span tabindex='0' class='glossary-item-container'>UI<span class='glossary-item-hidden-content'><span class='glossary-item-header'>UI<\/span> <span class='glossary-item-description'>UI is an acronym for User Interface - the layout of the page the user interacts with. Think \u2018how are they doing that\u2019 and less about what they are doing.<\/span><\/span><\/span><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"120\" data-id=\"701\" src=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/Minimal-Dock-UI.webp\" alt=\"\" class=\"wp-image-701\" style=\"border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px\" srcset=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/Minimal-Dock-UI.webp 710w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/Minimal-Dock-UI-300x51.webp 300w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\"><figcaption class=\"wp-element-caption\">Minimal Dock UI<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1272\" height=\"181\" data-id=\"703\" src=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/Sticky-Bar.webp\" alt=\"\" class=\"wp-image-703\" style=\"border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px\" srcset=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/Sticky-Bar.webp 1272w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/Sticky-Bar-766x109.webp 766w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/Sticky-Bar-300x43.webp 300w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/Sticky-Bar-1024x146.webp 1024w\" sizes=\"auto, (max-width: 1272px) 100vw, 1272px\"><figcaption class=\"wp-element-caption\">Sticky Bar<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The goal of this change<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>New:<\/strong> Start a Playground from a searchable Blueprint gallery, a Blueprint <span tabindex='0' class='glossary-item-container'>URL<span class='glossary-item-hidden-content'><span class='glossary-item-header'>URL<\/span> <span class='glossary-item-description'>A specific web address of a website or web page on the Internet, such as a website\u2019s URL www.wordpress.org<\/span><\/span><\/span>, Blueprint <span tabindex='0' class='glossary-item-container'>JSON<span class='glossary-item-hidden-content'><span class='glossary-item-header'>JSON<\/span> <span class='glossary-item-description'>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.<\/span><\/span><\/span>, a pull request preview, a <span tabindex='0' class='glossary-item-container'>GitHub<span class='glossary-item-hidden-content'><span class='glossary-item-header'>GitHub<\/span> <span class='glossary-item-description'>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 \u2018pull request\u2019 where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. <a href=\"https:\/\/github.com\/\">https:\/\/github.com\/<\/a><\/span><\/span><\/span> repository, or a previously exported ZIP file.<\/li>\n\n\n\n<li><strong>Playgrounds:<\/strong> Switch between sites and manage recent autosaves and permanently saved Playgrounds. You can rename, save, reopen, or delete a site from its Actions menu.<\/li>\n\n\n\n<li><strong>Blueprint:<\/strong> Inspect or edit the current site\u2019s <code>blueprint.json<\/code> recipe and export it for reuse.<\/li>\n\n\n\n<li><strong>Site Settings:<\/strong> Choose the WordPress version, <span tabindex='0' class='glossary-item-container'>PHP<span class='glossary-item-hidden-content'><span class='glossary-item-header'>PHP<\/span> <span class='glossary-item-description'>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. <a href=\"https:\/\/www.php.net\/manual\/en\/index.php\">https:\/\/www.php.net\/manual\/en\/index.php<\/a><\/span><\/span><\/span> version, and language, or rename the Playground. Changing the WordPress or PHP version creates a fresh Playground instead of silently changing the current site.<\/li>\n\n\n\n<li><strong>Database:<\/strong> Inspect or export the SQLite database with Adminer or phpMyAdmin. Both tools continue to open in a new tab to provide more working space.<\/li>\n\n\n\n<li><strong>Files:<\/strong> 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.<\/li>\n\n\n\n<li><strong>Logs:<\/strong> Review messages from PHP, WordPress, and Playground in one place.<\/li>\n\n\n\n<li><strong>Export:<\/strong> Download the current site as a ZIP file, copy a link to its original Blueprint setup, or export selected files to GitHub.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">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. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"366\" height=\"800\" src=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/new-playground-UI-1.gif\" alt=\"\" class=\"wp-image-719\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Existing capabilities, fewer clicks<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 <strong>New<\/strong> 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 <span tabindex='0' class='glossary-item-container'>Gutenberg<span class='glossary-item-hidden-content'><span class='glossary-item-header'>Gutenberg<\/span> <span class='glossary-item-description'>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 \u2018blocks\u2019 to add richness rather than shortcodes, custom HTML etc.\r<a href=\"https:\/\/wordpress.org\/gutenberg\/\">https:\/\/wordpress.org\/gutenberg\/<\/a><\/span><\/span><\/span> pull request, import from GitHub, or restore a Playground ZIP without searching through separate menus.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1729\" src=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-blueprint-editor-scaled.png\" alt=\"\" class=\"wp-image-684\" srcset=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-blueprint-editor-scaled.png 2560w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-blueprint-editor-300x203.png 300w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-blueprint-editor-767x518.png 767w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-blueprint-editor-1024x691.png 1024w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-blueprint-editor-1536x1037.png 1536w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-blueprint-editor-2048x1383.png 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Playgrounds<\/strong> 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1729\" src=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-preview-scaled.webp\" alt=\"\" class=\"wp-image-726\" srcset=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-preview-scaled.webp 2560w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-preview-300x203.webp 300w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-preview-767x518.webp 767w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-preview-1024x691.webp 1024w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-preview-1536x1037.webp 1536w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/playground-preview-2048x1383.webp 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\"><figcaption class=\"wp-element-caption\">New Your Playgrounds panel<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Built with the community<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you to <a href=\"https:\/\/profiles.wordpress.org\/ashfame\/\" class=\"mention\"><span class=\"mentions-prefix\">@<\/span>ashfame<\/a> for co-leading the Playground table at Contributor Day; <a href=\"https:\/\/profiles.wordpress.org\/berislavgrgicak\/\" class=\"mention\"><span class=\"mentions-prefix\">@<\/span>berislavgrgicak<\/a> and <a href=\"https:\/\/profiles.wordpress.org\/zieladam\/\" class=\"mention\"><span class=\"mentions-prefix\">@<\/span>zieladam<\/a> for gathering and shaping the ideas; <a href=\"https:\/\/profiles.wordpress.org\/corazondejaguar\/\" class=\"mention\"><span class=\"mentions-prefix\">@<\/span>corazondejaguar<\/a>, <a href=\"https:\/\/profiles.wordpress.org\/feedmymedia\/\" class=\"mention\"><span class=\"mentions-prefix\">@<\/span>feedmymedia<\/a>, <a href=\"https:\/\/profiles.wordpress.org\/tibibuzdugan\/\" class=\"mention\"><span class=\"mentions-prefix\">@<\/span>tibibuzdugan<\/a>, and <a href=\"https:\/\/profiles.wordpress.org\/maxtudio\/\" class=\"mention\"><span class=\"mentions-prefix\">@<\/span>maxtudio<\/a> for the prototypes and design feedback; and @sufmitsingh and <a href=\"https:\/\/profiles.wordpress.org\/muryam\/\" class=\"mention\"><span class=\"mentions-prefix\">@<\/span>muryam<\/a> for helping with testing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"1017\" src=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/contributor-day-group.jpg\" alt=\"\" class=\"wp-image-686\" srcset=\"https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/contributor-day-group.jpg 1536w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/contributor-day-group-300x198.jpg 300w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/contributor-day-group-1024x678.jpg 1024w, https:\/\/make.wordpress.org\/playground\/files\/2026\/07\/contributor-day-group-767x508.jpg 767w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\"><figcaption class=\"wp-element-caption\">Contributor Day WordCamp Europe 2026<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Share your feedback<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Try the new interface on both desktop and mobile. If you find a bug or an unclear workflow, add it to the <a href=\"https:\/\/github.com\/WordPress\/wordpress-playground\/issues\/4092\">New Dock UI review issue<\/a>. Helpful reports include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Your device, operating system, and browser.<\/li>\n\n\n\n<li>The steps you followed.<\/li>\n\n\n\n<li>What you expected and what happened instead.<\/li>\n\n\n\n<li>A screenshot or short recording, when possible.<\/li>\n<\/ul>\n<p class=\"o2-appended-tags\"><a href=\"https:\/\/make.wordpress.org\/playground\/tag\/ui\/\" class=\"tag\"><span class=\"tag-prefix\">#<\/span>ui<\/a><\/p><nav class='o2-post-footer-actions'><ul class='o2-post-footer-action-row'><li class='o2-post-footer-action'><a href=\"https:\/\/login.wordpress.org\/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fplayground%2F2026%2F07%2F31%2Fmeet-the-new-wordpress-playground-interface%2F%23respond&#038;locale=en_US\" title=\"Login to Reply\"  class=\"genericon  genericon-reply\"  data-action=\"login-to-reply\"  data-actionstate=\"default\" >Login to Reply<\/a><\/li><\/ul><div class='o2-post-footer-action-likes'><\/div><ul class='o2-post-footer-action-row'><\/ul><\/nav>","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1261530,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[7],"tags":[121],"class_list":["post-644","post","type-post","status-publish","format-standard","hentry","category-updates","tag-ui","mentions-ashfame","mentions-berislavgrgicak","mentions-corazondejaguar","mentions-feedmymedia","mentions-maxtudio","mentions-muryam","mentions-tibibuzdugan","mentions-zieladam","author-fellyph"],"revision_note":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/make.wordpress.org\/playground\/wp-json\/wp\/v2\/posts\/644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/make.wordpress.org\/playground\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/make.wordpress.org\/playground\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/make.wordpress.org\/playground\/wp-json\/wp\/v2\/users\/1261530"}],"replies":[{"embeddable":true,"href":"https:\/\/make.wordpress.org\/playground\/wp-json\/wp\/v2\/comments?post=644"}],"version-history":[{"count":11,"href":"https:\/\/make.wordpress.org\/playground\/wp-json\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":729,"href":"https:\/\/make.wordpress.org\/playground\/wp-json\/wp\/v2\/posts\/644\/revisions\/729"}],"wp:attachment":[{"href":"https:\/\/make.wordpress.org\/playground\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/make.wordpress.org\/playground\/wp-json\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/make.wordpress.org\/playground\/wp-json\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}