Support » Plugin: Jetpack by WordPress.com » Custom CSS lost on upgrade to 4.7

  • Resolved cozbaldwin

    (@cozbaldwin)


    Oh please someone better have an answer for me….

    After upgrading to 4.7, all my custom CSS I had in the jetpack plugin was lost. Now it’s in this WP customizer sidebar without the ability to revert back to previous versions of the stylesheet.

    Can anyone tell me how I can get it all back?

Viewing 15 replies - 16 through 30 (of 40 total)
  • I checked to see if I could disable the theme’s custom CSS tab. I didn’t see an option anywhere for that. I did switch my theme to Twenty Sixteen and it looks like the JetPack options were integrated into WP 4.7 Custom CSS. It looked as it did in your gif with the history option and everything.

    I checked for JavaScript errors on the customizer page. Here is a screenshot of the errors.

    One difference from my custom theme (WPLMS) from the Twenty Sixteen theme is that there were two CSS tabs in the WPLMS theme as you can see in this screenshot. The Custom CSS tab shows this and the Additional tab shows this. In the Twenty Sixteen theme all of these options were shown under the Custom CSS tab. Its almost like somewhere in the conflict WordPress recognized that there was already a Custom CSS tab so it created an Additional CSS tab and put the remainder of the options there. However, the History button doesn’t appear under either tab and when I paste my nearly 500 lines of CSS into the editor, no scroll bar appears, so I literally have to scroll to the bottom of my code using the mouse wheel.

    This may be something I need to take up with my theme provider. I’ve been checking their support forum for any threads on the issue, but there aren’t any yet.

    Just wanted to confirm another story. One of my sites had serious front end errors after the custom CSS from JetPack was not carried over to the customizer. Luckily I found the safecss entry in the database and manually moved it over myself but not before some serious head-scratching!

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    Maybe you will reverse your decision in the future … I’ll now use the other plugin that maintains a full screen editor

    @simonothen If you’d prefer to have a full-width CSS editor in Jetpack in addition to WordPress’ new CSS editor, you can chime in with your thoughts on the GitHub issue I linked to earlier:
    https://github.com/Automattic/jetpack/issues/5828

    Thanks!

    I did switch my theme to Twenty Sixteen and it looks like the JetPack options were integrated into WP 4.7 Custom CSS.

    @nathanielbessent It does indeed seem like a conflict between your theme, WordPress 4.7, and Jetpack. What happens when you deactivate Jetpack’s Custom CSS module under Jetpack > Settings, while still using the WPLMS theme and WordPress 4.7? Do you see the custom CSS editor appear under Appearance > Customize > Additional CSS?

    @danielmcclure Would you mind walking me through the steps you followed to reach that bad conclusion, so I could try to reproduce on my end by running a manual upgrade?
    Did you update to Jetpack 4.4.2 before to update WordPress, or did you do that afterwards? Did you update the plugin via the WordPress updater, or manually?

    When I disable Jetpack’s custom CSS, the Appearance->Customize->Additional CSS tab goes away and the Custom CSS tab remains.

    @jeherve I can’t say for sure but I’m pretty sure I updated JetPack first. Both the plugin and WordPress were updated within a 24 hour period but not necessarily at the same time. There is a small chance that JetPack was updated via InfiniteWP however I’m pretty sure I updated it via the WordPress dashboard updates page and definitely updated WordPress itself this way.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    @nathanielbessent That’s super interesting. It would seem that your theme suppresses the new CSS editor. Jetpack adds features to that editor (Media Width, History, CSS preprocessor), but since your theme removed the editor, all what’s left on Appearance->Customize->Additional CSS are the features added by Jetpack.

    Could you contact your theme provider and ask them if they purposely disable the new WordPress CSS editor? If so, could they let you know how they did it?

    Thanks!

    @danielmcclure Thanks for the extra details. Would you be willing to run some more tests? Since you’ve managed to solve the issue, I’ll totally understand if you say no.

    If you’re happy to run some tests, could you try the following?

    1. Add the following to your site’s wp-config.php file:
      
      define( 'WP_DEBUG', true );
      
      if ( WP_DEBUG ) {
      
              @error_reporting( E_ALL );
              @ini_set( 'log_errors', true );
              @ini_set( 'log_errors_max_len', '0' );
      
              define( 'WP_DEBUG_LOG', true );
              define( 'WP_DEBUG_DISPLAY', false );
              define( 'CONCATENATE_SCRIPTS', false );
              define( 'SAVEQUERIES', true );
      
      }
      

      Your wp-config.php file may already include a line that says “define(‘WP_DEBUG’, false);”. You can remove it, and replace it by the code above.

      • Go to Appearance > Edit CSS and copy your CSS. Paste it in a text editor so you’ll have a copy if anything goes wrong.
      • Delete that CSS and save your changes.
      • Downgrade to WordPress 4.6.1.
      • Update to WordPress 4.7.
      • Go to Appearance > Customize > Additional CSS, and check if the CSS was migrated.
      • If it wasn’t, paste the CSS you saved earlier.
      • Click on Save and Publish.
      • Check that all CSS was saved, and none was stripped from the editor.
      • Check the wp-content/debug.log file in your WordPress installation, and paste any errors you may have here.
      • You can then replace define('WP_DEBUG', true); by define('WP_DEBUG', false); in the code above.

    Thanks!

    • This reply was modified 3 years, 2 months ago by Jeremy Herve.

    Just an update. I contacted my theme provider about this issue and they were able to replicate the conflict in Custom CSS editors on their end. It looks like they weren’t intentionally trying to override WP 4.7 Custom CSS with their own. I was told they would have it fixed in a coming update.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    @nathanielbessent Excellent, thanks for the update!

    I updated to the latest WP – everything fine, then updated Jetpack and custom CSS is not being applied to the site. I’ve tried deactivating all other plugins and the problem persists. When I click ‘support’ on the Jetpack plugin it says “There seems to be a problem with your site’s ability to communicate with Jetpack! It looks like your site can not communicate properly with Jetpack.”

    The CSS shows up properly in the customiser, but is not being applied to the webpages.

    Hmm. I’ve just restored the backup I took before upgrading, and the site is working again. However, if I click on Jetpack support I get the same error “There seems to be a problem with your site’s ability to communicate with Jetpack! It looks like your site can not communicate properly with Jetpack.”

    Perhaps that issue already existed and is independent of the CSS breaking issues?

    Same problem on a client site. The previous Jetpack Custom CSS stylesheet is gone. It does redirect to the customizer, but all of the custom code I had added was wiped out and there is no option to view revisions. How can I recover the missing stylesheet? I need this ASAP for a client!

    @chantillypatino: You’ll need access to your WP database. Look for the table called “ *_posts ” (the asterisk can be any number of prefixes… but only one should have ‘_posts’ in the name), then look for “safecss” and edit it in order to grab the latest save from the Custom CSS plugin.

    I’m not skilled at databases myself so if you need more instruction, someone else will have to guide you better.

    So my situation should be easier to resolve as I can see the custom css, all revisions are present, but it’s not being displayed. Any suggestions?

    Ah ha! Fixed it!

    This is weird… the problem turned out to be incorrect nesting in my custom css – I had one closed curly bracket missing in the first block of css. Weird, because the css stopped working only when I upgraded Jetpack!

    Why would upgrading JetPack cause this problem? Either
    1. The upgrade somehow deleted it. (Seems unlikely), or
    2. The new css editor is more of a stickler for syntax, whereas the old one ‘corrected’ it on the fly so I was unaware it was wrong?

    Hope this helps anyone else who is having similar trouble.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    @keirwatson That’s interesting! Could you post the CSS snippet that caused the issue here, so I can try to reproduce and see if there is something we can do to work around that problem?

    Thanks!

    @chantillypatino Let me know if you still need some help after going through @cozbaldwin’s instructions!

Viewing 15 replies - 16 through 30 (of 40 total)
  • The topic ‘Custom CSS lost on upgrade to 4.7’ is closed to new replies.