Add Inline Images and Inline Blocks API

core-blocks/gallery/style.scss

@@ -38,6 +38,10 @@
 			width: 100%;
 			max-height: 100%;
 			overflow: auto;
+
+			img {
+				display: inline;
+			}
 		}
 	}
 

core-blocks/image/editor.scss

@@ -14,6 +14,10 @@
 	&.is-transient img {
 		@include loading_fade;
 	}
+
+	figcaption img {
+		display: inline;
+	}
 }
 
 .wp-block-image__resize-handler-top-right,

core-inline-blocks/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { registerInlineBlockType } from '../inline-blocks';
+
+/**
+ * Internal dependencies
+ */
+import * as inlineImage from './inline-image';
+
+export const registerCoreInlineBlocks = () => {
+	[
+		inlineImage,
+	].forEach( ( { name, settings } ) => {
+		registerInlineBlockType( name, settings );
+	} );
+};

core-inline-blocks/inline-image.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const settings = {
+	id: 'inline-image',
+
+	title: __( 'Inline Image' ),
+
+	type: 'image',
+
+	icon: 'format-image',
+
+	render( { id, url, alt, width } ) {
+		const imgWidth = width > 150 ? 150 : width;
+		// set width in style attribute to prevent Block CSS from overriding it
+		const img = `<img class="wp-image-${ id }" style="width:${ imgWidth }px;" src="${ url }" alt="${ alt }" />`;
+
+		return img;
+	},
+};
+
+export const name = 'core/inline-image';

edit-post/hooks/blocks/media-upload/index.js

