WordPress · youknowriad · Sep 30, 2019 · Sep 20, 2019 · Sep 23, 2019 · Sep 23, 2019
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,15 @@ export const settings = {
 	title: __( 'Code' ),
 	description: __( 'Display code snippets that respect your spacing and tabs.' ),
 	icon,
+	example: {
+		attributes: {
+			content: __( '// A "block" is the abstract term used' ) + '\n' +
+			__( '// to describe units of markup that,' ) + '\n' +
+			__( '// when composed together, form the' ) + '\n' +
+			__( '// content or layout of a page.' ) + '\n' +
+			__( 'registerBlockType( name, settings );' ),
+		},
+	},
 	supports: {
 		html: false,
 	},

diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js
@@ -24,8 +24,51 @@ export const settings = {
 		align: [ 'wide', 'full' ],
 		html: false,
 	},
+	example: {
+		innerBlocks: [
+			{
+				name: 'core/column',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et eros eu felis pellentesque efficitur. Nam dapibus felis malesuada tincidunt rhoncus. Integer non malesuada tortor.',
+						},
+					},
+					{
+						name: 'core/image',
+						attributes: {
+							url: 'https://images.unsplash.com/photo-1549880339-d93e3072aef4',
+						},
+					},
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: 'Suspendisse commodo neque lacus, a dictum orci interdum et. Ut vel mi ut leo fringilla rutrum.',
+						},
+					},
+				],
+			},
+			{
+				name: 'core/column',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: __( 'Etiam et egestas lorem. Vivamus sagittis sit amet dolor quis lobortis. Integer sed fermentum arcu, id vulputate lacus. Etiam fermentum sem eu quam hendrerit, eget faucibus urna pulvinar.' ),
+						},
+					},
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: __( 'Nam risus massa, ullamcorper consectetur eros fermentum, porta aliquet ligula. Sed vel mauris nec enim ultricies commodo.' ),
+						},
+					},
+				],
+			},
+		],
+	},
 	deprecated,
 	edit,
 	save,
 };
-
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
@@ -24,6 +24,23 @@ export const settings = {
 	supports: {
 		align: true,
 	},
+	example: {
+		attributes: {
+			customOverlayColor: '#065174',
+			dimRatio: 40,
+			url: 'https://images.unsplash.com/photo-1549880339-d93e3072aef4',
+		},
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					customFontSize: 48,
+					content: __( 'Snow Patrol' ),
+					align: 'center',
+				},
+			},
+		],
+	},
 	transforms,
 	save,
 	edit,

diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
@@ -22,12 +22,66 @@ export const settings = {
 	icon,
 	description: __( 'A block that groups other blocks.' ),
 	keywords: [ __( 'container' ), __( 'wrapper' ), __( 'row' ), __( 'section' ) ],
+	example: {
+		attributes: {
+			customBackgroundColor: '#ffffff',
+		},
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					textColor: 'vivid-red',
+					fontSize: 'large',
+					content: __( 'One.' ),
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					textColor: 'luminous-vivid-orange',
+					fontSize: 'large',
+					content: __( 'Two.' ),
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					textColor: 'luminous-vivid-amber',
+					fontSize: 'large',
+					content: __( 'Three.' ),
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					textColor: 'vivid-green-cyan',
+					fontSize: 'large',
+					content: __( 'Four.' ),
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					textColor: 'vivid-cyan-blue',
+					fontSize: 'large',
+					content: __( 'Five.' ),
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					textColor: 'vivid-purple',
+					fontSize: 'large',
+					content: __( 'Six.' ),
+				},
+			},
+		],
+	},
 	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,12 @@ export const settings = {
 		className: false,
 		anchor: true,
 	},
+	example: {
+		attributes: {
+			content: __( 'Code is Poetry' ),
+			level: 1,
+		},
+	},
 	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: '<marquee>' + __( 'Welcome to the wonderful world of blocks…' ) + '</marquee>',
+		},
+	},
 	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: __( 'Mont Blanc appears—still, snowy, and serene.' ),
+		},
+	},
 	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/paragraph/index.js b/packages/block-library/src/paragraph/index.js
@@ -24,7 +24,9 @@ export const settings = {
 	keywords: [ __( 'text' ) ],
 	example: {
 		attributes: {
-			content: __( 'Start writing, no matter what. The water does not flow until the faucet is turned on.' ),
+			content: __( 'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.' ),
+			customFontSize: 28,
+			dropCap: true,
 		},
 	},
 	supports: {

diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js
@@ -20,6 +20,13 @@ export const settings = {
 	title: __( 'Preformatted' ),
 	description: __( 'Add text that respects your spacing and tabs, and also allows styling.' ),
 	icon,
+	example: {
+		attributes: {
+			content: __( 'EXT. XANADU - FAINT DAWN - 1940 (MINIATURE)' ) + '\n' +
+			__( 'Window, very small in the distance, illuminated.' ) + '\n' +
+			__( 'All around this is an almost totally black screen. Now, as the camera moves slowly towards the window which is almost a postage stamp in the frame, other forms appear;' ),
+		},
+	},
 	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
@@ -21,7 +21,14 @@ export const settings = {
 	title: __( 'Quote' ),
 	description: __( 'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar' ),
 	icon,
-	keywords: [ __( 'blockquote' ) ],
+	keywords: [ __( 'blockquote' ), __( 'cite' ) ],
+	example: {
+		attributes: {
+			value: '<p>' + __( 'In quoting others, we cite ourselves.' ) + '</p>',
+			citation: 'Julio Cortázar',
+			className: 'is-style-large',
+		},
+	},
 	styles: [
 		{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
 		{ name: 'large', label: _x( 'Large', 'block style' ) },