diff --git a/packages/block-library/src/quote/v2/edit.js b/packages/block-library/src/quote/v2/edit.js
index c2495681364c71..f2de7f9aa9f894 100644
--- 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,7 +84,11 @@ 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,
@@ -84,6 +96,14 @@ export default function QuoteEdit( {
return (
<>
+
+ {
+ setAttributes( { align: nextAlign } );
+ } }
+ />
+
{ 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
index be33c290ec8b6c..52db0c5cb5328f 100644
--- 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 (