From 5f006f6f8039ba87727e993fe561c859410bc385 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <iseulde@automattic.com>
Date: Thu, 21 Mar 2019 21:25:36 +0100
Subject: [PATCH 01/17] RichText: improve format boundary style (#14519)

* RichText: improve format boundary style

* rgb => rgba
---
 .../src/components/rich-text/index.js         | 34 +++++++++++++++++--
 .../src/components/rich-text/style.scss       | 21 ------------
 packages/block-library/src/cover/editor.scss  |  5 ---
 .../block-library/src/gallery/editor.scss     |  4 ---
 4 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 006ec4a697760..b49b05f63ad7c 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -82,6 +82,13 @@ const INSERTION_INPUT_TYPES_TO_IGNORE = new Set( [
 	'insertLink',
 ] );
 
+/**
+ * Global stylesheet.
+ */
+const globalStyle = document.createElement( 'style' );
+
+document.head.appendChild( globalStyle );
+
 export class RichText extends Component {
 	constructor( { value, onReplace, multiline } ) {
 		super( ...arguments );
@@ -472,10 +479,11 @@ export class RichText extends Component {
 			}
 
 			let selectedFormat;
+			const formatsAfter = formats[ start ] || [];
+			const collapsed = isCollapsed( value );
 
-			if ( isCollapsed( value ) ) {
+			if ( collapsed ) {
 				const formatsBefore = formats[ start - 1 ] || [];
-				const formatsAfter = formats[ start ] || [];
 
 				selectedFormat = Math.min( formatsBefore.length, formatsAfter.length );
 			}
@@ -484,6 +492,25 @@ export class RichText extends Component {
 			this.applyRecord( { ...value, selectedFormat }, { domOnly: true } );
 
 			delete this.formatPlaceholder;
+
+			if ( collapsed ? selectedFormat > 0 : formatsAfter.length > 0 ) {
+				this.recalculateBoundaryStyle();
+			}
+		}
+	}
+
+	recalculateBoundaryStyle() {
+		const boundarySelector = '*[data-rich-text-format-boundary]';
+		const element = this.editableRef.querySelector( boundarySelector );
+
+		if ( element ) {
+			const computedStyle = getComputedStyle( element );
+			const newColor = computedStyle.color
+				.replace( ')', ', 0.2)' )
+				.replace( 'rgb', 'rgba' );
+
+			globalStyle.innerHTML =
+				`${ boundarySelector }{background-color: ${ newColor }}`;
 		}
 	}
 
@@ -793,6 +820,9 @@ export class RichText extends Component {
 			}
 		}
 
+		// Wait for boundary class to be added.
+		setTimeout( () => this.recalculateBoundaryStyle() );
+
 		if ( newSelectedFormat !== selectedFormat ) {
 			this.applyRecord( { ...value, selectedFormat: newSelectedFormat } );
 			this.setState( { selectedFormat: newSelectedFormat } );
diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
index 16fdc282020e0..4a52ddb56fcd3 100644
--- a/packages/block-editor/src/components/rich-text/style.scss
+++ b/packages/block-editor/src/components/rich-text/style.scss
@@ -45,27 +45,6 @@
 
 		*[data-rich-text-format-boundary] {
 			border-radius: 2px;
-			box-shadow: 0 0 0 1px $light-gray-400;
-			background: $light-gray-400;
-
-			// Enforce a dark text color so active inline boundaries
-			// are always readable.
-			// See https://github.com/WordPress/gutenberg/issues/9508
-			color: $dark-gray-900;
-		}
-
-		// Link inline boundaries get special colors.
-		a[data-rich-text-format-boundary] {
-			box-shadow: 0 0 0 1px $blue-medium-100;
-			background: $blue-medium-100;
-			color: $blue-medium-900;
-		}
-
-		// <code> inline boundaries need special treatment because their
-		// un-selected style is already padded.
-		code[data-rich-text-format-boundary] {
-			background: $light-gray-400;
-			box-shadow: 0 0 0 1px $light-gray-400;
 		}
 	}
 
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index c74979dc0969d..b368b3ee24c05 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -1,10 +1,5 @@
 .wp-block-cover-image,
 .wp-block-cover {
-	.block-editor-rich-text__editable:focus a[data-rich-text-format-boundary] {
-		box-shadow: none;
-		background: rgba(255, 255, 255, 0.3);
-	}
-
 	&.components-placeholder h2 {
 		color: inherit;
 	}
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 0340f66a31e8e..34b08797e2e55 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -82,10 +82,6 @@ ul.wp-block-gallery li {
 		a {
 			color: $white;
 		}
-
-		&:focus a[data-rich-text-format-boundary] {
-			color: rgba(0, 0, 0, 0.2);
-		}
 	}
 }
 

From abc096d80b2f2e3a745b99b78fd334f36f1fd249 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <iseulde@automattic.com>
Date: Thu, 21 Mar 2019 21:41:10 +0100
Subject: [PATCH 02/17] Paste: check plain text for gutenberg content (#14536)

---
 packages/blocks/src/api/raw-handling/paste-handler.js | 11 ++++++++---
 test/integration/blocks-raw-handling.spec.js          |  8 ++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/blocks/src/api/raw-handling/paste-handler.js b/packages/blocks/src/api/raw-handling/paste-handler.js
index b40164f549689..1d67540c0b922 100644
--- a/packages/blocks/src/api/raw-handling/paste-handler.js
+++ b/packages/blocks/src/api/raw-handling/paste-handler.js
@@ -127,9 +127,14 @@ export function pasteHandler( { HTML = '', plainText = '', mode = 'AUTO', tagNam
 	// First of all, strip any meta tags.
 	HTML = HTML.replace( /<meta[^>]+>/, '' );
 
-	// If we detect block delimiters, parse entirely as blocks.
-	if ( mode !== 'INLINE' && HTML.indexOf( '<!-- wp:' ) !== -1 ) {
-		return parseWithGrammar( HTML );
+	// If we detect block delimiters in HTML, parse entirely as blocks.
+	if ( mode !== 'INLINE' ) {
+		// Check plain text if there is no HTML.
+		const content = HTML ? HTML : plainText;
+
+		if ( content.indexOf( '<!-- wp:' ) !== -1 ) {
+			return parseWithGrammar( content );
+		}
 	}
 
 	// Normalize unicode to use composed characters.
diff --git a/test/integration/blocks-raw-handling.spec.js b/test/integration/blocks-raw-handling.spec.js
index 72426e00094fb..83315ba0d38a6 100644
--- a/test/integration/blocks-raw-handling.spec.js
+++ b/test/integration/blocks-raw-handling.spec.js
@@ -221,6 +221,14 @@ describe( 'Blocks raw handling', () => {
 		expect( console ).toHaveLogged();
 	} );
 
+	it( 'should paste gutenberg content from plain text', () => {
+		const block = '<!-- wp:latest-posts /-->';
+		expect( serialize( pasteHandler( {
+			plainText: block,
+			mode: 'AUTO',
+		} ) ) ).toBe( block );
+	} );
+
 	describe( 'pasteHandler', () => {
 		[
 			'plain',

From afc5b0f538e4400544402c4874147553745077ee Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 22 Mar 2019 06:01:08 +0900
Subject: [PATCH 03/17] Make ClipboardButton inside a block work correctly in
 Safari (#7106)

* Make ClipboardButton inside a block work in Safari

* Update changelogs

* Block Editor: Update "Next" to "Unreleased" per guidelines

https://github.com/WordPress/gutenberg/blob/master/packages/README.md#maintaining-changelogs
---
 packages/block-editor/CHANGELOG.md            |  6 ++++
 .../src/components/copy-handler/index.js      | 28 ++++---------------
 packages/edit-post/CHANGELOG.md               |  4 ++-
 .../src/components/visual-editor/index.js     |  7 +++--
 4 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 5c4cae61450ac..4306b855955f5 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 2.0.0 (Unreleased)
+
+### Breaking Changes
+
+- `CopyHandler` will now only catch cut/copy events coming from its `props.children`, instead of from anywhere in the `document`.
+
 ## 1.0.0 (2019-03-06)
 
 ### New Features
diff --git a/packages/block-editor/src/components/copy-handler/index.js b/packages/block-editor/src/components/copy-handler/index.js
index 3942eaae71b03..3f73d5f672c15 100644
--- a/packages/block-editor/src/components/copy-handler/index.js
+++ b/packages/block-editor/src/components/copy-handler/index.js
@@ -1,33 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
 import { serialize } from '@wordpress/blocks';
 import { documentHasSelection } from '@wordpress/dom';
 import { withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
-class CopyHandler extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onCopy = ( event ) => this.props.onCopy( event );
-		this.onCut = ( event ) => this.props.onCut( event );
-	}
-
-	componentDidMount() {
-		document.addEventListener( 'copy', this.onCopy );
-		document.addEventListener( 'cut', this.onCut );
-	}
-
-	componentWillUnmount() {
-		document.removeEventListener( 'copy', this.onCopy );
-		document.removeEventListener( 'cut', this.onCut );
-	}
-
-	render() {
-		return null;
-	}
+function CopyHandler( { children, onCopy, onCut } ) {
+	return (
+		<div onCopy={ onCopy } onCut={ onCut }>
+			{ children }
+		</div>
+	);
 }
 
 export default compose( [
diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
index db8c68da54229..4e58838aade5e 100644
--- a/packages/edit-post/CHANGELOG.md
+++ b/packages/edit-post/CHANGELOG.md
@@ -5,7 +5,9 @@
 * Expose the `className` property to style the `PluginSidebar` component.
 
 ### Bug Fixes
- - Fix 'save' keyboard shortcut not functioning in the Code Editor.
+
+- Fix 'save' keyboard shortcut not functioning in the Code Editor.
+- Prevent `ClipboardButton` from incorrectly copying a serialized block string instead of the intended text in Safari.
 
 ## 3.1.7 (2019-01-03)
 
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index eadf8a5fc461d..ca6a1c45212b6 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -26,12 +26,13 @@ function VisualEditor() {
 	return (
 		<BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper">
 			<VisualEditorGlobalKeyboardShortcuts />
-			<CopyHandler />
 			<MultiSelectScrollIntoView />
 			<WritingFlow>
 				<ObserveTyping>
-					<PostTitle />
-					<BlockList />
+					<CopyHandler>
+						<PostTitle />
+						<BlockList />
+					</CopyHandler>
 				</ObserveTyping>
 			</WritingFlow>
 			<_BlockSettingsMenuFirstItem>

From 3a8af4ce78a5eb0d5827da913e63088683f8458d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <iseulde@automattic.com>
Date: Fri, 22 Mar 2019 14:19:18 +0100
Subject: [PATCH 04/17] Input Interaction: always expand single line selection
 vertically (#14487)

* Input Interaction: always expand single line selection vertically

* Add e2e test
---
 packages/dom/src/dom.js                       | 29 ++++++++++---------
 .../multi-block-selection.test.js.snap        |  2 ++
 .../specs/multi-block-selection.test.js       | 13 +++++++++
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
index 4ea9ad8c0ef78..b3b0f7b6df89d 100644
--- a/packages/dom/src/dom.js
+++ b/packages/dom/src/dom.js
@@ -169,16 +169,6 @@ export function isVerticalEdge( container, isReverse ) {
 	}
 
 	const selection = window.getSelection();
-
-	// Only consider the selection at the edge if the direction is towards the
-	// edge.
-	if (
-		! selection.isCollapsed &&
-		isSelectionForward( selection ) === isReverse
-	) {
-		return false;
-	}
-
 	const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null;
 
 	if ( ! range ) {
@@ -191,14 +181,25 @@ export function isVerticalEdge( container, isReverse ) {
 		return false;
 	}
 
-	const editableRect = container.getBoundingClientRect();
-
 	// Calculate a buffer that is half the line height. In some browsers, the
 	// selection rectangle may not fill the entire height of the line, so we add
 	// half the line height to the selection rectangle to ensure that it is well
 	// over its line boundary.
-	const { lineHeight } = window.getComputedStyle( container );
-	const buffer = parseInt( lineHeight, 10 ) / 2;
+	const computedStyle = window.getComputedStyle( container );
+	const lineHeight = parseInt( computedStyle.lineHeight, 10 );
+
+	// Only consider the multiline selection at the edge if the direction is
+	// towards the edge.
+	if (
+		! selection.isCollapsed &&
+		rangeRect.height > lineHeight &&
+		isSelectionForward( selection ) === isReverse
+	) {
+		return false;
+	}
+
+	const editableRect = container.getBoundingClientRect();
+	const buffer = lineHeight / 2;
 
 	// Too low.
 	if ( isReverse && rangeRect.top - buffer > editableRect.top ) {
diff --git a/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap b/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap
index 6986ffc94968b..f68e40f606dc4 100644
--- a/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap
+++ b/packages/e2e-tests/specs/__snapshots__/multi-block-selection.test.js.snap
@@ -6,6 +6,8 @@ exports[`Multi-block selection should allow selecting outer edge if there is no
 <!-- /wp:paragraph -->"
 `;
 
+exports[`Multi-block selection should always expand single line selection 1`] = `""`;
+
 exports[`Multi-block selection should only trigger multi-selection when at the end 1`] = `
 "<!-- wp:paragraph -->
 <p>1.</p>
diff --git a/packages/e2e-tests/specs/multi-block-selection.test.js b/packages/e2e-tests/specs/multi-block-selection.test.js
index 76ea211367660..6bf7a62bf7789 100644
--- a/packages/e2e-tests/specs/multi-block-selection.test.js
+++ b/packages/e2e-tests/specs/multi-block-selection.test.js
@@ -181,6 +181,19 @@ describe( 'Multi-block selection', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'should always expand single line selection', async () => {
+		await clickBlockAppender();
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '12' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await pressKeyWithModifier( 'shift', 'ArrowRight' );
+		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+		// This delete all blocks.
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	it( 'should allow selecting outer edge if there is no sibling block', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '1' );

From 9b594f1ca1de7081b00b916bf1412e31830717f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s?= <nosolosw@users.noreply.github.com>
Date: Fri, 22 Mar 2019 18:31:26 +0100
Subject: [PATCH 05/17] Use MenuItem instead of IconButton (#14569)

---
 .../block-settings-menu/plugin-block-settings-menu-item.js  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js b/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js
index 810d558346cc7..7a7451a983ce3 100644
--- a/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js
+++ b/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js
@@ -6,7 +6,7 @@ import { difference } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { IconButton } from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 
 /**
@@ -89,7 +89,7 @@ const PluginBlockSettingsMenuItem = ( { allowedBlocks, icon, label, onClick, sma
 			if ( ! shouldRenderItem( selectedBlocks, allowedBlocks ) ) {
 				return null;
 			}
-			return ( <IconButton
+			return ( <MenuItem
 				className="editor-block-settings-menu__control"
 				onClick={ compose( onClick, onClose ) }
 				icon={ icon || 'admin-plugins' }
@@ -97,7 +97,7 @@ const PluginBlockSettingsMenuItem = ( { allowedBlocks, icon, label, onClick, sma
 				role={ role }
 			>
 				{ ! small && label }
-			</IconButton> );
+			</MenuItem> );
 		} }
 	</PluginBlockSettingsMenuGroup>
 );

From cbaf41f529e369174d572196083007cc50b745b7 Mon Sep 17 00:00:00 2001
From: Jackie6 <541172791@qq.com>
Date: Fri, 22 Mar 2019 14:26:30 -0400
Subject: [PATCH 06/17] Remove id, infoid, label and aria-describedby from
 MenuItem (#14423)

---
 .../block-settings-menu/block-convert-button.js          | 1 -
 .../components/block-settings-menu/block-mode-toggle.js  | 1 -
 packages/components/src/menu-item/README.md              | 9 ---------
 packages/components/src/menu-item/index.js               | 7 -------
 .../src/menu-item/test/__snapshots__/index.js.snap       | 2 --
 packages/components/src/menu-item/test/index.js          | 2 +-
 .../src/components/header/feature-toggle/index.js        | 1 -
 .../test/__snapshots__/index.js.snap                     | 1 +
 .../components/visual-editor/block-inspector-button.js   | 1 -
 9 files changed, 2 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/components/block-settings-menu/block-convert-button.js b/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
index 2ae65fed66cfd..f27cac38b1df9 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
@@ -15,7 +15,6 @@ export default function BlockConvertButton( { shouldRender, onClick, small } ) {
 			className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
 			onClick={ onClick }
 			icon="screenoptions"
-			label={ small ? label : undefined }
 		>
 			{ ! small && label }
 		</MenuItem>
diff --git a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
index 8ba029fd1794c..3f8260d135e44 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
@@ -26,7 +26,6 @@ export function BlockModeToggle( { blockType, mode, onToggleMode, small = false
 			className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
 			onClick={ onToggleMode }
 			icon="html"
-			label={ small ? label : undefined }
 		>
 			{ ! small && label }
 		</MenuItem>
diff --git a/packages/components/src/menu-item/README.md b/packages/components/src/menu-item/README.md
index eacd6770f7aaf..38251ccedf261 100644
--- a/packages/components/src/menu-item/README.md
+++ b/packages/components/src/menu-item/README.md
@@ -34,15 +34,6 @@ Element to render as child of button.
 
 Element
 
-### `label`
-
-- Type: `string`
-- Required: No
-
-String to use as primary button label text, applied as `aria-label`. Useful in cases where an `info` prop is passed, where `label` should be the minimal text of the button, described in further detail by `info`.
-
-Defaults to the value of `children`, if `children` is passed as a string.
-
 ### `info`
 
 - Type: `string`
diff --git a/packages/components/src/menu-item/index.js b/packages/components/src/menu-item/index.js
index 860430b4ecb67..1b793a2c5cf26 100644
--- a/packages/components/src/menu-item/index.js
+++ b/packages/components/src/menu-item/index.js
@@ -30,7 +30,6 @@ export function MenuItem( {
 	shortcut,
 	isSelected,
 	role = 'menuitem',
-	instanceId,
 	...props
 } ) {
 	className = classnames( 'components-menu-item__button', className, {
@@ -38,16 +37,10 @@ export function MenuItem( {
 	} );
 
 	if ( info ) {
-		const infoId = 'edit-post-feature-toggle__info-' + instanceId;
-
-		// Deconstructed props is scoped to the function; mutation is fine.
-		props[ 'aria-describedby' ] = infoId;
-
 		children = (
 			<span className="components-menu-item__info-wrapper">
 				{ children }
 				<span
-					id={ infoId }
 					className="components-menu-item__info">
 					{ info }
 				</span>
diff --git a/packages/components/src/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap
index a0f00b2889f00..d029c29c0cb3a 100644
--- a/packages/components/src/menu-item/test/__snapshots__/index.js.snap
+++ b/packages/components/src/menu-item/test/__snapshots__/index.js.snap
@@ -18,7 +18,6 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
 
 exports[`MenuItem should match snapshot when info is provided 1`] = `
 <ForwardRef(Button)
-  aria-describedby="edit-post-feature-toggle__info-1"
   className="components-menu-item__button"
   role="menuitem"
 >
@@ -28,7 +27,6 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
     My item
     <span
       className="components-menu-item__info"
-      id="edit-post-feature-toggle__info-1"
     >
       Extended description of My Item
     </span>
diff --git a/packages/components/src/menu-item/test/index.js b/packages/components/src/menu-item/test/index.js
index f521add7452c8..63ac41b337dff 100644
--- a/packages/components/src/menu-item/test/index.js
+++ b/packages/components/src/menu-item/test/index.js
@@ -54,7 +54,7 @@ describe( 'MenuItem', () => {
 
 	it( 'should match snapshot when info is provided', () => {
 		const wrapper = shallow(
-			<MenuItem info="Extended description of My Item" instanceId={ 1 }>
+			<MenuItem info="Extended description of My Item">
 				My item
 			</MenuItem>
 		);
diff --git a/packages/edit-post/src/components/header/feature-toggle/index.js b/packages/edit-post/src/components/header/feature-toggle/index.js
index 4e0df7f3749b0..b855ca046c386 100644
--- a/packages/edit-post/src/components/header/feature-toggle/index.js
+++ b/packages/edit-post/src/components/header/feature-toggle/index.js
@@ -26,7 +26,6 @@ function FeatureToggle( { onToggle, isActive, label, info, messageActivated, mes
 			isSelected={ isActive }
 			onClick={ flow( onToggle, speakMessage ) }
 			role="menuitemcheckbox"
-			label={ label }
 			info={ info }
 		>
 			{ label }
diff --git a/packages/edit-post/src/components/header/plugin-more-menu-item/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/plugin-more-menu-item/test/__snapshots__/index.js.snap
index 6e395b2e7ebae..7fa0869a60f22 100644
--- a/packages/edit-post/src/components/header/plugin-more-menu-item/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/header/plugin-more-menu-item/test/__snapshots__/index.js.snap
@@ -18,6 +18,7 @@ exports[`PluginMoreMenuItem renders menu item as button properly 1`] = `
   >
     <button
       className="components-button components-icon-button components-menu-item__button has-icon has-text"
+      instanceId={0}
       onClick={[Function]}
       role="menuitem"
       type="button"
diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js
index 283c3f99b86a7..cf73fe27de92f 100644
--- a/packages/edit-post/src/components/visual-editor/block-inspector-button.js
+++ b/packages/edit-post/src/components/visual-editor/block-inspector-button.js
@@ -39,7 +39,6 @@ export function BlockInspectorButton( {
 			className="editor-block-settings-menu__control block-editor-block-settings-menu__control"
 			onClick={ flow( areAdvancedSettingsOpened ? closeSidebar : openEditorSidebar, speakMessage, onClick ) }
 			icon="admin-generic"
-			label={ small ? label : undefined }
 			shortcut={ shortcuts.toggleSidebar }
 		>
 			{ ! small && label }

From a7c672235c7c0b02a80ab64ddb02eb822e5e30e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <iseulde@automattic.com>
Date: Wed, 27 Mar 2019 15:50:02 +0100
Subject: [PATCH 07/17] Preformatted: save line breaks as characters (#14653)

* Preformatted: save line breaks as characters

* Update e2e test
---
 packages/block-library/src/preformatted/index.js            | 6 +++++-
 .../specs/__snapshots__/adding-blocks.test.js.snap          | 4 +++-
 .../specs/blocks/__snapshots__/preformatted.test.js.snap    | 4 +++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js
index 7d90224f9639c..9553ac77885f9 100644
--- a/packages/block-library/src/preformatted/index.js
+++ b/packages/block-library/src/preformatted/index.js
@@ -68,10 +68,14 @@ export const settings = {
 		return (
 			<RichText
 				tagName="pre"
+				// Ensure line breaks are normalised to HTML.
 				value={ content.replace( /\n/g, '<br>' ) }
 				onChange={ ( nextContent ) => {
 					setAttributes( {
-						content: nextContent,
+						// Ensure line breaks are normalised to characters. This
+						// saves space, is easier to read, and ensures display
+						// filters work correctly.
+						content: nextContent.replace( /<br ?\/?>/g, '\n' ),
 					} );
 				} }
 				placeholder={ __( 'Write preformatted text…' ) }
diff --git a/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap b/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap
index 30b83349a7030..b8160cb3842ef 100644
--- a/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap
+++ b/packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap
@@ -42,7 +42,9 @@ exports[`adding blocks Should insert content using the placeholder and the regul
 <!-- /wp:quote -->
 
 <!-- wp:preformatted -->
-<pre class=\\"wp-block-preformatted\\">Pre text<br><br>Foo</pre>
+<pre class=\\"wp-block-preformatted\\">Pre text
+
+Foo</pre>
 <!-- /wp:preformatted -->
 
 <!-- wp:shortcode -->
diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/preformatted.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/preformatted.test.js.snap
index 4538816e15b41..07a70a19a6b2b 100644
--- a/packages/e2e-tests/specs/blocks/__snapshots__/preformatted.test.js.snap
+++ b/packages/e2e-tests/specs/blocks/__snapshots__/preformatted.test.js.snap
@@ -9,6 +9,8 @@ exports[`Preformatted should preserve character newlines 1`] = `
 
 exports[`Preformatted should preserve character newlines 2`] = `
 "<!-- wp:preformatted -->
-<pre class=\\"wp-block-preformatted\\">0<br>1<br>2</pre>
+<pre class=\\"wp-block-preformatted\\">0
+1
+2</pre>
 <!-- /wp:preformatted -->"
 `;

From 9f9202a896e12635dfd7210a2aa3161c71740801 Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Thu, 28 Mar 2019 09:01:46 -0400
Subject: [PATCH 08/17] Remove negative toolbar position rules from
 full-aligned blocks. (#14669)

---
 packages/block-editor/src/components/block-list/style.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 4a72cb3ed3423..5f48fe5a165db 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -904,6 +904,12 @@
 	.block-editor-block-contextual-toolbar > * {
 		pointer-events: auto;
 	}
+
+	// Full-aligned blocks have negative margins on the parent of the toolbar, so additional position adjustment is not required.
+	&[data-align="full"] .block-editor-block-contextual-toolbar {
+		left: 0;
+		right: 0;
+	}
 }
 
 .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) > .block-editor-block-contextual-toolbar {

From 6eaa928b8909f2b7d5acd9d1c8f37e01f9604847 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Fri, 29 Mar 2019 05:55:52 +0100
Subject: [PATCH 09/17] Fix issue with double scrollbar in Fullscreen Mode
 (#14677)

This PR fixes an issue where the sidebar would have two scrollbars when in fullscreen mode.
---
 packages/edit-post/src/components/sidebar/style.scss | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
index 793088a039091..62936b0f0a7ff 100644
--- a/packages/edit-post/src/components/sidebar/style.scss
+++ b/packages/edit-post/src/components/sidebar/style.scss
@@ -40,17 +40,10 @@
 		z-index: z-index(".edit-post-sidebar .components-panel");
 
 		@include break-small() {
-			overflow: inherit;
+			overflow: hidden;
 			height: auto;
 			max-height: none;
 		}
-
-		@include break-medium() {
-
-			body.is-fullscreen-mode & {
-				max-height: calc(100vh - #{ $panel-header-height });
-			}
-		}
 	}
 
 	> .components-panel .components-panel__header {

From b0807c42f35eeb08b71811d81a5ec1c194843708 Mon Sep 17 00:00:00 2001
From: Nicola Heald <nicola@notnowlewis.com>
Date: Fri, 29 Mar 2019 10:30:50 +0000
Subject: [PATCH 10/17] Fix WordPress embed block resolution (#14658)

---
 packages/block-library/src/embed/util.js   |  2 +-
 packages/e2e-tests/specs/embedding.test.js | 25 ++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js
index 085ea4b22ff8c..9cba9f5036474 100644
--- a/packages/block-library/src/embed/util.js
+++ b/packages/block-library/src/embed/util.js
@@ -46,7 +46,7 @@ export const findBlock = ( url ) => {
 };
 
 export const isFromWordPress = ( html ) => {
-	return includes( html, 'class="wp-embedded-content" data-secret' );
+	return includes( html, 'class="wp-embedded-content"' );
 };
 
 export const getPhotoHtml = ( photo ) => {
diff --git a/packages/e2e-tests/specs/embedding.test.js b/packages/e2e-tests/specs/embedding.test.js
index 3ea51358b14b2..4433531316109 100644
--- a/packages/e2e-tests/specs/embedding.test.js
+++ b/packages/e2e-tests/specs/embedding.test.js
@@ -9,6 +9,8 @@ import {
 	createJSONResponse,
 	getEditedPostContent,
 	clickButton,
+	insertBlock,
+	publishPost,
 } from '@wordpress/e2e-test-utils';
 
 const MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE = {
@@ -192,4 +194,27 @@ describe( 'Embedding content', () => {
 		await clickButton( 'Try again' );
 		await page.waitForSelector( 'figure.wp-block-embed-twitter' );
 	} );
+
+	it( 'should switch to the WordPress block correctly', async () => {
+		// This test is to make sure that WordPress embeds are detected correctly,
+		// because the HTML can vary, and the block is detected by looking for
+		// classes in the HTML, so we need to flag up if the HTML changes.
+
+		// Publish a post to embed.
+		await insertBlock( 'Paragraph' );
+		await page.keyboard.type( 'Hello there!' );
+		await publishPost();
+		const postUrl = await page.$eval( '#inspector-text-control-0', ( el ) => el.value );
+
+		// Start a new post, embed the previous post.
+		await createNewPost();
+		await clickBlockAppender();
+		await page.keyboard.type( '/embed' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( postUrl );
+		await page.keyboard.press( 'Enter' );
+
+		// Check the block has become a WordPress block.
+		await page.waitForSelector( '.wp-block-embed-wordpress' );
+	} );
 } );

From 96ea2a2dab840c04d3a18f93601fb051b1946843 Mon Sep 17 00:00:00 2001
From: Nicola Heald <nicola@notnowlewis.com>
Date: Fri, 29 Mar 2019 15:45:24 +0000
Subject: [PATCH 11/17] Retry failing embeds with trailing slash (#14705)

* Fix embedding Twitter URLs with a trailing slash (Closes #12664)

* Fix race condition for WordPress URLs that end in slashes, add test
---
 packages/block-library/src/embed/edit.js   | 13 ++++++++++++-
 packages/e2e-tests/specs/embedding.test.js | 19 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index 0e251a8f0aafd..fcc305d9e8a7c 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -61,13 +61,24 @@ export function getEmbedEditComponent( title, icon, responsive = true ) {
 
 			if ( switchedPreview || switchedURL ) {
 				if ( this.props.cannotEmbed ) {
-					// Can't embed this URL, and we've just received or switched the preview.
+					// We either have a new preview or a new URL, but we can't embed it.
+					if ( ! this.props.fetching ) {
+						// If we're not fetching the preview, then we know it can't be embedded, so try
+						// removing any trailing slash, and resubmit.
+						this.resubmitWithoutTrailingSlash();
+					}
 					return;
 				}
 				this.handleIncomingPreview();
 			}
 		}
 
+		resubmitWithoutTrailingSlash() {
+			this.setState( ( prevState ) => ( {
+				url: prevState.url.replace( /\/$/, '' ),
+			} ), this.setUrl );
+		}
+
 		setUrl( event ) {
 			if ( event ) {
 				event.preventDefault();
diff --git a/packages/e2e-tests/specs/embedding.test.js b/packages/e2e-tests/specs/embedding.test.js
index 4433531316109..6fb26c02281c7 100644
--- a/packages/e2e-tests/specs/embedding.test.js
+++ b/packages/e2e-tests/specs/embedding.test.js
@@ -62,6 +62,10 @@ const MOCK_BAD_WORDPRESS_RESPONSE = {
 };
 
 const MOCK_RESPONSES = [
+	{
+		match: createEmbeddingMatcher( 'https://wordpress.org/gutenberg/handbook' ),
+		onRequestMatch: createJSONResponse( MOCK_BAD_WORDPRESS_RESPONSE ),
+	},
 	{
 		match: createEmbeddingMatcher( 'https://wordpress.org/gutenberg/handbook/' ),
 		onRequestMatch: createJSONResponse( MOCK_BAD_WORDPRESS_RESPONSE ),
@@ -82,6 +86,10 @@ const MOCK_RESPONSES = [
 		match: createEmbeddingMatcher( 'https://twitter.com/notnownikki' ),
 		onRequestMatch: createJSONResponse( MOCK_EMBED_RICH_SUCCESS_RESPONSE ),
 	},
+	{
+		match: createEmbeddingMatcher( 'https://twitter.com/notnownikki/' ),
+		onRequestMatch: createJSONResponse( MOCK_CANT_EMBED_RESPONSE ),
+	},
 	{
 		match: createEmbeddingMatcher( 'https://twitter.com/thatbunty' ),
 		onRequestMatch: createJSONResponse( MOCK_BAD_EMBED_PROVIDER_RESPONSE ),
@@ -175,6 +183,17 @@ describe( 'Embedding content', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'should retry embeds that could not be embedded with trailing slashes, without the trailing slashes', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '/embed' );
+		await page.keyboard.press( 'Enter' );
+		// This URL can't be embedded, but without the trailing slash, it can.
+		await page.keyboard.type( 'https://twitter.com/notnownikki/' );
+		await page.keyboard.press( 'Enter' );
+		// The twitter block should appear correctly.
+		await page.waitForSelector( 'figure.wp-block-embed-twitter' );
+	} );
+
 	it( 'should allow the user to try embedding a failed URL again', async () => {
 		// URL that can't be embedded.
 		await clickBlockAppender();

From e5ec758f152dc892eb6b5d1a0a9c00511824eb96 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Sat, 30 Mar 2019 09:52:33 -0400
Subject: [PATCH 12/17] API Fetch: Fix error on empty OPTIONS preload data
 (#14714)

---
 .../api-fetch/src/middlewares/preloading.js   |  6 +++-
 .../src/middlewares/test/preloading.js        | 35 ++++++++++++-------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/api-fetch/src/middlewares/preloading.js b/packages/api-fetch/src/middlewares/preloading.js
index 020cb913fced1..4de356243b736 100644
--- a/packages/api-fetch/src/middlewares/preloading.js
+++ b/packages/api-fetch/src/middlewares/preloading.js
@@ -34,7 +34,11 @@ const createPreloadingMiddleware = ( preloadedData ) => ( options, next ) => {
 
 		if ( parse && 'GET' === method && preloadedData[ path ] ) {
 			return Promise.resolve( preloadedData[ path ].body );
-		} else if ( 'OPTIONS' === method && preloadedData[ method ][ path ] ) {
+		} else if (
+			'OPTIONS' === method &&
+			preloadedData[ method ] &&
+			preloadedData[ method ][ path ]
+		) {
 			return Promise.resolve( preloadedData[ method ][ path ] );
 		}
 	}
diff --git a/packages/api-fetch/src/middlewares/test/preloading.js b/packages/api-fetch/src/middlewares/test/preloading.js
index d697af3b42949..e2d8a1f4d0c68 100644
--- a/packages/api-fetch/src/middlewares/test/preloading.js
+++ b/packages/api-fetch/src/middlewares/test/preloading.js
@@ -25,20 +25,29 @@ describe( 'Preloading Middleware', () => {
 		} );
 	} );
 
-	it( 'should move to the next middleware if no preloaded data', () => {
-		const preloadedData = {};
-		const prelooadingMiddleware = createPreloadingMiddleware( preloadedData );
-		const requestOptions = {
-			method: 'GET',
-			path: 'wp/v2/posts',
-		};
+	describe.each( [
+		[ 'GET' ],
+		[ 'OPTIONS' ],
+	] )( '%s', ( method ) => {
+		describe.each( [
+			[ 'all empty', {} ],
+			[ 'method empty', { [ method ]: {} } ],
+		] )( '%s', ( label, preloadedData ) => {
+			it( 'should move to the next middleware if no preloaded data', () => {
+				const prelooadingMiddleware = createPreloadingMiddleware( preloadedData );
+				const requestOptions = {
+					method,
+					path: 'wp/v2/posts',
+				};
 
-		const callback = ( options ) => {
-			expect( options ).toBe( requestOptions );
-			return true;
-		};
+				const callback = ( options ) => {
+					expect( options ).toBe( requestOptions );
+					return true;
+				};
 
-		const ret = prelooadingMiddleware( requestOptions, callback );
-		expect( ret ).toBe( true );
+				const ret = prelooadingMiddleware( requestOptions, callback );
+				expect( ret ).toBe( true );
+			} );
+		} );
 	} );
 } );

From 4f70e4506f66124e3ff1a91bee4174a6d461c8c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <iseulde@automattic.com>
Date: Thu, 28 Mar 2019 10:33:25 +0100
Subject: [PATCH 13/17] Input Interaction: better horizontal edge detection
 (#14462)

* Input Interaction: better horizontal edge detection

* Correct BR ranges

* Add e2e test

* Increase buffer for Firefox

* Clean up

* Merge isEdge logic

* Fix typo

* Address feedback

* Build docs
---
 packages/dom/README.md                        |   2 +-
 packages/dom/src/dom.js                       | 177 ++++++++----------
 .../__snapshots__/writing-flow.test.js.snap   |  10 +
 packages/e2e-tests/specs/writing-flow.test.js |  12 ++
 4 files changed, 97 insertions(+), 104 deletions(-)

diff --git a/packages/dom/README.md b/packages/dom/README.md
index bf572a4741b50..c6b9945545602 100644
--- a/packages/dom/README.md
+++ b/packages/dom/README.md
@@ -170,7 +170,7 @@ Check whether the selection is vertically at the edge of the container.
 
 **Returns**
 
-`boolean`: True if at the edge, false if not.
+`boolean`: True if at the vertical edge, false if not.
 
 ### placeCaretAtHorizontalEdge
 
diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
index b3b0f7b6df89d..87be698a3be8d 100644
--- a/packages/dom/src/dom.js
+++ b/packages/dom/src/dom.js
@@ -60,14 +60,17 @@ function isSelectionForward( selection ) {
 }
 
 /**
- * Check whether the selection is horizontally at the edge of the container.
+ * Check whether the selection is at the edge of the container. Checks for
+ * horizontal position by default. Set `onlyVertical` to true to check only
+ * vertically.
  *
- * @param {Element} container Focusable element.
- * @param {boolean} isReverse Set to true to check left, false for right.
+ * @param {Element} container    Focusable element.
+ * @param {boolean} isReverse    Set to true to check left, false to check right.
+ * @param {boolean} onlyVertical Set to true to check only vertical position.
  *
- * @return {boolean} True if at the horizontal edge, false if not.
+ * @return {boolean} True if at the edge, false if not.
  */
-export function isHorizontalEdge( container, isReverse ) {
+function isEdge( container, isReverse, onlyVertical ) {
 	if ( includes( [ 'INPUT', 'TEXTAREA' ], container.tagName ) ) {
 		if ( container.selectionStart !== container.selectionEnd ) {
 			return false;
@@ -86,105 +89,16 @@ export function isHorizontalEdge( container, isReverse ) {
 
 	const selection = window.getSelection();
 
-	// Create copy of range for setting selection to find effective offset.
-	const range = selection.getRangeAt( 0 ).cloneRange();
-
-	// Collapse in direction of selection.
-	if ( ! selection.isCollapsed ) {
-		range.collapse( ! isSelectionForward( selection ) );
-	}
-
-	let node = range.startContainer;
-
-	let extentOffset;
-	if ( isReverse ) {
-		// When in reverse, range node should be first.
-		extentOffset = 0;
-	} else if ( node.nodeValue ) {
-		// Otherwise, vary by node type. A text node has no children. Its range
-		// offset reflects its position in nodeValue.
-		//
-		// "If the startContainer is a Node of type Text, Comment, or
-		// CDATASection, then the offset is the number of characters from the
-		// start of the startContainer to the boundary point of the Range."
-		//
-		// See: https://developer.mozilla.org/en-US/docs/Web/API/Range/startOffset
-		// See: https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue
-		extentOffset = node.nodeValue.length;
-	} else {
-		// "For other Node types, the startOffset is the number of child nodes
-		// between the start of the startContainer and the boundary point of
-		// the Range."
-		//
-		// See: https://developer.mozilla.org/en-US/docs/Web/API/Range/startOffset
-		extentOffset = node.childNodes.length;
-	}
-
-	// Offset of range should be at expected extent.
-	const position = isReverse ? 'start' : 'end';
-	const offset = range[ `${ position }Offset` ];
-	if ( offset !== extentOffset ) {
+	if ( ! selection.rangeCount ) {
 		return false;
 	}
 
-	// If confirmed to be at extent, traverse up through DOM, verifying that
-	// the node is at first or last child for reverse or forward respectively
-	// (ignoring empty text nodes). Continue until container is reached.
-	const order = isReverse ? 'previous' : 'next';
-
-	while ( node !== container ) {
-		let next = node[ `${ order }Sibling` ];
-
-		// Skip over empty text nodes.
-		while ( next && next.nodeType === TEXT_NODE && next.data === '' ) {
-			next = next[ `${ order }Sibling` ];
-		}
-
-		if ( next ) {
-			return false;
-		}
-
-		node = node.parentNode;
-	}
-
-	// If reached, range is assumed to be at edge.
-	return true;
-}
-
-/**
- * Check whether the selection is vertically at the edge of the container.
- *
- * @param {Element} container Focusable element.
- * @param {boolean} isReverse Set to true to check top, false for bottom.
- *
- * @return {boolean} True if at the edge, false if not.
- */
-export function isVerticalEdge( container, isReverse ) {
-	if ( includes( [ 'INPUT', 'TEXTAREA' ], container.tagName ) ) {
-		return isHorizontalEdge( container, isReverse );
-	}
-
-	if ( ! container.isContentEditable ) {
-		return true;
-	}
-
-	const selection = window.getSelection();
-	const range = selection.rangeCount ? selection.getRangeAt( 0 ) : null;
-
-	if ( ! range ) {
-		return false;
-	}
-
-	const rangeRect = getRectangleFromRange( range );
+	const rangeRect = getRectangleFromRange( selection.getRangeAt( 0 ) );
 
 	if ( ! rangeRect ) {
 		return false;
 	}
 
-	// Calculate a buffer that is half the line height. In some browsers, the
-	// selection rectangle may not fill the entire height of the line, so we add
-	// half the line height to the selection rectangle to ensure that it is well
-	// over its line boundary.
 	const computedStyle = window.getComputedStyle( container );
 	const lineHeight = parseInt( computedStyle.lineHeight, 10 );
 
@@ -198,20 +112,65 @@ export function isVerticalEdge( container, isReverse ) {
 		return false;
 	}
 
-	const editableRect = container.getBoundingClientRect();
-	const buffer = lineHeight / 2;
+	// Calculate a buffer that is half the line height. In some browsers, the
+	// selection rectangle may not fill the entire height of the line, so we add
+	// 3/4 the line height to the selection rectangle to ensure that it is well
+	// over its line boundary.
+	const buffer = 3 * parseInt( lineHeight, 10 ) / 4;
+	const containerRect = container.getBoundingClientRect();
+	const verticalEdge = isReverse ?
+		containerRect.top > rangeRect.top - buffer :
+		containerRect.bottom < rangeRect.bottom + buffer;
 
-	// Too low.
-	if ( isReverse && rangeRect.top - buffer > editableRect.top ) {
+	if ( ! verticalEdge ) {
 		return false;
 	}
 
-	// Too high.
-	if ( ! isReverse && rangeRect.bottom + buffer < editableRect.bottom ) {
+	if ( onlyVertical ) {
+		return true;
+	}
+
+	// To calculate the horizontal position, we insert a test range and see if
+	// this test range has the same horizontal position. This method proves to
+	// be better than a DOM-based calculation, because it ignores empty text
+	// nodes and a trailing line break element. In other words, we need to check
+	// visual positioning, not DOM positioning.
+	const x = isReverse ? containerRect.left + 1 : containerRect.right - 1;
+	const y = isReverse ? containerRect.top + buffer : containerRect.bottom - buffer;
+	const testRange = hiddenCaretRangeFromPoint( document, x, y, container );
+
+	if ( ! testRange ) {
 		return false;
 	}
 
-	return true;
+	const side = isReverse ? 'left' : 'right';
+	const testRect = getRectangleFromRange( testRange );
+
+	return Math.round( testRect[ side ] ) === Math.round( rangeRect[ side ] );
+}
+
+/**
+ * Check whether the selection is horizontally at the edge of the container.
+ *
+ * @param {Element} container Focusable element.
+ * @param {boolean} isReverse Set to true to check left, false for right.
+ *
+ * @return {boolean} True if at the horizontal edge, false if not.
+ */
+export function isHorizontalEdge( container, isReverse ) {
+	return isEdge( container, isReverse );
+}
+
+/**
+ * Check whether the selection is vertically at the edge of the container.
+ *
+ * @param {Element} container Focusable element.
+ * @param {boolean} isReverse Set to true to check top, false for bottom.
+ *
+ * @return {boolean} True if at the vertical edge, false if not.
+ */
+export function isVerticalEdge( container, isReverse ) {
+	return isEdge( container, isReverse, true );
 }
 
 /**
@@ -229,6 +188,18 @@ export function getRectangleFromRange( range ) {
 		return range.getBoundingClientRect();
 	}
 
+	const { startContainer } = range;
+
+	// Correct invalid "BR" ranges. The cannot contain any children.
+	if ( startContainer.nodeName === 'BR' ) {
+		const { parentNode } = startContainer;
+		const index = Array.from( parentNode.childNodes ).indexOf( startContainer );
+
+		range = document.createRange();
+		range.setStart( parentNode, index );
+		range.setEnd( parentNode, index );
+	}
+
 	let rect = range.getClientRects()[ 0 ];
 
 	// If the collapsed range starts (and therefore ends) at an element node,
diff --git a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap
index 41f6fe04a2b53..2a80f20633a95 100644
--- a/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap
+++ b/packages/e2e-tests/specs/__snapshots__/writing-flow.test.js.snap
@@ -126,6 +126,16 @@ exports[`adding blocks should navigate around nested inline boundaries 2`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`adding blocks should navigate empty paragraph 1`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`adding blocks should not create extra line breaks in multiline value 1`] = `
 "<!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
diff --git a/packages/e2e-tests/specs/writing-flow.test.js b/packages/e2e-tests/specs/writing-flow.test.js
index 62ece15801640..c186507a7cdef 100644
--- a/packages/e2e-tests/specs/writing-flow.test.js
+++ b/packages/e2e-tests/specs/writing-flow.test.js
@@ -298,4 +298,16 @@ describe( 'adding blocks', () => {
 		// Check that none of the paragraph blocks have <br> in them.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should navigate empty paragraph', async () => {
+		await clickBlockAppender();
+		await page.keyboard.press( 'Enter' );
+		await page.waitForFunction( () => document.activeElement.isContentEditable );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.type( '2' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );

From dee166a3458b982500b05c20a4d8db548a81d88f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <iseulde@automattic.com>
Date: Mon, 1 Apr 2019 18:00:46 +0200
Subject: [PATCH 14/17] Fix memize option key typo (#14750)

---
 packages/block-editor/src/components/rich-text/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index b49b05f63ad7c..e2ce490828f11 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -133,7 +133,10 @@ export class RichText extends Component {
 		this.handleHorizontalNavigation = this.handleHorizontalNavigation.bind( this );
 		this.onPointerDown = this.onPointerDown.bind( this );
 
-		this.formatToValue = memize( this.formatToValue.bind( this ), { size: 1 } );
+		this.formatToValue = memize(
+			this.formatToValue.bind( this ),
+			{ maxSize: 1 }
+		);
 
 		this.savedContent = value;
 		this.patterns = getPatterns( {

From 2141e2266975c326bb5decb7daf7e985a2aa7962 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <iseulde@automattic.com>
Date: Wed, 3 Apr 2019 02:12:59 +0200
Subject: [PATCH 15/17] RichText: unify active formats, 'selectedFormat' and
 'placeholderFormat' (#14411)

* RichText: unify active formats, 'selectedFormat' and 'placeholderFormat'

* Add extra e2e test

* Only should boundary style when focused

* Update docs
---
 .../src/components/rich-text/index.js         | 133 +++++++-----------
 .../__snapshots__/rich-text.test.js.snap      |   6 +
 packages/e2e-tests/specs/rich-text.test.js    |  28 ++++
 packages/rich-text/src/apply-format.js        |   7 +-
 packages/rich-text/src/get-active-formats.js  |  24 +++-
 packages/rich-text/src/index.js               |   2 +
 packages/rich-text/src/normalise-formats.js   |  43 +++---
 packages/rich-text/src/remove-format.js       |   8 +-
 packages/rich-text/src/test/apply-format.js   |   2 +-
 .../rich-text/src/test/get-active-format.js   |  59 ++++++--
 .../rich-text/src/test/normalise-formats.js   |   2 +-
 packages/rich-text/src/test/update-formats.js |  55 ++++++++
 packages/rich-text/src/to-tree.js             |  14 +-
 packages/rich-text/src/update-formats.js      |  48 +++++++
 14 files changed, 288 insertions(+), 143 deletions(-)
 create mode 100644 packages/rich-text/src/test/update-formats.js
 create mode 100644 packages/rich-text/src/update-formats.js

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index e2ce490828f11..c6cfad310c89c 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -42,6 +42,8 @@ import {
 	isCollapsed,
 	LINE_SEPARATOR,
 	indentListItems,
+	__unstableGetActiveFormats,
+	__unstableUpdateFormats,
 } from '@wordpress/rich-text';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withFilters, IsolatedEventContainer } from '@wordpress/components';
@@ -186,9 +188,9 @@ export class RichText extends Component {
 	 */
 	getRecord() {
 		const { formats, replacements, text } = this.formatToValue( this.props.value );
-		const { start, end, selectedFormat } = this.state;
+		const { start, end, activeFormats } = this.state;
 
-		return { formats, replacements, text, start, end, selectedFormat };
+		return { formats, replacements, text, start, end, activeFormats };
 	}
 
 	createRecord() {
@@ -365,6 +367,8 @@ export class RichText extends Component {
 			unstableOnFocus();
 		}
 
+		this.recalculateBoundaryStyle();
+
 		document.addEventListener( 'selectionchange', this.onSelectionChange );
 	}
 
@@ -403,40 +407,19 @@ export class RichText extends Component {
 			}
 		}
 
-		let { selectedFormat } = this.state;
-		const { formats, replacements, text, start, end } = this.createRecord();
-
-		if ( this.formatPlaceholder ) {
-			selectedFormat = this.formatPlaceholder.length;
-
-			if ( selectedFormat > 0 ) {
-				formats[ this.state.start ] = this.formatPlaceholder;
-			} else {
-				delete formats[ this.state.start ];
-			}
-		} else if ( selectedFormat > 0 ) {
-			const formatsBefore = formats[ start - 1 ] || [];
-			const formatsAfter = formats[ start ] || [];
-
-			let source = formatsBefore;
-
-			if ( formatsAfter.length > formatsBefore.length ) {
-				source = formatsAfter;
-			}
-
-			source = source.slice( 0, selectedFormat );
-
-			formats[ this.state.start ] = source;
-		} else {
-			delete formats[ this.state.start ];
-		}
-
-		const change = { formats, replacements, text, start, end, selectedFormat };
+		const value = this.createRecord();
+		const { activeFormats = [], start } = this.state;
 
-		this.onChange( change, {
-			withoutHistory: true,
+		// Update the formats between the last and new caret position.
+		const change = __unstableUpdateFormats( {
+			value,
+			start,
+			end: value.start,
+			formats: activeFormats,
 		} );
 
+		this.onChange( change, { withoutHistory: true } );
+
 		const transformed = this.patterns.reduce(
 			( accumlator, transform ) => transform( accumlator ),
 			change
@@ -444,7 +427,7 @@ export class RichText extends Component {
 
 		if ( transformed !== change ) {
 			this.onCreateUndoLevel();
-			this.onChange( { ...transformed, selectedFormat } );
+			this.onChange( { ...transformed, activeFormats } );
 		}
 
 		// Create an undo level when input stops for over a second.
@@ -464,39 +447,23 @@ export class RichText extends Component {
 	 * Handles the `selectionchange` event: sync the selection to local state.
 	 */
 	onSelectionChange() {
-		if ( this.ignoreSelectionChange ) {
-			delete this.ignoreSelectionChange;
-			return;
-		}
-
 		const value = this.createRecord();
-		const { start, end, formats } = value;
+		const { start, end } = value;
 
 		if ( start !== this.state.start || end !== this.state.end ) {
-			const isCaretWithinFormattedText = this.props.isCaretWithinFormattedText;
+			const { isCaretWithinFormattedText } = this.props;
+			const activeFormats = __unstableGetActiveFormats( value );
 
-			if ( ! isCaretWithinFormattedText && formats[ start ] ) {
+			if ( ! isCaretWithinFormattedText && activeFormats.length ) {
 				this.props.onEnterFormattedText();
-			} else if ( isCaretWithinFormattedText && ! formats[ start ] ) {
+			} else if ( isCaretWithinFormattedText && ! activeFormats.length ) {
 				this.props.onExitFormattedText();
 			}
 
-			let selectedFormat;
-			const formatsAfter = formats[ start ] || [];
-			const collapsed = isCollapsed( value );
-
-			if ( collapsed ) {
-				const formatsBefore = formats[ start - 1 ] || [];
-
-				selectedFormat = Math.min( formatsBefore.length, formatsAfter.length );
-			}
-
-			this.setState( { start, end, selectedFormat } );
-			this.applyRecord( { ...value, selectedFormat }, { domOnly: true } );
-
-			delete this.formatPlaceholder;
+			this.setState( { start, end, activeFormats } );
+			this.applyRecord( { ...value, activeFormats }, { domOnly: true } );
 
-			if ( collapsed ? selectedFormat > 0 : formatsAfter.length > 0 ) {
+			if ( activeFormats.length > 0 ) {
 				this.recalculateBoundaryStyle();
 			}
 		}
@@ -513,7 +480,7 @@ export class RichText extends Component {
 				.replace( 'rgb', 'rgba' );
 
 			globalStyle.innerHTML =
-				`${ boundarySelector }{background-color: ${ newColor }}`;
+				`*:focus ${ boundarySelector }{background-color: ${ newColor }}`;
 		}
 	}
 
@@ -541,14 +508,12 @@ export class RichText extends Component {
 	onChange( record, { withoutHistory } = {} ) {
 		this.applyRecord( record );
 
-		const { start, end, formatPlaceholder, selectedFormat } = record;
+		const { start, end, activeFormats = [] } = record;
 
-		this.formatPlaceholder = formatPlaceholder;
 		this.onChangeEditableValue( record );
-
 		this.savedContent = this.valueToFormat( record );
 		this.props.onChange( this.savedContent );
-		this.setState( { start, end, selectedFormat } );
+		this.setState( { start, end, activeFormats } );
 
 		if ( ! withoutHistory ) {
 			this.onCreateUndoLevel();
@@ -764,17 +729,15 @@ export class RichText extends Component {
 	handleHorizontalNavigation( event ) {
 		const value = this.createRecord();
 		const { formats, text, start, end } = value;
-		const { selectedFormat } = this.state;
+		const { activeFormats = [] } = this.state;
 		const collapsed = isCollapsed( value );
 		const isReverse = event.keyCode === LEFT;
 
-		delete this.formatPlaceholder;
-
 		// If the selection is collapsed and at the very start, do nothing if
 		// navigating backward.
 		// If the selection is collapsed and at the very end, do nothing if
 		// navigating forward.
-		if ( collapsed && selectedFormat === 0 ) {
+		if ( collapsed && activeFormats.length === 0 ) {
 			if ( start === 0 && isReverse ) {
 				return;
 			}
@@ -794,41 +757,43 @@ export class RichText extends Component {
 		// In all other cases, prevent default behaviour.
 		event.preventDefault();
 
-		// Ignore the selection change handler when setting selection, all state
-		// will be set here.
-		this.ignoreSelectionChange = true;
-
 		const formatsBefore = formats[ start - 1 ] || [];
 		const formatsAfter = formats[ start ] || [];
 
-		let newSelectedFormat = selectedFormat;
+		let newActiveFormatsLength = activeFormats.length;
+		let source = formatsAfter;
+
+		if ( formatsBefore.length > formatsAfter.length ) {
+			source = formatsBefore;
+		}
 
 		// If the amount of formats before the caret and after the caret is
 		// different, the caret is at a format boundary.
 		if ( formatsBefore.length < formatsAfter.length ) {
-			if ( ! isReverse && selectedFormat < formatsAfter.length ) {
-				newSelectedFormat++;
+			if ( ! isReverse && activeFormats.length < formatsAfter.length ) {
+				newActiveFormatsLength++;
 			}
 
-			if ( isReverse && selectedFormat > formatsBefore.length ) {
-				newSelectedFormat--;
+			if ( isReverse && activeFormats.length > formatsBefore.length ) {
+				newActiveFormatsLength--;
 			}
 		} else if ( formatsBefore.length > formatsAfter.length ) {
-			if ( ! isReverse && selectedFormat > formatsAfter.length ) {
-				newSelectedFormat--;
+			if ( ! isReverse && activeFormats.length > formatsAfter.length ) {
+				newActiveFormatsLength--;
 			}
 
-			if ( isReverse && selectedFormat < formatsBefore.length ) {
-				newSelectedFormat++;
+			if ( isReverse && activeFormats.length < formatsBefore.length ) {
+				newActiveFormatsLength++;
 			}
 		}
 
 		// Wait for boundary class to be added.
 		setTimeout( () => this.recalculateBoundaryStyle() );
 
-		if ( newSelectedFormat !== selectedFormat ) {
-			this.applyRecord( { ...value, selectedFormat: newSelectedFormat } );
-			this.setState( { selectedFormat: newSelectedFormat } );
+		if ( newActiveFormatsLength !== activeFormats.length ) {
+			const newActiveFormats = source.slice( 0, newActiveFormatsLength );
+			this.applyRecord( { ...value, activeFormats: newActiveFormats } );
+			this.setState( { activeFormats: newActiveFormats } );
 			return;
 		}
 
@@ -839,7 +804,7 @@ export class RichText extends Component {
 			...value,
 			start: newPos,
 			end: newPos,
-			selectedFormat: isReverse ? formatsBefore.length : formatsAfter.length,
+			activeFormats: isReverse ? formatsBefore : formatsAfter,
 		} );
 	}
 
diff --git a/packages/e2e-tests/specs/__snapshots__/rich-text.test.js.snap b/packages/e2e-tests/specs/__snapshots__/rich-text.test.js.snap
index f5c79ddbd33ac..bf5fefd31a7e3 100644
--- a/packages/e2e-tests/specs/__snapshots__/rich-text.test.js.snap
+++ b/packages/e2e-tests/specs/__snapshots__/rich-text.test.js.snap
@@ -18,6 +18,12 @@ exports[`RichText should apply formatting with primary shortcut 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`RichText should apply multiple formats when selection is collapsed 1`] = `
+"<!-- wp:paragraph -->
+<p><strong><em>1</em></strong>.</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`RichText should handle change in tag name gracefully 1`] = `
 "<!-- wp:heading {\\"level\\":3} -->
 <h3></h3>
diff --git a/packages/e2e-tests/specs/rich-text.test.js b/packages/e2e-tests/specs/rich-text.test.js
index 5153032953899..dcb1434abd89b 100644
--- a/packages/e2e-tests/specs/rich-text.test.js
+++ b/packages/e2e-tests/specs/rich-text.test.js
@@ -58,6 +58,34 @@ describe( 'RichText', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	it( 'should apply multiple formats when selection is collapsed', async () => {
+		await clickBlockAppender();
+		await pressKeyWithModifier( 'primary', 'b' );
+		await pressKeyWithModifier( 'primary', 'i' );
+		await page.keyboard.type( '1' );
+		await pressKeyWithModifier( 'primary', 'i' );
+		await pressKeyWithModifier( 'primary', 'b' );
+		await page.keyboard.type( '.' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should not highlight more than one format', async () => {
+		await clickBlockAppender();
+		await pressKeyWithModifier( 'primary', 'b' );
+		await page.keyboard.type( '1' );
+		await pressKeyWithModifier( 'primary', 'b' );
+		await page.keyboard.type( ' 2' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'primary', 'b' );
+
+		const count = await page.evaluate( () => document.querySelectorAll(
+			'*[data-rich-text-format-boundary]'
+		).length );
+
+		expect( count ).toBe( 1 );
+	} );
+
 	it( 'should return focus when pressing formatting button', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( 'Some ' );
diff --git a/packages/rich-text/src/apply-format.js b/packages/rich-text/src/apply-format.js
index c9a59b96e6a65..14402735b1e60 100644
--- a/packages/rich-text/src/apply-format.js
+++ b/packages/rich-text/src/apply-format.js
@@ -28,7 +28,8 @@ export function applyFormat(
 	startIndex = value.start,
 	endIndex = value.end
 ) {
-	const newFormats = value.formats.slice( 0 );
+	const { formats, activeFormats = [] } = value;
+	const newFormats = formats.slice();
 
 	// The selection is collapsed.
 	if ( startIndex === endIndex ) {
@@ -51,11 +52,9 @@ export function applyFormat(
 		// Otherwise, insert a placeholder with the format so new input appears
 		// with the format applied.
 		} else {
-			const previousFormat = newFormats[ startIndex - 1 ] || [];
-
 			return {
 				...value,
-				formatPlaceholder: [ ...previousFormat, format ],
+				activeFormats: [ ...activeFormats, format ],
 			};
 		}
 	} else {
diff --git a/packages/rich-text/src/get-active-formats.js b/packages/rich-text/src/get-active-formats.js
index fd0f869877bfb..47ec6b56fea97 100644
--- a/packages/rich-text/src/get-active-formats.js
+++ b/packages/rich-text/src/get-active-formats.js
@@ -5,19 +5,29 @@
  *
  * @return {?Object} Active format objects.
  */
-export function getActiveFormats( { formats, start, selectedFormat } ) {
+export function getActiveFormats( { formats, start, end, activeFormats } ) {
 	if ( start === undefined ) {
 		return [];
 	}
 
-	const formatsBefore = formats[ start - 1 ] || [];
-	const formatsAfter = formats[ start ] || [];
+	if ( start === end ) {
+		// For a collapsed caret, it is possible to override the active formats.
+		if ( activeFormats ) {
+			return activeFormats;
+		}
 
-	let source = formatsAfter;
+		const formatsBefore = formats[ start - 1 ] || [];
+		const formatsAfter = formats[ start ] || [];
 
-	if ( formatsBefore.length > formatsAfter.length ) {
-		source = formatsBefore;
+		// By default, select the lowest amount of formats possible (which means
+		// the caret is positioned outside the format boundary). The user can
+		// then use arrow keys to define `activeFormats`.
+		if ( formatsBefore.length < formatsAfter.length ) {
+			return formatsBefore;
+		}
+
+		return formatsAfter;
 	}
 
-	return source.slice( 0, selectedFormat );
+	return formats[ start ] || [];
 }
diff --git a/packages/rich-text/src/index.js b/packages/rich-text/src/index.js
index 9d9f462021287..63da636257619 100644
--- a/packages/rich-text/src/index.js
+++ b/packages/rich-text/src/index.js
@@ -33,3 +33,5 @@ export { unregisterFormatType } from './unregister-format-type';
 export { indentListItems } from './indent-list-items';
 export { outdentListItems } from './outdent-list-items';
 export { changeListType } from './change-list-type';
+export { updateFormats as __unstableUpdateFormats } from './update-formats';
+export { getActiveFormats as __unstableGetActiveFormats } from './get-active-formats';
diff --git a/packages/rich-text/src/normalise-formats.js b/packages/rich-text/src/normalise-formats.js
index 72c04f818f9a4..460388e0a74cb 100644
--- a/packages/rich-text/src/normalise-formats.js
+++ b/packages/rich-text/src/normalise-formats.js
@@ -1,9 +1,3 @@
-/**
- * External dependencies
- */
-
-import { find } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -11,29 +5,36 @@ import { find } from 'lodash';
 import { isFormatEqual } from './is-format-equal';
 
 /**
- * Normalises formats: ensures subsequent equal formats have the same reference.
+ * Normalises formats: ensures subsequent adjacent equal formats have the same
+ * reference.
  *
  * @param {Object} value Value to normalise formats of.
  *
  * @return {Object} New value with normalised formats.
  */
 export function normaliseFormats( value ) {
-	const refs = [];
-	const newFormats = value.formats.map( ( formatsAtIndex ) =>
-		formatsAtIndex.map( ( format ) => {
-			const equalRef = find( refs, ( ref ) =>
-				isFormatEqual( ref, format )
-			);
+	const newFormats = value.formats.slice();
+
+	newFormats.forEach( ( formatsAtIndex, index ) => {
+		const formatsAtPreviousIndex = newFormats[ index - 1 ];
+
+		if ( formatsAtPreviousIndex ) {
+			const newFormatsAtIndex = formatsAtIndex.slice();
 
-			if ( equalRef ) {
-				return equalRef;
-			}
+			newFormatsAtIndex.forEach( ( format, formatIndex ) => {
+				const previousFormat = formatsAtPreviousIndex[ formatIndex ];
 
-			refs.push( format );
+				if ( isFormatEqual( format, previousFormat ) ) {
+					newFormatsAtIndex[ formatIndex ] = previousFormat;
+				}
+			} );
 
-			return format;
-		} )
-	);
+			newFormats[ index ] = newFormatsAtIndex;
+		}
+	} );
 
-	return { ...value, formats: newFormats };
+	return {
+		...value,
+		formats: newFormats,
+	};
 }
diff --git a/packages/rich-text/src/remove-format.js b/packages/rich-text/src/remove-format.js
index 405cb6265e1e0..4a4c9c820f900 100644
--- a/packages/rich-text/src/remove-format.js
+++ b/packages/rich-text/src/remove-format.js
@@ -28,7 +28,8 @@ export function removeFormat(
 	startIndex = value.start,
 	endIndex = value.end
 ) {
-	const newFormats = value.formats.slice( 0 );
+	const { formats, activeFormats } = value;
+	const newFormats = formats.slice();
 
 	// If the selection is collapsed, expand start and end to the edges of the
 	// format.
@@ -50,10 +51,7 @@ export function removeFormat(
 		} else {
 			return {
 				...value,
-				formatPlaceholder: reject(
-					newFormats[ startIndex - 1 ] || [],
-					{ type: formatType }
-				),
+				activeFormats: reject( activeFormats, { type: formatType } ),
 			};
 		}
 	} else {
diff --git a/packages/rich-text/src/test/apply-format.js b/packages/rich-text/src/test/apply-format.js
index b8cff3bc47620..b75dc7ee5de00 100644
--- a/packages/rich-text/src/test/apply-format.js
+++ b/packages/rich-text/src/test/apply-format.js
@@ -61,7 +61,7 @@ describe( 'applyFormat', () => {
 		};
 		const expected = {
 			...record,
-			formatPlaceholder: [ a2 ],
+			activeFormats: [ a2 ],
 		};
 		const result = applyFormat( deepFreeze( record ), a2 );
 
diff --git a/packages/rich-text/src/test/get-active-format.js b/packages/rich-text/src/test/get-active-format.js
index 4fa0ddaa3e3ec..eba352783c39a 100644
--- a/packages/rich-text/src/test/get-active-format.js
+++ b/packages/rich-text/src/test/get-active-format.js
@@ -6,39 +6,82 @@ import { getActiveFormat } from '../get-active-format';
 
 describe( 'getActiveFormat', () => {
 	const em = { type: 'em' };
+	const strong = { type: 'strong' };
 
-	it( 'should get format by selection', () => {
+	it( 'should return undefined if there is no selection', () => {
 		const record = {
-			formats: [ [ em ], , , ],
+			formats: [ [ em ], [ em ], [ em ] ],
+			text: 'one',
+		};
+
+		expect( getActiveFormat( record, 'em' ) ).toBe( undefined );
+	} );
+
+	it( 'should return format at first character for uncollapsed selection', () => {
+		const record = {
+			formats: [ [ em ], [ strong ], , ],
 			text: 'one',
 			start: 0,
-			end: 0,
+			end: 2,
 		};
 
-		expect( getActiveFormat( record, 'em' ) ).toEqual( em );
+		expect( getActiveFormat( record, 'em' ) ).toBe( em );
 	} );
 
-	it( 'should not get any format if outside boundary position', () => {
+	it( 'should return undefined if at the boundary before', () => {
+		const record = {
+			formats: [ [ em ], , [ em ] ],
+			text: 'one',
+			start: 3,
+			end: 3,
+		};
+
+		expect( getActiveFormat( record, 'em' ) ).toBe( undefined );
+	} );
+
+	it( 'should return undefined if at the boundary after', () => {
 		const record = {
 			formats: [ [ em ], , [ em ] ],
 			text: 'one',
 			start: 1,
 			end: 1,
-			selectedFormat: 0,
 		};
 
 		expect( getActiveFormat( record, 'em' ) ).toBe( undefined );
 	} );
 
-	it( 'should get format if inside boundary position', () => {
+	it( 'should return format if inside format', () => {
+		const record = {
+			formats: [ [ em ], [ em ], [ em ] ],
+			text: 'one',
+			start: 1,
+			end: 1,
+		};
+
+		expect( getActiveFormat( record, 'em' ) ).toBe( em );
+	} );
+
+	it( 'should return activeFormats', () => {
 		const record = {
 			formats: [ [ em ], , [ em ] ],
 			text: 'one',
 			start: 1,
 			end: 1,
-			selectedFormat: 1,
+			activeFormats: [ em ],
 		};
 
 		expect( getActiveFormat( record, 'em' ) ).toBe( em );
 	} );
+
+	it( 'should not return activeFormats for uncollapsed selection', () => {
+		const record = {
+			formats: [ [ em ], , [ em ] ],
+			text: 'one',
+			start: 1,
+			end: 2,
+			activeFormats: [ em ],
+		};
+
+		expect( getActiveFormat( record, 'em' ) ).toBe( undefined );
+	} );
 } );
diff --git a/packages/rich-text/src/test/normalise-formats.js b/packages/rich-text/src/test/normalise-formats.js
index 25525625f18b5..c71b8a35ed634 100644
--- a/packages/rich-text/src/test/normalise-formats.js
+++ b/packages/rich-text/src/test/normalise-formats.js
@@ -26,7 +26,7 @@ describe( 'normaliseFormats', () => {
 		expect( getSparseArrayLength( result.formats ) ).toBe( 4 );
 		expect( result.formats[ 1 ][ 0 ] ).toBe( result.formats[ 2 ][ 0 ] );
 		expect( result.formats[ 1 ][ 0 ] ).toBe( result.formats[ 3 ][ 0 ] );
-		expect( result.formats[ 1 ][ 0 ] ).toBe( result.formats[ 5 ][ 0 ] );
+		expect( result.formats[ 1 ][ 0 ] ).not.toBe( result.formats[ 5 ][ 0 ] );
 		expect( result.formats[ 2 ][ 1 ] ).toBe( result.formats[ 3 ][ 1 ] );
 	} );
 } );
diff --git a/packages/rich-text/src/test/update-formats.js b/packages/rich-text/src/test/update-formats.js
new file mode 100644
index 0000000000000..e5c3c97a85bb7
--- /dev/null
+++ b/packages/rich-text/src/test/update-formats.js
@@ -0,0 +1,55 @@
+/**
+ * Internal dependencies
+ */
+
+import { updateFormats } from '../update-formats';
+import { getSparseArrayLength } from './helpers';
+
+describe( 'updateFormats', () => {
+	const em = { type: 'em' };
+
+	it( 'should update formats with empty array', () => {
+		const value = {
+			formats: [ [ em ] ],
+			text: '1',
+		};
+		const expected = {
+			...value,
+			activeFormats: [],
+			formats: [ , ],
+		};
+		const result = updateFormats( {
+			value,
+			start: 0,
+			end: 1,
+			formats: [],
+		} );
+
+		expect( result ).toEqual( expected );
+		expect( result ).toBe( value );
+		expect( getSparseArrayLength( result.formats ) ).toBe( 0 );
+	} );
+
+	it( 'should update formats and update references', () => {
+		const value = {
+			formats: [ [ em ], , ],
+			text: '123',
+		};
+		const expected = {
+			...value,
+			activeFormats: [ em ],
+			formats: [ [ em ], [ em ] ],
+		};
+		const result = updateFormats( {
+			value,
+			start: 1,
+			end: 2,
+			formats: [ { ...em } ],
+		} );
+
+		expect( result ).toEqual( expected );
+		expect( result ).toBe( value );
+		expect( result.formats[ 1 ][ 0 ] ).toBe( em );
+		expect( getSparseArrayLength( result.formats ) ).toBe( 2 );
+	} );
+} );
diff --git a/packages/rich-text/src/to-tree.js b/packages/rich-text/src/to-tree.js
index ef15fe7524b6e..c76eafc803b92 100644
--- a/packages/rich-text/src/to-tree.js
+++ b/packages/rich-text/src/to-tree.js
@@ -69,17 +69,6 @@ function fromFormat( { type, attributes, unregisteredAttributes, object, boundar
 	};
 }
 
-function getDeepestActiveFormat( value ) {
-	const activeFormats = getActiveFormats( value );
-	const { selectedFormat } = value;
-
-	if ( selectedFormat === undefined ) {
-		return activeFormats[ activeFormats.length - 1 ];
-	}
-
-	return activeFormats[ selectedFormat - 1 ];
-}
-
 const padding = {
 	type: 'br',
 	attributes: {
@@ -107,7 +96,8 @@ export function toTree( {
 	const formatsLength = formats.length + 1;
 	const tree = createEmpty();
 	const multilineFormat = { type: multilineTag };
-	const deepestActiveFormat = getDeepestActiveFormat( value );
+	const activeFormats = getActiveFormats( value );
+	const deepestActiveFormat = activeFormats[ activeFormats.length - 1 ];
 
 	let lastSeparatorFormats;
 	let lastCharacterFormats;
diff --git a/packages/rich-text/src/update-formats.js b/packages/rich-text/src/update-formats.js
new file mode 100644
index 0000000000000..bc99c9ba0e5db
--- /dev/null
+++ b/packages/rich-text/src/update-formats.js
@@ -0,0 +1,48 @@
+/**
+ * Internal dependencies
+ */
+
+import { isFormatEqual } from './is-format-equal';
+
+/**
+ * Efficiently updates all the formats from `start` (including) until `end`
+ * (excluding) with the active formats. Mutates `value`.
+ *
+ * @param  {Object} $1         Named paramentes.
+ * @param  {Object} $1.value   Value te update.
+ * @param  {number} $1.start   Index to update from.
+ * @param  {number} $1.end     Index to update until.
+ * @param  {Array}  $1.formats Replacement formats.
+ *
+ * @return {Object} Mutated value.
+ */
+export function updateFormats( { value, start, end, formats } ) {
+	const formatsBefore = value.formats[ start - 1 ] || [];
+	const formatsAfter = value.formats[ end ] || [];
+
+	// First, fix the references. If any format right before or after are
+	// equal, the replacement format should use the same reference.
+	value.activeFormats = formats.map( ( format, index ) => {
+		if ( formatsBefore[ index ] ) {
+			if ( isFormatEqual( format, formatsBefore[ index ] ) ) {
+				return formatsBefore[ index ];
+			}
+		} else if ( formatsAfter[ index ] ) {
+			if ( isFormatEqual( format, formatsAfter[ index ] ) ) {
+				return formatsAfter[ index ];
+			}
+		}
+
+		return format;
+	} );
+
+	while ( --end >= start ) {
+		if ( value.activeFormats.length > 0 ) {
+			value.formats[ end ] = value.activeFormats;
+		} else {
+			delete value.formats[ end ];
+		}
+	}
+
+	return value;
+}

From 933ca4a9f3c2da4eb1344ff4d2d21b32f8d8df54 Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Wed, 3 Apr 2019 17:26:33 +0200
Subject: [PATCH 16/17] Try to trigger tests with Travis

---
 .travis.yml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 7b87e251a2525..00781fc75a155 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -18,10 +18,6 @@ cache:
     - $HOME/.nvm/.cache
     - $HOME/.phpbrew
 
-branches:
-  only:
-    - master
-
 before_install:
   - nvm install
 

From 15f49ff24ca5c368d74452dea59d403d96121952 Mon Sep 17 00:00:00 2001
From: iseulde <wp@iseulde.com>
Date: Thu, 4 Apr 2019 14:47:52 +0200
Subject: [PATCH 17/17] Restore Travis config

---
 .travis.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index 00781fc75a155..7b87e251a2525 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -18,6 +18,10 @@ cache:
     - $HOME/.nvm/.cache
     - $HOME/.phpbrew
 
+branches:
+  only:
+    - master
+
 before_install:
   - nvm install