Improve get_block_wrapper_attributes() in order to get separated styles and classes

[cbravobernal]

Hi there!

While creating core blocks for Gutenberg, we have experienced some limitations on how get_block_wrapper_attributes() function works.

Right now, as the function says, it generates a string of attributes by applying to the current block being rendered all of the features that the block supports.

For example: 'style="border-radius: 10px" class="has-background"'

But some blocks require those attributes to be separate, for example get_avatar(); asks for different variables, for 'class' and for 'extra attributes'

$avatar = sprintf(
<img alt='%s' src='%s' srcset='%s' class='%s' height='%d' width='%d' %s/>,
	esc_attr( $args['alt'] ),
	esc_url( $url ),
	esc_url( $url2x ) . ' 2x',
	esc_attr( implode( ' ', $class ) ),
	(int) $args['height'],
	(int) $args['width'],
	$extra_attr
);

Also, having the option of returning styles and classes separately could add the possibility of adding different attributes in different parts of the markup (padding on the child element, background on the parents).

The function WP_Block_Supports::get_instance()->apply_block_supports(); is already giving an array of all attributes. And this function does the same, the only difference is that it implodes the array at the end.

What would be the best approach to improve it?

• Introduce a lower-level function that returns a single attribute based on the following part of the existing function: get_block_wrapper_attribute_value( 'class', 'foo-class boo-class' ) or get_block_wrapper_attribute_value( 'style', 'border-radius: 20px; text-align: center').

• Add an option to the function to decide the return type of the function (array vs string). get_block_wrapper_attributes($string_mode = boolean, $extra_attributes = array());

• Copy the same function with a different name, but returning the array instead of the string.

More context on Github:
​https://github.com/WordPress/gutenberg/pull/35396#discussion_r733580489

[gziolo]

@oanregal and @youknowriad, what would be your recommendation here?

[gziolo]

There is a plan to introduce a Styles Engine for the block editor as proposed in ​https://github.com/WordPress/gutenberg/issues/38167. It might make this ticket obsolete depending on how this ends up being implemented. In my comment on GitHub, I left my thoughts, on how we could approach this problem differently. See ​https://github.com/WordPress/gutenberg/discussions/36079#discussioncomment-2033349.