Create Query Block #20106

georgeh · 2020-02-07T19:08:50Z

Description

The Query Block allows users to create a search on the site and choose blocks to display content from the matching posts. This allows users to highlight specific content or areas of their sites.

How has this been tested?

Tested locally, behind the __experimentalEnableFullSiteEditing flag since it requires FSE blocks to display queried content.

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

epiqueras

There are still outstanding issues I raised on Automattic/newspack-blocks#176 and on other conversations on Slack regarding the use of a custom store for deduplicated blocks.

georgeh · 2020-02-11T18:24:41Z

Based on our conversations, here are the changes that I'm going to be working on:

Create a deduplication container block, that will provide de-duplication tracking to any child blocks inside
Use gutenberg_set_post_context to create a post context for the child blocks to render
Move the BlockEditorProvider implementation to a InnerBlocks implementation using __experimentalBlocks

Once those are ready, I'll ping you for another review

epiqueras · 2020-02-12T03:09:37Z

Sounds good!

jeffersonrabb · 2020-02-12T13:13:36Z

Couple of follow-up questions on this:

Would the proposed Deduplication Container Block be available in the block picker like any other block?
Presumably the Query block will be deployable in a post whether or not it is a child of the Deduplication Container Block?
The first iterations of Query block used InnerBlocks (e.g. PoC: Query/Post Blocks Automattic/newspack-blocks#68), however in various conversations @mtias indicated this was not an ideal fit and steered the direction towards BlockEditorProvider/EntityProvider. If we’re now moving back to an InnerBlocks implementation I’d like to reconcile these two potentially conflicting directions and understand the shift in approach?

epiqueras · 2020-02-12T16:56:52Z

Would the proposed Deduplication Container Block be available in the block picker like any other block?

I think it would work better if it's the actual block you insert and the Query blocks are like Navigation Link Item blocks in the Navigation block.

Presumably the Query block will be deployable in a post whether or not it is a child of the Deduplication Container Block?

Yes

The first iterations of Query block used InnerBlocks (e.g. Automattic/newspack-blocks#68), however in various conversations @mtias indicated this was not an ideal fit and steered the direction towards BlockEditorProvider/EntityProvider. If we’re now moving back to an InnerBlocks implementation I’d like to reconcile these two potentially conflicting directions and understand the shift in approach?

Breaking the block list is not compatible with most of the editor APIs unless you completely break the editing flow like reusable blocks do. We've been using InnerBlocks for a while now.

georgeh · 2020-02-14T18:51:08Z

I'm having some trouble implementing useEntityBlockEditor() and <InnerBlocks __experimentalBlocks={...}... /> that you suggested because it's causing an infinite loop in block-editor/src/store/selectors.js. But, while debugging, the code I was reading made me think it's not the correct solution for what we are doing.

useEntityBlockEditor appears to load the blocks from the nearest EntityProvider context - in our case it's a query result. We do not want to load the blocks from the query result - we want to define our own list of blocks that will render with the EntityProvider's context. For example, a 50 paragraph post may return but we only want to render the PostTitle and PostExcerpt blocks, using that post as context.

I'm going to keep looking at using <InnerBlocks __experimentalBlocks={...} /> but I'm going to drop useEntityBlockEditor() unless I'm misunderstanding how that fits together.

I also attempted to rebase this off of the branch for #19572 so I could try to use the Block Context stuff but ran into some PHP fatals. I'll keep an eye on that branch and try again later.

georgeh · 2020-02-18T20:39:34Z

I was able to get the InnerBlocks implementation working, however when there are several InnerBlocks rendered in our container block, we run into some weird bugs:

Adding a paragraph to the Query template locks the page at 100% CPU, making the page unusable
The active paragraph gets duplicates of the formatting bar (bottom of the screenshot) and inspector panel
Typing into the Paragraph is added in reverse ("dlroW olleH"), probably because of the 100% CPU usage messing with the order events are firing.

I don't think that <InnerBlocks /> likes being repeated for each Query result (which makes sense, it expects to only be rendered once per block). The solution seems to be to use 1 <InnerBlocks /> with a managed Post block for each query result, and then watching the changes on the block.InnerBlocks property of each Post block.

Should we wait for #19572 so that we can do that, or go ahead with the current working BlockEditorProvider implementation and refactor later?

youknowriad · 2020-03-17T11:00:24Z

I got this on the frontend

youknowriad · 2020-03-17T11:04:04Z

I added a static block (paragraph) between the title and the date, it showed in the editor properly but not in the frontend.

youknowriad · 2020-03-17T11:08:54Z

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

+		"className": {
+			"type": "string"
+		},
+		"criteria": {


After using this block for a few minutes, I found that there's a lot of work to be done to make sure the block works properly even without criteria/filtering...

I was wondering what do you think if we split this PR into two, one block without filtering where we'd only focus on how the template gets edited/updated and rendered. and the filtering can be easily added on a follow-up PR when the interactions are sorted-out?

youknowriad · 2020-03-17T11:10:06Z

I noticed that it's very hard to select the "Query" block from the footer, I believe that's because the block is "unselected" when one of its inner blocks are selected?

youknowriad · 2020-03-17T11:13:05Z

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

+
+		this.debouncedCreateBlockTree = debounce(
+			this.createBlockTree.bind( this ),
+			1000


While testing I noticed that my changes take a lot of time to propagate to the other blocks, Is this one-second delay necessary?

It seems to be, because changes to block content / attrs will propagate and interfere with the usability.

The easiest way to see the problem is to remove the debounce, add a paragraph block inside the Query, and start typing. When you are typing, the block tree will keep getting updated and the updates will cause your typing to lag, and in some cases not register at all.

wpscholar · 2020-03-20T14:59:39Z

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

+	$args = core_query_attributes_to_critera( $attributes['criteria'] );
+	$args['posts_per_page'] = $args['posts_per_page'] + count( Blocks_Query::$displayedPostIds );
+
+	$query = new WP_Query( $args );


What happens if we just want to use the default query object? We should probably use the default query if no arguments are present?

Are you changing the default WP_Query or just looking to make sure that this does what you'd expect?

I think that getting this to align with WP_Query is a good goal, but for now there are a lot of options that don't have a UI yet. This is something I think we'll have to iterate on.

I'm just envisioning using this in a block-based theme. I'd add the block in my theme but not add any custom query args so that it will use the global WP_Query object. I don't want to trigger the server to do a second query if it isn't needed.

I could be misunderstanding, but this seems like the foundational use case for a block based theme?

I could be misunderstanding, but this seems like the foundational use case for a block based theme?

If it isn't, I don't know what is. I just tried out the new block-based theming system and the loop appears to be the only thing missing. The template tag blocks need to be placed within some kind of loop container, they can't just be directly placed in the outer part of the template. Especially for posts page, archives and search results templates where the default query returns multiple posts, the template needs to have some kind of loop container and this appears to be it.

georgeh · 2020-03-23T20:23:59Z

@jasmussen if you have some time can you try out this block and see what we can do to make it better?

jasmussen · 2020-03-24T09:45:28Z

Thanks for the ping George, very excited about this block and happy to see it land soon.

I think there are two aspects to it: a) we need for it to reach a baseline of features and quality so we can merge it, and b) we should polish and improve beyond that baseline set of features.

A is what we need to address for this PR to be merged, and B we can ticket. It feels prudent to decide what goes in A or B, and to that end I have some questions about the block, if you'll be patient with me! To that end, this is what I see:

Very first glance: this is pretty cool. Wow. The Loop in a block.

There are some editable fields:

What am I editing here?

The last pre-inserted block looks like a "Post placeholder", but it has a LEGO block icon (undefined icon). I'm also unsure exactly what I'm editing. Should I even be editing that block? Can I customize the "Read More" text here? This block:

The 2nd line feels like an "insert your own block here". Is that it? And if so, do we really need it? Could I not just insert my own block after the Query block itself? It doesn't have a block toolbar, so it feels like a caption field:

Honestly the above two question are the extent of my uncertainty. The block as a whole feels cool. It's as complex as The Loop, but that's fine — it IS a complex block. Therefor the options in the sidebar are also cool, and I like how it's split by the toggle right at the top.

In the category of polish and refinements, we should get a new icon for the query block itself, one that is cognizant of efforts in #18667. But I can help with that in a followup PR.

The other thing is to work with some better placeholders. These are all so barebones that they aren't even representative of what the post should look like. But this is a larger effort and not the responsibility of this block, and is tracked in #19256.

I hope this was helpful, and don't hesitate to ping me again if there's anything I can be helpful with — PRs, feedback, CSS, anything at all.

I noticed a few PHP errors, but not sure that's my own doing or not. Seeing this:

<br />
  | <b>Notice</b>:  Undefined index: specificMode in <b>/var/www/src/wp-content/plugins/gutenberg/build/block-library/blocks/query.php</b> on line <b>40</b><br />
  | <br />
  | <b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /var/www/src/wp-content/plugins/gutenberg/build/block-library/blocks/query.php:40) in <b>/var/www/src/wp-admin/admin-header.php</b> on line <b>9</b><br />

wpscholar · 2020-03-25T15:56:27Z

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

+				?>
+				</div>
+				<?php endwhile; ?>
+			<?php endif; ?>


What happens if there are no results found?

The Query Block allows users to create a search on the site and choose blocks to display content from the matching posts. This allows users to highlight specific content or areas of their sites.

- DRY block attributes and move to `block.json`

kjellr · 2020-04-22T14:43:08Z

Just a quick note: This might be planned already but would it be possible for the output of this block use standard classnames like entry-title, entry-meta, entry-content/entry-summary, etc? That would ensure greater compatibility with themes right out of the box.

dingo-d · 2020-04-30T12:00:37Z

Will the pagination be handled with this block as well? Asking for a friend 😂

mcsf · 2020-06-01T16:48:57Z

@georgeh and @epiqueras: is there anything left here after the merge of #22199, or can we close the PR?

georgeh · 2020-06-01T19:04:40Z

Nope, let's close it

georgeh requested a review from epiqueras February 7, 2020 19:08

georgeh requested review from ajitbohra, jorgefilipecosta, Soean, talldan and TimothyBJacobs as code owners February 7, 2020 19:08

epiqueras requested changes Feb 7, 2020

View reviewed changes

georgeh force-pushed the add/query-block branch from 0b95943 to 27e5afc Compare February 12, 2020 20:25

This was referenced Feb 17, 2020

[ Latest Posts ] Iterations to version 2 #20046

Closed

[Navigation] Consider making Navigation Link a dynamic block #20178

Closed

jffng mentioned this pull request Feb 18, 2020

Add Ambitious theme to Theme Experiments WordPress/theme-experiments#21

Merged

youknowriad mentioned this pull request Mar 11, 2020

Full Site Editing Breakdown #20791

Closed

53 tasks

georgeh force-pushed the add/query-block branch from c83f66e to 2c02724 Compare March 16, 2020 20:57

youknowriad reviewed Mar 17, 2020

View reviewed changes

wpscholar reviewed Mar 20, 2020

View reviewed changes

jeffersonrabb mentioned this pull request Mar 23, 2020

Query Block Automattic/newspack-blocks#176

Closed

9 tasks

wpscholar reviewed Mar 25, 2020

View reviewed changes

George Hotelling added 9 commits April 14, 2020 15:37

Create Query Block

fadaa6c

The Query Block allows users to create a search on the site and choose blocks to display content from the matching posts. This allows users to highlight specific content or areas of their sites.

Fix author criteria

72edd01

Remove deduplication logic

1419bd6

Remove newspack mention and InnerBlocks.save

361560d

- Use global editor settings for BlockEditorProvider

4bbec33

- DRY block attributes and move to `block.json`

Set default blocks as default attributes

f390c6a

Replace cleanBlocks with standard cloneBlocks

291787c

Fix PHP warning

3823255

Fixup a bug with server rendering count

699885e

georgeh force-pushed the add/query-block branch from b4f4c2c to 699885e Compare April 14, 2020 20:12

draganescu added the New Block Suggestion for a new block label Apr 23, 2020

paaljoachim mentioned this pull request May 15, 2020

Breaking up/nesting Custom Posts MediaRon/post-type-archive-mapping#73

Open

georgeh closed this Jun 1, 2020

youknowriad deleted the add/query-block branch June 2, 2020 10:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create Query Block #20106

Create Query Block #20106

georgeh commented Feb 7, 2020

epiqueras left a comment

georgeh commented Feb 11, 2020

epiqueras commented Feb 12, 2020 via email

jeffersonrabb commented Feb 12, 2020

epiqueras commented Feb 12, 2020

georgeh commented Feb 14, 2020

georgeh commented Feb 18, 2020

youknowriad commented Mar 17, 2020

youknowriad commented Mar 17, 2020

youknowriad Mar 17, 2020

youknowriad commented Mar 17, 2020

youknowriad Mar 17, 2020

georgeh Mar 20, 2020

wpscholar Mar 20, 2020

georgeh Mar 20, 2020

wpscholar Mar 20, 2020

carlomanf Apr 4, 2020

georgeh commented Mar 23, 2020

jasmussen commented Mar 24, 2020 •

edited

Loading

wpscholar Mar 25, 2020

kjellr commented Apr 22, 2020

dingo-d commented Apr 30, 2020

mcsf commented Jun 1, 2020

georgeh commented Jun 1, 2020

Create Query Block #20106

Create Query Block #20106

Conversation

georgeh commented Feb 7, 2020

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

epiqueras left a comment

Choose a reason for hiding this comment

georgeh commented Feb 11, 2020

epiqueras commented Feb 12, 2020 via email

jeffersonrabb commented Feb 12, 2020

epiqueras commented Feb 12, 2020

georgeh commented Feb 14, 2020

georgeh commented Feb 18, 2020

youknowriad commented Mar 17, 2020

youknowriad commented Mar 17, 2020

Choose a reason for hiding this comment

youknowriad commented Mar 17, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

georgeh commented Mar 23, 2020

jasmussen commented Mar 24, 2020 • edited Loading

Choose a reason for hiding this comment

kjellr commented Apr 22, 2020

dingo-d commented Apr 30, 2020

mcsf commented Jun 1, 2020

georgeh commented Jun 1, 2020

jasmussen commented Mar 24, 2020 •

edited

Loading