diff --git a/packages/block-editor/src/components/block-full-height-alignment-toolbar/README.md b/packages/block-editor/src/components/block-full-height-alignment-toolbar/README.md
new file mode 100644
index 0000000000000..6febd1fc272f3
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/packages/block-editor/src/components/block-full-height-alignment-toolbar/index.js b/packages/block-editor/src/components/block-full-height-alignment-toolbar/index.js
new file mode 100644
index 0000000000000..0912a5b8fb26b
--- /dev/null
+++ b/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 (
+
+ onToggle( ! isActive ) }
+ />
+
+ );
+}
+
+export default BlockFullHeightAlignmentToolbar;
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 40c6510d292c9..150a67eb14a49 100644
--- a/packages/block-editor/src/components/index.js
+++ b/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';
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index ff9d9f8cd6eb4..00ea5c4663320 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/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 = (
<>
+
{ hasBackground && (
<>
setAttributes( { minHeight: newMinHeight } )
}
- onUnitChange={ ( nextUnit ) => {
+ onUnitChange={ ( nextUnit ) =>
setAttributes( {
minHeightUnit: nextUnit,
- } );
- } }
+ } )
+ }
/>