Try to develop a PayPal block using ACF-Pro and no JavaScript

[bobbingwide]

Try to develop a PayPal block using ACF-Pro and no JavaScript

[bobbingwide]

I need to undestand the documentation at https://www.advancedcustomfields.com/resources/blocks/

[bobbingwide]

The first version of the block is now available.

It's dependent upon oik for the actual logic to generate the PayPal button.

Obviously it's also dependent upon ACF-Pro for the logic that

• enables registration of the block
• turns the ACF field group into the block's Settings panel

PayPal block settings for the Pay Now button.

ACF Pro fields group "PayPal".

[bobbingwide]

Notes to self.

Question: How does ACF block rendering work?

• acf_register_block_type() registers each block with the render_callback arg to set acf_render_block_callback.
• acf_render_block_callback() sets values for $is_preview and $post_id then calls acf_rendered_block()
• It uses output buffering to capture the output from the block's callback function or template which is invoked by acf_render_block().
• acf_render_block() also enqueues assets defined for the block.

Question: How does the settings panel for ACF blocks work?

This is the magic that's hidden from the normal owner of the plugin since the invoking code is JavaScript that's been built from source code that's not part of the runtime package.

• The Settings area is populated after an AJAX call with action acf/ajax/fetch-block from _acf-blocks.js.
• This is implemented by acf_ajax_fetch_block() which uses a number of acf functions to render the fields associated with the block; acf_get_block_fields, acf_render_fields etc.
• There are lots of filters that you can hook into, if you so wish.
• The AJAX call returns the HTML in data.form
• And ACF's react code shows these fields in the Settings area.

Since I don't have access to the source code I'm not going to investigate any further. Suffice it to say, ACF does quite a lot of work in some generic code that would otherwise have to be written in JavaScript for each block.

[bobbingwide]

Donate button previewed in the block editor.

Donate button in Edit mode, basically the same as the Settings panel with a little extra styling.

[bobbingwide]

Closing this for now. The block is dependent upon oik. I could improve it to remove the dependency but I've got other things to do.