Feature: Looper Block

[iansvo]

Fixes #967 #1061

This PR adds a new block: Looper. This block is based on some work @tomusborne did previously and I made a few adjustments and optimizations.

Dev Tasks

• [x] Add "No Results Found" toolbar option (similar to pagination)
• [x] Add options for end_size and mid_size pagination_links args
• [x] Review issues for possible improvements
• [x] Enable instant page transitions
• [x] Clean up files and minimize duplicated functions where possible

Changes

• New Looper block effectively deprecates the Query Loop. No actual "deprecation" has been added so the existing block will continue to function as it always has.
• The Looper block uses a container on the interior instead of a Grid block for greater overall flexibility. For best results, CSS grid should be leveraged to create the layout.
• Looper block now passes it's WP_Query down to the pagination and containers, so there aren't multiple queries in play anymore.
• Attribute names were tweaked so they will make sense if our query source isn't WP_Query (which is a planned enhancement at this time).
• Setup an InnerBlockRenderer pattern for the Container so it's child output is easy to override with less complex code.
• LoopRepeater and LoopInnerRenderer were ported from query-loop and consolidated to make the code more straight forward.
• Added a new No results found option for Looper blocks that will display when the query is empty.
• Added end_size and mid_size parameters for pagination (Looper block only)
• Updated default navigation element to nav and added nav support for containers
  • @diggeddy We may want to include documentation around the use of an aria-label with a nav element as an a11y best practice.
• Added an option to disable force reloads and allow "instant page navigation" for Looper blocks using pagination.
  • We tried to use the new interactivity API which was a bust because the DX is currently subpar and extremely difficult to understand. We were able to implement the solution with vanilla js and < 100 lines of code, so it's lighter and simpler to maintain.
• Added custom alias for @utils and @components. I added a jsconfig.json file to make sure they work correctly in IDE's such as VSCode so they will be seen by webpack, babel, eslint, etc.

Next Steps

• I would suggest we look at the way we are using DOM Document and see if we can reasonably replace any of it with the new WP HTML API. I did some light work on this but I wanted to note it here for future follow up.
• I think we need to look at a way to allow the Looper to output as a ul or ol. If someone is going to use this to potentially loop anything then having the list structure as an option is necessary.
• I'd really love to be able to provide the current index to a block or a custom hook someone adds. I think having that kind of thing would be super helpful. You can get the numbering done with CSS but it wouldn't be something you could pass to a hook. I think we could potentially do it using a block variation or else a Dynamic data tag, which kinda feels like the correct way to do this for best results.
• Future enhancements planned include: Ability to other sources (Users, Taxonomies, certain ACF fields, etc).

[iansvo]

@tomusborne Us waiting to retire the Query Loop block like

[iansvo]

@tomusborne So far I think the last thing remaining is cleaning up the attribute names so they make a bit more sense and we're not using a wpQuery attribute. I think we need to keep the attributes the same in a few places to avoid compatibility problems with the Query Loop block, or else namespace these context values differently.

Definitely super close to having this done, but I think this needs to happen first before we merge so we're not stuck with that super specific attribute.

[tomusborne]

Cool, clean up time - let's make sure we're not holding on to any baggage here that we don't need to.

Then we can look at how extendable it is for things like nested loops, ACF integration etc..

[tdrayson]

Would love to see the ability to query other things like taxonomies, users etc alongside nested loops too.

[iansvo]

Would love to see the ability to query other things like taxonomies, users etc alongside nested loops too.

This is something that we're going to tackle in future iterations of the new block. It's absolutely on the roadmap. One thing we're specifically interested in is a proper ACF integration, but in general we want this to be as multi purpose as possible.

[tomusborne]

@iansvo Are you able to get the loop to load on the frontend?

Also, the WP_Query SelectControl - should it display if it only has one option? Maybe we need a filter here to add more options, but the select only shows if there's more than one.

[iansvo]

@tomusborne Both things are resolved in my latest push. I had a few instances of the old context/attributes I missed and I updated the queryType to just be filterable like you said.

[SchneiderSam]

JetEngine User here 🙋‍♂️ hope this will work also for JE!?

[iansvo]

JetEngine User here 🙋‍♂️ hope this will work also for JE!?

Our first-class integration is going to initially be with ACF, but we will be exploring ways we can allow folks to filter things and effectively use whatever query source they can think of. But we'll have to see how that all looks as we develop. We want to introduce flexibility without a bunch of technical debt, so that's going to require some experimentation.

[tomusborne]

This code has been ported into new blocks in 2.0. Closing this.