Bricks Query Loop for Top-level Parent Pages with Children

In the Bricks Facebook group, a user asked:

Looking for a custom query to output a list of posts in the same hierarchy that the posts use. For example, the posts are like:

Parent 1

- child A

- child B

Parent 2

- child C

- child D

That's the way I need to build an unordered list. If you just query posts you get them all without hierarchy, for example (if sorted by name) child A, child B, child C, child D, Parent 1, Parent 2.

Anyone have a code snippet that will accomplish this?

WordPress has a wp_list_pages() function for showing a list of all Pages, but it outputs all Pages, and there's no direct way to specify that only the top-level Pages and their children are to be included.

This Pro tutorial provides the steps to output top-level parent posts (can be Pages or any hierarchical post type) and their child posts using nested query loops in Bricks.

Given this Page structure:

this will be the output after implementing the tutorial:

Step 1

Edit the Page where you'd like to show the top-level parent Pages and their children with Bricks.

Section JSON is provided near the end.

Add a Section and inside its Container, a Container (UL).

Add a Block (LI) inside the Container.

Enable query loop on the Block.

Post type: Pages

Enable PHP query editor.