Block Bindings: Add editor preview to acf-field source.

[cbravobernal]

What

Right now, the experience with block bindings in SCF is not the best. The image block binding is broken. There is an extra warning from array to string conversion, and all the block binding place holders are just the default placeholder. (With the SCF Fields name)

without_pr.mov

This PR enhances the experience on the editor by using the new Editor APIs. Now only we use the getValues one. Preventing from edition, but #173 already allows to edit them too.

I need some more testing with different field types for editing. But with this PR, we cover all block bindings supported blocks and their attributes with field types like select, checkbox, url, text field, textareas and numbers.

Why

To enhance the editor experience with block bindings and custom fields.

Screenshare and how to test.

after_pr.mov

Create a custom post type, a field group, some fields.

Use the code to link those fields with their respective blocks, sharing an example so you can copy-paste:

Heading

<!-- wp:heading {"level":4,"metadata":{"bindings":{"content":{"source":"acf/field","args":{"key":"videogame_title"}}}}} -->
<h4 class="wp-block-heading"></h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":4,"metadata":{"bindings":{"content":{"source":"acf/field","args":{"key":"hours_played"}}}}} -->
<h4 class="wp-block-heading"></h4>
<!-- /wp:heading -->

Image

<!-- wp:image {"metadata":{"bindings":{"id":{"source":"acf/field","args":{"key":"videogame_image"}},"url":{"source":"acf/field","args":{"key":"videogame_image"}},"alt":{"source":"acf/field","args":{"key":"videogame_image"}},"title":{"source":"acf/field","args":{"key":"videogame_image"}}}}} -->
<figure class="wp-block-image"><img src="#" alt=""/></figure>
<!-- /wp:image -->

Button

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"bindings":{"text":{"source":"acf/field","args":{"key":"text"}},"url":{"source":"acf/field","args":{"key":"igdb_url"}},"linkTarget":{"source":"acf/field","args":{"key":"igdb_target"}},"rel":{"source":"acf/field","args":{"key":"igdb_rel"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Binded Button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

[gziolo]

Nice one!