Paragraph spacing

[mhenrylucero]

Issue Overview

I have a page with several groups of a heading, then a line of italic text, then a paragraph. Then a separator. For some reason, the paragraphs in different groupings on the actual page are spaced different, even though I have created each group the same way.

Also, some of the paragraphs show the following error if you refresh the Editor page, or if you open it anew, after publishing:

This block appears to have been modified externally. Overwrite the external changes or Convert to Classic Text or Custom HTML to keep your changes.

When this happens, I'll click "Convert to Classic Text" then select "Convert to Blocks" from the side drop-down menu. Then publish again, and it does the same thing next time I refresh the Editor or open it from scratch.

Steps to Reproduce (for bugs)

1. Create a new page and give it a title.
2. Add a heading block and enter text in it.
3. Add a paragraph block, enter text, and italicize it, then click Block on the sidebar and change the font size. (I used 18.)
4. Add another paragraph block, then enter a bunch of text about three or four lines long.
5. Add a separator block.
6. Repeat steps 2-5 at least one other time.
7. Publish the page.

Using Google Chrome, but it also occurs with Safari (on iPhone and Macbook Air).

Expected Behavior

For each set of blocks (steps 2-5 above), the blocks should have the same spacing.

Also, the paragraphs should not give the "modified externally" error if you have not actually modified them externally.

Current Behavior

Some of the sets of blocks have the normal spacing, but others do not.

The "modified externally" error often, if not always, appears for the longer paragraphs, and sometimes the italicized ones.

Possible Solution

Screenshots / Video

I've also attached a screenshot of the code just in case it's useful to see what's going on.

Related Issues and/or PRs

Todos

• Tests
• Documentation

[youknowriad]

Can't you send the HTML of your post? That would make it easier to debug because I'm not reproducing these issues on my testing.

[mhenrylucero]

Do you mean the specific HTML of what Gutenberg produces? Or the full HTML from what you'd see from a live page if you clicked View Source?

[youknowriad]

I mean the HTML produced by Gutenberg (from the "code" editor)

[mhenrylucero]

<!-- wp:heading -->
<h2>With that one heading!</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":18} -->
<p style="font-size:18px"><em>About that one thing! </em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
One time there was this one thing, and this thing was supposed to do a certain thing but it didn&#x27;t. It did something else instead. And the guy who did it couldn&#x27;t figure out why, so he wrote out an example post about that thing, which is what you&#x27;re seeing now, and he wrote it out fairly long so that it would mimic the structure of the actual page he&#x27;s working on.
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Then there was another heading...</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":18} -->
<p style="font-size:18px"><em>About another thing.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
And that heading had another paragraph with it, too, and it was pretty long, probably for the same reason. It wasn&#x27;t about anything, not really, it was just there to serve as example text. So someone wrote it and people read it, even though they weren&#x27;t supposed to because it wasn&#x27;t about anything, really, which means that italic line is actually false, but oh, well. Them&#x27;s the breaks.
<!-- /wp:paragraph -->

[youknowriad]

@mhenrylucero I'm pretty sure this post has been edited in the "classic" editor or another editor. Gutenberg does not produce paragraphs without p tags.

How did you manage to produce this block for instance?

<!-- wp:paragraph -->
One time there was this one thing, and this thing was supposed to do a certain thing but it didn&#x27;t. It did something else instead. And the guy who did it couldn&#x27;t figure out why, so he wrote out an example post about that thing, which is what you&#x27;re seeing now, and he wrote it out fairly long so that it would mimic the structure of the actual page he&#x27;s working on.
<!-- /wp:paragraph -->

[mhenrylucero]

I wonder if that would have resulted from Gutenberg interpreting the paragraphs as classic text and me converting them back?

[youknowriad]

@mhenrylucero Do you happen to have the original version of the post before converting it. I've just tried the "convert to blocks" feature and it doesn't produce p less paragraphs. I believe you used this feature to convert the old post?

[mhenrylucero]

I just created a new copy of a page where I've been having the same problem. I created this page anew with Gutenberg, did not convert it at all, and hand-typed everything but the longer paragraphs (which I cut and pasted from the older version). Maybe this will help to discover what the problem is. Here's the link:

https://mluce.ro/short-stories-2/

And here's the code:

