diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
index 84a775a0583eea..aa5277fd0b8034 100644
--- a/editor/components/block-list/block.js
+++ b/editor/components/block-list/block.js
@@ -9,7 +9,7 @@ import tinymce from 'tinymce';
/**
* WordPress dependencies
*/
-import { Component, findDOMNode, compose } from '@wordpress/element';
+import { Component, findDOMNode, Fragment, compose } from '@wordpress/element';
import {
keycodes,
focus,
@@ -45,6 +45,7 @@ import BlockMobileToolbar from './block-mobile-toolbar';
import BlockInsertionPoint from './insertion-point';
import IgnoreNestedEvents from './ignore-nested-events';
import InserterWithShortcuts from '../inserter-with-shortcuts';
+import Inserter from '../inserter';
import { createInnerBlockList } from './utils';
import {
editPost,
@@ -429,7 +430,7 @@ export class BlockListBlock extends Component {
const isSelectedNotTyping = isSelected && ! isTypingWithinBlock;
const showSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
const shouldAppearSelected = ! showSideInserter && isSelectedNotTyping;
- const shouldShowMovers = shouldAppearSelected || isHovered || ( isEmptyDefaultBlock && isSelectedNotTyping );
+ const shouldShowMovers = ( shouldAppearSelected || isHovered || ( isEmptyDefaultBlock && isSelectedNotTyping ) ) && ! showSideInserter;
const shouldShowSettingsMenu = shouldShowMovers;
const shouldShowContextualToolbar = shouldAppearSelected && isValid && showContextualToolbar;
const shouldShowMobileToolbar = shouldAppearSelected;
@@ -505,7 +506,7 @@ export class BlockListBlock extends Component {
isLast={ isLast }
/>
) }
- { shouldShowSettingsMenu && (
+ { shouldShowSettingsMenu && ! showSideInserter && (
) }
{ showSideInserter && (
-
-
-
+
+
+
+
+
+
+
+
) }
);
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 45852bc4c218f5..5b1a1ced67344a 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -556,8 +556,25 @@
position: absolute;
top: 10px;
right: 10px;
+ display: none;
@include break-small {
right: $block-mover-padding-visible + 10px;
+ display: block;
+ }
+}
+
+.editor-block-list__empty-block-inserter {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+
+ .editor-inserter__toggle {
+ border-radius: 50%;
+ }
+
+ @include break-small {
+ left: 10px;
+ right: auto;
}
}
diff --git a/editor/components/default-block-appender/index.js b/editor/components/default-block-appender/index.js
index 637f3e49701c07..14ec4d24114aac 100644
--- a/editor/components/default-block-appender/index.js
+++ b/editor/components/default-block-appender/index.js
@@ -18,8 +18,10 @@ import './style.scss';
import BlockDropZone from '../block-drop-zone';
import { insertDefaultBlock, startTyping } from '../../store/actions';
import { getBlock, getBlockCount } from '../../store/selectors';
+import InserterWithShortcuts from '../inserter-with-shortcuts';
+import Inserter from '../inserter';
-export function DefaultBlockAppender( { isLocked, isVisible, onAppend, showPrompt, placeholder } ) {
+export function DefaultBlockAppender( { isLocked, isVisible, onAppend, showPrompt, placeholder, layout, rootUID } ) {
if ( isLocked || ! isVisible ) {
return null;
}
@@ -38,6 +40,8 @@ export function DefaultBlockAppender( { isLocked, isVisible, onAppend, showPromp
onKeyDown={ onAppend }
value={ showPrompt ? value : '' }
/>
+
+
);
}
diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
index 5190f337c44d85..b0d2c652b35104 100644
--- a/editor/components/default-block-appender/style.scss
+++ b/editor/components/default-block-appender/style.scss
@@ -6,9 +6,52 @@ $empty-paragraph-height: $text-editor-font-size * 4;
color: $dark-gray-300;
outline: 1px solid transparent;
transition: 0.2s outline;
+ }
+
+ .editor-inserter__toggle {
+ border-radius: 50%;
+ }
+
+ .editor-inserter-with-shortcuts {
+ position: absolute;
+ top: 10px;
+ right: 58px;
+ display: none;
+
+ .components-icon-button {
+ color: $light-gray-700;
+ transition: color 0.2s;
+ }
+
+ @include break-small {
+ display: flex;
+ }
+ }
+
+ &:hover {
+ .editor-inserter-with-shortcuts {
+ opacity: 1;
+
+ .components-icon-button {
+ color: $dark-gray-500;
+ }
+ }
+
+ .editor-inserter {
+ opacity: 1;
+ }
+ }
+
+ .editor-inserter {
+ opacity: 0;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ transition: opacity 0.2s;
- &:hover {
- outline: 1px solid $light-gray-500;
+ @include break-small {
+ left: 10px;
+ right: auto;
}
}
}
diff --git a/editor/components/default-block-appender/test/__snapshots__/index.js.snap b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
index a8cafd88e0773e..9459c684c0052c 100644
--- a/editor/components/default-block-appender/test/__snapshots__/index.js.snap
+++ b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -32,6 +32,10 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
type="text"
value="Write your story"
/>
+
+
`;
@@ -49,6 +53,10 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
type="text"
value="Write your story"
/>
+
+
`;
@@ -66,5 +74,9 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
type="text"
value=""
/>
+
+
`;
diff --git a/editor/components/inserter-with-shortcuts/index.js b/editor/components/inserter-with-shortcuts/index.js
index ced6faf7d569fd..dbb662f7d84277 100644
--- a/editor/components/inserter-with-shortcuts/index.js
+++ b/editor/components/inserter-with-shortcuts/index.js
@@ -11,31 +11,25 @@ import { BlockIcon, createBlock, getDefaultBlockName } from '@wordpress/blocks';
import { compose } from '@wordpress/element';
import { IconButton, withContext } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
+import { withDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
import './style.scss';
-import Inserter from '../inserter';
import { getFrecentInserterItems } from '../../store/selectors';
-import { replaceBlocks } from '../../store/actions';
-function InserterWithShortcuts( { items, isLocked, onToggle, onInsert } ) {
+function InserterWithShortcuts( { items, isLocked, onInsert } ) {
if ( isLocked ) {
return null;
}
const itemsWithoutDefaultBlock = filter( items, ( item ) =>
item.name !== getDefaultBlockName() || ! isEmpty( item.initialAttributes )
- ).slice( 0, 2 );
+ ).slice( 0, 3 );
return (
-
-
{ itemsWithoutDefaultBlock.map( ( item ) => (
( {
- items: getFrecentInserterItems( state, enabledBlockTypes, 3 ),
- } ),
- ( dispatch, { uid, layout } ) => ( {
+ items: getFrecentInserterItems( state, enabledBlockTypes, 4 ),
+ } )
+ ),
+ withDispatch( ( dispatch, ownProps ) => {
+ const { uid, rootUID, layout } = ownProps;
+
+ return {
onInsert( { name, initialAttributes } ) {
const block = createBlock( name, { ...initialAttributes, layout } );
- return dispatch( replaceBlocks( uid, block ) );
+ if ( uid ) {
+ dispatch( 'core/editor' ).replaceBlocks( uid, block );
+ } else {
+ dispatch( 'core/editor' ).insertBlock( block, undefined, rootUID );
+ }
},
- } )
- ),
+ };
+ } ),
)( InserterWithShortcuts );