Let’s make WordPress officially support SQLite

WordPress can be (and is) used for any kind of site, regardless of size or complexity. Some common use-cases include:

  • Single-page landing sites
  • Simple company sites with just a few pages. These sites are usually rarely updated and are essentially static sites with an administration aspect.
  • Simple, single-user blogs
  • Complex news sites
  • e-Commerce sites
  • Full-fledged CMS solutions

Part of the success of WordPress is because it is extendable, hookable, and can be used and tweaked to accomplish almost any task on the web.

However, one aspect of WordPress has never changed, regardless of the increase in WP’s use cases and popularity: The database. WordPress requires 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/./MariaDB to be installed on a site. MySQL is arguably only optimal for some of the scenarios: The “mid-tier” range of site types.

Large sites usually implement custom database stacks depending on their specific needs, so are beyond the scope of this proposal.

On the lower end of the spectrum, there are small and simple sites. These are numerous and consist of all the blogs, company pages, and sites that don’t have thousands of users or thousands of posts, etc. These websites don’t always need the complexities of a MySQL/MariaDB database. The requirement of a dedicated MySQL server increases their hosting cost and the complexity of installation. On lower-end servers, it also decreases performance since the same “box” needs to cater to both a PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher and a MySQL/MariaDB server.

The ideal scenario

Ideally, WordPress would allow us to choose the type of database during installation. That could be done using an installation guide, or a simple constant in wp-config.php. To accomplish that, WordPress would need to have a database-abstraction layer. This is not an innovative or radical idea in the CMS space; Drupal has had a solid database-abstraction layer for more than a decade. Laravel, Symfony, and others also include ORMs that allow using multiple database types.

Building a database abstraction layer for WordPress would be a colossal task – though it might be one that, at some point in the future, we may have to undertake to ensure the project’s continued evolution and longevity.

A middle ground

As a middle ground, we could implement a solution for the bottom tier: small to medium sites and blogs. These sites don’t necessarily need a full-fledged MySQL database.

SQLite seems to be the perfect fit:

  • It is the most widely used database worldwide
  • It is cross-platform and can run on any device
  • It is included by default on all PHP installations (unless explicitly disabled)
  • WordPress’s minimum requirements would be a simple PHP server, without the need for a separate database server. 
  • SQLite support enables lower hosting costs, decreases energy consumption, and lowers performance costs on lower-end servers.

Implementing SQLite in WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.

Using SQLite in WordPress is, at this point, simple; There are implementations out there that have been around and evolving for more than 8 years. They have been thoroughly tested and proved to work seamlessly. These implementations are drop-in wp-content/db.php files that users can add to their installation; they are not hard to use. 

However, most people are not aware of them. They are not aware that they have the option to buy cheaper hosting sans-mysql and then install WordPress using an SQLite database. Nor should they have to know about it… After all, they just want a simple company site or a blogblog (versus network, site)

WordPress could officially support SQLite by including one of the existing SQLite implementations in Core. We would need to ensure that it is properly tested and supported, and additionally, raise awareness and expose the option to users.

Why should this be in Core and not a 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

Picking a database type is something that should happen when a site is first installed. It is not something that should be done after the fact because that would require migrating data from one database to another, which can often be complex. 

WordPress includes the MySQL implementation in Core, so if we support SQLite then that implementation should live alongside it. 

Data migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. can (and should) be in a plugin to facilitate migrations for existing sites should they wish to do that, but the database engine itself belongs in Core. 

That will ensure that the implementation is properly supported, properly tested, and WordPress will be able to benefit, as detailed in the following section.

What would the benefits of SQLite be?

Officially supporting SQLite in WordPress could have many benefits. Some notable ones would include:

  • Increased performance on lower-end servers and environments.
  • Potential for WordPress growth in markets where we did not have access due to the system’s requirements.
  • Potential for growth in the hosting market using installation “scenarios”.
  • Reduced energy consumption – increased sustainability for the WordPress project.
  • Further WordPress’s mission to “democratize publishing” for everyone.
  • Easier to contribute to WordPress – download the files and run the built-in PHP server without any other setup required.
  • Easier to use automated tests suite.
  • Sites can be “portable” and self-contained.

Next steps

The next steps would need to be discussed in the comments section of this proposal. If there is consensus to implement SQLite in WordPress Core, an outline of the next steps would look something like this:

  • Create the necessary TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets
  • Decide how the database type would be defined. The most simple scenario would be a DATABASE_TYPE constant in wp-config.php, allowing users to choose if their new site would use a MySQL or SQLite database, but there can be other solutions that come up during a later discussion.
  • Port an SQLite implementation to WordPress Core, applying the necessary changes like coding standards, in-code documentation, migrate tests, etc.
  • Test WordPress Core functionality with SQLite
  • Outreach to plugin developers for testing.

The subject of database abstractions and using SQLite was discussed at length during WCEU 2022, in an unofficial capacity, in the hallways. This post is a distilled culmination of these conversations to bring the discussion to the broader community for serious consideration.

Props @zieladam, @mamaduka, @jonoaldersonwp, @tweetythierry, @SergeyBiryukov, @joostdevalk, @dingo_d, @desmith, @crixu, @williampatton, @costdev, @adamsilverstein, @JavierCasares, @robinwpdeveloper, @aaemnnosttv, @jessibelle for reviewing and contributing to this proposal.

