Add full and wide align controls to Query and Query Pagination blocks

packages/block-library/src/query-loop/block.json

@@ -2,6 +2,11 @@
 	"apiVersion": 2,
 	"name": "core/query-loop",
 	"category": "design",
+	"attributes": {
+		"align": {
+			"type": "string"
+		}
+	},
 	"usesContext": [
 		"queryId",
 		"query",

packages/block-library/src/query-loop/edit.js

@@ -30,6 +30,7 @@ const TEMPLATE = [
 ];
 export default function QueryLoopEdit( {
 	clientId,
+	attributes: { align },
 	context: {
 		query: {
 			perPage,
@@ -123,12 +124,17 @@ export default function QueryLoopEdit( {
 		[ posts ]
 	);
 	const hasLayoutFlex = layoutType === 'flex' && columns > 1;
-	const blockProps = useBlockProps( {
+	const extraBlockProps = {
 		className: classnames( {
 			'is-flex-container': hasLayoutFlex,
 			[ `columns-${ columns }` ]: hasLayoutFlex,
 		} ),
-	} );
+	};
+	// We haven't used the `supports.align` here because first we
+	// need to find a way to absorb toolbars for nested block
+	// wrappers (https://github.com/WordPress/gutenberg/issues/7694).
+	if ( align ) extraBlockProps[ 'data-align' ] = align;
+	const blockProps = useBlockProps( extraBlockProps );
 	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
 
 	if ( ! posts ) {

packages/block-library/src/query-loop/editor.scss

@@ -1,5 +1,4 @@
 .wp-block.wp-block-query-loop {
-	max-width: 100%;
 	padding-left: 0;
 	list-style: none;
 }

packages/block-library/src/query-loop/index.php

@@ -42,6 +42,13 @@ function render_block_core_query_loop( $attributes, $content, $block ) {
 		}
 	}
 
+	// We haven't used the `supports.align` here because first we
+	// need to find a way to absorb toolbars for nested block
+	// wrappers (https://github.com/WordPress/gutenberg/issues/7694).
+	if ( isset( $attributes['align'] ) ) {
+		$classnames .= " align{$attributes['align']}";
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
 
 	$content = '';

packages/block-library/src/query-pagination/block.json

@@ -9,7 +9,8 @@
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"align": [ "wide", "full" ]
 	},
 	"editorStyle": "wp-block-query-pagination-editor",
 	"style": "wp-block-query-pagination"

packages/block-library/src/query/edit/index.js

@@ -25,6 +25,7 @@ export function QueryContent( {
 	attributes,
 	context: { postId },
 	setAttributes,
+	clientId,
 } ) {
 	const { queryId, query, layout } = attributes;
 	const instanceId = useInstanceId( QueryContent );
@@ -72,6 +73,7 @@ export function QueryContent( {
 			/>
 			<BlockControls>
 				<QueryToolbar
+					clientId={ clientId }
 					attributes={ attributes }
 					setQuery={ updateQuery }
 					setLayout={ updateLayout }

packages/block-library/src/query/edit/query-toolbar.js

@@ -8,11 +8,17 @@ import {
 	BaseControl,
 	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
+import {
+	BlockAlignmentToolbar,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { settings, list, grid } from '@wordpress/icons';
 
 export default function QueryToolbar( {
+	clientId,
 	attributes: { query, layout },
 	setQuery,
 	setLayout,
@@ -21,6 +27,21 @@ export default function QueryToolbar( {
 		QueryToolbar,
 		'blocks-query-pagination-max-page-input'
 	);
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { queryLoops } = useSelect(
+		( select ) => {
+			const { getBlocks } = select( blockEditorStore );
+			const blocks = getBlocks( clientId );
+			const _queryLoops = blocks?.filter(
+				( { name } ) => name === 'core/query-loop'
+			);
+			return {
+				queryLoops: _queryLoops,
+			};
+		},
+		[ clientId ]
+	);
+
 	const layoutControls = [
 		{
 			icon: list,
@@ -36,6 +57,14 @@ export default function QueryToolbar( {
 			isActive: layout?.type === 'flex',
 		},
 	];
+	// Updates the `align` property in `QueryLoop` InnerBlocks all at once.
+	// This is usually just one instance though, as it doesn't make sense to
+	// have more than one `QueryLoop` in each `Query` block.
+	const updateAlignment = ( newValue ) => {
+		queryLoops.forEach( ( queryLoop ) => {
+			updateBlockAttributes( queryLoop.clientId, { align: newValue } );
+		} );
+	};
 	return (
 		<>
 			{ ! query.inherit && (
@@ -108,6 +137,13 @@ export default function QueryToolbar( {
 					/>
 				</ToolbarGroup>
 			) }
+			{ !! queryLoops?.length && (
+				<BlockAlignmentToolbar
+					value={ queryLoops[ 0 ].attributes.align }
+					onChange={ updateAlignment }
+					controls={ [ 'wide', 'full' ] }
+				/>
+			) }
 			<ToolbarGroup controls={ layoutControls } />
 		</>
 	);