Exported articles lack empty lines
Ostropol opened this issue · comments
Hello! Whenever I export by org2blog articles and view them on my website all the empty lines are gone. This way the post becomes one big wall of text instead of a neatly organized article. When I open the blog article in the Wordpress editor (classic and regular) the empty lines are there, but they only seem to work if I double them. Could this be an export issue with org2blog or is that impossible? I tried multiple ways of reconfiguring my blog, but nothing seems to work. Might there be a difference in the way org2blog sees newlines compared to how the Wordpress editor sees them?
Excuse me for my messy issue. This is the first time submitting something like this but I am wiling to test things out and provide further elaboration.
Hi @Ostropol . Please share a minimal example of your post so I can attempt to reproduce it.
Would this be helpful?
Definitely, I just need the source for now though.
Please copy and paste the Org mode content here so I can try posting it on my blog.
Ok! That would be:
#+BLOG: OCC
#+POSTID: 253
#+DATE: [2022-10-31 Mon 15:54]
#+title: Test
#+description: This is a test
* Title
If I write a line like this it's fine. Also when I add a second line directly after it, there are little to no issues.
The problems start when I leave an empty line. This should become a second paragraph, but it doesn't when I export this to my website. It only sees the \n after 'issues'.
Gotcha. Here is what I see: source, editor view on wordpress, and post on wordpress:
This is what I would expect. Does it look right to you?
Can you change your WordPress editor so it shows things in the straight html?
Your rendering of the text look like how I intend them to look, but somehow they don't on my site. The html is as follows:
<div id="outline-container-org278e256" class="outline-2">
<h2 id="org278e256">Title</h2>
<div class="outline-text-2" id="text-org278e256">
<p> If I write a line like this it’s fine. Also when I add a second line directly after it, there are little to no issues. </p>
<p> The problems start when I leave an empty line. This should become a second paragraph, but it doesn’t when I export this to my website. It only sees the \n after ’issues’.</p>
</div>
</div>
The odd thing is that it also doesn't seem to matter if I add extra newlines inbetween the paragraphs. The exported document ignores them just the same.
I forgot to share the screenshot of my post in the browser. The gap between paragraphs does render as expected:
Please try creating a post from scratch via the editor and then look at its html to see if that works as expected.
The way the editor behaves is when I press shift+enter it gives me a regular newline like this:
Example sentence.
Example sentence 2 after newline.
But when I press regular enter it gives me a paragraph break like so:
Example sentence.
Sentence after regular enter resulting in paragraph break.
So I assume that's working as intended.
What does the raw HTML look like for when you edit it manually in WYSIWG mode?
The raw HTML look like this after typing something similar in WYSIWG:
<h2>Testheading</h2>
Test sentence. Test sentence 2.
Sentence after pressing shift+enter.
Sentence after pressing enter.
After further testing I've found out that it most likely has something to do with headings. If I export an article without any headings, the formatting renders fine. But as soon as I add a heading, the text underneath it refuses to generate empty lines. Text placed before the first heading on the page also renders fine. It only starts breaking down when the text is placed underneathed any level heading. In HTML format it looks like this:
This is text before the header. This is a sentence after the first.
This is a correctly rendering sentence after an empty line.
<div id="outline-container-orge8c70b8" class="outline-2">
<h2 id="orge8c70b8">This is a header!</h2>
<div class="outline-text-2" id="text-orge8c70b8">
This is text after the header. This is a sentence following it directly.
This is the sentence after exactly the same empty line, except now it doesn't work.
</div>
</div>
I suspect there might be some odd thing happening with the way org2blog exports the headers, but I know very little about such things.
Gotcha. That is a good clue for us. I copied and pasted that HTML directly into the WP Classic editor and looked at it on my blog and here is what I saw:
This is what I would expect, it seems right. Is this what you would expect does it seem right?
What theme are you on?
I'm on WordPress Twenty Sixteen Theme.
I am using the 'Blank Canvas' theme as I wanted a very minimalist site. Your screenshot looks right to me as well. I suppose there has to be some sort of issue with the way the theme handles org2blog headers then?
There is a change. I feel like when we narrow down things we have seen:
- Org2Blog file: Good? ☑
- HTML Content in WP Editor: Good? ☑
- Web browser render it correction on my machine?: Good? ☑
- Web browser render it correction on your machine?: Good? No
I don't want to get into a trap here thinking this though.
Can you try the same theme as I am on and see if it works right without running into problems on your current setup on your WP?
Using the Twenty Sixteen theme the text renders correctly so there has to be a problem with the way Blank Canvas handles the html. What I still find odd though, is that if I write the text directly in the Wordpress editor my problem doesn't occur. It only happens when I export an org file.
The theme is free to stylize the different HTML elements as it wishes. So it can render the newlines however it wants. Generally I'd say that it styles things differently and it is as simple as that.
Have you tried any other themes in comparison too?
Other themes also seem to work. Do you have any advice as to how I would go about troubleshooting/fixing this sort of thing if it's just the theme's fault?
Its hard to say that is right or wrong here. The theme is here to help, and it can do it however it wants. Here is the html in a plain old html page:
<html>
This is text before the header. This is a sentence after the first.
This is a correctly rendering sentence after an empty line.
<div id="outline-container-orge8c70b8" class="outline-2">
<h2 id="orge8c70b8">This is a header!</h2>
<div class="outline-text-2" id="text-orge8c70b8">
This is text after the header. This is a sentence following it directly.
This is the sentence after exactly the same empty line, except now it doesn't work.
</div>
</div>
</html>
And here is how it looks in a web browser on my computer:
You can there are 3 things to consider here:
- How plain old HTML works in a web browser.
- How Org2Blog creates that html, what it looks like
- How the theme renders that html
I'd say if you are curious to ask the maintainers about it and report back. If it is expected behavior then you will know. If it isn't then we'll do some more digging.
@Ostropol It sounds like the change should start in the theme for now. Please report back and open this task if we should review it again.