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
WordPress · May 16, 2019 · a95d5de · a95d5de
1 parent ed630e8
commit a95d5de
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git 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,15 +88,15 @@ class MediaTextEdit extends Component {
 
 	onWidthChange( width ) {
 		this.setState( {
-			mediaWidth: width,
+			mediaWidth: applyWidthConstraints( width ),
 		} );
 	}
 
 	commitWidthChange( width ) {
 		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
@@ -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 {