AdvancedCustomFields / AdvancedCustomFields/acf
get_block_wrapper_attributes() doesn't function properly when a Block is re-rendered after fields are edited
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:
- Add color support to an ACF block that has one or more editable fields.
- Insert the block into a Post and set one or more colors
- 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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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