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.

Sign up for GitHub

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

Jump to bottom

Add block examples for all core blocks #17493

Merged
merged 27 commits into from
Sep 30, 2019
Merged

Add block examples for all core blocks #17493

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
08a039f
Add block examples for all core blocks
youknowriad Sep 20, 2019
55990a2
Update "Quote" example.
mtias Sep 23, 2019
53eaf23
Fix "Group" example.
mtias Sep 23, 2019
5b99982
Use a cover image for "Cover"; update heading text, and more fixes.
mtias Sep 23, 2019
e4ad0fe
Use Don Quijote excerpt for paragraph block with drop-cap.
mtias Sep 23, 2019
56018b3
Cover image could use a bit more personality.
mtias Sep 23, 2019
0584613
Use "marquee" for the custom HTML block.
mtias Sep 23, 2019
2b125f4
Make "download WordPress" text translatable.
mtias Sep 23, 2019
2427fad
Shelley.
mtias Sep 23, 2019
d971482
Elizabeth Barrett Browning.
mtias Sep 23, 2019
52a8aa1
Add instructions for creating a block in the "Code" block.
mtias Sep 23, 2019
9d7690d
Add Citizen Kane opening script lines for "preformatted".
mtias Sep 23, 2019
90e45bc
Use different colorful preview for "Group" block.
mtias Sep 23, 2019
928ea5b
Show "columns" in a better light.
mtias Sep 23, 2019
5b9237b
Add example for "Gallery" block.
mtias Sep 23, 2019
a715403
Update button example.
mtias Sep 23, 2019
482ba4f
Alice in Wonderland characters.
mtias Sep 23, 2019
1790fbf
List: Example: Condense & optimise for rhythm
mcsf Sep 23, 2019
dbaf52b
Media & Text: Example: Wren -- a haiku.
mcsf Sep 23, 2019
3bd707a
Use strong markup for cover image text.
mtias Sep 23, 2019
6468804
Heading: Example: Keep H-level below 1
mcsf Sep 23, 2019
6472d1c
Base64 encoded images that I pulled from Pexels. Also revised the cop…
mapk Sep 26, 2019
b2743d2
Revert "Base64 encoded images that I pulled from Pexels. Also revised…
youknowriad Sep 30, 2019
44b4146
Use custom colors instead of the color palette
youknowriad Sep 30, 2019
8d0ff3d
Update images to be public domain from Wikimedia.
jasmussen Sep 30, 2019
4ab9f3f
Update the video.
jasmussen Sep 30, 2019
a57bac8
Remove the video for now.
jasmussen Sep 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions packages/block-editor/src/components/block-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
7 changes: 5 additions & 2 deletions packages/block-editor/src/components/block-switcher/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 } )
}
/>
Expand Down
11 changes: 6 additions & 5 deletions packages/block-editor/src/components/inserter/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions packages/block-library/src/button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
mtias marked this conversation as resolved.
Show resolved Hide resolved
},
},
supports: {
align: true,
alignWide: false,
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/calendar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,6 @@ export const settings = {
supports: {
align: true,
},
example: {},
edit,
};
5 changes: 5 additions & 0 deletions packages/block-library/src/code/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand Down
39 changes: 39 additions & 0 deletions packages/block-library/src/columns/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ),
},
},
],
},
],
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs overflow taken care of.

Captura de ecrã 2019-09-23, às 14 19 05

deprecated,
edit,
save,
Expand Down
16 changes: 16 additions & 0 deletions packages/block-library/src/cover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
28 changes: 27 additions & 1 deletion packages/block-library/src/group/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
mtias marked this conversation as resolved.
Show resolved Hide resolved
height: 100,
},
},
],
},
supports: {
align: [ 'wide', 'full' ],
anchor: true,
html: false,
},

transforms: {
from: [
{
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/heading/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ export const settings = {
className: false,
anchor: true,
},
example: {
attributes: {
content: __( 'Hello block editor!' ),
},
},
transforms,
deprecated,
merge( attributes, attributesToMerge ) {
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/html/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
7 changes: 7 additions & 0 deletions packages/block-library/src/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should bundle any image we use as well.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

},
},
styles: [
{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
{ name: 'circle-mask', label: _x( 'Circle Mask', 'block style' ) },
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
14 changes: 14 additions & 0 deletions packages/block-library/src/media-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/more/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const settings = {
html: false,
multiple: false,
},
example: {},
transforms,
edit,
save,
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/nextpage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const settings = {
className: false,
html: false,
},
example: {},
transforms,
edit,
save,
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/preformatted/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/pullquote/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) },
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/quote/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) },
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/rss/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,10 @@ export const settings = {
align: true,
html: false,
},
example: {
attributes: {
feedURL: 'https://wordpress.org',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

},
},
edit,
};
1 change: 1 addition & 0 deletions packages/block-library/src/search/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,6 @@ export const settings = {
supports: {
align: true,
},
example: {},
edit,
};
7 changes: 7 additions & 0 deletions packages/block-library/src/separator/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) },
Expand Down
7 changes: 7 additions & 0 deletions packages/block-library/src/social-links/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) },
Expand Down
Loading