Add align feature (#39876)

WordPress · Mar 30, 2022 · 55eab45 · 55eab45
1 parent c638ddb
commit 55eab45
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/packages/block-library/src/quote/v2/edit.js b/packages/block-library/src/quote/v2/edit.js
@@ -1,8 +1,15 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import {
+	AlignmentControl,
+	BlockControls,
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
@@ -66,8 +73,9 @@ export default function QuoteEdit( {
 	isSelected,
 	insertBlocksAfter,
 	clientId,
+	className,
 } ) {
-	const { citation } = attributes;
+	const { citation, align } = attributes;
 
 	useMigrateOnLoad( attributes, clientId );
 
@@ -76,14 +84,26 @@ export default function QuoteEdit( {
 	);
 	const hasSelection = isSelected || isAncestorOfSelectedBlock;
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: classNames( className, {
+			[ `has-text-align-${ align }` ]: align,
+		} ),
+	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 		templateInsertUpdatesSelection: true,
 	} );
 
 	return (
 		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ align }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { align: nextAlign } );
+					} }
+				/>
+			</BlockControls>
 			<BlockQuotation { ...innerBlocksProps }>
 				{ innerBlocksProps.children }
 				{ ( ! RichText.isEmpty( citation ) || hasSelection ) && (

diff --git a/packages/block-library/src/quote/v2/save.js b/packages/block-library/src/quote/v2/save.js
@@ -1,11 +1,20 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { citation } = attributes;
-	const blockProps = useBlockProps.save();
+	const { align, citation } = attributes;
+	const blockProps = useBlockProps.save( {
+		className: classNames( {
+			[ `has-text-align-${ align }` ]: align,
+		} ),
+	} );
 	return (
 		<blockquote { ...blockProps }>
 			<InnerBlocks.Content />