AdvancedCustomFields / AdvancedCustomFields/acf

get_block_wrapper_attributes() doesn't function properly when a Block is re-rendered after fields are edited

Open
#871 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
945
Forks
197
PR merge metrics
No merged PRs in 30d

Description

Describe the bug
When using get_block_wrapper_attributes() to generate classes and style attributes for a block based with ACF, the function works as expected when you first open the editor to a Post that contains an ACF block.

Example block output from a basic debugging block (when first opening the editor):

The selected animal is: alligator
The value of get_block_wrapper_attributes is: class="ext-acf-sample-block has-background has-sky-background-color wp-block-acf-ext-sample-block"

Here's the same block's debugging output after simply toggling a Select field in the right hand toolbar:

The selected animal is: cat
The value of get_block_wrapper_attributes is: class="ext-acf-sample-block"

To Reproduce
Steps to reproduce the behavior:

  1. Add color support to an ACF block that has one or more editable fields.
  2. Insert the block into a Post and set one or more colors
  3. Update one of the block's editable fields

Expected behavior
The block's markup should include the classes from get_block_wrapper_attributes, just as it does when you first edit a page

Code
block.json

{
    "name": "acf/ext-sample-block",
    "title": "ACF Sample Block (EXT)",
    "description": "A basic ACF block.",
    "style": "file:./css/ext-acf-sample-block.css",
    "icon": "hammer",
    "category": "widgets",
    "keywords": ["sample", "test"],
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-template.php"
    },
    "supports": {
        "jsx": true,
        "align": true,
        "alignText": true,
        "anchor": true,
        "color": {
            "background": true,
            "text": true,
            "link": true
        },
        "mode": "preview",
        "spacing": {
            "margin": [
                "top",
                "bottom"
            ],
            "padding": true
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "ext_acf_block_preview": 1
            }
        }
    }
}

from block-template.php

// Create class attribute allowing for custom "className".
$class_name = 'ext-acf-sample-block';
if ( ! empty( $block['className'] ) ) {
	$class_name .= ' ' . $block['className'];
}

// process our custom field
$selected = get_field( 'select_an_animal' );

$block_wrapper_attributes = get_block_wrapper_attributes(
	array(
		'class' => esc_attr( $class_name ),
	)
	);
?>

<div
	<?php
	echo wp_kses_data(
		$block_wrapper_attributes
	);
	?>
>


// i'm having trouble making the opening php tag show in the comment
	echo "The selected animal is: " . $selected ;
	echo "The value of get_block_wrapper_attributes is: " . $block_wrapper_attributes;
// closing php tag here	

</div>

Version Information:

  • WP 6.3.1
  • PHP 8.0.30
  • ACF Version Pro 6.2
  • Chrome

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with block.json and block-template.php, then reproduce the issue in WordPress 6.3.1 by changing an editable ACF block field after applying color support. Trace why get_block_wrapper_attributes() loses the generated classes during re-rendering; done means the classes and style attributes remain in the block markup after field edits.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, wordpress
Domain
backend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.