No Paste as Text button on Paragraph block

[maddisondesigns]

Issue Overview

I wanted to copy some text into a paragraph block. The text was a h2 header from another site. Instead of stripping the html and pasting as text, it created a new Header block. This means that it's going to be incredibly difficult, and in some cases impossible, to copy formatted text from other sources into your content in the way that you actually want it.

This gets even worse when the text you're copying contains multiple formats, such as a header and some paragraph text. Not only does it insert a Header block but it also inserts another paragraph block with the remaining text as well.

Steps to Reproduce (for bugs)

1. Add new Paragraph block
2. Copy some header text from another site
3. Place cursor in Paragraph block and paste copied text

Expected Behavior

I expect to be able to copy any text I want into a paragraph block

Current Behavior

Pasting text doesn't strip html and automatically creates unwanted blocks

Possible Solution

Add a Paste as Text toolbar button to the Paragraph block so that people can paste content from other sources and strip the html

Gutenberg 2.6.0
WordPress 4.9.5
Firefox Quantum 59.0.2 (64-bit)

[mtias]

I've found myself doing Command+Shift+V many times.

[karmatosed]

I am not totally sure we need to add a 'paste as' button if pasting works. It actually does in most cases and where it doesn't we should focus on iterating on copying and pasting over adding a button to cover those issues.

[karmatosed]

Noting was closing to get an issue to not focus on the button, but let's carry on discussion here looking at what 'non-button' things we can do. I am sure we can do better with some considering.

[mtias]

Some past things we have discussed:

1. When copying a single line of text, regardless of source, paste as plain text. So if you copy a heading alone we consider you copied the text.

2. Expose contextual choice after you pasted in case your intention was different.

This is very similar to what Ulysses does for Command+Shift+V:

[maddisondesigns]

@karmatosed Just because pasting works in some cases that's not a good enough reason to ignore the cases where it doesn't work. Copying content from other websites (or other formatted sources) is extremely common. It's going to be incredibly frustrating and tedious if pasting text into your page ends up creating multiple blocks that you don't want.

WordPress currently provides users with the ability to Paste as Text. There's no reason why Gutenberg shouldn't also provide this functionality. I'm confident in saying that very few people know about Command+Shift+V (Ctrl+Shift+V) and is it even guaranteed to work in every single OS/Browser combination? 99% of people will simply use Ctrl+C Ctrl+V to Copy and Paste.

If you're adamant about not adding a Paste as Text button then you should simply strip everything and always paste as plain text no matter whether it's one word, two words, a whole sentence or multiple paragraphs.

[karmatosed]

@maddisondesigns my point was whether a button is the best option, not one of ignoring what is an issue. I totally see how this is a hitch and actually really like the suggestion by @mtias. What do you think of that? It's not a button and has some awesome options.

[maddisondesigns]

I'm not a big fan of the contextual menu after pasting. I think that would be confusing for users. Using my example from above, would it create a Header block for the H2 text that I pasted, ask if I wanted it pasted as text and if so, then remove the Header block and paste it back into the block where I had my cursor? Or would it paste as text by default at my cursor position and then only create a Header block if I selected another option? Both ways seem extremely confusing.

Most people expect that they'll have to re-format content that they paste from another source. If they're copying a sentence and they specifically want it as a Header, then they're more than likely going to paste it into a header block anyway. It seems pretty obvious that if you paste something into a paragraph block, then you actually want it as paragraph text.

Pasting should default to the type of block that you're pasting into;

• If you're pasting into a Paragraph block, then paste everything as plain text.
• If you're pasting into a Header block either:
  A) default it to h2 if it's plain text
  B) Keep the existing format (if it's a h1 to h6) or
  C) If there's multiple formats, strip everything and default to h2
• If you're pasting into a List Block then default it to a list.

[ZebulanStanphill]

@maddisondesigns Sounds good to me, though I would add that pasting into an empty Paragraph block would paste things as whatever they are (headings to Heading blocks, paragraphs to Paragraph blocks, lists to List blocks, etc.), since an empty Paragraph block does not really imply any particular block is desired yet (hence why the quick-add buttons and slash commands are used in them).

[maddisondesigns]

@SuperGeniusZeb I disagree with that. That's just going to get us back to the exact same issue I had in the first place, the inability to paste content into a paragraph block. When copying content from another source, there's a very good chance that I'd want it copied into a new paragraph so I would create a new Paragraph block first. If I specifically wanted it pasted as a heading, then I'd most likely create a heading block and then paste in the content. If I paste something into a Paragraph block, either paste everything as plain text or give me a Paste as Text button.

