WIP

core-blocks/gallery/style.scss

@@ -39,6 +39,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,

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

@@ -12,20 +12,26 @@ import { withSelect, withDispatch } from '@wordpress/data';
  */
 import InserterMenu from './menu';
 
+export { default as InserterResultsPortal } from './results-portal';
+
 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
@@ -34,6 +40,36 @@ 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 {
 			items,
@@ -42,7 +78,9 @@ class Inserter extends Component {
 			children,
 			onInsertBlock,
 			rootUID,
+			onInsertInline,
 		} = this.props;
+		const { isInline } = this.state;
 
 		if ( items.length === 0 ) {
 			return null;
@@ -70,12 +108,15 @@ class Inserter extends Component {
 				) }
 				renderContent={ ( { onClose } ) => {
 					const onSelect = ( item ) => {
-						onInsertBlock( item );
+						if ( isInline ) {
+							onInsertInline( item );
+						} else {
+							onInsertBlock( item );
+						}
 
 						onClose();
 					};
-
-					return <InserterMenu items={ items } onSelect={ onSelect } rootUID={ rootUID } />;
+					return <InserterMenu items={ items } onSelect={ onSelect } rootUID={ rootUID } isInline={ isInline } />;
 				} }
 			/>
 		);
@@ -89,6 +130,7 @@ export default compose( [
 			getBlockInsertionPoint,
 			getSelectedBlock,
 			getInserterItems,
+			isInlineInsertAvailable,
 		} = select( 'core/editor' );
 		const insertionPoint = getBlockInsertionPoint();
 		const { rootUID } = insertionPoint;
@@ -98,6 +140,7 @@ export default compose( [
 			selectedBlock: getSelectedBlock(),
 			items: getInserterItems( rootUID ),
 			rootUID,
+			canInsertInline: isInlineInsertAvailable(),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => ( {
@@ -113,5 +156,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/menu.js

@@ -35,6 +35,7 @@ import './style.scss';
 import BlockPreview from '../block-preview';
 import ItemList from './item-list';
 import ChildBlocks from './child-blocks';
+import InserterResultsPortal from './results-portal';
 
 const MAX_SUGGESTED_ITEMS = 9;
 
@@ -158,7 +159,7 @@ export class InserterMenu extends Component {
 	}
 
 	render() {
-		const { instanceId, onSelect, rootUID } = this.props;
+		const { instanceId, onSelect, rootUID, isInline } = this.props;
 		const { childItems, hoveredItem, suggestedItems, sharedItems, itemsPerCategory, openPanels } = this.state;
 		const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1;
 
@@ -182,6 +183,8 @@ export class InserterMenu extends Component {
 				/>
 
 				<div className="editor-inserter__results">
+					<InserterResultsPortal.Slot />
+
 					<ChildBlocks
 						rootUID={ rootUID }
 						items={ childItems }
@@ -198,17 +201,27 @@ export class InserterMenu extends Component {
 							<ItemList items={ suggestedItems } onSelect={ onSelect } onHover={ this.onHover } />
 						</PanelBody>
 					}
+
 					{ map( getCategories(), ( category ) => {
 						const categoryItems = itemsPerCategory[ category.slug ];
 						if ( ! categoryItems || ! categoryItems.length ) {
 							return null;
 						}
+
+						if ( isInline && category.slug !== 'inline' ) {
+							return null;
+						}
+
+						if ( ! isInline && category.slug === 'inline' ) {
+							return null;
+						}
+
 						return (
 							<PanelBody
 								key={ category.slug }
 								title={ category.title }
-								opened={ isPanelOpen( category.slug ) }
-								onToggle={ this.onTogglePanel( category.slug ) }
+								opened={ isInline ? true : isPanelOpen( category.slug ) }
+								onToggle={ isInline ? null : this.onTogglePanel( category.slug ) }
 							>
 								<ItemList items={ categoryItems } onSelect={ onSelect } onHover={ this.onHover } />
 							</PanelBody>

editor/components/inserter/results-portal.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ItemList from './item-list';
+
+const { Fill, Slot } = createSlotFill( 'InserterResultsPortal' );
+
+const InserterResultsPortal = ( { items, title, onSelect } ) => {
+	return (
+		<Fill>
+			<PanelBody
+				title={ title }
+			>
+				<ItemList items={ items } onSelect={ onSelect } onHover={ () => {} } />
+			</PanelBody>
+		</Fill>
+	);
+};
+
+InserterResultsPortal.Slot = Slot;
+
+export default InserterResultsPortal;

editor/components/rich-text/core-tokens/image/index.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import MediaUpload from '../../../media-upload';
+
+export const name = 'core/image';
+
+export const settings = {
+	id: 'image',
+
+	title: __( 'Inline Image' ),
+
+	type: 'image',
+
+	icon: 'format-image',
+
+	category: 'inline',
+
+	edit( { onSave } ) {
+		return (
+			<MediaUpload
+				type="image"
+				onSelect={ ( media ) => onSave( media ) }
+				onClose={ () => onSave( null ) }
+				render={ ( { open } ) => {
+					open();
+					return null;
+				} }
+			/>
+		);
+	},
+
+	save( { id, url, alt, width } ) {
+		return (
+			<img
+				className={ `wp-image-${ id }` }
+				// set width in style attribute to prevent Block CSS from overriding it
+				style={ { width: `${ Math.min( width, 150 ) }px` } }
+				src={ url }
+				alt={ alt }
+			/>
+		);
+	},
+};

editor/components/rich-text/core-tokens/index.js

@@ -0,0 +1,10 @@
+import { registerToken } from '../tokens/registration';
+import * as image from './image';
+
+export const registerCoreTokens = () => {
+	[
+		image,
+	].forEach( ( { name, settings } ) => {
+		registerToken( name, settings );
+	} );
+};

editor/components/rich-text/index.js

@@ -42,6 +42,8 @@ import { pickAriaProps } from './aria';
 import patterns from './patterns';
 import { withBlockEditContext } from '../block-edit/context';
 import { domToFormat, valueToString } from './format';
+import { registerCoreTokens } from './core-tokens';
+import TokenUI from './tokens/ui';
 
 const { BACKSPACE, DELETE, ENTER, rawShortcut } = keycodes;
 
@@ -889,6 +891,12 @@ export class RichText extends Component {
 						{ formatToolbar }
 					</div>
 				) }
+				{ isSelected &&
+					<TokenUI
+						editor={ this.editor }
+						containerRef={ this.containerRef }
+					/>
+				}
 				<Autocomplete onReplace={ this.props.onReplace } completers={ autocompleters }>
 					{ ( { isExpanded, listBoxId, activeId } ) => (
 						<Fragment>
@@ -939,6 +947,8 @@ RichText.defaultProps = {
 	format: 'element',
 };
 
+registerCoreTokens();
+
 const RichTextContainer = compose( [
 	withInstanceId,
 	withBlockEditContext( ( context, ownProps ) => {

editor/components/rich-text/style.scss

@@ -61,6 +61,16 @@
 		}
 	}
 
+	img {
+		&[data-mce-selected] {
+			outline: none;
+		}
+
+		&::selection {
+			background: none !important;
+		}
+	}
+
 	&[data-is-placeholder-visible="true"] {
 		position: absolute;
 		top: 0;
@@ -80,6 +90,19 @@
 	&.mce-content-body {
 		line-height: $editor-line-height;
 	}
+
+	div.mce-resizehandle {
+		border-radius: 50%;
+		border: 1px solid $black;
+		width: 12px;
+		height: 12px;
+		background: $white;
+		box-sizing: border-box;
+
+		&:hover {
+			background: $white;
+		}
+	}
 }
 
 .editor-rich-text__inline-toolbar {
@@ -96,3 +119,11 @@
 		box-shadow: $shadow-toolbar;
 	}
 }
+
+.blocks-inline-insertion-point {
+	display: block;
+	z-index: 1;
+	width: 4px;
+	margin-left: -2px;
+	background: $blue-medium-500;
+}