Gutenberg Markdown Vs Custom HTML Blocks
-
I’m experimenting with ways of editing my content locally.
I get that using any alternative method which circumvents the general Gutenberg workflow seems to preclude you from having excerpts generated for you automatically. Aside from this though, the markdown and custom HTML blocks do not seem to behave consistently.
Most of the time I’d be happy with writing locally in markdown, then pasting into a markdown block in WP. But If I want to use named anchors for a table of contents, it seems I will need to have my local editor (in this case, Visual Studio Code), convert my markdown file to an HTML file, and paste that instead into WP.
The main glaring difference I see here is that for spacing between paragraphs, the WP markdown block does what I expect (in other words, there are clear visual gaps between paragraphs). In contrast, for text wrapped in
<p></p>tags, the WP custom HTML only seems to put a basic line break between paragraphs, not actual spacing.Is there something obvious I’m overlooking here, to make paragraphs behave the way you would normally expect, within a WP custom HTML block?
The blog I need help with is: (visible only to logged in users)
-
Please ignore the last line above, there is not a specific blog I’m seeking help with, this is a general question, and in the meantime I’m trying to find a way to edit or delete this post, so I can post a corrected version …
-
You can’t edit or delete a thread posted on this forum.
We can only help with sites running on the wordpress.com platform.
It’s very easy to create anchors or page jumps on the wordpress.com platform, https://wordpress.com/support/splitting-content/page-jumps/. There is no need to fool around with all sorts of editors or whatever. -
The sites are hosted on WordPress.com
I think you misunderstand. I have reasons for wanting to edit my content locally, and only pasted it into WP when I am done. I don’t want a bunch of autosaves and revision history in WP, I can handle that on my own locally with git.
Currently, markdown and HTML seem to be second-class citizens / an afterthought in Gutenberg for those of us who have valid reasons for editing content locally and not becoming beholden to Gutenberg blocks.
-
Most of those external editors create sloppy and crappy html. Gutenberg editor creates the cleanest html for the wordpress.com platform. But hey, it’s your choise.
-
I can only guess you’re referring to a WYSIWYG thing like Dreamweaver (does anyone still use that?). Have you ever actually worked with a plain text editor like Sublime Text or Visual Studio Code (or even Notepad if you’re on Windows)? The HTML doesn’t get much plainer or standards-compliant than that, when you’re looking at and creating it directly, by hand, without anything generating it for you.
Moreover, the most complex HTML in any WordPress site is outside of the posts themselves (in the themes containing posts).
Most blog posts themselves are rarely more complex than, say:
<h1>Post title</h1> <p>A first paragraph ...</p> <p>A second paragraph ...</p> <h2>Another Section</h2> <p>A third paragraph ...</p>So I’m not sure why you’re dismissing people who opt to use markdown. Markdown is pretty common around the web, from Reddit comments to GitHub issues and elsewhere. It’s been around for years. And people have known and written about how much of a lemon WordPress is for years (both before and after Gutenberg).
I’ve looked at the HTML created by the default Gutenberg block editor. All kinds of nutty <!– comments like this –> to make Gutenberg actually work. Not clean code by a longshot. I get the feeling you really haven’t used a basic text editor or can write HTML by hand (?), so I’m not sure why you chose to opine here if it’s outside your lane (?). I’m hoping someone who actually has experience with what I’m talking about will chime in.
-
Hi there,
I’m experimenting with ways of editing my content locally.
If you wish, you can edit locally using the WordPress app for mobile or desktop which will allow you to use the block editor in an offline fashion: https://wordpress.com/support/offline-editing/
There are also a few other offline editors that are supported, and we list them there as well.
The main glaring difference I see here is that for spacing between paragraphs, the WP markdown block does what I expect (in other words, there are clear visual gaps between paragraphs). In contrast, for text wrapped in <p></p> tags, the WP custom HTML only seems to put a basic line break between paragraphs, not actual spacing.
Do you have an example on your site where we can see this? If so please share a link so we can take a closer look.
Also if you wish you can upgrade to our Business Plan, which will allow you to upload any plugin or theme “designed for WordPress” such as the “markdown editor” plugins you see here: https://wordpress.org/plugins/search/markdown/
-
Hmm, apparently the HTML block preview (before publishing) is not accurate, as depicted in this screenshot of the editor and the published page side by side:
After publishing, the HTML block does seem to do what you expect, although you wouldn’t think so just based on the preview rendering.
-
-
Your screenshot on the left, can you share the URL to that page so we can take a closer look at what you see in the editor view?
For me the paragraph spacing in the editor is correct a faithfully represents what I see on the live site so I see something very different than your screenshot.
Also can you visit this page and copy the results link you see there?
https://www.whatsmybrowser.org/
This will give us some extra troubleshooting info about your computer, thanks!
-
Left side of screenshot:
https://wordpress.com/post/illuminspire.wordpress.com/85Right side of screenshot:
https://illuminspire.wordpress.com/2021/10/24/markdown-vs-html-blocks/I’m using Firefox 93 on Manjaro Linux (GNOME edition):
https://www.whatsmybrowser.org/b/3RQKYIf you actually have access to the left side of the screenshot, could write a little something at the end of the post to let me know you accessed it?
-
The HTML file was generated automatically from my markdown file in Visual Studio Code. In the generated file I discarded everything up to and including the <body> tags.
-
Interesting. I am using Mac OS 11 and Chrome 94, and I do not see this issue you are referring to. Here is a video what I see in the post editor: https://d.pr/v/wkdRRY
As well I cannot view your post editor view easily in other browsers besides Chrome, but I set up a similar markdown test on one of my sites in Firefox, using the same Quadrat theme as you are using, and for me the paragraph spacing also appears correct in the “preview’ within the MD block.
So the issue does not seem to be specific to all instances of the Firefox browser but may be an issue for the Linux variant of Firefox. Based on your screenshot it appears that CSS is not being rendered correctly in your view, so it may help to
test on a different device to see if you have the issue there as well?As well, on your linux computer, do you have the same issue in other browsers as well? Or just in Firefox?
If you actually have access to the left side of the screenshot, could write a little something at the end of the post to let me know you accessed it?
I have access to view but as a matter of policy we are not able to make changes to your site.
Thanks for the additional info!
-
The markdown block always looks right to me in the preview, it’s the custom html block where the spacing seems nonexistent in the preview. I’d only use a custom html block if I had more complex stuff that markdown won’t support (which hopefully won’t be too often).
I just tried it in Vivaldi (basically Chrome), and the custom html block preview issue persists there too.
I guess as long as it renders fine on the published site, it’s not a big deal if if the preview is not working as expected.
One positive I noticed about the custom html block is that it seems to enable WP to generate an excerpt for me (but I have do create on manually if everything is in a markdown block).
-
Hi there,
I guess as long as it renders fine on the published site, it’s not a big deal if if the preview is not working as expected.
I think that might be where we have to leave it in this case.
Looking at your screen shots, it would appear that specifically no padding is being applied to elements on the preview, but like Jerry I’m not able to replicate this on my end.
If this is happening specifically in the HTML block, it could also be that this is being caused by something in the content of the block – some unsupported HTML attributes perhaps, or invisible characters being copied in from Visual Studio, which get stripped out on publication.
One thing you can try is to paste your code into a plaintext editor like Notepad (or whatever the Linux equivalent is), before pasting it into the HTML block. That should strip out any invisible characters.
Also compare the content of the HTML block after you publish with what you actually copied from Visual Studio: does anything appears to be missing?
If neither of those pan out, I’m afraid I don’t have anything more to offer on top of what has already been covered in this thread.
-
That’s unfortunate that it will remain a mystery. I can verify the same problem happens in Firefox 93 on Windows 10. On Linux, it doesn’t matter if I save the HTML in VSCode, Sublime Text, gedit, or nano. It doesn’t matter if I switch from Windows to Unix line endings. Within VSCode I have it set to display all invisible characters as a habit. Nothing is missing, from what I copied, after publishing.
Thank you for attempting in any event. I’ll mark it as resolved even though it doesn’t seem to be.
-
Hi again,
I think it will also be helpful to clarify that the HTML block and it’s behavior is derived from the open source Gutenberg project on WordPress.org. If you are familiar with how to file issue reports on Github, you can report this formatting errors you are seeing so it can be addressed at the source: https://github.com/WordPress/gutenberg/
The larger WordPress project (of which WordPress.com is a small part) is open to anyone so you can report the formatting issue directly to the project devs. One of the difficulties we’re having here is that we can’t recreate this issue on our end, but if we could this is where we would report it.
- The topic ‘Gutenberg Markdown Vs Custom HTML Blocks’ is closed to new replies.
WordPress.com Forums 