Chore: Update ACF plugin to v6.2.1.1

kasprzyk-sz commented 1 year ago

Current ACF version: 5.9.1

Tasks:

1. Fix ACF blocks rendering in the WP Gutenberg editor

The ACF v6.0.0 introduces major updates to blocks and as a result, the blocks registered with ACF are not rendered in the editor. After some investigation, I suspect that the problem is related to the changes in the block ID.

In the current version, a block id has the following format: block_64f9c4e7edb03. After the update the id is generated differently and outputs acf_block_123-12-1212. This format is causing an error in this function:

https://github.com/visual-framework/vf-wp/blob/master/wp-content/plugins/vf-gutenberg/vf-gutenberg.php#L337

Nevertheless, I'm not sure if this is the main problem or if there are more dependencies which affect the rendering.

2. Upgrade legacy blocks to block.json

ACF guide to update legacy blocks

ACF v6.2.1.1 download

advanced-custom-fields-pro.zip

To update the plugin - copy and replace all files in .../vf-wp/dist/vfwp-external-plugins/advanced-custom-fields-pro

dbushell commented 1 year ago

I've added a PR for task 1: https://github.com/visual-framework/vf-wp/pull/1276

Basically the ACF block ID was used as a unique name for the <iframe> and its JavaScript callback function (to auto-resize the iframe responsively). The new ID format included hypens causing a JS error.

A quick fix is to use an md5 hash of the ID. The actual value doesn't matter it just needs to be unique.

kasprzyk-sz commented 1 year ago

Thanks @dbushell!

I still noticed a few weird things going on:

If you duplicate a block, it doesn't show up.
After I did the hard refresh shift+cmd+r on my mac some blocks lost the styling and it returned only if I changed something in the custom fields.
The WP top toolbar is missing

Screenshot 2023-09-13 at 14 13 48

See the issues on this video:

https://github.com/visual-framework/vf-wp/assets/54020899/86bb615d-a7b5-45ff-8bd9-b27cd35965fa

dbushell commented 1 year ago

ah ok I will investigate!

dbushell commented 1 year ago

Seems like the block ID issue was only a minor one and there are more compatibility issues with ACF 6.

I think I've found a solution to fix the styles and it has also fixed the admin toobar.

The duplicate block issue is still confusing me I'll report back when I figure that out.

dbushell commented 1 year ago

I've found another bug with the ACF block ID change https://www.advancedcustomfields.com/resources/whats-new-with-acf-blocks-in-acf-6/#block-id

Due to the dynamic block ID generation, this change is backwards compatible for the majority of users, unless you use parse_blocks() to read ACF data, and rely on it returning a block ID.

This is something we are doing to allow is_container setting. Blocks like the vf-divider can go full-width and break out the centre column.

divider

It still works in the Gutenberg editor, but in the front-end template there is no block ID so it cannot read this setting and fails to go full-width.

The ACF blog post suggest a few workarounds. I think it can be fixed. That might also fix the duplicate block bug.

dbushell commented 12 months ago

Notes on task 2 (block.json) - research in progress

render callback function

Currently we're using acf_register_block_type that allows render_callback to be a dynamic PHP function. The new ACF block.json only allows renderCallback to be a string (function name). That would have to be a global function which isn't great. Or we maybe use renderTemplate and have the callback logic in there.

block names

Al the block plugins that extend VFWP_Block have a static name method:

static public function get_name() {
  return 'vfwp-button';
}

This gets used to generate the config for acf_register_block_type and to find the template path etc. If that config is moving to a JSON file, we need to get the name from there, rather than hard-coding it.

dbushell commented 12 months ago

This PR https://github.com/visual-framework/vf-wp/pull/1276 fixes the block renders

Please let me know if you find more issues @kasprzyk-sz

Duplicate block issue should be fixed https://github.com/visual-framework/vf-wp/issues/1275#issuecomment-1717508768 Also the container toggle issue should be fixed https://github.com/visual-framework/vf-wp/issues/1275#issuecomment-1717980853

It no longer relies on any ACF block IDs because they're not unique anymore and not available in some templates.

If you edit block fields in the right-side column the iframe render has to refresh so it might disappear for a second. It shouldn't be any slower than it was before. It's difficult to test on my local machine because Docker is super slow (it's not using native mac arm images).

I'm back next Tuesday to fix more bugs!