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 );