John – I cannot thank you enough. You sir, are a rock star. I had a feeling that ACF was formatting the values, but was not aware of the 3rd argument to disable (inexperience on my part). I just updated my code and everything is working great. Best wishes to you!
I struggled with this myself after migrating to using block.json (ACF v2 blocks). One of my issues was with visible cumulative layout shift due to Classic/Hybrid themes loading CSS in the footer. I posted about it Here.
I also tried moving all CSS to a single file as well, but that became inconvenient when reusing blocks. Currently I also use separate CSS/JS files within separate block folders which appears to be the new “norm” for building ACF blocks.
From what I can tell, the concerns you mention as well as issues I faced will continue until moving to an FSE block theme. There is some good information regarding filter options that are available that may be of benefit for asset loading Here.
I am not 100% certain, but I believe WP Rocket caching has the ability to filter out unused CSS to reduce the overall load. I may investigate this as a possible solution until I jump onboard to FSE block themes.
I just realized my code was garbled when pasting. The correct code is:
<a href="<?php echo esc_url($link_url); ?>" target="<?php echo esc_attr($link_target); ?>" role="link"
aria-description="<?php echo esc_html($link_title); ?>" class="<?php echo $className; ?>">
<InnerBlocks allowedBlocks="<?php echo esc_attr(wp_json_encode($allowed_blocks)) ?>" />
</a>
I ran into the same issue with ACF text area fields used to hold SVG code for menu icons. Each time I would enter the SVG code, it would not save. From the link posted by John above, I came up with the following (added to functions.php) which resolved my issue. I still get security notices from Wordfence – but the SVG code can now be saved.
/**
* ACF SVG filter to allow raw SVG code.
*
* https://www.advancedcustomfields.com/resources/html-escaping/
*
*/
add_filter( 'wp_kses_allowed_html', 'acf_add_allowed_svg_tag', 10, 2 );
function acf_add_allowed_svg_tag( $tags, $context ) {
if ( $context === 'acf' ) {
$tags['svg'] = array(
'xmlns' => true,
'width' => true,
'height' => true,
'preserveAspectRatio' => true,
'fill' => true,
'viewbox' => true,
'role' => true,
'aria-hidden' => true,
'focusable' => true,
);
$tags['path'] = array(
'd' => true,
'fill' => true,
);
}
return $tags;
}
