[Resuelto] Update to WordPress 5.5.2 from 5.4 broke embedded YouTube videos in custom field

[Autor]

Mensajes

[martinE-4]

My staging site is showing an upgrade problem with embedded videos that used to display just fine in a custom Wysiwyg field created with Types.

I'm not sure what to do. I have about 20 plugins but everything has been working fine for a year without a problem until this week when I am trying to upgrade to the latest WordPress version.

Has anything been reported to you about embedded YouTube links not being shown anymore? I have tried this both on my local host (Mac running php 7.3.5 and latest WordPress, as well as my online server with php 7.3.23

Weirdly, when I enter a YouTube link in the custom field in the back-end editor, it appears fine but when it is rendered to the front-end only the url shows up. This happens with the 2020 theme as well as the GeneratePress theme I use.

I wonder if you could check if it is a problem for you too? And let me know. Thanks!

[Luo Yang]

Hello,

I can login your website, and tried these:
Dashboard-> Updates, upgrade your website to the latest version of WP 5.5.3, it works fine, I don't see any error message, can you confirm it? thanks

[Luo Yang]

Where I can see the problem you mentioned above:
when I enter a YouTube link in the custom field in the back-end editor, it appears fine but when it is rendered to the front-end only the url shows up.

Please provide detail steps, thanks

[martinE-4]

Hi Luo, thanks for looking into this. Here is how to see the problem:

- hidden link on my production site, shows how it is correctly supposed to display embedded Youtube video(s) on a post on my production site before upgrading to 5.5.3 and latest views and types toolset plugins
- hidden link on my staging site, shows the same page with the problem. Scroll to the bottom and you will see an example of a Youtube link ( hidden link ) instead of the displayed Youtube after upgrading to wp 5.5.3 and latest views and types toolset plugins

Here is how to understand the design of the content template:

- The content template “Template for Posts” has a Heading followed by a Toolset Container which contains 3 blocks:
1. Toolset Header block (works fine)
Container with:
1. Toolset Fields and Text block (works fine):

<span style="color:#979797;font-style:italic;">[wpv-post-date] by [types field='post_author'][/types]</span> [wpv-post-taxonomy type="category"] / [wpv-post-taxonomy type="asc"]

2. Custom HTML block (works fine):

[wpv-conditional if="( '[local_file field="wpcf-common_featured_media"]' eq '0' )"][types field='common_featured_media' ][/types][/wpv-conditional]

[wpv-conditional if="( '[local_file field="wpcf-common_featured_media"]' eq '1' )"]<div><a href="[wpv-post-url]"><img src="[types field='common_featured_media' output='raw' ][/types]"></a></div>[/wpv-conditional]

[wpv-conditional if="( '[types field='common_featured_media' output='raw' ][/types]' eq '' )" ]

<img src="[wpv-post-featured-image size='full' output='url' ]">

[/wpv-conditional]

3. Fields and Text block (this is where the problem field is displayed):

[wpv-autop][types field='post_body' suppress_filters='true'][/types][/wpv-autop]
<div style="clear:both;"></div>
<br>
[addtoany]

--------------------
What I have tried:
Just using the types code without the [wpv-autop] or suppress_filters or addtoany shortcode for social sharing plugin:

 [types field='post_body' ][/types]

Result: Simplifying the code to just the types shortcode made no difference to Youtube embedded link display in my custom Wysiwyg field='post_body' created with Types.

Note: When I developed this site in Jan 2020, there was a bug in the display of custom Wysiwyg fields which caused paragraph breaks NOT to be displayed. Apparently, this has been fixed because I don’t see the problem now when I remove the [wpv-autop] shortcode?

My next step will be to test this on a bare bones new local site.

[martinE-4]

Well, I have more information on this embedded YouTube/vimeo video link bug.

1. I created a new test database on local host with GeneratePress, Toolset Types and Blocks. WordPress 5.5.3
2. custom field group with custom wysiwyg field
3. content template with the custom field (apply to pages and posts)
4. paste in the content of the custom field from hidden link into custom field in a new page in test site
5. it does NOT render the YouTube links on the front end - if I copy the link at the bottom of the sample content from step 4 above and re-paste it in the next line, either in the text or visual editor I can make it render on the front -end.

So something is happening to the contents of the custom field that upsets WordPress and destroys all previously existing embedded YouTube links?

UPDATE:
If you paste this content into a page with just a STANDARD WordPress Field in a content template using a TYPES SINGLE FIELD block, it will NOT RENDER THE 2 EXISTING YOUTUBE LINKS (this is a subset of the content from the page in step 4 above):

The night also included a screening of a short documentary about Tracks: 7th Canadian Community Play and Arts Symposium and the Vancouver launch of Train of Thought, produced by the Vancouver Park Board and Vancouver Moving Theatre. Savannah Walling, Artistic Director of Vancouver Moving Theatre, introduced the film.Watch the documentary below or here. <em><u>hidden link</u></em> Exploratory questions from the Train of Thought's About page:
Train of Thought will ask many questions: What's not on the map? What other forms of mapping are there? How can we see the places where we live through new eyes? What protocols are there of arrival, gathering and departure for the territories we pass through? What place names can we learn and imagine? What stories are important to pass across the country? How can we grieve and celebrate together in the shadow of colonialism? How can community-engaged arts help us enter into these questions?
Other related articles: Train of Thought: Tracking Change – Via Community Arts Council of Vancouver Alt.theatre magazine "Train of Thought Goes Off the Track" – Via Alt.theatre and Ange Loft <em><u>hidden link</u></em>

Conclusion: a YouTube video is rendered correctly ONLY if it is pasted in freshly. But existing content (such as copied from another field in another post like I have done in step 4 above) will NOT render the YouTube video links during an upgrade. It seems to require a fresh paste action to allow the video to render successfully. Would this be a WordPress bug or a Toolset bug?

This is a problem for me on my large icasc.ca site because I have a lot of existing external YouTube/Vimeo links which will no longer be displayed if/when I upgrade to WordPress 5.5.3 and the latest Toolset plugins.

[Luo Yang]

Thanks for the details, I can see the problem in your website, which version of Toolset plugins and WordPress are you using in the product site(hidden link)?

And I need your permission to deactivate plugins/theme in the staging site, please backup it first, thanks

[martinE-4]

Thanks Luo.
The production site uses WordPress 5.4.1 and runs under the same server (php and apache) as the staging site which is in a subdirectory. Toolset plugins are Types 3.3.10, Views 3.1.3, Maps 2.0.2, Forms 2.5.6, Access 2.8.5, Module Manager 1.8.6

You can work on the staging site. It is backed up.

[Luo Yang]

Please check WP document:
https://wordpress.org/support/article/embeds/

Make sure the URL is on its own line and not hyperlinked (clickable when viewing the post).

So I have tried these in your website:
1) Edit the problem post:
hidden link
in "Body" post field, switch to visual editor, in the bottom, press "Enter" key, start a new paragraph, paste the youtube link:
hidden link
You should be able to see the youtobe video works in the WYSIWYG field editor.

