feat(media-text): add min-height control to media and text block

remove deprecation and add new unit function remove husky script
WordPress · Sep 7, 2021 · 6c9f583 · 6c9f583
1 parent 083e28d
commit 6c9f583
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 2 deletions.
diff --git a/.husky/_/husky.sh b/.husky/_/husky.sh
diff --git 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
@@ -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
@@ -9,13 +9,15 @@ 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,
 	BlockVerticalAlignmentControl,
 	__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 } ) {
 		</PanelBody>
 	);
 
+	const dimensions = (
+		<PanelBody title={ __( 'Dimensions' ) }>
+			<BaseControl
+				id={ inputId }
+				label={ __( 'Minimum height of Media & Text' ) }
+			>
+				<UnitControl
+					id={ inputId }
+					style={ { maxWidth: 80, marginTop: 8 } }
+					units={ CSS_UNITS }
+					value={ minHeight }
+					step="1"
+					isResetValueOnUnitChange
+					min={ 0 }
+					onChange={ ( value ) => {
+						setAttributes( { minHeight: value } );
+					} }
+				></UnitControl>
+			</BaseControl>
+		</PanelBody>
+	);
+
 	const blockProps = useBlockProps( {
 		className: classNames,
 		style,
@@ -302,7 +352,10 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 
 	return (
 		<>
-			<InspectorControls>{ mediaTextGeneralSettings }</InspectorControls>
+			<InspectorControls>
+				{ mediaTextGeneralSettings }
+				{ dimensions }
+			</InspectorControls>
 			<BlockControls group="block">
 				<BlockVerticalAlignmentControl
 					onChange={ onVerticalAlignmentChange }

diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js
@@ -264,6 +264,7 @@ class MediaTextEdit extends Component {
 			mediaWidth,
 			mediaType,
 			verticalAlignment,
+			minHeight,
 		} = attributes;
 		const { containerWidth, isMediaSelected } = this.state;
 
@@ -365,7 +366,7 @@ class MediaTextEdit extends Component {
 					) }
 				</BlockControls>
 				<View
-					style={ containerStyles }
+					style={ ( containerStyles, minHeight ) }
 					onLayout={ this.onLayoutChange }
 				>
 					<View

diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
@@ -33,6 +33,7 @@ export default function save( { attributes } ) {
 		href,
 		linkTarget,
 		rel,
+		minHeight,
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 	const newRel = isEmpty( rel ) ? undefined : rel;
@@ -86,6 +87,7 @@ export default function save( { attributes } ) {
 	}
 	const style = {
 		gridTemplateColumns,
+		minHeight,
 	};
 	return (
 		<div { ...useBlockProps.save( { className, style } ) }>