2

I'm going for a headless setup with WordPress as my CMS. To achieve this, I'm using the following WordPress plugins:

  1. Advanced Custom Fields PRO - Using pro version in order to get the blocks option
  2. WP GraphiQL
  3. WP GraphQL
  4. WPGraphQL for Advanced Custom Fields - To make ACF fields appear in the schema

Now, I've created custom ACF Gutenberg blocks in order to achieve two things:

  1. A more visually clean backend
  2. Easier to create pages (don't need to add to ACF group, can just drag and drop the module in the backend)

Here is how I've created the hero block (acf-blocks/blocks.php):

$hero = array(
    'name' => 'hero',
    'title' => __('Hero'),
    'description' => __('Add hero section'),
    'render_callback' => 'block_render',
    'category' => 'formatting',
    'icon' => $icon,
    'mode' => 'edit',
    'category' => 'custom',
    'post_types' => array('page','post'),
    'keywords' => array( 'hero' )
);

$blocks = [
    $hero
];

return $blocks;

And here is how I'm registering it (acf-blocks/function.php):

function block_acf_init(){
  $path   = get_template_directory().'/inc/acf-blocks/blocks.php';
  $blocks = require($path);
  foreach($blocks as $block) {
    acf_register_block_type($block);
  }
}

if( function_exists('acf_register_block_type') ) {
  add_action('acf/init', 'block_acf_init');
}

In the ACF plugin, I've created a field group called hero. hero has a single text field and has the rule of "Show this field group if block is equal to Hero".

Note: I have Show in GraphQL enabled in the field and the GraphQL Field Name is block_hero.

Now, I've created a page called homepage and in that page, I've added the Hero block and gave the text field a value.

Then, in the GraphiQL IDE, when I look at the available options under pages I don't see anything related to hero. Even if I search for "hero" in the schema, nothing appears.

Does WPGraphQL not work with custom gutenberg blocks?

Freddy
  • 683
  • 4
  • 35
  • 114
  • 1
    Appears that you need an additional plugin to surface page blocks in graphql. I was able to repro your issue and found that if your fields are set on a post type they show in graph ql but as soon as I set them to show on a block they no longer appear in graph ql. I did not test it but this plugin might be what you need: https://www.wpgraphql.com/extenstion-plugins/wpgraphql-gutenberg/ – mikerojas Feb 28 '22 at 22:04

0 Answers0