From 0bcd21b837e38b2716c1526d54a83905eeb64926 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Tue, 20 Apr 2021 18:09:18 +0400
Subject: [PATCH 1/2] 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>
 	);
 

From 690b3f983229f42dd62fc9af37dbd1e4c8e6676f Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 21 Apr 2021 13:55:50 +0400
Subject: [PATCH 2/2] Removes RangeControls marks

---
 packages/block-library/src/media-text/edit.js | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 4ffe51ef76821..5ecc79f02cd64 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -51,20 +51,6 @@ 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 ) =>
@@ -296,7 +282,6 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 				<RangeControl
 					label={ __( 'Media width' ) }
 					value={ temporaryMediaWidth || mediaWidth }
-					marks={ WIDTH_SCALE_MARKS }
 					onChange={ commitWidthChange }
 					min={ WIDTH_CONSTRAINT_PERCENTAGE }
 					max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }