From a95d5de3bcb6afaa9b50a672f89cae4802575571 Mon Sep 17 00:00:00 2001
From: Marek Hrabe <marekhrabe@me.com>
Date: Thu, 16 May 2019 21:42:11 +0200
Subject: [PATCH] Media & Text: Add width constraints (#14951)

* add width constraints

* make sure the text wraps the same accross browsers (fixes FF bug)

* use constant for width constraint
---
 packages/block-library/src/media-text/edit.js     | 7 +++++--
 packages/block-library/src/media-text/editor.scss | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index e4f843bcc24bf4..f6594b7a71a591 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -37,6 +37,9 @@ const ALLOWED_BLOCKS = [ 'core/button', 'core/paragraph', 'core/heading', 'core/
 const TEMPLATE = [
 	[ 'core/paragraph', { fontSize: 'large', placeholder: _x( 'Content…', 'content placeholder' ) } ],
 ];
+// this limits the resize to a safe zone to avoid making broken layouts
+const WIDTH_CONSTRAINT_PERCENTAGE = 15;
+const applyWidthConstraints = ( width ) => Math.max( WIDTH_CONSTRAINT_PERCENTAGE, Math.min( width, 100 - WIDTH_CONSTRAINT_PERCENTAGE ) );
 
 class MediaTextEdit extends Component {
 	constructor() {
@@ -85,7 +88,7 @@ class MediaTextEdit extends Component {
 
 	onWidthChange( width ) {
 		this.setState( {
-			mediaWidth: width,
+			mediaWidth: applyWidthConstraints( width ),
 		} );
 	}
 
@@ -93,7 +96,7 @@ class MediaTextEdit extends Component {
 		const { setAttributes } = this.props;
 
 		setAttributes( {
-			mediaWidth: width,
+			mediaWidth: applyWidthConstraints( width ),
 		} );
 		this.setState( {
 			mediaWidth: null,
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index 3d0ad0361bd947..fe6a552526971b 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -3,6 +3,7 @@
 		"media-text-media media-text-content"
 		"resizer resizer";
 	align-items: center;
+	word-break: break-all;
 }
 
 .wp-block-media-text.has-media-on-the-right {