https://github.com/blakewilson/faust-gutenberg-decode-demo

https://github.com/blakewilson/faust-gutenberg-decode-demo

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/blakewilson/faust-gutenberg-decode-demo
• Owner: blakewilson
• Created: 2023-03-06T14:58:29.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-27T15:40:44.000Z (almost 2 years ago)
• Last Synced: 2024-10-09T07:05:48.806Z (3 months ago)
• Language: JavaScript
• Size: 28.3 KB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Faust Gutenberg Bridge DE{CODE} 2023 Demo

This repo is an example project to show how you can use [WPGraphQL Content Blocks](https://github.com/wpengine/wp-graphql-content-blocks) and our new [`@faustwp/blocks`](https://www.npmjs.com/package/@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](https://localwp.com) for this.

### Install plugins

This example project requires the following plugins:

- [WPGraphQL](https://wordpress.org/plugins/wp-graphql/)

- [Faust](https://wordpress.org/plugins/faustwp/)

- [WPGraphQL Content Blocks](https://github.com/wpengine/wp-graphql-content-blocks)

### 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!