Media & Text: Add media width control (#31002)

WordPress · May 12, 2021 · 84ff6d4 · 84ff6d4
1 parent d3ba19b
commit 84ff6d4
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -22,6 +22,7 @@ import {
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
+	RangeControl,
 	TextareaControl,
 	ToggleControl,
 	ToolbarButton,
@@ -49,6 +50,7 @@ const TEMPLATE = [
 		},
 	],
 ];
+
 // this limits the resize to a safe zone to avoid making broken layouts
 const WIDTH_CONSTRAINT_PERCENTAGE = 15;
 const applyWidthConstraints = ( width ) =>
@@ -276,6 +278,15 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 					isResizable={ false }
 				/>
 			) }
+			{ mediaUrl && (
+				<RangeControl
+					label={ __( 'Media width' ) }
+					value={ temporaryMediaWidth || mediaWidth }
+					onChange={ commitWidthChange }
+					min={ WIDTH_CONSTRAINT_PERCENTAGE }
+					max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }
+				/>
+			) }
 		</PanelBody>
 	);