In-Browser WordPress Tech Demos: WordPress Development with WordPress Playground

WordPress Playground was recently used at a hackathon to prototype three different ways of building WordPress plugins with very little setup and directly in the browser:

• WP-CLIWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/ and PHPUnit in the browser
• WordPress as a VS Code extension
• Mobile pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party editor

WP-CLI and PHPUnit in the browser

The first demo brings popular WordPress terminal tools and a code editor into the browser:

A significant challenge was executing shell commands in the browser. Although various browser-based Linux implementations were explored, none fully addressed the issue or were feasible within the limited time frame. Consequently, basic commands like ls, cd, and cat were manually implemented, along with the exposure of wp-cli and phpunit.

By the end, many wp-cli commands were running, phpunit tests were functional (although not all passed), and the code editor updated live WordPress files – all while working offline.

This project, built by @swissspidy and Florian Blaser, is currently being incubated in WordPress Playground Pull Request #161.

WordPress dev server as a Visual Studio Code extension

The second demo is a WordPress development server that you can start without ever installing MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/., PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher, or an ApacheApache Apache is the most widely used web server software. Developed and maintained by Apache Software Foundation. Apache is an Open Source software available for free. web server. It works as a Visual Studio Code extension:

The primary challenge was understanding the concept of running PHP inside JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/., which differs from typical PHP or Node.js development. This VS Code extension provides a single-click development environment, potentially benefiting WordCamps, Learn.wp.org courses, and various workshops.

This project was built by @danielbachhuber, Adrian Stobbe, Mohannad Rahmani, and @ebinnion and lives in a working GitHub repository created by Daniel. Eventually, it may be moved into the WordPress Playground repository.

While this extension is highly experimental, it is publicly available in Visual Studio Marketplace for everyone to try. The code lives in a GitHub repository and is intended for migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. to the official WordPress Playground monorepo. If you have experience with VS code extensions and would like to help develop them, your help is most welcome!

Mobile editor

In the third demo, @gziolo and @zieladam explored a full WordPress IDEIDE Integrated Development Environment. A software package that provides a full suite of functionality to software developers/programmers. Normally an IDE includes a source code editor, code-build tools and debugging functionality. in the browser. In the video you can see a 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/ blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. developed entirely in Stackblitz. It’s worth noting that Sandpack + WebContainers emerged as a suitable open-source alternative:

This setup allows for building WordPress blocks in the browser, on mobile devices, and even offline. Most npm packages are also supported. It’s believed that this could empower a vast number of new internet users to create within the WordPress ecosystem, even without a desktop device.

The Stackblitz example is publicly available here.

Call for contributions

All of these projects are open for future contributions, and you are encouraged to get involved. Feel free to share your thoughts in the comments, on 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 be the repository owner. https://github.com/, or join the #meta-playground WordPress.org slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel.

Props to the following editors and co-creators of this post: @cbringmann, @annezazu

#playground