-
- { __( 'Search for a block' ) }
-
-
-
-
- { hoveredItem && isReusableBlock( hoveredItem ) &&
-
-
{ __( 'Preview' ) }
-
+ { showInserterHelpPanel && (
+
+ { hoveredItem && (
+ <>
+
+ { isReusableBlock( hoveredItem ) && (
+
+
{ __( 'Preview' ) }
+
+
+ ) }
+
+ ) }
+ { ! 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.'
+ ) }
+
+
+
+ { __(
+ 'While writing, you can press "/" to quickly insert new blocks.'
+ ) }
+
+
+ ) }
- }
+ ) }
);
/* eslint-enable jsx-a11y/no-autofocus, jsx-a11y/no-static-element-interactions */
@@ -371,6 +418,7 @@ export default compose(
getBlockName,
getBlockRootClientId,
getBlockSelectionEnd,
+ getSettings,
} = select( 'core/block-editor' );
const {
getChildBlockNames,
@@ -388,6 +436,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 4cc764ed0861a6..a415e13ccb547c 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;
@@ -130,25 +145,65 @@ $block-inserter-search-height: 38px;
}
}
-.block-editor-inserter__preview {
- border: $border-width solid $light-gray-500;
- box-shadow: $shadow-popover;
- background: $white;
- position: absolute;
- left: 100%;
- top: -1px;
- bottom: -1px;
- width: 300px;
- height: auto;
- padding: 10px;
+.block-editor-inserter__menu-help-panel {
display: none;
+ border-left: $border-width solid $light-gray-500;
+ width: 300px;
+ height: 100%;
+ padding: 20px;
+ overflow-y: auto;
@include break-medium {
display: block;
}
+
+ .block-editor-block-card {
+ padding-bottom: 20px;
+ margin-bottom: 10px;
+ border-bottom: $border-width solid $light-gray-500;
+ @include edit-post__fade-in-animation();
+ }
}
.block-editor-inserter__preview-title {
margin-bottom: 10px;
- color: $dark-gray-300;
+}
+
+.block-editor-inserter__menu-help-panel-no-block {
+ 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;
+
+ h4 {
+ font-size: $big-font-size;
+ }
+ }
+
+ .components-notice {
+ margin: 0;
+ }
+
+ 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;
+}
+
+.block-editor-inserter__menu-help-panel-title {
+ font-size: $big-font-size;
+ font-weight: 600;
+ margin-bottom: 20px;
}
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/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";
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..1672283d426f61
--- /dev/null
+++ b/packages/components/src/tip/index.js
@@ -0,0 +1,17 @@
+/**
+ * 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..d02afb1bdf8d09
--- /dev/null
+++ b/packages/components/src/tip/style.scss
@@ -0,0 +1,15 @@
+.components-tip {
+ display: flex;
+ color: $dark-gray-500;
+
+ svg {
+ align-self: center;
+ fill: $alert-yellow;
+ flex-shrink: 0;
+ margin-right: $grid-size-large;
+ }
+
+ p {
+ margin: 0;
+ }
+}
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/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 } ) {
{
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,