Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inserter Panel: Need block previews for each block #17488

Closed
mapk opened this issue Sep 19, 2019 · 4 comments · Fixed by #17493

Comments

@mapk
Copy link
Contributor

commented Sep 19, 2019

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.

Screen Shot 2019-09-19 at 10 48 22 AM

@mapk

This comment has been minimized.

Copy link
Contributor Author

commented Sep 19, 2019

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

This comment has been minimized.

Copy link
Member

commented Sep 19, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Sep 20, 2019

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

This comment has been minimized.

Copy link
Member

commented Sep 23, 2019

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.