From 26b3dc050b7c6fc5c805b81f86285fcce28df090 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 30 Jul 2019 14:14:46 +0100 Subject: [PATCH 01/14] Add a help panel to the inserter available in all blocks --- .../src/components/block-card/index.js | 18 +++++++ .../src/components/block-card/style.scss | 34 ++++++++++++++ .../src/components/block-inspector/index.js | 10 +--- .../src/components/block-inspector/style.scss | 38 --------------- .../src/components/block-preview/style.scss | 32 ------------- .../src/components/inserter/menu.js | 47 +++++++++++++++---- .../src/components/inserter/style.scss | 31 ++++++++++-- packages/block-editor/src/style.scss | 1 + 8 files changed, 120 insertions(+), 91 deletions(-) create mode 100644 packages/block-editor/src/components/block-card/index.js create mode 100644 packages/block-editor/src/components/block-card/style.scss diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js new file mode 100644 index 00000000000000..f060612622804e --- /dev/null +++ b/packages/block-editor/src/components/block-card/index.js @@ -0,0 +1,18 @@ +/** + * Internal dependencies + */ +import BlockIcon from '../block-icon'; + +function BlockCard( { blockType } ) { + return ( +
+ +
+
{ blockType.title }
+
{ blockType.description }
+
+
+ ); +} + +export default BlockCard; diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss new file mode 100644 index 00000000000000..6ac54020dd80a3 --- /dev/null +++ b/packages/block-editor/src/components/block-card/style.scss @@ -0,0 +1,34 @@ + +.block-editor-block-card { + display: flex; + align-items: flex-start; +} + +.block-editor-block-card__icon { + border: $border-width solid $light-gray-700; + padding: 7px; + margin-right: 10px; + height: 36px; + width: 36px; +} + +.block-editor-block-card__content { + flex-grow: 1; +} + +.block-editor-block-card__title { + font-weight: 500; + margin-bottom: 5px; +} + +.block-editor-block-card__description { + font-size: $default-font-size; +} + +.block-editor-block-card .block-editor-block-icon { + margin-left: -2px; + margin-right: 10px; + padding: 0 3px; + width: $icon-button-size; + height: $icon-button-size-small; +} diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index e04dbcbd932be1..ea18d7838cca4f 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -15,7 +15,7 @@ import { withSelect } from '@wordpress/data'; * Internal dependencies */ import SkipToSelectedBlock from '../skip-to-selected-block'; -import BlockIcon from '../block-icon'; +import BlockCard from '../block-card'; import InspectorControls from '../inspector-controls'; import InspectorAdvancedControls from '../inspector-advanced-controls'; import BlockStyles from '../block-styles'; @@ -51,13 +51,7 @@ const BlockInspector = ( { return ( <> -
- -
-
{ blockType.title }
-
{ blockType.description }
-
-
+ { hasBlockStyles && (
div { - font-family: $editor-font; - } - - &:not(.is-tall-preview) { - // Vertical alignment. - margin-top: 50%; - } - } - - .block-editor-block-preview__title { - margin-bottom: 10px; - color: $dark-gray-300; - } -} - // These rules ensure the preview scales smoothly regardless of the container size. .block-editor-block-preview__container { // In the component, a top padding is provided as an inline style to provid an aspect-ratio. diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 0b5f47c68af256..922d461d950568 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -22,12 +22,17 @@ import scrollIntoView from 'dom-scroll-into-view'; */ import { __, _n, _x, sprintf } from '@wordpress/i18n'; import { Component, createRef } from '@wordpress/element'; -import { withSpokenMessages, PanelBody } from '@wordpress/components'; +import { + PanelBody, + ToggleControl, + withSpokenMessages, +} from '@wordpress/components'; import { getCategories, isReusableBlock, createBlock, isUnmodifiedDefaultBlock, + getBlockType, } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose'; @@ -39,6 +44,7 @@ import { addQueryArgs } from '@wordpress/url'; */ import BlockPreview from '../block-preview'; import BlockTypesList from '../block-types-list'; +import BlockCard from '../block-card'; import ChildBlocks from './child-blocks'; const MAX_SUGGESTED_ITEMS = 9; @@ -102,9 +108,11 @@ export class InserterMenu extends Component { reusableItems: [], itemsPerCategory: {}, openPanels: [ 'suggested' ], + showHelpPanel: true, }; this.onChangeSearchInput = this.onChangeSearchInput.bind( this ); this.onHover = this.onHover.bind( this ); + this.onToggleHelpPanel = this.onToggleHelpPanel.bind( this ); this.panels = {}; this.inserterResults = createRef(); } @@ -125,6 +133,12 @@ export class InserterMenu extends Component { this.filter( event.target.value ); } + onToggleHelpPanel() { + this.setState( ( state ) => ( { + showHelpPanel: ! state.showHelpPanel, + } ) ); + } + onHover( item ) { this.setState( { hoveredItem: item, @@ -254,6 +268,7 @@ export class InserterMenu extends Component { openPanels, reusableItems, suggestedItems, + showHelpPanel, } = this.state; const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1; @@ -349,15 +364,29 @@ export class InserterMenu extends Component { ) }
- { hoveredItem && isReusableBlock( hoveredItem ) && -
-
{ __( 'Preview' ) }
- +
+ +
+ + { showHelpPanel && hoveredItem && ( +
+ + { + isReusableBlock( hoveredItem ) && +
+
{ __( 'Preview' ) }
+ +
+ }
- } + ) }
); /* eslint-enable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */ diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 4cc764ed0861a6..b9005796afd5a8 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -130,7 +130,8 @@ $block-inserter-search-height: 38px; } } -.block-editor-inserter__preview { +.block-editor-inserter__menu-help-panel { + display: none; border: $border-width solid $light-gray-500; box-shadow: $shadow-popover; background: $white; @@ -139,16 +140,38 @@ $block-inserter-search-height: 38px; top: -1px; bottom: -1px; width: 300px; - height: auto; padding: 10px; - display: none; @include break-medium { display: block; } + + .block-editor-block-card { + padding-bottom: 10px; + margin-bottom: 10px; + border-bottom: $border-width solid $light-gray-500; + } } .block-editor-inserter__preview-title { margin-bottom: 10px; - color: $dark-gray-300; +} + +.block-editor-inserter__menu-footer { + display: none; + justify-content: flex-end; + padding: 15px 10px; + border-top: $border-width solid $light-gray-500; + + @include break-medium { + display: flex; + } + + .components-base-control__field { + margin: 0; + flex-direction: row-reverse; + label { + margin-right: 10px; + } + } } diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 8083cf0cbc6bf5..644083ea80a810 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -3,6 +3,7 @@ @import "./components/block-inspector/style.scss"; @import "./components/block-list/style.scss"; @import "./components/block-list-appender/style.scss"; +@import "./components/block-card/style.scss"; @import "./components/block-compare/style.scss"; @import "./components/block-mover/style.scss"; @import "./components/block-navigation/style.scss"; From ba6db37529f8c5d964d1b672a48ac703510fe1c6 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 1 Aug 2019 11:07:15 +0100 Subject: [PATCH 02/14] Show a tip when no block is hovered --- .../src/components/inserter/menu.js | 45 +++++++++++---- .../src/components/inserter/style.scss | 55 ++++++++++++++----- 2 files changed, 74 insertions(+), 26 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 922d461d950568..b7d54f54bfcc6c 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -26,6 +26,7 @@ import { PanelBody, ToggleControl, withSpokenMessages, + Notice, } from '@wordpress/components'; import { getCategories, @@ -136,10 +137,15 @@ export class InserterMenu extends Component { onToggleHelpPanel() { this.setState( ( state ) => ( { showHelpPanel: ! state.showHelpPanel, + hoveredItem: null, } ) ); } onHover( item ) { + if ( ! item ) { + return; + } + this.setState( { hoveredItem: item, } ); @@ -372,19 +378,36 @@ export class InserterMenu extends Component { /> - { showHelpPanel && hoveredItem && ( + { showHelpPanel && (
- - { - isReusableBlock( hoveredItem ) && -
-
{ __( 'Preview' ) }
- + { hoveredItem && ( + <> + + { isReusableBlock( hoveredItem ) && ( +
+
{ __( 'Preview' ) }
+ +
+ ) } + + ) } + { ! hoveredItem && ( +
+

Tip

+ + { __( + 'Blocks are the basis of all content within the editor.' + + 'This library contains blocks for text, headings, images, lists and more!' + ) } + +
+ { __( 'Hover over a block in the inserter for more details.' ) } +
- } + ) }
) }
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index b9005796afd5a8..7b46bcae7aed79 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -130,6 +130,25 @@ $block-inserter-search-height: 38px; } } +.block-editor-inserter__menu-footer { + display: none; + justify-content: flex-end; + padding: 15px 10px; + border-top: $border-width solid $light-gray-500; + + @include break-medium { + display: flex; + } + + .components-base-control__field { + margin: 0; + flex-direction: row-reverse; + label { + margin-right: 10px; + } + } +} + .block-editor-inserter__menu-help-panel { display: none; border: $border-width solid $light-gray-500; @@ -140,14 +159,15 @@ $block-inserter-search-height: 38px; top: -1px; bottom: -1px; width: 300px; - padding: 10px; + padding: 20px; + overflow: auto; @include break-medium { display: block; } .block-editor-block-card { - padding-bottom: 10px; + padding-bottom: 20px; margin-bottom: 10px; border-bottom: $border-width solid $light-gray-500; } @@ -157,21 +177,26 @@ $block-inserter-search-height: 38px; margin-bottom: 10px; } -.block-editor-inserter__menu-footer { - display: none; - justify-content: flex-end; - padding: 15px 10px; - border-top: $border-width solid $light-gray-500; +.block-editor-inserter__menu-help-panel-no-block { + display: flex; + height: 100%; + flex-direction: column; - @include break-medium { - display: flex; + .components-notice { + margin: 0; } - .components-base-control__field { - margin: 0; - flex-direction: row-reverse; - label { - margin-right: 10px; - } + h4 { + margin-top: 0; } } + +.block-editor-inserter__menu-help-panel-hover-area { + flex-grow: 1; + margin-top: 20px; + padding: 20px; + border: 1px dotted $light-gray-500; + display: flex; + align-items: center; + text-align: center; +} From 0d19e5a0e8e3f14b42cb8e48712cd49fc913dd87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Thu, 1 Aug 2019 14:40:45 +0200 Subject: [PATCH 03/14] Use the inserter panel to describe content blocks. Tips go below. --- .../block-editor/src/components/inserter/menu.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index b7d54f54bfcc6c..d4c0b2408b96c4 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -396,16 +396,18 @@ export class InserterMenu extends Component { ) } { ! hoveredItem && (
-

Tip

- +

Content Blocks

+

{ __( - 'Blocks are the basis of all content within the editor.' + + 'Blocks are the basis of all content within the editor. ' + 'This library contains blocks for text, headings, images, lists and more!' ) } +

+ + { __( + 'You can quickly insert blocks by typing "/" in the editor.' + ) } -
- { __( 'Hover over a block in the inserter for more details.' ) } -
) } From a521e76136eed30f3af43b5fe28089c21647ad82 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 1 Aug 2019 14:49:44 +0100 Subject: [PATCH 04/14] Move the inserter help panel toggle to the options modal --- packages/block-editor/README.md | 1 + .../src/components/inserter/menu.js | 25 +++---------------- .../src/components/inserter/style.scss | 19 -------------- packages/block-editor/src/store/defaults.js | 2 ++ .../src/components/options-modal/index.js | 2 ++ .../options-modal/options/enable-feature.js | 24 ++++++++++++++++++ .../components/options-modal/options/index.js | 1 + packages/edit-post/src/editor.js | 5 ++++ packages/edit-post/src/store/defaults.js | 1 + .../editor/src/components/provider/index.js | 1 + 10 files changed, 41 insertions(+), 40 deletions(-) create mode 100644 packages/edit-post/src/components/options-modal/options/enable-feature.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 1d230d45fc3a23..a5a5ed24f0014f 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -387,6 +387,7 @@ The default editor settings bodyPlaceholder string Empty post placeholder titlePlaceholder string Empty title placeholder codeEditingEnabled string Whether or not the user can switch to the code editor + showInserterHelpPanel boolean Whether or not the inserter help panel is shown **experimentalCanUserUseUnfilteredHTML string Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes. **experimentalEnableLegacyWidgetBlock boolean Whether the user has enabled the Legacy Widget Block \_\_experimentalEnableMenuBlock boolean Whether the user has enabled the Menu Block diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index d4c0b2408b96c4..7d67be31cc0612 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -24,7 +24,6 @@ import { __, _n, _x, sprintf } from '@wordpress/i18n'; import { Component, createRef } from '@wordpress/element'; import { PanelBody, - ToggleControl, withSpokenMessages, Notice, } from '@wordpress/components'; @@ -109,11 +108,9 @@ export class InserterMenu extends Component { reusableItems: [], itemsPerCategory: {}, openPanels: [ 'suggested' ], - showHelpPanel: true, }; this.onChangeSearchInput = this.onChangeSearchInput.bind( this ); this.onHover = this.onHover.bind( this ); - this.onToggleHelpPanel = this.onToggleHelpPanel.bind( this ); this.panels = {}; this.inserterResults = createRef(); } @@ -134,13 +131,6 @@ export class InserterMenu extends Component { this.filter( event.target.value ); } - onToggleHelpPanel() { - this.setState( ( state ) => ( { - showHelpPanel: ! state.showHelpPanel, - hoveredItem: null, - } ) ); - } - onHover( item ) { if ( ! item ) { return; @@ -266,7 +256,7 @@ export class InserterMenu extends Component { } render() { - const { instanceId, onSelect, rootClientId } = this.props; + const { instanceId, onSelect, rootClientId, showInserterHelpPanel } = this.props; const { childItems, hoveredItem, @@ -274,7 +264,6 @@ export class InserterMenu extends Component { openPanels, reusableItems, suggestedItems, - showHelpPanel, } = this.state; const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1; @@ -370,15 +359,7 @@ export class InserterMenu extends Component { ) } -
- -
- - { showHelpPanel && ( + { showInserterHelpPanel && (
{ hoveredItem && ( <> @@ -425,6 +406,7 @@ export default compose( getBlockName, getBlockRootClientId, getBlockSelectionEnd, + getSettings, } = select( 'core/block-editor' ); const { getChildBlockNames, @@ -442,6 +424,7 @@ export default compose( return { rootChildBlocks: getChildBlockNames( destinationRootBlockName ), items: getInserterItems( destinationRootClientId ), + showInserterHelpPanel: getSettings().showInserterHelpPanel, destinationRootClientId, }; } ), diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 7b46bcae7aed79..5a97fba8c7d3f3 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -130,25 +130,6 @@ $block-inserter-search-height: 38px; } } -.block-editor-inserter__menu-footer { - display: none; - justify-content: flex-end; - padding: 15px 10px; - border-top: $border-width solid $light-gray-500; - - @include break-medium { - display: flex; - } - - .components-base-control__field { - margin: 0; - flex-direction: row-reverse; - label { - margin-right: 10px; - } - } -} - .block-editor-inserter__menu-help-panel { display: none; border: $border-width solid $light-gray-500; diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 885a8b79f7fb06..2e7cb1f59cb78e 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -27,6 +27,7 @@ export const PREFERENCES_DEFAULTS = { * bodyPlaceholder string Empty post placeholder * titlePlaceholder string Empty title placeholder * codeEditingEnabled string Whether or not the user can switch to the code editor + * showInserterHelpPanel boolean Whether or not the inserter help panel is shown * __experimentalCanUserUseUnfilteredHTML string Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes. * __experimentalEnableLegacyWidgetBlock boolean Whether the user has enabled the Legacy Widget Block * __experimentalEnableMenuBlock boolean Whether the user has enabled the Menu Block @@ -145,6 +146,7 @@ export const SETTINGS_DEFAULTS = { availableLegacyWidgets: {}, hasPermissionsToManageWidgets: false, + showInserterHelpPanel: true, __experimentalCanUserUseUnfilteredHTML: false, __experimentalEnableLegacyWidgetBlock: false, __experimentalEnableMenuBlock: false, diff --git a/packages/edit-post/src/components/options-modal/index.js b/packages/edit-post/src/components/options-modal/index.js index bb3f613539062f..1cfe8326327554 100644 --- a/packages/edit-post/src/components/options-modal/index.js +++ b/packages/edit-post/src/components/options-modal/index.js @@ -27,6 +27,7 @@ import { EnablePublishSidebarOption, EnableTipsOption, EnablePanelOption, + EnableFeature, } from './options'; import MetaBoxesSection from './meta-boxes-section'; @@ -47,6 +48,7 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
+
diff --git a/packages/edit-post/src/components/options-modal/options/enable-feature.js b/packages/edit-post/src/components/options-modal/options/enable-feature.js new file mode 100644 index 00000000000000..a0b79eddef3a55 --- /dev/null +++ b/packages/edit-post/src/components/options-modal/options/enable-feature.js @@ -0,0 +1,24 @@ +/** + * WordPress dependencies + */ +import { compose } from '@wordpress/compose'; +import { withSelect, withDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import BaseOption from './base'; + +export default compose( + withSelect( ( select, { feature } ) => ( { + isChecked: select( 'core/edit-post' ).isFeatureActive( feature ), + } ) ), + withDispatch( ( dispatch, { feature } ) => { + const { toggleFeature } = dispatch( 'core/edit-post' ); + return { + onChange() { + toggleFeature( feature ); + }, + }; + } ) +)( BaseOption ); diff --git a/packages/edit-post/src/components/options-modal/options/index.js b/packages/edit-post/src/components/options-modal/options/index.js index e1263f9f684741..8684b680377054 100644 --- a/packages/edit-post/src/components/options-modal/options/index.js +++ b/packages/edit-post/src/components/options-modal/options/index.js @@ -3,3 +3,4 @@ export { default as EnablePanelOption } from './enable-panel'; export { default as EnablePluginDocumentSettingPanelOption } from './enable-plugin-document-setting-panel'; export { default as EnablePublishSidebarOption } from './enable-publish-sidebar'; export { default as EnableTipsOption } from './enable-tips'; +export { default as EnableFeature } from './enable-feature'; diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index 70a29b54466a1d..c093446be3596f 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -36,6 +36,7 @@ class Editor extends Component { getEditorSettings( settings, hasFixedToolbar, + showInserterHelpPanel, focusMode, hiddenBlockTypes, blockTypes, @@ -44,6 +45,7 @@ class Editor extends Component { ...settings, hasFixedToolbar, focusMode, + showInserterHelpPanel, }; // Omit hidden block types if exists and non-empty. @@ -77,6 +79,7 @@ class Editor extends Component { onError, hiddenBlockTypes, blockTypes, + showInserterHelpPanel, ...props } = this.props; @@ -87,6 +90,7 @@ class Editor extends Component { const editorSettings = this.getEditorSettings( settings, hasFixedToolbar, + showInserterHelpPanel, focusMode, hiddenBlockTypes, blockTypes, @@ -125,6 +129,7 @@ export default withSelect( ( select, { postId, postType } ) => { const { getBlockTypes } = select( 'core/blocks' ); return { + showInserterHelpPanel: isFeatureActive( 'showInserterHelpPanel' ), hasFixedToolbar: isFeatureActive( 'fixedToolbar' ), focusMode: isFeatureActive( 'focusMode' ), post: getEntityRecord( 'postType', postType, postId ), diff --git a/packages/edit-post/src/store/defaults.js b/packages/edit-post/src/store/defaults.js index 9cfc6506fece04..a161e4f4a6ef9b 100644 --- a/packages/edit-post/src/store/defaults.js +++ b/packages/edit-post/src/store/defaults.js @@ -8,6 +8,7 @@ export const PREFERENCES_DEFAULTS = { }, features: { fixedToolbar: false, + showInserterHelpPanel: true, }, pinnedPluginItems: {}, hiddenBlockTypes: [], diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index b11341e1a33f0f..4ed53cb23e4dfa 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -101,6 +101,7 @@ class EditorProvider extends Component { 'titlePlaceholder', '__experimentalEnableLegacyWidgetBlock', '__experimentalEnableMenuBlock', + 'showInserterHelpPanel', ] ), __experimentalReusableBlocks: reusableBlocks, __experimentalMediaUpload: hasUploadPermissions ? mediaUpload : undefined, From c0315dfb053596babf1a2d2a110848f9a9c3cde7 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 2 Aug 2019 15:51:24 -0400 Subject: [PATCH 05/14] Update default content, spacing. --- .../src/components/inserter/menu.js | 27 +++++++++++++------ .../src/components/inserter/style.scss | 8 ++++++ 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 7d67be31cc0612..c40c5d667cc04b 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -377,16 +377,27 @@ export class InserterMenu extends Component { ) } { ! hoveredItem && (
-

Content Blocks

-

- { __( - 'Blocks are the basis of all content within the editor. ' + - 'This library contains blocks for text, headings, images, lists and more!' - ) } -

+
+

Content Blocks

+

+ { __( + 'Welcome to the wonderful world of blocks! Blocks are the basis of all content within the editor. ' + ) } +

+

+ { __( + 'There are blocks available for all kinds of content: you can insert text, headings, images, lists, videos, tables, and lots more!' + ) } +

+

+ { __( + 'Browse through the library to learn more about what each block does.' + ) } +

+
{ __( - 'You can quickly insert blocks by typing "/" in the editor.' + 'While writing, you can press "/" to quickly insert new blocks.' ) }
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 5a97fba8c7d3f3..6366fb51dfd686 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -163,6 +163,14 @@ $block-inserter-search-height: 38px; height: 100%; flex-direction: column; + .block-editor-inserter__menu-help-panel-no-block-text { + flex-grow: 1; + + h4 { + font-size: $big-font-size; + } + } + .components-notice { margin: 0; } From 0a438a1f9766e67fb27b100359b67fbd31fbf6ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Tue, 6 Aug 2019 11:21:15 +0200 Subject: [PATCH 06/14] Add component and use it in the inserter panel. --- .../src/components/inserter/menu.js | 6 +++--- packages/components/src/index.js | 1 + packages/components/src/style.scss | 1 + packages/components/src/tip/index.js | 18 ++++++++++++++++++ packages/components/src/tip/style.scss | 18 ++++++++++++++++++ 5 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 packages/components/src/tip/index.js create mode 100644 packages/components/src/tip/style.scss diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index c40c5d667cc04b..cbf5bedf254169 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -25,7 +25,7 @@ import { Component, createRef } from '@wordpress/element'; import { PanelBody, withSpokenMessages, - Notice, + Tip, } from '@wordpress/components'; import { getCategories, @@ -395,11 +395,11 @@ export class InserterMenu extends Component { ) }

- + { __( 'While writing, you can press "/" to quickly insert new blocks.' ) } - + ) } diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 3ab485312f848b..5ce67b968084ea 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -55,6 +55,7 @@ export { default as Spinner } from './spinner'; export { default as TabPanel } from './tab-panel'; export { default as TextControl } from './text-control'; export { default as TextareaControl } from './textarea-control'; +export { default as Tip } from './tip'; export { default as ToggleControl } from './toggle-control'; export { default as Toolbar } from './toolbar'; export { default as ToolbarButton } from './toolbar-button'; diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index 39c566be5ad526..39b026111065df 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -39,6 +39,7 @@ @import "./spinner/style.scss"; @import "./text-control/style.scss"; @import "./textarea-control/style.scss"; +@import "./tip/style.scss"; @import "./toggle-control/style.scss"; @import "./toolbar/style.scss"; @import "./toolbar-button/style.scss"; diff --git a/packages/components/src/tip/index.js b/packages/components/src/tip/index.js new file mode 100644 index 00000000000000..fc4cd465b5735a --- /dev/null +++ b/packages/components/src/tip/index.js @@ -0,0 +1,18 @@ +/** + * Internal dependencies + */ +import { SVG, Path } from '../'; + +function Tip( props ) { + return ( +
+ + + + +

{ props.children }

+
+ ); +} + +export default Tip; diff --git a/packages/components/src/tip/style.scss b/packages/components/src/tip/style.scss new file mode 100644 index 00000000000000..3d18399189e9e1 --- /dev/null +++ b/packages/components/src/tip/style.scss @@ -0,0 +1,18 @@ +.components-tip { + display: flex; + background: #2f2f2f; + border-radius: 3px; + padding: 12px 16px; + color: #fff; + + svg { + align-self: center; + fill: #eee; + flex-shrink: 0; + margin-right: 12px; + } + + p { + margin: 0; + } +} From 966a3a778139f748842612471a1951c1f301280c Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 6 Aug 2019 10:07:23 -0400 Subject: [PATCH 07/14] Minor copy update. --- packages/block-editor/src/components/inserter/menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index cbf5bedf254169..5c3dd96906a4b7 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -386,7 +386,7 @@ export class InserterMenu extends Component {

{ __( - 'There are blocks available for all kinds of content: you can insert text, headings, images, lists, videos, tables, and lots more!' + 'There are blocks available for all kinds of content: insert text, headings, images, lists, videos, tables, and lots more.' ) }

From a942d0a7326d48354ce4f3ce2639123a8063a7a1 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 7 Aug 2019 14:49:42 -0400 Subject: [PATCH 08/14] Try a lighter version of Tips. --- packages/components/src/tip/index.js | 3 +-- packages/components/src/tip/style.scss | 9 +++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/components/src/tip/index.js b/packages/components/src/tip/index.js index fc4cd465b5735a..1672283d426f61 100644 --- a/packages/components/src/tip/index.js +++ b/packages/components/src/tip/index.js @@ -7,8 +7,7 @@ function Tip( props ) { return (

- - +

{ props.children }

diff --git a/packages/components/src/tip/style.scss b/packages/components/src/tip/style.scss index 3d18399189e9e1..d02afb1bdf8d09 100644 --- a/packages/components/src/tip/style.scss +++ b/packages/components/src/tip/style.scss @@ -1,15 +1,12 @@ .components-tip { display: flex; - background: #2f2f2f; - border-radius: 3px; - padding: 12px 16px; - color: #fff; + color: $dark-gray-500; svg { align-self: center; - fill: #eee; + fill: $alert-yellow; flex-shrink: 0; - margin-right: 12px; + margin-right: $grid-size-large; } p { From 0b4ca371949c0a45dd5978f020fd05ca9f5117a6 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 8 Aug 2019 12:18:04 +0100 Subject: [PATCH 09/14] Fix tests --- packages/block-editor/src/components/inserter/menu.js | 2 +- packages/block-editor/src/components/inserter/style.scss | 6 ++++++ packages/e2e-tests/specs/editor-modes.test.js | 2 +- .../options-modal/test/__snapshots__/index.js.snap | 4 ++++ 4 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 5c3dd96906a4b7..5872aad76c04b4 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -378,7 +378,7 @@ export class InserterMenu extends Component { { ! hoveredItem && (
-

Content Blocks

+
Content Blocks

{ __( 'Welcome to the wonderful world of blocks! Blocks are the basis of all content within the editor. ' diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 6366fb51dfd686..04f88c13cdb459 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -189,3 +189,9 @@ $block-inserter-search-height: 38px; align-items: center; text-align: center; } + +.block-editor-inserter__menu-help-panel-title { + font-size: $big-font-size; + font-weight: 600; + margin-bottom: 20px; +} diff --git a/packages/e2e-tests/specs/editor-modes.test.js b/packages/e2e-tests/specs/editor-modes.test.js index 9fa866e893e9fd..6cb49238db01d3 100644 --- a/packages/e2e-tests/specs/editor-modes.test.js +++ b/packages/e2e-tests/specs/editor-modes.test.js @@ -88,7 +88,7 @@ describe( 'Editing modes (visual/HTML)', () => { it( 'the code editor should unselect blocks and disable the inserter', async () => { // The paragraph block should be selected const title = await page.$eval( - '.block-editor-block-inspector__card-title', + '.block-editor-block-card__title', ( element ) => element.innerText ); expect( title ).toBe( 'Paragraph' ); diff --git a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap index c2907a26e3001e..7a89493c76eea9 100644 --- a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap @@ -15,6 +15,10 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = ` +

Date: Fri, 9 Aug 2019 11:18:13 +0100 Subject: [PATCH 10/14] Avoid the double shadow in the inserter popover --- .../src/components/inserter/menu.js | 151 +++++++++--------- .../src/components/inserter/style.scss | 26 ++- 2 files changed, 96 insertions(+), 81 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 5872aad76c04b4..dcfab750b14a73 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -16,6 +16,7 @@ import { deburr, } from 'lodash'; import scrollIntoView from 'dom-scroll-into-view'; +import classnames from 'classnames'; /** * WordPress dependencies @@ -275,88 +276,92 @@ export class InserterMenu extends Component { /* eslint-disable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */ return (
- - - -
- - + + - { !! suggestedItems.length && - - - - } - - { map( getCategories(), ( category ) => { - const categoryItems = itemsPerCategory[ category.slug ]; - if ( ! categoryItems || ! categoryItems.length ) { - return null; - } - return ( +
+ + + + { !! suggestedItems.length && - + - ); - } ) } - - { !! reusableItems.length && ( - - - { + const categoryItems = itemsPerCategory[ category.slug ]; + if ( ! categoryItems || ! categoryItems.length ) { + return null; + } + return ( + + + + ); + } ) } + + { !! reusableItems.length && ( + - { __( 'Manage All Reusable Blocks' ) } - - - ) } - { isEmpty( suggestedItems ) && isEmpty( reusableItems ) && isEmpty( itemsPerCategory ) && ( -

{ __( 'No blocks found.' ) }

- ) } + + + { __( 'Manage All Reusable Blocks' ) } + + + ) } + { isEmpty( suggestedItems ) && isEmpty( reusableItems ) && isEmpty( itemsPerCategory ) && ( +

{ __( 'No blocks found.' ) }

+ ) } +
{ showInserterHelpPanel && ( diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 04f88c13cdb459..6b72d8cbb19495 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -36,6 +36,21 @@ $block-inserter-search-height: 38px; } .block-editor-inserter__menu { + height: 100%; + display: flex; + width: auto; + + @include break-medium { + width: 400px; + position: relative; + + &.has-help-panel { + width: 700px; + } + } +} + +.block-editor-inserter__main-area { width: auto; display: flex; flex-direction: column; @@ -132,16 +147,11 @@ $block-inserter-search-height: 38px; .block-editor-inserter__menu-help-panel { display: none; - border: $border-width solid $light-gray-500; - box-shadow: $shadow-popover; - background: $white; - position: absolute; - left: 100%; - top: -1px; - bottom: -1px; + border-left: $border-width solid $light-gray-500; width: 300px; + height: 100%; padding: 20px; - overflow: auto; + overflow-y: auto; @include break-medium { display: block; From e2cd01375ee36818d267bcd40143eb0469ef54a6 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 9 Aug 2019 11:29:10 +0100 Subject: [PATCH 11/14] Restore the onhover behavior --- packages/block-editor/src/components/inserter/menu.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index dcfab750b14a73..6714a27f6c69d2 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -133,10 +133,6 @@ export class InserterMenu extends Component { } onHover( item ) { - if ( ! item ) { - return; - } - this.setState( { hoveredItem: item, } ); From 5e3fd51e905c054dc5ce5422f563a8ceded654f8 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 9 Aug 2019 12:21:23 +0100 Subject: [PATCH 12/14] Fix scrollbar jumpiness --- .../src/components/block-preview/index.js | 18 ++++++++---------- .../src/components/block-preview/style.scss | 9 +++++---- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js index d8235eea0c1ddd..2b0a6133f8d2a3 100644 --- a/packages/block-editor/src/components/block-preview/index.js +++ b/packages/block-editor/src/components/block-preview/index.js @@ -21,7 +21,6 @@ import { getBlockPreviewContainerDOMNode } from '../../utils/dom'; function ScaledBlockPreview( { blocks, viewportWidth } ) { const previewRef = useRef( null ); - const [ isTallPreview, setIsTallPreview ] = useState( false ); const [ isReady, setIsReady ] = useState( false ); const [ previewScale, setPreviewScale ] = useState( 1 ); const [ { x, y }, setPosition ] = useState( { x: 0, y: 0 } ); @@ -51,7 +50,6 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) { const offsetY = ( containerElementRect.height > scaledElementRect.height * scale ) ? ( containerElementRect.height - ( scaledElementRect.height * scale ) ) / 2 : 0; - setIsTallPreview( scaledElementRect.height * scale > containerElementRect.height ); setPreviewScale( scale ); setPosition( { x: offsetX * scale, y: offsetY } ); @@ -60,7 +58,6 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) { } else { const containerElementRect = containerElement.getBoundingClientRect(); setPreviewScale( containerElementRect.width / viewportWidth ); - setIsTallPreview( true ); } setIsReady( true ); @@ -86,14 +83,15 @@ function ScaledBlockPreview( { blocks, viewportWidth } ) { width: viewportWidth, }; - const contentClassNames = classnames( 'block-editor-block-preview__content editor-styles-wrapper', { - 'is-tall-preview': isTallPreview, - 'is-ready': isReady, - } ); - return ( -
- +
+
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss index 13df8939a7e3ec..2316de61a8355f 100644 --- a/packages/block-editor/src/components/block-preview/style.scss +++ b/packages/block-editor/src/components/block-preview/style.scss @@ -7,6 +7,11 @@ // The preview component measures the pixel width of this item, so as to calculate the scale factor. // But without this baseline width, it collapses to 0. width: 100%; + + overflow: hidden; + &.is-ready { + overflow: visible; + } } .block-editor-block-preview__content { @@ -42,10 +47,6 @@ height: auto; } - &.is-tall-preview { - top: 4px; - } - .block-editor-block-list__insertion-point, .block-editor-block-drop-zone, .reusable-block-indicator, From 7544b4e64fd29dc9e8163b5015b1883610290bfc Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 12 Aug 2019 13:36:44 -0400 Subject: [PATCH 13/14] Add a slight fade animation to the help panel content. --- packages/block-editor/src/components/inserter/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 6b72d8cbb19495..a415e13ccb547c 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -161,6 +161,7 @@ $block-inserter-search-height: 38px; padding-bottom: 20px; margin-bottom: 10px; border-bottom: $border-width solid $light-gray-500; + @include edit-post__fade-in-animation(); } } @@ -172,6 +173,7 @@ $block-inserter-search-height: 38px; display: flex; height: 100%; flex-direction: column; + @include edit-post__fade-in-animation(); .block-editor-inserter__menu-help-panel-no-block-text { flex-grow: 1; From af52a80f42d905f4a6e842424fea9511c977a9c1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 19 Aug 2019 12:33:49 +0100 Subject: [PATCH 14/14] Avoid space between icons horizontally --- .../block-editor/src/components/inserter-list-item/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index d99f818f6f0a40..8dc8b8084ad4f9 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -1,7 +1,7 @@ .block-editor-block-types-list__list-item { display: block; width: 33.33%; - padding: 0 4px; + padding: 0; margin: 0 0 12px; } @@ -11,7 +11,7 @@ width: 100%; font-size: $default-font-size; color: $dark-gray-700; - padding: 0; + padding: 0 4px; align-items: stretch; justify-content: center; cursor: pointer;