[Mobile] Add support for full-width/wide alignment options (#24598)

* Mobile - Full / Wide alignment support * Mobile - Full / Width alignment support: wide setting improvements * Mobile - Full / Wide alignment support - Custom align native hook to filter unsupported blocks * Mobile - Full / Wide alignment support - margin improvements and fixes * Mobile - BlockListItem - Remove unused selector * Mobile - Full / Wide alignments - props order * Mobile - Full / wide alignment - use declared const * Mobile - Full / Wide alignment - Remove right / left support * Mobile - Full width / wide alignment - Add Imade block support and Group appender fix * Mobile - Full width / wide alignment - Cover and group improvements * Mobile - Full width / wide alignments - Improve margins * Mobile - Full width / wide alignment options - Fix appender and selected border for full width blocks * Mobile - Full width / wide alignment - Update margins * Mobile - Wide / full width alignments - Margin fixes and improvements * Mobile - Full width / wide alignment fix margins and max width * Mobile - Remove unused style * Mobile - Full-width / wide alignment options - Restore cover paddings for inner blocks * Mobile - Full width / wide alignments update breakpoints * Mobile - Full-width / Wide alignments - Improve max width and margins for smaller screens * Mobile - Full-width / Wide alignments - Remove unused variable * Mobile - Full-width / Wide alignments - New utils with alignments and breakpoints * Mobile - Full-width fix for Android devices window width * React Native Editor - Update changelog
WordPress · Sep 4, 2020 · 8ba0a42 · 8ba0a42
1 parent b1c8026
commit 8ba0a42
Show file tree

Hide file tree

Showing 21 changed files with 383 additions and 32 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.js b/packages/block-editor/src/components/block-list/block-list-item.native.js
@@ -9,21 +9,89 @@ import { View } from 'react-native';
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { ReadableContentView } from '@wordpress/components';
+import {
+	ReadableContentView,
+	WIDE_ALIGNMENTS,
+	ALIGNMENT_BREAKPOINTS,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import BlockListBlock from './block';
 import BlockInsertionPoint from './insertion-point';
+import styles from './block-list-item.native.scss';
 
 const stretchStyle = {
 	flex: 1,
 };
 
 export class BlockListItem extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onLayout = this.onLayout.bind( this );
+
+		this.state = {
+			blockWidth: 0,
+		};
+	}
+
+	onLayout( { nativeEvent } ) {
+		const { layout } = nativeEvent;
+		const { blockWidth } = this.state;
+
+		if ( blockWidth !== layout.width ) {
+			this.setState( { blockWidth: layout.width } );
+		}
+	}
+
+	getMarginHorizontal() {
+		const {
+			blockAlignment,
+			marginHorizontal,
+			parentBlockAlignment,
+		} = this.props;
+		const { blockWidth } = this.state;
+
+		if ( blockAlignment === WIDE_ALIGNMENTS.alignments.full ) {
+			return 0;
+		}
+
+		if ( blockAlignment === WIDE_ALIGNMENTS.alignments.wide ) {
+			return marginHorizontal;
+		}
+
+		if (
+			parentBlockAlignment === WIDE_ALIGNMENTS.alignments.full &&
+			blockWidth <= ALIGNMENT_BREAKPOINTS.medium
+		) {
+			return marginHorizontal * 2;
+		}
+
+		return marginHorizontal;
+	}
+
+	getContentStyles( readableContentViewStyle ) {
+		const { blockAlignment, hasParents } = this.props;
+		const isFullWidth = blockAlignment === WIDE_ALIGNMENTS.alignments.full;
+
+		return [
+			readableContentViewStyle,
+			isFullWidth &&
+				! hasParents && {
+					width: styles.fullAlignment.width,
+				},
+			isFullWidth &&
+				hasParents && {
+					paddingHorizontal: styles.fullAlignmentPadding.paddingLeft,
+				},
+		];
+	}
+
 	render() {
 		const {
+			blockAlignment,
 			clientId,
 			isReadOnly,
 			shouldShowInsertionPointBefore,
@@ -34,11 +102,16 @@ export class BlockListItem extends Component {
 		} = this.props;
 		const readableContentViewStyle =
 			contentResizeMode === 'stretch' && stretchStyle;
+
 		return (
-			<ReadableContentView style={ readableContentViewStyle }>
+			<ReadableContentView
+				align={ blockAlignment }
+				style={ readableContentViewStyle }
+			>
 				<View
-					style={ readableContentViewStyle }
+					style={ this.getContentStyles( readableContentViewStyle ) }
 					pointerEvents={ isReadOnly ? 'box-only' : 'auto' }
+					onLayout={ this.onLayout }
 				>
 					{ shouldShowInsertionPointBefore && (
 						<BlockInsertionPoint />
@@ -48,6 +121,7 @@ export class BlockListItem extends Component {
 						showTitle={ false }
 						clientId={ clientId }
 						{ ...restProps }
+						marginHorizontal={ this.getMarginHorizontal() }
 					/>
 					{ ! shouldShowInnerBlockAppender() &&
 						shouldShowInsertionPointAfter && (
@@ -67,6 +141,8 @@ export default compose( [
 				getBlockInsertionPoint,
 				isBlockInsertionPointVisible,
 				getSettings,
+				getBlockParents,
+				__unstableGetBlockWithoutInnerBlocks,
 			} = select( 'core/block-editor' );
 
 			const blockClientIds = getBlockOrder( rootClientId );
@@ -92,10 +168,24 @@ export default compose( [
 
 			const isReadOnly = getSettings().readOnly;
 
+			const block = __unstableGetBlockWithoutInnerBlocks( clientId );
+			const { attributes } = block || {};
+			const { align } = attributes || {};
+			const parents = getBlockParents( clientId, true );
+			const hasParents = !! parents.length;
+			const parentBlock = hasParents
+				? __unstableGetBlockWithoutInnerBlocks( parents[ 0 ] )
+				: {};
+			const { align: parentBlockAlignment } =
+				parentBlock?.attributes || {};
+
 			return {
 				shouldShowInsertionPointBefore,
 				shouldShowInsertionPointAfter,
 				isReadOnly,
+				hasParents,
+				blockAlignment: align,
+				parentBlockAlignment,
 			};
 		}
 	),

diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.scss b/packages/block-editor/src/components/block-list/block-list-item.native.scss
@@ -0,0 +1,12 @@
+.stretch {
+	flex: 1;
+}
+
+.fullAlignment {
+	margin-left: 0;
+	width: 100%;
+}
+
+.fullAlignmentPadding {
+	padding: $block-edge-to-content;
+}
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableWithoutFeedback, Dimensions } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { Component, createRef } from '@wordpress/element';
-import { GlobalStylesContext } from '@wordpress/components';
+import { GlobalStylesContext, WIDE_ALIGNMENTS } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import {
@@ -136,14 +136,16 @@ class BlockListBlock extends Component {
 		}
 
 		const { blockWidth } = this.state;
-
+		const { align } = attributes;
 		const accessibilityLabel = getAccessibleBlockLabel(
 			blockType,
 			attributes,
 			order + 1
 		);
 
 		const accessible = ! ( isSelected || isInnerBlockSelected );
+		const isFullWidth = align === WIDE_ALIGNMENTS.alignments.full;
+		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
 
 		return (
 			<TouchableWithoutFeedback
@@ -167,6 +169,9 @@ class BlockListBlock extends Component {
 							<View
 								style={ [
 									styles.solidBorder,
+									isFullWidth &&
+										blockWidth < screenWidth &&
+										styles.borderFullWidth,
 									getStylesFromColorScheme(
 										styles.solidBorderColor,
 										styles.solidBorderColorDark
@@ -206,6 +211,7 @@ class BlockListBlock extends Component {
 									}
 									blockWidth={ blockWidth }
 									anchorNodeRef={ this.anchorNodeRef.current }
+									isFullWidth={ isFullWidth }
 								/>
 							) }
 						</View>

diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
@@ -18,6 +18,11 @@
 	border-color: $gray-70;
 }
 
+.borderFullWidth {
+	left: 0;
+	right: 0;
+}
+
 .dimmed {
 	opacity: $dimmed-opacity;
 }
@@ -67,3 +72,7 @@
 	border-radius: 2px;
 	border-style: dashed;
 }
+
+.fullWidthPadding {
+	padding: $block-selected-to-content;
+}
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -14,6 +14,7 @@ import { createBlock } from '@wordpress/blocks';
 import {
 	KeyboardAwareFlatList,
 	ReadableContentView,
+	WIDE_ALIGNMENTS,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -387,7 +388,13 @@ class EmptyListComponent extends Component {
 
 		return (
 			<View style={ styles.defaultAppender }>
-				<ReadableContentView>
+				<ReadableContentView
+					align={
+						renderAppender
+							? WIDE_ALIGNMENTS.alignments.full
+							: undefined
+					}
+				>
 					<BlockListAppender
 						rootClientId={ rootClientId }
 						renderAppender={ renderAppender }

diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
@@ -31,13 +31,16 @@ const BlockMobileToolbar = ( {
 	isStackedHorizontally,
 	blockWidth,
 	anchorNodeRef,
+	isFullWidth,
 } ) => {
 	const [ fillsLength, setFillsLength ] = useState( null );
 	const wrapBlockSettings = blockWidth < BREAKPOINTS.wrapSettings;
 	const wrapBlockMover = blockWidth <= BREAKPOINTS.wrapMover;
 
 	return (
-		<View style={ styles.toolbar }>
+		<View
+			style={ [ styles.toolbar, isFullWidth && styles.toolbarFullWidth ] }
+		>
 			{ ! wrapBlockMover && (
 				<BlockMover
 					clientIds={ [ clientId ] }

diff --git a/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss b/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss
@@ -6,6 +6,11 @@
 	margin-right: 2px;
 }
 
+.toolbarFullWidth {
+	padding-left: $block-edge-to-content / 2;
+	padding-right: $block-edge-to-content / 2;
+}
+
 .spacer {
 	flex-grow: 1;
 }
diff --git a/packages/block-editor/src/hooks/align.native.js b/packages/block-editor/src/hooks/align.native.js
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { without } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { WIDE_ALIGNMENTS } from '@wordpress/components';
+
+const ALIGNMENTS = [ 'left', 'center', 'right' ];
+
+export { AlignmentHookSettingsProvider } from './align.js';
+
+// Used to filter out blocks that don't support wide/full alignment on mobile
+addFilter(
+	'blocks.registerBlockType',
+	'core/react-native-editor/align',
+	( settings, name ) => {
+		if (
+			! WIDE_ALIGNMENTS.supportedBlocks.includes( name ) &&
+			hasBlockSupport( settings, 'align' )
+		) {
+			const blockAlign = settings.supports.align;
+
+			settings.supports = {
+				...settings.supports,
+				align: Array.isArray( blockAlign )
+					? without(
+							blockAlign,
+							...Object.values( WIDE_ALIGNMENTS.alignments )
+					  )
+					: blockAlign,
+				alignWide: false,
+			};
+			settings.attributes = {
+				...settings.attributes,
+				align: {
+					type: 'string',
+					// Allow for '' since it is used by updateAlignment function
+					// in withToolbarControls for special cases with defined default values.
+					enum: [ ...ALIGNMENTS, '' ],
+				},
+			};
+		}
+
+		return settings;
+	}
+);
diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
@@ -1,10 +1,12 @@
 /**
  * Internal dependencies
  */
-export { AlignmentHookSettingsProvider } from './align';
+import { AlignmentHookSettingsProvider } from './align';
 import './anchor';
 import './custom-class-name';
 import './generated-class-name';
 import './style';
 import './color';
 import './font-size';
+
+export { AlignmentHookSettingsProvider };
diff --git a/packages/block-editor/src/store/defaults.native.js b/packages/block-editor/src/store/defaults.native.js
@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import {
+	PREFERENCES_DEFAULTS,
+	SETTINGS_DEFAULTS as SETTINGS,
+} from './defaults.js';
+
+const SETTINGS_DEFAULTS = {
+	...SETTINGS,
+	alignWide: true,
+};
+
+export { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS };
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -410,6 +410,7 @@ const Cover = ( {
 							onSelectMediaUploadOption={ onSelectMedia }
 							openMediaOptions={ openMediaOptionsRef.current }
 							url={ url }
+							width={ styles.image.width }
 						/>
 					</View>
 				) }

diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss
@@ -136,6 +136,10 @@
 	z-index: 4;
 }
 
+.image {
+	width: 100%;
+}
+
 .colorPaletteWrapper {
 	min-height: 50px;
 }