Explore block bindings UI from PR

[chriszarate]

This PR explores the proposed block bindings UI from this Gutenberg PR:
WordPress/gutenberg#71542

The videos below show a "Shopify Mock Store Block" (one of the examples included in our GitHub repo).

Dropdown UI

The dropdown UI is flexible enough to work for simple workflows, with two main current limitations:

1. Gutenberg block attribute types are limited to specific broad types, while our plugin has a number of specific string types like button_url, image_url, image_alt, etc. In our current custom UI, we filter the available bindings to ones that make contextual sense. For example, for the Image block url attribute, we only show bindings that map to an image_url type.
   • When compiling the available bindings (data) in the editorUI function, we don't have access to the attribute name. In the video, you can see that we are forced to supply all the available options, even when it's clear to the user that they won't work.
   • Ideally, we should pass the attribute name to the editorUI function. This would also allow us to make an informed decision about whether to use the dropdown or modal UI inside the editorUI function.
   • It seems like more specific attribute types (or "roles") might be useful to block bindings in general.
   • We might also want to render certain types differently, e.g, show an image preview for data with an image_url type.
2. We are unable to render any additional controls on the binding. For example, our plugin offers a "Show label" checkbox (visible in the modal video) that optionally renders a preceding label for certain fields. There is no mechanism to implement this with a dropdown.

dropdown.mov

Modal UI

The modal UI gives us total flexibility, and we are able to inspect the block and attribute names and filter out bindings that don't make contextual sense. We can also render custom controls. (This was hacked together quickly, so excuse the rough UI edges.)

modal.mov