Can someone please help me understand the issue with the ACF Custom Blocks?
Based on official tutorial:
https://www.advancedcustomfields.com/resources/create-your-first-acf-block/#:~:text=%27%22%20%27%3B%7D-,//%20Create%20class%20attribute%20allowing%20for%20custom%20%22className%22%20and%20%22align%22%20values.,-%24class_name%20%3D%20%27testimonial
Let say I created a basic ACF Custom Block that outputs a simple DIV
with ‘customClassName’, taken from ‘ADDITIONAL CSS CLASS(ES)’ in Block’s ‘Advanced’ tab.
The PHP Template, based on tutorial, should output the rendered result in BackEnd and FrontEnd as:
<div class="'.$block['className'].'">Some text here...</div>
and with the ‘huge-padding’ $block[‘className’] should look like this:
<div class="huge-padding">Some text here...</div>
The problem:
The ACF output would assign the same $block[‘className’] to the block-editor-block-list__block wrapping container as well in the BackEnd.
The output in the BackEnd would have TWO ‘huge-padding’ and would look like this then:
<div ... data-type="acf/wpo-acf-myblock" class="block-editor-block-list__block wp-block ... huge-padding">
<div class="huge-padding">Some text here...</div>
</div>
Notice that both of the containers now have ‘huge-padding’ class that looks messy/confusing in the backend. And the users could have various custom classes like: red-border, xl-margin, framed, etc.
My question:
Is there a way to fix this behaviour without:
– disabling the ‘customClassName’ [and using the ACF custom-inner-class field]
– separating the output for Front-End with $block[‘className’] and Back-End without $block[‘className’]?
Thank you for your assistance.
– Ivan
