Inserter Panel: Need block previews for each block

[mapk]

With the introduction of the Inserter Help Panel, each time the user hovers over a block, they should see an example of what that block might look like in the panel. Right now we don't include this, but it needs to be implemented for inclusion into WP 5.3.

Let's get this rolling. I'll begin creating sample blocks and exporting the HTML to include here in the comments.

[mapk]

Common blocks

Missing: Audio, File, Gallery due to a lack of inclusion with URL.

Heading block

<!-- wp:heading -->
<h2>Hello block editor!</h2>
<!-- /wp:heading -->

Image block

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://images.unsplash.com/photo-1549880339-d93e3072aef4" alt=""/><figcaption>Snow covered mountain</figcaption></figure>
<!-- /wp:image -->

List block

<!-- wp:list -->
<ul><li>5.2 – Jaco Pastorius</li><li>5.1 – Betty Carter</li><li>5.0 – Bebo Valdés</li></ul>
<!-- /wp:list -->

Quote block

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote>
<!-- /wp:quote -->

Cover block

<!-- wp:cover {"overlayColor":"strong-blue"} -->
<div class="wp-block-cover has-background-dim-NaN has-strong-blue-background-color has-background-dim"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"left","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-left has-large-font-size">The freedom to build.<br>The freedom to change.<br>The freedom to share.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

Video block

<!-- wp:video -->
<figure class="wp-block-video"><video controls src="https://make.wordpress.org/design/files/2019/03/block-manager.mp4"></video><figcaption>Block Manager</figcaption></figure>
<!-- /wp:video -->

Formatting

Table block

<!-- wp:table -->
<figure class="wp-block-table"><table class=""><thead><tr><th>Version</th><th>Jazz Musician</th><th>Release Date</th></tr></thead><tbody><tr><th><a href="https://wordpress.org/news/2019/05/jaco/">5.2</a></th><td>Jaco Pastorius</td><td>May 7, 2019</td></tr><tr><th><a href="https://wordpress.org/news/2019/02/betty/">5.1</a></th><td>Betty Carter</td><td>February 21, 2019</td></tr><tr><th><a href="https://wordpress.org/news/2018/12/bebo/">5.0</a></th><td>Bebo Valdés</td><td>December 6, 2018</td></tr></tbody></table></figure>
<!-- /wp:table -->

Code block

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;!-- wp:paragraph {"key": "value"} -->
&lt;p>Welcome to the world of blocks.&lt;/p>
&lt;!-- /wp:paragraph --></code></pre>
<!-- /wp:code -->

Custom HTML block

<!-- wp:html -->
<!-- wp:paragraph {"key": "value"} -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->
<!-- /wp:html -->

Preformatted block

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">Write preformatted text easily.</pre>
<!-- /wp:preformatted -->

Pullquote block

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
<!-- /wp:pullquote -->

Verse block

<!-- wp:verse -->
<pre class="wp-block-verse">The freedom to build.<br>The freedom to change.<br>The freedom to share.</pre>
<!-- /wp:verse -->

Classic block (not sure this is needed?)

<p>The freedom to build.</p>

Layout elements

Spacer block

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Media + Text block

<!-- wp:media-text -->
<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
<p class="has-large-font-size">The 4 Freedoms</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

Group block

<!-- wp:group {"backgroundColor":"strong-blue"} -->
<div class="wp-block-group has-strong-blue-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"customTextColor":"#ffffff","fontSize":"large"} -->
<p style="color:#ffffff" class="has-text-color has-large-font-size">The freedom to build.<br>The freedom to change.<br>The freedom to share.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->

Button block

<!-- wp:button {"className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link" href="https://wordpress.org/download">Download WordPress</a></div>
<!-- /wp:button -->

Columns block

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://images.unsplash.com/photo-1549880339-d93e3072aef4" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>WordPress is Open Source Software.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Build.<br>Change.<br>Share.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Separator block

<!-- wp:separator {"color":"strong-blue","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background has-strong-blue-background-color has-strong-blue-color is-style-wide"/>
<!-- /wp:separator -->

More block

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

Page Break block

<!-- wp:nextpage -->
<!--nextpage-->
<!-- /wp:nextpage -->

Widgets

Missing: Shortcode, Archives, Categories, Latest Comments, Latest Posts, Tag Cloud, Legacy Widgets due to these pulling in dynamic content. Do we still need to provide their HTML in this issue?

Social block

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link-wordpress {"url":"https://wordpress.org"} /-->

<!-- wp:social-link-facebook {"url":"https://www.facebook.com/WordPress/"} /-->

<!-- wp:social-link-twitter {"url":"https://twitter.com/WordPress"} /-->

<!-- wp:social-link-instagram /-->

<!-- wp:social-link-linkedin /-->

<!-- wp:social-link-youtube /--></ul>
<!-- /wp:social-links -->

RSS block

<!-- wp:rss {"feedURL":"https://wordpress.org"} /-->

Search block

<!-- wp:search /-->

Calendar block

<!-- wp:calendar /-->

Embeds

Missing all embeds. Do we need to include the HTML here for each one as well?

[gziolo]

Cover block contains NaN in the class name of the image. It looks like a bug from incorrect number 😅

Image(s) from Unsplash probably need a copyright note.

List block might become outdated after 2-3 releases. How about using something which is less time sensitive? 😃

[mapk]

Cover block contains NaN in the class name of the image. It looks like a bug from incorrect number 😅

I think this may be due to because I initially chose an image from the Media Library, but then dropped the image and just used a background color? There's no way to add an image from a URL, so I left that out.

Image(s) from Unsplash probably need a copyright note.

We might want to add that to the caption then.

List block might become outdated after 2-3 releases. How about using something which is less time sensitive? 😃

I figured it's really not "outdated" because the data is still correct. It just may be older releases which is okay. I began with WP 5.0 because of Gutenberg's beginning into Core. I could edit it to be something else though.

[gziolo]

I added the comment about Unsplash to #17493. It looks like the final implementation doesn't have an issue with NaN. I also trust your judgment in regards to the List block :)