Faust Gutenberg Bridge DE{CODE} 2023 Demo

This repo is an example project to show how you can use WPGraphQL Content Blocks and our new @faustwp/blocks package to fetch Gutenberg block data from WPGraphQL and represent those blocks as React components in your Faust site.

Setup

Create a WP site

Create a WordPress site. I recommend using Local for this.

Install plugins

This example project requires the following plugins:

Install NPM dependencies

Run the following command from the project root:

npm install

Create a `.env.local` file

Copy the contents of the .env.local.sample file and paste the contents into a newly created file, named .env.local:

It should look like this:

# Your WordPress site URL
NEXT_PUBLIC_WORDPRESS_URL=https://faustexample.wpengine.com

# Plugin secret found in WordPress Settings->Headless
# FAUST_SECRET_KEY=YOUR_PLUGIN_SECRET

Copy the URL of your WordPress site and replace https://faustexample.wpengine.com with it.

Run the dev server

npm run dev

Your Faust site will be available at http://localhost:3000.

Set the frontend site URL in Faust settings

In the "Front-end site URL" input box, enter http://localhost:3000 and hit "save changes"

Create a page with blocks

Now, create a page with block content. This example project has only implemented the following blocks:

Core Column
Core Columns
Core Paragraph
Core Image

So please stick to these blocks when editing.

Once you are finished, click "Publish" or "Update" then "View Page"/"View Post" in the bottom left corner.

This will take you to the proper page on the Faust site. Notice your Gutenberg blocks properly styled on the frontend!

tiadotdev/faust-gutenberg-decode-demo