#database, #install, #performance, #sustainability

New is_login_screen() function for determining if a page is the login screen

In #19898 the is_login_screen() function was introduced to allow for determining if a page is the login page.

The is_login_screen function determines if the current request is for the WordPress login screen returning true when the current screen matches and false for all other cases. This function will provide a quick and searchable way of checking if the login screen is being viewed. Custom login locations are also accounted for in this function. By checking $_SERVER['SCRIPT_NAME'] directly, instead of did_action( 'login_form_login' ) or $pagenow global, the function can work as early as possible, for example in a must-use 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.

In the below example a check is happening on the init action to display a welcome message on the login page only. This check would account for pages that have custom login screens in non-standard locations.

function add_text_to_login() {
    if ( is_login_screen() ) {
        echo( "<h1>Welcome to the login screen!</h1>" );
    }
}
add_action( 'init', 'add_text_to_login' );

For more information See #19898.

Props to @antpb for reviewing this dev-note.

#6-1, #dev-notes, #dev-notes-6-1

Bug Scrub Schedule for 6.1

With 6.1 well underway, here’s the initial schedule of 6.1 bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrub sessions. These 6.1-specific ticketticket Created for both bug reports and feature development on the bug tracker. scrubs will happen each week until the final release.

Alpha Scrubs:

Hosted by @audrasjb:

Hosted by @chaion07:

BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. Scrubs:

RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). Scrubs:

Check this schedule often, as it will change to reflect the latest information.

What about recurring component scrubs and triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. sessions?

The above 6.1 scheduled bug scrubs are separate and in addition.

For your reference, here are some of the recurring sessions:

Have a recurring component scrub or triage session?
PingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @audrasjb or @chaion07 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/. to have it added to this page.

Want to lead a bug scrub?

Did you know that anyone can lead a bug scrub at anytime? Yes, you can!

How? Ping @audrasjb or @chaion07 on slack and let us know the day and time you’re considering as well as the report or tickets you want to scrub.

Planning one that’s 6.1-focused? Awesome! It can be added to the schedule above. You’ll get well deserved props in the weekly Dev Chat, as well as in the #props Slack channel!

Where can you find tickets to scrub?

  • Report 5 provides a list of all open 6.1 tickets:
    • Use this list to focus on highest priority tickets first.
    • Use this list to focus on tickets that haven’t received love in a while.
  • Report 6 provides a list of open 6.1 tickets ordered by workflow.

Need a refresher on bug scrubs? Checkout Leading Bug Scrubs in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. handbook.

Questions?

Have a question, concern, or suggestion? Want to lead a bug scrub? Please leave a comment or reach out directly to @audrasjb or @chaion07 on slack.

#bug-scrub

Core Editor Improvement: Catalyst for creativity and control

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

Alongside the addition of more blocks to edit more parts of your site, more design tools are being added across all blocks to both ensure consistency in the experience and to allow folks to customize their site even more, without needing to use CSSCSS Cascading Style Sheets.. This post goes through each categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of design tools, what blocks they are available in, the progress made, and some fun examples showing off what you can now do. The result is a catalyst for creativity, with more to come on the horizon. 

Typography 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. Support

Visual listing out all of the block with typography support in four columns with a green color scheme.

