Text editor vs visual editor handling of html

I’ve just spent some time puzzling over a little formatting issue. I have shortcodes for left half and right half to make 2 columns. If I enter them in the visual editor as…

[left_half]
    
Some text

[/left_half]

[right_half]

More text

[/right_half]

…it works fine. If I do the same thing in the text editor it adds line breaks and the second column is lower than the first. In the text editor to make it work I need to enter…

...Some text[/left_half][right_half]More text...

Yet if I switch from the visual editor version to the text editor it looks the same (?) I’m just realising that the text editor is some weird hybrid - it’s not a proper html editor, and it sort of sneaks in ideas of its own. What is the point of this? It seems difficult to know exactly what is going on.

3 Likes

I feel confident there was some reason behind it, though it escapes me. I think this behavior is related to the wpautop function. I once worked on a WP site that had used a builder – it was virtually un-editable via the visual editor; I had to use the text editor with everything back-to-back like what you referenced. It was a nightmare! :smiley:

As an aside, the wpautop (auto paragraph) functionality can be disabled with a one liner in a utility plugin:

remove_filter('the_content', 'wpautop');

With a little creativity, you could use the above to prevent automatic paragraphs on certain posts/pages/etc, rather than disabling wholesale (since it does tend to be handy in most cases.)

1 Like

Hmmm. Is there a filter for “Can you please just show me all the html”?

It strips p tags but not h. I have no idea what it is doing with br. I’ll play with that filter though and see if that makes more sense.

1 Like

On the front end of the site, yes… right-click and View Source. But, I don’t think that’s what you’re looking for. :wink:

Also of note about wpautop… if you remove the filter, you’ll have to add your p tags manually for all posts that need them. This can be a lot of work, especially on an established site.

1 Like

I’ve been caught out by that many, many times. You put in some HTML in the Text mode, switch to Visual and back to Text - and half of your code has disappeared.

I’ve always known that WP is designed that way to prevent malicious HTML being injected and just accepted it. But it is frustrating.

That’s one thing I like/liked about Elementor, you could create a HTML block and it left your code alone.

I seem to remember there are or were plugins that stopped the code from being stripped, but have never used one.

2 Likes

I also wish wpautop had never been invented. Unfortunately it is probably too late for that now, as removing it would break a whole bunch of stuff…

The way to see the “true” HTML content for a post is to run wpautop on the saved post content. For example, using WP-CLI’s wp shell:

$ wp shell
wp> wpautop( get_post( 58 )->post_content )
=> string(114) "<p>[left_half]</p>
<p>Some text</p>
<p>[/left_half]</p>
<p>[right_half]</p>
<p>More text</p>
<p>[/right_half]</p>
"

I’m not sure why entering the same thing into the text editor and the visual editor would behave differently. In that case there must be some difference in what gets saved into post_content and then how that gets processed by wpautop.

This should only apply to accounts where you do not have the Administrator role on the site. Administrators (or super-admins for multisite) can use whatever HTML they want.

1 Like

Fun fact: as of about 6 weeks ago, disabling wpautop disables Easy Digital Downloads checkout if you are also using EDD’s Mailchimp extension.

From EDD support: "we use an empty ‘p’ tag while we wait for content to load, and not finding the empty p tag breaks the checkout process.

UPDATE: just checked my email, encountered the issue mid-September, so about 3 months ago.

3 Likes

That is pretty amazing. Good example!

1 Like

First rule of wordpress, never ever switch between visual and text editor.

6 Likes

If wpautop was disabled by default, and there was an easy ‘enable’ switch (don’t have to be a developer to turn it back on), would that be considered a breaking change?

1 Like

I think it is a TinyMCE problem, rather than a WP one. Switching between Text and Visual and back to Text will strip out certain types of code.

There are plenty of articles on Google about how to work around this, and this one from TinyMCE.

1 Like

TinyMCE has its issues for sure (nicely handled by WYSIWYG Advanced IMO), but wpautop throws another layer of WTF into the mix.

1 Like

Thanks for that!

The next step is WITAF. :wink:

1 Like

This would be a change in the default behavior that would break things, so yes, definitely a breaking change.

If disabling wpautop is something you and/or others are interested in, then I’d suggest creating a petition. Probably the most reasonable starting point for such a petition would be a plugin that offers the option to disable autop, for everything or perhaps for specific posts/pages.

The most difficult part (other than being incompatible with various plugins/themes) is that when this option is changed, all existing content affected by the change would need to be converted by the plugin and re-saved.

Good clarification: breaking change is anything that breaks functionality OR alters existing content.

Hmm… I just checked a Joomla site that uses TinyMCE. It shows source code properly.

This is what I want! Not often Joomla gets one over WP/CP.

1 Like

WYSIWYG Advanced will get you there. Under ‘Advanced Options’ check the ‘Keep paragraph tags’ box.

2 Likes

Great. I didn’t think I needed that plugin, but looks like it’s going to be another standard one on all my sites.

2 Likes

OK… next question. How do I find WYSIWYG Advanced. @codepotent - I can’t find it on your site or your github account. :face_with_raised_eyebrow:

2 Likes

Lot of options, but once you get them set the way you want, you can export/import setup to other sites.

2 Likes