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