From 6ecfbc6420766bda17117db8c472ccd7ccb8ecff Mon Sep 17 00:00:00 2001 From: roo2 Date: Wed, 16 Dec 2020 12:46:14 +1000 Subject: [PATCH 01/10] split display device type and rendering device type to support mobile devices --- blocks/layout-grid/src/grid/edit.js | 91 ++++++++++++++++++++--------- 1 file changed, 64 insertions(+), 27 deletions(-) diff --git a/blocks/layout-grid/src/grid/edit.js b/blocks/layout-grid/src/grid/edit.js index a1a0ec1c..76cd0d16 100644 --- a/blocks/layout-grid/src/grid/edit.js +++ b/blocks/layout-grid/src/grid/edit.js @@ -58,6 +58,21 @@ import LayoutGrid from './layout-grid'; const ALLOWED_BLOCKS = [ 'jetpack/layout-grid-column' ]; const MINIMUM_RESIZE_SIZE = 50; // Empirically determined to be a good size +/** + * get the width of the editor, taking into account preview mode. + */ +function getEditorDeviceWidth() { + const visualEditorEl = document.querySelector('.edit-post-visual-editor'); + const width = visualEditorEl ? visualEditorEl.offsetWidth : window.innerWidth; + if ( width < 600 ) { + return 'Mobile'; + } else if ( width < 1080 ) { + return 'Tablet'; + } else { + return 'Desktop'; + } +} + // Note this uses __experimentalGetPreviewDeviceType, but has a fallback for older versions of Gutenberg. // The fallback will be removed once WordPress contains supports for __experimentalGetPreviewDeviceType class Edit extends Component { @@ -66,8 +81,10 @@ class Edit extends Component { this.overlayRef = createRef(); this.state = { - selectedDevice: getLayouts()[ 0 ].value, + selectedPreviewDeviceType: getLayouts()[ 0 ].value, + renderDeviceType: getEditorDeviceWidth(), }; + window.addEventListener( 'resize', this.onResizeWindow.bind( this ) ); } /* @@ -88,23 +105,42 @@ class Edit extends Component { this.props.updateColumns( this.props.columns, columns, columnValues ); }; - getDeviceType() { - return this.props.deviceType - ? this.props.deviceType - : this.state.selectedDevice; + getPreviewDeviceType() { + return this.props.previewDeviceType + ? this.props.previewDeviceType + : this.state.selectedPreviewDeviceType; } - setDeviceType = ( deviceType ) => { - if ( this.props.deviceType ) { - this.props.setDeviceType( deviceType ); + setPreviewDeviceType = ( previewDeviceType ) => { + if ( this.props.previewDeviceType ) { + this.props.setPreviewDeviceType( previewDeviceType ); } else { - this.setState( { selectedDevice: deviceType } ); + this.setState( { selectedPreviewDeviceType: previewDeviceType } ); } }; + updateRenderDeviceType = () => { + const renderDeviceType = getEditorDeviceWidth(); + this.setState( { + renderDeviceType: renderDeviceType + } ); + + }; + + componentDidUpdate = ( prevProps ) => { + // After changing the preview mode, recompute the number of columns to render + if ( prevProps.previewDeviceType !== this.props.previewDeviceType ) { + this.updateRenderDeviceType(); + } + }; + + onResizeWindow = () => { + this.updateRenderDeviceType(); + }; + onResize = ( column, adjustment ) => { const { attributes, columns } = this.props; - const grid = new LayoutGrid( attributes, this.getDeviceType(), columns ); + const grid = new LayoutGrid( attributes, this.state.renderDeviceType, columns ); const adjustedGrid = grid.getAdjustedGrid( column, adjustment ); if ( adjustedGrid ) { @@ -197,24 +233,25 @@ class Edit extends Component { updateAlignment, columnAttributes, } = this.props; - const deviceType = this.getDeviceType(); + const renderDeviceType = this.state.renderDeviceType; + const selectedPreviewDevice = this.getPreviewDeviceType(); const extra = getAsEditorCSS( - deviceType, + renderDeviceType, columns, attributes, columnAttributes ); const { gutterSize, addGutterEnds, verticalAlignment } = attributes; - const layoutGrid = new LayoutGrid( attributes, deviceType, columns ); + const layoutGrid = new LayoutGrid( attributes, renderDeviceType, columns ); const classes = classnames( removeGridClasses( className ), extra, { - 'wp-block-jetpack-layout-tablet': deviceType === 'Tablet', - 'wp-block-jetpack-layout-desktop': deviceType === 'Desktop', - 'wp-block-jetpack-layout-mobile': deviceType === 'Mobile', + 'wp-block-jetpack-layout-tablet': renderDeviceType === 'Tablet', + 'wp-block-jetpack-layout-desktop': renderDeviceType === 'Desktop', + 'wp-block-jetpack-layout-mobile': renderDeviceType === 'Mobile', 'wp-block-jetpack-layout-resizable': this.canResizeBreakpoint( - deviceType + renderDeviceType ), [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, }, @@ -263,12 +300,12 @@ class Edit extends Component {
- { times( getGridWidth( deviceType ) ).map( ( item ) =>
) } + { times( getGridWidth( renderDeviceType ) ).map( ( item ) =>
) }
( ) ) } - { this.renderDeviceSettings( columns, deviceType, attributes ) } + { this.renderDeviceSettings( columns, selectedPreviewDevice, attributes ) } @@ -360,7 +397,7 @@ class Edit extends Component { ) ) } - { this.renderDeviceSettings( columns, selectedPreviewDevice, attributes ) } + { this.renderDeviceSettings( + columns, + selectedPreviewDevice, + attributes + ) } @@ -355,16 +465,23 @@ class Edit extends Component { setAttributes( { gutterSize: newValue, addGutterEnds: newValue === 'none' ? false : addGutterEnds } ) } + onChange={ ( newValue ) => + setAttributes( { + gutterSize: newValue, + addGutterEnds: + newValue === 'none' + ? false + : addGutterEnds, + } ) + } options={ getGutterValues() } /> { gutterSize === 'none' ? ( - - { toggleControl } - - ) : toggleControl } - + { toggleControl } + ) : ( + toggleControl + ) } @@ -381,7 +498,13 @@ class Edit extends Component {