From 08a039f92ac5ba123b55683743a120e6ea52b8b3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 20 Sep 2019 09:38:41 +0100 Subject: [PATCH] Add block examples for all core blocks --- .../src/components/block-styles/index.js | 12 ++-- .../src/components/block-switcher/index.js | 7 +- .../src/components/inserter/menu.js | 11 +-- packages/block-library/src/button/index.js | 7 ++ packages/block-library/src/calendar/index.js | 1 + packages/block-library/src/code/index.js | 5 ++ packages/block-library/src/columns/index.js | 39 +++++++++++ packages/block-library/src/cover/index.js | 16 +++++ packages/block-library/src/group/index.js | 28 +++++++- packages/block-library/src/heading/index.js | 5 ++ packages/block-library/src/html/index.js | 5 ++ packages/block-library/src/image/index.js | 7 ++ packages/block-library/src/list/index.js | 5 ++ .../block-library/src/media-text/index.js | 14 ++++ packages/block-library/src/more/index.js | 1 + packages/block-library/src/nextpage/index.js | 1 + .../block-library/src/preformatted/index.js | 5 ++ packages/block-library/src/pullquote/index.js | 6 ++ packages/block-library/src/quote/index.js | 6 ++ packages/block-library/src/rss/index.js | 5 ++ packages/block-library/src/search/index.js | 1 + packages/block-library/src/separator/index.js | 7 ++ .../block-library/src/social-links/index.js | 7 ++ packages/block-library/src/table/index.js | 70 +++++++++++++++++++ packages/block-library/src/verse/index.js | 7 ++ packages/block-library/src/video/index.js | 6 ++ packages/blocks/README.md | 13 ++++ packages/blocks/src/api/factory.js | 15 ++++ packages/blocks/src/api/index.js | 1 + 29 files changed, 301 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js index 3adc979920739..25a2fd7b235cd 100644 --- 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( {
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 36e920d9e48c4..4f3510e4ebbb2 100644 --- 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 index a6b23c124e581..fc3905f59d035 100644 --- 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 {
diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index 80f10dd9672bb..a4d3a7c65314f 100644 --- 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 index f43f5c288f446..b63eb51188afe 100644 --- 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 index 1430dc7f27ad7..b627e82a56a3c 100644 --- 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: '

' + __( 'Welcome to the world of blocks.' ) + '

', + }, + }, supports: { html: false, }, diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index e4a0d7b4b08e9..760b60f4e72f1 100644 --- 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' ) + '
' + + __( 'Change' ) + '
' + + __( 'Share' ), + }, + }, + ], + }, + ], + }, deprecated, edit, save, diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js index 2a0727283dceb..d3863a15e5cbc 100644 --- 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.' ) + '
' + + __( 'The freedom to change.' ) + '
' + + __( '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 index 530dc210865ba..81178a53a46cb 100644 --- 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 index 1dc024193e4a7..b85575bd3d730 100644 --- 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 index bcfec8fb79f84..52448cd29458a 100644 --- 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: '

' + __( 'Welcome to the world of blocks.' ) + '

', + }, + }, supports: { customClassName: false, className: false, diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index 210450c67b6d2..9fb0ecf8e33b2 100644 --- 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 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 index d7d857502b1ad..ad021a151828a 100644 --- 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: '
  • 5.2 – Jaco Pastorius
  • 5.1 – Betty Carter
  • 5.0 – Bebo Valdés
    • ', + }, + }, 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 index b20dc9693bafa..8efd50c11e271 100644 --- 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 index 9e73bdccb405b..d61cb2001ff49 100644 --- 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 index 99524951cecd3..9f39f881d83de 100644 --- 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 index eee13ab37f6f7..4cc9c2158faea 100644 --- 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 index 944f7562385b5..c3dfcdeed9b95 100644 --- 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: '

    ' + __( 'One of the hardest things to do in technology is disrupt yourself.' ) + '

    ', + 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 index 8eb2a88be9394..125dcbbcc3fa4 100644 --- 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: '

    ' + __( 'One of the hardest things to do in technology is disrupt yourself.' ) + '

    ', + 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 index 46260d7751d02..3ae196e75aea8 100644 --- 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 index 9023ccde6979e..eb9ab982e831f 100644 --- 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 index a1d7eb8bd08e5..37948d1d727ae 100644 --- 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 index 1e9df3194865a..651ef3ca9f1e0 100644 --- 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' ) }, diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js index b8bd0893e87ec..cb4e69f1988fe 100644 --- a/packages/block-library/src/table/index.js +++ b/packages/block-library/src/table/index.js @@ -21,6 +21,76 @@ export const settings = { title: __( 'Table' ), description: __( 'Insert a table — perfect for sharing charts and data.' ), icon, + example: { + attributes: { + head: [ { + cells: [ + { + content: __( 'Version' ), + tag: 'th', + }, + { + content: __( 'Jazz Musician' ), + tag: 'th', + }, + { + content: __( 'Release Date' ), + tag: 'th', + }, + ], + } ], + body: [ + { + cells: [ + { + content: '5.2', + tag: 'td', + }, + { + content: 'Jaco Pastorius', + tag: 'td', + }, + { + content: __( 'May 7, 2019' ), + tag: 'td', + }, + ], + }, + { + cells: [ + { + content: '5.1', + tag: 'td', + }, + { + content: 'Betty Carter', + tag: 'td', + }, + { + content: __( 'February 21, 2019' ), + tag: 'td', + }, + ], + }, + { + cells: [ + { + content: '5.0', + tag: 'td', + }, + { + content: 'Bebo Valdés', + tag: 'td', + }, + { + content: __( 'December 6, 2018' ), + tag: 'td', + }, + ], + }, + ], + }, + }, styles: [ { name: 'regular', label: _x( 'Default', 'block style' ), isDefault: true }, { name: 'stripes', label: __( 'Stripes' ) }, diff --git a/packages/block-library/src/verse/index.js b/packages/block-library/src/verse/index.js index ffabff1dba480..1a3709ec86855 100644 --- a/packages/block-library/src/verse/index.js +++ b/packages/block-library/src/verse/index.js @@ -21,6 +21,13 @@ export const settings = { title: __( 'Verse' ), description: __( 'Insert poetry. Use special spacing formats. Or quote song lyrics.' ), icon, + example: { + attributes: { + content: __( 'The freedom to build.' ) + '
    ' + + __( 'The freedom to change.' ) + '
    ' + + __( 'The freedom to share.' ), + }, + }, keywords: [ __( 'poetry' ) ], transforms, deprecated, diff --git a/packages/block-library/src/video/index.js b/packages/block-library/src/video/index.js index 3eea3386b64e1..59930af2ae260 100644 --- a/packages/block-library/src/video/index.js +++ b/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', + caption: __( 'Block Manager' ), + }, + }, transforms, supports: { align: true, diff --git a/packages/blocks/README.md b/packages/blocks/README.md index 26e4ad5624edf..1af3f49adef88 100644 --- a/packages/blocks/README.md +++ b/packages/blocks/README.md @@ -273,6 +273,19 @@ _Returns_ - `string`: The block's default class. +# **getBlockFromExample** + +Create a block object from the example API. + +_Parameters_ + +- _name_ `string`: +- _example_ `Object`: + +_Returns_ + +- `Object`: block. + # **getBlockMenuDefaultClassName** Returns the block's default menu item classname from its name. diff --git a/packages/blocks/src/api/factory.js b/packages/blocks/src/api/factory.js index 8d659b1c87886..fae2e0e4da9c0 100644 --- a/packages/blocks/src/api/factory.js +++ b/packages/blocks/src/api/factory.js @@ -15,6 +15,7 @@ import { uniq, isFunction, isEmpty, + map, } from 'lodash'; /** @@ -461,3 +462,17 @@ export function switchToBlockType( blocks, name ) { return applyFilters( 'blocks.switchToBlockType.transformedBlock', transformedBlock, blocks ); } ); } + +/** + * Create a block object from the example API. + * + * @param {string} name + * @param {Object} example + * + * @return {Object} block. + */ +export const getBlockFromExample = ( name, example ) => { + return createBlock( name, example.attributes, map( + example.innerBlocks, ( innerBlock ) => getBlockFromExample( innerBlock.name, innerBlock ) + ) ); +}; diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js index 68e60ed43952b..62074213559e6 100644 --- a/packages/blocks/src/api/index.js +++ b/packages/blocks/src/api/index.js @@ -5,6 +5,7 @@ export { switchToBlockType, getBlockTransforms, findTransform, + getBlockFromExample, } from './factory'; export { default as parse,