Writing Flow: Trailing placeholder attempt 3

edit-post/assets/stylesheets/_variables.scss

@@ -34,16 +34,18 @@ $text-editor-max-width: 760px;
 $visual-editor-max-width: 636px;
 $block-controls-height: 36px;
 $icon-button-size: 36px;
+$icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
 $block-toolbar-height: 37px;
 $sidebar-width: 280px;
 
 // Blocks
 $block-padding: 14px;
 $block-mover-margin: 18px;
-$block-mover-padding-hidden: 10px;
-$block-mover-padding-visible: 32px;
 $block-spacing: 4px;
+// old $block-mover-padding-visible: 32px;
+$block-mover-padding-visible: $icon-button-size-small + $icon-button-size-small;
+
 
 // Buttons & UI Widgets
 $button-style__radius-roundrect: 4px;

edit-post/assets/stylesheets/_z-index.scss

@@ -9,7 +9,6 @@ $z-layers: (
 	'.editor-block-list__block {core/image aligned left or right}': 20,
 	'.freeform-toolbar': 10,
 	'.editor-warning': 1,
-	'.editor-block-list__sibling-inserter': 1,
 	'.components-form-toggle__input': 1,
 	'.editor-format-list__menu': 1,
 	'.editor-inserter__tabs': 1,

edit-post/components/modes/visual-editor/index.js

@@ -13,7 +13,6 @@ import {
 	DefaultBlockAppender,
 	EditorGlobalKeyboardShortcuts,
 	BlockSelectionClearer,
-	InserterWithShortcuts,
 } from '@wordpress/editor';
 import { Fragment } from '@wordpress/element';
 
@@ -41,7 +40,6 @@ function VisualEditor( props ) {
 				/>
 				<DefaultBlockAppender />
 			</WritingFlow>
-			<InserterWithShortcuts />
 		</BlockSelectionClearer>
 	);
 }

edit-post/components/modes/visual-editor/style.scss

@@ -48,19 +48,6 @@
 	}
 }
 
