From 1406577dd82f09b967b0d47c2d0542e7a9ad2572 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 24 Jul 2019 08:21:26 -0300
Subject: [PATCH 01/27] block-expand-toolbar: initial implementation

---
 .../components/block-expand-toolbar/index.js  | 78 +++++++++++++++++++
 .../block-expand-toolbar/style.scss           |  6 ++
 .../test/__snapshots__/index.js.snap          | 16 ++++
 .../block-expand-toolbar/test/index.js        | 44 +++++++++++
 4 files changed, 144 insertions(+)
 create mode 100644 packages/block-editor/src/components/block-expand-toolbar/index.js
 create mode 100644 packages/block-editor/src/components/block-expand-toolbar/style.scss
 create mode 100644 packages/block-editor/src/components/block-expand-toolbar/test/__snapshots__/index.js.snap
 create mode 100644 packages/block-editor/src/components/block-expand-toolbar/test/index.js

diff --git a/packages/block-editor/src/components/block-expand-toolbar/index.js b/packages/block-editor/src/components/block-expand-toolbar/index.js
new file mode 100644
index 0000000000000..14025cf75ef59
--- /dev/null
+++ b/packages/block-editor/src/components/block-expand-toolbar/index.js
@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Toolbar } from '@wordpress/components';
+import { withViewportMatch } from '@wordpress/viewport';
+import { withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { withBlockEditContext } from '../block-edit/context';
+
+/**
+ * Expand controls array.
+ *
+ * @type {{screen: {icon: string, title: string}}}
+ */
+const BLOCK_EXPAND_CONTROLS = {
+	screen: {
+		icon: 'align-wide',
+		title: __( 'Expand to viewport' ),
+	},
+};
+
+/**
+ * Default controls.
+ * It's possible to define which controls
+ * will be shown in the Toolbar.
+ */
+const DEFAULT_CONTROLS = [ 'screen' ];
+
+export function BlockExpandToolbar( { isCollapsed, value, onChange, controls = DEFAULT_CONTROLS } ) {
+	function applyOrUnset( expand ) {
+		return () => onChange( value === expand ? undefined : expand );
+	}
+
+	const activeAlignment = BLOCK_EXPAND_CONTROLS[ value ];
+
+	return (
+		<Toolbar
+			isCollapsed={ isCollapsed }
+			icon={ activeAlignment ? activeAlignment.icon : BLOCK_EXPAND_CONTROLS.screen.icon }
+			label={ __( 'Change expansibility' ) }
+			className="block-editor-block-expand-toolbar"
+			controls={
+				controls.map( ( control ) => {
+					return {
+						...BLOCK_EXPAND_CONTROLS[ control ],
+						isActive: value === control,
+						onClick: applyOrUnset( control ),
+					};
+				} )
+			}
+		/>
+	);
+}
+
+export default compose(
+	withBlockEditContext( ( { clientId } ) => {
+		return {
+			clientId,
+		};
+	} ),
+	withViewportMatch( { isLargeViewport: 'medium' } ),
+	withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => {
+		const { getBlockRootClientId, getSettings } = select( 'core/block-editor' );
+		const settings = getSettings();
+
+		return {
+			isCollapsed: isCollapsed || ! isLargeViewport || (
+				! settings.hasFixedToolbar &&
+				getBlockRootClientId( clientId )
+			),
+		};
+	} ),
+)( BlockExpandToolbar );
diff --git a/packages/block-editor/src/components/block-expand-toolbar/style.scss b/packages/block-editor/src/components/block-expand-toolbar/style.scss
new file mode 100644
index 0000000000000..d8dfe8036b8b5
--- /dev/null
+++ b/packages/block-editor/src/components/block-expand-toolbar/style.scss
@@ -0,0 +1,6 @@
+.block-editor-block-expand-toolbar {
+	//display: none;
+	.components-icon-button .dashicon.dashicons-align-wide {
+		transform: rotate(90deg);
+	}
+}
diff --git a/packages/block-editor/src/components/block-expand-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-expand-toolbar/test/__snapshots__/index.js.snap
new file mode 100644
index 0000000000000..1c4135245cfe7
--- /dev/null
+++ b/packages/block-editor/src/components/block-expand-toolbar/test/__snapshots__/index.js.snap
@@ -0,0 +1,16 @@
+exports[`BlockExpandControl should match snapshot 1`] = `
+<Toolbar
+  controls={
+    Array [
+      Object {
+        "icon": "align-wide",
+        "isActive": true,
+        "onClick": [Function],
+        "title": "Expand to viewport",
+      },
+    ]
+  }
+  icon="align-wide"
+  label="Change expansibility"
+/>
+`;
diff --git a/packages/block-editor/src/components/block-expand-toolbar/test/index.js b/packages/block-editor/src/components/block-expand-toolbar/test/index.js
new file mode 100644
index 0000000000000..c7a208006849e
--- /dev/null
+++ b/packages/block-editor/src/components/block-expand-toolbar/test/index.js
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { BlockAlignmentToolbar } from '../';
+
+describe( 'BlockAlignmentToolbar', () => {
+	const alignment = 'left';
+	const onChange = jest.fn();
+
+	const wrapper = shallow( <BlockAlignmentToolbar value={ alignment } onChange={ onChange } /> );
+
+	const controls = wrapper.props().controls;
+
+	afterEach( () => {
+		onChange.mockClear();
+	} );
+
+	test( 'should match snapshot', () => {
+		expect( wrapper ).toMatchSnapshot();
+	} );
+
+	test( 'should call onChange with undefined, when the control is already active', () => {
+		const activeControl = controls.find( ( { icon } ) => icon === `align-${ alignment }` );
+		activeControl.onClick();
+
+		expect( activeControl.isActive ).toBe( true );
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		expect( onChange ).toHaveBeenCalledWith( undefined );
+	} );
+
+	test( 'should call onChange with alignment value when the control is inactive', () => {
+		const inactiveCenterControl = controls.find( ( { icon } ) => icon === 'align-center' );
+		inactiveCenterControl.onClick();
+
+		expect( inactiveCenterControl.isActive ).toBe( false );
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		expect( onChange ).toHaveBeenCalledWith( 'center' );
+	} );
+} );

From 4b70ba22a4b1067a4412589fe3eaa1b678154e1f Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 24 Jul 2019 09:09:39 -0300
Subject: [PATCH 02/27] core/image: add expand toolbar to editor

