Archived topic
(some) Shortcodes not working with Elements (Block-Hook)
5 replies · Started by Maik on March 10, 2022
Hi.
I´ve been looking around for a solution, but it seems there is a bug with using Block-Hook elements and shortcodes or some blocks. They don´t render in frontend. If I'm wrong, I must have missed something. ;)
But first things first...
I refer to this post, where the youtube-block is not working. In this case I used a workaround without using the block or shortcode and paste my html instead. This works for me. Now I get problems with other sites and shortcodes, when using elements, so we need to dig deeper.
Like Elvin wrote in his last post, it depends on the setup of any page, so I installed a clean WP with just the necessary plugins. And voila, it´s the same problem for me. I send you the details of the testpage in private informations.
I want to achieve that some block-hooked content with elements (and using shortcodes) are shown in frontend. This works fine so far, but not for shortcodes. So any shortcode (not just the youtube one) should render the content accurate in frontend, but it seems, some parts are not recognized correctly. In backend (of elements) the shortcode looks fine and is rendered like using it in pages or posts with gutenberg. While in frontend there is just some space and no video available. I´ve also other shortcodes (from 3rd-party plugins like wp-datatables) which are not working nicely or at all, and it seems some parts make it into the frontend, others unfortunately don't. Also stylings seems to be swallowed by the mysterious elements. :-p
Strangely, other shortcodes (for example woo-products --> [products]) work fine...
Hope you can help out and we´ll find a solution to this.
Thanks in advance
Maik
Hi there,
I'm a little confused.
Are you referring to shortcode block or Youtube block?
Does it work in a static page? The example linked is an products/archives page.
Hi Leo.
Sorry for the confusing. Thought the block and shortcode are the same error so I miced them up. I´ve figured out, shortcodes are working fine for now and it was just a caching problem at my side.
I was referring to the Youtube-Block, which seems not to work, when used im elements and hook to a page, category or other locations. You´re right, I want to set this example in a products/archives page. In clearly the most cases you can add content to the page itself, where the Youtube-Block works fine like any other Blocks.
Please have another look at my test-setup, where I used two Elements from type Block-Hooks to add the same Youtube-Block and Vimeo-Block to a page (generate_after_main_content) and the product-category (woocommerce_after_shop_loop) to test an type of archive.
As you can see both not showing any video content but some space and the link I entered.
I hope this helps a little better to find out what it is or what causes it.
Hi Maik,
Upon viewing the two pages you linked, I can see that the video Blocks in the first linked page but not in the second.
Can you try embedding the video here?: https://embedresponsively.com/
Then, copy the output code to an HTML block as such: https://share.getcloudapp.com/Bluo0KN0
Kindly let us know how it goes. Hope to hear from you soon. :)
Hi Fernando.
The videos you see there, are from the page content which works like I wrote. Also has the page two areas, the page content itself and the content from elements underneath. Please also look at the start and end marks I used --> "Start (/End) of Page content..." and "Start (/End) of elements content..." to see the difference and where the content comes from.
The HTML-Block with embedding the video works in contrast to the block. I just added it below the elements content.
I understand.
I spoke with Tom just now and he said that this issue is a core WordPress bug.
For instance, if you have a YouTube Block in a reusable Block, adding this reusable Block directly to a page or post would have the same result/issue.
See: https://share.getcloudapp.com/OAu6zn5j
As shown, the YT Block is generated from WP core reusable Block, and the issue also persists.
For now, until this WP core issue is fixed, the workaround would be the one mentioned above which is to use https://embedresponsively.com/ and the code through and HTML Block.
Hope this clarifies. Feel free to reach out if you’ll have any further questions. :)
