cannot get wordplate/extended-acf to render Gutenberg blocks

[albeeboy]

ACF Pro is very proud of the fact that you can jump right in and create Gutenberg blocks using field groups. I set it up in a wordplate project, using extended-acf, and following the ACF Pro blocks guide. I've double- and triple- checked it, but I can't get the blocks to render.

Here's what I have:

theme/functions.php

...
// Action Bar
function init_block_action_bar () {
  if (function_exists('acf_register_block_type')) {
    acf_register_block_type(array(
      'name' => 'action-bar',
      'title' => __('Action Bar'),
      'description' => __('Full width bar layout with title and CTA'),
      'render_template' => 'partials/blocks/action-bar/action-bar.php',
      'category' => 'layout',
      'icon' => 'align-wide',
      'mode' => 'edit',
      'keywords' => array('action bar', 'cta'),
      'post_types' => array('post', 'page'),
    ));
  }
}
add_action('acf/init', 'init_block_action_bar');
...

theme/partials/blocks/action-bar/action-bar.php

<?php
/**
 * Action Bar Block Template
 * @param    array $block The block settings and attributes
 * @param    string $content The block inner HTML (empty)
 * @param    bool $is_preview True druing AJAX preview
 * @param    (int|string) $post_id The post ID this block is saved to
 * 
 * @package  newco
 * @since    newco 0.5
*/

$id = 'action-bar-' . $block['id'];
if (!empty($block['anchor'])) {
  $id = $block['anchor'];
}
$className = 'action-bar';
if (!empty($block['className'])) {
  $className .= ' ' . $block['className'];
}
if (!empty($block['align'])) {
  $className .= ' align' . $block['align']; 
}

$bg_color = get_field('bg_color');
$bg_color_class = ' bgcolor--' . $bg_color;

$padding_classes = '';
if (get_field('add_padding')) {
  $padding = get_field('padding');
  $top_padding_class = $padding['top_padding'] == 0
    ? ''
    : ' spacer__layout--pt-' . $padding['top_padding'];
  $padding_classes .= $top_padding_class;
  $bottom_padding_class = $padding['bottom_padding'] == 0
    ? ''
    : ' spacer__layout--pb-' . $padding['bottom_padding'];
  $padding_classes .= $bottom_padding_class;
}

$title = get_field('title');
$cta = get_field('cta');
$target = $cta['target'] == '_blank'
  ? ' target="' . esc_attr($cta['target']) . '" rel="noreferrer"'
  : '';
?>

<section id="<?=$id;?>">
  <div class="container-fluid<?=$bg_color_class;?><?=$padding_classes;?>">
    <div class="row">
      <div class="col">
        <div class="<?=$className;?>">
          <div>
            <span class="heading-3"><?=$title;?></span>
            <span><a class="button button--secondary spacer__element--ml-48" href="<?=esc_url($cta['url']);?>"<?=$target;?>><?=$cta['title'];?></a></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

In the CMS, I added a Block: Action Bar field group with the corresponding inputs:

So far so good. Now if I edit a Page, and add a block, my Action Bar block appears as an option. Beautiful, right? Now I select Action Bar, the ACF fields appear and I can fill them out. So cool! Then I update the edit page and reload the rendered page and...sad trombone...no Gutenberg block. However, in the browser inspector, where the block should appear, the data from the block shows up as commented JSON, like so:

<!-- wp:acf/action-bar {
    "id": "block_600b3c72cad43",
    "name": "acf\/action-bar",
    "data": {
        "bg_color": "yellow",
        "_bg_color": "field_600b286c7031d",
        "add_padding": "1",
        "_add_padding": "field_600b2d06b567a",
        "padding_top_padding": "96",
        "_padding_top_padding": "field_600b2add7031f",
        "padding_bottom_padding": "0",
        "_padding_bottom_padding": "field_600b2db596112",
        "padding": "",
        "_padding": "field_600b2a107031e",
        "title": "Ready to move from idea to impact?",
        "_title": "field_600b2e1f90c6a",
        "cta": {
            "title": "Contact Us",
            "url": "\/",
            "target": ""
        },
        "_cta": "field_600b2ead90c6b"
    },
    "align": "",
    "mode": "edit",
    "className": "aaack"
} /-->

This is where I get stuck. I can't figure out how to get this data to render as the template file. I did a test in a vanilla WordPress ACF Pro instance and the blocks render as expected, easy-peasy. Is there something in wordplate/extended-acf that is preventing this from working? Is it a scoping issue? Not sure where to go from here.

[vinkla]

Is there something in wordplate/extended-acf that is preventing this from working?

We can't help you debug your application. All I can say is that we've tested this library with Gutenberg blocks and we know that it works.

Also; it doesn't look like you're using wordplate/extended-acf. The field group shouldn't be visible in the dashboard.

[puredazzle]

@albeeboy here is an minimal example for creating a text block with extended-acf and ACF ...

<?php

declare(strict_types=1);

use WordPlate\Acf\Fields\Wysiwyg;
use WordPlate\Acf\Location;

acf_register_block_type([
    'name' => 'Text',
    'title' => __('Text'),
    'description' => __('A text block.'),
    'render_template' => get_theme_file_path('includes/acf/blocks/text/template.php'),
    'enqueue_style' => get_asset_file_uri('assets/blocks/text.css'),
    'post_types' => ['page'],
    'category' => 'common',
    'icon' => 'editor-textcolor',
    'align' => 'wide',
]);

register_extended_field_group([
    'title' => 'Text Block',
    'fields' => [
        Wysiwyg::make('Text')
            ->instructions('Add the text block content.')
            ->mediaUpload(false)
            ->toolbar('text')
            ->required(),
    ],
    'location' => [
        Location::if('block', 'acf/text')
    ],
]);