From ef7d30e3aaf434b3d07b22bdf576b34296c4822c Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 20 May 2020 13:43:55 -0400
Subject: [PATCH 01/27] Add initial support for video in FocalPointPicker

---
 packages/block-library/src/cover/edit.js      | 60 ++++++++++++-------
 .../src/focal-point-picker/index.js           | 38 ++++++++----
 .../src/focal-point-picker/utils.js           | 10 ++++
 3 files changed, 74 insertions(+), 34 deletions(-)
 create mode 100644 packages/components/src/focal-point-picker/utils.js

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 63071a0e09142..67d8cea9ed2f5 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -267,6 +267,9 @@ function CoverEdit( {
 		isDarkElement
 	);
 
+	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
 	const [ temporaryMinHeight, setTemporaryMinHeight ] = useState( null );
 	const { removeAllNotices, createErrorNotice } = noticeOperations;
 
@@ -275,9 +278,7 @@ function CoverEdit( {
 		: minHeight;
 
 	const style = {
-		...( backgroundType === IMAGE_BACKGROUND_TYPE
-			? backgroundImageStyles( url )
-			: {} ),
+		...( isImageBackground ? backgroundImageStyles( url ) : {} ),
 		backgroundColor: overlayColor.color,
 		minHeight: temporaryMinHeight || minHeightWithUnit || undefined,
 	};
@@ -286,9 +287,13 @@ function CoverEdit( {
 		style.background = gradientValue;
 	}
 
+	let positionValue;
+
 	if ( focalPoint ) {
-		style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y *
-			100 }%`;
+		positionValue = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`;
+		if ( isImageBackground ) {
+			style.backgroundPosition = positionValue;
+		}
 	}
 
 	const hasBackground = !! ( url || overlayColor.color || gradientValue );
@@ -316,28 +321,36 @@ function CoverEdit( {
 			<InspectorControls>
 				{ !! url && (
 					<PanelBody title={ __( 'Media settings' ) }>
-						{ IMAGE_BACKGROUND_TYPE === backgroundType && (
+						{ isImageBackground && (
 							<ToggleControl
 								label={ __( 'Fixed background' ) }
 								checked={ hasParallax }
 								onChange={ toggleParallax }
 							/>
 						) }
-						{ IMAGE_BACKGROUND_TYPE === backgroundType &&
-							! hasParallax && (
-								<FocalPointPicker
-									label={ __( 'Focal point picker' ) }
-									url={ url }
-									value={ focalPoint }
-									onChange={ ( newFocalPoint ) =>
-										setAttributes( {
-											focalPoint: newFocalPoint,
-										} )
-									}
-								/>
-							) }
-						{ VIDEO_BACKGROUND_TYPE === backgroundType && (
-							<video autoPlay muted loop src={ url } />
+						{ isImageBackground && ! hasParallax && (
+							<FocalPointPicker
+								label={ __( 'Focal point picker' ) }
+								url={ url }
+								value={ focalPoint }
+								onChange={ ( newFocalPoint ) =>
+									setAttributes( {
+										focalPoint: newFocalPoint,
+									} )
+								}
+							/>
+						) }
+						{ isVideoBackground && (
+							<FocalPointPicker
+								label={ __( 'Focal point picker' ) }
+								url={ url }
+								value={ focalPoint }
+								onChange={ ( newFocalPoint ) =>
+									setAttributes( {
+										focalPoint: newFocalPoint,
+									} )
+								}
+							/>
 						) }
 						<PanelRow>
 							<Button
@@ -483,7 +496,7 @@ function CoverEdit( {
 					} }
 					showHandle={ isSelected }
 				/>
-				{ IMAGE_BACKGROUND_TYPE === backgroundType && (
+				{ isImageBackground && (
 					// Used only to programmatically check if the image is dark or not
 					<img
 						ref={ isDarkElement }
@@ -505,7 +518,7 @@ function CoverEdit( {
 						style={ { background: gradientValue } }
 					/>
 				) }
-				{ VIDEO_BACKGROUND_TYPE === backgroundType && (
+				{ isVideoBackground && (
 					<video
 						ref={ isDarkElement }
 						className="wp-block-cover__video-background"
@@ -513,6 +526,7 @@ function CoverEdit( {
 						muted
 						loop
 						src={ url }
+						style={ { objectPosition: positionValue } }
 					/>
 				) }
 				<InnerBlocks
diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index f32129a0cb6e8..316c70d87bab9 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -16,6 +16,7 @@ import { Path, SVG } from '@wordpress/primitives';
  */
 import BaseControl from '../base-control';
 import withFocusOutside from '../higher-order/with-focus-outside';
+import { isVideoType } from './utils';
 
 const TEXTCONTROL_MIN = 0;
 const TEXTCONTROL_MAX = 100;
@@ -30,7 +31,7 @@ export class FocalPointPicker extends Component {
 			percentages: props.value,
 		};
 		this.containerRef = createRef();
-		this.imageRef = createRef();
+		this.mediaRef = createRef();
 		this.horizontalPositionChanged = this.horizontalPositionChanged.bind(
 			this
 		);
@@ -55,12 +56,12 @@ export class FocalPointPicker extends Component {
 			width: 0,
 			height: 0,
 		};
-		if ( ! this.imageRef.current ) {
+		if ( ! this.mediaRef.current ) {
 			return bounds;
 		}
 		const dimensions = {
-			width: this.imageRef.current.clientWidth,
-			height: this.imageRef.current.clientHeight,
+			width: this.mediaRef.current.clientWidth,
+			height: this.mediaRef.current.clientHeight,
 		};
 		const pickerDimensions = this.pickerDimensions();
 		const widthRatio = pickerDimensions.width / dimensions.width;
@@ -188,6 +189,9 @@ export class FocalPointPicker extends Component {
 		const id = `inspector-focal-point-picker-control-${ instanceId }`;
 		const horizontalPositionId = `inspector-focal-point-picker-control-horizontal-position-${ instanceId }`;
 		const verticalPositionId = `inspector-focal-point-picker-control-vertical-position-${ instanceId }`;
+
+		const isVideo = isVideoType( url );
+
 		return (
 			<BaseControl
 				label={ label }
@@ -213,13 +217,25 @@ export class FocalPointPicker extends Component {
 						role="button"
 						tabIndex="-1"
 					>
-						<img
-							alt="Dimensions helper"
-							onLoad={ this.onLoad }
-							ref={ this.imageRef }
-							src={ url }
-							draggable="false"
-						/>
+						{ isVideo ? (
+							<video
+								autoPlay
+								muted
+								loop
+								onLoadedData={ this.onLoad }
+								src={ url }
+								ref={ this.mediaRef }
+								draggable="false"
+							/>
+						) : (
+							<img
+								alt="Dimensions helper"
+								onLoad={ this.onLoad }
+								ref={ this.mediaRef }
+								src={ url }
+								draggable="false"
+							/>
+						) }
 						<div
 							className={ iconContainerClasses }
 							style={ iconContainerStyle }
diff --git a/packages/components/src/focal-point-picker/utils.js b/packages/components/src/focal-point-picker/utils.js
new file mode 100644
index 0000000000000..425ffc1a9f7ab
--- /dev/null
+++ b/packages/components/src/focal-point-picker/utils.js
@@ -0,0 +1,10 @@
+const VIDEO_EXTENSIONS = [ 'm4v', 'avi', 'mpg', 'mp4', 'webm', 'ogg' ];
+
+export function getExtension( filename ) {
+	const parts = filename.split( '.' );
+	return parts[ parts.length - 1 ];
+}
+
+export function isVideoType( filename ) {
+	return VIDEO_EXTENSIONS.includes( getExtension( filename ) );
+}

From 3b0164a3c5192eaebb828e680b348709b844f957 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 20 May 2020 15:38:46 -0400
Subject: [PATCH 02/27] Add FocalPointPicker stories + update README.

---
 .../src/focal-point-picker/README.md          | 82 +++++++++++--------
 .../src/focal-point-picker/index.js           | 55 +++++++------
 .../src/focal-point-picker/media.js           | 64 +++++++++++++++
 .../src/focal-point-picker/stories/index.js   | 46 +++++++++++
 .../src/focal-point-picker/style.scss         |  4 +-
 .../styles/focal-point-picker-style.js        | 16 ++++
 .../src/focal-point-picker/utils.js           |  5 +-
 7 files changed, 209 insertions(+), 63 deletions(-)
 create mode 100644 packages/components/src/focal-point-picker/media.js
 create mode 100644 packages/components/src/focal-point-picker/stories/index.js
 create mode 100644 packages/components/src/focal-point-picker/styles/focal-point-picker-style.js

diff --git a/packages/components/src/focal-point-picker/README.md b/packages/components/src/focal-point-picker/README.md
index 5b325cb607ddc..9100e4734f211 100644
--- a/packages/components/src/focal-point-picker/README.md
+++ b/packages/components/src/focal-point-picker/README.md
@@ -9,35 +9,37 @@ Corresponding CSS: `background-position: 50% 10%;`
 
 ```jsx
 import { FocalPointPicker } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
-const MyFocalPointPicker = withState( {
-	focalPoint: {
+const Example = () => {
+	const [ focalPoint, setFocalPoint ] = useState( {
 		x: 0.5,
-		y: 0.5
-	},
-} )( ( { focalPoint, setState } ) => { 
+		y: 0.5,
+	} );
+
 	const url = '/path/to/image';
 	const dimensions = {
 		width: 400,
-		height: 100
+		height: 100,
 	};
-	return ( 
-		<FocalPointPicker 
-			url={ url }
-			dimensions={ dimensions }
-			value={ focalPoint }
-			onChange={ ( focalPoint ) => setState( { focalPoint } ) } 
-		/>
-	) 
-} );
-
-/* Example function to render the CSS styles based on Focal Point Picker value */
-const renderImageContainerWithFocalPoint = ( url, focalPoint ) => {
+
+	/* Example function to render the CSS styles based on Focal Point Picker value */
 	const style = {
-		backgroundImage: `url(${ url })` ,
-		backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`
-	}
-	return <div style={ style } />;
+		backgroundImage: `url(${ url })`,
+		backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
+	};
+
+	return (
+		<>
+			<FocalPointPicker
+				url={ url }
+				dimensions={ dimensions }
+				value={ focalPoint }
+				onChange={ ( focalPoint ) => setFocalPoint( { focalPoint } ) }
+			/>
+			<div style={ style } />
+		</>
+	);
 };
 ```
 
@@ -45,24 +47,36 @@ const renderImageContainerWithFocalPoint = ( url, focalPoint ) => {
 
 ### `url`
 
-- Type: `Text`
-- Required: Yes
-- Description: URL of the image to be displayed
+-   Type: `Text`
+-   Required: Yes
+
+URL of the image or video to be displayed
+
+### `autoPlay`
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+
+Autoplays HTML5 video. This only applies to video sources (`url`).
 
 ### `dimensions`
 
-- Type: `Object`
-- Required: Yes
-- Description: An object describing the height and width of the image. Requires two paramaters: `height`, `width`.
+-   Type: `Object`
+-   Required: Yes
+
+An object describing the height and width of the image. Requires two paramaters: `height`, `width`.
 
 ### `value`
 
-- Type: `Object`
-- Required: Yes
-- Description: The focal point. Should be an object containing `x` and `y` params.
+-   Type: `Object`
+-   Required: Yes
+
+The focal point. Should be an object containing `x` and `y` params.
 
 ### `onChange`
 
-- Type: `Function`
-- Required: Yes
-- Description: Callback which is called when the focal point changes. 
+-   Type: `Function`
+-   Required: Yes
+
+Callback which is called when the focal point changes.
diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index 316c70d87bab9..1df8f875acb53 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -16,7 +16,7 @@ import { Path, SVG } from '@wordpress/primitives';
  */
 import BaseControl from '../base-control';
 import withFocusOutside from '../higher-order/with-focus-outside';
-import { isVideoType } from './utils';
+import Media from './media';
 
 const TEXTCONTROL_MIN = 0;
 const TEXTCONTROL_MAX = 100;
@@ -39,6 +39,10 @@ export class FocalPointPicker extends Component {
 			this
 		);
 		this.onLoad = this.onLoad.bind( this );
+		this.handleOnMouseUp = this.handleOnMouseUp.bind( this );
+	}
+	componentDidMount() {
+		document.addEventListener( 'mouseup', this.handleOnMouseUp );
 	}
 	componentDidUpdate( prevProps ) {
 		if ( prevProps.url !== this.props.url ) {
@@ -47,6 +51,9 @@ export class FocalPointPicker extends Component {
 			} );
 		}
 	}
+	componentWillUnmount() {
+		document.removeEventListener( 'mouseup', this.handleOnMouseUp );
+	}
 	calculateBounds() {
 		const bounds = {
 			top: 0,
@@ -84,6 +91,9 @@ export class FocalPointPicker extends Component {
 			bounds: this.calculateBounds(),
 		} );
 	}
+	handleOnMouseUp() {
+		this.setState( { isDragging: false } );
+	}
 	onMouseMove( event ) {
 		const { isDragging, bounds } = this.state;
 		const { onChange } = this.props;
@@ -167,7 +177,15 @@ export class FocalPointPicker extends Component {
 		} );
 	}
 	render() {
-		const { instanceId, url, value, label, help, className } = this.props;
+		const {
+			autoPlay,
+			instanceId,
+			url,
+			value,
+			label,
+			help,
+			className,
+		} = this.props;
 		const { bounds, isDragging, percentages } = this.state;
 		const pickerDimensions = this.pickerDimensions();
 		const iconCoordinates = {
@@ -190,8 +208,6 @@ export class FocalPointPicker extends Component {
 		const horizontalPositionId = `inspector-focal-point-picker-control-horizontal-position-${ instanceId }`;
 		const verticalPositionId = `inspector-focal-point-picker-control-vertical-position-${ instanceId }`;
 
-		const isVideo = isVideoType( url );
-
 		return (
 			<BaseControl
 				label={ label }
@@ -208,34 +224,20 @@ export class FocalPointPicker extends Component {
 						onDragStart={ () =>
 							this.setState( { isDragging: true } )
 						}
-						onMouseUp={ () =>
-							this.setState( { isDragging: false } )
-						}
+						onMouseUp={ this.handleOnMouseUp }
 						onDrop={ () => this.setState( { isDragging: false } ) }
 						onMouseMove={ this.onMouseMove }
 						ref={ this.containerRef }
 						role="button"
 						tabIndex="-1"
 					>
-						{ isVideo ? (
-							<video
-								autoPlay
-								muted
-								loop
-								onLoadedData={ this.onLoad }
-								src={ url }
-								ref={ this.mediaRef }
-								draggable="false"
-							/>
-						) : (
-							<img
-								alt="Dimensions helper"
-								onLoad={ this.onLoad }
-								ref={ this.mediaRef }
-								src={ url }
-								draggable="false"
-							/>
-						) }
+						<Media
+							alt="Dimensions helper"
+							autoPlay={ autoPlay }
+							mediaRef={ this.mediaRef }
+							onLoad={ this.onLoad }
+							src={ url }
+						/>
 						<div
 							className={ iconContainerClasses }
 							style={ iconContainerStyle }
@@ -295,6 +297,7 @@ export class FocalPointPicker extends Component {
 }
 
 FocalPointPicker.defaultProps = {
+	autoPlay: true,
 	url: null,
 	value: {
 		x: 0.5,
diff --git a/packages/components/src/focal-point-picker/media.js b/packages/components/src/focal-point-picker/media.js
new file mode 100644
index 0000000000000..8e55596f2bf0f
--- /dev/null
+++ b/packages/components/src/focal-point-picker/media.js
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useLayoutEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { MediaPlaceholder } from './styles/focal-point-picker-style';
+import { isVideoType } from './utils';
+
+export default function Media( {
+	alt,
+	autoPlay = true,
+	src,
+	onLoad = noop,
+	mediaRef,
+	...props
+} ) {
+	if ( ! src ) {
+		return (
+			<MediaPlaceholderElement onLoad={ onLoad } mediaRef={ mediaRef } />
+		);
+	}
+
+	const isVideo = isVideoType( src );
+
+	return isVideo ? (
+		<video
+			{ ...props }
+			autoPlay={ autoPlay }
+			loop
+			muted
+			onLoadedData={ onLoad }
+			ref={ mediaRef }
+			src={ src }
+		/>
+	) : (
+		<img
+			{ ...props }
+			alt={ alt }
+			onLoad={ onLoad }
+			ref={ mediaRef }
+			src={ src }
+		/>
+	);
+}
+
+function MediaPlaceholderElement( { mediaRef, onLoad = noop } ) {
+	const onLoadRef = useRef( onLoad );
+
+	useLayoutEffect( () => {
+		window.requestAnimationFrame( () => {
+			onLoadRef.current();
+		} );
+	}, [] );
+
+	return <MediaPlaceholder ref={ mediaRef } />;
+}
diff --git a/packages/components/src/focal-point-picker/stories/index.js b/packages/components/src/focal-point-picker/stories/index.js
new file mode 100644
index 0000000000000..2318d71ede436
--- /dev/null
+++ b/packages/components/src/focal-point-picker/stories/index.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import FocalPointPicker from '../';
+
+export default {
+	title: 'Components/FocalPointPicker',
+	component: FocalPointPicker,
+};
+
+const Example = ( props ) => {
+	const [ focalPoint, setFocalPoint ] = useState( {
+		x: 0.5,
+		y: 0.5,
+	} );
+
+	return (
+		<FocalPointPicker
+			value={ focalPoint }
+			onChange={ setFocalPoint }
+			{ ...props }
+		/>
+	);
+};
+
+export const _default = () => {
+	return <Example />;
+};
+
+export const image = () => {
+	const url =
+		'https://i0.wp.com/themes.svn.wordpress.org/twentytwenty/1.3/screenshot.png?w=572&strip=al';
+
+	return <Example url={ url } />;
+};
+
+export const video = () => {
+	const url =
+		'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm';
+
+	return <Example url={ url } />;
+};
diff --git a/packages/components/src/focal-point-picker/style.scss b/packages/components/src/focal-point-picker/style.scss
index f93f2e57ad688..a7d1f6dd74ec2 100644
--- a/packages/components/src/focal-point-picker/style.scss
+++ b/packages/components/src/focal-point-picker/style.scss
@@ -15,11 +15,13 @@
 	position: relative;
 	width: 100%;
 
-	img {
+	img,
+	video {
 		height: auto;
 		max-height: 100%;
 		max-width: 100%;
 		width: auto;
+		pointer-events: none;
 		user-select: none;
 	}
 }
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
new file mode 100644
index 0000000000000..13317a142e0cf
--- /dev/null
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+/**
+ * Internal dependencies
+ */
+import { color } from '../../utils/style-mixins';
+
+export const MediaPlaceholder = styled.div`
+	background: ${color( 'lightGray.300' )};
+	box-sizing: border-box;
+	height: 160px;
+	max-width: 280px;
+	width: 100%;
+`;
diff --git a/packages/components/src/focal-point-picker/utils.js b/packages/components/src/focal-point-picker/utils.js
index 425ffc1a9f7ab..87cfb301ce4d5 100644
--- a/packages/components/src/focal-point-picker/utils.js
+++ b/packages/components/src/focal-point-picker/utils.js
@@ -1,10 +1,11 @@
 const VIDEO_EXTENSIONS = [ 'm4v', 'avi', 'mpg', 'mp4', 'webm', 'ogg' ];
 
-export function getExtension( filename ) {
+export function getExtension( filename = '' ) {
 	const parts = filename.split( '.' );
 	return parts[ parts.length - 1 ];
 }
 
-export function isVideoType( filename ) {
+export function isVideoType( filename = '' ) {
+	if ( ! filename ) return false;
 	return VIDEO_EXTENSIONS.includes( getExtension( filename ) );
 }

From adf993a4c209aac53680a6119ee9341dc8bd7fee Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 20 May 2020 17:32:03 -0400
Subject: [PATCH 03/27] Improve FocalPointPicker and add Grid

---
 packages/components/src/flex/README.md        |  69 +++++
 packages/components/src/flex/block.js         |  21 ++
 packages/components/src/flex/flex.js          |  48 ++++
 packages/components/src/flex/index.js         |  10 +
 packages/components/src/flex/item.js          |  22 ++
 packages/components/src/flex/stories/index.js | 241 ++++++++++++++++++
 .../components/src/flex/stories/style.css     |   7 +
 .../components/src/flex/styles/flex-styles.js |  78 ++++++
 .../src/focal-point-picker/controls.js        |  94 +++++++
 .../src/focal-point-picker/focal-point.js     |  49 ++++
 .../components/src/focal-point-picker/grid.js |  19 ++
 .../src/focal-point-picker/index.js           | 122 ++++-----
 .../src/focal-point-picker/style.scss         |  77 ------
 .../styles/focal-point-picker-style.js        |  95 ++++++-
 .../styles/focal-point-style.js               |  47 ++++
 .../src/focal-point-picker/utils.js           |   4 +
 packages/components/src/index.js              |   1 +
 .../components/src/input-control/utils.js     |  16 +-
 packages/components/src/style.scss            |   1 -
 .../styles/unit-control-styles.js             |   4 +-
 20 files changed, 855 insertions(+), 170 deletions(-)
 create mode 100644 packages/components/src/flex/README.md
 create mode 100644 packages/components/src/flex/block.js
 create mode 100644 packages/components/src/flex/flex.js
 create mode 100644 packages/components/src/flex/index.js
 create mode 100644 packages/components/src/flex/item.js
 create mode 100644 packages/components/src/flex/stories/index.js
 create mode 100644 packages/components/src/flex/stories/style.css
 create mode 100644 packages/components/src/flex/styles/flex-styles.js
 create mode 100644 packages/components/src/focal-point-picker/controls.js
 create mode 100644 packages/components/src/focal-point-picker/focal-point.js
 create mode 100644 packages/components/src/focal-point-picker/grid.js
 delete mode 100644 packages/components/src/focal-point-picker/style.scss
 create mode 100644 packages/components/src/focal-point-picker/styles/focal-point-style.js

diff --git a/packages/components/src/flex/README.md b/packages/components/src/flex/README.md
new file mode 100644
index 0000000000000..1fcaf566b9a56
--- /dev/null
+++ b/packages/components/src/flex/README.md
@@ -0,0 +1,69 @@
+# Flex
+
+Flex is a layout-based components, which provides a convenient way to align user-interfaces.
+
+## Usage
+
+```jsx
+import { __experimentalFlex as Flex } from '@wordpress/components';
+import { Icon, wordpress } from '@wordpress/icons';
+
+const Example = () => {
+	return (
+		<Flex>
+			<Flex.Item>
+				<Icon icon={ wordpress } />
+			</Flex.Item>
+			<Flex.Block>
+				<h2>WordPress</h2>
+			</Flex.Block>
+		</Flex>
+	);
+};
+```
+
+## Sub-Components
+
+This component provides a collection of sub-component that can be used to compose various interfaces.
+
+### `Flex.Block`
+
+A layout component that expands to fit the remaining space of `Flex`.
+
+### `Flex.Item`
+
+A layout component to contain items of a fixed width within `Flex`.
+
+## Props
+
+### align
+
+Vertically aligns children components using the CSS [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property.
+
+-   Type: `String`
+-   Required: No
+-   Default: `center`
+
+### gap
+
+Determines the spacing in between children components. The `gap` value is a multiplier to the base value of `4`.
+
+-   Type: `Number`
+-   Required: No
+-   Default: `2`
+
+### isReversed
+
+Reverses the render order of children components.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+### justify
+
+Horizontally aligns children components using the CSS [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) property.
+
+-   Type: `String`
+-   Required: No
+-   Default: `space-between`
diff --git a/packages/components/src/flex/block.js b/packages/components/src/flex/block.js
new file mode 100644
index 0000000000000..adcded360dbb3
--- /dev/null
+++ b/packages/components/src/flex/block.js
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+/**
+ * Internal dependencies
+ */
+import { Block } from './styles/flex-styles';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+function FlexBlock( { className, ...props }, ref ) {
+	const classes = classnames( 'components-flex__block', className );
+
+	return <Block { ...props } className={ classes } ref={ ref } />;
+}
+
+export default forwardRef( FlexBlock );
diff --git a/packages/components/src/flex/flex.js b/packages/components/src/flex/flex.js
new file mode 100644
index 0000000000000..f07ed15b90cc2
--- /dev/null
+++ b/packages/components/src/flex/flex.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Flex as BaseFlex } from './styles/flex-styles';
+import Block from './block';
+import Item from './item';
+
+function Flex(
+	{
+		align = 'center',
+		className,
+		gap = 2,
+		justify = 'space-between',
+		isReversed = false,
+		...props
+	},
+	ref
+) {
+	const classes = classnames( 'components-flex', className );
+
+	return (
+		<BaseFlex
+			{ ...props }
+			align={ align }
+			className={ classes }
+			ref={ ref }
+			gap={ gap }
+			justify={ justify }
+			isReversed={ isReversed }
+		/>
+	);
+}
+
+const ForwardedComponent = forwardRef( Flex );
+ForwardedComponent.Block = Block;
+ForwardedComponent.Item = Item;
+
+export default ForwardedComponent;
diff --git a/packages/components/src/flex/index.js b/packages/components/src/flex/index.js
new file mode 100644
index 0000000000000..174da20e5be46
--- /dev/null
+++ b/packages/components/src/flex/index.js
@@ -0,0 +1,10 @@
+export { default as Flex } from './flex';
+export { default as FlexBlock } from './block';
+export { default as FlexItem } from './item';
+
+/**
+ * Internal dependencies
+ */
+import Flex from './flex';
+
+export default Flex;
diff --git a/packages/components/src/flex/item.js b/packages/components/src/flex/item.js
new file mode 100644
index 0000000000000..9112d010c1f0c
--- /dev/null
+++ b/packages/components/src/flex/item.js
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { Item } from './styles/flex-styles';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+function FlexItem( { className, ...props }, ref ) {
+	const classes = classnames( 'components-flex__item', className );
+
+	return <Item { ...props } className={ classes } ref={ ref } />;
+}
+
+export default forwardRef( FlexItem );
diff --git a/packages/components/src/flex/stories/index.js b/packages/components/src/flex/stories/index.js
new file mode 100644
index 0000000000000..1408270a11c85
--- /dev/null
+++ b/packages/components/src/flex/stories/index.js
@@ -0,0 +1,241 @@
+/**
+ * External dependencies
+ */
+import { boolean, number, select } from '@storybook/addon-knobs';
+import { random } from 'lodash';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { arrowLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import Flex from '../flex';
+import FlexBlock from '../block';
+import FlexItem from '../item';
+
+import './style.css';
+
+export default { title: 'Components/Flex', component: Flex };
+
+const getStoryProps = () => {
+	const showOutline = boolean( 'Example: Show Outline', true );
+
+	const align = select(
+		'align',
+		{
+			top: 'top',
+			center: 'center',
+			bottom: 'bottom',
+		},
+		'center'
+	);
+
+	const gap = number( 'gap', 1 );
+
+	const justify = select(
+		'justify',
+		{
+			'space-between': 'space-between',
+			left: 'left',
+			center: 'center',
+			right: 'right',
+		},
+		'space-between'
+	);
+
+	return {
+		showOutline,
+		align,
+		gap,
+		justify,
+	};
+};
+
+const Box = ( props ) => {
+	const { height, width, style: styleProps = {} } = props;
+
+	const style = {
+		background: '#ddd',
+		fontSize: 12,
+		...styleProps,
+		height: height || 40,
+		width: width || '100%',
+	};
+
+	return <div { ...props } style={ style } />;
+};
+
+const EnhancedFlex = ( props ) => {
+	const { showOutline, ...restProps } = props;
+	const exampleClassName = showOutline ? 'example-only-show-outline' : '';
+
+	return <Flex { ...restProps } className={ exampleClassName } />;
+};
+
+export const _default = () => {
+	const showBlock = boolean( 'Example: Show Block', true );
+	const differSize = boolean( 'Example: Differ Sizes', true );
+	const props = getStoryProps();
+
+	const baseSize = 40;
+
+	return (
+		<EnhancedFlex { ...props }>
+			<FlexItem>
+				<Box
+					width={ differSize ? 100 : baseSize }
+					height={ differSize ? 100 : baseSize }
+				>
+					Item
+				</Box>
+			</FlexItem>
+			{ showBlock && (
+				<FlexBlock>
+					<Box height={ differSize ? 300 : null }>Block</Box>
+				</FlexBlock>
+			) }
+
+			<FlexItem>
+				<Box width={ 40 }>Item</Box>
+			</FlexItem>
+		</EnhancedFlex>
+	);
+};
+
+const ItemExample = () => {
+	const props = getStoryProps();
+
+	const [ items, setItems ] = useState( [
+		{
+			width: 40,
+			height: 40,
+		},
+	] );
+
+	const addItem = () => {
+		setItems( [
+			...items,
+			{ width: random( 12, 150 ), height: random( 12, 150 ) },
+		] );
+	};
+
+	const removeItem = () => {
+		const nextItems = items.filter( ( item, index ) => {
+			return index !== items.length - 1;
+		} );
+		setItems( nextItems );
+	};
+
+	return (
+		<div>
+			<Flex justify="left" gap="small">
+				<FlexItem>
+					<Button onClick={ addItem } isSecondary>
+						Add Item
+					</Button>
+				</FlexItem>
+				<FlexItem>
+					<Button onClick={ removeItem } isSecondary>
+						Remove Item
+					</Button>
+				</FlexItem>
+			</Flex>
+			<hr />
+			<EnhancedFlex { ...props }>
+				{ items.map( ( item, index ) => (
+					<FlexItem key={ index }>
+						<Box { ...item } />
+					</FlexItem>
+				) ) }
+			</EnhancedFlex>
+		</div>
+	);
+};
+
+export const flexItem = () => {
+	return <ItemExample />;
+};
+
+const BlockExample = () => {
+	const props = getStoryProps();
+
+	const [ items, setItems ] = useState( [
+		{
+			height: 40,
+		},
+	] );
+
+	const addItem = () => {
+		setItems( [ ...items, { height: random( 20, 150 ) } ] );
+	};
+
+	const removeItem = () => {
+		const nextItems = items.filter( ( item, index ) => {
+			return index !== items.length - 1;
+		} );
+		setItems( nextItems );
+	};
+
+	return (
+		<div>
+			<Flex justify="left" gap="small">
+				<FlexItem>
+					<Button onClick={ addItem } isSecondary>
+						Add Block
+					</Button>
+				</FlexItem>
+				<FlexItem>
+					<Button onClick={ removeItem } isSecondary>
+						Remove Blcok
+					</Button>
+				</FlexItem>
+			</Flex>
+			<hr />
+			<EnhancedFlex { ...props }>
+				<FlexItem>
+					<Box width={ 40 } height={ 40 } />
+				</FlexItem>
+				{ items.map( ( item, index ) => (
+					<FlexBlock key={ index }>
+						<Box { ...item } />
+					</FlexBlock>
+				) ) }
+				<FlexItem>
+					<Box width={ 40 } height={ 40 } />
+				</FlexItem>
+			</EnhancedFlex>
+		</div>
+	);
+};
+
+export const flexBlock = () => {
+	return <BlockExample />;
+};
+
+export const exampleActions = () => {
+	const props = getStoryProps();
+
+	return (
+		<EnhancedFlex { ...props }>
+			<FlexItem>
+				<Button icon={ arrowLeft } isTertiary />
+			</FlexItem>
+			<FlexItem>
+				<Flex justify="left" gap="small">
+					<FlexItem>
+						<Button isSecondary isPrimary>
+							Add
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button isSecondary>Remove Item</Button>
+					</FlexItem>
+				</Flex>
+			</FlexItem>
+		</EnhancedFlex>
+	);
+};
diff --git a/packages/components/src/flex/stories/style.css b/packages/components/src/flex/stories/style.css
new file mode 100644
index 0000000000000..06a05379c3735
--- /dev/null
+++ b/packages/components/src/flex/stories/style.css
@@ -0,0 +1,7 @@
+.components-flex.example-only-show-outline {
+	box-shadow: 0 0 0 1px pink;
+}
+
+.components-flex.example-only-show-outline > * {
+	box-shadow: 0 0 0 1px pink;
+}
diff --git a/packages/components/src/flex/styles/flex-styles.js b/packages/components/src/flex/styles/flex-styles.js
new file mode 100644
index 0000000000000..50bfbfd087b58
--- /dev/null
+++ b/packages/components/src/flex/styles/flex-styles.js
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+
+const alignStyle = ( { align } ) => {
+	const aligns = {
+		top: 'flex-start',
+		bottom: 'flex-end',
+	};
+	const value = aligns[ align ] || align;
+
+	return css( {
+		alignItems: value,
+	} );
+};
+
+const justifyStyle = ( { justify, isReversed } ) => {
+	const justifies = {
+		left: 'flex-start',
+		right: 'flex-end',
+	};
+	let value = justifies[ justify ] || justify;
+
+	if ( isReversed && justifies[ justify ] ) {
+		value = justify === 'left' ? justifies.right : justifies.left;
+	}
+
+	return css( {
+		justifyContent: value,
+	} );
+};
+
+const gapStyle = ( { gap, isReversed } ) => {
+	const base = 4;
+	const value = typeof gap === 'number' ? base * gap : base;
+	const dir = isReversed ? 'left' : 'right';
+	const padding = `padding-${ dir }`;
+
+	return css`
+		> * {
+			${padding}: ${value}px;
+
+			&:last-child {
+				${padding}: 0;
+			}
+		}
+	`;
+};
+
+const reversedStyles = ( { isReversed } ) => {
+	if ( ! isReversed ) return '';
+
+	return css`
+		flex-direction: row-reverse;
+	`;
+};
+
+export const Flex = styled.div`
+	box-sizing: border-box;
+	display: flex;
+
+	${alignStyle};
+	${justifyStyle};
+	${gapStyle};
+	${reversedStyles};
+`;
+
+export const Item = styled.div`
+	box-sizing: border-box;
+	min-width: 0;
+	max-width: 100%;
+`;
+
+export const Block = styled( Item )`
+	flex: 1;
+`;
diff --git a/packages/components/src/focal-point-picker/controls.js b/packages/components/src/focal-point-picker/controls.js
new file mode 100644
index 0000000000000..a7593a85f8d34
--- /dev/null
+++ b/packages/components/src/focal-point-picker/controls.js
@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import FormToggle from '../form-toggle';
+import {
+	ControlLabel,
+	ControlField,
+	UnitControl as BaseUnitControl,
+	ControlWrapper,
+} from './styles/focal-point-picker-style';
+import { fractionToPercentage } from './utils';
+
+const TEXTCONTROL_MIN = 0;
+const TEXTCONTROL_MAX = 100;
+
+export default function FocalPointPickerControls( {
+	isGridEnabled = false,
+	onHorizontalChange = noop,
+	onVerticalChange = noop,
+	onToggleGrid = noop,
+	percentages = {
+		x: 0.5,
+		y: 0.5,
+	},
+} ) {
+	const valueX = fractionToPercentage( percentages.x );
+	const valueY = fractionToPercentage( percentages.y );
+	const instanceId = useInstanceId( FocalPointPickerControls );
+	const gridSwitchId = `focal-point-picker-grid-switch-${ instanceId }`;
+
+	return (
+		<ControlWrapper className="focal-point-picker__controls">
+			<ControlField
+				className="focal-point-picker__controls-position"
+				justify="left"
+			>
+				<ControlLabel>{ __( 'Position' ) }</ControlLabel>
+				<ControlField justify="left">
+					<UnitControl
+						label={ __( 'Left' ) }
+						value={ valueX }
+						onChange={ onHorizontalChange }
+						dragDirection="e"
+					/>
+					<UnitControl
+						label={ __( 'Top' ) }
+						value={ valueY }
+						onChange={ onVerticalChange }
+						dragDirection="s"
+					/>
+				</ControlField>
+			</ControlField>
+			<ControlField
+				className="focal-point-picker__controls-grid"
+				justify="left"
+			>
+				<ControlLabel htmlFor={ gridSwitchId }>
+					{ __( 'Grid' ) }
+				</ControlLabel>
+				<FormToggle
+					className="focal-point-picker__controls-position-grid-toggle-control"
+					id={ gridSwitchId }
+					checked={ isGridEnabled }
+					onChange={ () => onToggleGrid( ! isGridEnabled ) }
+				/>
+			</ControlField>
+		</ControlWrapper>
+	);
+}
+
+function UnitControl( props ) {
+	return (
+		<BaseUnitControl
+			className="focal-point-picker__controls-position-unit-control"
+			isFloatingLabel
+			max={ TEXTCONTROL_MAX }
+			min={ TEXTCONTROL_MIN }
+			unit="%"
+			units={ [ { value: '%', label: '%' } ] }
+			{ ...props }
+		/>
+	);
+}
diff --git a/packages/components/src/focal-point-picker/focal-point.js b/packages/components/src/focal-point-picker/focal-point.js
new file mode 100644
index 0000000000000..98ed16ebe3151
--- /dev/null
+++ b/packages/components/src/focal-point-picker/focal-point.js
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import {
+	PointerIconSVG,
+	PointerIconPathFill,
+	PointerIconPathOutline,
+	FocalPointWrapper,
+} from './styles/focal-point-style';
+
+export default function FocalPoint( {
+	coordinates = {},
+	isDragging = false,
+	...props
+} ) {
+	const classes = classnames(
+		'components-focal-point-picker__icon_container',
+		isDragging ? 'is-dragging' : null
+	);
+
+	const style = {
+		left: `${ coordinates.left }px`,
+		top: `${ coordinates.top }px`,
+	};
+
+	return (
+		<FocalPointWrapper { ...props } className={ classes } style={ style }>
+			<PointerIconSVG
+				className="components-focal-point-picker__icon"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 30 30"
+			>
+				<PointerIconPathOutline
+					className="components-focal-point-picker__icon-outline"
+					d="M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z"
+				/>
+				<PointerIconPathFill
+					className="components-focal-point-picker__icon-fill"
+					d="M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z"
+				/>
+			</PointerIconSVG>
+		</FocalPointWrapper>
+	);
+}
diff --git a/packages/components/src/focal-point-picker/grid.js b/packages/components/src/focal-point-picker/grid.js
new file mode 100644
index 0000000000000..5eb8a5f40a059
--- /dev/null
+++ b/packages/components/src/focal-point-picker/grid.js
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import {
+	GridView,
+	GridLineX,
+	GridLineY,
+} from './styles/focal-point-picker-style';
+
+export default function FocalPointPickerGrid( props ) {
+	return (
+		<GridView { ...props }>
+			<GridLineX style={ { top: '33%' } } />
+			<GridLineX style={ { top: '66%' } } />
+			<GridLineY style={ { left: '33%' } } />
+			<GridLineY style={ { left: '66%' } } />
+		</GridView>
+	);
+}
diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index 1df8f875acb53..ec03d0231f17e 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -6,20 +6,22 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { withInstanceId, compose } from '@wordpress/compose';
-import { Path, SVG } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
  */
-import BaseControl from '../base-control';
 import withFocusOutside from '../higher-order/with-focus-outside';
+import BaseControl from '../base-control';
+import Controls from './controls';
+import FocalPoint from './focal-point';
+import Grid from './grid';
 import Media from './media';
-
-const TEXTCONTROL_MIN = 0;
-const TEXTCONTROL_MAX = 100;
+import {
+	MediaWrapper,
+	MediaContainer,
+} from './styles/focal-point-picker-style';
 
 export class FocalPointPicker extends Component {
 	constructor( props ) {
@@ -27,6 +29,7 @@ export class FocalPointPicker extends Component {
 		this.onMouseMove = this.onMouseMove.bind( this );
 		this.state = {
 			isDragging: false,
+			isGridEnabled: false,
 			bounds: {},
 			percentages: props.value,
 		};
@@ -130,14 +133,11 @@ export class FocalPointPicker extends Component {
 			} );
 		}
 	}
-	fractionToPercentage( fraction ) {
-		return Math.round( fraction * 100 );
+	horizontalPositionChanged( nextValue ) {
+		this.positionChangeFromTextControl( 'x', nextValue );
 	}
-	horizontalPositionChanged( event ) {
-		this.positionChangeFromTextControl( 'x', event.target.value );
-	}
-	verticalPositionChanged( event ) {
-		this.positionChangeFromTextControl( 'y', event.target.value );
+	verticalPositionChanged( nextValue ) {
+		this.positionChangeFromTextControl( 'y', nextValue );
 	}
 	positionChangeFromTextControl( axis, value ) {
 		const { onChange } = this.props;
@@ -186,7 +186,7 @@ export class FocalPointPicker extends Component {
 			help,
 			className,
 		} = this.props;
-		const { bounds, isDragging, percentages } = this.state;
+		const { bounds, isDragging, isGridEnabled, percentages } = this.state;
 		const pickerDimensions = this.pickerDimensions();
 		const iconCoordinates = {
 			left:
@@ -196,27 +196,23 @@ export class FocalPointPicker extends Component {
 				value.y * ( pickerDimensions.height - bounds.top * 2 ) +
 				bounds.top,
 		};
-		const iconContainerStyle = {
-			left: `${ iconCoordinates.left }px`,
-			top: `${ iconCoordinates.top }px`,
-		};
-		const iconContainerClasses = classnames(
-			'components-focal-point-picker__icon_container',
-			isDragging ? 'is-dragging' : null
+
+		const classes = classnames(
+			'components-focal-point-picker-control',
+			className
 		);
+
 		const id = `inspector-focal-point-picker-control-${ instanceId }`;
-		const horizontalPositionId = `inspector-focal-point-picker-control-horizontal-position-${ instanceId }`;
-		const verticalPositionId = `inspector-focal-point-picker-control-vertical-position-${ instanceId }`;
 
 		return (
 			<BaseControl
 				label={ label }
 				id={ id }
 				help={ help }
-				className={ className }
+				className={ classes }
 			>
-				<div className="components-focal-point-picker-wrapper">
-					<div
+				<MediaWrapper className="components-focal-point-picker-wrapper">
+					<MediaContainer
 						className="components-focal-point-picker"
 						onMouseDown={ () =>
 							this.setState( { isDragging: true } )
@@ -231,6 +227,14 @@ export class FocalPointPicker extends Component {
 						role="button"
 						tabIndex="-1"
 					>
+						{ isGridEnabled && (
+							<Grid
+								style={ {
+									width: bounds.width,
+									height: bounds.height,
+								} }
+							/>
+						) }
 						<Media
 							alt="Dimensions helper"
 							autoPlay={ autoPlay }
@@ -238,59 +242,21 @@ export class FocalPointPicker extends Component {
 							onLoad={ this.onLoad }
 							src={ url }
 						/>
-						<div
-							className={ iconContainerClasses }
-							style={ iconContainerStyle }
-						>
-							<SVG
-								className="components-focal-point-picker__icon"
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 30 30"
-							>
-								<Path
-									className="components-focal-point-picker__icon-outline"
-									d="M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z"
-								/>
-								<Path
-									className="components-focal-point-picker__icon-fill"
-									d="M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z"
-								/>
-							</SVG>
-						</div>
-					</div>
-				</div>
-				<div className="components-focal-point-picker_position-display-container">
-					<BaseControl
-						label={ __( 'Horizontal pos.' ) }
-						id={ horizontalPositionId }
-					>
-						<input
-							className="components-text-control__input"
-							id={ horizontalPositionId }
-							max={ TEXTCONTROL_MAX }
-							min={ TEXTCONTROL_MIN }
-							onChange={ this.horizontalPositionChanged }
-							type="number"
-							value={ this.fractionToPercentage( percentages.x ) }
-						/>
-						<span>%</span>
-					</BaseControl>
-					<BaseControl
-						label={ __( 'Vertical pos.' ) }
-						id={ verticalPositionId }
-					>
-						<input
-							className="components-text-control__input"
-							id={ verticalPositionId }
-							max={ TEXTCONTROL_MAX }
-							min={ TEXTCONTROL_MIN }
-							onChange={ this.verticalPositionChanged }
-							type="number"
-							value={ this.fractionToPercentage( percentages.y ) }
+						<FocalPoint
+							coordinates={ iconCoordinates }
+							isDragging={ isDragging }
 						/>
-						<span>%</span>
-					</BaseControl>
-				</div>
+					</MediaContainer>
+				</MediaWrapper>
+				<Controls
+					percentages={ percentages }
+					onHorizontalChange={ this.horizontalPositionChanged }
+					onVerticalChange={ this.verticalPositionChanged }
+					isGridEnabled={ isGridEnabled }
+					onToggleGrid={ ( next ) =>
+						this.setState( { isGridEnabled: next } )
+					}
+				/>
 			</BaseControl>
 		);
 	}
diff --git a/packages/components/src/focal-point-picker/style.scss b/packages/components/src/focal-point-picker/style.scss
deleted file mode 100644
index a7d1f6dd74ec2..0000000000000
--- a/packages/components/src/focal-point-picker/style.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-.components-focal-point-picker-wrapper {
-	background-color: transparent;
-	border: 1px solid $light-gray-500;
-	height: 200px;
-	width: 100%;
-	padding: 14px;
-}
-
-.components-focal-point-picker {
-	align-items: center;
-	cursor: pointer;
-	display: flex;
-	height: 100%;
-	justify-content: center;
-	position: relative;
-	width: 100%;
-
-	img,
-	video {
-		height: auto;
-		max-height: 100%;
-		max-width: 100%;
-		width: auto;
-		pointer-events: none;
-		user-select: none;
-	}
-}
-
-.components-focal-point-picker__icon_container {
-	background-color: transparent;
-	cursor: grab;
-	height: 30px;
-	opacity: 0.8;
-	position: absolute;
-	will-change: transform;
-	width: 30px;
-	z-index: 10000;
-
-	&.is-dragging {
-		cursor: grabbing;
-	}
-}
-
-.components-focal-point-picker__icon {
-	display: block;
-	height: 100%;
-	left: -15px;
-	position: absolute;
-	top: -15px;
-	width: 100%;
-
-	.components-focal-point-picker__icon-outline {
-		fill: $white;
-	}
-
-	.components-focal-point-picker__icon-fill {
-		fill: theme(primary);
-	}
-}
-
-.components-focal-point-picker_position-display-container {
-	margin: 1em 0;
-	display: flex;
-
-	.components-base-control__field {
-		margin: 0 1em 0 0;
-	}
-
-	input[type="number"].components-text-control__input { // Needs specificity to override padding.
-		max-width: 4em;
-		padding: 6px 4px;
-	}
-
-	span {
-		margin: 0 0 0 0.2em;
-	}
-}
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
index 13317a142e0cf..dfd4afcf8ceaa 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -2,15 +2,108 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+
 /**
  * Internal dependencies
  */
+import Flex from '../../flex';
+import BaseUnitControl from '../../unit-control';
 import { color } from '../../utils/style-mixins';
 
+export const MediaWrapper = styled.div`
+	background-color: transparent;
+	border: 1px solid ${color( 'lightGray.500' )};
+	box-sizing: border-box;
+	height: 200px;
+	padding: 14px;
+	width: 100%;
+`;
+
+export const MediaContainer = styled.div`
+	align-items: center;
+	box-sizing: border-box;
+	cursor: pointer;
+	display: flex;
+	height: 100%;
+	justify-content: center;
+	position: relative;
+	width: 100%;
+
+	img,
+	video {
+		box-sizing: border-box;
+		display: block;
+		height: auto;
+		margin: 0;
+		max-height: 100%;
+		max-width: 100%;
+		pointer-events: none;
+		user-select: none;
+		width: auto;
+	}
+`;
+
 export const MediaPlaceholder = styled.div`
 	background: ${color( 'lightGray.300' )};
 	box-sizing: border-box;
-	height: 160px;
+	height: 170px;
 	max-width: 280px;
+	min-width: 200px;
 	width: 100%;
 `;
+
+export const UnitControl = styled( BaseUnitControl )`
+	width: 72px;
+`;
+
+export const ControlWrapper = styled.div`
+	box-sizing: border-box;
+	max-width: 320px;
+	padding: 1em 0;
+`;
+
+export const ControlField = styled( Flex )`
+	padding-bottom: 12px;
+
+	&:last-child {
+		padding-bottom: 0;
+	}
+`;
+
+export const ControlLabel = styled.label`
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	width: 80px;
+`;
+
+export const GridView = styled.div`
+	box-sizing: border-box;
+	overflow: hidden;
+	pointer-events: none;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate( -50%, -50% );
+	z-index: 1;
+`;
+
+export const GridLine = styled.div`
+	box-sizing: border-box;
+	background: white;
+	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );
+	position: absolute;
+	opacity: 0.4;
+`;
+
+export const GridLineX = styled( GridLine )`
+	height: 1px;
+	left: 0;
+	right: 0;
+`;
+
+export const GridLineY = styled( GridLine )`
+	width: 1px;
+	top: 0;
+	bottom: 0;
+`;
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.js b/packages/components/src/focal-point-picker/styles/focal-point-style.js
new file mode 100644
index 0000000000000..812b63d8aaba3
--- /dev/null
+++ b/packages/components/src/focal-point-picker/styles/focal-point-style.js
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import { color } from '../../utils/style-mixins';
+
+export const FocalPointWrapper = styled.div`
+	box-sizing: border-box;
+	background-color: transparent;
+	cursor: grab;
+	height: 30px;
+	opacity: 0.8;
+	position: absolute;
+	will-change: transform;
+	width: 30px;
+	z-index: 10000;
+
+	&.is-dragging {
+		cursor: grabbing;
+	}
+`;
+
+export const PointerIconSVG = styled( SVG )`
+	display: block;
+	height: 100%;
+	left: -15px;
+	position: absolute;
+	top: -15px;
+	width: 100%;
+`;
+
+export const PointerIconPathOutline = styled( Path )`
+	fill: white;
+`;
+
+export const PointerIconPathFill = styled( Path )`
+	fill: ${color( 'ui.brand' )};
+`;
diff --git a/packages/components/src/focal-point-picker/utils.js b/packages/components/src/focal-point-picker/utils.js
index 87cfb301ce4d5..0c98da679a1c7 100644
--- a/packages/components/src/focal-point-picker/utils.js
+++ b/packages/components/src/focal-point-picker/utils.js
@@ -9,3 +9,7 @@ export function isVideoType( filename = '' ) {
 	if ( ! filename ) return false;
 	return VIDEO_EXTENSIONS.includes( getExtension( filename ) );
 }
+
+export function fractionToPercentage( fraction ) {
+	return Math.round( fraction * 100 );
+}
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 51208ec358223..180160c3631f0 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -43,6 +43,7 @@ export { default as DropZoneProvider } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { default as ExternalLink } from './external-link';
+export { default as __experimentalFlex } from './flex';
 export { default as FocalPointPicker } from './focal-point-picker';
 export { default as FocusableIframe } from './focusable-iframe';
 export { default as FontSizePicker } from './font-size-picker';
diff --git a/packages/components/src/input-control/utils.js b/packages/components/src/input-control/utils.js
index ee2c897580e9b..f33a7bd3ec2a9 100644
--- a/packages/components/src/input-control/utils.js
+++ b/packages/components/src/input-control/utils.js
@@ -3,11 +3,6 @@
  */
 import { useEffect } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import { getRTL } from '../utils/style-mixins';
-
 /**
  * Gets a CSS cursor value based on a drag direction.
  *
@@ -15,21 +10,20 @@ import { getRTL } from '../utils/style-mixins';
  * @return {string} The CSS cursor value.
  */
 export function getDragCursor( dragDirection ) {
-	const isRtl = getRTL();
-	let dragCursor = 'n-resize';
+	let dragCursor = 'ns-resize';
 
 	switch ( dragDirection ) {
 		case 'n':
-			dragCursor = 'n-resize';
+			dragCursor = 'ns-resize';
 			break;
 		case 'e':
-			dragCursor = isRtl ? 'w-resize' : 'e-resize';
+			dragCursor = 'ew-resize';
 			break;
 		case 's':
-			dragCursor = 's-resize';
+			dragCursor = 'ns-resize';
 			break;
 		case 'w':
-			dragCursor = isRtl ? 'e-resize' : 'w-resize';
+			dragCursor = 'ew-resize';
 			break;
 	}
 
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 83e26e37cb09a..d7fb8455f42ea 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -19,7 +19,6 @@
 @import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
 @import "./external-link/style.scss";
-@import "./focal-point-picker/style.scss";
 @import "./font-size-picker/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.js b/packages/components/src/unit-control/styles/unit-control-styles.js
index 642cdb9793edb..213343ddd62ff 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.js
+++ b/packages/components/src/unit-control/styles/unit-control-styles.js
@@ -95,8 +95,8 @@ const baseUnitLabelStyles = ( props ) => {
 
 const unitLabelPaddingStyles = ( { size } ) => {
 	const sizes = {
-		default: '6px 2px',
-		small: '4px 2px',
+		default: '10px 2px',
+		small: '7px 2px',
 	};
 
 	return css( { padding: sizes[ size ] } );

From 7c766f298b92c659a6c1e04b754a17f482d265b5 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 20 May 2020 17:32:22 -0400
Subject: [PATCH 04/27] Update docs manifest

---
 docs/manifest.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/manifest.json b/docs/manifest.json
index 40c10d70dbe3a..46b0676c85751 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -767,6 +767,12 @@
 		"markdown_source": "../packages/components/src/external-link/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Flex",
+		"slug": "flex",
+		"markdown_source": "../packages/components/src/flex/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "FocalPointPicker",
 		"slug": "focal-point-picker",

From 5a1469e3e1e7f7fb4ebf4fa9e2e2198b7e5eba82 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 20 May 2020 19:01:54 -0400
Subject: [PATCH 05/27] Add click + keyboard arrow movements to update position

---
 .../src/focal-point-picker/index.js           | 134 ++++++++++++------
 .../src/focal-point-picker/utils.js           |  26 ++++
 2 files changed, 118 insertions(+), 42 deletions(-)

diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index ec03d0231f17e..83bdb2a92f175 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import { Component, createRef } from '@wordpress/element';
 import { withInstanceId, compose } from '@wordpress/compose';
+import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -22,6 +23,7 @@ import {
 	MediaWrapper,
 	MediaContainer,
 } from './styles/focal-point-picker-style';
+import { roundClamp } from './utils';
 
 export class FocalPointPicker extends Component {
 	constructor( props ) {
@@ -43,6 +45,7 @@ export class FocalPointPicker extends Component {
 		);
 		this.onLoad = this.onLoad.bind( this );
 		this.handleOnMouseUp = this.handleOnMouseUp.bind( this );
+		this.handleOnKeyDown = this.handleOnKeyDown.bind( this );
 	}
 	componentDidMount() {
 		document.addEventListener( 'mouseup', this.handleOnMouseUp );
@@ -66,16 +69,20 @@ export class FocalPointPicker extends Component {
 			width: 0,
 			height: 0,
 		};
+
 		if ( ! this.mediaRef.current ) {
 			return bounds;
 		}
+
 		const dimensions = {
 			width: this.mediaRef.current.clientWidth,
 			height: this.mediaRef.current.clientHeight,
 		};
 		const pickerDimensions = this.pickerDimensions();
+
 		const widthRatio = pickerDimensions.width / dimensions.width;
 		const heightRatio = pickerDimensions.height / dimensions.height;
+
 		if ( heightRatio >= widthRatio ) {
 			bounds.width = bounds.right = pickerDimensions.width;
 			bounds.height = dimensions.height * widthRatio;
@@ -94,44 +101,87 @@ export class FocalPointPicker extends Component {
 			bounds: this.calculateBounds(),
 		} );
 	}
+	updateValue( nextValue ) {
+		const { onChange } = this.props;
+
+		this.setState( { percentages: nextValue }, () => {
+			onChange( nextValue );
+		} );
+	}
 	handleOnMouseUp() {
 		this.setState( { isDragging: false } );
 	}
+	handleOnKeyDown( event ) {
+		const { keyCode, shiftKey } = event;
+		if ( ! [ UP, DOWN, LEFT, RIGHT ].includes( keyCode ) ) return;
+
+		const { x, y } = this.state.percentages;
+
+		event.preventDefault();
+
+		// Normalizing values for incrementing/decrementing based on arrow keys
+		let nextX = parseFloat( x ) * 100;
+		let nextY = parseFloat( y ) * 100;
+		const step = shiftKey ? 10 : 1;
+
+		switch ( event.keyCode ) {
+			case UP:
+				nextY = nextY - step;
+				break;
+			case DOWN:
+				nextY = nextY + step;
+				break;
+			case LEFT:
+				nextX = nextX - step;
+				break;
+			case RIGHT:
+				nextX = nextX + step;
+				break;
+		}
+
+		// Transforming values back to 0.00 percentage values
+		nextX = ( roundClamp( nextX, 0, 100, step ) / 100 ).toFixed( 2 );
+		nextY = ( roundClamp( nextY, 0, 100, step ) / 100 ).toFixed( 2 );
+
+		const percentages = {
+			x: nextX,
+			y: nextY,
+		};
+
+		this.updateValue( percentages );
+	}
 	onMouseMove( event ) {
 		const { isDragging, bounds } = this.state;
-		const { onChange } = this.props;
 
-		if ( isDragging ) {
-			const pickerDimensions = this.pickerDimensions();
-			const cursorPosition = {
-				left: event.pageX - pickerDimensions.left,
-				top: event.pageY - pickerDimensions.top,
-			};
-			const left = Math.max(
-				bounds.left,
-				Math.min( cursorPosition.left, bounds.right )
-			);
-			const top = Math.max(
-				bounds.top,
-				Math.min( cursorPosition.top, bounds.bottom )
-			);
-			const percentages = {
-				x: (
-					( left - bounds.left ) /
-					( pickerDimensions.width - bounds.left * 2 )
-				).toFixed( 2 ),
-				y: (
-					( top - bounds.top ) /
-					( pickerDimensions.height - bounds.top * 2 )
-				).toFixed( 2 ),
-			};
-			this.setState( { percentages }, function() {
-				onChange( {
-					x: this.state.percentages.x,
-					y: this.state.percentages.y,
-				} );
-			} );
-		}
+		if ( ! isDragging ) return;
+
+		const pickerDimensions = this.pickerDimensions();
+		const cursorPosition = {
+			left: event.pageX - pickerDimensions.left,
+			top: event.pageY - pickerDimensions.top,
+		};
+
+		const left = Math.max(
+			bounds.left,
+			Math.min( cursorPosition.left, bounds.right )
+		);
+		const top = Math.max(
+			bounds.top,
+			Math.min( cursorPosition.top, bounds.bottom )
+		);
+
+		const percentages = {
+			x: (
+				( left - bounds.left ) /
+				( pickerDimensions.width - bounds.left * 2 )
+			).toFixed( 2 ),
+			y: (
+				( top - bounds.top ) /
+				( pickerDimensions.height - bounds.top * 2 )
+			).toFixed( 2 ),
+		};
+
+		this.updateValue( percentages );
 	}
 	horizontalPositionChanged( nextValue ) {
 		this.positionChangeFromTextControl( 'x', nextValue );
@@ -140,18 +190,14 @@ export class FocalPointPicker extends Component {
 		this.positionChangeFromTextControl( 'y', nextValue );
 	}
 	positionChangeFromTextControl( axis, value ) {
-		const { onChange } = this.props;
 		const { percentages } = this.state;
+
 		const cleanValue = Math.max( Math.min( parseInt( value ), 100 ), 0 );
 		percentages[ axis ] = ( cleanValue ? cleanValue / 100 : 0 ).toFixed(
 			2
 		);
-		this.setState( { percentages }, function() {
-			onChange( {
-				x: this.state.percentages.x,
-				y: this.state.percentages.y,
-			} );
-		} );
+
+		this.updateValue( percentages );
 	}
 	pickerDimensions() {
 		if ( this.containerRef.current ) {
@@ -214,9 +260,12 @@ export class FocalPointPicker extends Component {
 				<MediaWrapper className="components-focal-point-picker-wrapper">
 					<MediaContainer
 						className="components-focal-point-picker"
-						onMouseDown={ () =>
-							this.setState( { isDragging: true } )
-						}
+						onMouseDown={ ( event ) => {
+							event.persist();
+							this.setState( { isDragging: true }, () => {
+								this.onMouseMove( event );
+							} );
+						} }
 						onDragStart={ () =>
 							this.setState( { isDragging: true } )
 						}
@@ -226,6 +275,7 @@ export class FocalPointPicker extends Component {
 						ref={ this.containerRef }
 						role="button"
 						tabIndex="-1"
+						onKeyDown={ this.handleOnKeyDown }
 					>
 						{ isGridEnabled && (
 							<Grid
diff --git a/packages/components/src/focal-point-picker/utils.js b/packages/components/src/focal-point-picker/utils.js
index 0c98da679a1c7..5411f3b2dc76b 100644
--- a/packages/components/src/focal-point-picker/utils.js
+++ b/packages/components/src/focal-point-picker/utils.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { clamp } from 'lodash';
+
 const VIDEO_EXTENSIONS = [ 'm4v', 'avi', 'mpg', 'mp4', 'webm', 'ogg' ];
 
 export function getExtension( filename = '' ) {
@@ -13,3 +18,24 @@ export function isVideoType( filename = '' ) {
 export function fractionToPercentage( fraction ) {
 	return Math.round( fraction * 100 );
 }
+
+/**
+ * Clamps a value based on a min/max range with rounding
+ *
+ * @param {number} value The value.
+ * @param {number} min The minimum range.
+ * @param {number} max The maximum range.
+ * @param {number} step A multiplier for the value.
+ * @return {number} The rounded and clamped value.
+ */
+export function roundClamp(
+	value = 0,
+	min = Infinity,
+	max = Infinity,
+	step = 1
+) {
+	const rounded = Math.round( value / step ) * step;
+	const clampedValue = clamp( rounded, min, max );
+
+	return clampedValue;
+}

From bcb5c11dedce5a3c09a4e191b7eb1345d4b3e16c Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 21 May 2020 12:41:39 -0400
Subject: [PATCH 06/27] Show grid on drag. Improve click/drag interaction.

---
 .../src/focal-point-picker/controls.js        | 20 -------
 .../components/src/focal-point-picker/grid.js | 54 ++++++++++++++++++-
 .../src/focal-point-picker/index.js           | 40 +++++++-------
 .../styles/focal-point-picker-style.js        | 20 +++++--
 .../styles/focal-point-style.js               |  5 +-
 .../src/focal-point-picker/utils.js           | 26 ---------
 6 files changed, 90 insertions(+), 75 deletions(-)

diff --git a/packages/components/src/focal-point-picker/controls.js b/packages/components/src/focal-point-picker/controls.js
index a7593a85f8d34..c8248ec9f33b7 100644
--- a/packages/components/src/focal-point-picker/controls.js
+++ b/packages/components/src/focal-point-picker/controls.js
@@ -7,12 +7,10 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import FormToggle from '../form-toggle';
 import {
 	ControlLabel,
 	ControlField,
@@ -25,10 +23,8 @@ const TEXTCONTROL_MIN = 0;
 const TEXTCONTROL_MAX = 100;
 
 export default function FocalPointPickerControls( {
-	isGridEnabled = false,
 	onHorizontalChange = noop,
 	onVerticalChange = noop,
-	onToggleGrid = noop,
 	percentages = {
 		x: 0.5,
 		y: 0.5,
@@ -36,8 +32,6 @@ export default function FocalPointPickerControls( {
 } ) {
 	const valueX = fractionToPercentage( percentages.x );
 	const valueY = fractionToPercentage( percentages.y );
-	const instanceId = useInstanceId( FocalPointPickerControls );
-	const gridSwitchId = `focal-point-picker-grid-switch-${ instanceId }`;
 
 	return (
 		<ControlWrapper className="focal-point-picker__controls">
@@ -61,20 +55,6 @@ export default function FocalPointPickerControls( {
 					/>
 				</ControlField>
 			</ControlField>
-			<ControlField
-				className="focal-point-picker__controls-grid"
-				justify="left"
-			>
-				<ControlLabel htmlFor={ gridSwitchId }>
-					{ __( 'Grid' ) }
-				</ControlLabel>
-				<FormToggle
-					className="focal-point-picker__controls-position-grid-toggle-control"
-					id={ gridSwitchId }
-					checked={ isGridEnabled }
-					onChange={ () => onToggleGrid( ! isGridEnabled ) }
-				/>
-			</ControlField>
 		</ControlWrapper>
 	);
 }
diff --git a/packages/components/src/focal-point-picker/grid.js b/packages/components/src/focal-point-picker/grid.js
index 5eb8a5f40a059..b88e19f3d8fc2 100644
--- a/packages/components/src/focal-point-picker/grid.js
+++ b/packages/components/src/focal-point-picker/grid.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect, useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -7,9 +12,18 @@ import {
 	GridLineY,
 } from './styles/focal-point-picker-style';
 
-export default function FocalPointPickerGrid( props ) {
+export default function FocalPointPickerGrid( {
+	percentages = {
+		x: 0.5,
+		y: 0.5,
+	},
+	...props
+} ) {
+	const percentageValue = percentages.x + percentages.y;
+	const animationProps = useRevealAnimation( percentageValue );
+
 	return (
-		<GridView { ...props }>
+		<GridView { ...props } { ...animationProps }>
 			<GridLineX style={ { top: '33%' } } />
 			<GridLineX style={ { top: '66%' } } />
 			<GridLineY style={ { left: '33%' } } />
@@ -17,3 +31,39 @@ export default function FocalPointPickerGrid( props ) {
 		</GridView>
 	);
 }
+
+/**
+ * Custom hook that renders the "flash" animation whenever the value changes.
+ *
+ * @param {string} value Value of (box) side.
+ */
+function useRevealAnimation( value ) {
+	const [ isActive, setIsActive ] = useState( false );
+	const valueRef = useRef( value );
+	const timeoutRef = useRef();
+
+	const clearTimer = () => {
+		if ( timeoutRef.current ) {
+			window.clearTimeout( timeoutRef.current );
+		}
+	};
+
+	useEffect( () => {
+		if ( value !== valueRef.current ) {
+			setIsActive( true );
+			valueRef.current = value;
+
+			clearTimer();
+
+			timeoutRef.current = setTimeout( () => {
+				setIsActive( false );
+			}, 400 );
+		}
+
+		return () => clearTimer();
+	}, [ value ] );
+
+	return {
+		isActive,
+	};
+}
diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index 83bdb2a92f175..79d1481fff969 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -23,7 +23,7 @@ import {
 	MediaWrapper,
 	MediaContainer,
 } from './styles/focal-point-picker-style';
-import { roundClamp } from './utils';
+import { roundClamp } from '../number-control/utils';
 
 export class FocalPointPicker extends Component {
 	constructor( props ) {
@@ -31,7 +31,6 @@ export class FocalPointPicker extends Component {
 		this.onMouseMove = this.onMouseMove.bind( this );
 		this.state = {
 			isDragging: false,
-			isGridEnabled: false,
 			bounds: {},
 			percentages: props.value,
 		};
@@ -46,9 +45,11 @@ export class FocalPointPicker extends Component {
 		this.onLoad = this.onLoad.bind( this );
 		this.handleOnMouseUp = this.handleOnMouseUp.bind( this );
 		this.handleOnKeyDown = this.handleOnKeyDown.bind( this );
+		this.updateBounds = this.updateBounds.bind( this );
 	}
 	componentDidMount() {
 		document.addEventListener( 'mouseup', this.handleOnMouseUp );
+		window.addEventListener( 'resize', this.updateBounds );
 	}
 	componentDidUpdate( prevProps ) {
 		if ( prevProps.url !== this.props.url ) {
@@ -59,6 +60,7 @@ export class FocalPointPicker extends Component {
 	}
 	componentWillUnmount() {
 		document.removeEventListener( 'mouseup', this.handleOnMouseUp );
+		window.removeEventListener( 'resize', this.updateBounds );
 	}
 	calculateBounds() {
 		const bounds = {
@@ -96,11 +98,6 @@ export class FocalPointPicker extends Component {
 		}
 		return bounds;
 	}
-	onLoad() {
-		this.setState( {
-			bounds: this.calculateBounds(),
-		} );
-	}
 	updateValue( nextValue ) {
 		const { onChange } = this.props;
 
@@ -108,6 +105,14 @@ export class FocalPointPicker extends Component {
 			onChange( nextValue );
 		} );
 	}
+	updateBounds() {
+		this.setState( {
+			bounds: this.calculateBounds(),
+		} );
+	}
+	onLoad() {
+		this.updateBounds();
+	}
 	handleOnMouseUp() {
 		this.setState( { isDragging: false } );
 	}
@@ -232,7 +237,7 @@ export class FocalPointPicker extends Component {
 			help,
 			className,
 		} = this.props;
-		const { bounds, isDragging, isGridEnabled, percentages } = this.state;
+		const { bounds, isDragging, percentages } = this.state;
 		const pickerDimensions = this.pickerDimensions();
 		const iconCoordinates = {
 			left:
@@ -277,14 +282,13 @@ export class FocalPointPicker extends Component {
 						tabIndex="-1"
 						onKeyDown={ this.handleOnKeyDown }
 					>
-						{ isGridEnabled && (
-							<Grid
-								style={ {
-									width: bounds.width,
-									height: bounds.height,
-								} }
-							/>
-						) }
+						<Grid
+							percentages={ percentages }
+							style={ {
+								width: bounds.width,
+								height: bounds.height,
+							} }
+						/>
 						<Media
 							alt="Dimensions helper"
 							autoPlay={ autoPlay }
@@ -302,10 +306,6 @@ export class FocalPointPicker extends Component {
 					percentages={ percentages }
 					onHorizontalChange={ this.horizontalPositionChanged }
 					onVerticalChange={ this.verticalPositionChanged }
-					isGridEnabled={ isGridEnabled }
-					onToggleGrid={ ( next ) =>
-						this.setState( { isGridEnabled: next } )
-					}
 				/>
 			</BaseControl>
 		);
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
index dfd4afcf8ceaa..62b3635b977d3 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -16,6 +16,7 @@ export const MediaWrapper = styled.div`
 	box-sizing: border-box;
 	height: 200px;
 	padding: 14px;
+	text-align: center;
 	width: 100%;
 `;
 
@@ -23,11 +24,11 @@ export const MediaContainer = styled.div`
 	align-items: center;
 	box-sizing: border-box;
 	cursor: pointer;
-	display: flex;
+	display: inline-flex;
 	height: 100%;
 	justify-content: center;
+	margin: auto;
 	position: relative;
-	width: 100%;
 
 	img,
 	video {
@@ -79,13 +80,22 @@ export const ControlLabel = styled.label`
 
 export const GridView = styled.div`
 	box-sizing: border-box;
+	height: 100%;
+	left: 0;
+	opacity: 0;
 	overflow: hidden;
 	pointer-events: none;
 	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate( -50%, -50% );
+	top: 0;
+	transition: opacity 120ms linear;
+	width: 100%;
 	z-index: 1;
+
+	${( { isActive } ) =>
+		isActive &&
+		`
+		opacity: 1;
+	`}
 `;
 
 export const GridLine = styled.div`
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.js b/packages/components/src/focal-point-picker/styles/focal-point-style.js
index 812b63d8aaba3..017f2538aef97 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-style.js
@@ -14,14 +14,15 @@ import { Path, SVG } from '@wordpress/primitives';
 import { color } from '../../utils/style-mixins';
 
 export const FocalPointWrapper = styled.div`
-	box-sizing: border-box;
 	background-color: transparent;
+	box-sizing: border-box;
 	cursor: grab;
 	height: 30px;
 	opacity: 0.8;
 	position: absolute;
-	will-change: transform;
+	user-select: none;
 	width: 30px;
+	will-change: transform;
 	z-index: 10000;
 
 	&.is-dragging {
diff --git a/packages/components/src/focal-point-picker/utils.js b/packages/components/src/focal-point-picker/utils.js
index 5411f3b2dc76b..0c98da679a1c7 100644
--- a/packages/components/src/focal-point-picker/utils.js
+++ b/packages/components/src/focal-point-picker/utils.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { clamp } from 'lodash';
-
 const VIDEO_EXTENSIONS = [ 'm4v', 'avi', 'mpg', 'mp4', 'webm', 'ogg' ];
 
 export function getExtension( filename = '' ) {
@@ -18,24 +13,3 @@ export function isVideoType( filename = '' ) {
 export function fractionToPercentage( fraction ) {
 	return Math.round( fraction * 100 );
 }
-
-/**
- * Clamps a value based on a min/max range with rounding
- *
- * @param {number} value The value.
- * @param {number} min The minimum range.
- * @param {number} max The maximum range.
- * @param {number} step A multiplier for the value.
- * @return {number} The rounded and clamped value.
- */
-export function roundClamp(
-	value = 0,
-	min = Infinity,
-	max = Infinity,
-	step = 1
-) {
-	const rounded = Math.round( value / step ) * step;
-	const clampedValue = clamp( rounded, min, max );
-
-	return clampedValue;
-}

From c361b71d25de9c1faaa1049f56490ee078f455b1 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 21 May 2020 13:14:25 -0400
Subject: [PATCH 07/27] Apply Cover background position on save.js

---
 packages/block-library/src/cover/save.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index b9f55c755469d..f4669ec352539 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -48,6 +48,8 @@ export default function save( { attributes } ) {
 		? `${ minHeightProp }${ minHeightUnit }`
 		: minHeightProp;
 
+	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+
 	const style =
 		backgroundType === IMAGE_BACKGROUND_TYPE
 			? backgroundImageStyles( url )
@@ -65,6 +67,15 @@ export default function save( { attributes } ) {
 	}
 	style.minHeight = minHeight || undefined;
 
+	let positionValue;
+
+	if ( focalPoint ) {
+		positionValue = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`;
+		if ( isImageBackground ) {
+			style.backgroundPosition = positionValue;
+		}
+	}
+
 	const classes = classnames(
 		dimRatioToClass( dimRatio ),
 		overlayColorClass,
@@ -104,6 +115,7 @@ export default function save( { attributes } ) {
 					loop
 					playsInline
 					src={ url }
+					style={ { objectPosition: positionValue } }
 				/>
 			) }
 			<div className="wp-block-cover__inner-container">

From 21ab186dd7392b6865a57a105d6b6412cb36c203 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 21 May 2020 13:14:46 -0400
Subject: [PATCH 08/27] Refactor FocalPointPicker class component. Adjust
 styles.

---
 .../components/src/focal-point-picker/grid.js |  2 +-
 .../src/focal-point-picker/index.js           | 63 ++++++++++---------
 .../src/focal-point-picker/media.js           |  2 +-
 .../styles/focal-point-picker-style.js        |  9 ++-
 4 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/packages/components/src/focal-point-picker/grid.js b/packages/components/src/focal-point-picker/grid.js
index b88e19f3d8fc2..7439fe316e8c1 100644
--- a/packages/components/src/focal-point-picker/grid.js
+++ b/packages/components/src/focal-point-picker/grid.js
@@ -57,7 +57,7 @@ function useRevealAnimation( value ) {
 
 			timeoutRef.current = setTimeout( () => {
 				setIsActive( false );
-			}, 400 );
+			}, 600 );
 		}
 
 		return () => clearTimer();
diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index 79d1481fff969..2ef2584b8c343 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -26,25 +26,26 @@ import {
 import { roundClamp } from '../number-control/utils';
 
 export class FocalPointPicker extends Component {
-	constructor( props ) {
-		super( props );
-		this.onMouseMove = this.onMouseMove.bind( this );
+	constructor( props, context ) {
+		super( props, context );
+
 		this.state = {
 			isDragging: false,
 			bounds: {},
 			percentages: props.value,
 		};
+
 		this.containerRef = createRef();
 		this.mediaRef = createRef();
-		this.horizontalPositionChanged = this.horizontalPositionChanged.bind(
-			this
-		);
-		this.verticalPositionChanged = this.verticalPositionChanged.bind(
-			this
-		);
-		this.onLoad = this.onLoad.bind( this );
+
 		this.handleOnMouseUp = this.handleOnMouseUp.bind( this );
 		this.handleOnKeyDown = this.handleOnKeyDown.bind( this );
+		this.onLoad = this.onLoad.bind( this );
+		this.onMouseMove = this.onMouseMove.bind( this );
+
+		this.positionChangeFromTextControl = this.positionChangeFromTextControl.bind(
+			this
+		);
 		this.updateBounds = this.updateBounds.bind( this );
 	}
 	componentDidMount() {
@@ -188,12 +189,6 @@ export class FocalPointPicker extends Component {
 
 		this.updateValue( percentages );
 	}
-	horizontalPositionChanged( nextValue ) {
-		this.positionChangeFromTextControl( 'x', nextValue );
-	}
-	verticalPositionChanged( nextValue ) {
-		this.positionChangeFromTextControl( 'y', nextValue );
-	}
 	positionChangeFromTextControl( axis, value ) {
 		const { percentages } = this.state;
 
@@ -222,6 +217,23 @@ export class FocalPointPicker extends Component {
 			top: 0,
 		};
 	}
+	iconCoordinates() {
+		const { value } = this.props;
+		const { bounds } = this.state;
+
+		const pickerDimensions = this.pickerDimensions();
+		const iconCoordinates = {
+			left:
+				value.x * ( pickerDimensions.width - bounds.left * 2 ) +
+				bounds.left,
+			top:
+				value.y * ( pickerDimensions.height - bounds.top * 2 ) +
+				bounds.top,
+		};
+
+		return iconCoordinates;
+	}
+	// Callback method for the withFocusOutside higher-order component
 	handleFocusOutside() {
 		this.setState( {
 			isDragging: false,
@@ -232,21 +244,12 @@ export class FocalPointPicker extends Component {
 			autoPlay,
 			instanceId,
 			url,
-			value,
 			label,
 			help,
 			className,
 		} = this.props;
 		const { bounds, isDragging, percentages } = this.state;
-		const pickerDimensions = this.pickerDimensions();
-		const iconCoordinates = {
-			left:
-				value.x * ( pickerDimensions.width - bounds.left * 2 ) +
-				bounds.left,
-			top:
-				value.y * ( pickerDimensions.height - bounds.top * 2 ) +
-				bounds.top,
-		};
+		const iconCoordinates = this.iconCoordinates();
 
 		const classes = classnames(
 			'components-focal-point-picker-control',
@@ -304,8 +307,12 @@ export class FocalPointPicker extends Component {
 				</MediaWrapper>
 				<Controls
 					percentages={ percentages }
-					onHorizontalChange={ this.horizontalPositionChanged }
-					onVerticalChange={ this.verticalPositionChanged }
+					onHorizontalChange={ ( next ) => {
+						this.positionChangeFromTextControl( 'x', next );
+					} }
+					onVerticalChange={ ( next ) => {
+						this.positionChangeFromTextControl( 'y', next );
+					} }
 				/>
 			</BaseControl>
 		);
diff --git a/packages/components/src/focal-point-picker/media.js b/packages/components/src/focal-point-picker/media.js
index 8e55596f2bf0f..eb2e8226db59c 100644
--- a/packages/components/src/focal-point-picker/media.js
+++ b/packages/components/src/focal-point-picker/media.js
@@ -16,7 +16,7 @@ import { isVideoType } from './utils';
 
 export default function Media( {
 	alt,
-	autoPlay = true,
+	autoPlay,
 	src,
 	onLoad = noop,
 	mediaRef,
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
index 62b3635b977d3..3192726d88f22 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -25,10 +25,10 @@ export const MediaContainer = styled.div`
 	box-sizing: border-box;
 	cursor: pointer;
 	display: inline-flex;
-	height: 100%;
 	justify-content: center;
 	margin: auto;
 	position: relative;
+	height: 100%;
 
 	img,
 	video {
@@ -80,15 +80,14 @@ export const ControlLabel = styled.label`
 
 export const GridView = styled.div`
 	box-sizing: border-box;
-	height: 100%;
-	left: 0;
+	left: 50%;
 	opacity: 0;
 	overflow: hidden;
 	pointer-events: none;
 	position: absolute;
-	top: 0;
+	top: 50%;
+	transform: translate( -50%, -50% );
 	transition: opacity 120ms linear;
-	width: 100%;
 	z-index: 1;
 
 	${( { isActive } ) =>

From da4b99bb436228500bd9c22e9e81b4e69fd53586 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 21 May 2020 13:36:47 -0400
Subject: [PATCH 09/27] Refactor FocalPointPicker Media and add tests

---
 .../src/focal-point-picker/media.js           | 22 +++++--
 .../src/focal-point-picker/test/media.js      | 58 +++++++++++++++++++
 .../src/focal-point-picker/utils.js           | 12 +++-
 3 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/src/focal-point-picker/test/media.js

diff --git a/packages/components/src/focal-point-picker/media.js b/packages/components/src/focal-point-picker/media.js
index eb2e8226db59c..26639cc51c557 100644
--- a/packages/components/src/focal-point-picker/media.js
+++ b/packages/components/src/focal-point-picker/media.js
@@ -20,11 +20,18 @@ export default function Media( {
 	src,
 	onLoad = noop,
 	mediaRef,
+	// Exposing muted prop for test rendering purposes
+	// https://github.com/testing-library/react-testing-library/issues/470
+	muted = true,
 	...props
 } ) {
 	if ( ! src ) {
 		return (
-			<MediaPlaceholderElement onLoad={ onLoad } mediaRef={ mediaRef } />
+			<MediaPlaceholderElement
+				className="components-focal-point-picker__media components-focal-point-picker__media--placeholder"
+				onLoad={ onLoad }
+				mediaRef={ mediaRef }
+			/>
 		);
 	}
 
@@ -34,8 +41,9 @@ export default function Media( {
 		<video
 			{ ...props }
 			autoPlay={ autoPlay }
+			className="components-focal-point-picker__media components-focal-point-picker__media--video"
 			loop
-			muted
+			muted={ muted }
 			onLoadedData={ onLoad }
 			ref={ mediaRef }
 			src={ src }
@@ -44,6 +52,7 @@ export default function Media( {
 		<img
 			{ ...props }
 			alt={ alt }
+			className="components-focal-point-picker__media components-focal-point-picker__media--image"
 			onLoad={ onLoad }
 			ref={ mediaRef }
 			src={ src }
@@ -51,14 +60,19 @@ export default function Media( {
 	);
 }
 
-function MediaPlaceholderElement( { mediaRef, onLoad = noop } ) {
+function MediaPlaceholderElement( { mediaRef, onLoad = noop, ...props } ) {
 	const onLoadRef = useRef( onLoad );
 
+	/**
+	 * This async callback mimics the onLoad (img) / onLoadedData (video) callback
+	 * for media elements. It is used in the main <FocalPointPicker /> component
+	 * to calculate the dimensions + boundaries for positioning.
+	 */
 	useLayoutEffect( () => {
 		window.requestAnimationFrame( () => {
 			onLoadRef.current();
 		} );
 	}, [] );
 
-	return <MediaPlaceholder ref={ mediaRef } />;
+	return <MediaPlaceholder ref={ mediaRef } { ...props } />;
 }
diff --git a/packages/components/src/focal-point-picker/test/media.js b/packages/components/src/focal-point-picker/test/media.js
new file mode 100644
index 0000000000000..f5dccbc2b9bb9
--- /dev/null
+++ b/packages/components/src/focal-point-picker/test/media.js
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import Media from '../Media';
+
+const getMedia = ( container ) =>
+	container.querySelector( '.components-focal-point-picker__media' );
+
+describe( 'FocalPointPicker/Media', () => {
+	describe( 'Basic rendering', () => {
+		it( 'should render', () => {
+			const { container } = render( <Media /> );
+			const el = getMedia( container );
+
+			expect( el ).toBeTruthy();
+		} );
+	} );
+
+	describe( 'Media types', () => {
+		it( 'should render a placeholder by default', () => {
+			const { container } = render( <Media /> );
+			const el = getMedia( container );
+
+			expect( el.outerHTML ).toContain( 'placeholder' );
+		} );
+
+		it( 'should render an video if src is a video file', () => {
+			const { container, rerender } = render(
+				<Media src="file.mp4" muted={ false } />
+			);
+
+			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+
+			rerender( <Media src="file.ogg" muted={ false } /> );
+
+			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+
+			rerender( <Media src="file.webm" muted={ false } /> );
+
+			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+		} );
+
+		it( 'should render an image file, if not video', () => {
+			const { container, rerender } = render( <Media src="file.gif" /> );
+
+			expect( getMedia( container ).tagName ).toBe( 'IMG' );
+
+			rerender( <Media src="file.png" muted={ false } /> );
+
+			expect( getMedia( container ).tagName ).toBe( 'IMG' );
+		} );
+	} );
+} );
diff --git a/packages/components/src/focal-point-picker/utils.js b/packages/components/src/focal-point-picker/utils.js
index 0c98da679a1c7..b0a051cf23e43 100644
--- a/packages/components/src/focal-point-picker/utils.js
+++ b/packages/components/src/focal-point-picker/utils.js
@@ -1,4 +1,14 @@
-const VIDEO_EXTENSIONS = [ 'm4v', 'avi', 'mpg', 'mp4', 'webm', 'ogg' ];
+const VIDEO_EXTENSIONS = [
+	'avi',
+	'mpg',
+	'mpeg',
+	'mov',
+	'mp4',
+	'm4v',
+	'ogg',
+	'webm',
+	'wmv',
+];
 
 export function getExtension( filename = '' ) {
 	const parts = filename.split( '.' );

From 4e32b46a5ae070b7757a6058e5ab15850cb0e8f2 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 21 May 2020 14:33:20 -0400
Subject: [PATCH 10/27] Refactor FocalPointPicker updateValue parsing.

Improve grid CSS rendering.
---
 .../src/focal-point-picker/index.js           | 57 ++++++++++---------
 .../styles/focal-point-picker-style.js        |  3 +-
 .../src/focal-point-picker/utils.js           | 18 ++++++
 3 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index 2ef2584b8c343..09198a78125bf 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -99,11 +99,17 @@ export class FocalPointPicker extends Component {
 		}
 		return bounds;
 	}
-	updateValue( nextValue ) {
+	updateValue( nextValue = {} ) {
 		const { onChange } = this.props;
+		const { x, y } = nextValue;
 
-		this.setState( { percentages: nextValue }, () => {
-			onChange( nextValue );
+		const nextPercentage = {
+			x: parseFloat( x ).toFixed( 2 ),
+			y: parseFloat( y ).toFixed( 2 ),
+		};
+
+		this.setState( { percentages: nextPercentage }, () => {
+			onChange( nextPercentage );
 		} );
 	}
 	updateBounds() {
@@ -146,8 +152,8 @@ export class FocalPointPicker extends Component {
 		}
 
 		// Transforming values back to 0.00 percentage values
-		nextX = ( roundClamp( nextX, 0, 100, step ) / 100 ).toFixed( 2 );
-		nextY = ( roundClamp( nextY, 0, 100, step ) / 100 ).toFixed( 2 );
+		nextX = roundClamp( nextX, 0, 100, step ) / 100;
+		nextY = roundClamp( nextY, 0, 100, step ) / 100;
 
 		const percentages = {
 			x: nextX,
@@ -177,14 +183,12 @@ export class FocalPointPicker extends Component {
 		);
 
 		const percentages = {
-			x: (
+			x:
 				( left - bounds.left ) /
-				( pickerDimensions.width - bounds.left * 2 )
-			).toFixed( 2 ),
-			y: (
+				( pickerDimensions.width - bounds.left * 2 ),
+			y:
 				( top - bounds.top ) /
-				( pickerDimensions.height - bounds.top * 2 )
-			).toFixed( 2 ),
+				( pickerDimensions.height - bounds.top * 2 ),
 		};
 
 		this.updateValue( percentages );
@@ -192,29 +196,30 @@ export class FocalPointPicker extends Component {
 	positionChangeFromTextControl( axis, value ) {
 		const { percentages } = this.state;
 
-		const cleanValue = Math.max( Math.min( parseInt( value ), 100 ), 0 );
-		percentages[ axis ] = ( cleanValue ? cleanValue / 100 : 0 ).toFixed(
-			2
-		);
+		percentages[ axis ] = parseInt( value ) / 100;
 
 		this.updateValue( percentages );
 	}
 	pickerDimensions() {
-		if ( this.containerRef.current ) {
+		const containerNode = this.containerRef.current;
+
+		if ( ! containerNode ) {
 			return {
-				width: this.containerRef.current.clientWidth,
-				height: this.containerRef.current.clientHeight,
-				top:
-					this.containerRef.current.getBoundingClientRect().top +
-					document.body.scrollTop,
-				left: this.containerRef.current.getBoundingClientRect().left,
+				width: 0,
+				height: 0,
+				left: 0,
+				top: 0,
 			};
 		}
+
+		const { clientHeight, clientWidth } = containerNode;
+		const { top, left } = containerNode.getBoundingClientRect();
+
 		return {
-			width: 0,
-			height: 0,
-			left: 0,
-			top: 0,
+			width: clientWidth,
+			height: clientHeight,
+			top: top + document.body.scrollTop,
+			left,
 		};
 	}
 	iconCoordinates() {
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
index 3192726d88f22..424655232c313 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -86,7 +86,7 @@ export const GridView = styled.div`
 	pointer-events: none;
 	position: absolute;
 	top: 50%;
-	transform: translate( -50%, -50% );
+	transform: translate3d( -50%, -50%, 0 );
 	transition: opacity 120ms linear;
 	z-index: 1;
 
@@ -103,6 +103,7 @@ export const GridLine = styled.div`
 	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );
 	position: absolute;
 	opacity: 0.4;
+	transform: translateZ( 0 );
 `;
 
 export const GridLineX = styled( GridLine )`
diff --git a/packages/components/src/focal-point-picker/utils.js b/packages/components/src/focal-point-picker/utils.js
index b0a051cf23e43..deec2bd81df00 100644
--- a/packages/components/src/focal-point-picker/utils.js
+++ b/packages/components/src/focal-point-picker/utils.js
@@ -10,16 +10,34 @@ const VIDEO_EXTENSIONS = [
 	'wmv',
 ];
 
+/**
+ * Gets the extension of a file name.
+ *
+ * @param {string} filename The file name.
+ * @return {string} The extension of the file name.
+ */
 export function getExtension( filename = '' ) {
 	const parts = filename.split( '.' );
 	return parts[ parts.length - 1 ];
 }
 
+/**
+ * Checks if a file is a video.
+ *
+ * @param {string} filename The file name.
+ * @return {boolean} Whether the file is a video.
+ */
 export function isVideoType( filename = '' ) {
 	if ( ! filename ) return false;
 	return VIDEO_EXTENSIONS.includes( getExtension( filename ) );
 }
 
+/**
+ * Transforms a fraction value to a percentage value.
+ *
+ * @param {number} fraction The fraction value.
+ * @return {number} A percentage value.
+ */
 export function fractionToPercentage( fraction ) {
 	return Math.round( fraction * 100 );
 }

From 851db2a8c1f1677f4579b497ea0e7c733f76f04e Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 21 May 2020 14:51:29 -0400
Subject: [PATCH 11/27] Refactor percentage value updates from FocalPointPicker
 and sub components

---
 .../src/focal-point-picker/controls.js        | 14 +++--
 .../src/focal-point-picker/focal-point.js     |  6 +--
 .../components/src/focal-point-picker/grid.js | 12 ++++-
 .../src/focal-point-picker/index.js           | 54 ++++++-------------
 4 files changed, 40 insertions(+), 46 deletions(-)

diff --git a/packages/components/src/focal-point-picker/controls.js b/packages/components/src/focal-point-picker/controls.js
index c8248ec9f33b7..addea54cdc957 100644
--- a/packages/components/src/focal-point-picker/controls.js
+++ b/packages/components/src/focal-point-picker/controls.js
@@ -23,8 +23,7 @@ const TEXTCONTROL_MIN = 0;
 const TEXTCONTROL_MAX = 100;
 
 export default function FocalPointPickerControls( {
-	onHorizontalChange = noop,
-	onVerticalChange = noop,
+	onChange = noop,
 	percentages = {
 		x: 0.5,
 		y: 0.5,
@@ -33,6 +32,13 @@ export default function FocalPointPickerControls( {
 	const valueX = fractionToPercentage( percentages.x );
 	const valueY = fractionToPercentage( percentages.y );
 
+	const handleOnXChange = ( next ) => {
+		onChange( { ...percentages, x: parseInt( next ) / 100 } );
+	};
+	const handleOnYChange = ( next ) => {
+		onChange( { ...percentages, y: parseInt( next ) / 100 } );
+	};
+
 	return (
 		<ControlWrapper className="focal-point-picker__controls">
 			<ControlField
@@ -44,13 +50,13 @@ export default function FocalPointPickerControls( {
 					<UnitControl
 						label={ __( 'Left' ) }
 						value={ valueX }
-						onChange={ onHorizontalChange }
+						onChange={ handleOnXChange }
 						dragDirection="e"
 					/>
 					<UnitControl
 						label={ __( 'Top' ) }
 						value={ valueY }
-						onChange={ onVerticalChange }
+						onChange={ handleOnYChange }
 						dragDirection="s"
 					/>
 				</ControlField>
diff --git a/packages/components/src/focal-point-picker/focal-point.js b/packages/components/src/focal-point-picker/focal-point.js
index 98ed16ebe3151..e28de40a6b3b6 100644
--- a/packages/components/src/focal-point-picker/focal-point.js
+++ b/packages/components/src/focal-point-picker/focal-point.js
@@ -20,12 +20,12 @@ export default function FocalPoint( {
 } ) {
 	const classes = classnames(
 		'components-focal-point-picker__icon_container',
-		isDragging ? 'is-dragging' : null
+		isDragging && 'is-dragging'
 	);
 
 	const style = {
-		left: `${ coordinates.left }px`,
-		top: `${ coordinates.top }px`,
+		left: coordinates.left,
+		top: coordinates.top,
 	};
 
 	return (
diff --git a/packages/components/src/focal-point-picker/grid.js b/packages/components/src/focal-point-picker/grid.js
index 7439fe316e8c1..0ec346cf6dea6 100644
--- a/packages/components/src/focal-point-picker/grid.js
+++ b/packages/components/src/focal-point-picker/grid.js
@@ -13,6 +13,7 @@ import {
 } from './styles/focal-point-picker-style';
 
 export default function FocalPointPickerGrid( {
+	bounds = {},
 	percentages = {
 		x: 0.5,
 		y: 0.5,
@@ -21,9 +22,18 @@ export default function FocalPointPickerGrid( {
 } ) {
 	const percentageValue = percentages.x + percentages.y;
 	const animationProps = useRevealAnimation( percentageValue );
+	const style = {
+		width: bounds.width,
+		height: bounds.height,
+	};
 
 	return (
-		<GridView { ...props } { ...animationProps }>
+		<GridView
+			{ ...props }
+			{ ...animationProps }
+			className="components-focal-point-picker__grid"
+			style={ style }
+		>
 			<GridLineX style={ { top: '33%' } } />
 			<GridLineX style={ { top: '66%' } } />
 			<GridLineY style={ { left: '33%' } } />
diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index 09198a78125bf..bf9a01cc7ed91 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -1,11 +1,13 @@
 /**
  * External dependencies
  */
+import { noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
@@ -40,13 +42,10 @@ export class FocalPointPicker extends Component {
 
 		this.handleOnMouseUp = this.handleOnMouseUp.bind( this );
 		this.handleOnKeyDown = this.handleOnKeyDown.bind( this );
-		this.onLoad = this.onLoad.bind( this );
 		this.onMouseMove = this.onMouseMove.bind( this );
 
-		this.positionChangeFromTextControl = this.positionChangeFromTextControl.bind(
-			this
-		);
 		this.updateBounds = this.updateBounds.bind( this );
+		this.updateValue = this.updateValue.bind( this );
 	}
 	componentDidMount() {
 		document.addEventListener( 'mouseup', this.handleOnMouseUp );
@@ -117,9 +116,6 @@ export class FocalPointPicker extends Component {
 			bounds: this.calculateBounds(),
 		} );
 	}
-	onLoad() {
-		this.updateBounds();
-	}
 	handleOnMouseUp() {
 		this.setState( { isDragging: false } );
 	}
@@ -193,13 +189,6 @@ export class FocalPointPicker extends Component {
 
 		this.updateValue( percentages );
 	}
-	positionChangeFromTextControl( axis, value ) {
-		const { percentages } = this.state;
-
-		percentages[ axis ] = parseInt( value ) / 100;
-
-		this.updateValue( percentages );
-	}
 	pickerDimensions() {
 		const containerNode = this.containerRef.current;
 
@@ -225,8 +214,8 @@ export class FocalPointPicker extends Component {
 	iconCoordinates() {
 		const { value } = this.props;
 		const { bounds } = this.state;
-
 		const pickerDimensions = this.pickerDimensions();
+
 		const iconCoordinates = {
 			left:
 				value.x * ( pickerDimensions.width - bounds.left * 2 ) +
@@ -273,35 +262,29 @@ export class FocalPointPicker extends Component {
 				<MediaWrapper className="components-focal-point-picker-wrapper">
 					<MediaContainer
 						className="components-focal-point-picker"
+						onDragStart={ () =>
+							this.setState( { isDragging: true } )
+						}
+						onDrop={ () => this.setState( { isDragging: false } ) }
+						onKeyDown={ this.handleOnKeyDown }
 						onMouseDown={ ( event ) => {
 							event.persist();
 							this.setState( { isDragging: true }, () => {
 								this.onMouseMove( event );
 							} );
 						} }
-						onDragStart={ () =>
-							this.setState( { isDragging: true } )
-						}
-						onMouseUp={ this.handleOnMouseUp }
-						onDrop={ () => this.setState( { isDragging: false } ) }
 						onMouseMove={ this.onMouseMove }
+						onMouseUp={ this.handleOnMouseUp }
 						ref={ this.containerRef }
 						role="button"
 						tabIndex="-1"
-						onKeyDown={ this.handleOnKeyDown }
 					>
-						<Grid
-							percentages={ percentages }
-							style={ {
-								width: bounds.width,
-								height: bounds.height,
-							} }
-						/>
+						<Grid bounds={ bounds } percentages={ percentages } />
 						<Media
-							alt="Dimensions helper"
+							alt={ __( 'Media preview' ) }
 							autoPlay={ autoPlay }
 							mediaRef={ this.mediaRef }
-							onLoad={ this.onLoad }
+							onLoad={ this.updateBounds }
 							src={ url }
 						/>
 						<FocalPoint
@@ -312,12 +295,7 @@ export class FocalPointPicker extends Component {
 				</MediaWrapper>
 				<Controls
 					percentages={ percentages }
-					onHorizontalChange={ ( next ) => {
-						this.positionChangeFromTextControl( 'x', next );
-					} }
-					onVerticalChange={ ( next ) => {
-						this.positionChangeFromTextControl( 'y', next );
-					} }
+					onChange={ this.updateValue }
 				/>
 			</BaseControl>
 		);
@@ -326,12 +304,12 @@ export class FocalPointPicker extends Component {
 
 FocalPointPicker.defaultProps = {
 	autoPlay: true,
-	url: null,
+	onChange: noop,
 	value: {
 		x: 0.5,
 		y: 0.5,
 	},
-	onChange: () => {},
+	url: null,
 };
 
 export default compose( [ withInstanceId, withFocusOutside ] )(

From 55b554d47e6de1597c3570594f1105205da3a5f2 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 22 May 2020 12:32:18 -0400
Subject: [PATCH 12/27] Add side label alignment for InputControl. Update
 controls in FocalPointPicker

---
 .../src/focal-point-picker/controls.js        | 36 +++++++----------
 .../styles/focal-point-picker-style.js        | 20 +---------
 .../components/src/input-control/index.js     |  5 +++
 .../src/input-control/stories/index.js        |  9 +++++
 .../styles/input-control-styles.js            | 39 ++++++++++++++++---
 5 files changed, 63 insertions(+), 46 deletions(-)

diff --git a/packages/components/src/focal-point-picker/controls.js b/packages/components/src/focal-point-picker/controls.js
index addea54cdc957..1f0b89c40aaf5 100644
--- a/packages/components/src/focal-point-picker/controls.js
+++ b/packages/components/src/focal-point-picker/controls.js
@@ -12,8 +12,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import {
-	ControlLabel,
-	ControlField,
 	UnitControl as BaseUnitControl,
 	ControlWrapper,
 } from './styles/focal-point-picker-style';
@@ -41,26 +39,18 @@ export default function FocalPointPickerControls( {
 
 	return (
 		<ControlWrapper className="focal-point-picker__controls">
-			<ControlField
-				className="focal-point-picker__controls-position"
-				justify="left"
-			>
-				<ControlLabel>{ __( 'Position' ) }</ControlLabel>
-				<ControlField justify="left">
-					<UnitControl
-						label={ __( 'Left' ) }
-						value={ valueX }
-						onChange={ handleOnXChange }
-						dragDirection="e"
-					/>
-					<UnitControl
-						label={ __( 'Top' ) }
-						value={ valueY }
-						onChange={ handleOnYChange }
-						dragDirection="s"
-					/>
-				</ControlField>
-			</ControlField>
+			<UnitControl
+				label={ __( 'Left' ) }
+				value={ valueX }
+				onChange={ handleOnXChange }
+				dragDirection="e"
+			/>
+			<UnitControl
+				label={ __( 'Top' ) }
+				value={ valueY }
+				onChange={ handleOnYChange }
+				dragDirection="s"
+			/>
 		</ControlWrapper>
 	);
 }
@@ -69,7 +59,7 @@ function UnitControl( props ) {
 	return (
 		<BaseUnitControl
 			className="focal-point-picker__controls-position-unit-control"
-			isFloatingLabel
+			labelPosition="side"
 			max={ TEXTCONTROL_MAX }
 			min={ TEXTCONTROL_MIN }
 			unit="%"
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
index 424655232c313..e32f00a1530b1 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -54,30 +54,14 @@ export const MediaPlaceholder = styled.div`
 `;
 
 export const UnitControl = styled( BaseUnitControl )`
-	width: 72px;
+	width: 100px;
 `;
 
-export const ControlWrapper = styled.div`
-	box-sizing: border-box;
+export const ControlWrapper = styled( Flex )`
 	max-width: 320px;
 	padding: 1em 0;
 `;
 
-export const ControlField = styled( Flex )`
-	padding-bottom: 12px;
-
-	&:last-child {
-		padding-bottom: 0;
-	}
-`;
-
-export const ControlLabel = styled.label`
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-	width: 80px;
-`;
-
 export const GridView = styled.div`
 	box-sizing: border-box;
 	left: 50%;
diff --git a/packages/components/src/input-control/index.js b/packages/components/src/input-control/index.js
index e15128c4c99e7..34a1c41042bfd 100644
--- a/packages/components/src/input-control/index.js
+++ b/packages/components/src/input-control/index.js
@@ -37,6 +37,7 @@ export function InputControl(
 		isPressEnterToChange = false,
 		isFloatingLabel = false,
 		label,
+		labelPosition = 'top',
 		onBlur = noop,
 		onChange = noop,
 		onFocus = noop,
@@ -74,8 +75,11 @@ export function InputControl(
 	return (
 		<Root
 			className={ classes }
+			gap={ 3 }
 			isFloatingLabel={ isFloatingLabelSet }
 			isFocused={ isFocused }
+			justify="left"
+			labelPosition={ labelPosition }
 		>
 			<Label
 				className="components-input-control__label"
@@ -92,6 +96,7 @@ export function InputControl(
 				className="components-input-control__container"
 				disabled={ disabled }
 				isFocused={ isFocused }
+				labelPosition={ labelPosition }
 			>
 				<InputField
 					{ ...props }
diff --git a/packages/components/src/input-control/stories/index.js b/packages/components/src/input-control/stories/index.js
index 7a3ebd5f4ab43..26b79132a01d7 100644
--- a/packages/components/src/input-control/stories/index.js
+++ b/packages/components/src/input-control/stories/index.js
@@ -27,6 +27,15 @@ function Example() {
 		isFloatingLabel: boolean( 'isFloatingLabel', false ),
 		isPressEnterToChange: boolean( 'isPressEnterToChange', false ),
 		label: text( 'label', 'Value' ),
+		labelPosition: select(
+			'labelPosition',
+			{
+				top: 'top',
+				side: 'side',
+				bottom: 'bottom',
+			},
+			'top'
+		),
 		placeholder: text( 'placeholder', 'Placeholder' ),
 		size: select(
 			'size',
diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js
index ca7c95ebbdd90..e108e0b244dcd 100644
--- a/packages/components/src/input-control/styles/input-control-styles.js
+++ b/packages/components/src/input-control/styles/input-control-styles.js
@@ -7,6 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
+import Flex from '../../flex';
 import Text from '../../text';
 import { color, rtl, reduceMotion } from '../../utils/style-mixins';
 
@@ -23,16 +24,33 @@ const rootFocusedStyles = ( { isFocused } ) => {
 	return css( { zIndex: 1 } );
 };
 
-export const Root = styled.div`
-	box-sizing: border-box;
+const rootLabelPositionStyles = ( { labelPosition } ) => {
+	switch ( labelPosition ) {
+		case 'top':
+			return css`
+				align-items: flex-start;
+				flex-direction: column;
+			`;
+		case 'bottom':
+			return css`
+				align-items: flex-start;
+				flex-direction: column-reverse;
+			`;
+		default:
+			return '';
+	}
+};
+
+export const Root = styled( Flex )`
 	position: relative;
 	border-radius: 2px;
 
 	${rootFloatLabelStyles};
 	${rootFocusedStyles};
+	${rootLabelPositionStyles};
 `;
 
-const containerDisabledStyle = ( { disabled } ) => {
+const containerDisabledStyles = ( { disabled } ) => {
 	const backgroundColor = disabled
 		? color( 'ui.backgroundDisabled' )
 		: color( 'ui.background' );
@@ -40,14 +58,24 @@ const containerDisabledStyle = ( { disabled } ) => {
 	return css( { backgroundColor } );
 };
 
+const containerWidthStyles = ( { labelPosition } ) => {
+	if ( labelPosition === 'side' ) return '';
+
+	return css`
+		width: 100%;
+	`;
+};
+
 export const Container = styled.div`
 	align-items: center;
 	box-sizing: border-box;
 	border-radius: inherit;
 	display: flex;
+	flex: 1;
 	position: relative;
 
-	${containerDisabledStyle};
+	${containerDisabledStyles};
+	${containerWidthStyles};
 `;
 
 const disabledStyles = ( { disabled } ) => {
@@ -253,7 +281,8 @@ const BaseLabel = styled( Text )`
 		display: block;
 		margin: 0;
 		max-width: 100%;
-		padding: 0;
+		padding-bottom: 0;
+		padding-top: 0;
 		pointer-events: none;
 		top: 50%;
 		transition: transform ${FLOATING_LABEL_TRANSITION_SPEED} linear,

From 9a403e571924283784f881abe5a773110e1b5169 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 22 May 2020 13:24:19 -0400
Subject: [PATCH 13/27] Add shift + drag to jump by 10. Improve stability of
 calculations on load

---
 .../src/focal-point-picker/focal-point.js     |  2 +-
 .../src/focal-point-picker/index.js           | 93 +++++++++++--------
 .../src/focal-point-picker/utils.js           |  9 ++
 3 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/packages/components/src/focal-point-picker/focal-point.js b/packages/components/src/focal-point-picker/focal-point.js
index e28de40a6b3b6..119ca25f61258 100644
--- a/packages/components/src/focal-point-picker/focal-point.js
+++ b/packages/components/src/focal-point-picker/focal-point.js
@@ -14,7 +14,7 @@ import {
 } from './styles/focal-point-style';
 
 export default function FocalPoint( {
-	coordinates = {},
+	coordinates = { left: '50%', top: '50%' },
 	isDragging = false,
 	...props
 } ) {
diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index bf9a01cc7ed91..4642293d3fe01 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -26,6 +26,7 @@ import {
 	MediaContainer,
 } from './styles/focal-point-picker-style';
 import { roundClamp } from '../number-control/utils';
+import { INITIAL_BOUNDS } from './utils';
 
 export class FocalPointPicker extends Component {
 	constructor( props, context ) {
@@ -33,13 +34,14 @@ export class FocalPointPicker extends Component {
 
 		this.state = {
 			isDragging: false,
-			bounds: {},
+			bounds: INITIAL_BOUNDS,
 			percentages: props.value,
 		};
 
 		this.containerRef = createRef();
 		this.mediaRef = createRef();
 
+		this.handleOnClick = this.handleOnClick.bind( this );
 		this.handleOnMouseUp = this.handleOnMouseUp.bind( this );
 		this.handleOnKeyDown = this.handleOnKeyDown.bind( this );
 		this.onMouseMove = this.onMouseMove.bind( this );
@@ -63,14 +65,7 @@ export class FocalPointPicker extends Component {
 		window.removeEventListener( 'resize', this.updateBounds );
 	}
 	calculateBounds() {
-		const bounds = {
-			top: 0,
-			left: 0,
-			bottom: 0,
-			right: 0,
-			width: 0,
-			height: 0,
-		};
+		const bounds = INITIAL_BOUNDS;
 
 		if ( ! this.mediaRef.current ) {
 			return bounds;
@@ -116,6 +111,12 @@ export class FocalPointPicker extends Component {
 			bounds: this.calculateBounds(),
 		} );
 	}
+	handleOnClick( event ) {
+		event.persist();
+		this.setState( { isDragging: true }, () => {
+			this.onMouseMove( event );
+		} );
+	}
 	handleOnMouseUp() {
 		this.setState( { isDragging: false } );
 	}
@@ -128,9 +129,9 @@ export class FocalPointPicker extends Component {
 		event.preventDefault();
 
 		// Normalizing values for incrementing/decrementing based on arrow keys
-		let nextX = parseFloat( x ) * 100;
-		let nextY = parseFloat( y ) * 100;
-		const step = shiftKey ? 10 : 1;
+		let nextX = parseFloat( x );
+		let nextY = parseFloat( y );
+		const step = shiftKey ? 0.1 : 0.01;
 
 		switch ( event.keyCode ) {
 			case UP:
@@ -147,9 +148,8 @@ export class FocalPointPicker extends Component {
 				break;
 		}
 
-		// Transforming values back to 0.00 percentage values
-		nextX = roundClamp( nextX, 0, 100, step ) / 100;
-		nextY = roundClamp( nextY, 0, 100, step ) / 100;
+		nextX = roundClamp( nextX, 0, 1, step );
+		nextY = roundClamp( nextY, 0, 1, step );
 
 		const percentages = {
 			x: nextX,
@@ -163,6 +163,7 @@ export class FocalPointPicker extends Component {
 
 		if ( ! isDragging ) return;
 
+		const { shiftKey } = event;
 		const pickerDimensions = this.pickerDimensions();
 		const cursorPosition = {
 			left: event.pageX - pickerDimensions.left,
@@ -178,16 +179,24 @@ export class FocalPointPicker extends Component {
 			Math.min( cursorPosition.top, bounds.bottom )
 		);
 
-		const percentages = {
-			x:
-				( left - bounds.left ) /
-				( pickerDimensions.width - bounds.left * 2 ),
-			y:
-				( top - bounds.top ) /
-				( pickerDimensions.height - bounds.top * 2 ),
+		let nextX =
+			( left - bounds.left ) /
+			( pickerDimensions.width - bounds.left * 2 );
+		let nextY =
+			( top - bounds.top ) / ( pickerDimensions.height - bounds.top * 2 );
+
+		// Enables holding shift to jump values by 10%
+		const step = shiftKey ? 0.1 : 0.01;
+
+		nextX = roundClamp( nextX, 0, 1, step );
+		nextY = roundClamp( nextY, 0, 1, step );
+
+		const nextPercentage = {
+			x: nextX,
+			y: nextY,
 		};
 
-		this.updateValue( percentages );
+		this.updateValue( nextPercentage );
 	}
 	pickerDimensions() {
 		const containerNode = this.containerRef.current;
@@ -214,8 +223,15 @@ export class FocalPointPicker extends Component {
 	iconCoordinates() {
 		const { value } = this.props;
 		const { bounds } = this.state;
-		const pickerDimensions = this.pickerDimensions();
 
+		if ( bounds.left === undefined || bounds.top === undefined ) {
+			return {
+				left: '50%',
+				top: '50%',
+			};
+		}
+
+		const pickerDimensions = this.pickerDimensions();
 		const iconCoordinates = {
 			left:
 				value.x * ( pickerDimensions.width - bounds.left * 2 ) +
@@ -236,11 +252,13 @@ export class FocalPointPicker extends Component {
 	render() {
 		const {
 			autoPlay,
+			className,
+			help,
 			instanceId,
-			url,
 			label,
-			help,
-			className,
+			onDragStart,
+			onDragEnd,
+			url,
 		} = this.props;
 		const { bounds, isDragging, percentages } = this.state;
 		const iconCoordinates = this.iconCoordinates();
@@ -262,17 +280,16 @@ export class FocalPointPicker extends Component {
 				<MediaWrapper className="components-focal-point-picker-wrapper">
 					<MediaContainer
 						className="components-focal-point-picker"
-						onDragStart={ () =>
-							this.setState( { isDragging: true } )
-						}
-						onDrop={ () => this.setState( { isDragging: false } ) }
-						onKeyDown={ this.handleOnKeyDown }
-						onMouseDown={ ( event ) => {
-							event.persist();
-							this.setState( { isDragging: true }, () => {
-								this.onMouseMove( event );
-							} );
+						onDragStart={ ( event ) => {
+							this.setState( { isDragging: true } );
+							onDragStart( event );
+						} }
+						onDrop={ ( event ) => {
+							this.setState( { isDragging: false } );
+							onDragEnd( event );
 						} }
+						onKeyDown={ this.handleOnKeyDown }
+						onMouseDown={ this.handleOnClick }
 						onMouseMove={ this.onMouseMove }
 						onMouseUp={ this.handleOnMouseUp }
 						ref={ this.containerRef }
@@ -304,6 +321,8 @@ export class FocalPointPicker extends Component {
 
 FocalPointPicker.defaultProps = {
 	autoPlay: true,
+	onDragStart: noop,
+	onDragEnd: noop,
 	onChange: noop,
 	value: {
 		x: 0.5,
diff --git a/packages/components/src/focal-point-picker/utils.js b/packages/components/src/focal-point-picker/utils.js
index deec2bd81df00..5e568529d4cd6 100644
--- a/packages/components/src/focal-point-picker/utils.js
+++ b/packages/components/src/focal-point-picker/utils.js
@@ -1,3 +1,12 @@
+export const INITIAL_BOUNDS = {
+	top: 0,
+	left: 0,
+	bottom: 0,
+	right: 0,
+	width: 0,
+	height: 0,
+};
+
 const VIDEO_EXTENSIONS = [
 	'avi',
 	'mpg',

From 5f1e8d7ae6e8a700350df2dc5407c5f6b2a30c63 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 22 May 2020 13:34:51 -0400
Subject: [PATCH 14/27] Update fixture for Cover

---
 .../e2e-tests/fixtures/blocks/core__cover__deprecated-4.json  | 4 +---
 .../fixtures/blocks/core__cover__deprecated-4.serialized.html | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.json b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.json
index d7a01fae2658f..36870adb4e4f1 100644
--- a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.json
+++ b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.json
@@ -12,9 +12,7 @@
             "focalPoint": {
                 "x": "0.07",
                 "y": "0.07"
-            },
-            "title": "",
-            "contentAlign": "center"
+            }
         },
         "innerBlocks": [
             {
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.serialized.html b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.serialized.html
index 2e4f141dda443..5256b89412ff0 100644
--- a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35,"focalPoint":{"x":"0.07","y":"0.07"}} -->
-<div class="wp-block-cover has-background-dim" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==);background-position:7% 7%"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover has-background-dim" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==);background-position:7.000000000000001% 7.000000000000001%"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->

From 84d98d31422a040376fc1c466f5c8f1a2bc67a79 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Fri, 22 May 2020 14:05:02 -0400
Subject: [PATCH 15/27] Fix file path for media import in test

---
 packages/components/src/focal-point-picker/test/media.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/focal-point-picker/test/media.js b/packages/components/src/focal-point-picker/test/media.js
index f5dccbc2b9bb9..a755396f8bef4 100644
--- a/packages/components/src/focal-point-picker/test/media.js
+++ b/packages/components/src/focal-point-picker/test/media.js
@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import Media from '../Media';
+import Media from '../media';
 
 const getMedia = ( container ) =>
 	container.querySelector( '.components-focal-point-picker__media' );

From 4bec8d79c5b0a181482802341d26f21385641d01 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 3 Jun 2020 13:22:55 -0400
Subject: [PATCH 16/27] Update Flex component from master

---
 packages/components/src/flex/README.md        | 45 +++++++++++++----
 packages/components/src/flex/flex.js          | 48 -------------------
 packages/components/src/flex/index.js         | 45 +++++++++++++++--
 packages/components/src/flex/stories/index.js |  2 +-
 .../components/src/flex/styles/flex-styles.js | 12 ++---
 5 files changed, 85 insertions(+), 67 deletions(-)
 delete mode 100644 packages/components/src/flex/flex.js

diff --git a/packages/components/src/flex/README.md b/packages/components/src/flex/README.md
index 1fcaf566b9a56..8084352d06a88 100644
--- a/packages/components/src/flex/README.md
+++ b/packages/components/src/flex/README.md
@@ -1,36 +1,65 @@
 # Flex
 
-Flex is a layout-based components, which provides a convenient way to align user-interfaces.
+Flex is a layout-based component, which provides a convenient way to align user-interfaces.
 
 ## Usage
 
 ```jsx
-import { __experimentalFlex as Flex } from '@wordpress/components';
+import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 import { Icon, wordpress } from '@wordpress/icons';
 
 const Example = () => {
 	return (
 		<Flex>
-			<Flex.Item>
+			<FlexItem>
 				<Icon icon={ wordpress } />
-			</Flex.Item>
-			<Flex.Block>
+			</FlexItem>
+			<FlexBlock>
 				<h2>WordPress</h2>
-			</Flex.Block>
+			</FlexBlock>
 		</Flex>
 	);
 };
 ```
 
+The most common use-case for `<Flex />` would be to automatically align two (or more) child items of varying sizes. By default, `<Flex />` would vertically center align them, and evenly spread the inner content horizontally, starting at the edges.
+
+Child items can be added directly. However, it is recommended that they are wrapped with `<FlexItem />` (which helps normalize layout styles).
+
+![Flex aligning and distributing 2 items of varying heights](https://make.wordpress.org/design/files/2020/06/flex-2-items.png)
+
+Adding more than 2 child items will spread them across with even gaps in between each item.
+
+![Flex aligning 3 items](https://make.wordpress.org/design/files/2020/06/flex-3-items.png)
+
+### Items and Blocks
+
+`<Flex />` provides 2 sub-components:
+
+-   `<FlexItem />`
+-   `<FlexBlock />`
+
+These components can be used in combination to achieve flexible adaptive layouts.
+
+`<FlexBlock />` components will grow their widths to take up the remaining space within the `<Flex />` wrapper.
+
+![Flex item with block](https://make.wordpress.org/design/files/2020/06/flex-item-block.png)
+
+`<Flex />` automatically provides "gap" spacing in-between all child items. This value can be adjusted using the `gap` component prop.
+
+`<FlexItem />` and `<FlexBlock />` can be used in combination.
+
+![Multiple Flex items with Flex block](https://make.wordpress.org/design/files/2020/06/flex-item-block-item.png)
+
 ## Sub-Components
 
 This component provides a collection of sub-component that can be used to compose various interfaces.
 
-### `Flex.Block`
+### `FlexBlock`
 
 A layout component that expands to fit the remaining space of `Flex`.
 
-### `Flex.Item`
+### `FlexItem`
 
 A layout component to contain items of a fixed width within `Flex`.
 
diff --git a/packages/components/src/flex/flex.js b/packages/components/src/flex/flex.js
deleted file mode 100644
index f07ed15b90cc2..0000000000000
--- a/packages/components/src/flex/flex.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Flex as BaseFlex } from './styles/flex-styles';
-import Block from './block';
-import Item from './item';
-
-function Flex(
-	{
-		align = 'center',
-		className,
-		gap = 2,
-		justify = 'space-between',
-		isReversed = false,
-		...props
-	},
-	ref
-) {
-	const classes = classnames( 'components-flex', className );
-
-	return (
-		<BaseFlex
-			{ ...props }
-			align={ align }
-			className={ classes }
-			ref={ ref }
-			gap={ gap }
-			justify={ justify }
-			isReversed={ isReversed }
-		/>
-	);
-}
-
-const ForwardedComponent = forwardRef( Flex );
-ForwardedComponent.Block = Block;
-ForwardedComponent.Item = Item;
-
-export default ForwardedComponent;
diff --git a/packages/components/src/flex/index.js b/packages/components/src/flex/index.js
index 174da20e5be46..98f188db0254d 100644
--- a/packages/components/src/flex/index.js
+++ b/packages/components/src/flex/index.js
@@ -1,10 +1,47 @@
-export { default as Flex } from './flex';
-export { default as FlexBlock } from './block';
-export { default as FlexItem } from './item';
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import Flex from './flex';
+import { Flex as BaseFlex } from './styles/flex-styles';
+
+export { default as FlexBlock } from './block';
+export { default as FlexItem } from './item';
+
+function FlexComponent(
+	{
+		align = 'center',
+		className,
+		gap = 2,
+		justify = 'space-between',
+		isReversed = false,
+		...props
+	},
+	ref
+) {
+	const classes = classnames( 'components-flex', className );
+
+	return (
+		<BaseFlex
+			{ ...props }
+			align={ align }
+			className={ classes }
+			ref={ ref }
+			gap={ gap }
+			justify={ justify }
+			isReversed={ isReversed }
+		/>
+	);
+}
+
+export const Flex = forwardRef( FlexComponent );
 
 export default Flex;
diff --git a/packages/components/src/flex/stories/index.js b/packages/components/src/flex/stories/index.js
index 1408270a11c85..919eb29fd4267 100644
--- a/packages/components/src/flex/stories/index.js
+++ b/packages/components/src/flex/stories/index.js
@@ -13,7 +13,7 @@ import { arrowLeft } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../../button';
-import Flex from '../flex';
+import Flex from '../index';
 import FlexBlock from '../block';
 import FlexItem from '../item';
 
diff --git a/packages/components/src/flex/styles/flex-styles.js b/packages/components/src/flex/styles/flex-styles.js
index 50bfbfd087b58..fddb2c975edec 100644
--- a/packages/components/src/flex/styles/flex-styles.js
+++ b/packages/components/src/flex/styles/flex-styles.js
@@ -40,10 +40,10 @@ const gapStyle = ( { gap, isReversed } ) => {
 
 	return css`
 		> * {
-			${padding}: ${value}px;
+			${ padding }: ${ value }px;
 
 			&:last-child {
-				${padding}: 0;
+				${ padding }: 0;
 			}
 		}
 	`;
@@ -61,10 +61,10 @@ export const Flex = styled.div`
 	box-sizing: border-box;
 	display: flex;
 
-	${alignStyle};
-	${justifyStyle};
-	${gapStyle};
-	${reversedStyles};
+	${ alignStyle };
+	${ justifyStyle };
+	${ gapStyle };
+	${ reversedStyles };
 `;
 
 export const Item = styled.div`

From 175c01aea4343b739ab8d55790e0ff13dca524ff Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Wed, 3 Jun 2020 13:34:55 -0400
Subject: [PATCH 17/27] Add .ogv for video file

---
 packages/components/src/focal-point-picker/utils.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/focal-point-picker/utils.js b/packages/components/src/focal-point-picker/utils.js
index 5e568529d4cd6..8366f8a7a9ebd 100644
--- a/packages/components/src/focal-point-picker/utils.js
+++ b/packages/components/src/focal-point-picker/utils.js
@@ -15,6 +15,7 @@ const VIDEO_EXTENSIONS = [
 	'mp4',
 	'm4v',
 	'ogg',
+	'ogv',
 	'webm',
 	'wmv',
 ];

From b182844a059b0cac3de44562e2d3191161bf8481 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Thu, 4 Jun 2020 15:34:58 -0400
Subject: [PATCH 18/27] Format style files

---
 .../focal-point-picker/styles/focal-point-picker-style.js | 8 ++++----
 .../src/focal-point-picker/styles/focal-point-style.js    | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
index e32f00a1530b1..52b3fce6b6291 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -12,7 +12,7 @@ import { color } from '../../utils/style-mixins';
 
 export const MediaWrapper = styled.div`
 	background-color: transparent;
-	border: 1px solid ${color( 'lightGray.500' )};
+	border: 1px solid ${ color( 'lightGray.500' ) };
 	box-sizing: border-box;
 	height: 200px;
 	padding: 14px;
@@ -45,7 +45,7 @@ export const MediaContainer = styled.div`
 `;
 
 export const MediaPlaceholder = styled.div`
-	background: ${color( 'lightGray.300' )};
+	background: ${ color( 'lightGray.300' ) };
 	box-sizing: border-box;
 	height: 170px;
 	max-width: 280px;
@@ -74,11 +74,11 @@ export const GridView = styled.div`
 	transition: opacity 120ms linear;
 	z-index: 1;
 
-	${( { isActive } ) =>
+	${ ( { isActive } ) =>
 		isActive &&
 		`
 		opacity: 1;
-	`}
+	` }
 `;
 
 export const GridLine = styled.div`
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.js b/packages/components/src/focal-point-picker/styles/focal-point-style.js
index 017f2538aef97..1fcb8791ba8c6 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-style.js
@@ -44,5 +44,5 @@ export const PointerIconPathOutline = styled( Path )`
 `;
 
 export const PointerIconPathFill = styled( Path )`
-	fill: ${color( 'ui.brand' )};
+	fill: ${ color( 'ui.brand' ) };
 `;

From b21e82c805fb2c74be879599ef4ded7799e8d5f5 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 8 Jun 2020 15:48:22 -0400
Subject: [PATCH 19/27] Fix FocalPointPicker to handle reset value cases (e.g.
 UNDO)

---
 packages/components/src/focal-point-picker/index.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index 4642293d3fe01..f7cd6794557e0 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -59,6 +59,16 @@ export class FocalPointPicker extends Component {
 				isDragging: false,
 			} );
 		}
+		/**
+		 * Handles cases where the incoming value changes.
+		 * An example is the values resetting based on an UNDO action.
+		 */
+		if (
+			this.props.value.x !== this.state.percentages.x ||
+			this.props.value.y !== this.state.percentages.y
+		) {
+			this.setState( { percentages: this.props.value } );
+		}
 	}
 	componentWillUnmount() {
 		document.removeEventListener( 'mouseup', this.handleOnMouseUp );

From fc9b491da63de1038e5383cd2618df7e355ff351 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 8 Jun 2020 15:48:45 -0400
Subject: [PATCH 20/27] Improve rendering styles of FocalPointPicker media and
 picker

---
 .../focal-point-picker/styles/focal-point-picker-style.js    | 4 +---
 .../src/focal-point-picker/styles/focal-point-style.js       | 5 +++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
index 52b3fce6b6291..a672af57f338a 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -12,10 +12,7 @@ import { color } from '../../utils/style-mixins';
 
 export const MediaWrapper = styled.div`
 	background-color: transparent;
-	border: 1px solid ${ color( 'lightGray.500' ) };
 	box-sizing: border-box;
-	height: 200px;
-	padding: 14px;
 	text-align: center;
 	width: 100%;
 `;
@@ -23,6 +20,7 @@ export const MediaWrapper = styled.div`
 export const MediaContainer = styled.div`
 	align-items: center;
 	box-sizing: border-box;
+	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
 	cursor: pointer;
 	display: inline-flex;
 	justify-content: center;
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.js b/packages/components/src/focal-point-picker/styles/focal-point-style.js
index 1fcb8791ba8c6..3ebe8b316e74a 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-style.js
@@ -18,6 +18,7 @@ export const FocalPointWrapper = styled.div`
 	box-sizing: border-box;
 	cursor: grab;
 	height: 30px;
+	margin: -15px 0 0 -15px;
 	opacity: 0.8;
 	position: absolute;
 	user-select: none;
@@ -33,9 +34,9 @@ export const FocalPointWrapper = styled.div`
 export const PointerIconSVG = styled( SVG )`
 	display: block;
 	height: 100%;
-	left: -15px;
+	left: 0;
 	position: absolute;
-	top: -15px;
+	top: 0;
 	width: 100%;
 `;
 

From b9204a32f18eab286fab987831a8f5e6b8037508 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 30 Jun 2020 14:41:38 -0400
Subject: [PATCH 21/27] Fix import path for roundClamp

---
 packages/components/src/focal-point-picker/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index f7cd6794557e0..b5cbcd7dabe92 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -25,7 +25,7 @@ import {
 	MediaWrapper,
 	MediaContainer,
 } from './styles/focal-point-picker-style';
-import { roundClamp } from '../number-control/utils';
+import { roundClamp } from '../utils/math';
 import { INITIAL_BOUNDS } from './utils';
 
 export class FocalPointPicker extends Component {

From 6fd35b35b6c7b89e11e02c6c10172311dff65465 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 14 Jul 2020 11:48:34 -0400
Subject: [PATCH 22/27] Ensure Cover save does not generated empty styles if
 there are no video bg positions

---
 packages/block-library/src/cover/save.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index f4669ec352539..47b22b090e126 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -54,6 +54,8 @@ export default function save( { attributes } ) {
 		backgroundType === IMAGE_BACKGROUND_TYPE
 			? backgroundImageStyles( url )
 			: {};
+	const videoStyle = {};
+
 	if ( ! overlayColorClass ) {
 		style.backgroundColor = customOverlayColor;
 	}
@@ -74,6 +76,7 @@ export default function save( { attributes } ) {
 		if ( isImageBackground ) {
 			style.backgroundPosition = positionValue;
 		}
+		videoStyle.objectPosition = positionValue;
 	}
 
 	const classes = classnames(
@@ -115,7 +118,7 @@ export default function save( { attributes } ) {
 					loop
 					playsInline
 					src={ url }
-					style={ { objectPosition: positionValue } }
+					style={ videoStyle }
 				/>
 			) }
 			<div className="wp-block-cover__inner-container">

From 5b85ab6795bf25d7396cdd50375697c3d820a980 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 14 Jul 2020 11:50:14 -0400
Subject: [PATCH 23/27] Remove unused focal-point-picker style

---
 .../src/focal-point-picker/style.scss         | 75 -------------------
 1 file changed, 75 deletions(-)
 delete mode 100644 packages/components/src/focal-point-picker/style.scss

diff --git a/packages/components/src/focal-point-picker/style.scss b/packages/components/src/focal-point-picker/style.scss
deleted file mode 100644
index e0693185040f9..0000000000000
--- a/packages/components/src/focal-point-picker/style.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-.components-focal-point-picker-wrapper {
-	background-color: transparent;
-	border: 1px solid $gray-200;
-	height: 200px;
-	width: 100%;
-	padding: 14px;
-}
-
-.components-focal-point-picker {
-	align-items: center;
-	cursor: pointer;
-	display: flex;
-	height: 100%;
-	justify-content: center;
-	position: relative;
-	width: 100%;
-
-	img {
-		height: auto;
-		max-height: 100%;
-		max-width: 100%;
-		width: auto;
-		user-select: none;
-	}
-}
-
-.components-focal-point-picker__icon_container {
-	background-color: transparent;
-	cursor: grab;
-	height: 30px;
-	opacity: 0.8;
-	position: absolute;
-	will-change: transform;
-	width: 30px;
-	z-index: 10000;
-
-	&.is-dragging {
-		cursor: grabbing;
-	}
-}
-
-.components-focal-point-picker__icon {
-	display: block;
-	height: 100%;
-	left: -15px;
-	position: absolute;
-	top: -15px;
-	width: 100%;
-
-	.components-focal-point-picker__icon-outline {
-		fill: $white;
-	}
-
-	.components-focal-point-picker__icon-fill {
-		fill: var(--wp-admin-theme-color);
-	}
-}
-
-.components-focal-point-picker_position-display-container {
-	margin: 1em 0;
-	display: flex;
-
-	.components-base-control__field {
-		margin: 0 1em 0 0;
-	}
-
-	input[type="number"].components-text-control__input { // Needs specificity to override padding.
-		max-width: 4em;
-		padding: 6px 4px;
-	}
-
-	span {
-		margin: 0 0 0 0.2em;
-	}
-}

From 56e886ffd018072d26e2c41778230c6125816097 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 14 Jul 2020 12:00:27 -0400
Subject: [PATCH 24/27] Adjusted super call in FocalPointPicker constructor

---
 packages/components/src/focal-point-picker/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index b5cbcd7dabe92..b5ad3d3a4d626 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -29,8 +29,8 @@ import { roundClamp } from '../utils/math';
 import { INITIAL_BOUNDS } from './utils';
 
 export class FocalPointPicker extends Component {
-	constructor( props, context ) {
-		super( props, context );
+	constructor( props ) {
+		super( ...arguments );
 
 		this.state = {
 			isDragging: false,

From d1766674f36b407e16f0699b2858cca9b86fbb05 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 14 Jul 2020 12:38:47 -0400
Subject: [PATCH 25/27] Adjust useRevealAnimation hook with useUpdateEffect for
 debouncing

---
 .../components/src/focal-point-picker/grid.js | 39 ++++++-------------
 .../src/focal-point-picker/index.js           |  5 ++-
 packages/components/src/utils/hooks/index.js  |  1 +
 .../src/utils/hooks/use-update-effect.js      | 23 +++++++++++
 4 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 packages/components/src/utils/hooks/use-update-effect.js

diff --git a/packages/components/src/focal-point-picker/grid.js b/packages/components/src/focal-point-picker/grid.js
index 0ec346cf6dea6..52fbdc3f3bff3 100644
--- a/packages/components/src/focal-point-picker/grid.js
+++ b/packages/components/src/focal-point-picker/grid.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,17 +11,16 @@ import {
 	GridLineX,
 	GridLineY,
 } from './styles/focal-point-picker-style';
+import { useUpdateEffect } from '../utils/hooks';
+
+const { clearTimeout, setTimeout } = window;
 
 export default function FocalPointPickerGrid( {
 	bounds = {},
-	percentages = {
-		x: 0.5,
-		y: 0.5,
-	},
+	value,
 	...props
 } ) {
-	const percentageValue = percentages.x + percentages.y;
-	const animationProps = useRevealAnimation( percentageValue );
+	const animationProps = useRevealAnimation( value );
 	const style = {
 		width: bounds.width,
 		height: bounds.height,
@@ -49,28 +48,14 @@ export default function FocalPointPickerGrid( {
  */
 function useRevealAnimation( value ) {
 	const [ isActive, setIsActive ] = useState( false );
-	const valueRef = useRef( value );
-	const timeoutRef = useRef();
-
-	const clearTimer = () => {
-		if ( timeoutRef.current ) {
-			window.clearTimeout( timeoutRef.current );
-		}
-	};
-
-	useEffect( () => {
-		if ( value !== valueRef.current ) {
-			setIsActive( true );
-			valueRef.current = value;
-
-			clearTimer();
 
-			timeoutRef.current = setTimeout( () => {
-				setIsActive( false );
-			}, 600 );
-		}
+	useUpdateEffect( () => {
+		setIsActive( true );
+		const timeout = setTimeout( () => {
+			setIsActive( false );
+		}, 600 );
 
-		return () => clearTimer();
+		return () => clearTimeout( timeout );
 	}, [ value ] );
 
 	return {
diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index b5ad3d3a4d626..0452d43451d1e 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -306,7 +306,10 @@ export class FocalPointPicker extends Component {
 						role="button"
 						tabIndex="-1"
 					>
-						<Grid bounds={ bounds } percentages={ percentages } />
+						<Grid
+							bounds={ bounds }
+							value={ percentages.x + percentages.y }
+						/>
 						<Media
 							alt={ __( 'Media preview' ) }
 							autoPlay={ autoPlay }
diff --git a/packages/components/src/utils/hooks/index.js b/packages/components/src/utils/hooks/index.js
index 7b4ff6167cc66..3eeca7881e256 100644
--- a/packages/components/src/utils/hooks/index.js
+++ b/packages/components/src/utils/hooks/index.js
@@ -1,2 +1,3 @@
 export { default as useControlledState } from './use-controlled-state';
 export { default as useJumpStep } from './use-jump-step';
+export { default as useUpdateEffect } from './use-update-effect';
diff --git a/packages/components/src/utils/hooks/use-update-effect.js b/packages/components/src/utils/hooks/use-update-effect.js
new file mode 100644
index 0000000000000..fa13e4f9d0d65
--- /dev/null
+++ b/packages/components/src/utils/hooks/use-update-effect.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+
+/*
+ * A `React.useEffect` that will not run on the first render.
+ * Source:
+ * https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/useUpdateEffect.ts
+ */
+function useUpdateEffect( effect, deps ) {
+	const mounted = useRef( false );
+
+	useEffect( () => {
+		if ( mounted.current ) {
+			return effect();
+		}
+		mounted.current = true;
+		return undefined;
+	}, deps );
+}
+
+export default useUpdateEffect;

From d0ac9b3331d388a740576cdfff3a9bade678690c Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 14 Jul 2020 12:48:32 -0400
Subject: [PATCH 26/27] Simplifiy showFocalPointPicker logic in cover/edit

---
 packages/block-library/src/cover/edit.js | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 4fe28c4e67338..6c905c7828d55 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -302,6 +302,8 @@ function CoverEdit( {
 	}
 
 	const hasBackground = !! ( url || overlayColor.color || gradientValue );
+	const showFocalPointPicker =
+		isVideoBackground || ( isImageBackground && ! hasParallax );
 
 	const controls = (
 		<>
@@ -338,19 +340,7 @@ function CoverEdit( {
 								onChange={ toggleParallax }
 							/>
 						) }
-						{ isImageBackground && ! hasParallax && (
-							<FocalPointPicker
-								label={ __( 'Focal point picker' ) }
-								url={ url }
-								value={ focalPoint }
-								onChange={ ( newFocalPoint ) =>
-									setAttributes( {
-										focalPoint: newFocalPoint,
-									} )
-								}
-							/>
-						) }
-						{ isVideoBackground && (
+						{ showFocalPointPicker && (
 							<FocalPointPicker
 								label={ __( 'Focal point picker' ) }
 								url={ url }

From ff2de38850741e805837cb8ca4329131ab9a1251 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Tue, 14 Jul 2020 13:20:01 -0400
Subject: [PATCH 27/27] Fix position rounding for cover/save.js

---
 packages/block-library/src/cover/save.js      | 26 +++++++++----------
 .../blocks/core__cover__deprecated-4.json     |  4 ++-
 .../core__cover__deprecated-4.serialized.html |  2 +-
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index 47b22b090e126..58374ce5ed887 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -49,21 +49,15 @@ export default function save( { attributes } ) {
 		: minHeightProp;
 
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
-	const style =
-		backgroundType === IMAGE_BACKGROUND_TYPE
-			? backgroundImageStyles( url )
-			: {};
+	const style = isImageBackground ? backgroundImageStyles( url ) : {};
 	const videoStyle = {};
 
 	if ( ! overlayColorClass ) {
 		style.backgroundColor = customOverlayColor;
 	}
-	if ( focalPoint && ! hasParallax ) {
-		style.backgroundPosition = `${ Math.round(
-			focalPoint.x * 100
-		) }% ${ Math.round( focalPoint.y * 100 ) }%`;
-	}
+
 	if ( customGradient && ! url ) {
 		style.background = customGradient;
 	}
@@ -72,11 +66,17 @@ export default function save( { attributes } ) {
 	let positionValue;
 
 	if ( focalPoint ) {
-		positionValue = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`;
-		if ( isImageBackground ) {
+		positionValue = `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
+			focalPoint.y * 100
+		) }%`;
+
+		if ( isImageBackground && ! hasParallax ) {
 			style.backgroundPosition = positionValue;
 		}
-		videoStyle.objectPosition = positionValue;
+
+		if ( isVideoBackground ) {
+			videoStyle.objectPosition = positionValue;
+		}
 	}
 
 	const classes = classnames(
@@ -110,7 +110,7 @@ export default function save( { attributes } ) {
 					}
 				/>
 			) }
-			{ VIDEO_BACKGROUND_TYPE === backgroundType && url && (
+			{ isVideoBackground && url && (
 				<video
 					className="wp-block-cover__video-background"
 					autoPlay
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.json b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.json
index 36870adb4e4f1..d7a01fae2658f 100644
--- a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.json
+++ b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.json
@@ -12,7 +12,9 @@
             "focalPoint": {
                 "x": "0.07",
                 "y": "0.07"
-            }
+            },
+            "title": "",
+            "contentAlign": "center"
         },
         "innerBlocks": [
             {
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.serialized.html b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.serialized.html
index 5256b89412ff0..2e4f141dda443 100644
--- a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-4.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35,"focalPoint":{"x":"0.07","y":"0.07"}} -->
-<div class="wp-block-cover has-background-dim" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==);background-position:7.000000000000001% 7.000000000000001%"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover has-background-dim" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==);background-position:7% 7%"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->