-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"Preformatted" block autocompleting type declarations in pasted code #14092
Comments
Hi @koskila, I had a quick test of this but wasn't able to reproduce the issue. Would be able to provide the snippet of code you're using to trigger the issue? Thanks. I also wanted to check, when you mentioned 'Modify the code as html', were you using the option 'Edit as HTML' in the block menu? I was also wondering why you'd need to do that? |
@talldan - I need to edit blocks as html to add a parameter lang="" for the preformatted blocks, as there's no out-of-the-box block providing syntax highlighting. Modifying the blocks selecting "Edit as HTML" brings this issue up - not always, but often: Removing the "closing tags" from the end sometimes is saved, sometimes not - I have no idea why it's not consistent... |
Okay, so I tried again. Adding this to a block using "Edit as HTML":
And if I then refresh the editor, this is what the block has changed into:
|
Alright, the reason is found: Gutenberg and WP-GeSHi-Highlight have some pretty bad compatibility issues it seems. Using the classic editor works, but also after disabling the highlighting plugin Gutenberg doesn't mess up. I just wish it was easier to find a well-working code highlighting plugin on WordPress... :) I'll resolve the case, since I don't think this should be fixed on Gutenberg's end. |
Actually, scratch that. After opening the page in edit mode in another browser with WP-GeSHi-Highlight disabled, the issue is there again. So it's probably not that plugin, but rather Gutenberg. Sorry for the back-and-forth. What an infuriating case. If you want any more info, let me know - would love to see this fixed one way or another. |
@koskila The preformatted block is not a code editor. You should use the Code block instead. In the future, the code block have an option to set the language and have syntax highlighting. |
Thanks for the comments - it's not the preformatted block though, it's the custom html block (like shown in the screenshots). Even a way to disable the autocomplete (for custom html blocks) from messing up would be a perfectly valid solution. |
Sorry, perhaps I'm having a hard time understanding the issue. |
No worries - so am I! But my understanding is, that whenever I want to have something like this in a custom HTML block:
It'll get turned to this:
Or occasionally this:
And it gets even weirder with Dictionaries and such:
Will become:
(Note: even casing changes!) |
Oh, and as a side note - really looking forward to the changes to code-block you mentioned! Syntax highlighting is a very welcome new feature. Much appreciated :) |
@koskila Right, I understand now. The issue is that the Custom HTML block does some HTML validation and automatic fixing when it sees invalid html. When it sees The solution (if you want to use the Custom HTML block instead of the Code block) is to escape the code you're trying to add first. Basically turn this:
into this:
There are some online tools you can use to escape content, like this one: https://www.freeformatter.com/html-escape.html This tool might also be useful - http://hilite.me/ - it converts code into syntax highlighted html snippet that you can insert into your post (and does the escaping as part of that). I would just double-check to make sure there are no malicious scripts or anything like that are being added to the HTML! (not sure, but Gutenberg might strip those out anyway). I'll close the issue now as I think there are some good solutions, and hopefully at some point syntax highlighting will appear in the code block. |
@talldan, I appreciate the response, but encoding the html does not help. See - this: I'd love to see the syntax highlighting appear, as this renders Gutenberg really difficult to use for sharing code snippets. I could upload everything to GitHub as Gists and then embed them, but that's a really overengineered problem of pasting example code - sometimes just one line - to a blog entry. I'd like for the issue to be reopened as there's no good workaround (apart from not using Gutenberg but embedding the scripts instead) available, please. |
@koskila - please could you provide reproduction steps and let us know which version you're using? I'm unable to reproduce the issue. Here's an example of what I see with the custom HTML block: Editor - Custom HTML block content |
As for reopening—if we can find a bug with the Custom HTML block, then I'm happy to open this as a bug. At the moment I'm unable to reproduce an issue. We'll need some reproduction steps in the latest version of Gutenberg (it could be that there was an issue in an older version of the editor that's since been fixed). There's already a separate open issue for syntax highlighting in the code block that you can follow - #10423 There isn't a designated developer for the issue yet, but there's already been some discussion and a few proof of concepts. |
Thanks for the reference to #10423, I subscribed to the notifications as I'd really love to see this functionality. An example where this issue happens: That html produces this after publishing: The article is here, but I'll need to revert the changes as the output is confusing to readers: |
I still couldn't reproduce this using the same text in your post. I think there are two possibilities:
If it can be isolated to a theme or plugin issue, it would be worth following up with the developer. I'm happy to test with the theme you're using if it's freely available. |
Describe the bug
"Preformatted" block is "autocompleting" or "autoclosing" type declarations in pasted code, because it interprets them as html tags.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Type declarations should not be autoclosed - they are independent, and not html.
Screenshots
(Example with being closed at the end of the file.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Let me know if you require any more information!
The text was updated successfully, but these errors were encountered: