Skip to content

Instantly share code, notes, and snippets.

@seemly
Last active May 12, 2023 15:02
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save seemly/1e57547ea07a954f5825f438a40e4254 to your computer and use it in GitHub Desktop.
Save seemly/1e57547ea07a954f5825f438a40e4254 to your computer and use it in GitHub Desktop.
Enable the use of ACF shortcodes within the native Query Loop gutenberg block.
<?php
/**
* Shortcode Extended
*
* @package ShortcodeExtended
* @author Chris Sparshott
* @copyright 2022 Chris Sparshott
* @license GPL-2.0-or-later
*
* @wordpress-plugin
* Plugin Name: Shortcode Extended
* Plugin URI: https://github.com/seemly/shortcode-extended
* Description: Enable ACF custom field usage in Query Loop block
* Version: 0.0.1
* Requires at least: 5.2
* Author: Chris Sparshott
* Author URI: https://sparshott.co.uk
* Text Domain: shortcode-extended
* License: GPL v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
if(!class_exists('ShortcodeExtended'))
{
class ShortcodeExtended
{
public function render($attributes, $content, $data)
{
// just a failsafe
if(!($data instanceof WP_Block))
{
return $content;
}
// if no ACF not activated or installed, then return early.
if(!function_exists('get_field'))
{
return $content;
}
// if no ACF shortcode found in content, then return early.
if(strpos($content, '[acf ') === false)
{
return $content;
}
// Native functionality is to call `wpautop`, which means we lose access to the Post ID and ACF related data
return do_shortcode($content);
}
}
add_filter('register_block_type_args', function ($args, $name)
{
// Here we list the native blocks we are likely to include ACF shortcodes in.
// This list probably needs to be expanded, but suits my immediate requirements.
$validBlocks = ['core/shortcode', 'core/paragraph', 'core/list'];
// override the native render_callback function to ensure ACF shortcodes run as expected.
if(in_array($name, $validBlocks))
{
$args['render_callback'] = [new ShortcodeExtended, 'render'];
}
return $args;
}, 10, 2);
}
@scott8035
Copy link

I've been trying to do something similar, but what I have found is that the default post ID at the time [acf field="..."] is processed is either the outer page ID or the ID of the Gutenberg block, not the queried post item ID. Have you experienced the same problem?

@seemly
Copy link
Author

seemly commented May 5, 2022

I've been trying to do something similar, but what I have found is that the default post ID at the time [acf field="..."] is processed is either the outer page ID or the ID of the Gutenberg block, not the queried post item ID. Have you experienced the same problem?

Hi, Scott! Sorry for the delay.

No, this isn't something I have experienced. I was able to:

  • Create a custom post type,
  • Create an ACF Field Group with simple field types (text fields, or numbers), and associate this field group to my custom post type.
  • Create a new post, select the Query Loop block, and use the ACF shortcode to display custom field data as required.

image

You will want to make sure that you have "Inherit query from template" option disabled, so each loop item has access to its iterative Post ID value in order for the ACF shortcode to work.

image

I think the problem you're facing is that the shortcode block always runs the wpautop function, and the do_shortcode function that is eventually triggered doesn't have the current loop iteration Post ID, so it falls back to either the block ID, or the parent Post ID.

https://myeasyguide.com/useful/use-acf-custom-fields-in-query-loop-block/

@stkjj
Copy link

stkjj commented Sep 28, 2022

Tried but failed. Custom Post Type (course) is created and usable, ACF field (price) is attached to it and showing on single posts (image 1), but adding the ACF shortcode to the Query Loop Block (image 2) does not give any result (image 3):

Screenshot 2022-09-28 um 09 48 04

Screenshot 2022-09-28 um 09 43 26

Screenshot 2022-09-28 um 09 44 16

Getting the custom taxonomy to the list of posts is the next challenge. But first things first ;-)

@seemly
Copy link
Author

seemly commented Sep 28, 2022

Whilst looking at your screenshot I can see it's fine, for others reading this, it's worth paying attention to the list of Valid Blocks that do_shortcode should run on. You can find an array of valid blocks in the code.

The other thing is your ACF price field variable name is odd. Usually, you just access it by name. It looks like you've renamed the key manually to look like a variable. Is that right?

And if you have manually renamed the key, it might be worth reverting it to a normal text string just to troubleshoot your issue.

From:
{$price}

To:
price

@stkjj
Copy link

stkjj commented Sep 28, 2022

for the naming within the shortcode I followed the ACF documentation.Indeed this was the issue. Just naming it "price" solved it! Thanks

@seemly
Copy link
Author

seemly commented Sep 28, 2022

Awesome! I'm pleased to hear you got it working!

@Blindeman
Copy link

Wow, this is wonderful, thank you! I'm actually using it at the moment with the query loop that comes with the (free version of the) GenerateBlocks plugin and it works beautifully.

@seemly
Copy link
Author

seemly commented Feb 28, 2023

Wow, this is wonderful, thank you! I'm actually using it at the moment with the query loop that comes with the (free version of the) GenerateBlocks plugin and it works beautifully.

I'm pleased to hear that it has helped you, @Blindeman! Thanks for letting me know.

@kaiakonsap
Copy link

kaiakonsap commented May 11, 2023

Thank you very much for the plugin.
I got my ACF fields working on a loop that iterates courses(custom posts) in a page thanks to this plugin.
But I had a failure putting it to work in a loop that is in WP full site editor(edit site). I was trying to do this on a custom taxonomy template.
Feeling sad, anyone have any ideas how to do this? Or how to modify or start to understand what is so different there?
An image from WP fill site editor
Screenshot 2023-05-11 at 20 18 12

@seemly
Copy link
Author

seemly commented May 12, 2023

Thank you very much for the plugin. I got my ACF fields working on a loop that iterates courses(custom posts) in a page thanks to this plugin. But I had a failure putting it to work in a loop that is in WP full site editor(edit site). I was trying to do this on a custom taxonomy template. Feeling sad, anyone have any ideas how to do this? Or how to modify or start to understand what is so different there? An image from WP fill site editor Screenshot 2023-05-11 at 20 18 12

Unfortunately, I have no experience with full site editing (yet). It's also not 100% clear to me what the problem is here, and I don't have the time to try to recreate and troubleshoot your specific issue.

Sorry!

@kaiakonsap
Copy link

Yes, i understand, it needs quite long investigation. If I do come up with anything I will post it here. Of course all hints still very welcome from others.

@kaiakonsap
Copy link

kaiakonsap commented May 12, 2023

Thank you again Seemly. I solved it for my own use and still with the use of your great and simple plugin.
In short, I added to your conditional statement which checked if acf shortcode is NOT being used to check the same also for my own shortcode. So in the end, my shortcode is being treated like the acf shortcode. And this did the trick. I still do not understand why, what is the difference between my shortcode and acf shortcode. But it just worked. Beforehand the ID of elements in the loop was the same. It was not the parent page/ taxonomy ID but it took the first ID of the element in the loop and repeated it for the others in the loop.

My own shortcode comes from simple custom plugin, firstly uses get_the_ID() function to get the id of current item in the loop and then acf function to get the field - get_field('field','id')
And somehow this combination works in the custom template for taxonomy archive created in WP full site editor(WP 2023 theme ) and simple acf shortcode will not work.
Some images for those interested or having trouble with solving the same issue.
Highlighted edited part of original plugin from Seemly:
Screenshot 2023-05-12 at 17 44 15

My plugin here:
Screenshot 2023-05-12 at 17 52 35

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment