Change sizing mechanism to apply width directly to the media elements…

… (video/img)
WordPress · Aug 31, 2018 · 83f545d · 83f545d
1 parent a7a5b8d
commit 83f545d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 18 deletions.
diff --git a/packages/block-library/src/layout-half-media-text/edit.js b/packages/block-library/src/layout-half-media-text/edit.js
@@ -29,6 +29,8 @@ const ALLOWED_BLOCKS = [ 'core/button', 'core/paragraph', 'core/heading', 'core/
 const TEMPLATE = [
 	[ 'core/paragraph', { fontSize: 'large', placeholder: 'Content...' } ],
 ];
+const MAX_MEDIA_WIDTH = 900;
+export const DEFAULT_MEDIA_WIDTH = 350;
 
 class ImageEdit extends Component {
 	constructor() {
@@ -38,25 +40,32 @@ class ImageEdit extends Component {
 	}
 
 	onSelectMedia( media ) {
-		const { setAttributes } = this.props;
+		const { attributes, setAttributes } = this.props;
+		const { mediaWidth } = attributes;
+
+		const newMediaWidth = mediaWidth === DEFAULT_MEDIA_WIDTH ?
+			Math.min( media.width, MAX_MEDIA_WIDTH ) :
+			undefined;
+
 		setAttributes( {
 			mediaAlt: media.alt,
 			mediaId: media.id,
 			mediaType: media.type,
 			mediaUrl: media.url,
+			mediaWidth: newMediaWidth,
 		} );
 	}
 
 	renderMediaArea() {
 		const { attributes, setAttributes } = this.props;
-		const { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, width } = attributes;
+		const { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, mediaWidth } = attributes;
 		const handleClasses = {
 			left: 'block-library-half-media__resize-handler',
 			right: 'block-library-half-media__resize-handler',
 		};
 		const onResizeStop = ( event, direction, elt, delta ) => {
 			setAttributes( {
-				width: parseInt( width + delta.width, 10 ),
+				mediaWidth: parseInt( mediaWidth + delta.width, 10 ),
 			} );
 		};
 		const enablePositions = {
@@ -66,8 +75,9 @@ class ImageEdit extends Component {
 		return (
 			<ResizableBox
 				className="block-library-half-media__resizer"
-				size={ { width } }
-				minWidth="100"
+				size={ { width: mediaWidth } }
+				minWidth="10"
+				maxWidth={ MAX_MEDIA_WIDTH }
 				handleClasses={ handleClasses }
 				enable={ enablePositions }
 				onResizeStop={ onResizeStop }
@@ -84,8 +94,9 @@ class ImageEdit extends Component {
 
 	render() {
 		const { attributes, backgroundColor, setAttributes, setBackgroundColor } = this.props;
+		const { mediaPosition } = attributes;
 		const className = classnames( 'wp-block-half-media', {
-			'has-media-on-the-right': 'right' === attributes.mediaPosition,
+			'has-media-on-the-right': 'right' === mediaPosition,
 			[ backgroundColor.class ]: backgroundColor.class,
 		} );
 		const style = {
@@ -116,7 +127,7 @@ class ImageEdit extends Component {
 					<BlockAlignmentToolbar
 						controls={ MEDIA_POSITIONS }
 						value={ attributes.mediaPosition }
-						onChange={ ( mediaPosition ) => setAttributes( { mediaPosition } ) }
+						onChange={ ( newMediaPosition ) => setAttributes( { mediaPosition: newMediaPosition } ) }
 					/>
 				</BlockControls>
 			</Fragment>

diff --git a/packages/block-library/src/layout-half-media-text/editor.scss b/packages/block-library/src/layout-half-media-text/editor.scss
@@ -31,4 +31,5 @@ figure.block-library-half-media__media-container {
 .block-library-half-media__media-container img,
 .block-library-half-media__media-container video {
 	margin-bottom: -10px;
+	width: 100%;
 }
diff --git a/packages/block-library/src/layout-half-media-text/index.js b/packages/block-library/src/layout-half-media-text/index.js
@@ -16,7 +16,7 @@ import {
 /**
  * Internal dependencies
  */
-import edit from './edit';
+import { default as edit, DEFAULT_MEDIA_WIDTH } from './edit';
 
 export const name = 'core/half-media';
 
@@ -41,7 +41,7 @@ export const settings = {
 		mediaAlt: {
 			type: 'string',
 			source: 'attribute',
-			selector: 'img',
+			selector: 'figure img',
 			attribute: 'alt',
 			default: '',
 		},
@@ -55,15 +55,18 @@ export const settings = {
 		mediaUrl: {
 			type: 'string',
 			source: 'attribute',
-			selector: 'video,img',
+			selector: 'figure video,figure img',
 			attribute: 'src',
 		},
 		mediaType: {
 			type: 'string',
 		},
-		width: {
-			type: 'number',
-			default: 300,
+		mediaWidth: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure video,figure img',
+			attribute: 'width',
+			default: DEFAULT_MEDIA_WIDTH,
 		},
 	},
 
@@ -81,17 +84,17 @@ export const settings = {
 			mediaPosition,
 			mediaType,
 			mediaUrl,
-			width,
+			mediaWidth,
 		} = attributes;
 		const mediaTypeRenders = {
 			image: () => {
 				return (
-					<img src={ mediaUrl } alt={ mediaAlt } />
+					<img src={ mediaUrl } alt={ mediaAlt } width={ mediaWidth } />
 				);
 			},
 			video: () => {
 				return (
-					<video controls src={ mediaUrl } />
+					<video controls src={ mediaUrl } width={ mediaWidth } />
 				);
 			},
 		};
@@ -107,7 +110,7 @@ export const settings = {
 		};
 		return (
 			<div className={ className } style={ style }>
-				<figure className="wp-block-half-media__media" style={ { width } }>
+				<figure className="wp-block-half-media__media" >
 					{ ( mediaTypeRenders[ mediaType ] || noop )() }
 				</figure>
 				<div className="wp-block-half-media__content">

diff --git a/packages/block-library/src/layout-half-media-text/style.scss b/packages/block-library/src/layout-half-media-text/style.scss
@@ -23,5 +23,5 @@
 
 .wp-block-half-media > figure > img,
 .wp-block-half-media > figure > video {
-	max-width: 100%;
+	max-width: unset;
 }