[Resolved] Dynamic Data (Featured Image Background) does not update when used in an Element

[Justin]

Hello support team,

Background:
I’ve built an Element (Type: Archive Navigation) that hooks before_main_content and is designed to be used on Post Tag Archive “pages”. This Element contains a GB Grid with GB containers that utilize Dynamic Data to show featured images (Data Type: Post Type; Select Post Type: Posts; Select Source Post: [choose any post with a featured image]; Background Image Source: Featured Image).

Problem:
The preview in the Element editor looks accurate (i.e. displays the featured image of the selected source post), however when when I publish the changes (to my WP staging site), the updated images don’t appear in production.

Additional (Maybe Relevant) Information:
My containers in the grid use linked-container CSS to make them clickable.

I’m using the Yoast Duplicate Post plugin to copy the element before editing it.

[Ying]

1. When you clone a GB block, make sure you do not just copy and paste, this will generate issues due to the same block ID. The simple fix would be selecting the block, clicking the 3 dots icon, duplicating, and removing the original block.

This step will generate a new set of ID for the duplicated block.

2. Upload a background image first, so the dynamic background image option will work. Make sure you only use 1 kind of dynamic option, either the option in the floating toolbar or the option on the right side toolbar.

Let me know how it goes.

[Justin]

Hey Ying,

Thanks for the quick reply. Regarding your comment…

When you clone a GB block, make sure you do not just copy and paste…

…just to make sure we’re on the same page, I’m not using copy/paste, but rather, I’m using a plugin to duplicate the element. Functionally speaking, that may be doing the same thing (i.e. creating issues due to the same block ID), but thought it was worth clarifying.

I just tried duplicating the block but I’m still seeing the same results.

You mentioned…

Make sure you only use 1 kind of dynamic option, either the option in the floating toolbar or the option on the right side toolbar.

I’m currently using the dynamic option on the right side toolbar and can confirm I’m not using the one in the floating toolbar.

Thanks in advance for any other ideas you might have.

[Ying]

Functionally speaking, that may be doing the same thing (i.e. creating issues due to the same block ID), but thought it was worth clarifying.

Yes, clone plugins create the exact same block with the same ID, it’s the same as copy and paste 🙂

Both dynamic options are enabled, but the post type and source post can not be selected or don’t show to me, I would recommend deleting this element, cloning a new element, then duplicating the container block and removing the original one.

https://www.screencast.com/t/njzXjq9oPxTL

[Justin]

That did the trick! Thank you so much.

When you clone a GB block, make sure you do not just copy and paste, this will generate issues due to the same block ID.

…out of curiosity, would would happen if we cloned a GB block and forgot to duplicate it / delete the copy? I’m trying to create a process for my partner that’s as foolproof as possible, but if accidentally forgetting to delete the clone creates issues, this may not be the right approach.

Thanks again for all your help and insight!

[Ying]

I’m trying to create a process for my partner that’s as foolproof as possible,

GB blocks generate CSS dynamically which is great for performance compared to blocks that add inline CSS.
The dynamic CSS is based on the ID, so if there’s more than 1 block that has the same id, the CSS generated by block settings will override each other which will create chaos.

GB pro has a feature called local templates, it’s like a reusable block, but it will generate a new ID every time it’s been inserted into the block editor.

If you don’t have GB pro, then yes, have to make sure the very outside container block is duplicated, so that every block inside it will also have new ids.

[Author]

Posts