WordPress Core Dev Environment Toolkit: A Faster Path to Your First Core Contribution

One of the most common complaints from 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/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/ facilitators is this: participants spend the entire session trying to set up their local environment and never get to actually contribute.

Before writing a single line of code, a first-time WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. contributor typically needs to install GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/, Node.js, npm, Docker, configure everything correctly, and troubleshoot whatever breaks along the way. At in-person events, this alone can take hours — sometimes the full day.

The WordPress Core Dev Environment Toolkit aims to eliminate this friction entirely.

What is it?

The WordPress Core Dev Environment Toolkit is a desktop application (available for macOS, Windows, and Linux) that sets up a full WordPress core development environment with zero prerequisites.

You install it, choose a directory for wordpress-develop, click a button, and you have:

  • A cloned wordpress-develop repository
  • A running WordPress dev server
  • The ability to make code changes and generate a patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing.

No Git, no Node.js, no npm, no Docker needed. Everything is bundled inside the application as JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors./WASM, powered by WordPress Playground.

Download the app →

What does it do?

Once installed, the app lets you:

  • Clone wordpress-develop into a directory of your choice
  • Run npm install, npm run build, and npm run dev automatically
  • Start a WordPress dev server using Playground’s CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress.
  • Make changes to core files directly
  • Generate a patch from your changes, ready to attach to a TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.

The entire toolchain — npm, Node, Git — runs as 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/WASM bundled with the app. There’s no terminal work required for the basic contributor workflow.

Here’s the full setup flow — from a fresh install to a running WordPress development environment:

Once your environment is running, generating a patch to submit to Trac takes just a few clicks:

Why this matters for Contributor Days

Environment setup has historically been one of the biggest drop-off points during Contributor Days. When participants can’t get set up in time, the session is over before it starts — regardless of their interest or motivation.

This tool makes it realistic to go from attendee to first patch in a single afternoon. It’s designed specifically for the Contributor Day context: fast setup, no prerequisites, no troubleshooting.

How to use it at your next Contributor Day

If you’re organizing or facilitating a core table at a 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.:

  1. Share the download link with participants ahead of the event so they can install it at home on good WiFi (the app is a larger download).
  2. Walk through the setup at the start of the session: install, click to set up the environment, make a small change, generate a patch.
  3. Point participants to the Core Contributor Handbook for guidance on what to contribute and how once they’re set up.

Download and feedback

  • 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/ repository and releases: https://github.com/WordPress/experimental-wp-dev-env
  • The tool is experimental and under active development. Feedback is welcome via GitHub issues.

If you use this tool at a Contributor Day, please share how it went — either in the comments below or in the #core channel on 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/. Reports from the field help prioritize improvements.

Props to @greenshady @desrosj @audrasjb for review

+make.wordpress.org/playground/ +make.wordpress.org/test/ +make.wordpress.org/community/

#contributor-day, #playground, #wordcamp

Hallway Hangout: Let’s chat about WordPress Playground

With WordPress Playground gradually becoming a larger part of our day-to-day lives as developers, it’s time to chat about what the project should look like going forward. There is a proposal for a v2 of the Blueprints schema, and we could use your feedback on current and future use of Playground.

So let’s have a casual conversation on what would benefit you as developers.

How to join

If you’re interested in joining us, the Hallway Hangout will be on Monday, March 4, 2024 at 04:00 pm (16:00) UTC. A Zoom link will be shared in the #outreach Slack channel before the session starts. 

Everyone is welcome to join, regardless of whether it’s just to listen or actively participate. This session will be recorded and recapped here on the Make CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blogblog (versus network, site).

As usual, Hallway Hangouts are conversational events where you, the WordPress community, can provide your feedback directly to contributors to WordPress. This feedback is invaluable in steering the direction of the overall project.

Agenda

On the whole, the biggest thing we want to accomplish with this event is to bring more awareness to the WordPress Playground project, which lets you experience WordPress directly from the browser (no complicated setup necessary). Give it a try →

With this goal in mind, @zieladam, the architect of Playground, and I would like to discuss:

  • The Playground Blueprints system and how it works
  • What existing features you find the most useful in your own work
  • What current features feel limiting
  • The missing features you’d like to see going forward

We hope that you all can join us and help shape the future of WordPress Playground.

Post reviewed by @zieladam.

#hallway-hangout, #outreach, #playground

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 7.4 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 by the repository owner. https://github.com/, or join the #metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.-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