Register Block / Local Field Group

• enky

• December 8, 2018 at 1:33 am

Hi,
with Gutenberg and the new Block Registration (ACF Beta 3) i ask my self, how to build websites in the future.

Currently im thinking on something like these.

Template
– functions.php
– main.scss

— Template Folder
— Template.php
— Style.scss

The functions.php includes the template File
The main.scss includes the style.css

Inside the template file i do
– register block
– create custom fields (php – my_acf_add_local_field_groups)
– the rendered html

So i can create different templates very easily and can add them easily to every template. just copy/paste the template folder and icclude it.

What are your thoughts?

Heres the code

<?php 
add_action('acf/init', 'my_register_blocks');
function my_register_blocks() {

    // 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',
            'mode'              => 'preview',
            'keywords'          => array( 'testimonial', 'quote' ),
        ));
    }
}

function my_acf_add_local_field_groups() {
	
acf_add_local_field_group(array(
	'key' => 'group_1',
	'title' => 'One Column Text Gutenberg',
	'fields' => array(
		array(
			'key' => 'field_5c0a4fd48b754',
			'label' => 'Headline',
			'name' => 'acf_gutenberg_onetextcolum_headline',
			'type' => 'text',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'default_value' => '',
			'placeholder' => '',
			'prepend' => '',
			'append' => '',
			'maxlength' => '',
		),
	),
	'location' => array(
		array(
			array(
				'param' => 'block',
				'operator' => '==',
				'value' => 'acf/testimonial',
			),
		),
	),
	'menu_order' => 0,
	'position' => 'normal',
	'style' => 'default',
	'label_placement' => 'top',
	'instruction_placement' => 'label',
	'hide_on_screen' => '',
	'active' => 1,
	'description' => '',
));
	
}

add_action('acf/init', 'my_acf_add_local_field_groups');

function my_acf_block_render_callback( $block, $content = '', $is_preview = false ) {
  /* print_r($block);
  print_r($content); */
  $headlinegt = get_field('acf_gutenberg_onetextcolum_headline');
  ?>
<section class="tp-text-onecolumn-gutenberg">
  <div class="container">
    <div class="row">
      <div class="col-12">
				<div class="headline-container">
					<h2 class="headline"><?php echo $headlinegt;?></h2>
				</div>
      </div>
    </div>
  </div>
</section>
  
<?php
  };
?>

• Elliot

• December 8, 2018 at 10:37 am

Hi @enky

This is a good idea. I like the modular approach as this keeps your code clean!
This thread will be super useful to other developers who start using ACF Blocks in their themes, so please keep updating it as you discover more.

• Joerg

• April 18, 2019 at 12:14 am

Hi @enky,

just wanted to thank you for the idea! We are in the midst of applying this with RC2.

Like @elliot said, great modular approach!

• mlangone

• May 1, 2019 at 3:16 am

This is great @enky,

I do have one question, I am not seeing ‘enqueue_style’ anywhere, I assume it would just be added to the register block array?

TIA

• enky

• May 3, 2019 at 9:13 pm

@mlangone
I have a global style.css included in the functions.php