Make block style slug available to render callback

[iandunn]

• Part of Block API #41236.

What problem does this address?

Normally when you want to change a block based on the selected style, it's enough to just add styles to the stylesheet. The are some situations where you need to do more than that, though, like changing the Google Map styles that a map block uses. Those are stored in a JSON variable.

I don't see a way to easily access the slug of the selected style. I can parse it out of attributes.className, but that's kind of hacky. I have to use a regex, or loop through my style slugs and do a string search.

I also don't see a way to get a list of styles registered for my block, so I have to restructure my code to maintain an array of styles, and then loop through them passing them to registerBlockStyle, rather than just calling it directly.

What is your proposed solution?

Add something like attributes.style which equals the slug of the selected style. It's not technically an attribute, though.

Another idea would be to expose it via something like:

const block = useSelect(
	( select ) => {
		return select( 'core/block-editor' ).getBlock( clientId );
	},
	[ clientId ]
);

[iandunn]

It'd also be nice to expose it to the PHP render_callback for dynamic blocks, in case it affects some data that PHP passes to JS during the initial page load. I ran into that too.