I'm going for a headless
setup with WordPress as my CMS. To achieve this, I'm using the following WordPress plugins:
Advanced Custom Fields PRO
- Using pro version in order to get theblocks
optionWP GraphiQL
WP GraphQL
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:
- A more visually clean backend
- 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?