Programatically registering ACF field blocks in Gutenberg

• WillLaw

• November 29, 2018 at 10:49 pm

Hi,
Im trying to register ACF fields programatically to use in blocks in the next WordPress update. I’m able to register the ACF fields in the php as normal which I can only see when Gutenberg is disabled, and I am able to register the ACF blocks as normal which I can see when Gutenberg is enabled, however I am unable to see the fields inside the blocks when Gutenberg is enabled.

I have ensured the block is set up correctly because I can set fields created in the WordPress backend to it and see them, and I know the registered field is set up correctly because when Gutenberg is disabled I am able to see and fill in these fields (without location on block).

So what Im wondering is that if there is any extra required or if i’m just missing something I’ve done entirely.

Here is my block setup:

if( function_exists('acf_register_block') ) {

  acf_register_block(array(
    'name'				=> 'textarea_block',
    'key'				=> 'textarea_block',
    'title'				=> __('textarea'),
    'description'		=> __('A custom pixel block.'),
    'render_callback'	=> 'textarea_block_render_callback',
    'category'			=> 'formatting',
    'icon'				=> 'admin-comments',
    'keywords'			=> array( 'flexible', 'quote' ),
  ));
}

and Here is my field setup

register_field_group(array (
  'key' => 'textarea',
  'title' => 'Text Area',
  'fields' => array(
    array(
      'key' => 'textarea_title',
      'name' => 'textarea_title',
      'label' => 'Section Title',
      'instructions' => '',
      'type' => 'text',
    ),
    array(
      'key' => 'textarea_text',
      'name' => 'textarea_text',
      'label' => 'Text',
      'instructions' => '',
      'type' => 'wysiwyg',
    ),
  ),
  'location' => array (
    array (
      array (
        'param' => 'block',
        'operator' => '==',
        'value' => 'textarea'
      ),
    ),
  ),
));

Thanks if anyone notices anything or has any ideas.

• Hesham

• November 30, 2018 at 3:23 am

It seems that underscores in block name isn’t passing though.

So, textarea_block as a block name is not working, instead use a name without underscores, something like textareablock.

Try this:

if( function_exists('acf_register_block') ) {

  acf_register_block(array(
    'name'				=> 'textareablock',
    'key'				=> 'textarea_block',
    'title'				=> __('textarea'),
    'description'		=> __('A custom pixel block.'),
    'render_callback'	=> 'textarea_block_render_callback',
    'category'			=> 'formatting',
    'mode'              => 'edit', // 'preview',
    'icon'				=> 'admin-comments',
    'keywords'			=> array( 'flexible', 'quote' ),
  ));
}

register_field_group(array (
  'key' => 'textarea',
  'title' => 'Text Area',
  'fields' => array(
    array(
      'key' => 'textarea_title',
      'name' => 'textarea_title',
      'label' => 'Section Title',
      'instructions' => '',
      'type' => 'text',
    ),
    array(
      'key' => 'textarea_text',
      'name' => 'textarea_text',
      'label' => 'Text',
      'instructions' => '',
      'type' => 'wysiwyg',
    ),
  ),
  'location' => array (
    array (
      array (
        'param' => 'block',
        'operator' => '==',
        'value' => 'acf/textareablock'
      ),
    ),
  ),
));

P.S. I’ve added 'mode'=> 'edit' to start ACF block in edit more.

• okadots

• April 24, 2019 at 9:10 am

It seems like not accepting an underscore is a bug. Regular react based blocks have no issue with underscores