From 2ca51b31383aadfd8ed32bc4208bd55573d36a40 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 28 Feb 2020 09:55:44 +0100 Subject: [PATCH 1/3] Make the inserter full height --- .../src/components/inserter/menu.js | 12 +++--- .../src/components/inserter/style.scss | 43 ++++++++----------- 2 files changed, 25 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 72f071bf29b4cf..2d9b1dfb047b1c 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -13,7 +13,6 @@ import { includes, } from 'lodash'; import scrollIntoView from 'dom-scroll-into-view'; -import classnames from 'classnames'; /** * WordPress dependencies @@ -312,9 +311,7 @@ export class InserterMenu extends Component { /* eslint-disable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */ return (
@@ -465,8 +462,12 @@ export class InserterMenu extends Component { } }
+ { showInserterHelpPanel && ( +
+ +
+ ) } - { hasHelpPanel && (
{ hoveredItem && ( @@ -535,7 +536,6 @@ export class InserterMenu extends Component { ) }

- ) } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 9800b85f81fe0c..6545773ce3c089 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -1,4 +1,4 @@ -$block-inserter-content-height: 350px; +$block-inserter-preview-height: 350px; $block-inserter-tabs-height: 44px; $block-inserter-search-height: 38px; @@ -17,11 +17,10 @@ $block-inserter-search-height: 38px; } .block-editor-inserter__popover > .components-popover__content { - padding: 0 0 $border-width 0; - @include break-medium { overflow-y: visible; - height: $block-inserter-content-height + $block-inserter-tabs-height + $block-inserter-search-height; + height: 100vh; + padding: 0; } } @@ -38,17 +37,6 @@ $block-inserter-search-height: 38px; .block-editor-inserter__menu { height: 100%; - display: flex; - width: auto; - position: relative; - - @include break-medium { - width: 400px; - - &.has-help-panel { - width: 700px; - } - } } .block-editor-inserter__main-area { @@ -81,6 +69,7 @@ $block-inserter-search-height: 38px; position: relative; z-index: 1; border-radius: $radius-round-rectangle; + flex-shrink: 0; /* Fonts smaller than 16px causes mobile safari to zoom. */ font-size: $mobile-text-min-font-size; @@ -104,10 +93,6 @@ $block-inserter-search-height: 38px; outline: $border-width dotted $dark-gray-500; } - @include break-medium { - height: $block-inserter-content-height + $block-inserter-tabs-height; - } - // Don't show the top border on the first panel, let the Search border be the border. [role="presentation"] + .components-panel__body { border-top: none; @@ -152,13 +137,17 @@ $block-inserter-search-height: 38px; .block-editor-inserter__menu-help-panel { display: none; - border-left: $border-width solid $light-gray-500; + border: $border-width solid $light-gray-secondary; width: 300px; - height: 100%; + min-height: $block-inserter-preview-height; + margin-right: 20px; padding: 20px; - overflow-y: auto; + background: $white; @include break-medium { + position: absolute; + top: 0; + left: calc(100% + 20px); display: flex; flex-direction: column; } @@ -172,7 +161,8 @@ $block-inserter-search-height: 38px; .block-editor-inserter__preview { display: flex; - flex-grow: 2; + flex-grow: 1; + overflow-y: auto; } } @@ -220,7 +210,7 @@ $block-inserter-search-height: 38px; border-radius: $radius-round-rectangle; min-height: 150px; display: grid; - flex-grow: 2; + flex-grow: 1; .block-editor-block-preview__container { margin-right: 0; @@ -238,3 +228,8 @@ $block-inserter-search-height: 38px; border-radius: $radius-round-rectangle; align-items: center; } + +.block-editor-inserter__tips { + padding: $grid-unit-20; + flex-shrink: 0; +} From 6edd3e82125fc8dd71190656ba76e0d6a3f998fe Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 5 Mar 2020 09:02:39 +0100 Subject: [PATCH 2/3] Remove the default help panel --- .../src/components/inserter/menu.js | 106 +++++++----------- 1 file changed, 39 insertions(+), 67 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 2d9b1dfb047b1c..bfbef8ee898e0b 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -468,76 +468,48 @@ export class InserterMenu extends Component { ) } - { hasHelpPanel && ( + { hasHelpPanel && hoveredItem && (
- { hoveredItem && ( - <> - { ! isReusableBlock( hoveredItem ) && ( - - ) } -
- { isReusableBlock( hoveredItem ) || - hoveredItemBlockType.example ? ( -
- -
- ) : ( -
- { __( 'No Preview Available.' ) } -
- ) } -
- + { ! isReusableBlock( hoveredItem ) && ( + ) } - { ! hoveredItem && ( -
-
-
- { __( '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: insert text, headings, images, lists, videos, tables, and lots more.' - ) } -

-

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

+
+ { isReusableBlock( hoveredItem ) || + hoveredItemBlockType.example ? ( +
+
-
- ) } + ) : ( +
+ { __( 'No Preview Available.' ) } +
+ ) } +
) }
From b820f5fe3d985a80c5b391a12377f088214ba573 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 5 Mar 2020 09:08:57 +0100 Subject: [PATCH 3/3] Remove the inserter help panel flag --- packages/block-editor/README.md | 1 - .../src/components/inserter/menu.js | 80 ++++++++----------- packages/block-editor/src/store/defaults.js | 2 - .../src/components/options-modal/index.js | 5 -- .../options-modal/options/enable-feature.js | 24 ------ .../components/options-modal/options/index.js | 1 - .../test/__snapshots__/index.js.snap | 4 - 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, 35 insertions(+), 89 deletions(-) delete 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 40d41b71ad6168..d6c047e4cb8801 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -415,7 +415,6 @@ _Properties_ - _bodyPlaceholder_ `string`: Empty post placeholder - _titlePlaceholder_ `string`: Empty title placeholder - _codeEditingEnabled_ `boolean`: Whether or not the user can switch to the code editor -- _showInserterHelpPanel_ `boolean`: Whether or not the inserter help panel is shown - _\_\_experimentalCanUserUseUnfilteredHTML_ `boolean`: 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 - _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index bfbef8ee898e0b..c81e2956203b36 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -519,53 +519,43 @@ export class InserterMenu extends Component { } export default compose( - withSelect( - ( - select, - { clientId, isAppender, rootClientId, showInserterHelpPanel } - ) => { - const { - getInserterItems, - getBlockName, - getBlockRootClientId, - getBlockSelectionEnd, - getSettings, - } = select( 'core/block-editor' ); - const { - getCategories, - getCollections, - getChildBlockNames, - } = select( 'core/blocks' ); - - let destinationRootClientId = rootClientId; - if ( ! destinationRootClientId && ! clientId && ! isAppender ) { - const end = getBlockSelectionEnd(); - if ( end ) { - destinationRootClientId = - getBlockRootClientId( end ) || undefined; - } - } - const destinationRootBlockName = getBlockName( - destinationRootClientId - ); + withSelect( ( select, { clientId, isAppender, rootClientId } ) => { + const { + getInserterItems, + getBlockName, + getBlockRootClientId, + getBlockSelectionEnd, + getSettings, + } = select( 'core/block-editor' ); + const { getCategories, getCollections, getChildBlockNames } = select( + 'core/blocks' + ); - const { - showInserterHelpPanel: showInserterHelpPanelSetting, - __experimentalFetchReusableBlocks: fetchReusableBlocks, - } = getSettings(); - - return { - categories: getCategories(), - collections: getCollections(), - rootChildBlocks: getChildBlockNames( destinationRootBlockName ), - items: getInserterItems( destinationRootClientId ), - showInserterHelpPanel: - showInserterHelpPanel && showInserterHelpPanelSetting, - destinationRootClientId, - fetchReusableBlocks, - }; + let destinationRootClientId = rootClientId; + if ( ! destinationRootClientId && ! clientId && ! isAppender ) { + const end = getBlockSelectionEnd(); + if ( end ) { + destinationRootClientId = + getBlockRootClientId( end ) || undefined; + } } - ), + const destinationRootBlockName = getBlockName( + destinationRootClientId + ); + + const { + __experimentalFetchReusableBlocks: fetchReusableBlocks, + } = getSettings(); + + return { + categories: getCategories(), + collections: getCollections(), + rootChildBlocks: getChildBlockNames( destinationRootBlockName ), + items: getInserterItems( destinationRootClientId ), + destinationRootClientId, + fetchReusableBlocks, + }; + } ), withDispatch( ( dispatch, ownProps, { select } ) => { const { showInsertionPoint, hideInsertionPoint } = dispatch( 'core/block-editor' diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 11770f2a5ec903..3fbcd61f2e7bdf 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -28,7 +28,6 @@ export const PREFERENCES_DEFAULTS = { * @property {string} bodyPlaceholder Empty post placeholder * @property {string} titlePlaceholder Empty title placeholder * @property {boolean} codeEditingEnabled Whether or not the user can switch to the code editor - * @property {boolean} showInserterHelpPanel Whether or not the inserter help panel is shown * @property {boolean} __experimentalCanUserUseUnfilteredHTML 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. * @property {boolean} __experimentalEnableLegacyWidgetBlock Whether the user has enabled the Legacy Widget Block * @property {boolean} __experimentalBlockDirectory Whether the user has enabled the Block Directory @@ -147,7 +146,6 @@ export const SETTINGS_DEFAULTS = { availableLegacyWidgets: {}, hasPermissionsToManageWidgets: false, - showInserterHelpPanel: true, __experimentalCanUserUseUnfilteredHTML: false, __experimentalEnableLegacyWidgetBlock: false, __experimentalBlockDirectory: false, diff --git a/packages/edit-post/src/components/options-modal/index.js b/packages/edit-post/src/components/options-modal/index.js index c03648bf2c0bfa..a4fa06cc512fca 100644 --- a/packages/edit-post/src/components/options-modal/index.js +++ b/packages/edit-post/src/components/options-modal/index.js @@ -26,7 +26,6 @@ import { EnablePluginDocumentSettingPanelOption, EnablePublishSidebarOption, EnablePanelOption, - EnableFeature, } from './options'; import MetaBoxesSection from './meta-boxes-section'; @@ -48,10 +47,6 @@ 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 deleted file mode 100644 index a0b79eddef3a55..00000000000000 --- a/packages/edit-post/src/components/options-modal/options/enable-feature.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * 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 b5cb1c6c4fe1b7..6ba7b4c54c7da9 100644 --- a/packages/edit-post/src/components/options-modal/options/index.js +++ b/packages/edit-post/src/components/options-modal/options/index.js @@ -2,4 +2,3 @@ export { default as EnableCustomFieldsOption } from './enable-custom-fields'; 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 EnableFeature } from './enable-feature'; 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 be37c39470686f..438c185faca3ef 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 @@ -12,10 +12,6 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = ` -