offering gutenberg as paste target

[johanneswilm]

Is your feature request related to a problem? Please describe.
Users of Fidus Writer and other online editors often want to copy and paste content from these third party editors into Wordpress for final publication as it is the easiest way to move content into a Wordpress blog. Wordpress, Typo3, Google Docs and a few other systems are such common paste targets, that we'd like for FW to specifically target Wordpress with our copy-serializer. However, it's not easy to see what markup is allowed, and it seems like you ant to be more restrictive with paste content than with other converted content (#6878).

Describe the solution you'd like

• A chart of tags and attributes that are allowed in paste.
• If you insist on removing some content from paste that you don't want to remove from other imported content, consider allowing it in if there is a special attribute that communicates that it was created with Gutenberg in mind. For example, say you want to allow IDs on paragraphs for other imported content (important for footnotes), but not for pasted content. How about allowing it if it comes in like this:

<p id="msefk3" data-gutenberg="true">Blablabla...</p> 

[mtias]

How things are converted during pasting would also depend on the affordances of the final block destination. Do you have some examples that could be tested against? In general this would be treated as generic HTML pasting and should attempt to recognize and transform as much as possible.

[johanneswilm]

I am not sure what you are asking for. I am thinking of users copying say an entire 8000 word in 50 paragraphs document. I can show what the current HTML structure looks like, but that's not as relevant as this structure can be changed to accomodate Wordpress.

What I am asking for is an overview of what kinds of elements are allowed and what structure I can use that result in figures, footnotes, mathematical formulas, etc. . hopefully there are severalanswers for each as that will increase the likelihood of at least one of them also working with other popular paste targets such as Google Docs or Word/LibreOffice.

[designsimply]

I think what is being asked for is sample content saved in a document (or that is already saved in a demo post made by Fidus Writer) that can be used by anyone for testing. It could contain exactly the things you mentioned, e.g. figures, footnotes, mathematical formulas, etc.

[johanneswilm]

ok. But Fidus Writer saves it's content in a JSON format (not HTML) so it's only when we show it in the editor or put it on the clipboard that it's being converted to HTML. And that conversion can take any form needed for Wordpress. The conversion to HTML for clipboard does not have to be the same as conversion to HTML to show in the browser for the editor. So we are really free to create whatever HTML Wordpress/Gutenberg needs.
The reason it makes more sense to adjust Fidus Writer to fit Wordpress rather than the other way round is that Fidus Writer is a rather niche editor whereas Wordpress has 2 Billion installations or whatever the current count is.

[designsimply]

Yes. Some examples of the converted HTML as examples (I think!) is what is wanted. That way, someone here would be able to try out pasting the content you provide that isn't working well and get a better idea of what's going on and how to best direct you.

[designsimply]

Closing until more information can be provided. Please re-open when you reply again. Thank you for your efforts @johanneswilm and my apologies if I'm misunderstanding the issue. Example cases will be very helpful for this case.

[johanneswilm]

Hey @designsimply,
yes, we are clearly speaking at cross purposes here. I'm not sure how else I can explain this. One last try: You guys need to present what the HTML you can receive needs to look like. I cannot decide that. I (and most other editors out there) can deliver whatever you need - you just need to tell me what that is. That's why I cannot give you any examples. You guys need to present the examples of the kinds of HTML structures you need, not the other way round. The entire reason why I opened this ticket to begin with was for you to provide this data because I don't have it.

I guess what I could do is wade through the gutenberg source code and then build examples based on what I find there. Is that what you are asking for? I think your devs will be in a much better to do this than me who is not familiar with your source code.

[johanneswilm]

So for example, based on looking at https://github.com/WordPress/gutenberg/blob/a92216bb6f46a99712aef6124e5cf1a2ea6384a2/packages/blocks/src/api/raw-handling/image-corrector.js I could come up with the following explanation for acceptable HTML for an Image:

<img // has to be 'img'
  src= '...' // cannot begin with 'file:'
  height=2 // optional, but if specified should be higher than 1
  width=2 // optional, but if specified should be higher than 1
>

That was a simple example, and likely I got something wrong and would understand more about how to add a title line, etc. if I were to read all the source code lines. That's why it's a bad idea for me to be doing this. Someone with good knowledge of your source code should be in a much better position to do this than me trying to reverse engineer your code. Did that make sense now? :)

[designsimply]

I guess what I could do is wade through the gutenberg source code and then build examples based on what I find there. Is that what you are asking for?

I think what was being asked for is an example of some pasted HTML which you found does not work. No need to go through the Gutenberg source code to answer that, but instead just showing a specific example from your side that illustrates the problem. Basically, asking the why behind your request and for either a set of testing steps to reproduce the problem or a use case that shows what you are up against.

I asked some developers about this and found that each block has a schema and there are some other filters elsewhere. There is currently not a comprehensive documentation of all of the allowed HTML for each block aside from reading the code, so I am adding a [Type] Documentation label to this issue to indicate that is the request and have updated the title to reflect that as well. My apologies about your experience speaking at cross purposes earlier! I think what was being asked for was a specific example to illustrate the problem and you may simply not have one.

[johanneswilm]

I think what was being asked for was a specific example to illustrate the problem and you may simply not have one.

It's mostly that there is an infinite amount of ways to present some structures - for example a figure, an image with a caption, an inline citation or equation or a note. So sure, I could give an example of how it's being done in Fidus Writer, but there is no real reason why you would want to look at it (or even support it) as it won't work anywhere else on the net either and it's not based on any standard. It's just something like <span class="equation" data-citation="LATEXFORMULA">KATEXGENERATEDCONTENT</span>.

Thank you for looking into the documentation question. Indeed, that's what it comes down to.

[dsifford]

@johanneswilm Look at the block-serialization-parser.. There you will find the serialized html of the various types of content.. If you match that format, it should paste into wordpress with no problem.

[mtias]

If you are looking at a quick way to see the HTML that different blocks support, this can be a good resource: https://youknowriad.github.io/blockbook/