Commenting here just in case there are others who may need this solution. The function that is most helpful here is wp_style_engine_get_styles
. When used in your block rendering script, you can call this function to produce the inline styles needed to render your block correctly.
I made a little utility function for doing so and generally include it in all of the ACF blocks we’re building. Hope it helps. =)
/**
* Given an $block object from an ACF block for gutenberg:
* This will return a string of CSS inline values suitable for
* inclusion in the block output in PHP.
*
* @param mixed $block
* @return $style as string
*/
function acf_blocks_calculate_inline_styles( $block ) {
if ( ! empty( $block['style'] ) ) {
$style_engine = wp_style_engine_get_styles( $block['style'] );
$style = $style_engine['css'];
} else {
$style = '';
}
return $style;
// echo '<div style="' . $style . '">Block content</div>';
}
Just in case someone else stumbles into this answer, I’ll add that there is a much easier way to prevent this specific problem of preventing the clicking of an anchor tag in the block editor.
Enter CSS. =)
.editor-styles-wrapper .your-block-class a {
pointer-events: none;
}