Enqueue CSS files for a Global Block in the Pro editor

[designerken]

I am using Event Calendar Pro to add a widget of coming events on my home page with a Global Block. I am adding this widget through the Widget Area element in Pro.

When I am on the home page it the widget area displays fine. The plugin’s 4 CSS files are loaded (before the closing BODY tag)

But when I am editing the global block in the editor the widget is not loading any CSS (I assume because the iframe technically doesn’t have a header/footer to load the CSS from the plugin into).

Obviously I can Copy and Paste ALL the CSS from the plugin files into the CSS for the element and get it to render correctly when editing the block, but then I would have double the CSS when save and view on the front end.

Is there a way to ENQUEUE these 4 CSS files on the Global Block editor only?

[marc_a]

Hi @designerken,

Thanks for reaching out!

The thing you are trying to achieve will require some customization and it is outside the scope of our theme support. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

On the other hand, you can check this article on how to enqueue script in the admin side:

• https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/

Hope that helps and thank you for understanding.

[designerken]

I know how to Enqueue for the admin side. But will this also specifically work for the Global Block editor as well?

[prakash_s]

Hello @designerken,

Yes, in case if you Enqueue for the admin, it would render throughout the site’s backend and it would also work in the Global block editor as well.

Thanks

[designerken]

This does not appear to be the case at the moment for Global Blocks.

I have had another look at the source code and I actually see that The Events Calendar does load it’s CSS files already in the back admin pages for WordPress itself. However when I am creating or editing a global block that CSS is not loaded on that edit page within Pro.

[marc_a]

HI @designerken,

We are also not quite sure why it is not working with the Global Blocks. As long as you enqueue the CSS files correctly on the admin side it should be working properly. Since this feature is outside the scope of our theme support. I suggest that you seek 3rd party developers to help you with your issue or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps and thank you for understanding.

[designerken]

Not in the case of the preview field with an iFrame.

WP ADMIN

Global Block iFrame

[friech]

Hi @designerken,

This may sound like a silly solution, can you try adding the TribeEvent’s CSS files using the CSS @import in the Global Block CSS area.

@import - CSS: Cascading Style Sheets | MDN

Just comment it out, after you are done editing the Global Block, so it does not duplicate on the frontend.

Thanks,