Skip to content

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

@dutchigor

Description

@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"
  			}
  		}
  	}
  }
  1. 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"
  				),
  			),
  		),
  	),
  ) );
  1. 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>
  );
}
  1. Add the block to a post or page. Notice that the min height and text color show as expected.
  2. Update the post without pressing the change color button
  3. 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.
  4. Go back to the editor, press the change color button and save the post
  5. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Package] Block library/packages/block-library[Status] DuplicateUsed to indicate that a current issue matches an existing one and can be closed[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions