⚠️ Note: it might be too early for such functionality, in which case I'm happy for this to be put on ice. Validation of the approach might be helpful however.

By "too early" I mean that there's little demand for such a feature, and also that we should implemented and reach stability with global styles before we open up the extensibility genie.

What?

Takes inspiration from #41965

Adds a new class to the style engine that manages extensions of the block style definitions.

❗ This PR only allows setting new style definitions, that is, those that do not already exist in BLOCK_STYLE_DEFINITIONS_METADATA as either top-level style groups or their children. It does not allow overwriting existing definitions.

Why?

Plugins and/or themes may want to register new a block support, and also have the Style Engine generate styles for this block support.

See: https://github.com/WordPress/gutenberg/blob/trunk/packages/style-engine/docs/using-the-style-engine-with-block-supports.md

Furthermore, allowing users to extend the default block style definitions list opens up handling of preset vars, classnames and other functionality.

TODO

This is the first iteration. Follow ups will:

• see how we can accommodate value_func callables.
• reinstate and allow overwriting of existing definitions in BLOCK_STYLE_DEFINITIONS_METADATA

How?

A new class: WP_Style_Engine_Block_Style_Metadata

Testing Instructions

npm run test:unit:php:base -- --filter WP_Style_Engine_Block_Style_Metadata_Test

npm run test:unit:php:base -- --filter WP_Style_Engine_Test

You can also test manually, e.g,:

$styles = gutenberg_style_engine_get_styles(
    $block_attributes['style'],
    array(
        'selector' => '.a-selector',
        'metadata' => array(
			'layout' => array(
				'float' => array(
					'property_keys' => array(
						'default' => 'float',
					),
					'path'          => array( 'layout', 'float' ),
				),
			),
		)
    )
);
print_r( $styles );
/*
array(
    'css'          => '.a-selector{float:left}'
    'declarations' => array( 'float' => 'left' )
)
*/