WordPress.org

Adam Zieliński

Dawid Urbanski

<p>This WordPress block embeds WordPress Playground in your posts and pages. You can also include an interactive code editor to demonstrate and teach your readers how WordPress plugins are built.</p>
<h3>Usage</h3>
<ul>
<li>Navigate to any post or page editing screen in WordPress.</li>
<li>Click the ‘+’ button to add a new block and search for ‘WordPress Playground Block’.</li>
<li>Select the WordPress Playground Block from the list of available blocks.</li>
<li>A new WordPress Playground Block will be inserted into your post or page. You can start typing PHP code directly into the block.</li>
<li>Click the ‘Run’ button to execute the code and see the results in the output area below the code block.</li>
</ul>
<h3>All features</h3>
<ul>
<li>Embed WordPress Playground</li>
<li>Log in automatically</li>
<li>Specify landing page</li>
<li>Create new post or page</li>
<li>Redirect to newly created post or page</li>
<li>Specify blueprint to apply on init</li>
<li>Enable/disable code editor</li>
<li>Make code editor read-only</li>
<li>Allow multiple files in code editor</li>
</ul>
<h3>Resources</h3>
<ul>
<li><a href="https://github.com/WordPress/playground-tools/tree/trunk/packages/wordpress-playground-block" rel="nofollow ugc">Source code</a></li>
<li><a href="https://wordpress.org/plugins/interactive-code-block/" rel="ugc">WordPress Plugins page</a></li>
<li><a href="https://developer.wordpress.org/playground" rel="nofollow ugc">WordPress Playground</a></li>
<li><a href="https://wordpress.github.io/wordpress-playground/" rel="nofollow ugc">WordPress Playground repository</a></li>
</ul>
<h3>Support</h3>
<p>For any issues or questions about the WordPress Playground Block, please open a GitHub issue in the <a href="https://github.com/WordPress/playground-tools" rel="nofollow ugc">playground-tools</a> repository.</p>
<p><strong>This is an early preview to gather feedback and apply polish. This plugin isn’t yet a well-rounded and feature-complete solution.</strong></p>
<h3>License</h3>
<p>The WordPress Playground Block Plugin is licensed under the GNU General Public License v2.0. This is a free software license that allows you to use, modify, and distribute the software, provided you adhere to its terms and conditions.</p>


WordPress Playground Block

I Love it

This WordPress block embeds WordPress Playground in your posts and pages. An optional interactive code editor allows readers to learn and explore.

davidfcarr

<p>The Quick Playground plugin provides a safe and convenient way to test new designs and features for your WordPress website, or to create demos and share proposed design changes. It creates a clone of your website’s home page and key content, allowing you to experiment with plugins, themes, and design changes without affecting your live website.</p>
<p><iframe loading="lazy" title="Intro to Quick Playground for WordPress" width="750" height="422" src="https://www.youtube.com/embed/2nrRLy6bXZk?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></p>
<p>The plugin takes advantage of WordPress Playground, the innovative software that simulates a complete PHP/WordPress/database server environment running in your web browser for testing and experimentation. Quick Playground simplifies the creation of Playground Blueprints, which define steps such as installing themes and plugins and loading content. No need to hand-code JSON or arrange for code to be served from Github.</p>
<p>This plugin is ideal for developers and designers who want to test new ideas without disrupting their live website.</p>
<p>Features:</p>
<ul>
<li>
<p>Clone your website’s home page and key content for testing purposes. For performance reasons, the plugin does not attempt to clone your entire database.</p>
</li>
<li>
<p>Experiment with themes and plugins, including unpublished custom code.</p>
</li>
<li>
<p>Test new designs in a WordPress Playground environment.</p>
</li>
<li>
<p>Works on WordPress multisite (clones the individual site, not the whole network). With the Pro version (see below), the multisite network administrator can set default themes and plugins to include or exclude.</p>
</li>
</ul>
<p>Pro Version Upgrades</p>
<ul>
<li>
<p>Save changes for future playground sessions, allowing you to keep experimenting.</p>
</li>
<li>
<p>Create demo environments separate from your live website content, for example to showcase themes, plugins, or hosting services.</p>
</li>
<li>
<p>Sync changes back to your live website. For example, you can prototype block theme changes in Playground and copy the updated templates or template parts back to the live site.</p>
</li>
</ul>
<p>Learn more at <a href="https://quickplayground.com" rel="nofollow ugc">quickplayground.com</a></p>
<p>Developer Friendly Features</p>
<ul>
<li>
<p><a href="https://github.com/davidfcarr/quick-playground" rel="nofollow ugc">Source code on GitHub</a></p>
</li>
<li>
<p><a href="https://github.com/davidfcarr/quick-playground/blob/main/filters.php" rel="nofollow ugc">Examples of Using the Filters and Actions</a></p>
</li>
</ul>
<p>How it Works</p>
<ul>
<li>
<p>You can create multiple Playground profiles, each of which can specify different themes, plugins, playgrounds, content, and settings. The Playground Blueprint is created for you, stored on your server as a PHP associative array, and served to the Playground as JSON file with the same data hierarchy.</p>
</li>
<li>
<p>When a Playground is launched, it loads the themes, plugins, and content specified in your BluePrint. Any custom themes and plugins not in the WordPress repository will be archived on your server as ZIP files and downloaded on demand.</p>
</li>
<li>
<p>Quick Playground loads a copy of itself into the Playground environment and assists with copying over content.</p>
</li>
<li>
<p>If you obtain a Pro license key, a plugin with additional capabilities for saving and syncing content will be loaded into the Playground (not your live website).</p>
</li>
</ul>
<h3>License</h3>
<p>This plugin is licensed under the GPLv2 or later. See the <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">GNU General Public License</a> for more details.</p>
<h3>External services</h3>
<p>Users may configure Quick Playground to display content from other websites that also run Quick Playground.</p>


Quick Playground

Simplify creation of WordPress Playground test, staging, and demo sites. Specify the theme, plugins and content from the WP admin dashboard.

WordPress Playground Block vs Quick Playground