Make media-text respect stacking setting on native

packages/block-library/src/media-text/edit.native.js

@@ -18,6 +18,8 @@ import { Component } from '@wordpress/element';
 import {
 	Toolbar,
 } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import { withViewportMatch } from '@wordpress/viewport';
 
 /**
  * Internal dependencies
@@ -118,24 +120,26 @@ class MediaTextEdit extends Component {
 			attributes,
 			backgroundColor,
 			setAttributes,
+			isMobile,
 		} = this.props;
 		const {
 			isStackedOnMobile,
 			mediaPosition,
 			mediaWidth,
 			verticalAlignment,
 		} = attributes;
-		const temporaryMediaWidth = this.state.mediaWidth || mediaWidth;
+		const shouldStack = isStackedOnMobile && isMobile;
+		const temporaryMediaWidth = shouldStack ? 100 : ( this.state.mediaWidth || mediaWidth );
 		const widthString = `${ temporaryMediaWidth }%`;
 		const containerStyles = {
 			...styles[ 'wp-block-media-text' ],
 			...styles[ `is-vertically-aligned-${ verticalAlignment }` ],
 			...( mediaPosition === 'right' ? styles[ 'has-media-on-the-right' ] : {} ),
-			...( isStackedOnMobile ? styles[ 'is-stacked-on-mobile' ] : {} ),
-			...( isStackedOnMobile && mediaPosition === 'right' ? styles[ 'is-stacked-on-mobile.has-media-on-the-right' ] : {} ),
+			...( shouldStack ? styles[ 'is-stacked-on-mobile' ] : {} ),
+			...( shouldStack && mediaPosition === 'right' ? styles[ 'is-stacked-on-mobile.has-media-on-the-right' ] : {} ),
 			backgroundColor: backgroundColor.color,
 		};
-		const innerBlockWidth = 100 - temporaryMediaWidth;
+		const innerBlockWidth = shouldStack ? 100 : ( 100 - temporaryMediaWidth );
 		const innerBlockWidthString = `${ innerBlockWidth }%`;
 
 		const toolbarControls = [ {
@@ -183,4 +187,7 @@ class MediaTextEdit extends Component {
 	}
 }
 
-export default withColors( 'backgroundColor' )( MediaTextEdit );
+export default compose(
+	withColors( 'backgroundColor' ),
+	withViewportMatch( { isMobile: '< small' } )
+)( MediaTextEdit );

packages/viewport/src/index.js

@@ -1,17 +1,8 @@
-/**
- * External dependencies
- */
-import { reduce, forEach, debounce, mapValues } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { dispatch } from '@wordpress/data';
-
 /**
  * Internal dependencies
  */
 import './store';
+import addDimensionsEventListener from './listener';
 
 export { default as ifViewportMatches } from './if-viewport-matches';
 export { default as withViewportMatch } from './with-viewport-match';
@@ -42,38 +33,4 @@ const OPERATORS = {
 	'>=': 'min-width',
 };
 
-/**
- * Callback invoked when media query state should be updated. Is invoked a
- * maximum of one time per call stack.
- */
-const setIsMatching = debounce( () => {
-	const values = mapValues( queries, ( query ) => query.matches );
-	dispatch( 'core/viewport' ).setIsMatching( values );
-}, { leading: true } );
-
-/**
- * Hash of breakpoint names with generated MediaQueryList for corresponding
- * media query.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
- * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
- *
- * @type {Object<string,MediaQueryList>}
- */
-const queries = reduce( BREAKPOINTS, ( result, width, name ) => {
-	forEach( OPERATORS, ( condition, operator ) => {
-		const list = window.matchMedia( `(${ condition }: ${ width }px)` );
-		list.addListener( setIsMatching );
-
-		const key = [ operator, name ].join( ' ' );
-		result[ key ] = list;
-	} );
-
-	return result;
-}, {} );
-
-window.addEventListener( 'orientationchange', setIsMatching );
-
-// Set initial values
-setIsMatching();
-setIsMatching.flush();
+addDimensionsEventListener( BREAKPOINTS, OPERATORS );

packages/viewport/src/listener.js

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { reduce, forEach, debounce, mapValues } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { dispatch } from '@wordpress/data';
+
+const addDimensionsEventListener = ( breakpoints, operators ) => {
+	/**
+	 * Callback invoked when media query state should be updated. Is invoked a
+	 * maximum of one time per call stack.
+	 */
+	const setIsMatching = debounce( () => {
+		const values = mapValues( queries, ( query ) => query.matches );
+		dispatch( 'core/viewport' ).setIsMatching( values );
+	}, { leading: true } );
+
+	/**
+	 * Hash of breakpoint names with generated MediaQueryList for corresponding
+	 * media query.
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
+	 *
+	 * @type {Object<string,MediaQueryList>}
+	 */
+	const queries = reduce( breakpoints, ( result, width, name ) => {
+		forEach( operators, ( condition, operator ) => {
+			const list = window.matchMedia( `(${ condition }: ${ width }px)` );
+			list.addListener( setIsMatching );
+
+			const key = [ operator, name ].join( ' ' );
+			result[ key ] = list;
+		} );
+
+		return result;
+	}, {} );
+
+	window.addEventListener( 'orientationchange', setIsMatching );
+
+	// Set initial values
+	setIsMatching();
+	setIsMatching.flush();
+};
+
+export default addDimensionsEventListener;
+

packages/viewport/src/listener.native.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { forEach, reduce } from 'lodash';
+import { Dimensions } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { dispatch } from '@wordpress/data';
+
+const matchWidth = ( operator, breakpoint ) => {
+	const { width } = Dimensions.get( 'window' );
+	if ( operator === 'max-width' ) {
+		return width < breakpoint;
+	} else if ( operator === 'min-width' ) {
+		return width >= breakpoint;
+	}
+	throw new Error( `Unsupported viewport operator: ${ operator }` );
+};
+
+const addDimensionsEventListener = ( breakpoints, operators ) => {
+	const setIsMatching = () => {
+		const matches = reduce( breakpoints, ( result, width, name ) => {
+			forEach( operators, ( condition, operator ) => {
+				const key = [ operator, name ].join( ' ' );
+				result[ key ] = matchWidth( condition, width );
+			} );
+
+			return result;
+		}, {} );
+
+		dispatch( 'core/viewport' ).setIsMatching( matches );
+	};
+
+	Dimensions.addEventListener( 'change', setIsMatching );
+
+	// Set initial values
+	setIsMatching();
+};
+
+export default addDimensionsEventListener;