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, - } ); - } } + } ) + } />