diff --git a/editor/modes/visual-editor/block-list.js b/editor/modes/visual-editor/block-list.js index f5a0b1eb55865..adf50a72f92d4 100644 --- a/editor/modes/visual-editor/block-list.js +++ b/editor/modes/visual-editor/block-list.js @@ -10,12 +10,14 @@ import { throttle, reduce, noop } from 'lodash'; import { __ } from 'i18n'; import { Component } from 'element'; import { serialize, getDefaultBlock, createBlock } from 'blocks'; +import { Dashicon } from 'components'; import { ENTER } from 'utils/keycodes'; /** * Internal dependencies */ import VisualEditorBlock from './block'; +import Inserter from '../../inserter'; import { getBlockUids, getBlockInsertionPoint, @@ -191,8 +193,19 @@ class VisualEditorBlockList extends Component { this.props.onInsertBlock( newBlock ); } + insertBlock( name ) { + const newBlock = createBlock( name ); + this.props.onInsertBlock( newBlock ); + } + render() { - const { blocks, showInsertionPoint, insertionPoint, multiSelectedBlockUids } = this.props; + const { + blocks, + showInsertionPoint, + insertionPoint, + multiSelectedBlockUids, + } = this.props; + const insertionPointIndex = blocks.indexOf( insertionPoint ); const blocksWithInsertionPoint = showInsertionPoint ? [ @@ -224,16 +237,34 @@ class VisualEditorBlockList extends Component { /> ); } ) } - - + { ! blocks.length && + + } +
+ + + +
); } diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js index 3ec6b502b45d7..a5c951056796a 100644 --- a/editor/modes/visual-editor/index.js +++ b/editor/modes/visual-editor/index.js @@ -15,7 +15,6 @@ import { CHAR_A } from 'utils/keycodes'; * Internal dependencies */ import './style.scss'; -import Inserter from '../../inserter'; import VisualEditorBlockList from './block-list'; import PostTitle from '../../post-title'; import { getBlockUids } from '../../selectors'; @@ -80,7 +79,6 @@ class VisualEditor extends Component { > - ); /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index d81146c08cca9..e6767d4da4d41 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -322,3 +322,21 @@ $sticky-bottom-offset: 20px; outline: 1px solid $light-gray-500; } } + +.editor-visual-editor__continue-writing { + display: flex; + align-items: baseline; + + .editor-inserter__block { + opacity: 0; + transition: opacity 150ms; + margin: 0 10px; + width: auto; + font-family: $default-font; + font-size: $default-font-size; + } + &:hover .editor-inserter__block, + &:focus .editor-inserter__block { + opacity: 1; + } +}