Add comments, refactor variables

WordPress · Sep 25, 2020 · 451dc09 · 451dc09
1 parent fa7548d
commit 451dc09
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 50 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
@@ -52,31 +52,29 @@ export class BlockListItem extends Component {
 			marginHorizontal,
 			parentBlockAlignment,
 			hasParents,
-			name,
-			isInnerBlockSelected,
+			blockName,
+			isColumnsDescendantSelected,
 		} = this.props;
 		const { blockWidth } = this.state;
 		const isFullWidth = blockAlignment === WIDE_ALIGNMENTS.alignments.full;
 		const isWideWidth = blockAlignment === WIDE_ALIGNMENTS.alignments.wide;
 		const isParentFullWidth =
 			parentBlockAlignment === WIDE_ALIGNMENTS.alignments.full;
-		const isColumnsRelated = name.includes( 'core/column' );
+		const isColumnsRelated = blockName.includes( 'core/column' );
 
 		if ( isFullWidth ) {
-			if (
-				! hasParents &&
-				isColumnsRelated &&
-				blockWidth < ALIGNMENT_BREAKPOINTS.mobile
-			) {
-				if ( isInnerBlockSelected ) {
-					return 0;
+			if ( ! hasParents ) {
+				if (
+					isColumnsRelated &&
+					blockWidth < ALIGNMENT_BREAKPOINTS.mobile
+				) {
+					if ( isColumnsDescendantSelected ) {
+						return 0;
+					}
+					return marginHorizontal;
+				} else if ( blockWidth > ALIGNMENT_BREAKPOINTS.medium ) {
+					return -2;
 				}
-				return marginHorizontal;
-			} else if (
-				! hasParents &&
-				blockWidth > ALIGNMENT_BREAKPOINTS.medium
-			) {
-				return -2;
 			}
 			return 0;
 		}
@@ -172,7 +170,6 @@ export default compose( [
 				__unstableGetBlockWithoutInnerBlocks,
 				getSelectedBlockClientId,
 				hasSelectedInnerBlock,
-				getBlock,
 			} = select( 'core/block-editor' );
 
 			const blockClientIds = getBlockOrder( rootClientId );
@@ -210,12 +207,22 @@ export default compose( [
 				parentBlock?.attributes || {};
 
 			const selectedBlockId = getSelectedBlockClientId();
-
-			const isInnerBlockSelected = ! getBlock(
-				getBlockParents( selectedBlockId )[ 0 ]
-			)?.name.includes( 'core/column' )
-				? true
-				: hasSelectedInnerBlock( rootClientId );
+			const selectedBlockParents = getBlockParents(
+				selectedBlockId
+			)[ 0 ];
+			const { name: selectedBlockParentsName } =
+				__unstableGetBlockWithoutInnerBlocks( selectedBlockParents ) ||
+				{};
+
+			const isRootInnerBlockSelected = hasSelectedInnerBlock(
+				rootClientId
+			);
+
+			const isColumnsDescendantSelected = selectedBlockParentsName?.includes(
+				'core/column'
+			)
+				? isRootInnerBlockSelected
+				: true;
 
 			return {
 				shouldShowInsertionPointBefore,
@@ -224,9 +231,8 @@ export default compose( [
 				hasParents,
 				blockAlignment: align,
 				parentBlockAlignment,
-				name,
-				selectedBlockId,
-				isInnerBlockSelected,
+				blockName: name,
+				isColumnsDescendantSelected,
 			};
 		}
 	),

diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -151,8 +151,7 @@ class BlockListBlock extends Component {
 		const hasParentBlockAlignment = parentBlockAlignment !== undefined;
 		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
 		const isColumnsRelated = name.includes( 'core/column' );
-		const shouldShowBorderFullWidth =
-			blockWidth < screenWidth &&
+		const shouldBeFullWidth =
 			isFullWidth &&
 			( ! isColumnsRelated || ! hasParents || hasParentBlockAlignment );
 
@@ -178,7 +177,8 @@ class BlockListBlock extends Component {
 							<View
 								style={ [
 									styles.solidBorder,
-									shouldShowBorderFullWidth &&
+									shouldBeFullWidth &&
+										blockWidth < screenWidth &&
 										styles.borderFullWidth,
 									getStylesFromColorScheme(
 										styles.solidBorderColor,
@@ -219,11 +219,7 @@ class BlockListBlock extends Component {
 									}
 									blockWidth={ blockWidth }
 									anchorNodeRef={ this.anchorNodeRef.current }
-									isFullWidth={
-										isFullWidth && hasParents
-											? hasParentBlockAlignment
-											: isFullWidth
-									}
+									isFullWidth={ shouldBeFullWidth }
 								/>
 							) }
 						</View>

diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
@@ -119,33 +119,42 @@ function ColumnsEditContainer( {
 
 	const columnWidths = getColumnWidths( innerColumns, columnCount );
 
+	// Array of column width attribute values
 	const columnWidthsValues = Object.values(
 		getColumnWidths( innerColumns, columnCount )
 	);
 
+	// The sum of column width attribute values
 	const columnWidthsSum = columnWidthsValues.reduce(
 		( acc, curr ) => acc + curr,
 		0
 	);
 
+	// Array of ratios of each column width attribute value to their sum
 	const columnRatios = columnWidthsValues.map(
 		( colWidth ) => colWidth / columnWidthsSum
 	);
 
-	const columnWidthsPerRatio = columnWidthsValues.map(
-		( columnWidth ) =>
-			( columnWidth / columnWidthsSum ) * getContainerWidth( width )
+	// Array of calculated column width for its ratio
+	const columnWidthsPerRatio = columnRatios.map(
+		( columnRatio ) => columnRatio * getContainerWidth( width )
 	);
 
+	//  Array of columns whose calculated width is lower than minimum width value
 	const filteredColumnWidthsPerRatio = columnWidthsPerRatio.filter(
 		( columnWidthPerRatio ) => columnWidthPerRatio < MIN_WIDTH
 	);
 
+	// Container width to be divided. If there are some results within `filteredColumnWidthsPerRatio`
+	// there is a need to reduce the main width by multiplying number
+	// of results in `filteredColumnWidthsPerRatio` and minimum width value
 	const baseContainerWidth =
 		width - filteredColumnWidthsPerRatio.length * MIN_WIDTH;
 
+	// The minimum percentage ratio for which column width is equal minimum width value
 	const minPercentageRatio = MIN_WIDTH / baseContainerWidth;
 
+	// The sum of column widths which ratio is higher than `minPercentageRatio`
 	const largeColumnsWidthsSum = columnRatios
 		.map( ( ratio, index ) => {
 			if ( ratio > minPercentageRatio ) {
@@ -176,12 +185,17 @@ function ColumnsEditContainer( {
 					columnCount === 1 &&
 					width > ALIGNMENT_BREAKPOINTS.medium
 				) {
+					// Exactly one column inside columns on the breakpoint higher than medium
+					// has to take a percentage of the full width
 					columnWidth = percentageRatio * containerWidth;
 				} else if ( columnsInRow > 1 ) {
 					if ( width > ALIGNMENT_BREAKPOINTS.medium ) {
 						if ( initialColumnWidth <= MIN_WIDTH ) {
+							// Column width cannot be lower than minimum 32px
 							columnWidth = MIN_WIDTH;
 						} else if ( initialColumnWidth > MIN_WIDTH ) {
+							// Column width has to be the result of multiplying the container width and
+							// the ratio of attribute and the sum of widths of columns wider than 32px
 							columnWidth = Math.floor(
 								( attributeWidth / largeColumnsWidthsSum ) *
 									containerWidth
@@ -191,6 +205,8 @@ function ColumnsEditContainer( {
 						maxColumnWidth = columnWidth;
 
 						if ( Math.round( columnWidthsSum ) < 100 ) {
+							// In case that column width attribute values does not exceed 100, each column
+							// should have attribute percentage of container width
 							const newColumnWidth =
 								percentageRatio * containerWidth;
 							if ( newColumnWidth < MIN_WIDTH ) {
@@ -199,19 +215,12 @@ function ColumnsEditContainer( {
 								columnWidth = newColumnWidth;
 							}
 						}
-
-						widths[ clientId ] = {
-							width: columnWidth,
-							maxWidth: maxColumnWidth,
-						};
 					} else if ( width < ALIGNMENT_BREAKPOINTS.medium ) {
+						// On the breakpoint lower than medium each column inside columns
+						// has to take equal part of container width
 						columnWidth = Math.floor(
 							getContainerWidth( width ) / columnsInRow
 						);
-						widths[ clientId ] = {
-							width: columnWidth,
-							maxWidth: maxColumnWidth,
-						};
 					}
 				}
 				widths[ clientId ] = {
@@ -240,15 +249,14 @@ function ColumnsEditContainer( {
 
 	const renderAppender = () => {
 		const isFullWidth = align === WIDE_ALIGNMENTS.alignments.full;
+		const isFullWidthAppender =
+			isFullWidth && ! hasParents && width > ALIGNMENT_BREAKPOINTS.mobile;
 
 		if ( isSelected ) {
 			return (
 				<View
 					style={ [
-						isFullWidth &&
-							! hasParents &&
-							width > ALIGNMENT_BREAKPOINTS.mobile &&
-							styles.fullWidthAppender,
+						isFullWidthAppender && styles.fullWidthAppender,
 						columnCount === 0 && { width },
 					] }
 				>