diff --git a/packages/block-library/src/query-loop/block.json b/packages/block-library/src/query-loop/block.json index 724169afc851d1..155f3e18d54835 100644 --- a/packages/block-library/src/query-loop/block.json +++ b/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", diff --git a/packages/block-library/src/query-loop/edit.js b/packages/block-library/src/query-loop/edit.js index 1ccdd47d07b240..ed48c6b09100cb 100644 --- a/packages/block-library/src/query-loop/edit.js +++ b/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 ) { diff --git a/packages/block-library/src/query-loop/editor.scss b/packages/block-library/src/query-loop/editor.scss index 39a614277d58d7..39f34005897f8f 100644 --- a/packages/block-library/src/query-loop/editor.scss +++ b/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; } diff --git a/packages/block-library/src/query-loop/index.php b/packages/block-library/src/query-loop/index.php index 053ebda29a2e2d..97225fa6f9ec7d 100644 --- a/packages/block-library/src/query-loop/index.php +++ b/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 = ''; diff --git a/packages/block-library/src/query-pagination/block.json b/packages/block-library/src/query-pagination/block.json index 765e4c1f0bcceb..a1c5d25bc18b94 100644 --- a/packages/block-library/src/query-pagination/block.json +++ b/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" diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index 9b9c2a388604c6..0cfa7ea3b015c9 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/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( { /> { + 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( { /> ) } + { !! queryLoops?.length && ( + + ) } );