Visual editor not displaying CSS3 formatting after 3.9 upgrade
-
The specific problem occurred right after upgrading to WordPress 3.9.
Background before upgrading —
Theme: Wall Street (customized)
Plugins activated: Advanced Custom Fields (Fully Updated, including for changes to 3.9); Advanced Custom Fields: Repeater Field (also updated); All in One SEO Pack; Contact Form 7; Exclude Pages from Navigation; Options Framework; and WooCommerce.Description of problem after upgrading —
I’ll use an example to illustrate the problem. Suppose I want to “Add New” page. With a completely blank page, I switch to “Text” editor. I put in a very simple CSS3 style and sentence such as the following:
<style><!-- p.small {font-variant:small-caps;} --></style> <p class="small" style="text-align: center;">The sky is blue.</p>
Now, if I switched tabs to “Visual” editor in WordPress 3.8, the visual editor would display “The sky is blue.” in small caps font. However, when I switch tabs to “Visual” editor in WordPress 3.9, the visual editor will NOT display the small caps font. Instead, it will show it as regular, standard font. In addition, if I switch back to “Text” editor from “Visual” editor, the code has been changed to the following:
<p class="small" style="text-align: center;">The sky is blue.</p>
The CSS3 style has been removed.
Troubleshooting thus far —
I have spent hours trying to figure this problem out. I followed the “How to troubleshoot visual editor problems” post (https://www.ads-software.com/support/topic/how-to-troubleshoot-visual-editor-issues?replies=9) and checked the master list. None of this fixed my problem.
Specifically, I deactivated all of my plugins. Didn’t fix the problem. I switched themes to TwentyFourteen. Didn’t fix the problem. I cleared browser cache after having deactivated plugins and switching themes. Didn’t fix the problem. With no plugins and themes switched, I tried both Firefox and Internet Explorer. Didn’t fix the problem.
Here’s what sort-of-kinda-worked: If I open a “Add New” page and have a blank slate, I can insert the small caps and any other CSS3 language through the “Text” editor. If I were to publish that page (without switching to “Visual” editor), the page displays perfectly fine with the small caps and CSS3 language is not erased after publication. The problem only occurs when switching over to “Visual” editor.
It seems to me that the visual editor is simply refusing to recognize the style codes and erasing them as soon as I switch to “Visual” editor tab. Am I doing something wrong in how I am coding it? Any guidance is much appreciated. I’m lost in this.
[Please don’t bump]
- The topic ‘Visual editor not displaying CSS3 formatting after 3.9 upgrade’ is closed to new replies.