Refactor column block to use hooks (#23143)

* Refactor column block to use hooks

* Update inline comment according to guidelines

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>

packages/block-library/src/column/edit.js

@@ -14,22 +14,43 @@ import {
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
 import { PanelBody, RangeControl } from '@wordpress/components';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 function ColumnEdit( {
-	attributes,
+	attributes: { verticalAlignment, width },
 	setAttributes,
-	updateAlignment,
-	hasChildBlocks,
+	clientId,
 } ) {
-	const { verticalAlignment, width } = attributes;
-
 	const classes = classnames( 'block-core-columns', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
+	const { hasChildBlocks, rootClientId } = useSelect(
+		( select ) => {
+			const { getBlockOrder, getBlockRootClientId } = select(
+				'core/block-editor'
+			);
+
+			return {
+				hasChildBlocks: getBlockOrder( clientId ).length > 0,
+				rootClientId: getBlockRootClientId( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
+
+	const updateAlignment = ( value ) => {
+		// Update own alignment.
+		setAttributes( { verticalAlignment: value } );
+		// Reset parent Columns block.
+		updateBlockAttributes( rootClientId, {
+			verticalAlignment: null,
+		} );
+	};
+
 	const hasWidth = Number.isFinite( width );
 
 	return (
@@ -76,35 +97,4 @@ function ColumnEdit( {
 	);
 }
 
-export default compose(
-	withSelect( ( select, ownProps ) => {
-		const { clientId } = ownProps;
-		const { getBlockOrder } = select( 'core/block-editor' );
-
-		return {
-			hasChildBlocks: getBlockOrder( clientId ).length > 0,
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps, registry ) => {
-		return {
-			updateAlignment( verticalAlignment ) {
-				const { clientId, setAttributes } = ownProps;
-				const { updateBlockAttributes } = dispatch(
-					'core/block-editor'
-				);
-				const { getBlockRootClientId } = registry.select(
-					'core/block-editor'
-				);
-
-				// Update own alignment.
-				setAttributes( { verticalAlignment } );
-
-				// Reset Parent Columns Block
-				const rootClientId = getBlockRootClientId( clientId );
-				updateBlockAttributes( rootClientId, {
-					verticalAlignment: null,
-				} );
-			},
-		};
-	} )
-)( ColumnEdit );
+export default ColumnEdit;