Add the insertion point at the begining of the post

WordPress · Feb 26, 2018 · c0aad6c · c0aad6c
1 parent 375b201
commit c0aad6c
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 6 deletions.
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -20,7 +20,7 @@ $z-layers: (
 	'.editor-block-contextual-toolbar': 21,
 	'.editor-block-switcher__menu': 2,
 	'.components-popover__close': 2,
-	'.editor-block-list__block > .editor-block-list__insertion-point': 2,
+	'.editor-block-list__insertion-point': 2,
 	'.blocks-format-toolbar__link-modal': 3,
 	'.editor-block-mover': 1,
 	'.blocks-gallery-item__inline-menu': 20,

diff --git a/edit-post/components/modes/visual-editor/style.scss b/edit-post/components/modes/visual-editor/style.scss
@@ -88,3 +88,7 @@
 		}
 	}
 }
+
+.edit-post-visual-editor .editor-block-list__layout > .editor-block-list__insertion-point {
+	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+}
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
@@ -548,7 +548,7 @@ export class BlockListBlock extends Component {
 		const shouldShowInsertionPoint = (
 			( ! isMultiSelected && ! isLast ) ||
 			( isMultiSelected && isLastInSelection ) ||
-			( isLast && ! rootUID )
+			( isLast && ! rootUID && ! isEmptyDefaultBlock )
 		);
 
 		// Generate the wrapper class names handling the different states of the block.

diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js
@@ -17,7 +17,6 @@ import {
 	getBlockIndex,
 	getBlockInsertionPoint,
 	isBlockInsertionPointVisible,
-	getBlockCount,
 	getBlock,
 	isTyping,
 } from '../../store/selectors';
@@ -58,7 +57,7 @@ class BlockInsertionPoint extends Component {
 export default connect(
 	( state, { uid, rootUID } ) => {
 		const blockIndex = uid ? getBlockIndex( state, uid, rootUID ) : -1;
-		const insertIndex = blockIndex > -1 ? blockIndex + 1 : getBlockCount( state );
+		const insertIndex = blockIndex + 1;
 		const insertionPoint = getBlockInsertionPoint( state );
 		const block = uid ? getBlock( state, uid ) : null;
 

diff --git a/editor/components/block-list/layout.js b/editor/components/block-list/layout.js
@@ -24,6 +24,7 @@ import { Component } from '@wordpress/element';
  */
 import './style.scss';
 import BlockListBlock from './block';
+import BlockInsertionPoint from './insertion-point';
 import BlockSelectionClearer from '../block-selection-clearer';
 import DefaultBlockAppender from '../default-block-appender';
 import {
@@ -215,6 +216,7 @@ class BlockListLayout extends Component {
 
 		return (
 			<BlockSelectionClearer className={ classes }>
+				{ !! blockUIDs.length && <BlockInsertionPoint /> }
 				{ map( blockUIDs, ( uid, blockIndex ) => (
 					<BlockListBlock
 						key={ 'block-' + uid }

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -371,6 +371,7 @@
 
 .editor-block-list__insertion-point {
 	position: relative;
+	z-index: z-index( '.editor-block-list__insertion-point' );
 }
 
 .editor-block-list__insertion-point-indicator {
@@ -383,11 +384,13 @@
 }
 
 .editor-block-list__insertion-point-inserter {
+	position: absolute;
 	background: none;
 	border: none;
 	display: block;
+	top: 0;
+	height: 34px; // Matches the whole empty space between two blocks
 	width: 100%;
-	height: 100%;
 	cursor: pointer;
 
 	&:before {
@@ -420,7 +423,21 @@
 	top: auto;
 	left: 0;
 	right: 0;
-	z-index: z-index( '.editor-block-list__block > .editor-block-list__insertion-point' );
+
+	@include break-small {
+		left: $block-mover-padding-visible;
+		right: $block-mover-padding-visible;
+	}
+}
+
+.editor-block-list__layout > .editor-block-list__insertion-point {
+	position: relative;
+	margin-top: -15px;
+	margin-left: auto;
+	margin-right: auto;
+	top: -19px;
+	left: 0;
+	right: 0;
 
 	@include break-small {
 		left: $block-mover-padding-visible;
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,3 +88,7 @@ @@
     		}
     	}
     }
+    .edit-post-visual-editor .editor-block-list__layout > .editor-block-list__insertion-point {
+    	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+    }