@@ -81,6 +81,7 @@ class MediaUpload extends Component {
 		this.onOpen = this.onOpen.bind( this );
 		this.onSelect = this.onSelect.bind( this );
 		this.onUpdate = this.onUpdate.bind( this );
+		this.onClose = this.onClose.bind( this );
 		this.processMediaCaption = this.processMediaCaption.bind( this );
 
 		if ( gallery ) {
@@ -122,6 +123,7 @@ class MediaUpload extends Component {
 		this.frame.on( 'select', this.onSelect );
 		this.frame.on( 'update', this.onUpdate );
 		this.frame.on( 'open', this.onOpen );
+		this.frame.on( 'close', this.onClose );
 	}
 
 	componentWillUnmount() {
@@ -169,6 +171,14 @@ class MediaUpload extends Component {
 		getAttachmentsCollection( castArray( this.props.value ) ).more();
 	}
 
+	onClose() {
+		const { onClose } = this.props;
+
+		if ( onClose ) {
+			onClose();
+		}
+	}
+
 	openModal() {
 		this.frame.open();
 	}

editor/components/inserter/index.js

@@ -16,21 +16,26 @@ import { withSelect, withDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import InserterMenu from './menu';
+import InserterInlineMenu from './inline-menu';
 
 class Inserter extends Component {
 	constructor() {
 		super( ...arguments );
 
 		this.onToggle = this.onToggle.bind( this );
+		this.isInsertingInline = this.isInsertingInline.bind( this );
+		this.showInsertionPoint = this.showInsertionPoint.bind( this );
+		this.hideInsertionPoint = this.hideInsertionPoint.bind( this );
+		this.state = { isInline: false };
 	}
 
 	onToggle( isOpen ) {
 		const { onToggle } = this.props;
 
 		if ( isOpen ) {
-			this.props.showInsertionPoint();
+			this.showInsertionPoint();
 		} else {
-			this.props.hideInsertionPoint();
+			this.hideInsertionPoint();
 		}
 
 		// Surface toggle callback to parent component
@@ -39,15 +44,47 @@ class Inserter extends Component {
 		}
 	}
 
+	showInsertionPoint() {
+		const { showInlineInsertionPoint, showInsertionPoint } = this.props;
+
+		if ( this.isInsertingInline() ) {
+			this.setState( { isInline: true } );
+			showInlineInsertionPoint();
+		} else {
+			this.setState( { isInline: false } );
+			showInsertionPoint();
+		}
+	}
+
+	hideInsertionPoint() {
+		const { hideInlineInsertionPoint, hideInsertionPoint } = this.props;
+
+		if ( this.state.isInline ) {
+			hideInlineInsertionPoint();
+		} else {
+			hideInsertionPoint();
+		}
+	}
+
+	isInsertingInline() {
+		const { selectedBlock, canInsertInline } = this.props;
+
+		return selectedBlock &&
+			! isUnmodifiedDefaultBlock( selectedBlock ) &&
+			canInsertInline;
+	}
+
 	render() {
 		const {
 			position,
 			title,
 			children,
 			onInsertBlock,
+			onInsertInline,
 			hasSupportedBlocks,
 			isLocked,
 		} = this.props;
+		const { isInline } = this.state;
 
 		if ( ! hasSupportedBlocks || isLocked ) {
 			return null;
@@ -74,11 +111,23 @@ class Inserter extends Component {
 				) }
 				renderContent={ ( { onClose } ) => {
 					const onSelect = ( item ) => {
-						onInsertBlock( item );
+						if ( isInline ) {
+							onInsertInline( item.name );
+						} else {
+							onInsertBlock( item );
+						}
 
 						onClose();
 					};
 
+					if ( isInline ) {
+						return (
+							<InserterInlineMenu
+								onSelect={ onSelect }
+							/>
+						);
+					}
+
 					return <InserterMenu onSelect={ onSelect } />;
 				} }
 			/>
@@ -94,6 +143,7 @@ export default compose( [
 			getSelectedBlock,
 			getSupportedBlocks,
 			getEditorSettings,
+			isInlineInsertAvailable,
 		} = select( 'core/editor' );
 		const { allowedBlockTypes, templateLock } = getEditorSettings();
 		const insertionPoint = getBlockInsertionPoint();
@@ -105,6 +155,7 @@ export default compose( [
 			selectedBlock: getSelectedBlock(),
 			hasSupportedBlocks: true === supportedBlocks || ! isEmpty( supportedBlocks ),
 			isLocked: !! templateLock,
+			canInsertInline: isInlineInsertAvailable(),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => ( {
@@ -120,5 +171,8 @@ export default compose( [
 			}
 			return dispatch( 'core/editor' ).insertBlock( insertedBlock, index, rootUID );
 		},
+		showInlineInsertionPoint: dispatch( 'core/editor' ).showInlineInsertionPoint,
+		hideInlineInsertionPoint: dispatch( 'core/editor' ).hideInlineInsertionPoint,
+		onInsertInline: dispatch( 'core/editor' ).insertInline,
 	} ) ),
 ] )( Inserter );

editor/components/inserter/inline-menu.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
+import { registerCoreInlineBlocks } from '../../../core-inline-blocks';
+import { getInlineBlockTypes } from '../../../inline-blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InserterGroup from './group';
+
+// TODO: move this to lib/client-assets.php
+registerCoreInlineBlocks();
+
+export default class InserterInlineMenu extends Component {
+	render() {
+		const inlineBlocks = getInlineBlockTypes();
+
+		return (
+			<Fragment>
+				<div
+					className="editor-inserter__separator"
+					id="editor-inserter__separator-inline"
+					aria-hidden="true"
+				>
+					{ __( 'Inline Blocks' ) }
+				</div>
+				<InserterGroup
+					items={ inlineBlocks }
+					onSelectItem={ this.props.onSelect }
+				/>
+			</Fragment>
+		);
+	}
+}

editor/components/rich-text/index.js

@@ -39,6 +39,7 @@ import Autocomplete from '../autocomplete';
 import BlockFormatControls from '../block-format-controls';
 import FormatToolbar from './format-toolbar';
 import TinyMCE from './tinymce';
+import InlineBlocks from './inline-blocks';
 import { pickAriaProps } from './aria';
 import patterns from './patterns';
 import { EVENTS } from './constants';
@@ -122,6 +123,8 @@ export class RichText extends Component {
 		this.onPaste = this.onPaste.bind( this );
 		this.onCreateUndoLevel = this.onCreateUndoLevel.bind( this );
 		this.setFocusedElement = this.setFocusedElement.bind( this );
+		this.getFocusPosition = this.getFocusPosition.bind( this );
+		this.getInsertPosition = this.getInsertPosition.bind( this );
 
 		this.state = {
 			formats: {},
@@ -439,6 +442,18 @@ export class RichText extends Component {
 		};
 	}
 
+	getInsertPosition() {
+		// The container is relatively positioned.
+		const containerPosition = this.containerRef.current.getBoundingClientRect();
+		const rect = getRectangleFromRange( this.editor.selection.getRng() );
+
+		return {
+			top: rect.top - containerPosition.top,
+			left: rect.right - containerPosition.left,
+			height: rect.height,
+		};
+	}
+
 	/**
 	 * Handles a keydown event from tinyMCE.
 	 *
@@ -723,9 +738,12 @@ export class RichText extends Component {
 	}
 
 	componentDidUpdate( prevProps ) {
+		if ( ! this.editor ) {
+			return;
+		}
+
 		// The `savedContent` var allows us to avoid updating the content right after an `onChange` call
 		if (
-			!! this.editor &&
 			this.props.tagName === prevProps.tagName &&
 			this.props.value !== prevProps.value &&
 			this.props.value !== this.savedContent &&
@@ -871,6 +889,12 @@ export class RichText extends Component {
 						{ formatToolbar }
 					</div>
 				) }
+				{ isSelected &&
+					<InlineBlocks
+						editor={ this.editor }
+						getInsertPosition={ this.getInsertPosition }
+					/>
+				}
 				<Autocomplete onReplace={ this.props.onReplace } completers={ autocompleters }>
 					{ ( { isExpanded, listBoxId, activeId } ) => (
 						<Fragment>