Adjust ReadableContentView when parent is full width

WordPress · Sep 9, 2020 · d248738 · d248738
1 parent 9b8531a
commit d248738
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 6 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
@@ -98,6 +98,8 @@ export class BlockListItem extends Component {
 			shouldShowInsertionPointAfter,
 			contentResizeMode,
 			shouldShowInnerBlockAppender,
+			parentBlockAlignment,
+			blockName,
 			...restProps
 		} = this.props;
 		const readableContentViewStyle =
@@ -106,7 +108,9 @@ export class BlockListItem extends Component {
 		return (
 			<ReadableContentView
 				align={ blockAlignment }
+				parentBlockAlignment={ parentBlockAlignment }
 				style={ readableContentViewStyle }
+				blockName={ blockName }
 			>
 				<View
 					style={ this.getContentStyles( readableContentViewStyle ) }
@@ -170,6 +174,7 @@ export default compose( [
 
 			const block = __unstableGetBlockWithoutInnerBlocks( clientId );
 			const { attributes } = block || {};
+			const blockName = block.name || '';
 			const { align } = attributes || {};
 			const parents = getBlockParents( clientId, true );
 			const hasParents = !! parents.length;
@@ -186,6 +191,7 @@ export default compose( [
 				hasParents,
 				blockAlignment: align,
 				parentBlockAlignment,
+				blockName,
 			};
 		}
 	),

diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js
@@ -19,6 +19,7 @@ import {
 	PanelBody,
 	RangeControl,
 	FooterMessageControl,
+	ALIGNMENT_BREAKPOINTS,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 /**
@@ -119,7 +120,8 @@ function ColumnEdit( {
 						getContainerWidth( newParentWidth )
 			  );
 
-	const finalWidth = hasWidth && { width: newColumnWidth };
+	const finalWidth = parentWidth > ALIGNMENT_BREAKPOINTS.medium &&
+		hasWidth && { width: newColumnWidth };
 
 	if ( ! isSelected && ! hasChildren ) {
 		return (

diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
@@ -104,12 +104,13 @@ function ColumnsEditContainer( {
 	}, [ width ] );
 
 	const contentStyle = useMemo( () => {
-		const columnBaseWidth = width / columnsInRow;
+		const minWidth = 2 * 8 + width;
+		const columnBaseWidth = minWidth / columnsInRow;
 
 		let columnWidth = columnBaseWidth;
 		if ( columnsInRow > 1 ) {
-			const margins = columnsInRow * 2 * 16;
-			columnWidth = ( width - margins ) / columnsInRow;
+			const margins = columnsInRow * 2 * styles.columnMargin.marginLeft;
+			columnWidth = ( minWidth - margins ) / columnsInRow;
 		}
 		return { width: columnWidth };
 	}, [ width, columnsInRow ] );

diff --git a/packages/components/src/mobile/readable-content-view/index.native.js b/packages/components/src/mobile/readable-content-view/index.native.js
@@ -15,11 +15,20 @@ import styles from './style.scss';
 
 const PIXEL_RATIO = 2;
 
-const ReadableContentView = ( { align, reversed, children, style } ) => {
+const ReadableContentView = ( {
+	align,
+	reversed,
+	children,
+	style,
+	parentBlockAlignment,
+	blockName,
+} ) => {
 	const { width, height } = Dimensions.get( 'window' );
 	const [ windowWidth, setWindowWidth ] = useState( width );
 	const [ windowRatio, setWindowRatio ] = useState( width / height );
 
+	const isColumn = blockName === 'core/column';
+
 	function onDimensionsChange( { window } ) {
 		setWindowWidth( window.width );
 		setWindowRatio( window.width / window.height );
@@ -66,6 +75,7 @@ const ReadableContentView = ( { align, reversed, children, style } ) => {
 						: styles.centeredContent,
 					style,
 					styles[ align ],
+					parentBlockAlignment === 'full' && isColumn && styles.full,
 					align === WIDE_ALIGNMENTS.alignments.wide &&
 						getWideStyles(),
 				] }

diff --git a/packages/components/src/mobile/readable-content-view/style.native.scss b/packages/components/src/mobile/readable-content-view/style.native.scss
@@ -4,7 +4,7 @@
 
 .centeredContent {
 	width: 100%;
-	// max-width: 580;
+	max-width: 580;
 }
 
 .reversedCenteredContent {