Full Height Alignment Toolbar: Implementation + Cover integration. (#…

…26615)

* full-height-alignment-toolbar: initial approach

* block-editor: expose experimental full height

* cover: add full height button to toolbar

* cover: propagate full height to height input cpm

* cover: dissabel unit control in full height mode

* cover: store prev height to be able to return them

* cover: set height via inline in full height mode

* cover: add toggle control for full height

* cover: set fulll height mode when saving block

* full-height-alignment: change icon

* cover: refactoring -> simplify full height

* cover: handling not prev height values.

* cover: clean fullHeightAlignment attr

* full-height-align: change button label

* full-height-alignment: pick icon from package

* cover: improve setting prev values
Props to @jorgefilipecosta

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

@@ -0,0 +1,3 @@
+# Full Height Toolbar Toolbar
+
+Unlike the block alignment options, `Full Height Alignment` can be applied to a block in an independent way. But also, it works very well together with these block alignment options, where the combination empowers the design-layout capability.

packages/block-editor/src/components/block-full-height-alignment-toolbar/index.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { fullscreen } from '@wordpress/icons';
+
+function BlockFullHeightAlignmentToolbar( {
+	isActive,
+	label = __( 'Toggle full height' ),
+	onToggle,
+} ) {
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				isActive={ isActive }
+				icon={ fullscreen }
+				label={ label }
+				onClick={ () => onToggle( ! isActive ) }
+			/>
+		</ToolbarGroup>
+	);
+}
+
+export default BlockFullHeightAlignmentToolbar;

packages/block-editor/src/components/index.js

@@ -8,6 +8,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 __experimentalBlockFullHeightAligmentToolbar } from './block-full-height-alignment-toolbar';
 export { default as __experimentalBlockAlignmentMatrixToolbar } from './block-alignment-matrix-toolbar';
 export { default as BlockBreadcrumb } from './block-breadcrumb';
 export { BlockContextProvider } from './block-context';

packages/block-library/src/cover/edit.js

@@ -37,6 +37,7 @@ import {
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	__experimentalUnitControl as UnitControl,
 	__experimentalBlockAlignmentMatrixToolbar as BlockAlignmentMatrixToolbar,
+	__experimentalBlockFullHeightAligmentToolbar as FullHeightAlignment,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { withDispatch } from '@wordpress/data';
@@ -89,6 +90,7 @@ function CoverHeightInput( {
 	value = '',
 } ) {
 	const [ temporaryInput, setTemporaryInput ] = useState( null );
+
 	const instanceId = useInstanceId( UnitControl );
 	const inputId = `block-cover-height-input-${ instanceId }`;
 	const isPx = unit === 'px';
@@ -264,6 +266,39 @@ function CoverEdit( {
 	const onSelectMedia = attributesFromMedia( setAttributes );
 	const isBlogUrl = isBlobURL( url );
 
+	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
+	const [ prevMinHeightUnit, setPrevMinHeightUnit ] = useState(
+		minHeightUnit
+	);
+	const isMinFullHeight = minHeightUnit === 'vh' && minHeight === 100;
+
+	const toggleMinFullHeight = () => {
+		if ( isMinFullHeight ) {
+			// If there aren't previous values, take the default ones.
+			if ( prevMinHeightUnit === 'vh' && prevMinHeightValue === 100 ) {
+				return setAttributes( {
+					minHeight: undefined,
+					minHeightUnit: undefined,
+				} );
+			}
+
+			// Set the previous values of height.
+			return setAttributes( {
+				minHeight: prevMinHeightValue,
+				minHeightUnit: prevMinHeightUnit,
+			} );
+		}
+
+		setPrevMinHeightValue( minHeight );
+		setPrevMinHeightUnit( minHeightUnit );
+
+		// Set full height.
+		return setAttributes( {
+			minHeight: 100,
+			minHeightUnit: 'vh',
+		} );
+	};
+
 	const toggleParallax = () => {
 		setAttributes( {
 			hasParallax: ! hasParallax,
@@ -322,6 +357,10 @@ function CoverEdit( {
 	const controls = (
 		<>
 			<BlockControls>
+				<FullHeightAlignment
+					isActive={ isMinFullHeight }
+					onToggle={ toggleMinFullHeight }
+				/>
 				{ hasBackground && (
 					<>
 						<BlockAlignmentMatrixToolbar
@@ -405,11 +444,11 @@ function CoverEdit( {
 								onChange={ ( newMinHeight ) =>
 									setAttributes( { minHeight: newMinHeight } )
 								}
-								onUnitChange={ ( nextUnit ) => {
+								onUnitChange={ ( nextUnit ) =>
 									setAttributes( {
 										minHeightUnit: nextUnit,
-									} );
-								} }
+									} )
+								}
 							/>
 						</PanelBody>
 						<PanelColorGradientSettings