From 14c41d2a9ec42a3667dc170e80ddd67de52db236 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 24 Feb 2021 10:20:00 +0200 Subject: [PATCH 1/3] add align controls to Query and Query Pagination --- packages/block-library/src/query-loop/block.json | 3 ++- packages/block-library/src/query-loop/edit.js | 12 ++++++++++-- packages/block-library/src/query-loop/editor.scss | 1 - packages/block-library/src/query-loop/index.php | 8 ++++++++ .../block-library/src/query-pagination/block.json | 3 ++- packages/block-library/src/query/block.json | 6 ++++-- 6 files changed, 26 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/query-loop/block.json b/packages/block-library/src/query-loop/block.json index 724169afc851d1..d0b61b5decc8b1 100644 --- a/packages/block-library/src/query-loop/block.json +++ b/packages/block-library/src/query-loop/block.json @@ -7,7 +7,8 @@ "query", "queryContext", "layout", - "templateSlug" + "templateSlug", + "align" ], "supports": { "reusable": false, diff --git a/packages/block-library/src/query-loop/edit.js b/packages/block-library/src/query-loop/edit.js index 1ccdd47d07b240..8e71058f3660fa 100644 --- a/packages/block-library/src/query-loop/edit.js +++ b/packages/block-library/src/query-loop/edit.js @@ -47,7 +47,13 @@ export default function QueryLoopEdit( { } = {}, queryContext = [ {} ], templateSlug, + // `layout` and `align` context come from `Query` block + // and is a UI choice to make the handling of the block more + // user friendly. The plan is to find a way to make these two + // attributes of `QueryLoop`, but keep them in `Query` toolbar + // and later absorb the `QueryLoop` toolbar from its parent. layout: { type: layoutType = 'flex', columns = 1 } = {}, + align, }, } ) { const [ { page } ] = useQueryContext() || queryContext; @@ -123,12 +129,14 @@ 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, } ), - } ); + }; + 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..7daf2927667eb3 100644 --- a/packages/block-library/src/query-loop/index.php +++ b/packages/block-library/src/query-loop/index.php @@ -36,11 +36,19 @@ function render_block_core_query_loop( $attributes, $content, $block ) { $posts = get_posts( $query ); $classnames = ''; + // `layout` and `align` context come from `Query` block + // and is a UI choice to make the handling of the block more + // user friendly. The plan is to find a way to make these two + // attributes of `QueryLoop`, but keep them in `Query` toolbar + // and later absorb the `QueryLoop` toolbar from its parent. if ( isset( $block->context['layout'] ) && isset( $block->context['query'] ) ) { if ( isset( $block->context['layout']['type'] ) && 'flex' === $block->context['layout']['type'] ) { $classnames = "is-flex-container columns-{$block->context['layout']['columns']}"; } } + if ( isset( $block->context['align'] ) ) { + $classnames .= " align{$block->context['align']}"; + } $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) ); 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/block.json b/packages/block-library/src/query/block.json index 1de605c652b02f..42733078fd068e 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -34,13 +34,15 @@ "providesContext": { "queryId": "queryId", "query": "query", - "layout": "layout" + "layout": "layout", + "align": "align" }, "usesContext": [ "postId" ], "supports": { - "html": false + "html": false, + "align": [ "wide", "full" ] }, "editorStyle": "wp-block-query-editor" } From cf387301b6dcade9cf881be54e0bd49286904e83 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 24 Feb 2021 19:26:06 +0200 Subject: [PATCH 2/3] add align as QueryLoop attribute --- .../block-library/src/query-loop/block.json | 8 +++-- packages/block-library/src/query-loop/edit.js | 5 ++- .../block-library/src/query-loop/index.php | 13 ++++--- packages/block-library/src/query/block.json | 6 ++-- .../block-library/src/query/edit/index.js | 2 ++ .../src/query/edit/query-toolbar.js | 36 +++++++++++++++++++ 6 files changed, 56 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/query-loop/block.json b/packages/block-library/src/query-loop/block.json index d0b61b5decc8b1..155f3e18d54835 100644 --- a/packages/block-library/src/query-loop/block.json +++ b/packages/block-library/src/query-loop/block.json @@ -2,13 +2,17 @@ "apiVersion": 2, "name": "core/query-loop", "category": "design", + "attributes": { + "align": { + "type": "string" + } + }, "usesContext": [ "queryId", "query", "queryContext", "layout", - "templateSlug", - "align" + "templateSlug" ], "supports": { "reusable": false, diff --git a/packages/block-library/src/query-loop/edit.js b/packages/block-library/src/query-loop/edit.js index 8e71058f3660fa..cd136330cb2700 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, @@ -53,7 +54,6 @@ export default function QueryLoopEdit( { // attributes of `QueryLoop`, but keep them in `Query` toolbar // and later absorb the `QueryLoop` toolbar from its parent. layout: { type: layoutType = 'flex', columns = 1 } = {}, - align, }, } ) { const [ { page } ] = useQueryContext() || queryContext; @@ -135,6 +135,9 @@ export default function QueryLoopEdit( { [ `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 } ); diff --git a/packages/block-library/src/query-loop/index.php b/packages/block-library/src/query-loop/index.php index 7daf2927667eb3..97225fa6f9ec7d 100644 --- a/packages/block-library/src/query-loop/index.php +++ b/packages/block-library/src/query-loop/index.php @@ -36,18 +36,17 @@ function render_block_core_query_loop( $attributes, $content, $block ) { $posts = get_posts( $query ); $classnames = ''; - // `layout` and `align` context come from `Query` block - // and is a UI choice to make the handling of the block more - // user friendly. The plan is to find a way to make these two - // attributes of `QueryLoop`, but keep them in `Query` toolbar - // and later absorb the `QueryLoop` toolbar from its parent. if ( isset( $block->context['layout'] ) && isset( $block->context['query'] ) ) { if ( isset( $block->context['layout']['type'] ) && 'flex' === $block->context['layout']['type'] ) { $classnames = "is-flex-container columns-{$block->context['layout']['columns']}"; } } - if ( isset( $block->context['align'] ) ) { - $classnames .= " align{$block->context['align']}"; + + // 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 ) ); diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json index 42733078fd068e..1de605c652b02f 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -34,15 +34,13 @@ "providesContext": { "queryId": "queryId", "query": "query", - "layout": "layout", - "align": "align" + "layout": "layout" }, "usesContext": [ "postId" ], "supports": { - "html": false, - "align": [ "wide", "full" ] + "html": false }, "editorStyle": "wp-block-query-editor" } 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 && ( + + ) } ); From 2a208bc0e1a38480a57e548f38df133043d8e87a Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 24 Feb 2021 19:30:08 +0200 Subject: [PATCH 3/3] remove comment --- packages/block-library/src/query-loop/edit.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-library/src/query-loop/edit.js b/packages/block-library/src/query-loop/edit.js index cd136330cb2700..ed48c6b09100cb 100644 --- a/packages/block-library/src/query-loop/edit.js +++ b/packages/block-library/src/query-loop/edit.js @@ -48,11 +48,6 @@ export default function QueryLoopEdit( { } = {}, queryContext = [ {} ], templateSlug, - // `layout` and `align` context come from `Query` block - // and is a UI choice to make the handling of the block more - // user friendly. The plan is to find a way to make these two - // attributes of `QueryLoop`, but keep them in `Query` toolbar - // and later absorb the `QueryLoop` toolbar from its parent. layout: { type: layoutType = 'flex', columns = 1 } = {}, }, } ) {