ACF Chat Fridays - April 26, 2024 - Block Bindings with ACF demo

acf-field-group-demo.php

add_action( 'acf/include_fields', function() {
	if ( ! function_exists( 'acf_add_local_field_group' ) ) {
		return;
	}

	acf_add_local_field_group( array(
	'key' => 'group_662ae89971cc7',
	'title' => 'Call to action',
	'fields' => array(
		array(
			'key' => 'field_662ae899eb27b',
			'label' => 'Heading',
			'name' => 'heading',
			'aria-label' => '',
			'type' => 'text',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'default_value' => '',
			'maxlength' => '',
			'placeholder' => '',
			'prepend' => '',
			'append' => '',
		),
		array(
			'key' => 'field_662ae8a7eb27c',
			'label' => 'Copy',
			'name' => 'copy',
			'aria-label' => '',
			'type' => 'text',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'default_value' => '',
			'maxlength' => '',
			'placeholder' => '',
			'prepend' => '',
			'append' => '',
		),
		array(
			'key' => 'field_662ae8b8eb27d',
			'label' => 'Button URL',
			'name' => 'button_url',
			'aria-label' => '',
			'type' => 'url',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'default_value' => '',
			'placeholder' => '',
		),
		array(
			'key' => 'field_662ba333bedcb',
			'label' => 'Image',
			'name' => 'image',
			'aria-label' => '',
			'type' => 'image',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'return_format' => 'url',
			'library' => 'all',
			'min_width' => '',
			'min_height' => '',
			'min_size' => '',
			'max_width' => '',
			'max_height' => '',
			'max_size' => '',
			'mime_types' => '',
			'preview_size' => 'medium',
		),
	),
	'location' => array(
		array(
			array(
				'param' => 'post_type',
				'operator' => '==',
				'value' => 'post',
			),
		),
	),
	'menu_order' => 0,
	'position' => 'normal',
	'style' => 'default',
	'label_placement' => 'top',
	'instruction_placement' => 'label',
	'hide_on_screen' => '',
	'active' => true,
	'description' => '',
	'show_in_rest' => 0,
) );
} );

block markup

<!-- wp:group {"align":"wide","style":{"border":{"color":"#d8613c","radius":"9px"},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"base-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-border-color has-base-2-background-color has-background" style="border-color:#d8613c;border-radius:9px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"100%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:100%"><!-- wp:heading {"metadata":{"bindings":{"content":{"source":"acf/field","args":{"key":"heading"}}}}} -->
<h2 class="wp-block-heading">The value of this heading comes from a block binding and will be replaced at render.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"acf/field","args":{"key":"copy"}}}}} -->
<p>The value of this paragraph comes from a block binding and will be replaced at render.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"bindings":{"url":{"source":"acf/field","args":{"key":"button_url"}}}},"className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button">Learn More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"100%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:100%"><!-- wp:image {"aspectRatio":"1","scale":"cover","metadata":{"bindings":{"url":{"source":"acf/field","args":{"key":"image"}}}}} -->
<figure class="wp-block-image"><img src="" alt="" style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

call-to-action.php

<?php
/**
 * Title: Call-to-Action
 * Slug: tt4-child/cta
 * Categories: call-to-action, featured
 * Viewport width: 1100
 */
?>

<!-- wp:group {"align":"wide","style":{"border":{"color":"#d8613c","radius":"9px"},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"backgroundColor":"base-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-border-color has-base-2-background-color has-background" style="border-color:#d8613c;border-radius:9px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
	<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
		<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"metadata":{"bindings":{"content":{"source":"acf/field","args":{"key":"heading"}}}}} -->
			<h2 class="wp-block-heading"></h2>
			<!-- /wp:heading -->

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

			<!-- wp:buttons -->
			<div class="wp-block-buttons"><!-- wp:button {"metadata":{"bindings":{"url":{"source":"acf/field","args":{"key":"button_url"}}}}} -->
				<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Learn More</a></div>
				<!-- /wp:button -->
			</div>
			<!-- /wp:buttons -->
		</div>
		<!-- /wp:column -->

		<!-- wp:column {"verticalAlignment":"center"} -->
		<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"metadata":{"bindings":{"url":{"source":"acf/field","args":{"key":"image"}}}}} -->
			<figure class="wp-block-image"><img alt="" /></figure>
			<!-- /wp:image -->
		</div>
		<!-- /wp:column -->
	</div>
	<!-- /wp:columns -->
</div>
<!-- /wp:group -->

register-block-variations.php

<?php

/**
 * Register our custom block type variations.
 *
 * @param array    $variations Array of block type variations.
 * @param WP_Block $block_type  The block type.
 * @return array
 */
function chat_friday_block_type_variations( $variations, $block_type ) {

	if ( 'core/heading' === $block_type->name ) {
		$variations[] = array(
			'name'       => 'cta-heading',
			'title'      => 'CTA Heading',
			'attributes' => array(
				'metadata' => array(
					'bindings' => array(
						'content' => array(
							'source' => 'acf/field',
							'args'   => array(
								'key' => 'heading',
							),
						),
					),
				),
			),
		);
	} elseif ( 'core/paragraph' === $block_type->name ) {
		$variations[] = array(
			'name'       => 'cta-copy',
			'title'      => 'CTA Copy',
			'attributes' => array(
				'metadata' => array(
					'bindings' => array(
						'content' => array(
							'source' => 'acf/field',
							'args'   => array(
								'key' => 'copy',
							),
						),
					),
				),
			),
		);
	} elseif ( 'core/buttons' === $block_type->name ) {
		$variations[] = array(
			'name'        => 'cta-buttons',
			'title'       => 'CTA Buttons',
			'innerBlocks' => array(
				array(
					'core/button',
					array(
						'metadata' => array(
							'bindings' => array(
								'url' => array(
									'source' => 'acf/field',
									'args'   => array(
										'key' => 'button_url',
									),
								),
							),
						),
						'text'     => 'Learn More',
					),
				),
			),
		);
	} elseif ( 'core/image' === $block_type->name ) {
		$variations[] = array(
			'name'       => 'cta-img',
			'title'      => 'CTA Image',
			'attributes' => array(
				'metadata'    => array(
					'bindings' => array(
						'url' => array(
							'source' => 'acf/field',
							'args'   => array(
								'key' => 'image',
							),
						),
					),
				),
				'aspectRatio' => '1',
				'scale'       => 'cover',
			),
		);
	}

	return $variations;
}

/**
 * Register our custom block type variations.
 *
 * @link https://developer.wordpress.org/block-editor/developers/filters/block-filters/#get_block_type_variations
 */
add_filter( 'get_block_type_variations', 'chat_friday_block_type_variations', 10, 2 );