[Resolved] Toolset Dynamic Link Breaking Kadence Buttons

[Author]

Posts

[Pete]

Hi there,

We have been driving ourselves crazy with Kadence theme buttons when using a Toolset custom field dynamic link.

This has worked fine for years...we have never had this issue until now.

This from Ben, lead dev at Kadence Themes:

------/

Thanks for reaching out. I've done a little investigating and it appears that toolset is removing/not-outputting the main class when they force their dynamic link into the Kadence Button block. This is causing the CSS in the block outputs to not work. Here is a screenshot showing what I mean: (see attachment)

The button below is the standard output and the button with the missing class is the output after toolset breaks things when adding their link..

This is not something we can fix from our end because it's something toolset is doing and they would need to fix.

-----/

You can see this issue here: hidden link

This a custom post type, we have them on all our websites.

You'll see a few tests, see image attached (aa Fly plz see)

I created two new buttons under the original, the lower two are exactly the same….however the lower (larger) has no dynamic link.
They smaller one, the moment I added the dynamic link, the button on the frontend broke.

I'm hoping you can proved some simple, global CSS to fix this issue otherwise we'll have to change numerous buttons on many sites.

[Waqar]

Hi,

I've checked the page and the content template, but couldn't find the extra buttons shown in your screenshot.
(I already have the admin access details from your previous ticket)

If you've removed the broken button, can you please add it back or share the exact steps to recreate it?

regards,
Waqar

[Pete]

Hi Waqar,

I needed to complete this template with working buttons so used Toolset buttons instead however will add a button to a test page and message you back shortly.

Thank you.

[Waqar]

Sure, please take your time and let me have the link to the test page, when ready.

[Pete]

Hey Waqar,

Ok I've added Kadence buttons to a page temporarily. They are both the same style settings, identical....the one on the left has a standard link we entered.

The one on the right, a dynamic link going to a Toolset custom field.

Now this is a new issue and we can't work out whether a recent Toolset or Kadence update cause this.

Either way we now can't use Kadence buttons with Toolset links

[Waqar]

Thank you, but a screenshot alone is not very useful in this case.

Can you please share a link to a test page where both these buttons are showing? This way it will be clearer, how it is showing now and how you expect it to be.

[Pete]

Apologies, here you go: hidden link

[Waqar]

Thank you for sharing the link to the example page.

During troubleshooting, I noticed that when the Toolset's dynamic source feature is used with the Kadence's "Advanced Button" block, it loses a class "wp-block-kadence-advancedbtn" from its output.

I'm going to pass on these findings to the concerned team internally and for now, you can include the following script in your content template's "JS Editor", which will automatically append this missing class to the "Advanced Button" block output:

jQuery(document).ready(function($) {
    $('.kt-btns-wrap').addClass('wp-block-kadence-advancedbtn');  
});

[Pete]

Hi there Waqar,

Nearly every button is breaking due to Toolset.

Most have this error (see image aa1)

Without your code they break.

Even with your code, the page loads odd and the buttons jump on load.
See this page: hidden link

Towards the bottom See (aa2)....then reload the page on that area, the button jumps.

This really isn't great and we are seeing across 5 sites so far.

[Pete]

Ref and to include previous message....

Or, to better see the resizing button issue as the page loads....
hidden link

This is the issue, the button resizes, has its styles applied, after the page has loaded.

[Waqar]

The custom script executes once the page has finished loading, which is why there is a slight delay in the change of the styles for the buttons.

Unfortunately, I don't have any other quick fix or temporary workaround other than this script. But, I'll keep you updated through this ticket.

[Pete]

Thank you Waqar,

if you could keep us updated, we'd be very grateful.

Thanks again 🙂

[Waqar]

You're welcome and I'll keep you updated.

I'd also like to share an updated custom script, which doesn't wait for the page loading to complete, and hence you won't see the flash of the unstyled button:

<script>
let el = document.querySelector('.kt-btns-wrap');
el.classList.add('wp-block-kadence-advancedbtn');
</script>

You can place this code in a "Custom HTML" at the bottom of the page/content template, where “Advanced Button” block(s) are in use.

[Waqar]

Hi,

I'd like to inform you that in the recent releases of Toolset Blocks/Views plugins, we've introduced some improvements for better compatibility with the Kadence Blocks.

Feel free to update the Toolset plugins to the latest versions and let us know through a new ticket if you still see something out of place.

regards,
Waqar