2) Edit the content template:
hidden link
At the button, add another new "Field and Text" block, use the visual editor, insert the custom field "post_body" shortcode, you should be able to see the youtube video works in the visual editor too.

3) Test it in front-end:
hidden link

It works fine.

So in summary, you need to use editor to paste the youtube link into WYSIWYG field, and don't use [wpv-autop] shortcode, since it will change the HTML codes, and add auto-paragraph HTML codes.

More help:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-autop

[martinE-4]

Thanks, I realize that you can put a fresh Youtube video link in and make it work.

But what do I do with the hundreds of existing Youtube links in my wordpress posts? They need to be fixed so they don't break with each wordpress upgrade.

Note: the reason I was forced to originally use the [wpv-autop] shortcode was that the Types custom field back in Feb 2020 was not respecting paragraphs in Wysiwyg fields. I could remove it from my templates if that is fixed but I don't think that will fix the existing Youtube links?
refer to:
https://toolset.com/forums/topic/urgent-formatting-is-lost-in-blocks-editor-with-types-custom-field/
and
https://toolset.com/errata/paragraph-tag-is-stripped-in-wysiwyg-loop-items-and-page-builders-generated-content/

In future, you say ' make sure the URL is on its own line' which is easy to do for the future but what about the hundreds of existing links which used to work and don't? None of them work, whether they were on their own line or not before.

