Support

Account

Home Forums General Issues How to register multiple ACF Gutenberg Blocks?

Solving

How to register multiple ACF Gutenberg Blocks?

  • Hello.
    What is the best way to register multiple ACF blocks?
    – Can anyone post some examples?

  • Is this the correct way:

    function register_acf_block_types() {
    
        // register a Post-Grid block.
        acf_register_block_type(array(
            'name'              => 'post-grid',
            'title'             => __('Post-Grid'),
            'description'       => __('A custom Post-Grid block.'),
            'render_template'   => 'blocks/post-grid/block-post-grid.php',
            'category'          => 'common',
            'icon'              => 'grid-view',
            'keywords'          => array( 'post-grid', 'grid', 'post', 'posts' ),
    	));
    	
    	// register a Post-List block.
    	acf_register_block_type(array(
    		'name'              => 'post-list',
    		'title'             => __('Post-List'),
    		'description'       => __('A custom Post-List block.'),
    		'render_template'   => 'blocks/post-list/block-post-list.php',
    		'category'          => 'common',
    		'icon'              => 'list-view',
    		'keywords'          => array( 'post-list', 'list', 'post', 'posts' ),
    	));
    }
    
    // Check if function exists and hook into setup.
    if( function_exists('acf_register_block_type') ) {
        add_action('acf/init', 'register_acf_block_types');
    }
  • It’s working perfectly for me. Have you tested this?

  • 
    function register_acf_block_types() {
    	
    	// register a Carousel block
    	acf_register_block_type(array(
    		'name'				    => 'carousel',
    		'title'			 	    => __('Carousel'),
    		'description'		  => __('Show images in a carousel'),
    		'render_template'	=> 'blocks/carousel.php',
    		'category'			  => 'common',
    		'icon'				    => 'slides',
    		'keywords'			  => array( 'carousel', 'gallery' ),
        'mode'            => 'edit'
    	));
    	
    	// register a Card block
    	acf_register_block_type(array(
    		'name'				    => 'card',
    		'title'			 	    => __('Card'),
    		'description'		  => __('Card with photo and info'),
    		'render_template'	=> 'blocks/card.php',
    		'category'			  => 'common',
    		'icon'				    => 'id',
    		'keywords'			  => array( 'card', 'team' ),
        'mode'            => 'edit'
    	));
    }
    
    // Check if function exists and hook into setup.
    if( function_exists('acf_register_block_type') ) {
      add_action('acf/init', 'register_acf_block_types');
    }
    

    I tried the same thing. When I add the Carousel in the editor I get just the Carousel, but when I try to add the Card, it shows the Carousel and the Card in the same block which I don’t want.

    Anyone else having this problem? What am I missing?

  • This is an alternative, it does the same thing as the other version I posted but when I create a Card block, I’m still getting the Carousel block appearing below the Card block in the editor, they appear together as if they were all one block

    However, if I add the Carousel block, it is just the Carousel which is expected. I have scoured the Internet and have yet to find out how to create multiple ACF blocks.

    Seems like you’d just register a new block and it should work but I’m having issues when adding the Card block and it including the Carousel block along with it.

    
    add_action('acf/init', 'my_acf_blocks_init');
    function my_acf_blocks_init() {
    
      // Check function exists.
      if( function_exists('acf_register_block_type') ) {
    
      	// register a Carousel block
      	acf_register_block_type(array(
      		'name'				    => 'carousel',
      		'title'			 	    => __('Carousel'),
      		'description'		  => __('Show images in a carousel'),
      		'render_template'	=> 'blocks/carousel.php',
      		'category'			  => 'common',
      		'icon'				    => 'slides',
      		'keywords'			  => array( 'carousel', 'gallery' ),
          'mode'            => 'edit'
      	));
      	
      	// register a Card block
      	acf_register_block_type(array(
      		'name'				    => 'card',
      		'title'			 	    => __('Card'),
      		'description'		  => __('Card with photo and info'),
      		'render_template'	=> 'blocks/card.php',
      		'category'			  => 'common',
      		'icon'				    => 'id',
      		'keywords'			  => array( 'card', 'team' ),
          'mode'            => 'edit'
      	));
      }
    }
    
  • Ok, this is a little embarrassing but I found the issue. The carousel block settings in Advanced Custom Fields was set to “Show this Field Group if > Block > Is equal to > ALL” and that was the cause. I didn’t notice it before because that was the first block I created so it looks like after I created the other ones that one got set to “ALL” by default without me realizing it.

  • Apologies if this comes as duplicate posts. I have posted twice but did not go through.

    I got a white editor page after I added the second register block. I got the editor back when I removed it and I am not sure what’s wrong as written. I will appreciate some help.

    function register_acf_block_types() {
    
       // register a testimonial block.
       acf_register_block_type(array(
          'name'              => 'testimonial',
          'title'             => __('Testimonial'),
          'description'       => __('A custom testimonial block.'),
          'render_template'   => 'template-parts/blocks/testimonial/testimonial.php',
          'category'          => 'formatting',
          'icon'              => 'admin-comments',
          'keywords'          => array( 'testimonial', 'quote' ),
       ));
    	
    	// register a testimonial block.
       acf_register_block_type(array(
          'name'              => 'landing_page_content',
          'title'             => __('Landing Page'),
          'description'       => __('A custom landing page block.'),
          'render_template'   => 'template-parts/blocks/landing/page_landing.php',
          'category'          => 'formatting',
          'icon'              => 'dashicons-format-aside',
          'keywords'          => array( 'landing', 'card' ),
       ));
    }
    
    // Check if function exists and hook into setup.
    if( function_exists('acf_register_block_type') ) {
      add_action('acf/init', 'register_acf_block_types');
    }
  • It’s working for me good, i don’t know that why you guy’s are facing trouble in guternberg editor..

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘How to register multiple ACF Gutenberg Blocks?’ is closed to new replies.