Media & Text: Add media width control

WordPress · Apr 20, 2021 · 3064bd9 · 3064bd9
1 parent b3fe0be
commit 3064bd9
Showing 1 changed file with 26 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,21 @@ const TEMPLATE = [
 		},
 	],
 ];
+
+const WIDTH_SCALE_MARKS = [
+	{
+		value: 25,
+		label: '25%',
+	},
+	{
+		value: 50,
+		label: '50%',
+	},
+	{
+		value: 75,
+		label: '75%',
+	},
+];
 // this limits the resize to a safe zone to avoid making broken layouts
 const WIDTH_CONSTRAINT_PERCENTAGE = 15;
 const applyWidthConstraints = ( width ) =>
@@ -276,6 +292,16 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 					isResizable={ false }
 				/>
 			) }
+			{ mediaUrl && (
+				<RangeControl
+					label={ __( 'Media width' ) }
+					value={ temporaryMediaWidth || mediaWidth }
+					marks={ WIDTH_SCALE_MARKS }
+					onChange={ commitWidthChange }
+					min={ WIDTH_CONSTRAINT_PERCENTAGE }
+					max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }
+				/>
+			) }
 		</PanelBody>
 	);