block supports properties

To use the supports properties, first enable them in the block.json.

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	
 ...

	"supports": {
		"color": {
			"text": true,
			"background": true
		}
	},
	"acf": {
		"mode": "preview",
		"renderTemplate": "./render.php"
	}
}

Then in render.php :

<?php

$classes = array();

if ( ! empty( $block['textColor'] ) ) {
//	$classes = array_merge( $classes, explode( ' ', $block['className'] ) );
	$classes[] = 'has-text-color';
	$classes[] = 'has-' . $block['textColor'] . '-color';
}

echo '<div class="' . esc_attr( join( ' ', $classes ) ) . '"></div>';

Or simply use the function get_block_wrapper_attributes( string[] $extra_attributes = array() ): string for e.g. to get the classes :

preg_match( '/class="(.*?)"/', get_block_wrapper_attributes(), $matches);
classes = $matches[1];

Sources:

• https://www.billerickson.net/color-palette-with-acf-custom-blocks/
• https://www.billerickson.net/building-acf-blocks-with-block-json/#custom-prefixes-in-block-name
• https://www.modernwpdev.co/acf-blocks/acf-block-controls/