Show inserter on slash: /+SEARCH

blocks/editable/patterns.js

@@ -31,6 +31,7 @@ export default function( editor ) {
 	const {
 		paste: pastePatterns,
 		enter: enterPatterns,
+		character: characterPatterns,
 		undefined: spacePatterns,
 	} = groupBy( getBlockTypes().reduce( ( acc, blockType ) => {
 		const transformsFrom = get( blockType, 'transforms.from', [] );
@@ -72,6 +73,7 @@ export default function( editor ) {
 			setTimeout( () => searchFirstText( spacePatterns ) );
 		} else if ( keyCode > 47 && ! ( keyCode >= 91 && keyCode <= 93 ) ) {
 			setTimeout( inline );
+			setTimeout( character );
 		}
 	}, true );
 
@@ -219,6 +221,37 @@ export default function( editor ) {
 		onReplace( [ block ] );
 	}
 
+	function character() {
+		if ( ! onReplace ) {
+			return;
+		}
+
+		// Merge text nodes.
+		editor.getBody().normalize();
+
+		const content = getContent();
+
+		if ( content.length !== 1 ) {
+			return;
+		}
+
+		const firstText = content[ 0 ];
+
+		if ( firstText.length !== 1 ) {
+			return;
+		}
+
+		const pattern = find( characterPatterns, { character: firstText } );
+
+		if ( ! pattern ) {
+			return;
+		}
+
+		const block = pattern.transform();
+
+		onReplace( [ block ] );
+	}
+
 	function enter() {
 		if ( ! onReplace ) {
 			return;

blocks/library/index.js

@@ -19,3 +19,4 @@ import './categories';
 import './cover-image';
 import './cover-text';
 import './verse';
+import './inserter';

blocks/library/inserter/block.scss

@@ -0,0 +1 @@
+

blocks/library/inserter/index.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { keycodes } from '@wordpress/utils';
+
+/**
+ * Internal dependencies
+ */
+import './block.scss';
+import { registerBlockType, createBlock } from '../../api';
+import InserterMenu from '../../../editor/inserter/menu';
+
+const { BACKSPACE, ESCAPE } = keycodes;
+
+registerBlockType( 'core/inserter', {
+	title: __( 'Inserter' ),
+
+	transforms: {
+		from: [
+			{
+				type: 'pattern',
+				trigger: 'character',
+				character: '/',
+				transform: () => createBlock( 'core/inserter' ),
+			},
+		],
+	},
+
+	edit( { className, onReplace } ) {
+		const onSelect = ( name ) => {
+			if ( ! name ) {
+				return;
+			}
+
+			onReplace( [
+				createBlock( name ),
+			] );
+		};
+
+		const onKeyDown = ( event ) => {
+			const { keyCode, target } = event;
+
+			if ( ( keyCode === BACKSPACE && target.value === '' ) || keyCode === ESCAPE ) {
+				event.preventDefault();
+				onReplace( [
+					createBlock( 'core/paragraph' ),
+				] );
+			}
+		};
+
+		const style = {
+			margin: 0,
+			border: '1px solid #e2e4e7',
+		};
+
+		/* eslint-disable jsx-a11y/no-static-element-interactions */
+		return (
+			<div
+				className={ `editor-inserter ${ className }` }
+				style={ style }
+				onKeyDown={ onKeyDown }
+			>
+				<InserterMenu onSelect={ onSelect } />
+			</div>
+		);
+		/* eslint-enable jsx-a11y/no-static-element-interactions */
+	},
+
+	save() {
+		return null;
+	},
+} );

blocks/test/fixtures/core__inserter.html

@@ -0,0 +1 @@
+<!-- wp:core/inserter /-->

blocks/test/fixtures/core__inserter.json

@@ -0,0 +1,8 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/inserter",
+        "isValid": true,
+        "attributes": {}
+    }
+]

blocks/test/fixtures/core__inserter.parsed.json

@@ -0,0 +1,11 @@
+[
+    {
+        "blockName": "core/inserter",
+        "attrs": null,
+        "rawContent": ""
+    },
+    {
+        "attrs": {},
+        "rawContent": "\n"
+    }
+]

blocks/test/fixtures/core__inserter.serialized.html

@@ -0,0 +1 @@
+<!-- wp:core/inserter /-->

editor/inserter/menu.js

@@ -11,7 +11,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { Popover, withFocusReturn, withInstanceId, withSpokenMessages } from '@wordpress/components';
 import { keycodes } from '@wordpress/utils';
-import { getCategories, getBlockTypes, BlockIcon } from '@wordpress/blocks';
+import { getCategories, getBlockTypes, BlockIcon } from '../../blocks';
 
 /**
  * Internal dependencies
@@ -31,6 +31,14 @@ export const searchBlocks = ( blocks, searchTerm ) => {
 	);
 };
 
+const Wrapper = ( { position, children, ...props } ) => {
+	if ( ! position ) {
+		return <div { ...props }>{ children }</div>;
+	}
+
+	return <Popover position={ position } { ...props }>{ children }</Popover>;
+};
+
 export class InserterMenu extends Component {
 	constructor() {
 		super( ...arguments );
@@ -291,8 +299,8 @@ export class InserterMenu extends Component {
 				onClick={ this.selectBlock( block.name ) }
 				ref={ this.bindReferenceNode( block.name ) }
 				tabIndex="-1"
-				onMouseEnter={ ! disabled && this.props.showInsertionPoint }
-				onMouseLeave={ ! disabled && this.props.hideInsertionPoint }
+				onMouseEnter={ !! this.props.position && ! disabled && this.props.showInsertionPoint }
+				onMouseLeave={ !! this.props.position && ! disabled && this.props.hideInsertionPoint }
 				disabled={ disabled }
 			>
 				<BlockIcon icon={ block.icon } />
@@ -306,13 +314,13 @@ export class InserterMenu extends Component {
 	}
 
 	render() {
-		const { position, instanceId } = this.props;
+		const { instanceId, position } = this.props;
 		const isSearching = this.state.filterValue;
 		const visibleBlocksByCategory = this.getVisibleBlocksByCategory( this.getBlocksForCurrentTab() );
 
 		/* eslint-disable jsx-a11y/no-autofocus */
 		return (
-			<Popover position={ position } className="editor-inserter__menu">
+			<Wrapper position={ position } className="editor-inserter__menu">
 				<label htmlFor={ `editor-inserter__search-${ instanceId }` } className="screen-reader-text">
 					{ __( 'Search blocks' ) }
 				</label>
@@ -422,7 +430,7 @@ export class InserterMenu extends Component {
 						</button>
 					</div>
 				}
-			</Popover>
+			</Wrapper>
 		);
 		/* eslint-enable jsx-a11y/no-autofocus */
 	}

editor/modes/visual-editor/block.js

@@ -86,6 +86,11 @@ class VisualEditorBlock extends Component {
 
 	componentDidMount() {
 		if ( this.props.focus ) {
+			// Already handled.
+			if ( this.node.contains( document.activeElement ) ) {
+				return;
+			}
+
 			this.node.focus();
 		}
 

editor/selectors.js

@@ -8,7 +8,7 @@ import createSelector from 'rememo';
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType } from '../blocks';
 import { __ } from '@wordpress/i18n';
 
 /**