Add content role to caption attributes - Make new content blocks.

[jorgefilipecosta]

This PR adds __experimentalRole content to the caption attributes of image, gallery, audio, video, and embed blocks.
This change makes sense because the caption is content and it is important because with this change these blocks become content blocks an important concept in future work e.g this PR #43037.

[ntsekouras]

Thanks for the PR Jorge! This is a bit more nuanced and we have to agree to a way forward..

The "__experimentalRole": "content" was introduced here and is currently used for suggesting pattern transformations that are contextual to the currently selected 'simple' blocks (no InnerBlocks). What this does in that front is trying to retain these attributes in existing block patterns and transform the existing blocks. So an example would be to keep a paragraph's content from the existing block but add all the other attributes from the pattern like background color, etc...

Now if a block has no 'content' attributes it will return all of them, so they will take precedence over the pattern's attributes and that's why Image pattern transformation work now and for some other blocks.

If we need to apply the content role for other blocks we should do it for all the attributes that are 'content'. I don't remember why I hadn't added these for image etc in the first PR(maybe some nuances with id, src, href attributes? 🤔 ), but we would need to make sure the marked attributes are the proper ones.

You can test all these by adding this pattern:

function wpdocs_register_block_patterns() {
	register_block_pattern(
		'wpdocs/my-example',
		array(
			'title'         => __( 'Demo pattern', 'textdomain' ),
			'description'   => _x( 'This is my first block pattern', 'Block pattern description', 'textdomain' ),
			'content'       => '<!-- wp:paragraph {"backgroundColor":"pale-cyan-blue"} -->
			<p class="has-pale-cyan-blue-background-color has-background">hi rigatonious</p>
			<!-- /wp:paragraph -->
			<!-- wp:image {"style":{"border":{"width":"18px"}},"className":"is-style-rounded"} -->
			<figure class="wp-block-image has-custom-border is-style-rounded"><img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVyc29ufGVufDB8fDB8fA%3D%3D&amp;w=1000&amp;q=80" alt="" style="border-width:18px"/></figure>
			<!-- /wp:image -->',
			'categories'    => array( 'text' ),
			'viewportWidth' => 800,
			'blockTypes'    => array( 'core/paragraph', 'core/image' ),
		)
	);
}
add_action( 'init', 'wpdocs_register_block_patterns' );

Screen.Recording.2022-08-09.at.10.52.45.AM.mov

[oandregal]

@ntsekouras if I understood correctly, the transform to pattern feature works differently depending on how the block is declared:

• if it has an att with role=content => the feature will discard all atts (even if edited by the user) but the ones with role=content
• if it does not have a role=content att => maintains all that have been edited by the user

This means when we add __experimentalRole to blocks that don't have it yet, we're changing how this feature works for them.

Can we change how this feature works for a block? I've updated the image's attributes here #43280

On a side-note: I find confusing that the "transform to patterns" feature works differently depending on something the user does not see (markers in the block attributes). Perhaps if we review all core blocks with content and assign this role it'll be better, though, the issue still stands for 3rd party blocks (they work differently and when migrated to use the role they'll change behavior).

[ntsekouras]

the transform to pattern feature works differently depending on how the block is declared:

Your explanation is correct. I should note that this feature doesn't work right now for 'complex' blocks(with inner blocks) and I think it will probably change - maybe with the schemas discussions? 🤔

Regarding the role:content is a meta that could be useful in various places, but IMO should be consistent and not just a means of 'hacking/exploiting' the semantics. For example we could add this to other blocks like Image, but make sure we add it for all 'content' attributes(attributes that affect the content of the block and not the display).

[jorgefilipecosta]

Closing this PR according to the discussion that happened. We should create similar PRs to #43280 for other blocks.