Block 'Supports' not working as expected
-
I have a testimonial block, here is the PHP template:
<?php // Testimonial Block Template. $blockName = str_replace('acf/', '', $block['name']); $id = $blockName . '-' . $block['id']; if( !empty($block['anchor']) ) {$id = $block['anchor'];} $className = 'wp-block-acf-' . $blockName; if( !empty($block['className']) ) {$className .= ' ' . $block['className'];} if( !empty($block['align']) ) {$className .= ' align' . $block['align'];} if( !empty($block['align_text']) ) {$className .= ' align-text-' . $block['align_text'];} if( !empty($block['align_content']) ) {$className .= ' align-content-' . $block['align_content'];} if( !empty($block['textColor']) ) {$className .= ' has-' . $block['textColor'] . '-color';} if( !empty($block['backgroundColor']) ) {$className .= ' has-' . $block['backgroundColor'] . '-background-color' ;} if( !empty($block['linkColor']) ) {$className .= ' has-' . $block['linkColor'] . '-link-color' ;} if( !empty(($block['style']['paddingTop']) || ($block['style']['paddingRight']) || ($block['style']['paddingBottom']) || ($block['style']['paddingLeft'])) ) {$className .= ' has-custom-padding' ;} if( !empty(($block['style']['marginTop']) || ($block['style']['marginBottom'])) ) {$className .= ' has-custom-margin' ;} if( !empty($block['full_height']) && true === $block['full_height'] ) {$className .= ' full-height' ;} if( !empty($block['style']['paddingTop']) ) {$inlineStyles .= 'padding-top:' . $block['style']['paddingTop'] . ';';} if( !empty($block['style']['paddingRight']) ) {$inlineStyles .= 'padding-right:' . $block['style']['paddingRight'] . ';';} if( !empty($block['style']['paddingBottom']) ) {$inlineStyles .= 'padding-bottom:' . $block['style']['paddingBottom'] . ';';} if( !empty($block['style']['paddingLeft']) ) {$inlineStyles .= 'padding-left:' . $block['style']['paddingLeft'] . ';';} if( !empty($block['style']['marginTop']) ) {$inlineStyles .= 'margin-top:' . $block['style']['marginBottom'] . ';';} if( !empty($block['style']['marginBottom']) ) {$inlineStyles .= 'margin-bottom:' . $block['style']['marginBottom'] . ';';} ?> <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr( $className ); ?><?php if($block['backgroundColor']): ?> has-background<?php endif; ?>" style="<?php echo esc_attr( $inlineStyles ); ?>"> <?php if ( $testimonial = get_field( 'testimonial' ) ) : ?> <p><?php echo $testimonial; ?></p> <?php endif; ?> <?php if ( $author = get_field( 'author' ) ) : ?> <p><?php echo esc_html( $author ); ?></p> <?php endif; ?> <?php if ( $role = get_field( 'role' ) ) : ?> <p><?php echo esc_html( $role ); ?></p> <?php endif; ?> </div>And here is how it’s registered in functions:
function register_acf_block_types() { acf_register_block_type(array( 'name' => 'testimonial', 'title' => __('Testimonial'), 'description' => __('A custom testimonial block.'), 'render_template' => get_template_directory() . '/blocks/testimonial/testimonial.php', 'enqueue_style' => get_template_directory_uri() . '/blocks/testimonial/testimonial.css', 'category' => 'custom', 'icon' => '<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="comment-alt-lines" class="svg-inline--fa fa-comment-alt-lines fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm32 352c0 17.6-14.4 32-32 32H293.3l-8.5 6.4L192 460v-76H64c-17.6 0-32-14.4-32-32V64c0-17.6 14.4-32 32-32h384c17.6 0 32 14.4 32 32v288zM280 240H136c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h144c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zm96-96H136c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8z"></path></svg>', 'keywords' => ['testimonial', 'quote'], 'align' => 'wide', 'align_text' => 'center', 'supports' => [ 'jsx' => true, 'align' => ['center', 'wide', 'full'], 'align_content' => false, 'color' => ['text' => true, 'background' => true, 'link' => true], 'align_text' => true, 'spacing' => ['margin' => [ 'top', 'bottom' ], 'padding' => true], 'typography' => ['lineHeight'=>true, 'fontSize'=>true], 'full_height' => true, ], 'data' => [ 'testimonial' => "Blocks are...", 'author' => "Jane Smith", 'role' => "Person" ], )); } if( function_exists('acf_register_block_type') ) { add_action('acf/init', 'register_acf_block_types'); }When I edit a page with the testimonial block on it, I have the options for padding, margins, colors, line height, etc. I can set them normally and the block renders nicely in the block editor. I can save and view the page and it looks good, too.
But when I go back in to edit the block – for example, change the line height – it removes the padding set previously, and vice versa.
Hopefully I have explained this properly. Any ideas on how to make it work?
-
Hey @kandb,
Thanks for the report here. We’re looking at how to best resolve this issue, whilst maintaining backwards compatibility.
Can I ask, did you first setup this block in ACF 5.10 or was it working in ACF 5.9 and the 5.10 upgrade broke it?
As far as we can see, the ACF 5.10 changed how some support properties are rendered. In 5.9.9, the raw WordPress markup was passed to your template, but in 5.10 it becomes valid CSS, which is obviously not backwards compatible for those users who coded for the raw data.
-
Hi Igladdy, thanks the reply!
I have tried it on both ACF 5.9 and ACF 5.10.
In ACF 5.9 it works fine. I noticed that in ACF 5.9, when I do a var_dump of the block, the array for padding is a bit different:
[style] => Array ( [spacing] => Array ( [padding] => Array ( [top] => 200px [right] => 200px [bottom] => 200px [left] => 200px ) ) [typography] => Array ( [lineHeight] => 2.1 ) )Whereas with ACF 5.10 it’s like this:
[style] => Array ( [paddingTop] => 200px [paddingRight] => 200px [paddingBottom] => 200px [paddingLeft] => 200px [typography] => Array ( [lineHeight] => 2.1 ) )I changed the way the PHP template finds the padding to compensate for this, eg:
if(isset($block['style']['paddingTop'])) {$inlineStyles .= 'padding-top:' . $block['style']['paddingTop'] . ';' ;}But it won’t save as described above.
-
Hey @kandb,
Yeh – we think we need a little more work to get the CSS side of styles working correctly, so we’re going to roll back to how it worked in ACF 5.9.9 with this week’s ACF 5.10.2 patch – so this will fix your issue (but you’ll need to roll back your template to what you had for 5.9 with the raw WordPress internal code being sent to your template in
$block['style'])Our end goal is to pass valid CSS to the template in the
$block['style']variable, so you can just output it directly, but doing so in a way that doesn’t damage the block editor experience is proving tricky – as WordPress wants to apply it to a wrapper, but we want to leave it to your template to render. -
That’s good to know!
I think ACF should use the same way of providing styles as Gutenberg where possible. It makes for a more seamless experience if things like padding, margins, colors, line height (or any settings you can apply to core blocks) are assigned in the same way when using ACF custom blocks.
Also, something I have been thinking about is that ACF blocks seem to use two separate wrappers for the same block. There is the main block wrapper, then several levels down the ACF container appears with many of the style properties duplicated. It seems like a lot of unnecessary markup. It results in things like double padding and repeated background colors, because the padding and other styles are applied to both the main block wrapper and the ACF wrapper.
Hope that makes sense, I like the block editor but it has really made things confusing.
-
Hey @kandb,
Yeh – so it’s specifically that double wrapper that’s our main issue at the moment. We don’t get much control on the outer wrapper, that’s a WordPress default and our attempts to avoid applying those classes/styles there have caused issues. The inner “wrapper” comes from your template, and that’s where these styles should live – but because we need to render PHP to build your template, we can’t easily “live” update your template with the styles as you do something in the block editor, say adding padding etc.
Also, of course – someone could decide to put the styles somewhere deeper into the DOM of their template, so we can’t also just rely on the “outer” wrapper being the place where that should live. If we do stop the styles being applied on the WordPress outer wrapper, you’d have to wait for the AJAX request to re-render the template to see your changes, and this feels incredibly slow and “broken” vs native blocks.
Anyway! We’ll get the fix for specific issue of the editor “forgetting” when you’ve applied things like spacing in the next day or so, and figure out the way forward from there!
-
-
You must be logged in to reply to this topic.
Welcome
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Forums
Helping Others
Helping others is a great way to earn karma, gain badges and help ACF development!