My HTML Markup in Sections is disappearing!

[Anthony]

thanks haha!

[Tom]

I believe that’s happening because your HTML is invalid. For example, <a> elements can’t be wrapped around block elements like a <div>.

I ran some tests to compare.

GPP 1.7.8 + Gutenberg: https://www.screencast.com/t/H9c7YBtidDk
GPP 1.7.8 + Classic Editor: https://www.screencast.com/t/q8ooZB5ndx

GPP 1.8.0 + Gutenberg: https://www.screencast.com/t/lfCWQuyo3Q
GPP 1.8.0 + Classic Editor: https://www.screencast.com/t/YqP5bFEAha

Regular Classic Editor (no Sections): https://www.screencast.com/t/qo6jzJmDM1k

The WordPress editor has always stripped invalid HTML. Sometimes that’s a good thing, and sometimes it’s annoying. One of the things I like about Gutenberg is you can use the HTML block without losing your HTML (even if it is invalid).

[Anthony]

I’ll swap some stuff around and see if that does the trick. Thanks so much for your time!

[Paul]

Anthony, FYI you can use the free tool at useloom(dot)com (Chrome browser only) to record your screen for stuff like this. It’s very handy!

[Tom]

No problem! Let me know what you find 🙂

[Anthony]

Can you help me with why the <p> tags are being stripped in this code? It could be I’m writing the code wrong again but it looks right to me.

<h3>Beets & Beet Juice </h3>

<img class="alignleft" style="padding: 10px;" src="https://www.cukebook.org/wp-content/uploads/2019/03/beets-thumb.jpg" style="padding: 10px;" />

<p>Growing up I was always told that beets are good for me but I never listens because they didn't taste yummy to me at the time.</p>

<p>Beets have among the highest <a href="https://en.wikipedia.org/wiki/Nitrate">nitrate</a> contents of all vegetables. Studies have shown that consuming foods that are high in nitrates help the body create more <a href="https://en.wikipedia.org/wiki/Nitric_oxide">nitric oxide</a>. Nitric oxide is said to help open your blood vessels and help lower blood pressure. One study also showed that nitrates present in beetroot juice lowered blood pressure within just 24 hours.</p>

<p>Another study which was done in 2015 found that people with high blood pressure saw it reduced when they consumed 250ml of beet juice every day for four weeks. [1]</p>

<strong>Note:</strong>Blood nitrate levels remain elevated for about six hours after eating dietary nitrate. Therefore, beets only have a temporary effect on blood pressure, and regular consumption is required to experience long-term reductions in blood pressure . [1]
<div style="background: #eeeeee; padding: 20px 20px 20px 20px; border-left: 4px solid #7DA92A; margin: 20px 0px 20px 0px;">

<strong style="color: #7da92a; margin-bottom: 10px;">Quick Facts:</strong>
<p style="margin-bottom: 0px;">Beets are loaded with vitamins and minerals and low in calories and fat. They also contain inorganic nitrates and pigments, both of which have a number of health benefits.</p>

</div>
<p>You can juice your own beets or simply cook and eat the whole root. Beetroot is delicious when roasted or added to stir-fries and stews. You can also bake them into chips. Be careful when handling beets — the juice can stain your hands and clothes.</p>

<p>Try making your own carrot, apple, ginger, and beet juice for high blood pressure.</p>

<button class="accordion"><img style="margin: 0px 10px 12px 0px;" src="https://www.cukebook.org/wp-content/uploads/2019/03/nutrition-icon.png" align="middle" />Nutrition Facts</button>
<div class="panel">
<p>Amount Per 1 cup (136g | % Daily Value*</p>
<ul>
 	<li><strong>Calories</strong> 59</li>
 	<li><strong>Total Fat:</strong> 0.2 g - 0%</li>
 	<li><strong>Saturated fa:t</strong> 0 g - 0%</li>
 	<li><strong>Polyunsaturated fat:</strong> 0.1 g</li>
 	<li><strong>Monounsaturated fat:</strong> 0 g</li>
 	<li><strong>Cholesterol:</strong> 0mg - 0%</li>
 	<li><strong>Sodium:</strong> 106mg - 4%</li>
 	<li><strong>Potassium:</strong> 442mg - 12%</li>
 	<li><strong>Total Carbohydrate:</strong> 13 g - 4%</li>
 	<li><strong>Dietary fiber:</strong> 3.8g - 15%</li>
 	<li><strong>Sugar:</strong> 9g</li>
 	<li><strong>Protein:</strong> 2.2g - 4%</li>
 	<li><strong>Vitamin A:</strong> 0%</li>
 	<li><strong>Vitamin C:</strong> 11%</li>
 	<li><strong>Calcium:</strong> 2%</li>
 	<li><strong>Iron:</strong> 6%</li>
 	<li><strong>Vitamin D:</strong> 0%</li>
 	<li><strong>Vitamin B-6:</strong> 5%</li>
 	<li><strong>Cobalamin:</strong> 0%</li>
 	<li><strong>Magnesium:</strong> 7%</li>
</ul>

<p>*Percent Daily Values are based on a 2,000 calorie diet. Your daily values may be higher or lower depending on your calorie needs.</p>
</div>

<h4>Other benefits of eating beets</h4>

<ul>
 	<li>Can Improve Athletic Performance</li>
 	<li>May Help Fight Inflammation</li>
 	<li>May Improve Digestive Health</li>
 	<li>May Help Support Brain Health</li>
 	<li>May Have Some Anti-Cancer Properties</li>
 	<li>May Help You Lose Weight</li>
</ul>

When I head from Test > Visual Editor and back to Text it’s stripping the <p> tags

[Tom]

What version are you testing this in?

[Anthony]

1.7.8

[Tom]

Can you try in 1.8.0-alpha.1? I believe this is one of the bugs we fixed.

[Anthony]

in 1.7.8 I could go in and out of sections and it would stay in “text”. Now in 1.8.0 every time I go into a section it automatically starts me off in “visual editor”, and strips the <p> tag still.

Anthony

[Tom]

WordPress 5.0 changed how the classic editor works, so some things do have to change, unfortunately. We’ll try to find a solution to the editor remembering whether you’re in Visual or Text.

As for the actual paragraph tags, they remain: https://www.screencast.com/t/OjOkVEoDuKdb

The extra spaces are stripped, which I believe is a WordPress 5.0 thing, unfortunately.

[Anthony]

Weird,

I wonder why it’s getting rid of the paragraph tags for me and not you.

I wonder if I have some function that’s messing with it.

Frustrating if you don’t have a backup of the code somewhere you have to add back the code that was stripped simply from going to the visual editor.

[Tom]

You don’t see the paragraph tags at all like in my video? Maybe try clearing your browser cache?

[Anthony]

I do not. Clearing cache didn’t work for me ]:

[Anthony]

Also when I disable the visual editor it gets removed in the normal editor, but it’s still present in the sections editor.

This is kind of frustrating haha.

Why does WordPress insist on stripping out these tags. I can’t keep going back and putting in these tags it’s getting very frustrating.

[Author]

Posts