ACF 5.9 Inner Blocks

[djmtype]

ACF 5.9 is right around the corner. I've been trying out the beta with this library, but it seems to fail, probably for obvious reasons – ACF (or WP) is using a parameter this library doesn't yet support in order to get inner blocks working. __experimental_jsx

I tried getting it to work but modifying sage-acf-gutenberg-blocks.php by adding this: '__experimental_jsx' => 'SupportsJSX', then respectfully adding SupportsJSX: true to my template, but that was wishful thinking as it didn't work as intended.

I'm basically following Elliot's inner block example: https://www.advancedcustomfields.com/blog/acf-5-9-exciting-new-features/

Has anyone tried ACF 5.9 beta with this library yet?

[tedw]

Not yet but am anxious to try it out. ACF 5.9 Beta2 was released today FYI: https://www.advancedcustomfields.com/blog/acf-pro-5-9-beta2/

[Dorf]

@djmtype I have it working with ACF 5.9 Beta3. Update sage-acf-gutenberg-blocks.php with:

$file_headers = get_file_data($file_path, [
   'title' => 'Title',
...
  'supports_jsx' => 'SupportsInnerBlocks',
...

And then

// If the SupportsInnerBlocks header is set in the template, restrict this block mode feature
if (!empty($file_headers['supports_jsx'])) {
   $data['supports']['__experimental_jsx'] = $file_headers['supports_jsx'] === 'true' ? true : false;
}

And then for the template

{{--
  Title: My Inner Block
...
  Mode: auto
  Align: full
  SupportsAlign: false
  SupportsMode: true
  SupportsInnerBlocks: true
--}}

<div class="parent-div" data-acf="{{$block['data']['some_thing']}}">
    <InnerBlocks  />
</div>

[djmtype]

@Dorf Thanks a bunch. That worked.

Though, I wonder why Elliot's example, posted here, didn't work for me.

[djmtype]

@Dorf Doesn't seem to work with ACF official 5.9 release. Is it working for you with WP 5.5?

[alfaice]

@djmtype It seems that from 5.9 RC1 the “__experimental_jsx” flag changed to “jsx”, so changing that should make it work again:

// If the SupportsInnerBlocks header is set in the template, restrict this block mode feature
if (!empty($file_headers['supports_jsx'])) {
   $data['supports']['jsx'] = $file_headers['supports_jsx'] === 'true' ? true : false;
}

[djmtype]

@alfaice Unfortunately, that wasn't the case for me. Also, cleared my browser cache, used a different browser. ACF 5.9 Pro is the only active plugin with a fresh WP 5.5 install.

Inside the editor, it doesn't allow me to place any Gutenberg blocks inside the parent-div ACF block.

// sage-acf-gutenberg-blocks.php

$file_headers = get_file_data($file_path, [
                    'title' => 'Title',
                    'description' => 'Description',
                    'category' => 'Category',
                    'icon' => 'Icon',
                    'keywords' => 'Keywords',
                    'mode' => 'Mode',
                    'align' => 'Align',
                    'post_types' => 'PostTypes',
                    'supports_align' => 'SupportsAlign',
                    'supports_anchor' => 'SupportsAnchor',
                    'supports_mode' => 'SupportsMode',
                    'supports_multiple' => 'SupportsMultiple',
                    'supports_jsx' => 'SupportsInnerBlocks',
                    'enqueue_style'     => 'EnqueueStyle',
                    'enqueue_script'    => 'EnqueueScript',
                    'enqueue_assets'    => 'EnqueueAssets',
                ]);

if (!empty($file_headers['supports_jsx'])) {
  $data['supports']['jsx'] = $file_headers['supports_jsx'] === 'true' ? true : false;
}

inner-block.blade.php

{{--
  Title: Inner Block
  Mode: auto
  Align: full
  SupportsAlign: false
  SupportsMode: true
  SupportsInnerBlocks: true
  Category: formatting
--}}

<div class="parent-div">
    <InnerBlocks  />
</div>

[alfaice]

@djmtype I also just tried it with a clean Sage10 install and WP 5.5. Can you try changing the mode on the block to preview? It seems that on edit mode it also doesn't let me add one, but it seems to work on preview mode.

{{--
  Title: Inner Block
  Mode: preview
  Align: full
  SupportsAlign: false
  SupportsMode: true
  SupportsInnerBlocks: true
  Category: formatting
--}}

[djmtype]

@alfaice Mode: preview or auto– with Sage 9.0.9. SupportsInnerBlocks: true is completely being ignored. I can't recall which ACF beta and WP version I had it working either. This sucks.

[djmtype]

@alfaice I had it placed in the wrong area. Needs to follow after the data object. Now it works with WP 5.5 and Sage 9.

Does it still not work with Sage 10?

[alfaice]

@djmtype Yeah, it still works. Glad that you figured it out!

[speakerbug]

This should now be fixed in the new release that was just merged in! :)