WYSIWYG Error?

[SPiNNdevs]

I think there is a problem with opening and closing <p> tags if an <hr> is inserted into an paragraph.

For example, if I have the following text in my editor:

<h3>GS1 Connect</h3>
Dieses Leistungspaket umfasst alles was für den Einstieg in die Nutzung des GS1 Systems benötigt wird. Neben der GS1 Basisnummer ermöglicht das myConnect Onlineportal die einfache Nutzung der GS1 Standards

<hr class="push-bottom" />

<a href="http://www.gs1.at/downloads-services/services/myconnect.html">Mehr über GS1 Connect</a>

The output is the following:

<h3>GS1 Connect</h3>
<p>
Dieses Leistungspaket umfasst alles was f&uuml;r den Einstieg in die Nutzung des GS1 Systems ben&ouml;tigt wird. Neben der GS1 Basisnummer erm&ouml;glicht das myConnect Onlineportal die einfache Nutzung der GS1 Standards</p>
<hr class="push-bottom">
<a href="http://www.gs1.at/downloads-services/services/myconnect.html">Mehr &uuml;ber GS1 Connect</a>
</p>

I think the right behaviour is to close the <p> tag in front of the <hr> and open it again right after it?

The current output creates an "error" in my latest chrome version (I also attached a screenshot)

<h3>GS1 Connect</h3>
<p>Dieses Leistungspaket umfasst alles was für den Einstieg in die Nutzung des GS1 Systems benötigt wird. Neben der GS1 Basisnummer ermöglicht das myConnect Onlineportal die einfache Nutzung der GS1 Standards</p>
<hr class="push-bottom">
<a href="http://www.gs1.at/downloads-services/services/myconnect.html">Mehr über GS1 Connect</a>
<p></p>

[SPiNNdevs]

chrome error

[ocean90]

Hello @SPiNNdevs, welcome to our Trac!

I can't reproduce this behaviour on a clean install. I get the following output in 4.5 and in current trunk:

<h3>GS1 Connect</h3>
<p>Dieses Leistungspaket umfasst alles was für den Einstieg in die Nutzung des GS1 Systems benötigt wird. Neben der GS1 Basisnummer ermöglicht das myConnect Onlineportal die einfache Nutzung der GS1 Standards</p>
<hr class="push-bottom" />
<p><a href="http://www.gs1.at/downloads-services/services/myconnect.html">Mehr über GS1 Connect</a></p>

Note that the umlauts shouldn't be encoded as well.

Does it still happen with all plugins disabled and a default theme activated?

[SPiNNdevs]

Hy,

many thanks for the fast response!

You are right, it's the WYSIWYG from the ACF plugin which seems to make troubles...
Do you know if this plugin is using the exact same editor as the WP core?

[lukecavanagh]

@SPiNNdevs

Did a similar test on a clean local dev site and I can not produce the same issue.

[azaozz]

Replying to SPiNNdevs:

You are right, it's the WYSIWYG from the ACF plugin which seems to make troubles...

Where exactly do you see that error? Inside the Visual editor or on the front-end after editing a post? Also are you talking about the main editor on the Edit Post screen?

[lukecavanagh]

@SPiNNdevs

Is it the content > Wysiwyg Editor (WordPress) or the

Wysiwyg Editor field being used in ACF?

​https://github.com/elliotcondon/acf-wordpress-wysiwyg-field

[SPiNNdevs]

Thanks for all the replies!
I did a fresh install and checked again,
and found out, that it is working fine if there is a blank line before and after the <hr/>,
but is creating malformed HTML when they are missing. Additionally, the output changed slightly:

<h3>GS1 Connect</h3>
<p>Dieses Leistungspaket umfasst alles was für den Einstieg in die Nutzung des GS1 Systems benötigt wird. Neben der GS1 Basisnummer ermöglicht das myConnect Onlineportal die einfache Nutzung der GS1 Standards</p>
<hr class="push-bottom" />
<a href="http://www.gs1.at/downloads-services/services/myconnect.html">Mehr über GS1 Connect</a></p>

This is created for the front-end and applies to the wordpress "native" post-editor as well as the ACF WYSIWYG editor (content > Wysiwyg).

[SPiNNdevs]

Hello,

we did another test, the problem exists in all WYSIWYG editors, so I guess its an WordPress core problem.

As soon as you insert an <hr /> without an leading line break you get the wrong HTML output.

This input in an WYSIWYG in text mode:

<hr />
<a class="link--download" href="http://....pdf">Bericht: Packaging</a> (Quelle)

<a class="link--download" href="http://....pdf">Empfehlung: Packaging</a> (Quelle)

Resulsts in:

<hr />
<a class="link--download" href="http://....pdf">Bericht: Packaging</a> (Quelle)</p>
<p><a class="link--download" href="http://....pdf">Empfehlung: Packaging</a> (Quelle)</p>

So we miss a opening <p> tag here.

I think this is a problem which should be fixed?

[azaozz]

This sounds like a possible autop bug, however I still cannot reproduce it in the "main" editor on the Edit Post page. Inserting the above example in the Text editor:

<hr />
<a class="link--download" href="http://....pdf">Bericht: Packaging</a> (Quelle)

<a class="link--download" href="http://....pdf">Empfehlung: Packaging</a> (Quelle)

and publishing the post (with or without switching to the Visual editor first). I get this on the front-end:

<div class="entry-content">
<hr />
<p><a class="link--download" href="http://....pdf">Bericht: Packaging</a> (Quelle)</p>
<p><a class="link--download" href="http://....pdf">Empfehlung: Packaging</a> (Quelle)</p>
	</div><!-- .entry-content -->

All is working as expected. This will need more detailed steps on how to reproduce. Also, where do you insert the example content; where do you see the output; does still happen in WordPress 4.6?

[azaozz]

No reporter feedback or other comments in nine months. Feel free to reopen with more details and steps to reproduce.