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

Add block examples for all core blocks #17493

Merged
merged 27 commits into from Sep 30, 2019

Conversation

@youknowriad
Copy link
Contributor

commented Sep 20, 2019

closes #17488

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.

Screenshot 2019-09-23 at 13 07 58

image

@youknowriad youknowriad force-pushed the add/block-examples branch from f8dd569 to 08a039f Sep 20, 2019
Copy link
Member

left a comment

I added some suggestions.

packages/block-library/src/button/index.js Outdated Show resolved Hide resolved
packages/block-library/src/group/index.js Outdated Show resolved Hide resolved
@@ -20,5 +20,10 @@ export const settings = {
align: true,
html: false,
},
example: {
attributes: {
feedURL: 'https://wordpress.org',

This comment has been minimized.

Copy link
@Soean

Soean Sep 20, 2019

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

This comment has been minimized.

Copy link
@richtabor

richtabor Sep 20, 2019

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

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

This comment has been minimized.

Copy link
@HardeepAsrani

HardeepAsrani Sep 21, 2019

Contributor

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.

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

This comment has been minimized.

Copy link
@gziolo

gziolo Sep 23, 2019

Member

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

This comment has been minimized.

Copy link
@mtias

mtias Sep 23, 2019

Contributor

We should bundle any image we use as well.

This comment has been minimized.

Copy link
@youknowriad

youknowriad Sep 23, 2019

Author Contributor

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

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

This comment has been minimized.

Copy link
@gziolo

gziolo Sep 23, 2019

Member

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 ) => {
mtias and others added 7 commits Sep 23, 2019
Co-Authored-By: Sören Wrede <soerenwrede@gmail.com>
@mtias

This comment has been minimized.

Copy link
Contributor

commented Sep 23, 2019

This is a great place to add some personality.

mtias added 2 commits Sep 23, 2019
@@ -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 comment has been minimized.

Copy link
@mcsf

mcsf Sep 23, 2019

Contributor

This doesn't play in Safari.

This comment has been minimized.

Copy link
@mtias

mtias Sep 23, 2019

Contributor

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.

This comment has been minimized.

Copy link
@jasmussen

jasmussen Sep 30, 2019

Contributor

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

This comment has been minimized.

Copy link
Contributor

commented Sep 24, 2019

I wonder if we should instead do something like this for the Group block?

Screen Shot 2019-09-24 at 12 51 40 PM

<!-- wp:group {"backgroundColor":"very-dark-gray"} -->
<div class="wp-block-group has-very-dark-gray-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"customTextColor":"#ffffff","customBackgroundColor":"#9258d8"} -->
<p style="background-color:#9258d8;color:#ffffff" class="has-text-color has-background">Block one.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customTextColor":"#ffffff","customBackgroundColor":"#3e8fdc"} -->
<p style="background-color:#3e8fdc;color:#ffffff" class="has-text-color has-background">Block two.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customTextColor":"#ffffff","customBackgroundColor":"#5bcc88"} -->
<p style="background-color:#5bcc88;color:#ffffff" class="has-text-color has-background">Block three.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->
…y in the Columns block.
@mtias

This comment has been minimized.

Copy link
Contributor

commented Sep 26, 2019

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

@mapk

This comment has been minimized.

Copy link
Contributor

commented Sep 26, 2019

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?

Screen Shot 2019-09-26 at 2 53 18 PM

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

This comment has been minimized.

Copy link
Contributor

commented Sep 26, 2019

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

Screen Shot 2019-09-26 at 2 58 28 PM

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Sep 27, 2019

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

@mapk

This comment has been minimized.

Copy link
Contributor

commented Sep 27, 2019

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

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

commented Sep 27, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Sep 30, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Sep 30, 2019

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

@jasmussen jasmussen self-requested a review Sep 30, 2019
Copy link
Contributor

left a comment

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:

examples

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Sep 30, 2019

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:

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

This comment has been minimized.

Copy link
Contributor

commented Sep 30, 2019

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:

Screenshot 2019-09-30 at 15 55 37

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 jasmussen self-requested a review Sep 30, 2019
Copy link
Contributor

left a comment

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.

@youknowriad youknowriad merged commit b5fe681 into master Sep 30, 2019
4 of 7 checks passed
4 of 7 checks passed
pull-request-automation
Details
Header rules - gutenberg-playground No header rules processed
Details
Pages changed - gutenberg-playground 3 new files uploaded
Details
Redirect rules - gutenberg-playground No redirect rules processed
Details
Mixed content - gutenberg-playground No mixed content detected
Details
Travis CI - Pull Request Build Passed
Details
netlify/gutenberg-playground/deploy-preview Deploy preview ready!
Details
WordPress 5.3 Must Have automation moved this from In progress to Done Sep 30, 2019
@youknowriad youknowriad deleted the add/block-examples branch Sep 30, 2019
youknowriad added a commit that referenced this pull request Sep 30, 2019
@mapk

This comment has been minimized.

Copy link
Contributor

commented Oct 11, 2019

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

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