Add block examples for all core blocks #17493

youknowriad · 2019-09-20T08:40:07Z

This PR adds block examples for the core blocks in order to show a preview of the blocks in the inserter help panel. It uses the examples in the #17488 issue.

Soean

I added some suggestions.

packages/block-library/src/button/index.js

packages/block-library/src/group/index.js

Soean · 2019-09-20T15:18:20Z

packages/block-library/src/rss/index.js

@@ -20,5 +20,10 @@ export const settings = {
 		align: true,
 		html: false,
 	},
+	example: {
+		attributes: {
+			feedURL: 'https://wordpress.org',


Suggested change

feedURL: 'https://wordpress.org',

feedURL: __( 'https://wordpress.org' ),

Suggested change
feedURL: 'https://wordpress.org',
feedURL: __( 'https://wordpress.org' ),

URL's don't need to be translated. 👌

It's usually helpful to translate users to redirect users to the homepage of their locale website like https://hi.wordpress.org/ if they're using WP in that locale.

gziolo · 2019-09-23T06:57:41Z

packages/block-library/src/image/index.js

+		attributes: {
+			sizeSlug: 'large',
+			url: 'https://images.unsplash.com/photo-1549880339-d93e3072aef4',
+			caption: __( 'Snow covered mountain' ),


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

We should bundle any image we use as well.

Can't we use images hosted on wp.org instead? Bundling could be challenging as the public URL is not easily accessible here.

gziolo · 2019-09-23T07:00:21Z

packages/blocks/src/api/factory.js

+ *
+ * @return {Object} block.
+ */
+export const getBlockFromExample = ( name, example ) => {


Should it be createBlockFromExample for conistency with the default name and the description?

Suggested change

export const getBlockFromExample = ( name, example ) => {

export const createBlockFromExample = ( name, example ) => {

Co-Authored-By: Sören Wrede <soerenwrede@gmail.com>

mtias · 2019-09-23T10:49:11Z

This is a great place to add some personality.

mcsf · 2019-09-23T11:33:01Z

packages/block-library/src/video/index.js

@@ -21,6 +21,12 @@ export const settings = {
 	description: __( 'Embed a video from your media library or upload a new one.' ),
 	icon,
 	keywords: [ __( 'movie' ) ],
+	example: {
+		attributes: {
+			src: 'https://make.wordpress.org/design/files/2019/03/block-manager.mp4',


This doesn't play in Safari.

Is there any way to have a very small auto-playing video instead? It doesn't make sense to load a video that you cannot play.

So, I found this place for public domain video: https://www.pond5.com/stock-video-footage/1/.html#1/18447/durationlt:10,pricelt:0

This one is cute, albeit short: https://www.pond5.com/stock-footage/44576423/little-smokey-walking-cage.html

But the problem then becomes, can we hotlink it? Where should these things be hosted? Is make.wordpress.org okay?

mapk · 2019-09-26T21:54:44Z

I tried something very close to that but looked too overwhelming / forced in comparison, so settled with the colored text for now.

I think you're right with a dark background. Maybe with a lighter background?

Also, I'm not sure why, but I don't get the colored text in my preview. And it's not registering with me visually as a "group".

mapk · 2019-09-26T21:59:28Z

Or maybe using the text approach, but with a colored background on the Group block...

jasmussen · 2019-09-27T03:22:20Z

I did not see colored text in twenty nineteen. Perhaps something with them registering custom color palettes.

mapk · 2019-09-27T04:48:18Z

I'm using the Gutenberg Starter Theme, so not sure if that effects it either.

youknowriad · 2019-09-27T08:09:02Z

I think we should not rely on color palettes for the example and only use custom colors because these work across themes.

… the copy in the Columns block." This reverts commit 6472d1c.

youknowriad · 2019-09-30T11:35:13Z

I reverted the base64 commit because in my testing it increases the bundle size of the block-library script by 1Mb. Let's use URLs for now until we figure out a better approach to bundle these images in Core instead.

youknowriad · 2019-09-30T11:47:42Z

updated the group example to avoid the use of the color palette. It should work well across themes now.

jasmussen

I really like this. I think we should scramble to get it in.

On very slow connections it does surface a few improvements we can make to the preview component., but since that's only the first time you hover a block and then never after, I would not call that a blocker. Furthermore, it drastically improves the usability for sighted users of the block library, and it helps encourage 3rd party block developers to include a preview, that it's an important feature to ship.

However I think we should make a quick change. We are hotlinking the images, and we are using Unsplash. The latters license while very liberal, the suggestion to credit photographers makes it perhaps 0.05% less liberal than a strict interpretation of the GPL, which suggests complete and total freedom.

So just in order to be totally kosher, I would recommend replacing all images with certified public domain images from Wikimedia. Using this list https://commons.wikimedia.org/wiki/Featured_Pictures_in_the_Public_Domain I would suggest we could use the following:

An additional benefit is that Wikemedia explicitly permits hotlinking: https://commons.wikimedia.org/wiki/Commons:Reusing_content_outside_Wikimedia/technical

I hope to take a stab at replacing the URLs and returning.

The overall content, other than the images, are great, though, works well:

jasmussen · 2019-09-30T13:34:58Z

Okay, pushed good fastloading guaranteed publicdomain images that look good. These five, for reference:

Had to look for Mont Blanc and a specific bird due to the prose around them.

A couple more things before we can merge:

https://github.com/WordPress/gutenberg/pull/17493/files — commit suggestion?
https://github.com/WordPress/gutenberg/pull/17493/files#r327064974 — I'm looking for a public domain video that plays in Safari, if you have one let me know

I will hopefully be back.

This video is smaller, waaay faster loading, and it's more generic than showing the Block Manager. Good for the preview, where you can't play back the video anyway.

jasmussen · 2019-09-30T13:58:59Z

I just updated the video to be a very short and generic WordPress logo file. This is more appropriate for the preview where you can't even play it back. Plus the preview looks good:

With the help of @kjellr I'm investigating why it doesn't play back in Safari, as noted in the reviews. It may be the Make server.

I have created #17655 to add it back.

jasmussen

As noted previously, I really like this. I think we should get it in.

I replaced all the images with Wikimedia images that are public domain. They also allow us to hotlink, so that helps. In addition, the files are small, so they load really fast compared the the previous images, and given they will be shown in scaled down previews the fidelity is fine.

I also removed the video, because the one we had did not play in Safari, and it should be hosted on a CDN. I created #17655 to track this.

What remains here is lovely, and I think it's good to go.

However I also did a bit of work on this, so would appreciate a sanity check, for example from @kjellr.

mapk · 2019-10-11T21:11:11Z

Just created a Trac ticket to host images on w.org's CDN: https://core.trac.wordpress.org/ticket/48292

hacknug · 2019-10-15T14:46:20Z

I know it's a minor issue but, could we address the sizing of .block-editor-block-card items changing from block to block? It's somewhat annoying trying to preview blocks and read their names and descriptions without having those in a fixed position.

Guessing it's due to flex-grow/shrink since the explicit sizing seems to be in place already.

youknowriad requested review from ajitbohra, ellatrix, gziolo, jorgefilipecosta, mkaz, Soean and talldan as code owners September 20, 2019 08:40

youknowriad self-assigned this Sep 20, 2019

youknowriad added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Sep 20, 2019

youknowriad requested review from mapk and mtias September 20, 2019 08:40

Add block examples for all core blocks

08a039f

youknowriad force-pushed the add/block-examples branch from f8dd569 to 08a039f Compare September 20, 2019 09:59

Soean reviewed Sep 20, 2019

View reviewed changes

mkaz mentioned this pull request Sep 20, 2019

Add example block setting to show block preview WordPress/gutenberg-examples#93

Merged

gziolo reviewed Sep 23, 2019

View reviewed changes

gziolo mentioned this pull request Sep 23, 2019

Inserter Panel: Need block previews for each block #17488

Closed

mtias and others added 7 commits September 23, 2019 11:59

Update "Quote" example.

55990a2

Fix "Group" example.

53eaf23

Use a cover image for "Cover"; update heading text, and more fixes.

5b99982

Use Don Quijote excerpt for paragraph block with drop-cap.

e4ad0fe

Cover image could use a bit more personality.

56018b3

Use "marquee" for the custom HTML block.

0584613

Make "download WordPress" text translatable.

2b125f4

Co-Authored-By: Sören Wrede <soerenwrede@gmail.com>

mtias added 2 commits September 23, 2019 12:54

Shelley.

2427fad

Elizabeth Barrett Browning.

d971482

mcsf reviewed Sep 23, 2019

View reviewed changes

Add instructions for creating a block in the "Code" block.

52a8aa1

Revert "Base64 encoded images that I pulled from Pexels. Also revised…

b2743d2

… the copy in the Columns block." This reverts commit 6472d1c.

Use custom colors instead of the color palette

44b4146

jasmussen self-requested a review September 30, 2019 12:36

jasmussen reviewed Sep 30, 2019

View reviewed changes

youknowriad mentioned this pull request Sep 30, 2019

block-preview: reduce computing delay to zero #17653

Closed

Update images to be public domain from Wikimedia.

8d0ff3d

Update the video.

4ab9f3f

This video is smaller, waaay faster loading, and it's more generic than showing the Block Manager. Good for the preview, where you can't play back the video anyway.

jasmussen mentioned this pull request Sep 30, 2019

Enhancement: Add video example to the block library #17655

Closed

Remove the video for now.

a57bac8

I have created #17655 to add it back.

jasmussen self-requested a review September 30, 2019 14:08

jasmussen approved these changes Sep 30, 2019

View reviewed changes

youknowriad merged commit b5fe681 into master Sep 30, 2019

youknowriad deleted the add/block-examples branch September 30, 2019 15:47

youknowriad added a commit that referenced this pull request Sep 30, 2019

Add block examples for all core blocks (#17493)

0a34a36

youknowriad added a commit that referenced this pull request Sep 30, 2019

Add block examples for all core blocks (#17493)

47927ab

mcsf mentioned this pull request Nov 7, 2019

Verse: Block example should be a single string for translators to handle #18364

Closed

kwight mentioned this pull request Nov 14, 2019

Examples: Update example images with those from WP core. godaddy-wordpress/coblocks#1134

Merged

jorgefilipecosta removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Feb 4, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add block examples for all core blocks #17493

Add block examples for all core blocks #17493

youknowriad commented Sep 20, 2019 •

edited by mtias

Loading

Soean left a comment

Soean Sep 20, 2019

richtabor Sep 20, 2019

HardeepAsrani Sep 21, 2019

gziolo Sep 23, 2019

mtias Sep 23, 2019

youknowriad Sep 23, 2019

gziolo Sep 23, 2019

mtias commented Sep 23, 2019

mcsf Sep 23, 2019

mtias Sep 23, 2019

jasmussen Sep 30, 2019

mapk commented Sep 26, 2019

mapk commented Sep 26, 2019

jasmussen commented Sep 27, 2019

mapk commented Sep 27, 2019

youknowriad commented Sep 27, 2019

youknowriad commented Sep 30, 2019

youknowriad commented Sep 30, 2019

jasmussen left a comment

jasmussen commented Sep 30, 2019

jasmussen commented Sep 30, 2019

jasmussen left a comment

mapk commented Oct 11, 2019

hacknug commented Oct 15, 2019

	feedURL: 'https://wordpress.org',
	feedURL: __( 'https://wordpress.org' ),

	export const getBlockFromExample = ( name, example ) => {
	export const createBlockFromExample = ( name, example ) => {

Add block examples for all core blocks #17493

Add block examples for all core blocks #17493

Conversation

youknowriad commented Sep 20, 2019 • edited by mtias Loading

Soean left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mtias commented Sep 23, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mapk commented Sep 26, 2019

mapk commented Sep 26, 2019

jasmussen commented Sep 27, 2019

mapk commented Sep 27, 2019

youknowriad commented Sep 27, 2019

youknowriad commented Sep 30, 2019

youknowriad commented Sep 30, 2019

jasmussen left a comment

Choose a reason for hiding this comment

jasmussen commented Sep 30, 2019

jasmussen commented Sep 30, 2019

jasmussen left a comment

Choose a reason for hiding this comment

mapk commented Oct 11, 2019

hacknug commented Oct 15, 2019

youknowriad commented Sep 20, 2019 •

edited by mtias

Loading