-.edit-post-visual-editor .editor-inserter-with-shortcuts {
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
-	margin: 0 auto;
-	clear: both;
-
-	padding: $block-padding;
-	padding-left: $block-padding - 8px; // Offset by left button's own padding
-	@include break-small {
-		padding: $block-padding ( $block-padding + $block-mover-padding-visible );
-		padding-left: $block-padding + $block-mover-padding-visible - 8px;
-	}
-}
-
 .edit-post-visual-editor .editor-post-title {
 	margin-left: auto;
 	margin-right: auto;
@@ -72,7 +59,7 @@
 	}
 
 	@include break-small() {
-		padding: 5px ( $block-mover-padding-visible );
+		padding: 5px #{ $block-mover-padding-visible - 1px };	// subtract 1px border, because this is an outline
 
 		.editor-post-permalink {
 			left: $block-mover-padding-visible;
@@ -89,7 +76,7 @@
 	position: relative;
 
 	@include break-small() {
-		padding: 0 $block-mover-padding-visible;
+		padding: 0 $block-mover-padding-visible;	// don't subtract 1px border because it's a border not an outline
 
 		.editor-default-block-appender__content {
 			padding: 0 $block-padding;

editor/components/block-list/block-mobile-toolbar.js

@@ -4,10 +4,12 @@
 import BlockMover from '../block-mover';
 import BlockRemoveButton from '../block-settings-menu/block-remove-button';
 import BlockSettingsMenu from '../block-settings-menu';
+import VisualEditorInserter from '../inserter';
 
 function BlockMobileToolbar( { uid, renderBlockMenu } ) {
 	return (
 		<div className="editor-block-list__block-mobile-toolbar">
+			<VisualEditorInserter />
 			<BlockMover uids={ [ uid ] } />
 			<BlockRemoveButton uids={ [ uid ] } small />
 			<BlockSettingsMenu uids={ [ uid ] } renderBlockMenu={ renderBlockMenu } />

editor/components/block-list/block.js

@@ -24,6 +24,7 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockMover from '../block-mover';
+import VisualEditorInserter from '../inserter';
 import BlockDropZone from '../block-drop-zone';
 import BlockSettingsMenu from '../block-settings-menu';
 import InvalidBlockWarning from './invalid-block-warning';
@@ -33,7 +34,7 @@ import BlockHtml from './block-html';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import BlockMultiControls from './multi-controls';
 import BlockMobileToolbar from './block-mobile-toolbar';
-import BlockListSiblingInserter from './sibling-inserter';
+import BlockInsertionPoint from './insertion-point';
 import {
 	clearSelectedBlock,
 	editPost,
@@ -111,6 +112,7 @@ export class BlockListBlock extends Component {
 		this.insertBlocksAfter = this.insertBlocksAfter.bind( this );
 		this.onTouchStart = this.onTouchStart.bind( this );
 		this.onClick = this.onClick.bind( this );
+		this.selectOnOpen = this.selectOnOpen.bind( this );
 
 		this.previousOffset = null;
 		this.hadTouchStart = false;
@@ -388,6 +390,12 @@ export class BlockListBlock extends Component {
 		this.setState( { error } );
 	}
 
+	selectOnOpen( open ) {
+		if ( open && ! this.props.isSelected ) {
+			this.props.onSelect();
+		}
+	}
+
 	render() {
 		const { block, order, mode, showContextualToolbar, isLocked, renderBlockMenu } = this.props;
 		const { name: blockName, isValid } = block;
@@ -432,6 +440,7 @@ export class BlockListBlock extends Component {
 				{ ...wrapperProps }
 			>
 				<BlockDropZone index={ order } />
+				{ ( showUI || isHovered ) && <VisualEditorInserter onToggle={ this.selectOnOpen } /> }
 				{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
 				{ ( showUI || isHovered ) && <BlockSettingsMenu uids={ [ block.uid ] } renderBlockMenu={ renderBlockMenu } /> }
 				{ showUI && isValid && showContextualToolbar && <BlockContextualToolbar /> }
@@ -479,7 +488,7 @@ export class BlockListBlock extends Component {
 					{ showUI && <BlockMobileToolbar uid={ block.uid } renderBlockMenu={ renderBlockMenu } /> }
 				</div>
 				{ !! error && <BlockCrashWarning /> }
-				<BlockListSiblingInserter uid={ block.uid } />
+				<BlockInsertionPoint uid={ block.uid } />
 			</div>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
@@ -560,6 +569,7 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 	onMetaChange( meta ) {
 		dispatch( editPost( { meta } ) );
 	},
+
 	toggleSelection( selectionEnabled ) {
 		dispatch( toggleSelection( selectionEnabled ) );
 	},

editor/components/block-list/index.js

@@ -25,7 +25,7 @@ import { serialize } from '@wordpress/blocks';
  */
 import './style.scss';
 import BlockListBlock from './block';
-import BlockListSiblingInserter from './sibling-inserter';
+import BlockInsertionPoint from './insertion-point';
 import BlockSelectionClearer from '../block-selection-clearer';
 import {
 	getBlockUids,
@@ -250,7 +250,7 @@ class BlockList extends Component {
 
 		return (
 			<BlockSelectionClearer>
-				{ !! blocks.length && <BlockListSiblingInserter /> }
+				{ !! blocks.length && <BlockInsertionPoint /> }
 				{ map( blocks, ( uid ) => (
 					<BlockListBlock
 						key={ 'block-' + uid }

editor/components/block-list/insertion-point.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getBlockUids,
+	getBlockInsertionPoint,
+	isBlockInsertionPointVisible,
+} from '../../store/selectors';
+
+function BlockInsertionPoint( { showInsertionPoint } ) {
+	if ( ! showInsertionPoint ) {
+		return null;
+	}
+
+	return <div className="editor-block-list__insertion-point" />;
+}
+
+export default connect(
+	( state, { uid } ) => {
+		const blockIndex = uid ? getBlockUids( state ).indexOf( uid ) : -1;
+		const insertIndex = blockIndex > -1 ? blockIndex + 1 : 0;
+
+		return {
+			showInsertionPoint: (
+				isBlockInsertionPointVisible( state ) &&
+				getBlockInsertionPoint( state ) === insertIndex
+			),
+		};
+	},
+)( BlockInsertionPoint );