diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
index 02f2c29430e60b..d2926e71f5e012 100644
--- a/packages/block-library/src/media-text/block.json
+++ b/packages/block-library/src/media-text/block.json
@@ -83,6 +83,9 @@
},
"focalPoint": {
"type": "object"
+ },
+ "minHeight": {
+ "type": "string"
}
},
"supports": {
diff --git a/packages/block-library/src/media-text/constants.js b/packages/block-library/src/media-text/constants.js
index 984193dbfb376a..6a8dad097cfa46 100644
--- a/packages/block-library/src/media-text/constants.js
+++ b/packages/block-library/src/media-text/constants.js
@@ -1 +1,4 @@
+/**
+ * WordPress dependencies
+ */
export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 5ecc79f02cd643..31c420194b04be 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -9,6 +9,7 @@ import { map, filter } from 'lodash';
*/
import { __, _x } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
import { useState, useRef } from '@wordpress/element';
import {
BlockControls,
@@ -16,6 +17,7 @@ import {
__experimentalUseInnerBlocksProps as useInnerBlocksProps,
InspectorControls,
useBlockProps,
+ useSetting,
__experimentalImageURLInputUI as ImageURLInputUI,
__experimentalImageSizeControl as ImageSizeControl,
store as blockEditorStore,
@@ -28,6 +30,9 @@ import {
ToolbarButton,
ExternalLink,
FocalPointPicker,
+ __experimentalUnitControl as UnitControl,
+ __experimentalUseCustomUnits as useCustomUnits,
+ BaseControl,
} from '@wordpress/components';
import { pullLeft, pullRight } from '@wordpress/icons';
import { store as coreStore } from '@wordpress/core-data';
@@ -137,9 +142,13 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
mediaWidth,
rel,
verticalAlignment,
+ minHeight,
} = attributes;
const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+ const instanceId = useInstanceId( UnitControl );
+ const inputId = `block-media-text-height-input-${ instanceId }`;
+
const image = useSelect(
( select ) =>
mediaId && isSelected
@@ -148,6 +157,24 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
[ isSelected, mediaId ]
);
+ const CSS_UNITS = useCustomUnits( {
+ availableUnits: useSetting( 'spacing.units' ) || [
+ 'px',
+ 'em',
+ 'rem',
+ 'vw',
+ 'vh',
+ ],
+ defaultValues: {
+ px: '430',
+ '%': '50',
+ em: '20',
+ rem: '20',
+ vw: '20',
+ vh: '50',
+ },
+ } );
+
const refMediaContainer = useRef();
const imperativeFocalPointPreview = ( value ) => {
const { style } = refMediaContainer.current.resizable;
@@ -188,6 +215,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
const style = {
gridTemplateColumns,
msGridColumns: gridTemplateColumns,
+ minHeight,
};
const onMediaAltChange = ( newMediaAlt ) => {
setAttributes( { mediaAlt: newMediaAlt } );
@@ -290,6 +318,28 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
);
+ const dimensions = (
+
+
+ {
+ setAttributes( { minHeight: value } );
+ } }
+ >
+
+
+ );
+
const blockProps = useBlockProps( {
className: classNames,
style,
@@ -302,7 +352,10 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
return (
<>
- { mediaTextGeneralSettings }
+
+ { mediaTextGeneralSettings }
+ { dimensions }
+