Add block examples for all core blocks

WordPress · Sep 20, 2019 · 08a039f · 08a039f
1 parent c8e1da4
commit 08a039f
Show file tree

Hide file tree

Showing 29 changed files with 301 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -12,7 +12,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import TokenList from '@wordpress/token-list';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { _x } from '@wordpress/i18n';
-import { getBlockType, cloneBlock, createBlock } from '@wordpress/blocks';
+import { getBlockType, cloneBlock, getBlockFromExample } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -124,9 +124,13 @@ function BlockStyles( {
 						<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
 							<BlockPreview
 								viewportWidth={ 500 }
-								blocks={ type.example ?
-									createBlock( block.name, { ...type.example.attributes, className: styleClassName }, type.example.innerBlocks ) :
-									cloneBlock( block, { className: styleClassName } )
+								blocks={
+									type.example ?
+										getBlockFromExample( block.name, {
+											attributes: { ...type.example.attributes, className: styleClassName },
+											innerBlocks: type.example.innerBlocks,
+										} ) :
+										cloneBlock( block, { className: styleClassName } )
 								}
 							/>
 						</div>

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -8,7 +8,7 @@ import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash';
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Dropdown, IconButton, Toolbar, PanelBody, Path, SVG } from '@wordpress/components';
-import { getBlockType, getPossibleBlockTransformations, switchToBlockType, cloneBlock, createBlock } from '@wordpress/blocks';
+import { getBlockType, getPossibleBlockTransformations, switchToBlockType, cloneBlock, getBlockFromExample } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { DOWN } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -171,7 +171,10 @@ export class BlockSwitcher extends Component {
 									viewportWidth={ 500 }
 									blocks={
 										hoveredBlockType.example ?
-											createBlock( hoveredBlock.name, { ...hoveredBlockType.example.attributes, className: hoveredClassName }, hoveredBlockType.example.innerBlocks ) :
+											getBlockFromExample( hoveredBlock.name, {
+												attributes: { ...hoveredBlockType.example.attributes, className: hoveredClassName },
+												innerBlocks: hoveredBlockType.example.innerBlocks,
+											} ) :
 											cloneBlock( hoveredBlock, { className: hoveredClassName } )
 									}
 								/>

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -34,6 +34,7 @@ import {
 	createBlock,
 	isUnmodifiedDefaultBlock,
 	getBlockType,
+	getBlockFromExample,
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose';
@@ -391,11 +392,11 @@ export class InserterMenu extends Component {
 										<div className="block-editor-inserter__preview-content">
 											<BlockPreview
 												viewportWidth={ 500 }
-												blocks={ createBlock(
-													hoveredItem.name,
-													hoveredItemBlockType.example ? hoveredItemBlockType.example.attributes : hoveredItem.initialAttributes,
-													hoveredItemBlockType.example ? hoveredItemBlockType.example.innerBlocks : undefined
-												) }
+												blocks={
+													hoveredItemBlockType.example ?
+														getBlockFromExample( hoveredItem.name, hoveredItemBlockType.example ) :
+														createBlock( hoveredItem.name, hoveredItem.initialAttributes )
+												}
 											/>
 										</div>
 									</div>

diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js
@@ -21,6 +21,13 @@ export const settings = {
 	description: __( 'Prompt visitors to take action with a button-style link.' ),
 	icon,
 	keywords: [ __( 'link' ) ],
+	example: {
+		attributes: {
+			className: 'is-style-fill',
+			url: 'https://wordpress.org/download',
+			text: 'Download WordPress',
+		},
+	},
 	supports: {
 		align: true,
 		alignWide: false,

diff --git a/packages/block-library/src/calendar/index.js b/packages/block-library/src/calendar/index.js
@@ -20,5 +20,6 @@ export const settings = {
 	supports: {
 		align: true,
 	},
+	example: {},
 	edit,
 };
diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js
@@ -20,6 +20,11 @@ export const settings = {
 	title: __( 'Code' ),
 	description: __( 'Display code snippets that respect your spacing and tabs.' ),
 	icon,
+	example: {
+		attributes: {
+			content: '<p>' + __( 'Welcome to the world of blocks.' ) + '</p>',
+		},
+	},
 	supports: {
 		html: false,
 	},

diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js
@@ -24,6 +24,45 @@ export const settings = {
 		align: [ 'wide', 'full' ],
 		html: false,
 	},
+	example: {
+		innerBlocks: [
+			{
+				name: 'core/column',
+				innerBlocks: [
+					{
+						name: 'core/image',
+						attributes: {
+							url: 'https://images.unsplash.com/photo-1549880339-d93e3072aef4',
+						},
+					},
+				],
+			},
+			{
+				name: 'core/column',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: __( 'WordPress is Open Source Software.' ),
+						},
+					},
+				],
+			},
+			{
+				name: 'core/column',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: __( 'Build' ) + '<br>' +
+							__( 'Change' ) + '<br>' +
+							__( 'Share' ),
+						},
+					},
+				],
+			},
+		],
+	},
 	deprecated,
 	edit,
 	save,

diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
@@ -24,6 +24,22 @@ export const settings = {
 	supports: {
 		align: true,
 	},
+	example: {
+		attributes: {
+			customOverlayColor: '#065174',
+		},
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					customFontSize: 20,
+					content: __( 'The freedom to build.' ) + '<br>' +
+					__( 'The freedom to change.' ) + '<br>' +
+					__( 'The freedom to share.' ),
+				},
+			},
+		],
+	},
 	transforms,
 	save,
 	edit,

diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
@@ -22,12 +22,38 @@ export const settings = {
 	icon,
 	description: __( 'A block that groups other blocks.' ),
 	keywords: [ __( 'container' ), __( 'wrapper' ), __( 'row' ), __( 'section' ) ],
+	example: {
+		attributes: {
+			customBackgroundColor: '#065174',
+		},
+		innerBlocks: [
+			{
+				name: 'spacer',
+				attribiutes: {
+					height: 100,
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					customTextColor: '#ffffff',
+					fontSize: 'large',
+					content: __( 'The 4 Freedoms.' ),
+				},
+			},
+			{
+				name: 'spacer',
+				attribiutes: {
+					height: 100,
+				},
+			},
+		],
+	},
 	supports: {
 		align: [ 'wide', 'full' ],
 		anchor: true,
 		html: false,
 	},
-
 	transforms: {
 		from: [
 			{

diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
@@ -25,6 +25,11 @@ export const settings = {
 		className: false,
 		anchor: true,
 	},
+	example: {
+		attributes: {
+			content: __( 'Hello block editor!' ),
+		},
+	},
 	transforms,
 	deprecated,
 	merge( attributes, attributesToMerge ) {

diff --git a/packages/block-library/src/html/index.js b/packages/block-library/src/html/index.js
@@ -21,6 +21,11 @@ export const settings = {
 	description: __( 'Add custom HTML code and preview it as you edit.' ),
 	icon,
 	keywords: [ __( 'embed' ) ],
+	example: {
+		attributes: {
+			content: '<p>' + __( 'Welcome to the world of blocks.' ) + '</p>',
+		},
+	},
 	supports: {
 		customClassName: false,
 		className: false,

diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
@@ -25,6 +25,13 @@ export const settings = {
 		'img', // "img" is not translated as it is intended to reflect the HTML <img> tag.
 		__( 'photo' ),
 	],
+	example: {
+		attributes: {
+			sizeSlug: 'large',
+			url: 'https://images.unsplash.com/photo-1549880339-d93e3072aef4',
+			caption: __( 'Snow covered mountain' ),
+		},
+	},
 	styles: [
 		{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
 		{ name: 'circle-mask', label: _x( 'Circle Mask', 'block style' ) },

diff --git a/packages/block-library/src/list/index.js b/packages/block-library/src/list/index.js
@@ -24,6 +24,11 @@ export const settings = {
 	supports: {
 		className: false,
 	},
+	example: {
+		attributes: {
+			values: '<li>5.2 – Jaco Pastorius</li><li>5.1 – Betty Carter</li><li>5.0 – Bebo Valdés</li>',
+		},
+	},
 	transforms,
 	merge( attributes, attributesToMerge ) {
 		const { values } = attributesToMerge;

diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
@@ -26,6 +26,20 @@ export const settings = {
 		align: [ 'wide', 'full' ],
 		html: false,
 	},
+	example: {
+		attributes: {
+			align: 'wide',
+		},
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					fontSize: 'large',
+					content: __( 'The 4 Freedoms' ),
+				},
+			},
+		],
+	},
 	transforms,
 	edit,
 	save,

diff --git a/packages/block-library/src/more/index.js b/packages/block-library/src/more/index.js
@@ -26,6 +26,7 @@ export const settings = {
 		html: false,
 		multiple: false,
 	},
+	example: {},
 	transforms,
 	edit,
 	save,

diff --git a/packages/block-library/src/nextpage/index.js b/packages/block-library/src/nextpage/index.js
@@ -26,6 +26,7 @@ export const settings = {
 		className: false,
 		html: false,
 	},
+	example: {},
 	transforms,
 	edit,
 	save,

diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js
@@ -20,6 +20,11 @@ export const settings = {
 	title: __( 'Preformatted' ),
 	description: __( 'Add text that respects your spacing and tabs, and also allows styling.' ),
 	icon,
+	example: {
+		attributes: {
+			content: __( 'Write preformatted text easily.' ),
+		},
+	},
 	transforms,
 	edit,
 	save,

diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js
@@ -21,6 +21,12 @@ export const settings = {
 	title: __( 'Pullquote' ),
 	description: __( 'Give special visual emphasis to a quote from your text.' ),
 	icon,
+	example: {
+		attributes: {
+			value: '<p>' + __( 'One of the hardest things to do in technology is disrupt yourself.' ) + '</p>',
+			citation: 'Matt Mullenweg',
+		},
+	},
 	styles: [
 		{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
 		{ name: SOLID_COLOR_STYLE_NAME, label: __( 'Solid Color' ) },

diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
@@ -22,6 +22,12 @@ export const settings = {
 	description: __( 'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar' ),
 	icon,
 	keywords: [ __( 'blockquote' ) ],
+	example: {
+		attributes: {
+			value: '<p>' + __( 'One of the hardest things to do in technology is disrupt yourself.' ) + '</p>',
+			citation: 'Matt Mullenweg',
+		},
+	},
 	styles: [
 		{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
 		{ name: 'large', label: _x( 'Large', 'block style' ) },

diff --git a/packages/block-library/src/rss/index.js b/packages/block-library/src/rss/index.js
@@ -20,5 +20,10 @@ export const settings = {
 		align: true,
 		html: false,
 	},
+	example: {
+		attributes: {
+			feedURL: 'https://wordpress.org',
+		},
+	},
 	edit,
 };
diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js
@@ -19,5 +19,6 @@ export const settings = {
 	supports: {
 		align: true,
 	},
+	example: {},
 	edit,
 };
diff --git a/packages/block-library/src/separator/index.js b/packages/block-library/src/separator/index.js
@@ -21,6 +21,13 @@ export const settings = {
 	description: __( 'Create a break between ideas or sections with a horizontal separator.' ),
 	icon,
 	keywords: [ __( 'horizontal-line' ), 'hr', __( 'divider' ) ],
+	example: {
+		attributes: {
+			customColor: '#065174',
+			className: 'is-style-wide',
+
+		},
+	},
 	styles: [
 		{ name: 'default', label: __( 'Default' ), isDefault: true },
 		{ name: 'wide', label: __( 'Wide Line' ) },

diff --git a/packages/block-library/src/social-links/index.js b/packages/block-library/src/social-links/index.js
@@ -20,6 +20,13 @@ export const settings = {
 	supports: {
 		align: [ 'left', 'center', 'right' ],
 	},
+	example: {
+		innerBlocks: [
+			{ name: 'core/social-link-wordpress', attributes: { url: 'https://wordpress.org' } },
+			{ name: 'core/social-link-facebook', attributes: { url: 'https://www.facebook.com/WordPress/' } },
+			{ name: 'core/social-link-twitter', attributes: { url: 'https://twitter.com/WordPress' } },
+		],
+	},
 	styles: [
 		{ name: 'default', label: __( 'Default' ), isDefault: true },
 		{ name: 'logos-only', label: __( 'Logos Only' ) },