Updating to 4.7 deletes existing Jetpack custom CSS

[pressupinc]

Today I updated WPShout.com from 4.6.1 to 4.7, and lost all the custom CSS in my Jetpack "Appearance > Edit CSS" page.

Have since restored the site, so it looks fine now. I've attached screenshots of:
1) working.png: How it should look (including how the Jetpack styles make it onto the page), and
2) after_update.png: How it looked immediately once I updated to 4.7.

I created the screenshot for 2) by manually deleting all the Jetpack styles in Chrome dev tools, but it's *exactly* how the site looked when I updated to 4.7.

A couple of other details:

1. I tried the same process (update from 4.6.1 to 4.7 with the same custom CSS in "Appearance > Edit CSS") on a locally hosted site, and it properly loaded into the customizer. Clicking "Appearance > Edit CSS" now redirects to the "Additional CSS" view on the customizer, and the CSS is still properly there.

2. On another locally hosted site, I tried the same process (update from 4.6.1 to 4.7 with custom CSS in "Appearance > Edit CSS"), but with a single very simple CSS rule on the page: see simple_change.png.

The single rule continued to function, but there's no edit window for the custom CSS in the customizer: see after_simple_change.png.

So at this point I'm just seeing very inconsistent behavior in Jetpack's custom CSS feature during upgrades to 4.7.

I'm worried that a lot of 4.7 updates will end scarily for Jetpack users, so please let me know if this is an understandable problem and if there's a fix in the works -- or if it's a problem only I will have, which seems unlikely but would be nice.

[pressupinc]

wpshout.com pre-update to 4.7, with Jetpack CSS styles working

[pressupinc]

wpshout.com as it looked immediately after 4.7 update; simulated by deleting all Jetpack custom CSS styles

[pressupinc]

Site on 4.6.1 with one very simple CSS rule in Jetpack custom CSS

[pressupinc]

Site from simple_change.png updated to 4.7; single CSS rule still works, but editing window absent from Customizer

[johnbillion]

Moving to 4.7.1 for visibility.

[dd32]

@pressupinc Can you please let us know what version of Jetpack you're running?

[pressupinc]

Replying to dd32:

@pressupinc Can you please let us know what version of Jetpack you're running?

WPShout is running Jetpack 4.4.1 currently, on the restored version of the site.

I see that a Jetpack upgrade is available, but I'm fairly sure I didn't upgrade before I originally tried to install 4.7.

[dd32]

Thanks! Jetpack 4.4.2 adds compatibility with WordPress 4.7 & in particular the custom CSS editor - although we should still look into what's happening here and try to support older Jetpack versions with 4.7.1+.

[pressupinc]

Replying to dd32:

Thanks! Jetpack 4.4.2 adds compatibility with WordPress 4.7 & in particular the custom CSS editor - although we should still look into what's happening here and try to support older Jetpack versions with 4.7.1+.

I appreciate it. However - and I should have clarified this in my earlier post - I'm pretty sure that the simple_change.png and after_simple_change.png issue happened with Jetpack 4.4.2. I installed Jetpack on that local install this afternoon just to bugfix.

I'm working on doing everything on a new WordPress install (that starts with WP 4.6.1 and Jetpack 4.4.2) just to see what happens. Will post pictures.

[pressupinc]

Replying to pressupinc:

Replying to dd32:

Thanks! Jetpack 4.4.2 adds compatibility with WordPress 4.7 & in particular the custom CSS editor - although we should still look into what's happening here and try to support older Jetpack versions with 4.7.1+.

I appreciate it. However - and I should have clarified this in my earlier post - I'm pretty sure that the simple_change.png and after_simple_change.png issue happened with Jetpack 4.4.2. I installed Jetpack on that local install this afternoon just to bugfix.

I'm working on doing everything on a new WordPress install (that starts with WP 4.6.1 and Jetpack 4.4.1) just to see what happens. Will post pictures.

Okay, I set up a brand-new WordPress install running 4.6.1 and Jetpack 4.4.1, and updated to WordPress 4.7. The result is that the CSS in Jetpack's "Edit CSS" stays where it is (and continues to apply CSS styles properly), and there is also an empty "Additional CSS" field that also works properly.

I also tried updating to 4.7 with Jetpack 4.4.2, and that update behaves properly as well. (In that case Edit CSS now links out to the Customizer which is now full of its styles).

So I'm guessing the two issues I reported are somehow specific to my sites' setup? Especially if similar issues aren't being raised often in the forums.

(Not posting pictures since not much to show in terms of things that work unexpectedly.)

[fusheva1]

Hi

I've similar in that I updated to WP 4.7 and lost all my Jetpack Edit CSS and when try to access Edit CSS through Appearances it redirects me to the Customise window where additions css is empty.

Is there anything I can do to reinstate the missing CSS, as not quite following what's written above? Am happy to start new ticket, if it's preferred.

Many thanks.

[kraftbj]

Howdy y'all,

Since at this point, this seems to be an issue with Jetpack and not a Core issue, could y'all follow along at ​https://github.com/Automattic/jetpack/issues/5843

Without Jetpack 4.4.2, both Core and Jetpack's CSS functions should be work side-by-side, so this should not happen either way, as far as I know.

Closing this ticket to defer to the Jetpack GIthub issue above.