[Luo Yang]

This is required by WordPress core, see the WP document I mentioned above:
https://wordpress.org/support/article/embeds/
Make sure the URL is on its own line and not hyperlinked (clickable when viewing the post).

I don't think we can fix it, as I mentioned above, you will need to try these:
1) Switch to visual editor,
2) Start a new line, copy/paste your youtube link

If you are using text editor, you need to wrap the youtube link with HTML p tag + [embed] shortcode, for example:

<p>[embed]<em><u>hidden link</u></em>;

It works fine in your website, see the problem post in admin side:
hidden link

And in front-end:
hidden link

[martinE-4]

Looking at your suggestion with the text editor, I can get an existing YouTube video link to display without the [embed] tag:
when I change an existing inline video link to:

</p><p><em><u>hidden link</u></em>;

video displays fine (with no [embed] necessary).

There is also the formatting problem, which is why I have used [wpv-autop], I have enclosed two screenshots to show the problem which may be related to the broken YouTube video links which still display correctly on my production site:
On my PRODUCTION site at hidden link
using FIELDS AND TEXT BLOCK in the content template 'Template for Posts':

[wpv-autop][types field='post_body' suppress_filters='true'][/types][/wpv-autop]

Result:
paragraphs format correctly / video links display

Compare this to my STAGING site at hidden link
using FIELDS AND TEXT BLOCK in the content template 'Template for Posts':

[wpv-autop][types field='post_body' ][/types][/wpv-autop]

Result:
new embedded videos display correctly / existing video links still do not display / paragraphs are not formatted

Also if I try:

[wpv-autop][types field='post_body' suppress_filters='true'][/types][/wpv-autop]

Result:
blank line/ no display of either video or link (clearly the suppress_filters='true' is no longer necessary)/ paragraphs not formatted

Also I tried using a Single Field Block but that did not show correct formatting either- paragraphs are not formatted. The same with an HTML block.

Summary: the [wpv-autop] now appears to be broken compared to the February versions of Types/Views (Types 3.3.10, Views 3.1.3). The page screenshots I enclose show how formatting currently looks on production vs staging. I wonder if you could ask the next tier of support if it is possible the broken [wpv-autop] is linked to the broken video links issue that I have experienced, and if they would be able to restore the functionality of the [wpv-autop] in a new release of Views.

Otherwise, I appreciate all the thought you have put into this very much. I will definitely put all new video links in with the surrounding <p> tags, or use the visual editor and put them in on a new line there.

I plan to manually modify all the existing youtube links in my database with <p> tags, so that they will display correctly. I am using the Search Regex plugin to search for them and do this as efficiently as possible.

Many thanks again, Luo. I look forward to the fix for [wpv-autop] - which may hopefully also fix the broken link issue.

[Luo Yang]

Thanks for the details, I have tried it in your website:
hidden link
Wrap the youtube link with only HTML p tag:

<p><em><u>hidden link</u></em>;

Tested it in front-end:
hidden link
The youtube video works fine too, so you just need to make sure to wrap the youtube link with HTML p tag.

Above codes works fine within [wpv-autop]... [/wpv-autop] shortcode.

[martinE-4]

