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

Add the block example API and use it for inserter and switcher previews #17124

Merged
merged 5 commits into from
Aug 23, 2019
Merged

Add the block example API and use it for inserter and switcher previews #17124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9021a8b
Add the block example API and use it for inserter and switcher previews
youknowriad Aug 21, 2019
900ce6f
Remove "Preview" title
kjellr Aug 21, 2019
1465a39
Make Preview fill available space.
kjellr Aug 21, 2019
fb47636
Move the styles wrapper to the preview wrapper element
youknowriad Aug 22, 2019
65eb555
Align the paragraph example left or right depending on the locale
youknowriad Aug 22, 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
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-preview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,12 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) {
return (
<div
ref={ previewRef }
className={ classnames( 'block-editor-block-preview__container', {
className={ classnames( 'block-editor-block-preview__container editor-styles-wrapper', {
'is-ready': isReady,
} ) }
aria-hidden
>
<Disabled style={ previewStyles } className="block-editor-block-preview__content editor-styles-wrapper">
<Disabled style={ previewStyles } className="block-editor-block-preview__content">
<BlockList />
</Disabled>
</div>
Expand Down
10 changes: 8 additions & 2 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 } from '@wordpress/blocks';
import { getBlockType, cloneBlock, createBlock } from '@wordpress/blocks';

/**
* Internal dependencies
Expand Down Expand Up @@ -122,7 +122,13 @@ function BlockStyles( {
aria-label={ style.label || style.name }
>
<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
<BlockPreview blocks={ cloneBlock( block, { className: styleClassName } ) } />
<BlockPreview
viewportWidth={ 500 }
blocks={ type.example ?
createBlock( block.name, { ...type.example.attributes, className: styleClassName }, type.example.innerBlocks ) :
cloneBlock( block, { className: styleClassName } )
}
/>
</div>
<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
{ style.label || style.name }
Expand Down
13 changes: 8 additions & 5 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 } from '@wordpress/blocks';
import { getBlockType, getPossibleBlockTransformations, switchToBlockType, cloneBlock, createBlock } from '@wordpress/blocks';
import { Component } from '@wordpress/element';
import { DOWN } from '@wordpress/keycodes';
import { withSelect, withDispatch } from '@wordpress/data';
Expand Down Expand Up @@ -43,6 +43,9 @@ export class BlockSwitcher extends Component {
return null;
}

const hoveredBlock = hoveredClassName ? blocks[ 0 ] : null;
const hoveredBlockType = hoveredClassName ? getBlockType( hoveredBlock.name ) : null;

const itemsByName = mapKeys( inserterItems, ( { name } ) => name );
const possibleBlockTransformations = orderBy(
filter(
Expand Down Expand Up @@ -165,11 +168,11 @@ export class BlockSwitcher extends Component {
<div className="block-editor-block-switcher__preview">
<div className="block-editor-block-switcher__preview-title">{ __( 'Preview' ) }</div>
<BlockPreview
className="block-editor-block-switcher__preview-content"
viewportWidth={ 500 }
blocks={
cloneBlock( blocks[ 0 ], {
className: hoveredClassName,
} )
hoveredBlockType.example ?
createBlock( hoveredBlock.name, { ...hoveredBlockType.example.attributes, className: hoveredClassName }, hoveredBlockType.example.innerBlocks ) :
cloneBlock( hoveredBlock, { className: hoveredClassName } )
}
/>
</div>
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-switcher/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@
align-self: stretch;
// For sticky to work we need top
top: 0;
padding: 10px;
}
}

Expand Down
20 changes: 13 additions & 7 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 @@ -263,6 +263,7 @@ export class InserterMenu extends Component {
suggestedItems,
} = this.state;
const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1;
const hoveredItemBlockType = hoveredItem ? getBlockType( hoveredItem.name ) : null;

// Disable reason (no-autofocus): The inserter menu is a modal display, not one which
// is always visible, and one which already incurs this behavior of autoFocus via
Expand Down Expand Up @@ -364,14 +365,19 @@ export class InserterMenu extends Component {
<div className="block-editor-inserter__menu-help-panel">
{ hoveredItem && (
<>
<BlockCard blockType={ getBlockType( hoveredItem.name ) } />
{ isReusableBlock( hoveredItem ) && (
<BlockCard blockType={ hoveredItemBlockType } />
{ ( isReusableBlock( hoveredItem ) || hoveredItemBlockType.example ) && (
<div className="block-editor-inserter__preview">
<div className="block-editor-inserter__preview-title">{ __( 'Preview' ) }</div>
<BlockPreview
className="block-editor-inserter__preview-content"
blocks={ createBlock( hoveredItem.name, hoveredItem.initialAttributes ) }
/>
<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
) }
/>
</div>
</div>
) }
</>
Expand Down
21 changes: 16 additions & 5 deletions packages/block-editor/src/components/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,19 +154,21 @@ $block-inserter-search-height: 38px;
overflow-y: auto;

@include break-medium {
display: block;
display: flex;
flex-direction: column;
}

.block-editor-block-card {
padding-bottom: 20px;
margin-bottom: 10px;
margin-bottom: 20px;
border-bottom: $border-width solid $light-gray-500;
@include edit-post__fade-in-animation();
}
}

.block-editor-inserter__preview-title {
margin-bottom: 10px;
.block-editor-inserter__preview {
display: flex;
flex-grow: 2;
}
}

.block-editor-inserter__menu-help-panel-no-block {
Expand Down Expand Up @@ -207,3 +209,12 @@ $block-inserter-search-height: 38px;
font-weight: 600;
margin-bottom: 20px;
}

.block-editor-inserter__preview-content {
border: $border-width solid $light-gray-500;
border-radius: $radius-round-rectangle;
min-height: 150px;
padding: 10px;
display: grid;
flex-grow: 2;
}
5 changes: 5 additions & 0 deletions packages/block-library/src/paragraph/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ export const settings = {
description: __( 'Start with the building block of all narrative.' ),
icon,
keywords: [ __( 'text' ) ],
example: {
Copy link
Member

Choose a reason for hiding this comment

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

I applied Needs Dev Note label as this is block API related and introduces a completely new field. It should also get properly documented in tutorials and related docs.

attributes: {
content: __( 'Start writing, no matter what. The water does not flow until the faucet is turned on.' ),
},
},
supports: {
className: false,
},
Expand Down