Skip to content

Installing WPGraphQL Content Blocks Plugin

This guide explains how to install the WPGraphQL Content Blocks plugin on your WordPress backend.

Prerequisites

  1. WPGraphQL Plugin must be installed and activated first
  2. Download from: https://wordpress.org/plugins/wp-graphql/
  3. Or install via WordPress admin: Plugins → Add New → Search "WPGraphQL"

Installation Methods

  1. Download the Plugin
  2. Go to: https://github.com/wpengine/wp-graphql-content-blocks/releases

  3. Download the latest .zip file (e.g., wp-graphql-content-blocks-4.8.4.zip)

  4. Install via WordPress Admin

  5. Go to WordPress Admin → Plugins → Add New
  6. Click "Upload Plugin"
  7. Choose the downloaded .zip file
  8. Click "Install Now"
  9. Click "Activate Plugin"

Method 2: Manual Installation

  1. Download the Plugin 

    # Download the latest release
wget https://github.com/wpengine/wp-graphql-content-blocks/archive/refs/heads/main.zip
unzip main.zip

  2. Upload to WordPress

  3. Upload the wp-graphql-content-blocks-main folder to /wp-content/plugins/
  4. Rename it to wp-graphql-content-blocks

  5. Or use SFTP/FTP to upload the folder

  6. Activate

  7. Go to WordPress Admin → Plugins
  8. Find "WPGraphQL Content Blocks"
  9. Click "Activate"

Method 3: WP-CLI (Command Line)

# Navigate to WordPress root
cd /path/to/wordpress

# Download and install
wp plugin install https://github.com/wpengine/wp-graphql-content-blocks/archive/refs/heads/main.zip --activate

Verification

After installation, verify the plugin is working:

  1. Check GraphQL Schema
  2. Go to your GraphQL endpoint (usually /graphql)
  3. Or use GraphiQL IDE if available
  4. Query for editorBlocks field:
{
  posts {
    nodes {
      title
      editorBlocks(flat: false) {
        __typename
        name
        renderedHtml
      }
    }
  }
}
  1. Check WordPress Admin
  2. Go to Plugins page
  3. Verify "WPGraphQL Content Blocks" is listed and activated

What This Plugin Provides

  • editorBlocks field on Post and Page types
  • Block data with __typename, name, attributes, renderedHtml
  • Hierarchical structure with editorBlocks(flat: false)
  • Flattened structure with editorBlocks(flat: true)
  • Support for all Gutenberg blocks including custom blocks

Next Steps

Once installed, the Next.js frontend will automatically: 1. Query editorBlocks from WordPress 2. Render blocks using the BlockRenderer component 3. Fall back to HTML content if blocks aren't available

No additional configuration needed in WordPress - the plugin works automatically once activated!