These settings include font size, line height, font style, font weight, text transform, letter spacing, font family, and text decoration. When combined, these allow you to have new ways to differentiate your content, whether by making something stand out more or less. At a high level, various combinations of these options are available in the following blocks with many added for the 6.1 release cycle: 

  • Column/Columns
  • Categories
  • Code
  • Comment Author Name
  • Comments Content
  • Comment Date
  • Comment Edit Link
  • Comments Reply Link
  • Comment Template
  • Paragraph
  • Comments
  • Comments Pagination
  • Comments Pagination Next
  • Comments Pagination Numbers
  • Comments Pagination Previous
  • Comments Title
  • Cover
  • Home Link
  • Group
  • Latest Comments
  • List
  • Media & Text
  • Page List
  • Post Author
  • Post Author Biography
  • Post Author Name
  • Post Comments Count
  • Post Comments Link
  • Post Content
  • Post Date
  • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.
  • Post Template
  • Post Terms
  • Post Navigation Link
  • Preformatted
  • Pullquote
  • Search
  • Table of Contents – not available in 6.1
  • Latest Posts
  • Navigation
  • Query No Results
  • Query Pagination
  • Query Pagination Next
  • Query Pagination Numbers
  • Query Pagination Previous
  • Query Title
  • Quote
  • Term Description
  • Verse
  • Button/Buttons
  • Archives
  • Calendar
  • Site Title
  • Site Tagline
  • Table
  • Heading
  • Navigation Link
  • Read More

      To see the power of these supports in action, here’s an example of using them to personalize a button: 

      The audit for this set of design tools is 85.71% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Dimensions and Spacing Block Support

      Visual listing out all of the block with dimension and spacing support in four columns with a blue color scheme.

      These supports include padding, margin, block gap, height, width, and min height. As the name suggests, they give you exact control over the layout of blocks both in relation to inner blocks (like the layout of a List or Gallery) and in relation to blocks nearby. At a high level, various combinations of these options are available in the following blocks with many added for the 6.1 release cycle: 

      • Archives
      • Audio
      • Tag Cloud
      • Table of contents – not available in 6.1
      • Table
      • Term Description
      • Spacer
      • Post Date
      • Heading
      • Paragraph
      • Query Title
      • Post Title
      • Video
      • List
      • Media & Text
      • Verse
      • Categories
      • Comment Edit Link
      • Comment Date
      • Comment Reply Link
      • AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.
      • Site Logo
      • Social Links
      • Gallery
      • Button/Buttons
      • Code
      • Column/Columns
      • Comment Author Name
      • Comment Content
      • Comments Title
      • Cover
      • Group
      • Heading
      • Navigation
      • Post Author
      • Post Author Biography
      • Post Author Name
      • Post Excerpt
      • Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.
      • Read More
      • Separator
      • Site Tagline
      • Site Title

      To show how you can use these tools to refine your work, here’s an example of just using the block gap option to manage the layout of social links: 

      The audit for this set of design tools is 54.76% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Colors Block Support

      Visual listing out all of the block with color support in four columns with an orange color scheme.

      This includes text color, background color, link color, gradient options, and duotone filters. These options allow you to do everything from add a custom duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to all featured images in a display of posts to picking unique color combinations for your social links. At a high level, various combinations of these options are available in the following blocks with various ones added for the 6.1 release cycle: 

      • Social Links
      • Gallery
      • Calendar
      • Table of Contents – not available in 6.1
      • Social Links
      • Button
      • Avatar – Duotone only
      • Code
      • Column/Columns
      • Comment Author Avatar – Background only
      • Comment Author Name
      • Comment Content
      • Comment Date
      • Comment Edit Link
      • Comment Reply Link
      • Comments
      • Comments Pagination
      • Comments Pagination Next
      • Comments Pagination Previous
      • Comments Title
      • Cover – Duotone only
      • Gallery – Background only
      • Group
      • Heading
      • Image – Duotone only
      • List
      • Media & Text
      • Navigation
      • Paragraph
      • Post Author
      • Post Author Biography
      • Post Author Name
      • Post Comments Count
      • Post Comments Form
      • Post Comments Link
      • Post Date
      • Post Excerpt
      • Post Featured Image – Duotone only
      • Post Navigation Link
      • Post Terms
      • Post Title
      • Preformatted
      • Pullquote
      • Query
      • Query No Results
      • Query Pagination
      • Query Pagination Next
      • Query Pagination Numbers
      • Query Pagination Previous
      • Query Title
      • Quote
      • Read More
      • Search
      • Separator
      • Site Logo – Duotone only
      • Site Tagline
      • Site Title
      • Social Links
      • Table
      • Table of Contents
      • Term Description
      • Verse

      To see these supports in action, here’s an example of providing your own colors for social link icons that match with the branding on your site: 

      The audit for this set of design tools is 65.47% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Layout Block Support

      Visual listing out all of the block with layout support in one columns with a blue color scheme.

      Of note, this support only applies to container blocks (buttons, columns, gallery, etc) since it impacts the layout of blocks within each.  At a high level, various combinations of these options are available in the following blocks. Note that no new supports were added for the 6.1 cycle: 

      • Buttons
      • Column
      • Columns
      • Comments Pagination
      • Gallery
      • Group
      • Navigation
      • Post Content
      • Post Template
      • Query
      • Query Pagination
      • Social Links

      To see these specific container related options in play, here’s an example with the navigation block where you can quickly switch between different configurations as you find which best fits with the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. of your choosing:

      The audit for this set of design tools is 52.17% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Border Block Support

      This includes the ability to control color, radius, style, and width on each side of the border. These powerful set of tools allows for some neat ways to decorate everything from individual images to overall columns of content. At a high level, various combinations of these options are available in the following blocks with a few added for the 6.1 release cycle: 

      • Post Featured Image
      • Column/Columns
      • Image
      • Avatar
      • Button
      • Code
      • Column/Columns
      • Comment Author Avatar
      • Comments Title
      • Group
      • Pullquote
      • Read More
      • Search

      To see how borders can transform a block, here’s an example showing how a theme author can customize a featured image block to make it stand out even more: 

      The audit for this set of design tools is 14.28% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      The power of combining tools

      While this post sectioned out the various design tools to make it easy to catch up on all that’s happened, remember that the true power in these tools comes when they are combined altogether. For a simple yet powerful and common example, here’s a video showing how with some very quick changes you can make a paragraph pop to better call attention to a part of your post:

      For a more complex example, here’s a video showing how you can customize your featured image block with various borders and a duotone filter, long before you select the image of your choosing: 

      More to come

      The above simply captures the initial set of work to create consistency across blocks, with tons more planned to offer an increasingly intuitive default experience for all blocks and to stabilize the underlying block support APIs. This has been a massive effort involving a flurry of PRs across multiple different 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/ releases ahead of 6.1. As these tools grow, the question of how best to scale the interface becomes more important, with explorations already underway for a better way to reset values and clarify inherited styles. Tied to this, it’s also important that any omission of support is deliberate in order to ensure a more cohesive experience. 

      Props to @markoserb for the design help with the visuals you see above and @beafialho for help with the video demos!

      #core-editor, #core-editor-improvement

      Developer Blog Editorial Group – Meeting Notes September 1, 2022

      Attendees: @marybaum, @daisyo, @milana_cap, @psykro, @webcommsat, @mburridge, @bcworkz, and @bph

      Agenda

      • Introductions
      • Editorial Guidelines (from this proposal)
      • Infrastructure of the Developer Blogblog (versus network, site) 
      • Project / Issues tracking
      • Review process
      • Tasks & Posts left to go live

      Editorial Guidelines for Writers and Reviewers

      From the proposal: 

      From the discussion, the consensus emerged that this new Developer blog is not just ‘more documentation’. Rather, it’s a place to talk to developers as people, first, and then as members of a community.

      To that end, the group agreed that one of the first pages on the blog should be about writing for the blog—both in tone, from the above style guides, and with tips and tricks on how to write, so people will keep reading. 

      These examples might go on such a page (and drive its tone): 

      • In an open-source environment, there is no imperial we’re making the decisions and doing the things. Specific people, or groups of people, might do things, and the code does things. Spell out who is driving the action.
      • Use active verbs; the way to get around using we is not to say a thing was done (by magic?), but to say that a person, group, function, or other piece of code does a thing. In a pinch, say a thing happened or got done; at least getting done is a little more active than being done.
      • Make the reader the star of the show. Walk in their shoes, and lead the way forward, to show what they’ll get from reading the next sentence, and the next, until they see the tangible benefits that come when they do what you recommend. 
      • Look to the Documentation Style Guide for official terminology re: code examples, references to UIUI User interface elements and technical instructions, so they stay consistent across the teams. 

      The training and marketing teams have published guidelines that can be screened to ensure consistency across the project.

      For using screenshots within a post, this Best Practices for Capturing Screenshots will be a useful guide. Other assets like video, animated GIFs or presentation would need to covered as well.

      The blog will also need a set of publishing standards to guide decisions on SEO, excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. handling, subheaders, featured images, TL;DRs etc. 

      As the group builds the GoLive edition, it will have to handle these things for the first time; later iterations can influence long-term policy.

      Authorship 

      The proposal said: “Posts should be published by users of WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/, with the author link going to the WP Profile page. Authors should also credit reviewers, editors, and other contributors.” 

      Participants agreed to clarify that the author link should go to a contributor’s personal WP.org profile and not a company’s profile. That follows how the training team handles authorship. 

      Original content and republishing  

      Participants discussed concerns of plagiarism and how to detect it. It was suggested during a still to be finalized submission process, the author will give assurance that its original content. Another suggestion is to include this topic in a future reviewer’s checklist, but to avoid it becoming a difficult task with the onus being on checking the author had self-verified it as original content. In the longer-term future, blockchain technology may be able to assist. 

      Infrastructure for the Developer Blog

      • The Developer Blog site is on the way to have final design and information architecture for GoLive. It is only accessible to the contributors working on it. 
      • Asynchronous discussions and announcements take place in the new WP 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 #core-dev-blog
      • The public 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/ space Developer Blog Content tracks content tasks, which already has an initial set of labels and stages. That set is bound to grow as the team adds content categories and issue types. A separate Discussion space can host ideas for blog posts, relevant conversations and even final outlines before a given idea becomes an actual task on the issue list. 
      • This project board will show content as it progresses from concept to published posts
      • The Theme’s code also lives on GitHub. 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. Team owns it, just as it does the rest of WP.org. 

      Birgit will add editorial group members to the site and GitHub spaces in the following weeks and message them on WP Slack. 

      The Review process is roughly as outlined in the proposal.  With the GitHub tools it can come to life. 

      Once the first set of posts go through the process, the editorial group will likely have tweaks to make to the formal guidelines. 

      Task list to Go live 

      • A great set of first posts. 
        • Three ideas
          • Business case for create-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. script adoption
          • Perspective Change between classic themes + Block Themes
          • Journey of a PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher developer to 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/ adoption, enhancing Core blocks and building custom blocks.
        • Meeting leaders asked participants to think about additional ideas, and also mention it to other contributors and members of the community, on what is particularly missing.  
      • Review collected posts by the editorial group
      • Draft more content areas for the following blog pages, and share with the group to help start building:
        • About page
        • How to get involved
        • Editorial Guidelines
      • Finish setting up the website 

      Tasks will go on the issues list for collaboration and version controlversion control A version control system keeps track of the source code and revisions to the source code. WordPress uses Subversion (SVN) for version control, with Git mirrors for most repositories.

      Future meetings

      The next meeting will be October 6, 2022, at 13:00 UTC / 9 am EDT 

      Initially, meetings will be once a month on the 1st Thursday of the month. 

      • November 3rd at 13:00 UTC / 9 am EDT
      • December 1st at 13:00 UTC / 9 am EDT

      Props for review: @webcommsat @mburridge @jeffpaul 

      #core-dev-blog

      WebP in Core for 6.1

      I’ve been reading through all the conversation and issues here. I am interested in supporting new formats and improving performance, but I think this change being pushed by default to users when they upgrade to 6.1 is a lot for right now, including with some of the clunky interactions OSes still have around webp (and HEIC!) files.

      I’m happy for support for working for webp and HEIC files to stay in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., as we should be liberal in what we accept and work with, but not with the change to convert everything to webp when JPEGs are uploaded.

      This is excellent territory for a canonical 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, a concept I think every Make team should be exploring a lot more as a place to experiment and push functionality, much like we have with MP6 and 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/ in the past. I think the plugin directory needs more collaborative, community-developed, and non-commercial or no-upgrade plugins that do something well, and make teams are the perfect groups to develop and maintain those. It’s the ethos and process of core applied to plugins, that then we can officially recommend and feature in the plugin directory, and also allows us to keep core light or give more time for the ecosystem around something (like WebP) to mature.

      Will do a second post on canonical plugins.

      Dev Chat agenda, September 28, 2022

      The next weekly WordPress developers chat will take place in the #core 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 on Wednesday September 28, 2022 at 20:00 UTC .

      Summary of the last Dev Chat on September 21, 2022 – posted by @webcommsat

      1. Welcome

      2. Announcements

      WordPress 6.1 Beta 2 released – September 27, 2022

      3. Blogblog (versus network, site) posts

      A Week in Core – September 26, 2022 – posted by @audrasjb

      Core Editor Improvement: Catalyst for creativity and control, September 26, 2022 – posted by @annezazu

      Proposal: Client-side WebAssembly WordPress with no server, September 23, 2022 – posted by @zieladam.

      4. Releases

      i) Major releases – 6.1

      • Update on the discussion on the 6.1 release date from last week’s meeting.
      • Update from release leads/ squad

      5. Component maintainers/ Tickets to highlight/ help requests

      Please add any updates or tickets you wish to raise in the comments below.

      6. Open Floor

      Please add any items you would like to raise in open floor in the comments below.

      #agenda, #dev-chat

      Canonical Plugins Revisited

      The 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 directory is great, but many plugins are controlled by a single dev or company, and often end up going a direction of a premium or pro version, sometimes even removing functionality that used to be in a plugin and pushing it into the pro version. This can also create an incentive to put something into a SaaS service that is easily done in a more distributed fashion locally to the site. Even accepting donations can create some weird incentives for how to divide those among a number of contributors.

      WordPress itself thrives because it’s a collaborative effort of many people with many varied interests, but coming together to create something that is explicitly open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL., free, and available to all. We need to evolve the plugin directory to make it easier to accept code and documentation contributions. (We’re pretty good with translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. contributions already.) Also I think we should build on the successful history of canonical plugins like MP6, 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/, and REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. to have more community-developed plugins, called canonical because they will be the official first-choice recommendation by coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and w.org for an area, that share in the ethos and approach of WordPress itself but to a more niche area that might not be right for core.

      We are reaching a point where core needs to be more editorial and say “no” to features coming in as ad hoc as they sometimes do, and my hope is that more Make teams use this as an opportunity to influence the future of WordPress through a plugin-first approach that gives them the luxury of faster development and release cycles (instead of three times per year), less review overhead, and and path to come into core if the plugin becomes a runaway success. I am very conscious that when people are aiming to have something in core, a “no” or “not now” can be frustrating and sometimes create artificial pressure to put something in before it’s ready, as I believe happened with the REST API in WP 4.4.

      Canonical plugin ideas for each make team:

      Design: More adminadmin (and super admin) themes.
      Mobile: (not sure)
      AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility): An alternative APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.-based admin designed for accessibility and simplicity.
      Polyglots: Inline translation submissions for core and plugins and themes.
      Support: Related threads or documentation pages dynamically loaded from w.org for the “help” dropdowns on every page.
      Documentation: Experiment with adding more inline documentation to wp-admin interfaces. Gather opt-in stats on what is actually read and used, which links to .org get clicked on.
      Themes: Better previews of theme customizations, activation workflows that allow customization of colors / images / typography.
      Plugins: Inline rating and feedback for plugins, crash and compatibility data reporting back.
      Community: Experiment with the dashboard widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. that promotes events to call to action for organizing when there’s not a local meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area., and better incorporates online events including workshops and cohort classes.
      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.: Login with .org login account. Dashboard with all of your linked WPs on w.org. Monitor versions, install plugins with one-click, etc.
      Training: Courses or training in every help dropdown.
      Test: Opt-in JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. or PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher error catching that reports back to a tracking server.
      TV: Integration with help dropdowns, inline tutorial videos.
      Marketing: Widgets and blocks for people to link back to W.org, like super-charged “powered by”, and promote their liked or favorite plugins and themes.
      CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress.: N/A.
      Hosting: Experiment with standard hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same., icons, and menu items for hosts to link or embed things like email, domains, contacting support.
      Tide: Show the data more places in wp-admin.
      Openverse: Should actually just come into core more, but perhaps plugin would be a good place to experiment with submitting something to openverse and CC licensing any media upload. Community and collaborative tagging of uploads and openverse items.
      Photos: Similar to openverse, make it possible to submit uploads and search directory.
      Core performance: WebP conversions for new uploads and batch processing to convert old images. Show before-after space usage and page performance. (Previous post on WebP in 6.1 that inspired this.)

      This is not meant to be an exhaustive list, and I’m sure the teams themselves could come up with much better ideas and options, but I hope it sparks discussion at 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/. and beyond on how we can utilize plugins better to increase the speed of evolution for WordPress, keep core light, fast, and opinionated, and do so while saying “yes” to more ideas and experimentation.

      Core Editor Improvement: Deeper customization with more template options

      These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects.

      With the last few releases of WordPress expanding what’s possible to edit on your site, from templates to theme blocks, Gutenberg 13.7 continues this work with more templates that theme authors and end-users can create directly from the site editor. If you’ve ever wanted to have a customized experience of a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of posts, like your recipes or latest book reviews, or to have a unique template for a special post, you’ll enjoy what’s now possible. Here are the following templates that the last few 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/ releases have unlocked for editing directly:

      • Page templates: page-specific templates.
      • Post templates: custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. and post-specific templates.
      • Custom templates: user-selectable custom templates for all post types.
      • Taxonomy templates can be specific to a taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. (e.g., category, tag) or to a specific term within a taxonomy (e.g., category-slug).

      Keep in mind that WordPress has supported these types of 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. templates since version 5.8 if developers manually bundled them in their themes. However, these changes allow users and extenders to create them directly from the new site editor interface. It also brings us one step closer to building more complex WordPress themes without writing code.

      There are tons of use cases for these types of templates, only limited by what their creators want to build. For example, a user might want to show a grid of posts for a specific “photography” category but not change the default list style for others. A restaurant owner might remove the site’s default sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. on the “menu” page to let photos of the dishes take center stage.

      To ensure third-party plugins can properly take advantage of this system too, work was done to clarify taxonomy-specific templates labels. Specifically, some custom taxonomies from third-party plugins share the same label (e.g., post categories and product categories both using the “Categories” term). In 13.7, the taxonomy slug is added in parentheses for additional clarity.

      Custom Template Examples

      To add custom post type or taxonomy templates, visit Appearance > Editor in the WordPress adminadmin (and super admin). Clicking the WordPress icon/button in the corner of the screen will open the sidebar panel. From there, select the Templates option.

      At the top of the new page, click the “Add New” button to open the template dropdown as shown in the following screenshot:

      WordPress admin screen that displays a list of the current templates.  The "Add New" dropdown button is selected in the top right with a list of new templates to create.

      There should be several options listed with a default WordPress install with customization options:

      • Page
      • Category
      • Tag
      • Single item: Post
      • Custom template

      Creating a Custom Page Template

      To create a custom page template, select the “Page” option from the Templates > Add New button’s dropdown menu. A new overlay will appear on the screen for selecting a specific page to apply the template to, as shown in the following screenshot:

      Overlay popup for selecting a page to create a template for, showing a list of pages.

      The overlay lists the site’s pages and a search field for quickly looking up a specific page. Creating a new template is a matter of selecting the page. WordPress then redirects to the editor for building out the template’s block content.

      The Page, Post, and Custom template options are all similar in scope. However, there are some slight differences:

      • Page allows creating individual templates that can be applied to a specific page on the site or as the default page template (if not already defined by the theme).
      • Single item: Post allows users to create post-specific templates or the default template for all posts.
      • Custom template is for creating a custom template that can be assigned to any post, page, or custom post type.

      All three types of templates essentially allow you to define a custom template for a post. The primary difference is that “page” and “single item: post” are assigned automatically to their respective page or post. However, the “custom template” is not assigned to until a post/page author selects it from the template dropdown on the post-editing screen.

      These templates are often used to change the outer layout instead of the content for a specific post. For example, you could create a “custom template” that uses a Cover block for a featured-headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. area. Then, assign it to posts or pages when you want a large banner image to stretch across the screen, as shown in the following screenshot:

      WordPress site editor with a cover image behind the site header and post title. The "use featured image" option is selected for the cover block.

      There are no limits on how to design a template’s layout. Another common situation is adding or removing a sidebar for specific pages, depending on what the theme’s default is.

      Creating a Custom Category Template

      To create a new category template, select the “Category” option from the Templates > Add New button’s dropdown menu. The overlay will offer two choices, as shown in the following screenshot:

      Overlay popup that displays two options:  one for a default category template and one for a specific category.

      The first option is for creating the default category template. This is used as a fallback when a more specific category template does not exist. Selecting this option will immediately create the template and move you to the editor for customization.

      The second option is for creating a custom template for an individual category. For example, perhaps you write posts about each 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. you attend and want to have a specific template that adds some additional context when folks look at all of your WordCamp posts. Selecting this option opens a new set of choices for selecting the category, as shown in the following screenshot:

      Overlay popup that displays a category selection list.

      Like creating a page-specific template earlier, the process is the same. Select the category and edit the new template from the site editor.

      Tag and custom taxonomy templates work the same as above for ease of use.

      A Look at What’s Next

      Expanding what templates can be added continues on with only a few additional use cases to cover. Beyond that overarching work, there are a few open tickets related to custom templates that folks can follow if they are keen to see how this experience will continue to improve. One such ticketticket Created for both bug reports and feature development on the bug tracker. discusses pre-populating new templates from a fallback template within the template hierarchy. This means you would be presented with content already in the template rather than starting from scratch, greatly saving time.

      Another PR focuses on improving the experience of clearing customizations when a user has customized a theme’s template. Currently, the description reads “Restore template to default state” whereas the update would offer clarification by changing it to “Use the template as supplied by the theme.”

      Taken together all of these should help users and extenders alike embrace these new ways to customize your site.

      Notes

      The Custom template option cannot currently be assigned to specific post types. Templates created via this option are available for all posts, regardless of type. For example, the UIUI User interface does not account for creating a template that users can assign to only pages and/or products (custom post type). This is supported via the template hierarchy, and theme authors can still manually create them.

      Custom templates are also not defined in the theme.json when exporting the theme ZIP file via the site editor.

      Props to @annezazu for co-writing, proofreading, and outlining the scope for this post.

      #core-editor, #core-editor-improvement, #gutenberg

      Client-side WebAssembly WordPress with no server

      This early demo runs a full WordPress directly in the browser without a PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher server! While it isn’t fully stable yet, it is a major breakthrough that could transform learning, contributing, and using WordPress. This post explores the opportunities and explains in detail how it works. 

      Your help is needed to realize the vision laid out below. None of the presented mockups and early explorations are currently reliably implemented. This project needs volunteers to stabilize the code and build revolutionary tools on top of it. If you’d like to be a part of it, please say so in the comments!

      Learning WordPress in the browser

      The code examples in the WordPress handbook could become runeditable, like in this early preview:

      Furthermore, an in-browser 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. could lead new contributors through solving their first “Good first issue” without setting up a local development environment. Just like this early preview:

      Finally, a guided code editor could become a primary teaching tool for new developers. They would click a “Build your first 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.” button on WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ and immediately start coding. This is what it could look like:

      WordPress Developer tools

      Testing code on different WordPress, PHP, and 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/ versions currently require a tedious setup. With an in-browser WordPress IDE, it wouldn’t require any setup at all. As a developer, you would switch between the different versions by selecting different entries in a box:

      Taking it further, the continuous integration pipeline could replay the failed tests right in the browser and provide a code editor to debug and fix the problem on the spot:

      On a different note, the desktop and mobile apps could reuse WordPress code by running an actual WordPress instance – even when offline.

      Finally, WordPress could potentially be scaled up by spinning up many tiny self-contained WASM instances directly on the edge servers.

      Showcasing

      Embedding a demo of your 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, pattern, or theme directly on the website makes another great use case. One such demo lives on wpreadme.com, an in-browser WordPress readme.txt editor. Here’s what the plugin directory could look like:

      Today, a WordPress server is required, and ideally, one WordPress per user to always present the same initial state.

      The in-browser WordPress enables one private WordPress per user with no marginal server cost. Everyone can start logged-in as an adminadmin (and super admin) with no security risks.

      Furthermore, importing an existing WordPress website into WASM runtime would create a staging website. Users could try themes and plugins on a copy of their site without affecting the live sites. Then, once the staging website looks good, they’d click a button and publish the changes.

      How else would you use the in-browser WordPress? Please share your ideas in the comments so more use cases can be considered in the future.

      How does the in-browser WordPress work?

      The code lives in the GitHub repository.

      In short:

      • PHP is compiled to WASM with Emscripten
      • WordPress is packaged into a data bundle
      • A service worker traps HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. requests and re-routes them to WordPress.

      See more details below.

      PHP is compiled to WASM with Emscripten

      Firstly, PHP is compiled using an adjusted recipe from the php-wasm repo. It’s powered by Emscripten, a drop-in replacement for the C compiler. Unfortunately, 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/. currently cannot run as WASM. However, SQLite can, and WordPress supports SQLite via the wp-db-sqlite plugin.

      Emscripten compilation yields two files: webworker-php.wasm, which is the assembly, and webworker-php.js, which downloads the assembly file, creates a virtual heap, and exposes named native functions conveniently wrapped to accept and return 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/. data types.

      You need to load the webworker-php.js in a webworker and add a tiny wrapper class:

      const php = new PHPWrapper();
      console.log(
          await php.run(`<?php echo "Hello world";`).stdout
      );
      // "Hello world"
      

      See the Dockerfile, the compilation script, and the php-wasm playground.

      WordPress is packaged into a data bundle

      WebAssembly PHP runtime has its own filesystem and WordPress is shoehorned into it as a data bundle.

      First, a fresh WordPress distribution is downloaded and patched with the wp-db-sqlite plugin. It’s about 66MB large, but an optimization pipeline makes that 46MB by minifying the PHP files and removing non-essential static assets. Getting down to just 12MB is possible, but it’s not easy.

      Second, the WordPress installation process kicks in. A script serves our WordPress via the built-in PHP server and sends a special curl request to /wp-admin/install.php?step=2. Unfortunately, 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/ is hard-wired to MySQL and not a good match here.

      Lastly, Emscripten’s file_packager turns our WordPress copy into a data file named wp.data and a JavaScript loader named wp.js. Loading both the PHP runtime from webworker-php.js and the WordPress data bundle from wp.js allows you to run <?php require “wordpress/index.php”; right in the browser!

      A service worker reroutes the HTTP to WordPress

      WordPress reads request information from $_SERVER, $_GET, $_COOKIE and so on. Normally these variables are populated by 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., NginxNGINX NGINX is open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more. It started out as a web server designed for maximum performance and stability. In addition to its HTTP server capabilities, NGINX can also function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load balancer for HTTP, TCP, and UDP servers. https://www.nginx.com/., or another web server. However, in this case, there isn’t one.

      Instead, the superglobal variables are populated “manually”:

      function request(path, method, body, cookies) {
          return php.run(`<?php
              $_POST   = json_parse('${JSON.stringify(body)}');
              $_COOKIE = json_parse('${JSON.stringify(cookies)}');
              $_SERVER['REQUEST_URI'] 	= $path;
              $_SERVER['REQUEST_METHOD']  = "${method}";
              require "wordpress/index.php";
          `);
      }
      
      

      That takes care of the request, but capturing the complete HTTP response is still necessary. The PHP outputs information in only two ways: stdout and stderr. The response body comes out via stdout, but the HTTP status code and headers don’t. They need to be manually streamed to stderr where the JavaScript app can capture them:

      register_shutdown_function(function() use() {
          $stdErr = fopen('php://stderr', 'w');
          fwrite($stdErr, json_encode(['status_code', http_response_code()]) . "\n");
          fwrite($stdErr, json_encode(['session_id', session_id()]) . "\n");
          fwrite($stdErr, json_encode(['headers', headers_list()]) . "\n");
      }
      
      

      The final request handler is similar to this:

      function request(path, method, body, cookies) {
          const { stdout, stderr, exitCode } = php.run(`<?php
              $_POST   = json_parse('${JSON.stringify(body)}');
              // ... Populate other superglobals...
       
              register_shutdown_function(function() use() {
                  $stdErr = fopen('php://stderr', 'w');
                  fwrite($stdErr, json_encode(['status_code', http_response_code()]) . "\n");
                  // Output other information
              }
       
              require "wordpress/index.php";
          `);
       
          const { statusCode, headers, body } =
              rawOutputToResponse({ stdout, stderr, exitCode });
          return { statusCode, headers, body };
      }
      

      The actual code is much more involved, but it’s based on the same idea.

      Node.js is supported, too

      Running WordPress in different JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. runtimes is a matter of connecting these major building blocks with runtime-specific plumbing. Today there is an in-browser version and a node.js version. Here’s how they differ:

      In-browser version

      WordPress is rendered in an iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. by a minimal index.htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. once both workers are loaded.

      Node.js version

      • Emscripten compiles PHP for the Node.js runtime.
      • A Node.js script loads the WebAssembly PHP and mounts a local WordPress directory inside the PHP filesystem.
      • The same Node.js script starts a web server. It serves most requests as static files, except the .php ones, which it routes to WordPress.

      WordPress is served on localhost:8888.

      Running an in-browser WordPress IDE with Stackblitz

      Stackblitz is the in-browser IDE that makes Svelte docs interactive:

      It could do the same for WordPress docs; see this early preview.


      Stackblitz doesn’t need a specialized backend. It runs Node.js, npm, and webpack right in the browser via WebAssembly. Other than hosting and delivering a few megabytes of data, Stackblitz has no marginal costs. This idea is called Web Containers.

      Learning WordPress and writing code used to be separated. Now they can be one and the same. From runnable code snippets to new, svelte-like docs formats, WebContainers + WebAssembly WordPress is an educational game-changer.

      WordPress runs in Stackblitz via a Node.js server

      The minimal WordPress plugin dev setup on Stackblitz consists of:

      • A node.js WordPress server (via an npm package)
      • A plugin directory mounted inside of mu-plugins
      • A wp-scripts setup to watch and bundle the JavaScript files

      @gziolo went a step further and prepared a version with an editable Gutenberg block generated via create-block. All it took was running the npx @wordpress/create-block example-static command as shown in the create-block documentation, and restarting the dev server with npm run start:

      However, a Node.js WordPress server on Stackblitz is sluggish

      Rendering a single wp-admin page takes a second locally but up to 40 seconds on Stackblitz. That’s much longer than most developers are willing to wait. Here’s why that happens:

      A local Node.js WordPress server works like this:

      • WordPress runs on WebAssembly PHP
      • WebAssembly PHP runs on a native Node.js

      However, a Stackblitz Node.js WordPress server has an extra layer:

      • WordPress runs on WebAssembly PHP
      • WebAssembly PHP runs on WebAssembly Node.js
      • WebAssembly Node.js runs on a native Chrome

      It’s like a box in a box: A WebAssembly runtime in Chrome runs Node.js that has its own WebAssembly runtime. WordPress runs on the latter, not on the former, and that indirection causes a massive slowdown.

      Luckily, the browser can run WebAssembly natively without an intermediate Node.js layer.

      An in-browser WASM WordPress is really fast

      Here’s a Stackblitz WordPress setup using the webworker WordPress version:

      It is much faster! Unfortunately, the speed comes at the expense of simplicity.

      Stackblitz requires a service worker just like the in-browser WASM WordPress. However, you can only have one per domain. Therefore, the WordPress files in this example are hosted on a Netlify domain.

      Then, the Stackblitz files can’t be directly mounted into the in-browser PHP filesystem. The changes need to be synchronized manually. In this example, a node.js file watcher notifies the PHP webworker about the updates via WebSockets and onmessage/postMessage. There are bugs, but all are fixable.

      Known issues

      WASM WordPress issues:

      • The in-browser WordPress builds sometimes crash the Chrome tab, see the GitHub issue. Firefox, Safari, and node.js are much more stable.

      Stackblitz integration issues:

      • The in-browser Stackblitz setup doesn’t watch subdirectories.
      • WordPress exceeds Stackblitz size limits unless imported as a node_module.
      • Stackblitz corrupts a predefined binary .sqlite database file. A base64-encoded version is shipped instead.
      • Stackblitz doesn’t pass a server-side set-cookie headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. to the browser. That’s a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.. Workaround: the express.js server handles the cookies internally.

      Next steps

      Your help is needed to fully realize the vision laid above. None of the presented mockups and early explorations is currently reliably implemented. This project needs contributors to stabilize the code and build revolutionary tools on top of it – see the issues list on GitHub. If you’d like to be a part of it, please say so in the comments!

      Resources

      Props to @bph, @annezazu, and @gziolo for their thorough help with reviewing and editing this post.

      #core, #editor, #proposal