Style default attributes for block supports are not respected in dynamic render

[dutchigor]

Description

Adding default values for at least a color or dimensions.minHeight support in the block.json is not respected when adding them to a dynamic block.

It seems that get_block_wrapper_attributes only generates the style tag when values have been set in the block, but not when a default value is passed in the block type arguments.

I have tried to add the attributes both to the block.json file and the register_block_type $args parameter but neither do the trick.

Step-by-step reproduction instructions

1. Add color and minHeight support, and attribute defaults for these supports to the block.json:

  "supports": {
  	"color": {
  		"text": true
  	},
  	"dimensions": {
  		"minHeight": true
  	}
  },
  "attributes": {
  	"style": {
  		"type": "object",
  		"default": {
  			"color": {
  				"text": "#ff0000"
  			},
  			"dimensions": {
  				"minHeight": "100px"
  			}
  		}
  	}
  }

2. Add render callbacck to plugin file:

  register_block_type( __DIR__ . '/build', array(
  	'render_callback' => fn ($attributes) =>
  		'<p ' . get_block_wrapper_attributes() . '>' . $attributes['style']['color']['text'] . '</p>',
  	// Adding supports and attributes here does not matter. The problem exists either way.
  	'supports' => array(
  		'color' => array(
  			'text' => true,
  		),
  	),
  	"attributes" => array(
  		"style" => array(
  			"type" => "object",
  			"default" => array(
  				"color" => array(
  					"text" => "#ff0000"
  				),
  			),
  		),
  	),
  ) );

3. Add a setter for the color in the edit component:

function Edit({attributes, setAttributes}) {
  return (
  	<div { ...useBlockProps() }>
  		<button onClick={() => setAttributes({style: { color: {text: "#ffff00"}}})}>
  			Change color
  		</button><span>{ attributes.style.color.text }</span>
  	</div>
  );
}

4. Add the block to a post or page. Notice that the min height and text color show as expected.
5. Update the post without pressing the change color button
6. View the updated post. Notice that the printed value for the color is #ff0000 but neither the text color nor the default height styling is applied.
7. Go back to the editor, press the change color button and save the post
8. View the post again. Notice that now styling is applied in line with the printed variable.

Screenshots, screen recording, code snippet

No response

Environment info

• Wordpress: 6.2.2
• Gutenberg: default for WP 6.2.2
• Theme: Tested on Twenty Twenty-Three and Twenty Twenty
• Browser: Chrome.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

Hi @dutchigor,

The problem you reported appears to have been reported several times in the past.

• Default block alignment class is not in get_block_wrapper_attributes #50027
• Default attributes for block-support properties don't apply on dynamic blocks #50229
• Dynamic blocks: default values for attributes aren't converted into html comments #7342

As far as I know, the current solution to this problem is to set a default value similar to block.json if the key does not exist in $attributes. Here is an example of an archive block:

gutenberg/packages/block-library/src/archives/index.php

Line 19 in 33bf984

$type = isset( $attributes['type'] ) ? $attributes['type'] : 'monthly';

I will close this issue as a duplicate, but if I have missed something, please let me know.

[dutchigor]

Thanks! Not sure how I missed those. This would mean manually recreating the styles otherwise provided by adding supports in the block registration. I'll do this for now and continue the discussion on #50229 as this seems to be about the same problem.