[Resolved] Ultimate Gutenberg Addon Blocks not working as axpected in Toolset Templates

[Author]

Posts

[kaiD]

I am trying to:
Use a Ultimate Addon Block for Gutenberg in my Toolset Template. It's the "Icon-List" Block.
In the Backend it all looks fine but on the front end the icon is WAY too big. Same goes for the "Info-Box" Block from Ultimate.
If i use the blocks on a regular page everything works fine. So i guess it is a toolset based issue.

Link to a page where the issue can be seen:
Page with a Toolset Template: hidden link
Regular Page which uses the same block: hidden link

I expected to see: An icon list which icon is as big as the text

Instead, I got: An icon that is WAY TO BIG

[Luo Yang]

Hello,

I have compared both pages you mentioned above, in the problem page:
hidden link
There are some CSS style missing:

.uagb-icon-list__source-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

I am not sure which one is the "Toolset Template" you mentioned above, if it is a content template, please try to edit that content template, in the sidebar, there is a section "CSS-Editor", you can put above CSS codes into "CSS-Editor", and test again. See screenshot css-editor.JPG

[kaiD]

Hi ,

thanks for your quick response.
I put the CSS in the editor as decribed (see screenshot) but no change.
I'm using a Toolset-Content-Template for this page.
It 's a woocommerce archive page and i've inserted the content template via astra hooks above the regular archive content.
The templates name is: Umweltfreundliche Verpackungen above; ID: 1065

In the mean while i'm used another ultimate block "contents table" and this one also did not work like expected on the front end but works alright in the backend - this just for info.

Could you please have another look. Thanks.

[Luo Yang]

In the problem page:
hidden link

The CSS file of "Ultimate Add-Ons für Gutenberg" plugin does not load in front-end:
hidden link
So there are some CSS style missing in content template, and conducts the problem.

I have tried these in your website:
Edit content template "Umweltfreundliche Verpackungen above", in the top, add a HTML block, with below codes:

<link rel='stylesheet' id='uagb-block-css-css'  href='<em><u>hidden link</u></em>' media='all' />

Add below CSS codes into CSS-Editor:

.uagb-icon-list__layout-vertical .uagb-icon-list__wrap{
flex-direction: column;
}
div.uagb-icon-list__outer-wrap .uagb-icon-list__wrapper:first-child {
    margin-left: 5px;
}

Please test again, check if it is fixed.

[kaiD]

Hi,

thanks again.
The problem with the size of the icons is now fixed. Even tough they are still a little bit too big.
With your solution i am not able to make further adjustments, right? Because if i change the size of the icons or the color in the backend nothing happens in the front end.

Is this a bug which gets fixed in toolset?

[Luo Yang]

It should be a compatibility issue, Toolset Content template won't be able to load other plugin CSS file by default, if you need more assistance for it, please provide a copy of your website in below private message box, we need to test it in localhost.
https://toolset.com/faq/provide-supporters-copy-site/

You can put the duplicator package in your own google drive disk, and share the link.

[Minesh]

Luo is on vacation. This is Minesh here and I'll take care of this ticket. I will download the package in the mean time and get back to you on Monday.

However, would you mind to tell me what exactly the issue is or what issue is fixed and what issue is not resolved yet?

[kaiD]

Hi Minesh,

thanks for the info.
If i unterstand Luo right then Toolset Content Templates do not load external CSS from other block developers. That causes trouble if i am working with these blocks in a content template. In my case it the ultimate addons for gutenberg.
With every block from them i've got the problem that in the backend it looks as expected but not at the frontend.
The CSS-Code Luo gave me solve the problem with the size of the check-icons (screenshot) but i am not able to make some further adjustment in the backend like changing the color for example.

The Content-Template is: Umweltfreundliche Verpackungen above
The Page URL: hidden link

What i need is to work with the ultimate blocks in a toolset content template - that means the external css have to be loaded.

Hope my explanation helps.

[Minesh]

We already know CT build with Toolset not loading the style Ultimate Gutenberg Addon plugin blocks. This is known issue to us.

However - to ensure that the issue is exactly you are facing, you can tell me how you assigned the Content-Template "Umweltfreundliche Verpackungen above" to the following page?
=> hidden link

Also, if the current site is your test platform, I also encourage you to check with the Toolset Views Beta version we publish as Devs claims that they added a fix. Would you mind to install the Toolset Views Beta version 3.2 on your site and check if that helps you to resolve your issue. You can download it from your accounts page:
=> https://toolset.com/download/toolset-views/#changelog

[kaiD]

Hi Minesh,

it seems that i didn't get an e-mail to your response so sorry for the delay.
I've now installed views beta on the site and deleted the html part and the css Luo inserted manually.
Problem stays the same. (For your info: After testing i inserted the html code and the css again).
Feel free to check it for yourself on the page.

To answer your question: I've inserted the Content-Template "Umweltfreundliche Verpackungen above" via a Astra Theme Hook (screenshot). You'll find the Hook under: Design > Astra Options > Custom Layouts > Umweltfreundliche Verpackungen above

Hope that's helps.

I'm looking forward to a fix.

Thanks again for your help.

Kai

[Minesh]

This is not how the Toolset blocks CT is intended to use.

If you check the following post, I've assigned the following content template where I've added the icon list block:
=> hidden link

Then I've assigned that content template to the following post, and I can see the style is working:
=> hidden link

Currently, the UAG blocks are added to CT is compatible when its added to CT and that CT is assigned to any post/pages. I checked with post type and taxonomy archive and added the "List Icon" block to it and its not supported yet and I've raised it as a compatibility issue.

Please note that you need to user the Toolset way to build your archive (then maybe in future when compatibility will be added to archives, the UAG blocks styles will be applied).

The way you currently build the archive, that way is not going to support, you may need to find an alternative. You simply need to understand that the hooks plugin can't use Blocks. Maybe the correct solution here is for the hooks plugin you are using needs to add support for the blocks editor or to use an alternative approach.

I am escalating this ticket for the issue that UAG blocks styles are not applied to archive created using Toolset blocks where you added UAG blocks. I will get in touch with you when I get any updates on that but I do not have any alternative/workaround to offer you that fix the style issue when you using Astra hook plugin.

[Minesh]

I am escalating this ticket for the issue that UAG blocks styles are not applied to archive created using Toolset blocks
==>
I would like to update you that the above issue is fixed and fix is set to publish with the next release with Toolset Blocks 1.2.2 version.

[Minesh]

The fix for this issue is shipped with the latest Toolset Blocks version 1.3.

*** Please make a FULL BACKUP of your database and website.***
Could you please update ALL Toolset plugins to it's latest officially released version. You can download the latest plugin release from your accounts page:
=> https://toolset.com/account/downloads/

Can you please update Toolset plugins and try to resolve your issue.