Blocks

PHP-template blocks

Register a block in code:

add_action( 'wpff/init', function () {
	wpff_register_block_type( array(
		'name'            => 'hero',
		'title'           => 'Hero',
		'render_template' => get_template_directory() . '/blocks/hero.php',
	) );
} );

To give the block fields, create a field group with the location rule "Block".

A block template gets these variables:

• $block: block settings and attributes, including $block['id'];
• $content;
• $is_preview;
• $post_id;
• $wp_block;
• $context.

Inside the template, get_field() and have_rows() without $post_id read the current block's data.

block.json

You can register a block with a block.json in ACF's format:

{
	"apiVersion": 3,
	"name": "acf/testimonial",
	"title": "Testimonial",
	"acf": { "mode": "preview", "renderTemplate": "testimonial.php" }
}

Then call register_block_type( __DIR__ . '/blocks/testimonial' );. A wpff key works too.

A block name without a namespace gets one:

• wpff_register_block_type( [ 'name' => 'hero' ] ) registers wpff/hero;
• acf_register_block_type() registers acf/hero, as ACF does, so existing content keeps working.

InnerBlocks

To let a template place nested blocks with an <InnerBlocks /> tag, set 'supports' => [ 'jsx' => true ], or "supports": { "jsx": true } in block.json.

On the site, the tag is replaced with the saved inner blocks. In the editor, it becomes an editable area.

Attributes work as in ACF; arrays are passed as JSON:

<InnerBlocks
	allowedBlocks="<?php echo esc_attr( wp_json_encode( [ 'core/paragraph', 'core/image' ] ) ); ?>"
	template="<?php echo esc_attr( wp_json_encode( [ [ 'core/paragraph', [ 'placeholder' => 'Text…' ] ] ] ) ); ?>"
	templateLock="false"
/>

Block Bindings

The wpff/field source shows a field value in core blocks with no template. It needs WordPress 6.5+, and 6.7+ to preview values in the editor.

The field must have "Allow in Block Bindings" turned on ('allow_in_bindings' => 1). The setting is off by default, so internal fields never reach the site by accident.

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"wpff/field","args":{"key":"subtitle"}}}}} -->
<p></p>
<!-- /wp:paragraph -->

For image and link fields:

• the url attribute gets the address;
• alt and title get the matching parts of the value.

Values are shown only for posts the visitor can read.