Yes, thanks Luo. I understand that the existing YouTube links can work with the <p> tag. And I will have to manually change them in all my existing posts. But I do not understand why an upgrade caused them to break if they were working... But I accept that and I will change them.

However, I do not know why the [wpv-autop] shortcode is no longer functioning correctly as indicated in my screenshots above? Could you please verify that the devs will look into this? Otherwise my whole site based on text in Toolset custom wysiwyg fields can not be upgraded - a tragic situation? I need a solution to this please!

Many thanks for your patience. I really depend on your help.

[Luo Yang]

I think there are some misunderstandings, the shortcode [wpv-autop] is for add HTML p tag automatically, see our document:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-325519
This shortcode enables the auto-paragraph feature for content placed within it.

I have tested it in your website:
hidden link

In field "Body", at the bottom, add below text:

Test wpv-autop line 1

Test wpv-autop line 2

Test wpv-autop line 3

It does work in front end:
hidden link

<p>Test wpv-autop line 1</p>
<p>Test wpv-autop line 2</p>
<p>Test wpv-autop line 3</p>

[martinE-4]

Ok, I see what you mean about how [wpv-autop] works, however that does not explain how the production and staging sites have become different as my screenshots above show for hidden link and also for the other page you were looking at above: hidden link

Let's compare a portion of the contents of the custom field 'body' and see how that is changed:
Staging site for hidden link

and serious intent, bringing together artists and community members, the land's first people and all those who have found refuge here over the years and generations.</blockquote><p>In 2015, the <a href="<em><u>hidden link</u></em>" target="_blank" rel="noopener">Train of Thought</a> embarked on a journey across Canada, linking places and people in <em>a creative and discursive adventure</em>. It all began when a group of community play producers imagined a community play on a cross-country train. From there, the idea grew and became <em>a multi-year scheme for national community arts development with Train of Thought as a culminating event</em>. It's become HUGE! Today, in 2016, the journey still hasn't ended. On May 5, 2016, we celebrated the one-year anniversary of the Train of Thought at the Jumbles Theatre (Toronto), with works that have branched out the journey thus far. Still going strong with their word playing game, the event was titled "<a href="<em><u>hidden link</u></em>" target="_blank" rel="noopener">Terrain of Thought</a>". There, <a href="<em><u>hidden link</u></em>" 

and for Production hidden link the same field has:

and serious intent, bringing together artists and community members, the land's first people and all those who have found refuge here over the years and generations.</blockquote>
In 2015, the <a href="<em><u>hidden link</u></em>" target="_blank" rel="noopener">Train of Thought</a> embarked on a journey across Canada, linking places and people in <em>a creative and discursive adventure</em>. It all began when a group of community play producers imagined a community play on a cross-country train. From there, the idea grew and became <em>a multi-year scheme for national community arts development with Train of Thought as a culminating event</em>. It's become HUGE!

Today, in 2016, the journey still hasn't ended. On May 5, 2016, we celebrated the one-year anniversary of the Train of Thought at the Jumbles Theatre (Toronto), with works that have branched out the journey thus far. Still going strong with their word playing game, the event was titled "<a href="<em><u>hidden link</u></em>" target="_blank" rel="noopener">Terrain of Thought</a>". There, <a href="<em><u>hidden link</u></em>" target="_blank" 

This is just one example of many of how the content of the custom field has changed. You can see how the production site had a new line visible in the back-end editor (after the word "HUGE") , but the staging site ran it all together in the back-end text editor.

This was my upgrade process to create the Staging site:

1.In the production site, Use Duplicator to create an archive file to install the new site - move the Duplicator files to the staging directory.
2. In the staging directory, Run installer the usual way to setup the copy of the production site in the staging directory
3. In the new staging site, Update WordPress to 5.4.3
4. In the new staging site, Update plugins
5. In the new staging site, Observe the changed state of text in custom posts in the new staging site.

So I'm not sure why this would happen? I can grant you access to our Production site if you need it.