Add fullScreen control to the block alignment toolbar

packages/block-editor/src/components/block-alignment-toolbar/README.md

@@ -0,0 +1,110 @@
+# 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
+
+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!' ) }
+/>
+```
+
+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' ], [ 'fullScreen' ] ]`
+
+Basic buttons setup.
+```es6
+<BlockAlignmentToolbar
+    controls={ [ 'center', 'wide', 'full' ] }
+/>
+```
+
+Grouped control buttons.
+
+```es6
+<BlockAlignmentToolbar
+    controls={ [
+        [ 'left', 'center', 'right' ],
+        [ 'wide', 'full', 'fullScreen' ],
+    ] }
+/>
+```
+
+#### 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 `fullScreen`
+
+- 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', 'fullScreen' ],
+    ] }
+/>
+```

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,7 +11,9 @@ import { compose } from '@wordpress/compose';
  */
 import { withBlockEditContext } from '../block-edit/context';
 
-const BLOCK_ALIGNMENTS_CONTROLS = {
+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> } />;
+
+export const BLOCK_ALIGNMENTS_CONTROLS = {
 	left: {
 		icon: 'align-left',
 		title: __( 'Align Left' ),
@@ -32,38 +34,65 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 		icon: 'align-full-width',
 		title: __( 'Full Width' ),
 	},
+	fullScreen: {
+		icon: FullScreenIcon,
+		title: __( 'Full Screen' ),
+	},
 };
 
-const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
+const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full', 'fullScreen' ];
 const DEFAULT_CONTROL = 'center';
-const WIDE_CONTROLS = [ 'wide', 'full' ];
+const WIDE_CONTROLS = [ 'wide', 'full', 'fullScreen' ];
 
-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 );
+		return () => onChange(
+			value === align ? undefined : align,
+			Object.keys( BLOCK_ALIGNMENTS_CONTROLS )
+		);
 	}
 
+	/**
+	 * returns a control object according on the given control name .
+	 *
+	 * @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 ?
 		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 ];
 
+	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 }
 		/>
 	);
 }

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;
 		}

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;

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;

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 {

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,

packages/block-library/src/cover/style.scss

@@ -34,6 +34,10 @@
 		}
 	}
 
+	&.expandscreen {
+		height: 100vh;
+	}
+
 	h2,
 	.wp-block-cover-image-text,
 	.wp-block-cover-text {

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);
 	}

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 );
@@ -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 } );
@@ -693,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();