Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Show part of Query Loop Block data in popup

  • Hi

    I have query loop block on my client’s website page “about us” Query is listing custom post type team member. So it’s basically listing people with photo and title etc. to grid.

    This works well as always but it also has 2 buttons with each post listing item Linkedin button and Bio button. Linkedin button gets persons linkedin page link from custom field on post type. Now we come to the real challenge Bio button is supposed to open popup with bio text that comes from custom field. Now i have custom popup (done with light script) working and i first just tried to put pop up container inside “Post Template” in grid. Now the way this works is basically that it will always show BIO text from the first loop item so js pop up will not refresh content on this method. So i think it would be better if there was a way to get post id from loop to tricker button so that correct post content is showed inside popup.

    is there some some query loop block related hook or action i can use to get looped item post id etc to the button?

  • Hi there,

    try this:

    1. Add this PHP Snippet to your site:

    add_filter( 'render_block_generateblocks/button', function( $block_content, $block ) {
        if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'get-id' ) !== false ) {
    	$find = 'placeholder';
    	$replace = get_the_id();
    	$block_content = str_replace( $find, $replace , $block_content );
        return $block_content;
    }, 10, 2 );

    2. select a GB Button:
    In Advanced > Additional CSS Class(es) add: get-id
    And create a data attribute of data-id with a value of placeholder

    The code above will replace the placeholder text with the ID

  • Thank you very much David i will try that.

  • Let us know how you get on, or if you need to put the ID somewhere else.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.