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 (