Add block examples for all core blocks (#17493)

WordPress · Sep 30, 2019 · 47927ab · 47927ab
1 parent 20e15c9
commit 47927ab
Show file tree

Hide file tree

Showing 30 changed files with 359 additions and 15 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';
@@ -396,11 +397,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',
+			backgroundColor: 'vivid-green-cyan',
+			text: __( 'Call to Action' ),
+		},
+	},
 	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://upload.wikimedia.org/wikipedia/commons/9/95/Windbuchencom.jpg',
+						},
+					},
+					{
+						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://upload.wikimedia.org/wikipedia/commons/9/95/Windbuchencom.jpg',
+		},
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					customFontSize: 48,
+					content: __( '<strong>Snow Patrol</strong>' ),
+					align: 'center',
+				},
+			},
+		],
+	},
 	transforms,
 	save,
 	edit,

diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js
@@ -22,6 +22,15 @@ export const settings = {
 	description: __( 'Display multiple images in a rich gallery.' ),
 	icon,
 	keywords: [ __( 'images' ), __( 'photos' ) ],
+	example: {
+		attributes: {
+			columns: 2,
+			images: [
+				{ url: 'https://upload.wikimedia.org/wikipedia/commons/c/c3/Glacial_lakes%2C_Bhutan.jpg' },
+				{ url: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Sediment_off_the_Yucatan_Peninsula.jpg' },
+			],
+		},
+	},
 	supports: {
 		align: true,
 	},

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: {
+					customTextColor: '#cf2e2e',
+					fontSize: 'large',
+					content: __( 'One.' ),
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					customTextColor: '#ff6900',
+					fontSize: 'large',
+					content: __( 'Two.' ),
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					customTextColor: '#fcb900',
+					fontSize: 'large',
+					content: __( 'Three.' ),
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					customTextColor: '#00d084',
+					fontSize: 'large',
+					content: __( 'Four.' ),
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					customTextColor: '#0693e3',
+					fontSize: 'large',
+					content: __( 'Five.' ),
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					customTextColor: '#9b51e0',
+					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: 2,
+		},
+	},
 	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://upload.wikimedia.org/wikipedia/commons/1/15/MtBlanc1.JPG',
+			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>Alice.</li><li>The White Rabbit.</li><li>The Cheshire Cat.</li><li>The Mad Hatter.</li><li>The Queen of Hearts.</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,26 @@ export const settings = {
 		align: [ 'wide', 'full' ],
 		html: false,
 	},
+	example: {
+		attributes: {
+			mediaType: 'image',
+			mediaUrl: 'https://upload.wikimedia.org/wikipedia/commons/d/d4/Biologia_Centrali-Americana_-_Cantorchilus_semibadius_1902.jpg',
+		},
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: __( 'The wren<br>Earns his living<br>Noiselessly.' ),
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: __( '— Kobayashi Issa (一茶)' ),
+				},
+			},
+		],
+	},
 	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,