---
 packages/block-library/src/image/edit.js     | 13 +++++++++++++
 packages/block-library/src/image/editor.scss | 20 ++++++++++++++++++++
 packages/block-library/src/image/index.js    | 13 +++++++++++--
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 1d2b86feefa71..7fa5bee677cbc 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -48,6 +48,7 @@ import {
 import { withSelect, withDispatch } from '@wordpress/data';
 import {
 	BlockAlignmentToolbar,
+	BlockExpandToolbar,
 	BlockControls,
 	BlockIcon,
 	InspectorControls,
@@ -284,6 +285,7 @@ export class ImageEdit extends Component {
 		this.onUploadError = this.onUploadError.bind( this );
 		this.onImageError = this.onImageError.bind( this );
 		this.getLinkDestinations = this.getLinkDestinations.bind( this );
+		this.updateExpansion = this.updateExpansion.bind( this );
 
 		this.state = {
 			captionFocused: false,
@@ -494,6 +496,10 @@ export class ImageEdit extends Component {
 		this.props.setAttributes( { ...extraUpdatedAttributes, align: nextAlign } );
 	}
 
+	updateExpansion( nextExpand ) {
+		this.props.setAttributes( { expand: nextExpand } );
+	}
+
 	updateImage( sizeSlug ) {
 		const { image } = this.props;
 
@@ -593,6 +599,7 @@ export class ImageEdit extends Component {
 			height,
 			linkTarget,
 			sizeSlug,
+			expand,
 		} = attributes;
 
 		const isExternal = isExternalImage( id, url );
@@ -603,6 +610,12 @@ export class ImageEdit extends Component {
 					value={ align }
 					onChange={ this.updateAlignment }
 				/>
+
+				<BlockExpandToolbar
+					value={ expand }
+					onChange={ this.updateExpansion }
+				/>
+
 				{ url && (
 					<>
 						<Toolbar>
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 86090e85eccbe..efc94cad2343b 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -113,6 +113,26 @@
 	}
 }
 
+// Joint behavior between align and expand.
+[data-type="core/image"][data-expand="screen"] {
+	&:not([data-align="wide"]):not([data-align="full"]) {
+		figure {
+			img {
+				height: 100vh;
+				width: auto;
+			}
+		}
+	}
+
+	&[data-align="wide"],
+	&[data-align="full"] {
+		figure {
+			height: 100vh;
+			overflow: hidden;
+		}
+	}
+}
+
 // This is similar to above but for resized unfloated images only, where the markup is different.
 [data-type="core/image"] .block-editor-block-list__block-edit figure.is-resized {
 	margin: 0;
diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
index 210450c67b6d2..ad83407af62a4 100644
--- a/packages/block-library/src/image/index.js
+++ b/packages/block-library/src/image/index.js
@@ -31,10 +31,19 @@ export const settings = {
 	],
 	transforms,
 	getEditWrapperProps( attributes ) {
-		const { align, width } = attributes;
+		const { align, width, expand } = attributes;
+		const editProps = {};
+
 		if ( 'left' === align || 'center' === align || 'right' === align || 'wide' === align || 'full' === align ) {
-			return { 'data-align': align, 'data-resized': !! width };
+			editProps[ 'data-align' ] = align;
+			editProps[ 'data-resized' ] = !! width;
+		}
+
+		if ( 'screen' === expand ) {
+			editProps[ 'data-expand' ] = expand;
 		}
+
+		return editProps;
 	},
 	edit,
 	save,

From 41fe26e15ef3c2e925a9a477430e1ef9a4cbf6d6 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 24 Jul 2019 09:16:44 -0300
Subject: [PATCH 03/27] core/image: define `expand` attr

---
 packages/block-library/src/image/block.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 68d2559ae4f48..6dfd1e6304119 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -5,6 +5,9 @@
 		"align": {
 			"type": "string"
 		},
+        "expand": {
+			"type": "string"
+        },
 		"url": {
 			"type": "string",
 			"source": "attribute",

From 2c8245aef9446a3cfa737605acb4bd383cf907af Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 24 Jul 2019 09:22:19 -0300
Subject: [PATCH 04/27] core/image: transform `expand` attribute

---
 packages/block-library/src/image/transforms.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/image/transforms.js b/packages/block-library/src/image/transforms.js
index 2af42cc2244e9..d072b1775190c 100644
--- a/packages/block-library/src/image/transforms.js
+++ b/packages/block-library/src/image/transforms.js
@@ -45,7 +45,7 @@ function getFirstAnchorAttributeFormHTML( html, attributeName ) {
 const imageSchema = {
 	img: {
 		attributes: [ 'src', 'alt' ],
-		classes: [ 'alignleft', 'aligncenter', 'alignright', 'alignnone', /^wp-image-\d+$/ ],
+		classes: [ 'alignleft', 'aligncenter', 'alignright', 'alignnone', /^wp-image-\d+$/, 'expandscreen' ],
 	},
 };
 
@@ -72,11 +72,13 @@ const transforms = {
 			isMatch: ( node ) => node.nodeName === 'FIGURE' && !! node.querySelector( 'img' ),
 			schema,
 			transform: ( node ) => {
-				// Search both figure and image classes. Alignment could be
+				// Search both figure and image classes. Alignment and Expansion could be
 				// set on either. ID is set on the image.
 				const className = node.className + ' ' + node.querySelector( 'img' ).className;
 				const alignMatches = /(?:^|\s)align(left|center|right)(?:$|\s)/.exec( className );
 				const align = alignMatches ? alignMatches[ 1 ] : undefined;
+				const expandMatches = /(?:^|\s)expand(screen)(?:$|\s)/.exec( className );
+				const expand = expandMatches ? expandMatches[ 1 ] : undefined;
 				const idMatches = /(?:^|\s)wp-image-(\d+)(?:$|\s)/.exec( className );
 				const id = idMatches ? Number( idMatches[ 1 ] ) : undefined;
 				const anchorElement = node.querySelector( 'a' );
@@ -84,7 +86,11 @@ const transforms = {
 				const href = anchorElement && anchorElement.href ? anchorElement.href : undefined;
 				const rel = anchorElement && anchorElement.rel ? anchorElement.rel : undefined;
 				const linkClass = anchorElement && anchorElement.className ? anchorElement.className : undefined;
-				const attributes = getBlockAttributes( 'core/image', node.outerHTML, { align, id, linkDestination, href, rel, linkClass } );
+				const attributes = getBlockAttributes(
+					'core/image',
+					node.outerHTML, {
+						align, id, linkDestination, href, rel, linkClass, expand,
+					} );
 				return createBlock( 'core/image', attributes );
 			},
 		},
@@ -153,6 +159,12 @@ const transforms = {
 						return align.replace( 'align', '' );
 					},
 				},
+				expand: {
+					type: 'string',
+					shortcode: ( { named: { expand = '' } } ) => {
+						return expand.replace( 'expand', '' );
+					},
+				},
 			},
 		},
 	],

From 7dd7a002f062f49c1a848e7c44ad786fd1b8c761 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 24 Jul 2019 09:24:05 -0300
Subject: [PATCH 05/27] core/image: propagate expand css class in save

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

diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
index 01aff39769152..2ce63c0245d5c 100644
--- a/packages/block-library/src/image/save.js
+++ b/packages/block-library/src/image/save.js
@@ -22,12 +22,14 @@ export default function save( { attributes } ) {
 		id,
 		linkTarget,
 		sizeSlug,
+		expand,
 	} = attributes;
 
 	const classes = classnames( {
 		[ `align${ align }` ]: align,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'is-resized': width || height,
+		[ `expand${ expand }` ]: expand ? expand : false,
 	} );
 
 	const image = (

From 91ef0d470023dcabb701f31d4cb144d3dc46e7a4 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 24 Jul 2019 10:55:56 -0300
Subject: [PATCH 06/27] block-editor: include block-expand-toolbar

---
 packages/block-editor/README.md               | 4 ++++
 packages/block-editor/src/components/index.js | 1 +
 packages/block-editor/src/style.scss          | 1 +
 3 files changed, 6 insertions(+)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 798ae994fb27b..b5b0c5377ebd1 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -98,6 +98,10 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+<a name="BlockExpandToolbar" href="#BlockExpandToolbar">#</a> **BlockExpandToolbar**
+
+Undocumented declaration.
+
 <a name="BlockFormatControls" href="#BlockFormatControls">#</a> **BlockFormatControls**
 
 Undocumented declaration.
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index e2c4a764f4635..262250aee8a97 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -7,6 +7,7 @@ export * from './font-sizes';
 export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as Autocomplete } from './autocomplete';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
+export { default as BlockExpandToolbar } from './block-expand-toolbar';
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 644083ea80a81..e8e4d6273eda4 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -5,6 +5,7 @@
 @import "./components/block-list-appender/style.scss";
 @import "./components/block-card/style.scss";
 @import "./components/block-compare/style.scss";
+@import "./components/block-expand-toolbar/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
 @import "./components/block-preview/style.scss";

From fb5446f445d56ea317a4f34464f25534b45bbd1f Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 24 Jul 2019 10:58:58 -0300
Subject: [PATCH 07/27] core/image: set `expand` styles in the frontend

---
 packages/block-library/src/image/style.scss | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index c91fb215676fb..20270e918105c 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -58,6 +58,22 @@
 		margin-left: auto;
 		margin-right: auto;
 	}
+
+	&.expandscreen:not(.alignfull):not(.alignwide) img,
+	.expandscreen:not(.alignfull):not(.alignwide) img {
+		height: 100vh;
+		min-height: 100vh;
+	}
+}
+
+// doing selector stronger to set `max-width`.
+.entry .entry-content .wp-block-image {
+	&.alignfull.expandscreen,
+	&.alignwide.expandscreen {
+		height: 100vh;
+		overflow: hidden;
+		max-width: 100vw;
+	}
 }
 
 // Variations

From 0831a011083bf424a192a8f2ab1bbeae6a592eba Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 24 Jul 2019 12:11:37 -0300
Subject: [PATCH 08/27] core/cover: implement expand toolbar

---
 packages/block-library/src/cover/editor.scss | 4 ++++
 packages/block-library/src/cover/index.js    | 5 +++++
 packages/block-library/src/cover/style.scss  | 4 ++++
 3 files changed, 13 insertions(+)

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index c7644f2c3a44c..9e021e9c5a3d3 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -51,6 +51,10 @@
 		max-width: $content-width / 2;
 		width: 100%;
 	}
+
+	[data-expand="screen"] & {
+		height: 100vh;
+	}
 }
 
 .block-library-cover__reset-button {
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
index 2a0727283dceb..be36542a0a065 100644
--- a/packages/block-library/src/cover/index.js
+++ b/packages/block-library/src/cover/index.js
@@ -24,6 +24,11 @@ export const settings = {
 	supports: {
 		align: true,
 	},
+	getEditWrapperProps( attributes ) {
+		if ( 'screen' === attributes.expand ) {
+			return { 'data-expand': attributes.expand };
+		}
+	},
 	transforms,
 	save,
 	edit,
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index c6f358d577c1f..6cb62f11e8dd2 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -34,6 +34,10 @@
 		}
 	}
 
+	&.expandscreen {
+		height: 100vh;
+	}
+
 	h2,
 	.wp-block-cover-image-text,
 	.wp-block-cover-text {

From e1829e7bb281034e7512fbbe53061756464ca87b Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Wed, 24 Jul 2019 12:14:00 -0300
Subject: [PATCH 09/27] core/image: reset expand in resizing

---
 packages/block-library/src/image/edit.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 7fa5bee677cbc..90a547d9cbe85 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -906,12 +906,15 @@ export class ImageEdit extends Component {
 											bottom: true,
 											left: showLeftHandle,
 										} }
+
 										onResizeStart={ onResizeStart }
+
 										onResizeStop={ ( event, direction, elt, delta ) => {
 											onResizeStop();
 											setAttributes( {
 												width: parseInt( currentWidth + delta.width, 10 ),
 												height: parseInt( currentHeight + delta.height, 10 ),
+												expand: false,
 											} );
 										} }
 									>

From efd81584f1a58780be56affd331239b203a48e47 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 26 Jul 2019 15:19:28 -0300
Subject: [PATCH 10/27] core/editor: refact using img wrapper

---
 packages/block-library/src/image/edit.js     | 19 ++++----
 packages/block-library/src/image/editor.scss | 48 ++++++++++++++------
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 90a547d9cbe85..a6818e897934b 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -497,7 +497,7 @@ export class ImageEdit extends Component {
 	}
 
 	updateExpansion( nextExpand ) {
-		this.props.setAttributes( { expand: nextExpand } );
+		this.props.setAttributes( { width: undefined, height: undefined, expand: nextExpand } );
 	}
 
 	updateImage( sizeSlug ) {
@@ -706,7 +706,7 @@ export class ImageEdit extends Component {
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 		} );
 
-		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1 && isLargeViewport;
+		const isResizable = ( [ 'wide', 'full' ].indexOf( align ) === -1 && 'screen' !== expand ) && isLargeViewport;
 
 		const imageSizeOptions = this.getImageSizeOptions();
 
@@ -816,11 +816,14 @@ export class ImageEdit extends Component {
 								defaultedAlt = __( 'This image has an empty alt attribute' );
 							}
 
-							const img = (
+							const imgContainer = (
 								// Disable reason: Image itself is not meant to be interactive, but
 								// should direct focus to block.
 								/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-								<>
+								<div
+									className="wp-block-image__image-wrapper"
+									style={ { backgroundImage: `url(${ url })` } }
+								>
 									<img
 										src={ url }
 										alt={ defaultedAlt }
@@ -829,7 +832,7 @@ export class ImageEdit extends Component {
 										onError={ () => this.onImageError( url ) }
 									/>
 									{ isBlobURL( url ) && <Spinner /> }
-								</>
+								</div>
 								/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
 							);
 
@@ -838,7 +841,7 @@ export class ImageEdit extends Component {
 									<>
 										{ getInspectorControls( imageWidth, imageHeight ) }
 										<div style={ { width, height } }>
-											{ img }
+											{ imgContainer }
 										</div>
 									</>
 								);
@@ -914,11 +917,11 @@ export class ImageEdit extends Component {
 											setAttributes( {
 												width: parseInt( currentWidth + delta.width, 10 ),
 												height: parseInt( currentHeight + delta.height, 10 ),
-												expand: false,
+												// expand: false,
 											} );
 										} }
 									>
-										{ img }
+										{ imgContainer }
 									</ResizableBox>
 								</>
 							);
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index efc94cad2343b..74f593f86cfec 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -1,7 +1,7 @@
 .wp-block-image {
 	position: relative;
 
-	&.is-transient img {
+	&.is-transient .wp-block-image__image-wrapper {
 		opacity: 0.3;
 	}
 
@@ -9,6 +9,18 @@
 		display: inline;
 	}
 
+	.wp-block-image__image-wrapper {
+		-webkit-background-size: cover;
+		background-size: cover;
+		background-repeat: no-repeat;
+		background-position: 50% 50%;
+		img {
+			opacity: 0;
+			margin: 0;
+			padding: 0;
+		}
+	}
+
 	// Shown while image is being uploaded
 	.components-spinner {
 		position: absolute;
@@ -115,22 +127,28 @@
 
 // Joint behavior between align and expand.
 [data-type="core/image"][data-expand="screen"] {
-	&:not([data-align="wide"]):not([data-align="full"]) {
-		figure {
-			img {
-				height: 100vh;
-				width: auto;
-			}
-		}
+	.wp-block-image__image-wrapper,
+	.wp-block-image__image-wrapper img {
+		height: 100vh;
+		display: inline-block;
 	}
 
-	&[data-align="wide"],
-	&[data-align="full"] {
-		figure {
-			height: 100vh;
-			overflow: hidden;
-		}
-	}
+	//&:not([data-align="wide"]):not([data-align="full"]) {
+	//	figure {
+	//		img {
+	//			height: 100vh;
+	//			width: auto;
+	//		}
+	//	}
+	//}
+	//
+	//&[data-align="wide"],
+	//&[data-align="full"] {
+	//	figure {
+	//		height: 100vh;
+	//		overflow: hidden;
+	//	}
+	//}
 }
 
 // This is similar to above but for resized unfloated images only, where the markup is different.

From 711d9e74d186f95ce39a2649a7fbdfc9dc4b56d2 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 29 Jul 2019 08:43:28 -0300
Subject: [PATCH 11/27] core/image: re-implement full screen

---
 packages/block-library/src/image/editor.scss | 20 ++-----
 packages/block-library/src/image/save.js     | 56 ++++++++++----------
 packages/block-library/src/image/style.scss  | 52 ++++++++++--------
 3 files changed, 62 insertions(+), 66 deletions(-)

diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 74f593f86cfec..5aabf245d9135 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -130,25 +130,11 @@
 	.wp-block-image__image-wrapper,
 	.wp-block-image__image-wrapper img {
 		height: 100vh;
-		display: inline-block;
 	}
 
-	//&:not([data-align="wide"]):not([data-align="full"]) {
-	//	figure {
-	//		img {
-	//			height: 100vh;
-	//			width: auto;
-	//		}
-	//	}
-	//}
-	//
-	//&[data-align="wide"],
-	//&[data-align="full"] {
-	//	figure {
-	//		height: 100vh;
-	//		overflow: hidden;
-	//	}
-	//}
+	&:not([data-align="wide"]):not([data-align="full"]) .wp-block-image__image-wrapper {
+		display: inline-block;
+	}
 }
 
 // This is similar to above but for resized unfloated images only, where the markup is different.
diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
index 2ce63c0245d5c..832c9c2f744df 100644
--- a/packages/block-library/src/image/save.js
+++ b/packages/block-library/src/image/save.js
@@ -13,7 +13,7 @@ export default function save( { attributes } ) {
 		url,
 		alt,
 		caption,
-		align,
+		align = 'none',
 		href,
 		rel,
 		linkClass,
@@ -32,7 +32,7 @@ export default function save( { attributes } ) {
 		[ `expand${ expand }` ]: expand ? expand : false,
 	} );
 
-	const image = (
+	const Image = (
 		<img
 			src={ url }
 			alt={ alt }
@@ -42,35 +42,35 @@ export default function save( { attributes } ) {
 		/>
 	);
 
-	const figure = (
-		<>
-			{ href ? (
-				<a
-					className={ linkClass }
-					href={ href }
-					target={ linkTarget }
-					rel={ rel }
-				>
-					{ image }
-				</a>
-			) : image }
+	const ImageElement = href ?
+		<a
+			className={ linkClass }
+			href={ href }
+			target={ linkTarget }
+			rel={ rel }
+		>
+			{ Image }
+		</a> :
+		Image;
+
+	const ImageWrapper = expand ?
+		<figure className={ classes }>
+			<div
+				className="wp-block-image__image-wrapper"
+				style={ { backgroundImage: `url(${ url })` } }
+			>
+				{ ImageElement }
+			</div>
 			{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
-		</>
-	);
+		</figure> :
+		<figure className={ classes }>
+			{ ImageElement }
+			{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
+		</figure>;
 
 	if ( 'left' === align || 'right' === align || 'center' === align ) {
-		return (
-			<div>
-				<figure className={ classes }>
-					{ figure }
-				</figure>
-			</div>
-		);
+		return <div>{ ImageWrapper }</div>;
 	}
 
-	return (
-		<figure className={ classes }>
-			{ figure }
-		</figure>
-	);
+	return ImageWrapper;
 }
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 20270e918105c..0f79e465a3100 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -1,5 +1,7 @@
 .wp-block-image {
-	max-width: 100%;
+	&:not(.alignfull) {
+		max-width: 100%;
+	}
 
 	// The image block is in a `figure` element, and many themes zero this out.
 	// This rule explicitly sets it, to ensure at least some bottom-margin in the flow.
@@ -9,15 +11,6 @@
 		max-width: 100%;
 	}
 
-	&.aligncenter {
-		text-align: center;
-	}
-
-	&.alignfull img,
-	&.alignwide img {
-		width: 100%;
-	}
-
 	// This resets the intrinsic margin on the figure in non-floated, wide, and full-wide alignments.
 	margin-left: 0;
 	margin-right: 0;
@@ -26,7 +19,7 @@
 	.alignleft,
 	.alignright,
 	.aligncenter,
-	&.is-resized {
+	.is-resized {
 		display: table;
 
 		// The figure is born with left and right margin.
@@ -57,22 +50,39 @@
 	.aligncenter {
 		margin-left: auto;
 		margin-right: auto;
+		text-align: center;
 	}
 
-	&.expandscreen:not(.alignfull):not(.alignwide) img,
-	.expandscreen:not(.alignfull):not(.alignwide) img {
-		height: 100vh;
-		min-height: 100vh;
+	&.alignfull img,
+	&.alignwide img {
+		width: 100%;
 	}
 }
 
-// doing selector stronger to set `max-width`.
-.entry .entry-content .wp-block-image {
-	&.alignfull.expandscreen,
-	&.alignwide.expandscreen {
+.entry .entry-content .wp-block-image .wp-block-image__image-wrapper {
+	-webkit-background-size: cover;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+}
+
+.entry .entry-content .wp-block-image.expandscreen,
+.entry .entry-content .wp-block-image .expandscreen {
+	&.alignnone {
+		display: inline-block;
+	}
+
+	&.aligncenter .wp-block-image__image-wrapper {
+		display: inline-block;
+	}
+
+	&.alignfull .wp-block-image__image-wrapper {
+		width: 100vw;
+	}
+
+	img {
 		height: 100vh;
-		overflow: hidden;
-		max-width: 100vw;
+		opacity: 0;
 	}
 }
 

From fbc6dd2971db49e6456b511738310b409d3c5b64 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 29 Jul 2019 09:26:48 -0300
Subject: [PATCH 12/27] rebase: adjust using gutenberg-starter-theme

---
 packages/block-library/src/image/style.scss | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 0f79e465a3100..cfb7434e521d0 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -59,15 +59,19 @@
 	}
 }
 
-.entry .entry-content .wp-block-image .wp-block-image__image-wrapper {
+.wp-block-image .wp-block-image__image-wrapper {
 	-webkit-background-size: cover;
 	background-size: cover;
 	background-repeat: no-repeat;
 	background-position: 50% 50%;
 }
 
-.entry .entry-content .wp-block-image.expandscreen,
-.entry .entry-content .wp-block-image .expandscreen {
+.wp-block-image.expandscreen,
+.wp-block-image .expandscreen {
+	.wp-block-image__image-wrapper {
+		height: 100vh;
+	}
+
 	&.alignnone {
 		display: inline-block;
 	}

From a9f805445f10cc12bd3ed2fa16a2ae5ad5fce791 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 12 Aug 2019 11:16:29 -0300
Subject: [PATCH 13/27] block-alignment-toolbar: implement group by

---
 .../block-alignment-toolbar/index.js          | 56 ++++++++++++++-----
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
index e766504f0d9f4..362bc7950f4c3 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -32,38 +32,66 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 		icon: 'align-full-width',
 		title: __( 'Full Width' ),
 	},
+	fullHeight: {
+		icon: 'image-flip-vertical',
+		title: __( 'Full height' ),
+	},
 };
 
-const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
+const DEFAULT_CONTROLS = [ [ 'left', 'center', 'right', 'wide', 'full' ], [ 'fullHeight' ] ];
 const DEFAULT_CONTROL = 'center';
-const WIDE_CONTROLS = [ 'wide', 'full' ];
+const WIDE_CONTROLS = [ 'wide', 'full', 'fullHeight' ];
 
-export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS, isCollapsed = true, wideControlsEnabled = false } ) {
+export function BlockAlignmentToolbar( {
+	value,
+	onChange,
+	controls = DEFAULT_CONTROLS,
+	isCollapsed = true,
+	wideControlsEnabled = false,
+} ) {
+	/**
+	 * Control button handler.
+	 *
+	 * @param {string}    align Alignment value to set in the toolbar.
+	 * @return {Function} Handler function.
+	 */
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
 	}
 
-	const enabledControls = wideControlsEnabled ?
+	/**
+	 * Given the control name returns a control object.
+	 *
+	 * @param {string}  name Control name
+	 * @return {Object} Control object.
+	 */
+	const mapButtonControl = ( name ) => ( {
+		...BLOCK_ALIGNMENTS_CONTROLS[ name ],
+		isActive: value === name,
+		onClick: applyOrUnset( name ),
+	} );
+
+	const enabledControls = wideControlsEnabled && false ?
 		controls :
 		controls.filter( ( control ) => WIDE_CONTROLS.indexOf( control ) === -1 );
 
-	const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];
+	const activeAlignmentControl = wideControlsEnabled ? BLOCK_ALIGNMENTS_CONTROLS[ value ] : null;
 	const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
+	// Map buttons control.
+	// it can get the unidimensional shape: [ 'left', 'center', 'right' ]
+	// or 2-dimensional array if it desires the controls to be grouped:
+	// [ [ 'left', 'center', 'right' ], [ 'wide' ] ]
+	const toolbarControls = enabledControls.map( ( controlNames ) => (
+		Array.isArray( controlNames ) ? controlNames.map( mapButtonControl ) : mapButtonControl( controlNames )
+	) );
+
 	return (
 		<Toolbar
 			isCollapsed={ isCollapsed }
 			icon={ activeAlignmentControl ? activeAlignmentControl.icon : defaultAlignmentControl.icon }
 			label={ __( 'Change alignment' ) }
-			controls={
-				enabledControls.map( ( control ) => {
-					return {
-						...BLOCK_ALIGNMENTS_CONTROLS[ control ],
-						isActive: value === control,
-						onClick: applyOrUnset( control ),
-					};
-				} )
-			}
+			controls={ toolbarControls }
 		/>
 	);
 }

From 9ab635af51542d01f4bb802fab00cfb63d41deb8 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 12 Aug 2019 11:19:09 -0300
Subject: [PATCH 14/27] block-alignment-toolbar: add Readme file

---
 .../block-alignment-toolbar/README.md         | 106 ++++++++++++++++++
 .../style.scss                                |   0
 2 files changed, 106 insertions(+)
 create mode 100644 packages/block-editor/src/components/block-alignment-toolbar/README.md
 rename packages/block-editor/src/components/{block-expand-toolbar => block-alignment-toolbar}/style.scss (100%)

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/README.md b/packages/block-editor/src/components/block-alignment-toolbar/README.md
new file mode 100644
index 0000000000000..24976d8a2f4b1
--- /dev/null
+++ b/packages/block-editor/src/components/block-alignment-toolbar/README.md
@@ -0,0 +1,106 @@
+# Block Alignment Toolbar
+
+It's a toolbar which contains control buttons about alignment behavior. 100% customizable.
+
+#### Props
+
+##### value
+
+The active alignment option 
+
+- Type: `string`
+- Required: No
+- Default: `Undefined`
+
+```es6
+<BlockAlignmentToolbar
+    value={ 'center' }
+/>
+```
+
+##### onChange
+
+Callback when the alignment changes.
+
+- Type: `func`
+- Required: Yes
+
+```es6
+<BlockAlignmentToolbar
+    onChange={ ( next ) => alert( next ? `Change to ${ next }` : 'Same one!' ) }
+/>
+```
+
+Use this callback to apply the desired functionality when the user clicks on the toolbar control buttons.  
+
+##### controls
+
+An array of control buttons to show in the toolbar.
+
+- Type: `array`
+- Required: No
+- Default: `[ [ 'left', 'center', 'right', 'wide', 'full' ], [ 'fullHeight' ] ]`
+
+Basic buttons setup.
+```es6
+<BlockAlignmentToolbar
+    controls={ [ 'center', 'wide', 'full' ] }
+/>
+```
+
+Grouped control buttons.
+
+```es6
+<BlockAlignmentToolbar
+    controls={ [
+        [ 'left', 'center', 'right' ],
+        [ 'wide', 'full', 'fullHeight' ],
+    ] }
+/>
+```
+
+#### isCollapsed
+
+When it's `true` all toolbar buttons are initially hidden less the default/active button.
+Clicking on it will show all buttons in a dropdown.
+If `isCollapsed` is false, all buttons are shown in the main toolbar.
+
+- Type: `boolean`
+- Required: No
+- Default: `true`
+
+#### wideControlsEnabled
+
+If it's true, the _wide_ controls are shown. These are `wide`, `full` and `fullHeight`
+
+- Type: `boolean`
+- Required: No
+- Default: `false`
+
+### Examples
+
+#### Basic alignment toolbar.
+  
+```es6
+import { BlockAlignmentToolbar } from '@wordpress/block-editor';
+
+<BlockAlignmentToolbar
+    value={ 'center' }
+    onChange={ ( nextWidth ) => alert( { nextWidth } ) }
+    controls={ [ 'center', 'wide', 'full' ] }
+/>
+```
+
+#### Alignments buttons divided into two groups.
+
+```es6
+import { BlockAlignmentToolbar } from '@wordpress/block-editor';
+
+<BlockAlignmentToolbar
+    onChange={ ( nextWidth ) => alert( { nextWidth } ) }
+    controls={ [
+        [ 'left', 'center', 'right' ],
+        [ 'wide', 'full', 'fullHeight' ],
+    ] }
+/>
+```
diff --git a/packages/block-editor/src/components/block-expand-toolbar/style.scss b/packages/block-editor/src/components/block-alignment-toolbar/style.scss
similarity index 100%
rename from packages/block-editor/src/components/block-expand-toolbar/style.scss
rename to packages/block-editor/src/components/block-alignment-toolbar/style.scss

From cf3d3378350a08462c1849de272d3f5f5b8fbac8 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 12 Aug 2019 11:22:52 -0300
Subject: [PATCH 15/27] block-expand-toolbar: remove

---
 packages/block-editor/README.md               |  4 -
 .../block-alignment-toolbar/style.scss        |  6 --
 .../components/block-expand-toolbar/index.js  | 78 -------------------
 .../test/__snapshots__/index.js.snap          | 16 ----
 .../block-expand-toolbar/test/index.js        | 44 -----------
 packages/block-editor/src/components/index.js |  1 -
 packages/block-editor/src/style.scss          |  1 -
 packages/block-library/src/image/edit.js      |  6 --
 8 files changed, 156 deletions(-)
 delete mode 100644 packages/block-editor/src/components/block-alignment-toolbar/style.scss
 delete mode 100644 packages/block-editor/src/components/block-expand-toolbar/index.js
 delete mode 100644 packages/block-editor/src/components/block-expand-toolbar/test/__snapshots__/index.js.snap
 delete mode 100644 packages/block-editor/src/components/block-expand-toolbar/test/index.js

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index b5b0c5377ebd1..798ae994fb27b 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -98,10 +98,6 @@ Undocumented declaration.
 
 Undocumented declaration.
 
-<a name="BlockExpandToolbar" href="#BlockExpandToolbar">#</a> **BlockExpandToolbar**
-
-Undocumented declaration.
-
 <a name="BlockFormatControls" href="#BlockFormatControls">#</a> **BlockFormatControls**
 
 Undocumented declaration.
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/style.scss b/packages/block-editor/src/components/block-alignment-toolbar/style.scss
deleted file mode 100644
index d8dfe8036b8b5..0000000000000
--- a/packages/block-editor/src/components/block-alignment-toolbar/style.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.block-editor-block-expand-toolbar {
-	//display: none;
-	.components-icon-button .dashicon.dashicons-align-wide {
-		transform: rotate(90deg);
-	}
-}
diff --git a/packages/block-editor/src/components/block-expand-toolbar/index.js b/packages/block-editor/src/components/block-expand-toolbar/index.js
deleted file mode 100644
index 14025cf75ef59..0000000000000
--- a/packages/block-editor/src/components/block-expand-toolbar/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Toolbar } from '@wordpress/components';
-import { withViewportMatch } from '@wordpress/viewport';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { withBlockEditContext } from '../block-edit/context';
-
-/**
- * Expand controls array.
- *
- * @type {{screen: {icon: string, title: string}}}
- */
-const BLOCK_EXPAND_CONTROLS = {
-	screen: {
-		icon: 'align-wide',
-		title: __( 'Expand to viewport' ),
-	},
-};
-
-/**
- * Default controls.
- * It's possible to define which controls
- * will be shown in the Toolbar.
- */
-const DEFAULT_CONTROLS = [ 'screen' ];
-
-export function BlockExpandToolbar( { isCollapsed, value, onChange, controls = DEFAULT_CONTROLS } ) {
-	function applyOrUnset( expand ) {
-		return () => onChange( value === expand ? undefined : expand );
-	}
-
-	const activeAlignment = BLOCK_EXPAND_CONTROLS[ value ];
-
-	return (
-		<Toolbar
-			isCollapsed={ isCollapsed }
-			icon={ activeAlignment ? activeAlignment.icon : BLOCK_EXPAND_CONTROLS.screen.icon }
-			label={ __( 'Change expansibility' ) }
-			className="block-editor-block-expand-toolbar"
-			controls={
-				controls.map( ( control ) => {
-					return {
-						...BLOCK_EXPAND_CONTROLS[ control ],
-						isActive: value === control,
-						onClick: applyOrUnset( control ),
-					};
-				} )
-			}
-		/>
-	);
-}
-
-export default compose(
-	withBlockEditContext( ( { clientId } ) => {
-		return {
-			clientId,
-		};
-	} ),
-	withViewportMatch( { isLargeViewport: 'medium' } ),
-	withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => {
-		const { getBlockRootClientId, getSettings } = select( 'core/block-editor' );
-		const settings = getSettings();
-
-		return {
-			isCollapsed: isCollapsed || ! isLargeViewport || (
-				! settings.hasFixedToolbar &&
-				getBlockRootClientId( clientId )
-			),
-		};
-	} ),
-)( BlockExpandToolbar );
diff --git a/packages/block-editor/src/components/block-expand-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-expand-toolbar/test/__snapshots__/index.js.snap
deleted file mode 100644
index 1c4135245cfe7..0000000000000
--- a/packages/block-editor/src/components/block-expand-toolbar/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-exports[`BlockExpandControl should match snapshot 1`] = `
-<Toolbar
-  controls={
-    Array [
-      Object {
-        "icon": "align-wide",
-        "isActive": true,
-        "onClick": [Function],
-        "title": "Expand to viewport",
-      },
-    ]
-  }
-  icon="align-wide"
-  label="Change expansibility"
-/>
-`;
diff --git a/packages/block-editor/src/components/block-expand-toolbar/test/index.js b/packages/block-editor/src/components/block-expand-toolbar/test/index.js
deleted file mode 100644
index c7a208006849e..0000000000000
--- a/packages/block-editor/src/components/block-expand-toolbar/test/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-
-/**
- * Internal dependencies
- */
-import { BlockAlignmentToolbar } from '../';
-
-describe( 'BlockAlignmentToolbar', () => {
-	const alignment = 'left';
-	const onChange = jest.fn();
-
-	const wrapper = shallow( <BlockAlignmentToolbar value={ alignment } onChange={ onChange } /> );
-
-	const controls = wrapper.props().controls;
-
-	afterEach( () => {
-		onChange.mockClear();
-	} );
-
-	test( 'should match snapshot', () => {
-		expect( wrapper ).toMatchSnapshot();
-	} );
-
-	test( 'should call onChange with undefined, when the control is already active', () => {
-		const activeControl = controls.find( ( { icon } ) => icon === `align-${ alignment }` );
-		activeControl.onClick();
-
-		expect( activeControl.isActive ).toBe( true );
-		expect( onChange ).toHaveBeenCalledTimes( 1 );
-		expect( onChange ).toHaveBeenCalledWith( undefined );
-	} );
-
-	test( 'should call onChange with alignment value when the control is inactive', () => {
-		const inactiveCenterControl = controls.find( ( { icon } ) => icon === 'align-center' );
-		inactiveCenterControl.onClick();
-
-		expect( inactiveCenterControl.isActive ).toBe( false );
-		expect( onChange ).toHaveBeenCalledTimes( 1 );
-		expect( onChange ).toHaveBeenCalledWith( 'center' );
-	} );
-} );
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 262250aee8a97..e2c4a764f4635 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -7,7 +7,6 @@ export * from './font-sizes';
 export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as Autocomplete } from './autocomplete';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
-export { default as BlockExpandToolbar } from './block-expand-toolbar';
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index e8e4d6273eda4..644083ea80a81 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -5,7 +5,6 @@
 @import "./components/block-list-appender/style.scss";
 @import "./components/block-card/style.scss";
 @import "./components/block-compare/style.scss";
-@import "./components/block-expand-toolbar/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
 @import "./components/block-preview/style.scss";
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index a6818e897934b..2fd62d3ed9c6d 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -48,7 +48,6 @@ import {
 import { withSelect, withDispatch } from '@wordpress/data';
 import {
 	BlockAlignmentToolbar,
-	BlockExpandToolbar,
 	BlockControls,
 	BlockIcon,
 	InspectorControls,
@@ -611,11 +610,6 @@ export class ImageEdit extends Component {
 					onChange={ this.updateAlignment }
 				/>
 
-				<BlockExpandToolbar
-					value={ expand }
-					onChange={ this.updateExpansion }
-				/>
-
 				{ url && (
 					<>
 						<Toolbar>

From ca1e2dc6a1dd5e3edef68c6fc104dc3354b42790 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 23 Aug 2019 15:58:03 -0300
Subject: [PATCH 16/27] block-alignment-toolbar: replace full screen icon

---
 .../components/block-alignment-toolbar/index.js    | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
index 362bc7950f4c3..19c5c3bb9ea42 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Toolbar } from '@wordpress/components';
+import { Toolbar, Icon, SVG, Path } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -11,6 +11,8 @@ import { compose } from '@wordpress/compose';
  */
 import { withBlockEditContext } from '../block-edit/context';
 
+const FullScreenIcon = <Icon icon={ () => <SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><Path d="M17 7V3h-4v2h2v2h2zM3 3v4h2V5h2V3H3zM5 13H3v4h4v-2H5v-2zM15 13h2v4h-4v-2h2v-2z"></Path></SVG> } />;
+
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	left: {
 		icon: 'align-left',
@@ -32,15 +34,15 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 		icon: 'align-full-width',
 		title: __( 'Full Width' ),
 	},
-	fullHeight: {
-		icon: 'image-flip-vertical',
-		title: __( 'Full height' ),
+	fullScreen: {
+		icon: FullScreenIcon,
+		title: __( 'Full Screen' ),
 	},
 };
 
-const DEFAULT_CONTROLS = [ [ 'left', 'center', 'right', 'wide', 'full' ], [ 'fullHeight' ] ];
+const DEFAULT_CONTROLS = [ [ 'left', 'center', 'right', 'wide', 'full' ], [ 'fullScreen' ] ];
 const DEFAULT_CONTROL = 'center';
-const WIDE_CONTROLS = [ 'wide', 'full', 'fullHeight' ];
+const WIDE_CONTROLS = [ 'wide', 'full', 'fullScreen' ];
 
 export function BlockAlignmentToolbar( {
 	value,

From ec4a50958c5546769f7255132486185e312cead0 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Fri, 23 Aug 2019 16:00:02 -0300
Subject: [PATCH 17/27] block-alignment-toolbar: change grouping controls

---
 .../src/components/block-alignment-toolbar/index.js             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
index 19c5c3bb9ea42..a853ec24e65fb 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -40,7 +40,7 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 	},
 };
 
-const DEFAULT_CONTROLS = [ [ 'left', 'center', 'right', 'wide', 'full' ], [ 'fullScreen' ] ];
+const DEFAULT_CONTROLS = [ [ 'left', 'center', 'right' ], [ 'wide', 'full', 'fullScreen' ] ];
 const DEFAULT_CONTROL = 'center';
 const WIDE_CONTROLS = [ 'wide', 'full', 'fullScreen' ];
 

From 19b2dddd37d446d4da4da118f802ea2c596b5229 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 26 Aug 2019 10:29:17 -0300
Subject: [PATCH 18/27] block-toolbar-alignment: remove divider

---
 .../src/components/block-alignment-toolbar/index.js    | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
index a853ec24e65fb..16af19ab5277f 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -40,7 +40,7 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 	},
 };
 
-const DEFAULT_CONTROLS = [ [ 'left', 'center', 'right' ], [ 'wide', 'full', 'fullScreen' ] ];
+const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full', 'fullScreen' ];
 const DEFAULT_CONTROL = 'center';
 const WIDE_CONTROLS = [ 'wide', 'full', 'fullScreen' ];
 
@@ -62,7 +62,7 @@ export function BlockAlignmentToolbar( {
 	}
 
 	/**
-	 * Given the control name returns a control object.
+	 * returns a control object according on the given control name .
 	 *
 	 * @param {string}  name Control name
 	 * @return {Object} Control object.
@@ -73,17 +73,13 @@ export function BlockAlignmentToolbar( {
 		onClick: applyOrUnset( name ),
 	} );
 
-	const enabledControls = wideControlsEnabled && false ?
+	const enabledControls = wideControlsEnabled ?
 		controls :
 		controls.filter( ( control ) => WIDE_CONTROLS.indexOf( control ) === -1 );
 
 	const activeAlignmentControl = wideControlsEnabled ? BLOCK_ALIGNMENTS_CONTROLS[ value ] : null;
 	const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
-	// Map buttons control.
-	// it can get the unidimensional shape: [ 'left', 'center', 'right' ]
-	// or 2-dimensional array if it desires the controls to be grouped:
-	// [ [ 'left', 'center', 'right' ], [ 'wide' ] ]
 	const toolbarControls = enabledControls.map( ( controlNames ) => (
 		Array.isArray( controlNames ) ? controlNames.map( mapButtonControl ) : mapButtonControl( controlNames )
 	) );

From 53d5ab3ee5ea9ab653727f0d50825a44a9fd6f2e Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 26 Aug 2019 10:38:20 -0300
Subject: [PATCH 19/27] block-alignment-toolbar: update doc

---
 .../src/components/block-alignment-toolbar/README.md      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/README.md b/packages/block-editor/src/components/block-alignment-toolbar/README.md
index 24976d8a2f4b1..4abd9c783978c 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/README.md
+++ b/packages/block-editor/src/components/block-alignment-toolbar/README.md
@@ -39,7 +39,7 @@ An array of control buttons to show in the toolbar.
 
 - Type: `array`
 - Required: No
-- Default: `[ [ 'left', 'center', 'right', 'wide', 'full' ], [ 'fullHeight' ] ]`
+- Default: `[ [ 'left', 'center', 'right', 'wide', 'full' ], [ 'fullScreen' ] ]`
 
 Basic buttons setup.
 ```es6
@@ -54,7 +54,7 @@ Grouped control buttons.
 <BlockAlignmentToolbar
     controls={ [
         [ 'left', 'center', 'right' ],
-        [ 'wide', 'full', 'fullHeight' ],
+        [ 'wide', 'full', 'fullScreen' ],
     ] }
 />
 ```
@@ -71,7 +71,7 @@ If `isCollapsed` is false, all buttons are shown in the main toolbar.
 
 #### wideControlsEnabled
 
-If it's true, the _wide_ controls are shown. These are `wide`, `full` and `fullHeight`
+If it's true, the _wide_ controls are shown. These are `wide`, `full` and `fullScreen`
 
 - Type: `boolean`
 - Required: No
@@ -100,7 +100,7 @@ import { BlockAlignmentToolbar } from '@wordpress/block-editor';
     onChange={ ( nextWidth ) => alert( { nextWidth } ) }
     controls={ [
         [ 'left', 'center', 'right' ],
-        [ 'wide', 'full', 'fullHeight' ],
+        [ 'wide', 'full', 'fullScreen' ],
     ] }
 />
 ```

From ea0fc5d5c44c4062e913b9bc18b33304b8fe3015 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Mon, 26 Aug 2019 13:29:13 -0300
Subject: [PATCH 20/27] rebase

---
 packages/block-library/src/image/block.json  |  3 -
 packages/block-library/src/image/edit.js     | 13 ++---
 packages/block-library/src/image/editor.scss |  2 +
 packages/block-library/src/image/save.js     | 58 ++++++++++----------
 4 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 6dfd1e6304119..68d2559ae4f48 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -5,9 +5,6 @@
 		"align": {
 			"type": "string"
 		},
-        "expand": {
-			"type": "string"
-        },
 		"url": {
 			"type": "string",
 			"source": "attribute",
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 2fd62d3ed9c6d..a294680b906f2 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -284,7 +284,6 @@ export class ImageEdit extends Component {
 		this.onUploadError = this.onUploadError.bind( this );
 		this.onImageError = this.onImageError.bind( this );
 		this.getLinkDestinations = this.getLinkDestinations.bind( this );
-		this.updateExpansion = this.updateExpansion.bind( this );
 
 		this.state = {
 			captionFocused: false,
@@ -495,10 +494,6 @@ export class ImageEdit extends Component {
 		this.props.setAttributes( { ...extraUpdatedAttributes, align: nextAlign } );
 	}
 
-	updateExpansion( nextExpand ) {
-		this.props.setAttributes( { width: undefined, height: undefined, expand: nextExpand } );
-	}
-
 	updateImage( sizeSlug ) {
 		const { image } = this.props;
 
@@ -598,7 +593,6 @@ export class ImageEdit extends Component {
 			height,
 			linkTarget,
 			sizeSlug,
-			expand,
 		} = attributes;
 
 		const isExternal = isExternalImage( id, url );
@@ -700,7 +694,7 @@ export class ImageEdit extends Component {
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 		} );
 
-		const isResizable = ( [ 'wide', 'full' ].indexOf( align ) === -1 && 'screen' !== expand ) && isLargeViewport;
+		const isResizable = ( [ 'wide', 'full' ].indexOf( align ) === -1 ) && isLargeViewport;
 
 		const imageSizeOptions = this.getImageSizeOptions();
 
@@ -904,14 +898,15 @@ export class ImageEdit extends Component {
 											left: showLeftHandle,
 										} }
 
-										onResizeStart={ onResizeStart }
+										onResizeStart={ () => {
+											toggleSelection( false );
+										} }
 
 										onResizeStop={ ( event, direction, elt, delta ) => {
 											onResizeStop();
 											setAttributes( {
 												width: parseInt( currentWidth + delta.width, 10 ),
 												height: parseInt( currentHeight + delta.height, 10 ),
-												// expand: false,
 											} );
 										} }
 									>
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 5aabf245d9135..ef4d2a2de1fb6 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -125,6 +125,8 @@
 	}
 }
 
+
+
 // Joint behavior between align and expand.
 [data-type="core/image"][data-expand="screen"] {
 	.wp-block-image__image-wrapper,
diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
index 832c9c2f744df..01aff39769152 100644
--- a/packages/block-library/src/image/save.js
+++ b/packages/block-library/src/image/save.js
@@ -13,7 +13,7 @@ export default function save( { attributes } ) {
 		url,
 		alt,
 		caption,
-		align = 'none',
+		align,
 		href,
 		rel,
 		linkClass,
@@ -22,17 +22,15 @@ export default function save( { attributes } ) {
 		id,
 		linkTarget,
 		sizeSlug,
-		expand,
 	} = attributes;
 
 	const classes = classnames( {
 		[ `align${ align }` ]: align,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'is-resized': width || height,
-		[ `expand${ expand }` ]: expand ? expand : false,
 	} );
 
-	const Image = (
+	const image = (
 		<img
 			src={ url }
 			alt={ alt }
@@ -42,35 +40,35 @@ export default function save( { attributes } ) {
 		/>
 	);
 
-	const ImageElement = href ?
-		<a
-			className={ linkClass }
-			href={ href }
-			target={ linkTarget }
-			rel={ rel }
-		>
-			{ Image }
-		</a> :
-		Image;
-
-	const ImageWrapper = expand ?
-		<figure className={ classes }>
-			<div
-				className="wp-block-image__image-wrapper"
-				style={ { backgroundImage: `url(${ url })` } }
-			>
-				{ ImageElement }
-			</div>
-			{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
-		</figure> :
-		<figure className={ classes }>
-			{ ImageElement }
+	const figure = (
+		<>
+			{ href ? (
+				<a
+					className={ linkClass }
+					href={ href }
+					target={ linkTarget }
+					rel={ rel }
+				>
+					{ image }
+				</a>
+			) : image }
 			{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
-		</figure>;
+		</>
+	);
 
 	if ( 'left' === align || 'right' === align || 'center' === align ) {
-		return <div>{ ImageWrapper }</div>;
+		return (
+			<div>
+				<figure className={ classes }>
+					{ figure }
+				</figure>
+			</div>
+		);
 	}
 
-	return ImageWrapper;
+	return (
+		<figure className={ classes }>
+			{ figure }
+		</figure>
+	);
 }

From a080505753cffebe6f116748913bf89d48a2cb18 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 10 Sep 2019 13:39:18 -0400
Subject: [PATCH 21/27] block-alignment-toolbar: pass alignment types in the
 callback

---
 .../src/components/block-alignment-toolbar/index.js        | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
index 16af19ab5277f..baefc7cc32adc 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -13,7 +13,7 @@ import { withBlockEditContext } from '../block-edit/context';
 
 const FullScreenIcon = <Icon icon={ () => <SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><Path d="M17 7V3h-4v2h2v2h2zM3 3v4h2V5h2V3H3zM5 13H3v4h4v-2H5v-2zM15 13h2v4h-4v-2h2v-2z"></Path></SVG> } />;
 
-const BLOCK_ALIGNMENTS_CONTROLS = {
+export const BLOCK_ALIGNMENTS_CONTROLS = {
 	left: {
 		icon: 'align-left',
 		title: __( 'Align Left' ),
@@ -58,7 +58,10 @@ export function BlockAlignmentToolbar( {
 	 * @return {Function} Handler function.
 	 */
 	function applyOrUnset( align ) {
-		return () => onChange( value === align ? undefined : align );
+		return () => onChange(
+			value === align ? undefined : align,
+			Object.keys( BLOCK_ALIGNMENTS_CONTROLS )
+		);
 	}
 
 	/**

From 7b2e04ac9fccc33227862fb1377dfb05072c340d Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 10 Sep 2019 13:48:16 -0400
Subject: [PATCH 22/27] block-library: remove `expand`. Add `fullScreen`

---
 packages/block-library/src/image/index.js | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
index ad83407af62a4..378ec139ffd3d 100644
--- a/packages/block-library/src/image/index.js
+++ b/packages/block-library/src/image/index.js
@@ -31,19 +31,11 @@ export const settings = {
 	],
 	transforms,
 	getEditWrapperProps( attributes ) {
-		const { align, width, expand } = attributes;
-		const editProps = {};
+		const { align, width } = attributes;
 
-		if ( 'left' === align || 'center' === align || 'right' === align || 'wide' === align || 'full' === align ) {
-			editProps[ 'data-align' ] = align;
-			editProps[ 'data-resized' ] = !! width;
+		if ( 'left' === align || 'center' === align || 'right' === align || 'wide' === align || 'full' === align || 'fullScreen' === align ) {
+			return { 'data-align': align, 'data-resized': !! width };
 		}
-
-		if ( 'screen' === expand ) {
-			editProps[ 'data-expand' ] = expand;
-		}
-
-		return editProps;
 	},
 	edit,
 	save,

From b97798d38ce46038839f86ee372ce28575bda126 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 10 Sep 2019 13:57:11 -0400
Subject: [PATCH 23/27] block-library: update alignment when fullScreen

---
 packages/block-library/src/image/edit.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index a294680b906f2..8dcb15c560ca4 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -487,8 +487,8 @@ export class ImageEdit extends Component {
 		this.props.setAttributes( { alt: newAlt } );
 	}
 
-	updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = [ 'wide', 'full' ].indexOf( nextAlign ) !== -1 ?
+	updateAlignment( nextAlign, types ) {
+		const extraUpdatedAttributes = [ 'wide', 'full', 'fullScreen' ].indexOf( nextAlign ) !== -1 ?
 			{ width: undefined, height: undefined } :
 			{};
 		this.props.setAttributes( { ...extraUpdatedAttributes, align: nextAlign } );

From 31ef94b9975f14df3b38ebbeaad04f742239b912 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 10 Sep 2019 15:05:12 -0400
Subject: [PATCH 24/27] core/edit: remove wrapper

---
 packages/block-library/src/image/edit.js     | 34 ++++++++------------
 packages/block-library/src/image/editor.scss | 27 +++-------------
 packages/block-library/src/image/style.scss  | 18 -----------
 3 files changed, 17 insertions(+), 62 deletions(-)

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 8dcb15c560ca4..e1a5cb4c54be1 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -125,12 +125,12 @@ const stopPropagationRelevantKeys = ( event ) => {
 };
 
 const ImageURLInputUI = ( {
-	advancedOptions,
-	linkDestination,
-	mediaLinks,
-	onChangeUrl,
-	url,
-} ) => {
+							  advancedOptions,
+							  linkDestination,
+							  mediaLinks,
+							  onChangeUrl,
+							  url,
+						  } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 	const openLinkUI = useCallback( () => {
 		setIsOpen( true );
@@ -603,7 +603,6 @@ export class ImageEdit extends Component {
 					value={ align }
 					onChange={ this.updateAlignment }
 				/>
-
 				{ url && (
 					<>
 						<Toolbar>
@@ -694,7 +693,7 @@ export class ImageEdit extends Component {
 			[ `size-${ sizeSlug }` ]: sizeSlug,
 		} );
 
-		const isResizable = ( [ 'wide', 'full' ].indexOf( align ) === -1 ) && isLargeViewport;
+		const isResizable = ( [ 'wide', 'full', 'fullScreen' ].indexOf( align ) === -1 ) && isLargeViewport;
 
 		const imageSizeOptions = this.getImageSizeOptions();
 
@@ -804,14 +803,11 @@ export class ImageEdit extends Component {
 								defaultedAlt = __( 'This image has an empty alt attribute' );
 							}
 
-							const imgContainer = (
+							const img = (
 								// Disable reason: Image itself is not meant to be interactive, but
 								// should direct focus to block.
 								/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-								<div
-									className="wp-block-image__image-wrapper"
-									style={ { backgroundImage: `url(${ url })` } }
-								>
+								<>
 									<img
 										src={ url }
 										alt={ defaultedAlt }
@@ -820,7 +816,7 @@ export class ImageEdit extends Component {
 										onError={ () => this.onImageError( url ) }
 									/>
 									{ isBlobURL( url ) && <Spinner /> }
-								</div>
+								</>
 								/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
 							);
 
@@ -829,7 +825,7 @@ export class ImageEdit extends Component {
 									<>
 										{ getInspectorControls( imageWidth, imageHeight ) }
 										<div style={ { width, height } }>
-											{ imgContainer }
+											{ img }
 										</div>
 									</>
 								);
@@ -897,11 +893,7 @@ export class ImageEdit extends Component {
 											bottom: true,
 											left: showLeftHandle,
 										} }
-
-										onResizeStart={ () => {
-											toggleSelection( false );
-										} }
-
+										onResizeStart={ onResizeStart }
 										onResizeStop={ ( event, direction, elt, delta ) => {
 											onResizeStop();
 											setAttributes( {
@@ -910,7 +902,7 @@ export class ImageEdit extends Component {
 											} );
 										} }
 									>
-										{ imgContainer }
+										{ img }
 									</ResizableBox>
 								</>
 							);
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index ef4d2a2de1fb6..cef7a66f87d6f 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -1,7 +1,7 @@
 .wp-block-image {
 	position: relative;
 
-	&.is-transient .wp-block-image__image-wrapper {
+	&.is-transient img {
 		opacity: 0.3;
 	}
 
@@ -9,18 +9,6 @@
 		display: inline;
 	}
 
-	.wp-block-image__image-wrapper {
-		-webkit-background-size: cover;
-		background-size: cover;
-		background-repeat: no-repeat;
-		background-position: 50% 50%;
-		img {
-			opacity: 0;
-			margin: 0;
-			padding: 0;
-		}
-	}
-
 	// Shown while image is being uploaded
 	.components-spinner {
 		position: absolute;
@@ -125,18 +113,11 @@
 	}
 }
 
-
-
-// Joint behavior between align and expand.
-[data-type="core/image"][data-expand="screen"] {
-	.wp-block-image__image-wrapper,
-	.wp-block-image__image-wrapper img {
+[data-type="core/image"][data-align="fullScreen"] {
+	figure img {
+		width: 100%;
 		height: 100vh;
 	}
-
-	&:not([data-align="wide"]):not([data-align="full"]) .wp-block-image__image-wrapper {
-		display: inline-block;
-	}
 }
 
 // This is similar to above but for resized unfloated images only, where the markup is different.
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index cfb7434e521d0..e48bdb21d5f8f 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -59,31 +59,13 @@
 	}
 }
 
-.wp-block-image .wp-block-image__image-wrapper {
-	-webkit-background-size: cover;
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: 50% 50%;
-}
-
 .wp-block-image.expandscreen,
 .wp-block-image .expandscreen {
-	.wp-block-image__image-wrapper {
-		height: 100vh;
-	}
 
 	&.alignnone {
 		display: inline-block;
 	}
 
-	&.aligncenter .wp-block-image__image-wrapper {
-		display: inline-block;
-	}
-
-	&.alignfull .wp-block-image__image-wrapper {
-		width: 100vw;
-	}
-
 	img {
 		height: 100vh;
 		opacity: 0;

From fdaf10f23a669c7aea2c29a6c044c8fa5291a04e Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 10 Sep 2019 15:12:07 -0400
Subject: [PATCH 25/27] add `fullScreen` mode to other components

---
 .../block-editor/src/components/block-list/style.scss     | 8 +++++++-
 .../block-editor/src/components/inner-blocks/style.scss   | 1 +
 packages/block-library/src/columns/editor.scss            | 1 +
 packages/block-library/src/group/editor.scss              | 5 +++++
 .../edit-post/src/components/visual-editor/style.scss     | 3 ++-
 packages/edit-post/src/style.scss                         | 1 +
 playground/src/editor-styles.scss                         | 1 +
 7 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index ba4ea474e1d32..2a0993fe654a1 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -489,6 +489,7 @@
 
 	// Wide and full-wide
 	&[data-align="full"],
+	&[data-align="fullScreen"],
 	&[data-align="wide"] {
 		clear: both;
 
@@ -557,7 +558,8 @@
 	}
 
 	// Full-wide
-	&[data-align="full"] {
+	&[data-align="full"],
+	&[data-align="fullScreen"] {
 		// Position hover label on the left for the top level block.
 		> .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb {
 			left: 0;
@@ -810,6 +812,7 @@
 	}
 
 	// Reset negative margins on mobile for full-width.
+	&[data-align="fullScreen"] .block-editor-block-list__block-mobile-toolbar,
 	&[data-align="full"] .block-editor-block-list__block-mobile-toolbar {
 		margin-left: 0;
 		margin-right: 0;
@@ -920,6 +923,7 @@
 		}
 	}
 
+	&[data-align="fullScreen"] > .block-editor-block-list__insertion-point,
 	&[data-align="full"] > .block-editor-block-list__insertion-point {
 		left: 0;
 		right: 0;
@@ -1028,6 +1032,7 @@
 	}
 
 	// Full-aligned blocks have negative margins on the parent of the toolbar, so additional position adjustment is not required.
+	&[data-align="fullScreen"] .block-editor-block-contextual-toolbar,
 	&[data-align="full"] .block-editor-block-contextual-toolbar {
 		left: 0;
 		right: 0;
@@ -1219,6 +1224,7 @@
 		}
 
 		// Don't use this for full-wide blocks, as there's no clearance to accommodate extra area on the side.
+		&[data-align="fullScreen	"]::before,
 		&[data-align="full"]::before {
 			content: none;
 		}
diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss
index e7bd479e04e02..de5cacabbd580 100644
--- a/packages/block-editor/src/components/inner-blocks/style.scss
+++ b/packages/block-editor/src/components/inner-blocks/style.scss
@@ -13,6 +13,7 @@
 }
 
 // On fullwide blocks, don't go beyond the canvas.
+[data-align="fullScreen"] > .editor-block-list__block-edit > [data-block] .has-overlay::after,
 [data-align="full"] > .editor-block-list__block-edit > [data-block] .has-overlay::after {
 	right: 0;
 	left: 0;
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 1dc626a9e84e0..17387b6b883f2 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -21,6 +21,7 @@
 
 // Fullwide: show margin left/right to ensure there's room for the side UI.
 // This is not a 1:1 preview with the front-end where these margins would presumably be zero.
+[data-type="core/columns"][data-align="fullScreen"] .wp-block-columns > .editor-inner-blocks,
 [data-type="core/columns"][data-align="full"] .wp-block-columns > .editor-inner-blocks {
 	padding-left: $block-padding;
 	padding-right: $block-padding;
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 166d3992c6daf..94dca36deedba 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -18,6 +18,7 @@
 
 	// Full Width Blocks
 	// specificity required to only target immediate child Blocks of a Group
+	> .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="fullScreen"],
 	> .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
 		margin-left: auto;
 		margin-right: auto;
@@ -31,6 +32,7 @@
 	}
 
 	// Full Width Blocks with a background (ie: has padding)
+	> .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="fullScreen"],
 	> .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
 		// note: using position `left` causes hoz scrollbars so
 		// we opt to use margin instead
@@ -48,6 +50,7 @@
 /**
  * Group: Full Width Alignment
  */
+.wp-block[data-type="core/group"][data-align="fullScreen"],
 .wp-block[data-type="core/group"][data-align="full"] {
 
 	// First tier of InnerBlocks must act like the container of the standard canvas
@@ -65,6 +68,7 @@
 
 	// Full Width Blocks
 	// specificity required to only target immediate child Blocks of Group
+	> .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="fullScreen"],
 	> .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
 		padding-right: 0;
 		padding-left: 0;
@@ -81,6 +85,7 @@
 
 	// Full Width Blocks with a background (ie: has padding)
 	// note: also duplicated above for all Group widths
+	> .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="fullScreen"],
 	> .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
 		width: calc(100% + 60px);
 	}
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index cfa17d6d3e517..6335798df5efd 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -33,7 +33,8 @@
 		// Center the block toolbar on wide and full-wide blocks.
 		// Use specific selector to not affect nested block toolbars.
 		&[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar,
-		&[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar {
+		&[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar,
+		&[data-align="fullScreen"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar {
 			height: 0; // This collapses the container to an invisible element without margin.
 			width: calc(100% - #{$block-side-ui-width * 3} - #{$grid-size-small * 1.5}); // -90px to account for inner element left position value causing overflow-x scrollbars
 			margin-left: 0;
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 0ffb8871dece8..ce043b3f0097d 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -95,6 +95,7 @@ body.block-editor-page {
 		max-width: 1100px;
 	}
 
+	&[data-align="fullScreen"],
 	&[data-align="full"] {
 		max-width: none;
 	}
diff --git a/playground/src/editor-styles.scss b/playground/src/editor-styles.scss
index 7337f68fe2bc7..4951515c8dfaf 100644
--- a/playground/src/editor-styles.scss
+++ b/playground/src/editor-styles.scss
@@ -45,6 +45,7 @@
 	.wp-block[data-align="wide"] {
 		max-width: 1100px;
 	}
+	.wp-block[data-align="fullScreen"],
 	.wp-block[data-align="full"] {
 		max-width: none;
 	}

From 45134ad9f1e54729758b616c1918c8c6cc0806d7 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 10 Sep 2019 15:36:37 -0400
Subject: [PATCH 26/27] block-library: hidden overflow in fullScreen mode

---
 packages/block-library/src/image/editor.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index cef7a66f87d6f..367c2abff77d6 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -114,9 +114,13 @@
 }
 
 [data-type="core/image"][data-align="fullScreen"] {
-	figure img {
-		width: 100%;
+	figure {
 		height: 100vh;
+		overflow: hidden;
+
+		img {
+			width: 100%;
+		}
 	}
 }
 

From 4835557d8dad332252a0071eee5f31c6b9573b46 Mon Sep 17 00:00:00 2001
From: retrofox <rdsuarez@gmail.com>
Date: Tue, 10 Sep 2019 17:58:08 -0400
Subject: [PATCH 27/27] block-alignment-toolbar: minor doc improvement.

---
 .../src/components/block-alignment-toolbar/README.md          | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/README.md b/packages/block-editor/src/components/block-alignment-toolbar/README.md
index 4abd9c783978c..584cfbb8574dc 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/README.md
+++ b/packages/block-editor/src/components/block-alignment-toolbar/README.md
@@ -25,6 +25,10 @@ Callback when the alignment changes.
 - Type: `func`
 - Required: Yes
 
+The callback function provides two arguments:
+  * `next`: next alignment value.
+  * `alignTypes` the current alignments type currently supported.
+
 ```es6
 <BlockAlignmentToolbar
     onChange={ ( next ) => alert( next ? `Change to ${ next }` : 'Same one!' ) }