Add the block example API and use it for inserter and switcher previews

[youknowriad]

close #17124 refs #16979

This adds the Block Example API. It uses it to allow blocks to be previewed even before inserting them into the post. In this PR, the paragraph block contains an example.

We also use the example API in the block styles previews if available.

A follow-up to this PR will include the "tips" API.

It looks like the BlockPreview is not precisely centered vertically. Something to fix separately though as it's unrelated with the changes here cc @marekhrabe @retrofox

[mtias]

left? :)

[youknowriad]

🤷‍♂️

[jasmussen]

No alignment does what? Remember there's also rtl languages.

[mtias]

I think we could try removing the "Preview" text.

[kjellr]

Pushed a couple small updates:

• Removed the "Preview" title.
• Adjusted the spacing so the the preview area grows to take up the available space.

New screenshot:

[retrofox]

Although handling the theme styles feels to be out of scope, I think it worths trying to do it as much as possible.

I've switched to a dark theme, and this is how it looks:

Not completely aware if we already have something like a guide to applying styles to the core-editor from a theme, but is so we could use this to apply them to the preview.

One thing to do is moving the editor-styles-wrapper class higher, maybe create a new element wrapper. In fact, just adding the class makes the preview a little bit better.

export function BlockPreview( { blocks, viewportWidth = 700, settings } ) {
	// ...
	return (
		<div class="editor-styles-wrapper">
			<BlockEditorProvider
			// ...

[youknowriad]

@retrofox can we just move the editor-styles-wrapper to the block-editor-block-preview__container node, it has the same effect I think.

[youknowriad]

So how do we move forward here? Should we merge the PR as is and try to add examples to all of our blocks separately?

[mtias]

So how do we move forward here? Should we merge the PR as is and try to add examples to all of our blocks separately?

Probably, yes. Examples with images are going to be interesting (Cover, Media and Text, etc). Is there any image from wp-admin or the about pages that could be used? Should we add some for this?

[kjellr]

Is there any image from wp-admin or the about pages that could be used? Should we add some for this?

That's a good point. I'm not sure that there's an image from WP-Admin that we use — WP doesn't bundle too many images. I wonder if we can pull in some sort of lightweight SVG graphic as an image?

[mcsf]

This looks good enough to merge and iterate on!

[youknowriad]

Another possibility for the images is to use an URL from wp.org

[gziolo]

I applied Needs Dev Note label as this is block API related and introduces a completely new field. It should also get properly documented in tutorials and related docs.