Hello dear ACF PRO users !
I can’t figure out how to get a preview for my ACF blocks in the Gutenberg Editor using the block.json and the native WordPress function register_block_type ?
Reading the official block.json documentation. It appears we can declare example variables like in the following code snippet. But I can’t manage to wrap my head around HOW to get ACF fields this way.
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "my-plugin/notice",
"title": "Notice",
"category": "text",
"parent": [ "core/group" ],
"icon": "star",
"description": "Shows warning, error or success notices...",
"keywords": [ "alert", "message" ],
"version": "1.0.3",
"textdomain": "my-plugin",
"attributes": {
"message": {
"type": "string",
"source": "html",
"selector": ".message"
}
},
"providesContext": {
"my-plugin/message": "message"
},
"usesContext": [ "groupId" ],
"supports": {
"align": true
},
"styles": [
{ "name": "default", "label": "Default", "isDefault": true },
{ "name": "other", "label": "Other" }
],
/**
* ==================================
* THIS PART BELOW !!!
* ==================================
*/
"example": {
"attributes": {
"message": "This is a notice!"
}
},
"variations": [
{
"name": "example",
"title": "Example",
"attributes": {
"message": "This is an example!"
}
}
],
"editorScript": "file:./index.js",
"script": "file:./script.js",
"viewScript": [ "file:./view.js", "example-shared-view-script" ],
"editorStyle": "file:./index.css",
"style": [ "file:./style.css", "example-shared-style" ],
"render": "file:./render.php"
}
There is an ACF object you can declare in it. (ACF Block.json documentation). But there is nothing about block preview or example in it.
So; how can I have a preview for my blocks in the Gutenberg Editor the modern way and populate the ACF fields with examples.
/**
* any-acf-block.php
*/
// PLEASE NOT THIS SOLUTION !
if ( $preview ):
// Insert image here...
endif;
I’ll keep this post updated.
Thanks for reading !
