Custom CSS Not Appearing in Visual Pane. Only After Publishing Post.

Over the past five days, I was holding an exchange with Jeremy Herve of the JetPack team, regarding a problem I have been having with the custom CSS part of that plugin.

For some reason, a few hours ago, he marked the conversation as resolved — even though it really isn’t — and seems to think that my problem is not related to the JetPack plugin directly.

For reference, here is your previous thread:
https://www.ads-software.com/support/topic/custom-css-not-working-on-self-installed-blog/

I went into JetPack’s custom CSS settings, and added the following in the CSS field in the left-hand column as a test:

That part works well on your site. No issues there! To clarify, this feature is actually not managed by Jetpack anymore; the CSS editor is now part of WordPress itself, since version 4.7. That “Additional CSS” section in the customizer will remain there even when deactivating all other plugins on your site.

When I switch over to WP’s “Visual” pane in the post editor, based on my custom CSS, I would expect to see a blue box with a 5px border radius, and red text within that box.

However, I was not, and am not, seeing that whatsoever.

Then I discovered exactly what is going on. It is ONLY after I hit the “Publish” button, and go to my main blog page, that the custom CSS becomes visible as a blue box with red text in it.

The problem might not be linked to the Visual or the Text editor. It could be that WordPress’ custom CSS feature doesn’t actually enqueue any custom CSS on draft posts on your site, for some reason.

Could you try to use your browser inspector to highlight one of the div containers you’ve edited when viewing a draft? Here is how it should look like:

https://i.jeremy.hu/editor.png
https://i.jeremy.hu/preview.png

As you can see, the CSS I added is displayed properly, even when previewing my draft. Could you check and see what you see on your site?

If you’re not familiar with the browser inspector, you can check this post to find out more:
https://dailypost.wordpress.com/2013/07/25/css-selectors/

Thank you Jeremy for that additional information. To be honest, with your last response in the other message thread, you actually left me a bit confused.

In other words, I couldn’t understand — and still don’t understand, really — why the custom CSS is promoted as a feature of JetPack, and included in its settings options, but then you turn around and tell me that I should really be applying custom CSS in Appearance/Customize/Additional CSS instead.

Anyway, I use Firefox 51.0.1 64-bit on an old iMac running El Capitan 10.11.6.

FYI, that last link you provided offers outdated information regarding Firefox.

What I mean by this is that just the other day, in fact, I learned that Mozilla no longer supports Firebug in Firefox. It is no longer even listed under Tools/Web Developer in Firefox. However, there are a bunch of other tools.

As I already knew — because I regularly use the “Responsive Design Mode” option — under the Tools menu, there is Web Developer/Inspector.

At any rate, I experimented with the very same example that I shared earlier, by typing the following in the “Text” pane of WP’s post editor window:

<div class="box2">
<div class="redfont">
This is a test to see if this will work.
</div>
</div>

When I choose Tools/Web Developer/Inspector, a new section appears on the bottom of my web browser window, and the first tab in it, is aptly called “inspector”.

Now, here’s the thing . . .

Regardless of what part of the post I select with my mouse — either one of the two divs, or the text of the message itself — it still shows the very same thing, and it is NOT showing the divs at all. Here is exactly what I see in that inspector tab:

<textarea id=”content” class=”wp-editor-area” style=”height: 300px; margin-top: 37px; display: none;” autocomplete=”off” cols=”40″ name=”content” aria-hidden=”true”></textarea>

Regardless of whether I am in the “Text” pane, or the “Visual” pane, that is all that I see.

To clarify, there is other stuff in the inspector window, but the above is what is highlighted in blue, regardless of what I select in my short message. In fact, even if I don’t select anything at all, that same block of parameters is highlighted in blue in the inspector tab.

As you can see — and assuming that I am doing everything right — it is as if there not even anything in the post editor window. The above info just describes the text area itself.

BTW, being as you said that custom CSS is no longer managed by JetPack, I disabled custom CSS in my JetPack settings, just in case there was some kind of conflict between having the same custom CSS in both places; that is, in JetPack, and in “Additional CSS”.

That is about all I can tell you for now. I hope it offers some hints regarding what is going on.

PS: I am very sick right now, so I need to go back to bed. However, if you get any ideas regarding what is going on, please let me know, and I will respond as soon as I can.

Thanks!

Jeremy, I wanted to add a few more comments to what I just stated above.

This is just a long shot, but I do have SSL/TSL enabled site-wide, which of course, includes on my blog.

