From 3064bd91ab752b056b08e851968fd0e8c1a273e2 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 20 Apr 2021 18:09:18 +0400
Subject: [PATCH] Media & Text: Add media width control

---
 packages/block-library/src/media-text/edit.js | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 41134d2693c4a..4ffe51ef76821 100644
--- 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>
 	);