Adding text alignment settings to Group block

WordPress · Dec 24, 2024 · 865e891 · 865e891
1 parent c3ca59b
commit 865e891
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 4 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -351,7 +351,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
 -	**Name:** core/group
 -	**Category:** design
 -	**Supports:** align (full, wide), anchor, ariaLabel, background (backgroundImage, backgroundSize), color (background, button, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (allowSizingOnChildren), position (sticky), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** allowedBlocks, tagName, templateLock
+-	**Attributes:** allowedBlocks, tagName, templateLock, textAlign
 
 ## Heading
 

diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
@@ -18,6 +18,10 @@
 		},
 		"allowedBlocks": {
 			"type": "array"
+		},
+		"textAlign": {
+			"type": "string",
+			"enum": [ "left", "center", "right", "justify" ]
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -8,6 +8,8 @@ import {
 	InspectorControls,
 	useInnerBlocksProps,
 	store as blockEditorStore,
+	AlignmentControl,
+	BlockControls,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
@@ -90,6 +92,7 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 		templateLock,
 		allowedBlocks,
 		layout = {},
+		textAlign,
 	} = attributes;
 
 	// Layout settings.
@@ -99,7 +102,11 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 
 	// Hooks.
 	const ref = useRef();
-	const blockProps = useBlockProps( { ref } );
+	const blockProps = useBlockProps( {
+		ref,
+		className: textAlign ? `has-text-align-${ textAlign }` : '',
+		style: { textAlign },
+	} );
 
 	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
 		attributes,
@@ -143,6 +150,16 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 
 	return (
 		<>
+			<BlockControls>
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( newAlignment ) =>
+						setAttributes( {
+							textAlign: newAlignment || undefined,
+						} )
+					}
+				/>
+			</BlockControls>
 			<GroupEditControls
 				tagName={ TagName }
 				onSelectTagName={ ( value ) =>

diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
@@ -53,3 +53,18 @@
 	}
 }
 
+.block-editor-block-list__block.wp-block-group.has-text-align-left {
+	text-align: left;
+}
+
+.block-editor-block-list__block.wp-block-group.has-text-align-center {
+	text-align: center;
+}
+
+.block-editor-block-list__block.wp-block-group.has-text-align-right {
+	text-align: right;
+}
+
+.block-editor-block-list__block.wp-block-group.has-text-align-justify {
+	text-align: justify;
+}
diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
@@ -3,6 +3,17 @@
  */
 import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
-export default function save( { attributes: { tagName: Tag } } ) {
-	return <Tag { ...useInnerBlocksProps.save( useBlockProps.save() ) } />;
+export default function save( { attributes: { tagName: Tag }, attributes } ) {
+	const { textAlign } = attributes;
+
+	return (
+		<Tag
+			{ ...useInnerBlocksProps.save(
+				useBlockProps.save( {
+					className: textAlign ? `has-text-align-${ textAlign }` : '',
+					style: { textAlign },
+				} )
+			) }
+		/>
+	);
 }
diff --git a/packages/block-library/src/group/style.scss b/packages/block-library/src/group/style.scss
@@ -7,3 +7,18 @@
 :where(.wp-block-group.wp-block-group-is-layout-constrained) {
 	position: relative;
 }
+.wp-block-group.has-text-align-left {
+	text-align: left;
+}
+
+.wp-block-group.has-text-align-center {
+	text-align: center;
+}
+
+.wp-block-group.has-text-align-right {
+	text-align: right;
+}
+
+.wp-block-group.has-text-align-justify {
+	text-align: justify;
+}