[ellatrix]

@maddisondesigns I don't agree that we should always paste as the block the user pasted into, and strip all formatting, especially if it's a paragraph. I think we're doing quite good already in stripping all that is not semantic content, so it shouldn't bother the user as much as it does in the old editor.

I think pasting as plain text would be a bad default if the user is pasting from e.g. Google Docs, Word, or even a larger piece of an article on the web. In this particular case it seems you're pasting one line of text and expected an "inline" paste. We could consider always pasting content as inline text if there is only one block that needs to be created. Does this sound like a good solution? In addition we could also display some options before or after paste when the user is pasting HTML.

I'm happy to look for a solution once #5966 is merged.

[maddisondesigns]

@iseulde I disagree that what you're currently doing works well. I just tried the example you suggested in #5966 and the content that it pasted in was an absolute mess.

Copied

Pasted

For starters, if I happen to hit paste whilst the cursor is in the main page title, it simply pastes the whole content within the title block.

After that didn't work, I added my own page title and then tried pasting the content into a paragraph block. What I ended up with would take considerably more effort to fix than what it would've been to reformat from plain text.

Some of the content is pasted in paragraph blocks and then there's other content pasted into a Classic Block. Why!?

There's a list block with all the Share links. Why would I want that?

You're pasting in content which is visibly hidden, such as "Continue reading the main story" and "Share this Page" text. Why on earth would I want to paste content that A) I don't know exists, and B) is actually hidden so I cant see it?

The main title for the poem is a H2 and yet it's been copied into a Classic block, along with the rest of the poem. Not only that, you've converted it from a H2 in the original content to a <figcaption>. So instead of keeping the actual important part of the formatting, the H2, you've stripped that and kept <figcaption> instead. You've then also included the following paragraph in the <figcaption> and also added in a <br /> (which wasn't even in the original markup), instead of simply keeping it as a separate paragraph. Then there's the question of why was this put into a Classic block instead of a Heading Block and a couple of Paragraph blocks like the rest of the content?

If this is what pasting content in Gutenberg is going to result in, then you've just made it considerably more difficult to work with because now we'll have to paste it into a text editor first to strip everything ourselves, and then paste into Gutenberg.

At least with the current TinyMCE editor it does some form of cleanup and then if we find after pasting there's still some rubbish content, we have a Paste as Text button to fallback on.

Can you please format the text to the type of block that I'm pasting into or if you're going to keep pasting this mess, at the very minimum, give us a Paste as Text button.

[maddisondesigns]

And I forgot to mention after all that, your #5966 PR still isn't going to resolve my original issue, which is trying to paste some simple text into a paragraph block. Without a Paste as Text button you've basically made it impossible. Just because I copy some text which happens to be formatted as a header (or even when its in multiple formats), doesn't mean that I automatically want it formatted exactly the same way in my own content. More than likely, if someone is pasting content from another site into their own content, they're going to want to reformat it so it matches the source content, not keep it as the original format.

[ellatrix]

I disagree that what you're currently doing works well. I just tried the example you suggested in #5966 and the content that it pasted in was an absolute mess.

Did you try #5966 with on the branch (with the patch applied)? I don't think so as it's impossible to to get a Classic block there.

For starters, if I happen to hit paste whilst the cursor is in the main page title, it simply pastes the whole content within the title block.

So you expect to always get plain text from paste, but are not happy with this result? Are you are happy with this result? I can't tell.

Some of the content is pasted in paragraph blocks and then there's other content pasted into a Classic Block. Why!?

Can't happen on #5966. The branch fixes that issue.

There's a list block with all the Share links. Why would I want that?

I don't think pasting as plain text will make this any better. You'll still be left with all the text from it and will have to delete it. I would actually prefer these to be isolated in a list so it can be easily deleted if copied by accident.

You're pasting in content which is visibly hidden, such as "Continue reading the main story" and "Share this Page" text. Why on earth would I want to paste content that A) I don't know exists, and B) is actually hidden so I cant see it?

Pasting as plain text is not going to solve that. I have a few ideas to filter screen reader content, you're solution won't help here at all.

The main title for the poem is a H2 and yet it's been copied into a Classic block, along with the rest of the poem. Not only that, you've converted it from a H2 in the original content to a