<!-- wp:heading -->
<h2><a href="https://mluce.ro/stories/marshghost/">The Marsh Ghost</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em>Written for a Fiction Writing class at the College of Charleston in the fall of 2016.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Ray Underwood is the kind of guy for whom good things just land in his lap — until he lost the love of his life. Full of grief, he throws himself into a search for the paranormal, driving a wedge between him and his skeptical brother, Drew, who happens to be the last thread keeping Ray tethered to reality. Burdens of blood — of family, history, pregnancy, and the Zika virus — draw them down a forest path where Ray has gone ahead; perhaps farther than Drew, or even Ray himself, had realized.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://mluce.ro/stories/seaisland/">The Sea Island</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em>Written in the wake of my aunt&#x27;s death, and dedicated to her memory.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Nine year old Ben Brook lingers by the marshside, throwing stones at a giant oak while his aunt, ill and close to death, lies surrounded by loved ones — except for him. When a feral hog appears and almost gores him, he is flung onto a path both strange and familiar, on an island unlike any he has ever known. The island&#x27;s people are comical, terrifying, and have little sympathy for a lost child. Home is farther than he knows, and getting back may lead him straight toward the thing he fears the most.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://mluce.ro/stories/tides/">Tides</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em>Written for a Fiction Writing class at the College of Charleston in the fall of 2016.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A coast is among the least stable environments on earth. Here stone, water and air meet, eroding whatever they find. Tides shift, and people shift with them. Among them: a young woman perilously close to her dream job. A father and mother who lean on their daughter&#x27;s strained sense of duty. A young man who finds lost things. An eerie magpie-like figure, and a long-buried glass onion.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://mluce.ro/stories/constellation/">Constellation</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em>Written for a Fiction Writing class at the College of Charleston in the fall of 2017.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As children, Sara Nilsson was a determined child, eager to leave home and make something of herself, and Ellis Creek her lonely, aimless classmate with a secret crush. Over a decade has passed since they have seen each other, and each has their own separate life as adults. One night Sara drops out of nowhere at the edge of a forest where Ellis is cutting bamboo. She is not the same Sara he remembers, for something strange and surreal has happened to her, something that now draws her eastward to the sea.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://mluce.ro/stories/people-of-sand-and-waves/">People of Sand and Waves</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em>Written for a Fiction Writing class at the College of Charleston in the fall of 2017.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A man wakens on a stretch of sand in the ocean — an atoll, the remnants of a reef that once ringed a now vanished island. He has no memory of his life before, or how he was lost at sea, and the emptiness he sees inside himself is terrifying, only matched by the prospect of survival with no resources but the clothes on his back…and a book that may or may not be his, written in a language he cannot speak. As the days lengthen, though, he begins to wonder if he is really alone after all.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://mluce.ro/stories/citrus/">Citrus</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em>Written for a Fiction Writing class at the College of Charleston in the fall of 2017.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A year after reporting on a serial abductor&#x27;s multi-state spree, Simon Hargrove is still unsettled. As the trial ends, he finds himself obsessed with the life story of the accused, one Pascual Fernando de Paz. On a whim, he travels to remote Hogfish Key, Florida, only accessible by ferry, in order to find out what broke the man and drove him to give up everything he once loved in a blaze of desperation. Simon&#x27;s time is limited, though: he has been followed to the island by a hurricane.</p>
<!-- /wp:paragraph -->

Regardless, this shouldn't happen whether you edit with the classic editor and switch back and forth, or just with Gutenberg. But the problem seems to appear either way.

[youknowriad]

@mhenrylucero Thanks for looking further.

I'm not sure I understand the problem you have in this last post, everything looks good to me.

[mhenrylucero]

The problem is that the italicized lines are meant to be their own separate paragraph. On the page linked to, they appear as part of the paragraph after them, even though there are p tags for each in the code.

[youknowriad]

Ok! I see now. If you take a look at the source code of your page, you'll notice that all the "p" tags have been stripped-out. On a fresh Gutenberg/WP install, I can't replicate this (with the exact same post shared above).

You might have a plugin (or your theme) stripping these tags out.

[aduth]

You might have a plugin (or your theme) stripping these tags out.

This is my hunch as well. Can you share which plugins you have activated?

One common source of frustration as it impacts markup formatting has been Jetpack's Markdown feature.

[mhenrylucero]

Oh wow, thanks so much for the help!! I disabled the Markdown feature in Jetpack, pasted in the correct code on the Edit Page screen, saved, and now it's working as intended. Thanks again!!