How to get ACF value inside Gutenberg Block from another page or template? I'm using Timber too

Question

I'm trying to display on my WORK page a value of a ACF field that lives inside a block in a custom post type project.

If I get all posts using Timber function like this:

$posts = Timber::get_posts('post_type=work');

I get the result:

array (size=1)
  0 => 
    object(Timber\Post)[1669]
      public 'ImageClass' => string 'Timber\Image' (length=12)
      public 'PostClass' => string 'Timber\Post' (length=11)
      public 'TermClass' => string 'Timber\Term' (length=11)
      public 'object_type' => string 'post' (length=4)
      public 'custom' => 
        array (size=3)
          '_edit_lock' => string '1565259680:1' (length=12)
          '_thumbnail_id' => string '30' (length=2)
          '_wp_old_slug' => string 'harrods-interior' (length=16)
      protected '_content' => null
      protected '_permalink' => null
      protected '_next' => 
        array (size=0)
          empty
      protected '_prev' => 
        array (size=0)
          empty
      protected '_css_class' => null
      public 'id' => int 29
      public 'ID' => int 29
      public 'post_author' => string '1' (length=1)
      public 'post_content' => string '<!-- wp:acf/hero-case-study {
    "id": "block_5d4ac446baf60",
    "name": "acf\/hero-case-study",
    "data": {
        "hero_cs_headline": "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
        "_hero_cs_headline": "field_5d4aa12b9cf8b",
        "headline_cs_text_color": "#ffffff",
        "_headline_cs_text_color": "field_5d4ab40954b40",
        "category_cs_text_color": "#3c304c",
        "_category_cs_text_color": "field_5d4ab5205ffa8",
        "hero_cs_bg_image": 42,
        "_hero_cs_bg_'... (length=6122)
      public 'post_date' => string '2019-08-06 16:41:36' (length=19)
      public 'post_excerpt' => string '' (length=0)
      public 'post_parent' => int 0
      public 'post_status' => string 'publish' (length=7)
      public 'post_title' => string 'KTURE' (length=5)
      public 'post_type' => string 'work' (length=4)
      public 'slug' => string 'kture' (length=5)
      protected '__type' => null
      public '_edit_lock' => string '1565259680:1' (length=12)
      public '_thumbnail_id' => string '30' (length=2)
      public '_wp_old_slug' => string 'harrods-interior' (length=16)
      public 'post_date_gmt' => string '2019-08-06 16:41:36' (length=19)
      public 'comment_status' => string 'closed' (length=6)
      public 'ping_status' => string 'closed' (length=6)
      public 'post_password' => string '' (length=0)
      public 'post_name' => string 'kture' (length=5)
      public 'to_ping' => string '' (length=0)
      public 'pinged' => string '' (length=0)
      public 'post_modified' => string '2019-08-08 08:06:38' (length=19)
      public 'post_modified_gmt' => string '2019-08-08 08:06:38' (length=19)
      public 'post_content_filtered' => string '' (length=0)
      public 'guid' => string 'http://simplicitypartners2019.test/?post_type=work&#038;p=29' (length=60)
      public 'menu_order' => int 0
      public 'post_mime_type' => string '' (length=0)
      public 'comment_count' => string '0' (length=1)
      public 'filter' => string 'raw' (length=3)
      public 'status' => string 'publish' (length=7)

As you can see, what I need is the value of "hero_cs_headline" that is inside post_content. Can anyone help me top take this value?

If there is another solution right inside twig file, whould be great as well.

Thanks!

Answer 1

You'll need to set a render callback when you create your ACF block:

acf_register_block_type( array(
    'name'            => 'example-block',
    'title'           => __( 'Example Block', 'your-text-domain' ),
    'description'     => __( 'A custom example block.', 'your-text-domain' ),
    'render_callback' => 'my_acf_block_render_callback',
    'category'        => 'formatting',
    'icon'            => 'admin-comments',
    'keywords'        => array( 'example' ),
) );

Then in that function you call Timber functions like in a page template:

function my_acf_block_render_callback( $block, $content = '', $is_preview = false ) {
    $context = Timber::context();

    // Store block values.
    $context['block'] = $block;

    // Store field values.
    $context['fields'] = get_fields();

    // Store $is_preview value.
    $context['is_preview'] = $is_preview;

    // Render the block.
    Timber::render( 'block/example-block.twig', $context );
}

After that the block will properly render when output using {{ post.content }} or anything else that uses the standard Wordpress filters to display the_content().

More info is available in Timber's documentation, which is where I got these snippets.