The Faust.js team has been hard at work for a few months now on two big features and we’re excited to show you what we’ve been working on!

A Path from Components to Blocks

First is a programmatic way to convert your existing React components to WordPress blocks your content editors can use.

For a while now we’ve had a pathway to easily make components for your front end from WordPress blocks. This was great for developers coming from the WordPress world but not so helpful for folks who were adopting WordPress as a CMS for their existing front-end work. Today we’ve solved that issue.

To get started we have released a new package called @faustwp/block-editor-utils that is used to convert React Components to Blocks.

This new package has utilities to register a React Component in Gutenberg and to configure its fields from within the metadata you provide in React.

There is also a new cli command, faust blockset which automatically discovers and uploads defined blocks from within the wp-blocks folder to WordPress. No additional plugin required.

To get started we’ve created an example project which you can find at https://github.com/wpengine/faustjs/tree/canary/examples/next/block-support as well as two tutorials:

• https://faustjs.org/tutorial/react-components-to-gutenberg-blocks
• https://faustjs.org/tutorial/getting-started-with-the-block-support-example-project

Together we hope this will make it much easier for developers to re-use code across projects, whether those projects were started in WordPress or not.

Support for Next.js 13’s App Router

One of the primary features of Next.js 13 is the new App Router which is, according to Next.js:

The Next.js App Router is a new paradigm for building applications using React’s latest features. If you’re already familiar with Next.js, you’ll find that the App Router is a natural evolution of the existing file-system based router in the Pages Router.

Next.js Documentation

For Faust.js users, the existing implementation of Faust.js with our template hierarchy feature is based on the older Page Router so enabling App Router took some time. Today we can announce a new, experimental (I’ll talk more about that in a minute) package for Faust.js users that enable App Router support for new projects.

The new package is called @faustwp/experimental-app-router. This new packages has utilities to:

• Fetch data and make authenticated requests in React Server Components
• Authenticate actions for login and logout
• It also contains a new API handler for the new app directory syntax

Just as with the components to blocks feature we’ve created an example project for the App Router which can be found at  https://github.com/wpengine/faustjs/tree/canary/examples/next/app-router as well as a tutorial to get your started.

Of note with the App Router is that it is, currently, still experimental. While we’re confident of our own implementation (and have more planned to add to it) some of the upstream dependencies we’re using also only offer experimental support for Next.js’ App Router. Until their support is no longer experimental we will keep our package in an experimental state and cannot promise there will not be breaking changes in the near future. Please take this into account before incorporating the App Router into any new projects.

We’re excited about what both of these features bring to Faust.js. We’re one step closer to making it as easy to develop a headless site with WordPress as it is to develop a traditional WordPress site. Please follow along with new development here on this blog, on our Discord or in our GitHub repo.