Would this possibly be having any effect on this issue?

I didn’t think so.

Also, I have Automattic’s “AMP” plugin installed as well, being as I fully implemented AMP on my website during the past several weeks.

I have a few dozen other plugins installed as well. However, NONE of them are in any way related to posting messages, CSS styles, etc., other than perhaps “SEO Friendly Images”, which adds “alt” and “title” tags to my images for better SEO.

why the custom CSS is promoted as a feature of JetPack, and included in its settings options, but then you turn around and tell me that I should really be applying custom CSS in Appearance/Customize/Additional CSS instead.

Jetpack’s Custom CSS feature used to be a full-featured CSS editor, available under Appearance > Edit CSS. That editor doesn’t exist anymore. When WordPress 4.7 was released, Jetpack’s CSS editor was removed from Jetpack.

Now, Jetpack’s Custom CSS feature only adds a few options to WordPress’ Core CSS editor, available under Appearance > Customize > Additional CSS.

Regardless of what part of the post I select with my mouse — either one of the two divs, or the text of the message itself — it still shows the very same thing, and it is NOT showing the divs at all. Here is exactly what I see in that inspector tab:

<textarea id=”content” class=”wp-editor-area” style=”height: 300px; margin-top: 37px; display: none;” autocomplete=”off” cols=”40″ name=”content” aria-hidden=”true”></textarea>

It seems like you’re looking at your browser inspector while still being in your post editor, in the dashboard. Custom CSS is not loaded there. Custom CSS is only loaded on the front end of your site, where your visitors can see your posts.

When you’re writing your posts in the post editor in your dashboard, you won’t see any custom CSS. That’s how WordPress works right now, so that’s the expected behaviour.

If you would like Custom CSS to be loaded in the dashboard as well, you can make that suggestion by starting a new ticket here:
https://core.trac.www.ads-software.com/newticket

I would recommend explaining exactly how you use Custom CSS on your site, and why you would expect Custom CSS to be visible in the post editor as well.

Jeremy, you said:

It seems like you’re looking at your browser inspector while still being in your post editor, in the dashboard. Custom CSS is not loaded there. Custom CSS is only loaded on the front end of your site, where your visitors can see your posts.

Yes, that is exactly where I am at when I use the browser inspector.

You also said:

When you’re writing your posts in the post editor in your dashboard, you won’t see any custom CSS. That’s how WordPress works right now, so that’s the expected behaviour.

Oh gosh . . . that is what I have been saying all along. I only see the effects of the custom CSS AFTER I publish my post, and look on my blog’s home page.

You likewise said:

If you would like Custom CSS to be loaded in the dashboard as well, you can make that suggestion by starting a new ticket here:
https://core.trac.www.ads-software.com/newticket

Yes, that is exactly what I want to happen, as I have been saying all along.

Finally, you said:

I would recommend explaining exactly how you use Custom CSS on your site, and why you would expect Custom CSS to be visible in the post editor as well.

Maybe I am somehow different, but I would think that every blog admin would want to verify how the custom CSS is going to look — by viewing it in the “Visual” pane of the post editor — before actually publishing a post that contains custom CSS.

In my mind, that is the safe and logical way to do things. I mean, I wouldn’t publish an AMP page, unless I had first passed it through a few tests, like the AMP Validator Test, the PageSpeed Test, and the Structured Data Test. I also run all of my web pages through Balthisar Tidy for Work, to make sure that the HMTL is as correct as it can be.

I take the same approach to my blog posts. I simply want to see and know that it will appear exactly as I want it to appear, BEFORE hitting the “Publish” button.

That is my personal reasoning. Others may see it otherwise.

I would think that every blog admin would want to verify how the custom CSS is going to look — by viewing it in the “Visual” pane of the post editor — before actually publishing a post that contains custom CSS.

That’s already possible, though. You can click on the “Preview” button appearing above the Publish button, and you’ll be able to see how the post will look like once you hit the Publish button.

Oh gosh . . . Jeremy, you know as long as I have been using WordPress, I had never noticed that “Preview” button. ??

Normally, I just examine my new post in the “Visual” pane, and if it looks good, I hit the “Publish” button.

If I had known about the “Preview” button, and the fact that custom CSS was not expected to show in either the post editor’s “Text” pane or in the “Visual” pane, both of these message threads could have been avoided.

I guess you live and learn . . . by asking a lot of annoying questions! ??

Thanks, my friend. Maybe I am just getting too old for this stuff. In my 60s.