Improve AlignmentMatrix rendering in Edit and Save functions

Remove unused code from base AlignmentMatrix component
WordPress · Mar 27, 2020 · d8e2d97 · d8e2d97
1 parent da339ed
commit d8e2d97
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 64 deletions.
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -19,7 +19,6 @@ import {
 	ResizableBox,
 	ToggleControl,
 	withNotices,
-	__experimentalAlignmentMatrixControl as AlignmentMatrixControl,
 } from '@wordpress/components';
 import { compose, withInstanceId } from '@wordpress/compose';
 import {
@@ -49,6 +48,8 @@ import {
 	COVER_MIN_HEIGHT,
 	backgroundImageStyles,
 	dimRatioToClass,
+	isContentPositionCenter,
+	getPositionClassName,
 } from './shared';
 
 /**
@@ -66,29 +67,6 @@ const INNER_BLOCKS_TEMPLATE = [
 	],
 ];
 
-const {
-	__getAlignmentFlexProps: getAlignmentFlexProps,
-} = AlignmentMatrixControl;
-
-function getAlignmentFlexStyles( contentPosition ) {
-	const [ alignItems, justifyContent ] = getAlignmentFlexProps(
-		contentPosition
-	);
-
-	return {
-		alignItems,
-		justifyContent,
-	};
-}
-
-function isContentPositionCenter( contentPosition ) {
-	return (
-		! contentPosition ||
-		contentPosition === 'center center' ||
-		contentPosition === 'center'
-	);
-}
-
 function retrieveFastAverageColor() {
 	if ( ! retrieveFastAverageColor.fastAverageColor ) {
 		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
@@ -287,7 +265,6 @@ function CoverEdit( {
 			: {} ),
 		backgroundColor: overlayColor.color,
 		minHeight: temporaryMinHeight || minHeight,
-		...getAlignmentFlexStyles( contentPosition ),
 	};
 
 	if ( gradientValue && ! url ) {
@@ -450,15 +427,22 @@ function CoverEdit( {
 		);
 	}
 
-	const classes = classnames( className, dimRatioToClass( dimRatio ), {
-		'is-dark-theme': isDark,
-		'has-background-dim': dimRatio !== 0,
-		'has-parallax': hasParallax,
-		[ overlayColor.class ]: overlayColor.class,
-		'has-background-gradient': gradientValue,
-		[ gradientClass ]: ! url && gradientClass,
-		'has-custom-content-position': isContentPositionCenter(),
-	} );
+	const classes = classnames(
+		className,
+		dimRatioToClass( dimRatio ),
+		{
+			'is-dark-theme': isDark,
+			'has-background-dim': dimRatio !== 0,
+			'has-parallax': hasParallax,
+			[ overlayColor.class ]: overlayColor.class,
+			'has-background-gradient': gradientValue,
+			[ gradientClass ]: ! url && gradientClass,
+			'has-custom-content-position': ! isContentPositionCenter(
+				contentPosition
+			),
+		},
+		getPositionClassName( contentPosition )
+	);
 
 	return (
 		<>

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -35,11 +35,10 @@
 		width: 100%;
 	}
 
+
 	&.has-custom-content-position.has-custom-content-position {
 		.wp-block-cover__inner-container {
-			margin: 0;
 			padding: 0 $grid-unit-40;
-			width: auto;
 		}
 	}
 }

diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
@@ -20,12 +20,15 @@ import {
 	VIDEO_BACKGROUND_TYPE,
 	backgroundImageStyles,
 	dimRatioToClass,
+	isContentPositionCenter,
+	getPositionClassName,
 } from './shared';
 
 export default function save( { attributes } ) {
 	const {
 		backgroundType,
 		gradient,
+		contentPosition,
 		customGradient,
 		customOverlayColor,
 		dimRatio,
@@ -66,7 +69,11 @@ export default function save( { attributes } ) {
 			'has-parallax': hasParallax,
 			'has-background-gradient': gradient || customGradient,
 			[ gradientClass ]: ! url && gradientClass,
-		}
+			'has-custom-content-position': ! isContentPositionCenter(
+				contentPosition
+			),
+		},
+		getPositionClassName( contentPosition )
 	);
 
 	return (

diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
@@ -1,3 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+
+const { __getAlignmentIndex: getAlignmentIndex } = AlignmentMatrixControl;
+
+const POSITION_CLASSNAMES = [
+	'is-position-top-left',
+	'is-position-top-center',
+	'is-position-top-right',
+	'is-position-center-left',
+	'is-position-center-center',
+	'is-position-center-right',
+	'is-position-bottom-left',
+	'is-position-bottom-center',
+	'is-position-bottom-right',
+];
+
 export const IMAGE_BACKGROUND_TYPE = 'image';
 export const VIDEO_BACKGROUND_TYPE = 'video';
 export const COVER_MIN_HEIGHT = 50;
@@ -48,3 +67,17 @@ export function attributesFromMedia( setAttributes ) {
 		} );
 	};
 }
+
+export function getPositionClassName( contentPosition ) {
+	const index = getAlignmentIndex( contentPosition );
+
+	return POSITION_CLASSNAMES[ index ];
+}
+
+export function isContentPositionCenter( contentPosition ) {
+	return (
+		! contentPosition ||
+		contentPosition === 'center center' ||
+		contentPosition === 'center'
+	);
+}
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -106,6 +106,54 @@
 			color: inherit;
 		}
 	}
+
+	// Position: Top
+	&.is-position-top-left {
+		align-items: flex-start;
+		justify-content: flex-start;
+	}
+	&.is-position-top-center {
+		align-items: flex-start;
+		justify-content: center;
+	}
+	&.is-position-top-right {
+		align-items: flex-start;
+		justify-content: flex-end;
+	}
+	// Position: Center
+	&.is-position-center-left {
+		align-items: center;
+		justify-content: flex-start;
+	}
+	&.is-position-center-center {
+		align-items: center;
+		justify-content: center;
+	}
+	&.is-position-center-right {
+		align-items: center;
+		justify-content: flex-end;
+	}
+	// Position: Bottom
+	&.is-position-bottom-left {
+		align-items: flex-end;
+		justify-content: flex-start;
+	}
+	&.is-position-bottom-center {
+		align-items: flex-end;
+		justify-content: center;
+	}
+	&.is-position-bottom-right {
+		align-items: flex-end;
+		justify-content: flex-end;
+	}
+
+	&.has-custom-content-position.has-custom-content-position {
+		.wp-block-cover__inner-container {
+			margin: 0;
+			padding: $grid-unit-40;
+			width: auto;
+		}
+	}
 }
 
 .wp-block-cover__video-background {

diff --git a/packages/components/src/alignment-matrix-control/index.js b/packages/components/src/alignment-matrix-control/index.js
@@ -15,10 +15,8 @@ import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
 import {
 	ALIGNMENTS,
 	DIRECTION,
-	FLEX_ALIGNMENT_PROPS,
 	getAlignmentIndex,
 	getAlignmentValueFromIndex,
-	getAlignmentFlexProps,
 	getNextIndexFromDirection,
 } from './utils';
 import { Root, Cell, Point } from './styles/alignment-matrix-control-styles';
@@ -38,11 +36,11 @@ export default function AlignmentMatrixControl( {
 	);
 	const nodeRef = useRef();
 
-	const handleOnChange = ( nextIndex ) => {
+	const handleOnChange = ( nextIndex, changeProps ) => {
 		const alignName = getAlignmentValueFromIndex( nextIndex );
 
 		setAlignIndex( nextIndex );
-		onChange( alignName );
+		onChange( alignName, changeProps );
 	};
 
 	const handleOnKeyDown = ( event ) => {
@@ -58,31 +56,31 @@ export default function AlignmentMatrixControl( {
 					alignIndex,
 					DIRECTION.UP
 				);
-				handleOnChange( nextIndex );
+				handleOnChange( nextIndex, { event } );
 				break;
 			case DOWN:
 				event.preventDefault();
 				nextIndex = getNextIndexFromDirection(
 					alignIndex,
 					DIRECTION.DOWN
 				);
-				handleOnChange( nextIndex );
+				handleOnChange( nextIndex, { event } );
 				break;
 			case LEFT:
 				event.preventDefault();
 				nextIndex = getNextIndexFromDirection(
 					alignIndex,
 					DIRECTION.LEFT
 				);
-				handleOnChange( nextIndex );
+				handleOnChange( nextIndex, { event } );
 				break;
 			case RIGHT:
 				event.preventDefault();
 				nextIndex = getNextIndexFromDirection(
 					alignIndex,
 					DIRECTION.RIGHT
 				);
-				handleOnChange( nextIndex );
+				handleOnChange( nextIndex, { event } );
 				break;
 			default:
 				break;
@@ -92,7 +90,7 @@ export default function AlignmentMatrixControl( {
 	const createHandleOnClick = ( index ) => ( event ) => {
 		nodeRef.current.focus();
 		event.preventDefault();
-		handleOnChange( index, { flexProps: FLEX_ALIGNMENT_PROPS[ index ] } );
+		handleOnChange( index, { event } );
 	};
 
 	/**
@@ -138,4 +136,5 @@ export default function AlignmentMatrixControl( {
 
 AlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;
 AlignmentMatrixControl.icon = <AlignmentMatrixControlIcon />;
-AlignmentMatrixControl.__getAlignmentFlexProps = getAlignmentFlexProps;
+
+AlignmentMatrixControl.__getAlignmentIndex = getAlignmentIndex;
diff --git a/packages/components/src/alignment-matrix-control/utils.js b/packages/components/src/alignment-matrix-control/utils.js
@@ -30,18 +30,6 @@ export const ALIGNMENT_MATRIX = [
 	[ 6, 7, 8 ],
 ];
 
-export const FLEX_ALIGNMENT_PROPS = [
-	[ 'flex-start', 'flex-start' ],
-	[ 'flex-start', 'center' ],
-	[ 'flex-start', 'flex-end' ],
-	[ 'center', 'flex-start' ],
-	[ 'center', 'center' ],
-	[ 'center', 'flex-end' ],
-	[ 'flex-end', 'flex-start' ],
-	[ 'flex-end', 'center' ],
-	[ 'flex-end', 'flex-end' ],
-];
-
 /**
  * Transforms an alignment value to an [x, y] alignment data.
  *
@@ -205,8 +193,3 @@ export function getNextIndexFromDirection( currentIndex, direction ) {
 
 	return getIndexFromCoords( [ moveX, moveY ], currentIndex );
 }
-
-export function getAlignmentFlexProps( alignment = 'center' ) {
-	const index = getAlignmentIndex( alignment );
-	return FLEX_ALIGNMENT_PROPS[ index ];
-}