How to access advanced custom field values within a gutenberg block? - wordpress

Question

I have a custom post type with a few advanced custom fields. I'm trying to access these custom field values from within a Gutenberg block.
I've added the following to my register_post_type function
'show_in_rest' => true,
'supports' => array( 'title', 'editor', 'custom-fields' ),
I can successfully retrieve the custom posts from within my Gutenberg block using:
select('core').getEntityRecords('postType', 'customType')
but I'm not seeing the custom fields or their values.
Here's my block's JavaScript:
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { withSelect } = wp.data;
registerBlockType('cgb/block-press-block', {
title: __('Press Block'),
icon: 'awards',
category: 'common',
keywords: [
__('press-block'),
],
edit: withSelect((select) => {
return {
posts: select('core').getEntityRecords('postType', 'press')
};
})(({posts}) => {
return <p>Content</p>;
}),
});
Is there a way to access the custom post's advanced field values on the editor side or a way to pass that data to the block?

Answer 1

As you're using Advanced Custom Fields already, are you able to rather than registering your own block independently, use acf_register_block instead? That way you can access fields from ACF in PHP based templates.
Here are some useful links about this:
ACF 5.8 – Introducing ACF Blocks for Gutenberg
acf_register_block()
This code is taken from the ACF blog post above and posted here for completeness in case the above link changes.
Register the ACF block:
add_action('acf/init', 'my_acf_init');
function my_acf_init() {
// check function exists
if( function_exists('acf_register_block') ) {
// register a testimonial block
acf_register_block(array(
'name' => 'testimonial',
'title' => __('Testimonial'),
'description' => __('A custom testimonial block.'),
'render_callback' => 'my_acf_block_render_callback',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array( 'testimonial', 'quote' ),
));
}
}
A callback function to include your block template:
function my_acf_block_render_callback( $block ) {
// convert name ("acf/testimonial") into path friendly slug ("testimonial")
$slug = str_replace('acf/', '', $block['name']);
// include a template part from within the "template-parts/block" folder
if( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
}
}
The HTML of your block:
<?php
/**
* Block Name: Testimonial
*
* This is the template that displays the testimonial block.
*/
// get image field (array)
$avatar = get_field('avatar');
// create id attribute for specific styling
$id = 'testimonial-' . $block['id'];
// create align class ("alignwide") from block setting ("wide")
$align_class = $block['align'] ? 'align' . $block['align'] : '';
?>
<blockquote id="<?php echo $id; ?>" class="testimonial <?php echo $align_class; ?>">
<p><?php the_field('testimonial'); ?></p>
<cite>
<img src="<?php echo $avatar['url']; ?>" alt="<?php echo $avatar['alt']; ?>" />
<span><?php the_field('author'); ?></span>
</cite>
</blockquote>
<style type="text/css">
#<?php echo $id; ?> {
background: <?php the_field('background_color'); ?>;
color: <?php the_field('text_color'); ?>;
}
</style>
This creates a basic testimonials block as a simple starting point. ACF handles the JavaScript handling within Gutenberg so all you have to do is worry about the PHP side of things.
That means you get to use get_field() and the_field() function like we're (ACF fans) are used to. Mixing ACF and Gutenberg without using this native way may cause headaches and possibly require a plugin to access fields via the WordPress REST API.
Note: ACF support for Gutenberg blocks requires ACF version 5.8 or higher.