A meta tag is inserted when copy pasting a link

[talldan]

Step-by-step reproduction instructions

1. Add a link inside a paragraph block
2. Copy the link
3. Paste the link (inside the same block is fine)
4. See that a <meta charset="utf-8"> element has been inserted into the paragraph block.

Expected behaviour

Only the link is pasted

Actual behaviour

Meta tag is pasted along with the link

Screenshots or screen recording (optional)

The console outputs the following when pasting

WordPress information

• WordPress version: 5.7
• Gutenberg version: 11.1

Device information

• Operating system: Mac OS
• Browser: Brave

[aercolino]

The same meta tag is also inserted when copy-pasting text between paragraphs. (WordPress 5.8.1 on Mac/Chrome)

[isaumya]

I have also seen this exact issue inside one of my client sites. Due to this, the W3C markup validation is failing and not sure if this is causing any other issues or not.

I just have 2 questions:

1. When do you think it would be fixed? This seems a critical issue with the copy-pasting mechanism.
2. When it gets fixed, what will happen to the existing content? How will the <meta charset="utf-8"> be removed from the content? Will there be a tool to automatically do it or something? Cause it is not humanly possible to figure out all the places it is getting added and then manually removing them.

[gVee]

I agree that is a critical issue not only for W3C markup validation but also a big interference on CSS styling.

[gVee]

I have also seen this exact issue inside one of my client sites. Due to this, the W3C markup validation is failing and not sure if this is causing any other issues or not.

I just have 2 questions:

1. When do you think it would be fixed? This seems a critical issue with the copy-pasting mechanism.
2. When it gets fixed, what will happen to the existing content? How will the <meta charset="utf-8"> be removed from the content? Will there be a tool to automatically do it or something? Cause it is not humanly possible to figure out all the places it is getting added and then manually removing them.

Here is a roughly way to solve your question 2 before official solution release： Add code below into your current theme's functions.php

if ( ! function_exists( 'roughly_fix_issue_33585' ) ){
  function roughly_fix_issue_33585( $content ){
    return preg_replace('#</?meta(\s[^>]*)?>#i', '', $content);

  }
}
add_filter( 'the_content', 'roughly_fix_issue_33585');

[isaumya]

Hi @gVee,
Thanks for your reply. But With your snippet it is not changing the content in the DB so, this snippet needs to be there in the functions.php forever even after Gutenberg fix this issue. Right?

[gVee]

Hi @isaumya ,
Yes, it's mush safer doing a temporary dealing with your DB. So the snippet needs to be there until Gutenberg fix this issue. In my opinion, the Gutenberg dev team will remove the ugly meta tag from user's DB. I hope!!

[isaumya]

Hi @gVee,
I also have the same hope and that what I asked the team about. Cause currently reading the comment on this thread seems like the Gutenberg team will make sure that this ugly meta tag does not gets added to the content after the fix is rolled out. But it will not fix the old content that already have the ugly meta tags in them.

Which is why I commented above that it makes no sense. As if they do that it will mean that we will have to keep the above snippet of code in the functions.php even after the issue has been fixed in Gutenberg as the fix will not fix the old content.

That's the matter I was trying to get more clarification about what is the plan of the Gutenberg team? Will the fix also fix the old contents to ensure we don't have to use the above snippet or not?

[gVee]

Hi @isaumya ,
hmmm, you can do further for clearing ugly meta tag when you saving post ,as below：
(But I am not sure whether it conflict with 3rd plugin or your favorite theme or not)

if ( ! function_exists( 'roughly_fix_issue_33585' ) ){
  function roughly_fix_issue_33585( $content ){
    return preg_replace('#</?meta(\s[^>]*)?>#i', '', $content);

  }
}
add_filter( 'the_content', 'roughly_fix_issue_33585');

if ( ! function_exists( 'fix_ugly_meta_tag_in_DB' ) ) {
  function fix_ugly_meta_tag_in_DB($post_id)
  {
    $post_obj = get_post($post_id);
    remove_action('save_post', 'fix_ugly_meta_tag_in_DB');
    wp_update_post(array('ID' => $post_id, 'post_content' => roughly_fix_issue_33585($post_obj->post_content)));
    add_action('save_post', 'fix_ugly_meta_tag_in_DB');
  }
}
add_action('save_post', 'fix_ugly_meta_tag_in_DB');

IF YOU really NEED a Plugin（which can uninstall when official fixes release）handling all of it in one go, just let me know...

[isaumya]

Hi @gVee,
Well, that snippet is risky to run on a client site. 😋
That being said, the first snippet is really handy but again I hope that when Gutenberg team releases a fix for this, they also run some sort of job to make sure this issue is also fixed in older articles. Maybe like some sort of upgreader process or something.

So, for now I think I will just stick with:

add_filter( 'the_content', fn($content) => preg_replace('#</?meta(\s[^>]*)?>#i', '', $content) );

Until this matter is properly resolved.

[gVee]

So Sad, I found it seems Chrome problem not Gutenberg because the same issue occur on any web page with Chrome.

I've raise an bug issue to chromium bugs

@ellatrix @getdave

A suggestion for this issue is adding similar code to remove them(<meta charset="utf-8">) with javascript in use-paste-handler.js, as codes you made in the bottom of this file(use-paste-handler.js):

and call it near around line 91