Skip to content

[Block Library - Query Loop]: Connect scoped block variation to inserter variations #46410

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 20, 2022
Merged

[Block Library - Query Loop]: Connect scoped block variation to inserter variations #46410

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
92cd811
[Block Library - Query Loop]: Connect scoped `block` variation to `in…
ntsekouras Dec 8, 2022
63eb09e
address feedback and support multiple variations connections
ntsekouras Dec 15, 2022
12f85c1
add docs
ntsekouras Dec 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
add docs
  • Loading branch information
@ntsekouras
ntsekouras committed Dec 20, 2022
commit 12f85c139a26e009f38ed476e75117ae354c0514
6 changes: 6 additions & 0 deletions docs/how-to-guides/block-tutorial/extending-the-query-loop-block.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,12 @@ The Query Loop block determines if there is an active variation of itself and if

In order for a pattern to be “connected” with a Query Loop variation, you should add the name of your variation prefixed with the Query Loop name (e.g. `core/query/$variation_name`) to the pattern's `blockTypes` property. For more details about registering patterns [see here](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/).

If you have not provided `innerBlocks` in your variation, there is also a way to suggest “connected” variations when the user selects `Start blank` in the setup phase. This is handled in a similar fashion with “connected” patterns, by checking if there is an active variation of Query Loop and if there are any connected variations to suggest.

In order for a variation to be connected to another Query Loop variation we need to define the `scope` attribute with `['block']` as value and the `namespace` attribute defined as an array. This array should contain the names(`name` property) of any variations they want to be connected to.

For example, if we have a Query Loop variation exposed to the inserter(`scope: ['inserter']`) with the name `products`, we can connect a scoped `block` variation by setting its `namespace` attribute to `['products']`. If the user selects this variation after having clicked `Start blank`, the namespace attribute will be overridden by the main inserter variation.

### Making Gutenberg recognize your variation

There is one slight problem you might have realized after implementing this variation: while it is transparent to the user as they are inserting it, Gutenberg will still recognize the variation as a Query Loop block at its core and so, after its insertion, it will show up as a Query Loop block in the tree view of the editor, for instance.
Expand Down