. So instead of keeping the actual important part of the formatting, the H2, you've stripped that and kept instead. You've then also included the following paragraph in the and also added in a
(which wasn't even in the original markup), instead of simply keeping it as a separate paragraph. Then there's the question of why was this put into a Classic block instead of a Heading Block and a couple of Paragraph blocks like the rest of the content?

This is fixed in #5966...

At least with the current TinyMCE editor it does some form of cleanup and then if we find after pasting there's still some rubbish content, we have a Paste as Text button to fallback on.

The current TinyMCE editor does less cleanup than Gutenberg does. Try pasting the poem in the current editor, go to text mode, and you'll see a lot more rubbish. :)

And I forgot to mention after all that, your #5966 PR still isn't going to resolve my original issue, which is trying to paste some simple text into a paragraph block.

I didn't say this will solve your issue. I said "I'm happy to look for a solution once #5966 is merged". That pull request as nothing to do with this ticket, I just mentioned that I'll wait to work on a solution until this pull request (big refactor) is merged. What do you think of the solution I did propose? #6132 (comment) This will only fix smaller pieces that are pasted, but I think it's generally better behaviour. I don't see a solution for large pieces of content, because in some cases you'll want to preserve the HTML, in other text, so that's why I mentioned that we could have the option before or after paste, if HTML is being pasted.

[karmatosed]

Lots of insights and thinking in this thread. I am going to try and summarise a little, see if we can get to a solution point.

As @matias showed I still think this is a great option forward of having similar to what Ulyssess does for Command+shift+V. Whilst I understand the caution it really using it feels like a vast improvement over a button.

I do agree 100% with @iseulde in that pasting plain text as a default is not the best user experience. I think the offer there to look at a solution is a sound one and now #5966 is in let's move onto that.

[maddisondesigns]

@iseulde

Did you try #5966 with on the branch (with the patch applied)? I don't think so as it's impossible to to get a Classic block there.

You're right, I didn't try the new updates since they weren't currently merged into the plugin at the time. My point was to show that you weren't currently doing a good job of pasting after you specifically said "I think we're doing quite good already".

I've just tried the new updates now that it's been merged, and honestly, it's not much better.

Copying content from this page, you've somehow managed to inject a whole bunch of carriage returns and spaces into the content, that wasn't present in the source page. On top of that, you've also stripped out images and h2 tags.

So you expect to always get plain text from paste, but are not happy with this result? Are you are happy with this result? I can't tell.

My point was to show the inconsistency. The Title block is just another block, isn't it? When I paste content in to that block, why is it treating the content differently to every other block.

@karmatosed

I still think this is a great option forward of having similar to what Ulyssess does for Command+shift+V.

I'm still not a fan of that contextual popup. What happens when pasting mixed content? e.g. Say a heading, a paragraph and an unordered list of links? Does it show 3 popups for the three different types of content or just one, for the whole lot?

This whole issue could be resolved simply by having a Paste as Text button. For those that are happy with the results of the default pasting and the multiple blocks that it creates, then nothing changes. The rest of us that just want a way to insert plain text, we'll have a button that provides us with that option. If the only option is having that contextual popup, then so be it. At least it gives us a way to insert plain text.

For a 'new and improved' editor, Gutenberg sure is making editing your content more difficult!

[ZebulanStanphill]

@maddisondesigns Actually, those carriage returns were always there. The editor just stripped out various HTML tags (like <h2>s that were nested in <li>s) but did not remove the spacing before those tags. Here is what some of the content looks like in the page source:

That is some ugly and confusing indentation/spacing in the website markup, but the editor should probably clean that up on paste and not leave empty lines of whitespace after stripping tags.

Some thoughts on the contextual pop-up idea:

Maybe the contextual pop-up should appear before actually pasting the content. Doing it after the paste sounds like it might be tricky to implement. So the workflow would be:

• Copy something.
• Use Ctrl/⌘+Shift+V.
• A contextual pop-up appears, asking if you want to paste the clipboard content as plain text within the current block, a single Custom HTML block, or convert it to whatever blocks make most sense to the editor.
• Once you select an option, the content is pasted. You could also just press Enter, which would do the default of pasting plain text (this would only be the default for Ctrl/⌘+Shift+V, not Ctrl/⌘+V).

If a “Paste as Text” button is added, it does not belong in a block toolbar, as it really should not be specific to any one block. The button should be put in the top bar of the editor next to the Undo and Redo buttons. Actually, if there is going to be a button at all, it might as well be a “Paste as…” button that opens a modal/pop-up when pressed allowing you to select how the content is pasted (much like the contextual pop-up mentioned above, which would probably be unnecessary if a button was added).

That said, I am not sure that pasting as plain text is something that is used enough to warrant a dedicated button in the UI, since you can already use Ctrl/⌘+Shift+V to paste as plain text, and doing it via the keyboard is always going to be faster anyway. Maybe I am wrong and it does need a dedicated button, but I personally do not feel the need for one.

[maddisondesigns]

@SuperGeniusZeb I've never once used Ctrl/⌘+Shift+V. I've always used Ctrl/⌘+V, as I'm sure most people do.

[ZebulanStanphill]

@maddisondesigns I am used to using the shortcut frequently since it exists in WordPress in the Classic Editor, Microsoft Office, LibreOffice, Gmail, and a multitude of other programs. I thought it was fairly common knowledge since the shortcut seems to be so ubiquitous in programs with formatted text entry.

[ellatrix]

Copying content from this page, you've somehow managed to inject a whole bunch of carriage returns and spaces into the content, that wasn't present in the source page. On top of that, you've also stripped out images and h2 tags.

We currently don't support nested blocks inside lists so this is why.

My point was to show the inconsistency. The Title block is just another block, isn't it? When I paste content in to that block, why is it treating the content differently to every other block.

Sure, we can change it so that it behaves just the same as other blocks.

[JimBoone]

I haven't used Gutenburg very long but I must agree with maddisondesigns that the paste function is not acceptable. I had a word document that I wanted to add to a post - nothing fancy just one header and several paragraphs of text. I created a header in the post and typed in the text then created an empty paragraph block and pasted the text from the word document into it. It appeared to work but the paragraph block didn't display when I previewed the post or when I published it. It was only visible in the edit mode. My work around was to paste the text into notepad then copy the text and paste into the text block. Even so there were some odd things going on with carriage returns. 11/4/2018

[codewithfeeling]

I have just seen a client of mine make a royal mess of their content by pasting in content with hidden linebreaks. They don't show up unless you edit the block as HTML.

It's not very clear that there is a keyboard shortcut to paste in as text (Control / Command + Shift + V). And I don't expect that a lot of clients would know what it meant to paste in without formatting.

Not sure what the most elegant solution is but I am simply agreeing there is a problem with this.

[benhuson]

I have recently stumbled across an odd issue when pasting from Word which is any reason a paste-as-text option would be immensely useful.

I have a Word doc containing a mixture of standard paragraph, bold and underlined text etc. It is a working document which has has been edited by many people as is typical with many Word documents when preparing copy for a web site.

When copy and pasting into Gutenberg it is styling many of the standard paragraph bits of text as bold.

On investigating further, I saved the Word doc directly as HTML to see what was being produced and found many of the standard paragraphs were markup up like this:

<p class=MsoNormal><strong><span style='font-family:"Calibri Light",sans-serif;
mso-ascii-theme-font:major-latin;mso-hansi-theme-font:major-latin;mso-bidi-theme-font:
major-latin;color:black;mso-themecolor:text1;background:white;font-weight:normal;
mso-bidi-font-style:italic'>Text goes here. <o:p></o:p></span></strong></p>

For some reason Word has marked up a normal paragraph to include <strong> tags and then styling it to be normal weight. I presume Gutenberg is then stripping out all the custom WordPress styling and being left with the strong tags.

There is no indication in Word that this paragraph should be marked as bold or is wrapped in bold styling in any way - the B button is not highlighted and there is no indication that the text has any other custom styling.

I cannot explain why Word would markup content in this way - certainly if I recreate the paragraph in a new Word doc from scratch by typing, I can copy and paste fine so I imagine this is something that can occasional happen in Word after various iterations of text being styled, bolded and unbolded etc.

I don't expect this is a scenario that is fixable, but it does highlight the need for a user to optionally be able to paste as text if they would prefer to start from some clean pasted text.

[paaljoachim]

Could someone give an update on this issue?
Thank you!

[paaljoachim]

An update showing the newest version of WordPress 5.7 beta 3 and Gutenberg plugin 10.0.
Twenty Twenty One theme.

I went into a Google Document copied a H2 text into a Paragraph block.

Paste-h2-into-Paragraph-block.mp4

Is there any other actionable item we need for this issue? Can we go ahead and close it?
@tellthemachines

[maddisondesigns]

@paaljoachim Please don't close this issue. It still doesn't resolve the original issue that I raised about the lack of a Paste as Text button, or provide an adequate reason as to why there isn't one (especially considering this functionality has existed for years in the Classic Editor).

Here's a very simple test with the latest Gutenberg plugin (9.9.3). If I copy content that has multiple formats and then paste that into my page, I end up with multiple blocks. When you're copying content from another source, very rarely do you want it pasted with the same formatting. Even when I copy content from other pages in my own site, rarely do I want it pasted with the same formatting.

As I mentioned above, if I paste content into a Paragraph block, I want ALL the content pasted into a paragraph block. I don't want Gutenberg creating blocks for me. If I wanted a Heading block I would've created a Heading block myself and pasted the content into it.

Screen+Recording+2021-02-16+at+02.33.11+pm.mp4

At the moment, pasting content into Gutenberg is horrible. It's reminiscent of editors back in the 90's. I have to open a text editor, paste in my content to remove the formatting, then copy that again, and finally paste into Gutenberg. It's such a painful experience.

[tellthemachines]

You can use Shift+Ctrl+V (or Shift+Cmd+V on mac) to remove the formatting when pasting text. That works the same as just about any other content editor, and in most workflows it's quicker than hunting around for a button in a toolbar.

[prathamesh-gharat]

When I use Ctrl + Shift + V to paste without formatting Gutenberg ends up adding <br> in place places for some reason.
I was copy/pasting single paragraph at a time from a PDF. This creates odd looking lines of text that end abruptly as I lower the viewport size.

[maddisondesigns]

Almost 3.5 years and still no resolution to this issue. Why is there such a reluctance to add a simple "Paste as text" button to fix the many issues with pasting text into Gutenberg Blocks? Constantly saying "you can just use Shift+Cmd+V" is not an adequate solution as not everyone knows that you can do that because it's so hidden.

The Paste as Text button was available in the Classic Editor. It's almost 3 years since Gutenberg was introduced in WP5.0 and it still doesn't fulfill the promise of doing everything the Classic Editor can do. You can't paste as text because there's no "Paste as text" button. You can't insert special characters (¢€£¥ ©®™ ¼½¾) as there's no "Special characters" button. You can't insert Audio Playlists because the Audio Block in inadequate. Replicating every single feature of the Classic Editor should've been a priority from day one and should've been in Gutenberg before it was even added to Core.

[lukasniebler]

In my opinion a contextual menu or button which appears before pasting would really help users who don't use Gutenberg frequently. I know many end users who only open their WordPress site once every few months to add a piece of text which they copied from old web pages, word or a random pdf. They won't remember the shortcut.

Our clients always inserted their copied content within the text-mode of the classic editor which automatically pasted their content as plain text.

They don't know that there is an option to paste as plain text via keyboard shortcut in Gutenberg. And apparently this shortcut differs? For example I can only paste plain text in Gutenberg (in Safari / Firefox) with the keyboard shortcut Cmd + Option + Shift + V - The mentioned shortcut cmd + shit + v doesn't work on my system (MacBook M1 pro / macOS Monterey 12.5.1 (21G83) )

[richtabor]

I've found myself doing Command+Shift+V many times.

You can use Shift+Ctrl+V (or Shift+Cmd+V on mac) to remove the formatting when pasting text. That works the same as just about any other content editor, and in most workflows it's quicker than hunting around for a button in a toolbar.

This is standard.

I don't expect there will be a "Paste as text" button added to the paragraph block; it'll be more confusing than necessary for all the times you paste something into that isn't just text. I'll close at not planned for the time being.

[maddisondesigns]

@richtabor Gutenberg has multiple icons/buttons to help with block selection because simply selecting the exact block you want with your mouse is so horribly implemented, yet you think that adding a simple "Paste as text" button to a single block is going to be confusing for the end user. A button which has existed within the standard WordPress editor for 15+ years, since at least WP v2.5. What absolute rubbish! It's a real shame that Gutenberg has failed to live up to its promise to provide the exact same functionality that users were familiar with prior to WP5.0.

[joostdekeijzer]

Just for reference (as I was experiencing this issue).

On macOS 14 the suggested combinations did not work for me.
The sequences for "Paste and Match Style" (Opt+Shift+Cmd+V) did work.