From e25b28b5e1393642854888b715c18eb31382aa2f Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Thu, 6 Feb 2020 19:40:44 -0500
Subject: [PATCH] Block Library: Column: Show Notice when total width is not
 100%

---
 packages/block-library/src/column/edit.js | 57 +++++++++++++++++++++--
 1 file changed, 54 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
index 1d57937bd105a4..6d6d0ae92979b4 100644
--- a/packages/block-library/src/column/edit.js
+++ b/packages/block-library/src/column/edit.js
@@ -12,12 +12,62 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { PanelBody, RangeControl } from '@wordpress/components';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { PanelBody, RangeControl, Notice } from '@wordpress/components';
+import { withDispatch, withSelect, useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Component which renders a notice if the sum total width of columns of the
+ * root block (the Columns parent) are all explicitly assigned and not equal
+ * to 100%.
+ *
+ * @param {Object} props          Component props.
+ * @param {string} props.clientId Client ID of the selected column.
+ *
+ * @return {WPElement?} Notice element, if invalid.
+ */
+function InvalidWidthNotice( { clientId } ) {
+	const sumWidth = useSelect(
+		( select ) => {
+			const {
+				getBlockOrder,
+				getBlockAttributes,
+				getBlockRootClientId,
+			} = select( 'core/block-editor' );
+
+			const columns = getBlockOrder( getBlockRootClientId( clientId ) );
+			return columns.reduce(
+				( result, columnClientId ) =>
+					result + getBlockAttributes( columnClientId ).width,
+				0
+			);
+		},
+		[ clientId ]
+	);
+
+	// A value of `NaN` is anticipated when any of the columns do not have an
+	// explicit width assigned, since `result + undefined` in the `Array#reduce`
+	// above would taint the numeric result (intended and leveraged here). Round
+	// sum to allow some tolerance +/- 0.5%, which also ensures that the notice
+	// message would never display "100%" as an invalid width if e.g. 100.4%
+	// sum total width.
+	if ( isNaN( sumWidth ) || Math.round( sumWidth ) === 100 ) {
+		return null;
+	}
+
+	return (
+		<Notice status="warning" isDismissible={ false }>
+			{ sprintf(
+				__( 'The total width of columns (%d%%) does not equal 100%%.' ),
+				Math.round( sumWidth )
+			) }
+		</Notice>
+	);
+}
 
 function ColumnEdit( {
+	clientId,
 	attributes,
 	setAttributes,
 	className,
@@ -52,6 +102,7 @@ function ColumnEdit( {
 						required
 						allowReset
 					/>
+					<InvalidWidthNotice clientId={ clientId } />
 				</PanelBody>
 			</InspectorControls>
 			<InnerBlocks