Expose inputs for loop blocks

[brookewp]

This might be replaced by the work in #405, but it's a small step towards the goals there.

This adds a special type ui:input and loop type selector when loop: true so we can use that to show inputs when relevant.

Returning all results filtered by an input (e.g., categories/collections) is a common use case, so examples of this have been added for Shopify and Salesforce. I also added an example in the Art Institute to set the number of results returned. A visual example of all three of these can be seen here:

Screen.Recording.2025-03-12.at.6.16.52.PM.mov

Updated to include input in the query panel to update any selection:

Screen.Recording.2025-03-19.at.11.09.41.AM.mov

Note

I ran into a few things that we will want to consider when setting up queries, relating to the UI. One thing is a way to add text to the placeholder, as the generic text won't work in all cases and might not be the same as a block description. So for now, in this PR, I've added instructions, but this could change with #405. Also open to alternative suggestions here!

Testing steps

• Try new block(s) and add input

  • Salesforce: Products By Category with category ID
  • Shopify: Products by Collection with collection ID
  • Art Institute of Chicago Loop

• Select the parent block and edit the ID in the block inspector panel

  • Edit multiple IDs (Shopify will have single inputs per ID, and Airtable/Art Insitute will have a separate list).

[github-actions]

Test this PR in WordPress Playground.

[alecgeatches]

@brookewp This looks great! I'm excited for both the filter options and the easy retargeting a block to a new ID. Testing now.

[alecgeatches]

@brookewp Noticed an odd bug that happens after you pick an item from the Art Institute block, and then pick another one on the same page:

Screen.Recording.2025-03-20.at.12.38.19.PM.mov

Reproduction steps

1. At the bottom of the root plugin file remote-data-blocks.php , add this line to enable the Art Institute example:

   require_once __DIR__ . '/example/rest-api/art-institute/art-institute.php';
   

2. Create a new post, insert the "Art Institute of Chicago" block.

3. Click the "Choose" button and select an art piece.

4. Click "Choose a pattern" and select the default pattern.

5. Delete the block, and re-insert an "Art Institute of Chicago" block.

6. Select an art piece.

7. Click "Choose a pattern", but see that the page is blank this time.

Notes

• I can't seem to reproduce this in trunk (but I'm not 100% sure this is your problem)
• I can't reproduce this in the current branch (try/loop-with-input) with a Salesforce block, so it seems specific to the art institute block for now.
• There aren't any console logs to help

[alecgeatches]

I like this! Here's what just this looks like for anyone interested:

[alecgeatches]

With the exception of that one pattern issue (that I'm not 100% sure is related to this feature), this works great! Feel free to merge if you fix the pattern issue or determine it to be unrelated.

[brookewp]

Thanks @alecgeatches! I can replicate the issue you found in trunk after rebuilding my env. I'll open an issue/PR for that separately.