Support

Account

Home Forums General Issues ACF 6 Block JSON data in template fails to load

Unread

ACF 6 Block JSON data in template fails to load

  • I have an ACF 6 block using block.json and block. php and template.php. I have been trying to load json via $template into the render template like I would normally do the old ACF block way. Now I use block.json as a base, load with

    register_block_type( get_stylesheet_directory() . '/blocks/plans-table/block.json' );
    

    and try to load template data this way into render.php:

    /**
     * Plans Table Block
     */
    
    // $data is what we're going to expose to our render template
    // $data = array(
    // 	'example_field' => get_field( 'example_field' ),
    //     'another_field' => get_field( 'another_field' )
    // );
    
    // Dynamic block ID
    $block_id = 'plans-table-block-' . $block['id'];
    
    // Check if a custom ID is set in the block editor
    if( !empty($block['anchor']) ) {
        $block_id = $block['anchor'];
    }
    
    // Block classes
    $class_name = 'plans-table-block';
    if( !empty($block['class_name']) ) {
        $class_name .= ' ' . $block['class_name'];
    }
    
    $template = [
    	[
    		'core/columns',
    		[
    			'isStackedOnMobile' => true,
    			'verticalAlignment' => true
    		],
    		[
    			[
    				'core/column',
    				[
    					'width' => '40%'
    				],
    				[
    					[
    						'core/image',
    						[
    							'url' => get_stylesheet_directory_uri() . '/blocks/plans-tablet/placeholder-img.png'
    						]
    					],
    				]
    			],
    			[
    				'core/column',
    				[
    					'width' => '60%',
    				],
    				[
    					[
    						'core/heading',
    						[
    							'level'       => 2,
    							'placeholder' => 'Show a pricing plan',
    							'content'     => 'Show a pricing plan',
    						]
    					],
    					[
    						'core/paragraph',
    						[
    							'classNames' => 'ff-causten',
    							'content'    => 'Use this form to list a relevant drug discovery conference, drug discovery webinar, or drug discovery event, or to feature an event on the homepage or in our e-mail newsletter',
    						]
    					],
    					[
    						'core/button',
    						[
    							'text'  => 'Show a pricing plan',
    							'url'   => '#',
    							'align' => 'left'
    						]
    					]
    				]
    			],
    		]
    	]
    ];
    /** 
     * Pass the block data into the template part
     */ 
    get_template_part(
    	'blocks/plans-table-block/template',
    	null,
    	array(
    		'block'      => $block,
    		'is_preview' => $is_preview,
    		'post_id'    => $post_id,
    
    		// 'data'       => $data,
            'class_name' => $class_name,
            'block_id'   => $block_id,
    		'template'	=> $template
    		
    	)
    );

    and template.php has this

    /**
     * Block Name: Plans Table Block
     *
     * Description: Plans Table for pricing display
     * 
     */
    
    // The block attributes
    $block = $args['block'];
    
    // The block data
    $data = $args['data'];
    
    // The block ID
    $block_id = $args['block_id'];
    
    // The block class names
    $class_name = $args['class_name'];
    
    // The block template data
    $template = $args['template'];
    
    ?>
    <!-- Our front-end template -->
    <div id="<?php echo $block_id; ?>" class="<?php echo $class_name; ?>">
        <InnerBlocks template="<?php echo esc_attr( wp_json_encode( $template ) ); ?>" templateLock="all"/>
    </div>

    and block.json is this

    {
        "name": "plans-table-block",
        "title": "Plans Table Block",
        "description": "Displays Plans on any page.",
        "category": "theme",
        "apiVersion": 2,
        "acf": {
            "mode": "preview",
            "renderTemplate": "blocks/plans-table/block.php"
        },
        "supports": {
            "anchor": true,
            "mode": false,
            "jsx": true
        }
    }

    But I am getting this error:

    Uncaught TypeError: Cannot read properties of undefined (reading '0')
        at BlockPreview.setHtml (_acf-blocks.js:1084:10)
        at Object.<anonymous> (_acf-blocks.js:1384:10)
        at fire (jquery.js?ver=3.6.1:3500:31)
        at Object.fireWith [as resolveWith] (jquery.js?ver=3.6.1:3630:7)
        at deferred.<computed> (jquery.js?ver=3.6.1:3968:36)
        at Object.<anonymous> (_acf-blocks.js:452:28)
        at fire (jquery.js?ver=3.6.1:3500:31)
        at Object.fireWith [as resolveWith] (jquery.js?ver=3.6.1:3630:7)
        at done (jquery.js?ver=3.6.1:9822:14)
        at XMLHttpRequest.<anonymous> (jquery.js?ver=3.6.1:10083:9)
        at XMLHttpRequest.a (gutenberg.js?ver=9.0.338:2:18707)

    Which seems to refer to

    // If we've got an object (as an array) use the first ref.
    if ( state.jsx[ 0 ] ) {
    	state.ref = state.jsx[ 0 ].ref;
    } else {
    	state.ref = state.jsx.ref;
    }

    Seems to be JSON or JS related. Any ideas why?

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.