ACF PRO 5.8.0 Beta4 is now available for download 🥳🤩❤! This includes all the new awesome features shown in the ACF 5.8 – Introducing ACF Blocks for Gutenberg announcement.
To test ACF PRO 5.8.0-beta4, please login to your store account and click the See all versions link alongside your license. Download, extract and replace ‘advanced-custom-fields-pro’ plugin folder contents.
Think you’ve found a bug? Please post in detail a new support ticket.
Another step closer.
This new release marks another step closer to the full release of 5.8.0. We have spent a lot of time over the past few months improving and polishing our ACF Blocks feature and can’t wait to see the response! Here’s a look at the updates waiting for you in this new beta version.
We have redesigned our block implementation to take full advantage of native React Components to handle block rendering. This results in a much snappier experience when clicking between blocks, toggling between modes or just navigating around the block editor.
ACF Blocks are much more aware of their state and surroundings which results in less spinning wheels and more smiling faces.
This version also includes a new library for accessing meta within the block preview. This allows us to take serialized form data from the DOM and setup fake database results for the render_callback or render_template PHP code to use.
Don’t worry, this doesn’t actually insert anything into the database, but it does allow functions like get_field() and have_rows() to work perfectly across all field types (including the clone field)!
An added bonus is that we found a way to run block data through a PHP filter prior to saving the post. This opens up a lot of potential including saving block data as actual meta in the database!
Block data is still saved within the post_content HTML as Guten-friendly JSON, but the format is improved to better match “post meta”. This allows you to delete and re-create fields without loosing data!
Thanks to your feedback from 5.8.0-beta3, we added a new JS action called “render_block_preview” which is fired each time the block preview is rendered.
The intention of this action is to allow developers to “initialize” JS functionality on the newly rendered DOM elements.
The action callback receives both the block jQuery element and the block attributes (id, mode, className, etc). Here is an example showing how to use this new action.
acf.addAction('render_block_preview', function( $el, attributes ){
$el.find('.my-element').initializeThing();
});One last neat feature in this new release is the ability to define custom SVG icons within the acf_register_block() function!
You may have seen us tweet about this win a few weeks ago. Here’s some example code to make a rainbow icon.
acf_register_block(array(
'name' => 'rainbow',
'title' => __('Rainbow'),
'icon' => '<svg viewBox="0 0 20 20"><path d="M10,4.75c-5.316,0-9.625,4.505-9.625,10.062c0,0.241,0.196,0.438,0.438,0.438h7.875c0.242,0,0.438-0.196,0.438-0.438c0-0.725,0.392-1.312,0.875-1.312s0.875,0.588,0.875,1.312c0,0.241,0.195,0.438,0.438,0.438h7.875c0.242,0,0.438-0.196,0.438-0.438C19.625,9.255,15.316,4.75,10,4.75 M11.715,14.375c-0.162-0.998-0.868-1.75-1.715-1.75s-1.553,0.752-1.715,1.75H6.523c0.193-1.968,1.676-3.5,3.477-3.5c1.801,0,3.284,1.532,3.477,3.5H11.715z M14.354,14.375C14.153,11.923,12.282,10,10,10s-4.154,1.923-4.355,4.375h-1.75C4.106,10.957,6.755,8.25,10,8.25s5.894,2.707,6.104,6.125H14.354zM16.979,14.375c-0.214-3.902-3.252-7-6.979-7s-6.765,3.098-6.979,7h-1.75C1.49,9.505,5.308,5.625,10,5.625c4.691,0,8.51,3.88,8.729,8.75H16.979z"></path></svg>',
));Please find the full list of changes below:
acf_setup_meta() and acf_reset_meta().<svg /> element.