From 9021a8b9423c009e116bd5cf55cc33f995d8ab55 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 21 Aug 2019 11:45:08 +0100 Subject: [PATCH 1/5] Add the block example API and use it for inserter and switcher previews --- .../src/components/block-styles/index.js | 10 ++++++++-- .../src/components/block-switcher/index.js | 13 ++++++++----- .../src/components/block-switcher/style.scss | 1 + .../src/components/inserter/menu.js | 19 +++++++++++++------ .../src/components/inserter/style.scss | 8 ++++++++ packages/block-library/src/paragraph/index.js | 6 ++++++ 6 files changed, 44 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js index c5f7797aa1db8..3adc979920739 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 } from '@wordpress/blocks'; +import { getBlockType, cloneBlock, createBlock } from '@wordpress/blocks'; /** * Internal dependencies @@ -122,7 +122,13 @@ function BlockStyles( { aria-label={ style.label || style.name } >
- +
{ style.label || style.name } diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 9fe7c5c9db5cb..36e920d9e48c4 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 } 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'; @@ -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( @@ -165,11 +168,11 @@ export class BlockSwitcher extends Component {
{ __( 'Preview' ) }
diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 17a4d16e100a8..c6acd359abd2f 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -118,6 +118,7 @@ align-self: stretch; // For sticky to work we need top top: 0; + padding: 10px; } } diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 6714a27f6c69d..e9059701290ae 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -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 @@ -364,14 +365,20 @@ export class InserterMenu extends Component {
{ hoveredItem && ( <> - - { isReusableBlock( hoveredItem ) && ( + + { ( isReusableBlock( hoveredItem ) || hoveredItemBlockType.example ) && (
{ __( 'Preview' ) }
- +
+ +
) } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index a415e13ccb547..471d997a2fcbc 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -207,3 +207,11 @@ $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; +} diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index 5ef563ce55bf3..481c3312bc5fe 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -22,6 +22,12 @@ export const settings = { description: __( 'Start with the building block of all narrative.' ), icon, keywords: [ __( 'text' ) ], + example: { + attributes: { + align: 'center', + content: __( 'Start writing, no matter what. The water does not flow until the faucet is turned on.' ), + }, + }, supports: { className: false, }, From 900ce6f59c5f6ea3c3dd8c2ef0cdc35fe7ec576c Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 21 Aug 2019 09:11:34 -0400 Subject: [PATCH 2/5] Remove "Preview" title --- packages/block-editor/src/components/inserter/menu.js | 1 - packages/block-editor/src/components/inserter/style.scss | 4 ---- 2 files changed, 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index e9059701290ae..0d555633d91a9 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -368,7 +368,6 @@ export class InserterMenu extends Component { { ( isReusableBlock( hoveredItem ) || hoveredItemBlockType.example ) && (
-
{ __( 'Preview' ) }
Date: Wed, 21 Aug 2019 09:12:17 -0400 Subject: [PATCH 3/5] Make Preview fill available space. --- .../block-editor/src/components/inserter/style.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index bfa126532f8a8..b8834e5233ac1 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -154,15 +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 { + display: flex; + flex-grow: 2; + } } .block-editor-inserter__menu-help-panel-no-block { @@ -210,4 +216,5 @@ $block-inserter-search-height: 38px; min-height: 150px; padding: 10px; display: grid; + flex-grow: 2; } From fb47636efd4ba72621871bb8094d4c0d1b6ddae8 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Aug 2019 09:38:27 +0100 Subject: [PATCH 4/5] Move the styles wrapper to the preview wrapper element --- packages/block-editor/src/components/block-preview/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index 2b0a6133f8d2a..8021333b4a0e2 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/packages/block-editor/src/components/block-preview/index.js @@ -86,12 +86,12 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) { return (
- +
From 65eb555afc394a3970440855489f84ca2c5a6e72 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Aug 2019 09:48:49 +0100 Subject: [PATCH 5/5] Align the paragraph example left or right depending on the locale --- packages/block-library/src/paragraph/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index 481c3312bc5fe..4221e72c85c18 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -24,7 +24,6 @@ export const settings = { keywords: [ __( 'text' ) ], example: { attributes: { - align: 'center', content: __( 'Start writing, no matter what. The water does not flow until the faucet is turned on.' ), }, },