From 368bcd4cc12680ec98c4af1c0455e6460e97a444 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 21 Jan 2020 12:43:55 +0100 Subject: [PATCH 1/2] Correct isMobile condition in nested Media&Text --- .../src/media-text/edit.native.js | 27 ++++++++++++++++--- packages/viewport/README.md | 12 +++++++++ packages/viewport/src/index.js | 2 +- 3 files changed, 36 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js index 5645e40bed1548..7f4f46f9c82e7e 100644 --- a/packages/block-library/src/media-text/edit.native.js +++ b/packages/block-library/src/media-text/edit.native.js @@ -20,7 +20,7 @@ import { } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { withViewportMatch } from '@wordpress/viewport'; +import { BREAKPOINTS } from '@wordpress/viewport'; /** * Internal dependencies @@ -47,8 +47,11 @@ class MediaTextEdit extends Component { this.onMediaUpdate = this.onMediaUpdate.bind( this ); this.onWidthChange = this.onWidthChange.bind( this ); this.commitWidthChange = this.commitWidthChange.bind( this ); + this.onLayoutChange = this.onLayoutChange.bind( this ); + this.state = { mediaWidth: null, + containerWidth: 0, }; } @@ -111,6 +114,19 @@ class MediaTextEdit extends Component { } ); } + onLayoutChange( { nativeEvent } ) { + const { width } = nativeEvent.layout; + const { containerWidth } = this.state; + + if ( containerWidth === width ) { + return null; + } + + this.setState( { + containerWidth: width, + } ); + } + renderMediaArea() { const { attributes, isSelected } = this.props; const { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, mediaWidth, imageFill, focalPoint } = attributes; @@ -132,7 +148,6 @@ class MediaTextEdit extends Component { attributes, backgroundColor, setAttributes, - isMobile, isSelected, isParentSelected, isAncestorSelected, @@ -143,6 +158,11 @@ class MediaTextEdit extends Component { mediaWidth, verticalAlignment, } = attributes; + const { + containerWidth, + } = this.state; + + const isMobile = containerWidth < BREAKPOINTS.mobile; const shouldStack = isStackedOnMobile && isMobile; const temporaryMediaWidth = shouldStack ? 100 : ( this.state.mediaWidth || mediaWidth ); const widthString = `${ temporaryMediaWidth }%`; @@ -195,7 +215,7 @@ class MediaTextEdit extends Component { isCollapsed={ false } /> - + { this.renderMediaArea() } @@ -214,7 +234,6 @@ class MediaTextEdit extends Component { export default compose( withColors( 'backgroundColor' ), - withViewportMatch( { isMobile: '< small' } ), withSelect( ( select, { clientId } ) => { const { getSelectedBlockClientId, diff --git a/packages/viewport/README.md b/packages/viewport/README.md index 320f46daf8d431..9340cca71231eb 100644 --- a/packages/viewport/README.md +++ b/packages/viewport/README.md @@ -49,6 +49,18 @@ This package provides a set of HOCs to author components whose behavior should v +# **BREAKPOINTS** + +Hash of breakpoint names with pixel width at which it becomes effective. + +_Related_ + +- \_breakpoints.scss + +_Type_ + +- `Object` + # **ifViewportMatches** Higher-order component creator, creating a new component which renders if diff --git a/packages/viewport/src/index.js b/packages/viewport/src/index.js index b2faa967569480..77fb6718afe98c 100644 --- a/packages/viewport/src/index.js +++ b/packages/viewport/src/index.js @@ -14,7 +14,7 @@ export { default as withViewportMatch } from './with-viewport-match'; * * @type {Object} */ -const BREAKPOINTS = { +export const BREAKPOINTS = { huge: 1440, wide: 1280, large: 960, From 6ab0a98df011ff23e75ed396526796c6eac2bb8b Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 21 Jan 2020 15:47:30 +0100 Subject: [PATCH 2/2] Do not export BREAKPOINTS --- packages/block-library/src/media-text/edit.native.js | 4 +++- packages/viewport/README.md | 12 ------------ packages/viewport/src/index.js | 2 +- 3 files changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js index 7f4f46f9c82e7e..4dce710341d206 100644 --- a/packages/block-library/src/media-text/edit.native.js +++ b/packages/block-library/src/media-text/edit.native.js @@ -20,7 +20,6 @@ import { } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { BREAKPOINTS } from '@wordpress/viewport'; /** * Internal dependencies @@ -37,6 +36,9 @@ const TEMPLATE = [ ]; // this limits the resize to a safe zone to avoid making broken layouts const WIDTH_CONSTRAINT_PERCENTAGE = 15; +const BREAKPOINTS = { + mobile: 480, +}; const applyWidthConstraints = ( width ) => Math.max( WIDTH_CONSTRAINT_PERCENTAGE, Math.min( width, 100 - WIDTH_CONSTRAINT_PERCENTAGE ) ); class MediaTextEdit extends Component { diff --git a/packages/viewport/README.md b/packages/viewport/README.md index 9340cca71231eb..320f46daf8d431 100644 --- a/packages/viewport/README.md +++ b/packages/viewport/README.md @@ -49,18 +49,6 @@ This package provides a set of HOCs to author components whose behavior should v -# **BREAKPOINTS** - -Hash of breakpoint names with pixel width at which it becomes effective. - -_Related_ - -- \_breakpoints.scss - -_Type_ - -- `Object` - # **ifViewportMatches** Higher-order component creator, creating a new component which renders if diff --git a/packages/viewport/src/index.js b/packages/viewport/src/index.js index 77fb6718afe98c..b2faa967569480 100644 --- a/packages/viewport/src/index.js +++ b/packages/viewport/src/index.js @@ -14,7 +14,7 @@ export { default as withViewportMatch } from './with-viewport-match'; * * @type {Object} */ -export const BREAKPOINTS = { +const BREAKPOINTS = { huge: 1440, wide: 1280, large: 960,