Please provide:
- How many repeaters sub_field images you want to migrate
- Provide the name of the repeater name and its image sub_field name
- Check the: show-field-keys-acf-pro article to get the acf field keys for new fields
After this steps write a comment and I’ll show you the code and instructions on how to use it. @peternitras-be
If You never did it before the good starting point would be to see InnerBlocks with ACF blocks written by Bill Erickson.
The working solution:
{
"name": "acf/your-block",
"title": "Your Block",
"supports": {
"jsx": true,
"mode": false // disable mode switch in toolbar
},
"acf": {
"mode": "preview", // default mode (preview / edit / auto)
"blockVersion": 2
},
"align": "full"
}
Please remove the comments before copy & paste it as a JSON format doesn’t allow it.
Just to mention – for variations with ACF Pro 6.0:
add_action('init', function() {
wp_register_style('awp-block-styles', get_template_directory_uri() . '/assets/css/custom-block-style.css', false);
register_block_style('core/heading', [
'name' => 'colored-bottom-border',
'label' => __('Colored bottom border', 'txtdomain'),
'style_handle' => 'awp-block-styles'
]);
});
Another thing… If You want to style the blocks & controls – why not just make css file for it and just add it to backend like:
add_action('admin_head', 'my_custom_acf_styles');
function my_custom_acf_styles() {
echo '<style>
.my-field-class {
font-family: "Lucida Grande";
font-size: 12px;
}
</style>';
}
How about unload it with wp_dequeue_style?
The second option is to make it with wp_deregister_style.
if( ! is_admin() ) {
add_action( 'wp_enqueue_scripts', 'my_dequeue_style', 11 );
function my_dequeue_style() {
wp_dequeue_style( 'my-handle' ); // the handle of style of the block
}
}
If You’re new to ACF & PHP – it’s easy.
Step 1:
Make ACF field: image and set “Return Format” option to “Image URL”
Step 2:
Let’s say You give the Label “My background” -> the (autogenerated) Name will be: my_background so:
Now You can use it anywhere in post / page:
<div style="background-image: url(<?php echo get_field('my_background'));">...</div>
With acf_register_block_type() – yes:
name (String) A unique name that identifies the block (without namespace). For example ‘testimonial’. Note: A block name can only contain lowercase alphanumeric characters and dashes, and must begin with a letter.
I would use the action activated_plugin.
Read more here: https://wordpress.stackexchange.com….
I’ll start with the point that it’s easier to use script handle rather than script file to all JS & CSS files:
{
"name": "block-name",
"style": "block-handle-css",
"editorStyle": "block-handle-css-editor",
"script": "block-handle-js",
"editorScript": "block-handle-js-editor",
"viewScript": "block-handle-js-view",
}
For me it’s opposite. ACF should be ACF way. If you want more native Gutenberg just do it wit node & JS.
In case of errors after fixing the render path – I’m using the handle-name for all scripts and styles just because the new API 2 in ACF is not fully compatible with native blocks JSON like I should expect.
Once again – the new docs – sucks! & need to be fixed asap.
I made simple test with nested blocks + native styles – with and without clocking template. I’m correct at some point – it’s working without locking template like above.
use conditional if ( $is_preview ) { ... } or is_admin()
Both should work fine inside 'enqueue_assets' => function() { ... } when registering the block with api 1 (not acf 6.0)
Did You tried without templateLock="all" ?
@omikr0n The idea is to create custom post type with hidden UI and hide it from front-end, link edit post from this cpt in options page or directly in admin menu under custom position like: ‘themes.php’ and save options there rather than real options page.
To get the valuer You’ll need only to check the ID of the post named like “Global Options” or another one with “Theme Options” (eg. post Global Options ID = 8797 – You’ll need to use get_field(‘field_name’, ‘8797’));
You can make it even more clever, but it’s basic idea.
It’s easy!
Just change the way You think about the inner blocks as they’ll always have “only one place” to include the inner blocks.
Is all about making more blocks + limit blocks that You can insert + default block template.
- Make a container block with innerblocks and name it like “Two Columns: Layout A”
- Make a child block called “Two Columns: Layout A – Left Column”
- Make a child block called “Two Columns: Layout A – Right Column”
Now create template with lock function for each blocks mentioned above:
- 1. Container – template with allowed only: 2 and 3 (blocks left & right column)
- 2. Left Col. template with allowed only: ‘core/list’, ‘core/button’, ‘core/image’
- 3. Right Col. template with allowed only: ‘core/heading’, ‘core/paragraph’
More to read: resources/acf_register_block_type – look for: allowedBlocks, template & templateLock.
Just try to keep 2 rules: options only in sidebar and preview mode.
To be clear – in ACF Pro 6.0 there’s no problem like this You mentioned above.
I’m testing now nice plugin – it will soon support also gradients – check it:
https://github.com/Log1x/acf-editor-palette
It use a Gutenberg picker style – it’s co cool and simple!
Yes – it is possible with wp_localize_script. You can read more about it on Codex page: https://developer.wordpress.org/reference/functions/wp_localize_script/
When you’re declaring variables use get_field() – not the_field().
<?php
$bullet_color = the_field('bullet_color');
should be:
<?php
$bullet_color = get_field('bullet_color');
Change variables names so they will not use - sign.
<?php
$ion-asterisk // wrong way
$ion_asterisk // good way
As far as I know some users have this and other problems wen Gutenberg PLUGIN is activated. Do You have it activated?
