WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 8 months ago

#49192 new defect (bug)

All plugin style tags are empty after upgrade to 5.3.2

Reported by: nbdcadmin Owned by:
Milestone: Awaiting Review Priority: normal
Severity: major Version: 5.3.2
Component: Script Loader Keywords: reporter-feedback
Focuses: Cc:

Description

I have run into serious problems today. One of our main sites (https://www.biodiversityireland.ie) which has been around a long time and is always stable was being updated. It was running 5.2.4. All plug-ins were updated and the site was verified working perfectly.

Finally WordPress 5.3.2 was installed and the problems began. The front-end is fine but CSS is missing from all of the back-end plug-ins. These are not obscure plug-ins either they are those like WooCommerce, LiteSpeed Caching and so forth. Many are on the 20 tested for 5.3.2.

Strangely nothing was shown in the console which could cause it and I did the whole disabling plug-ins approach with no results. Finally I believe I have found what's wrong. All of the CSS links in the admin screen are empty!! See attached screenshot from the developer tools in Chrome.

In order to be thorough I performed the exact same steps on another site which was on the same version. Exactly the same results, all was fine across the board until the 5.3.2 was installed.

I cross checked with another site on the same theme and the links are not empty prior to 5.3.2.

I'm hoping someone can help me with this or has had the same issue since I would prefer not to have to go hacking in a downgrade.

I've done a few hours of testing and the closest I found were these two gentlemen whose issues were similar but not the same since my styles are empty and missing completely.

https://zerogravitymarketing.com/updating-to-wordpress-5-3-caused-admin-css-issues/

https://wordpress.org/support/topic/wordpress-backend-css-broken-after-updating-to-5-3/

Attachments (1)

missing-css-issue-wordpress-5.3.2.png (35.5 KB) - added by nbdcadmin 8 months ago.
Screenshot of chrome developer tools showing the missing plugin css links.

Download all attachments as: .zip

Change History (4)

@nbdcadmin
8 months ago

Screenshot of chrome developer tools showing the missing plugin css links.

#1 in reply to: ↑ description @SergeyBiryukov
8 months ago

Hi there, welcome to WordPress Trac! Thanks for the report.

Replying to nbdcadmin:

Strangely nothing was shown in the console which could cause it and I did the whole disabling plug-ins approach with no results.

Just to clarify, does the issue still exist with all plugins disabled (excerpt for WooCommerce, for example, to test the styles) and a default theme (Twenty Twenty) activated?

Looking at the linked article, this appears to be a side effect of some custom code in a plugin or theme filtering the output via the style_loader_tag filter and not accounting for the changes in [46164] / #42804 that removed the unnecessary type="text/css" attributes from <style> tags.

#2 @SergeyBiryukov
8 months ago

  • Component changed from General to Script Loader

#3 @nbdcadmin
8 months ago

@SergeyBiryukov Thanks Sergey and sorry about the late reply. Following on from the article and also your reply I have managed to track down the issue to a function call in the roots framework. The deails can be seen @ https://discourse.roots.io/t/old-roots-theme-breaks-wp-admin-in-wordpress-5-3/17083/18

I fixed it using the description @ https://zerogravitymarketing.com/updating-to-wordpress-5-3-caused-admin-css-issues/

function roots_clean_style_tag($input) {
        preg_match_all("!<link rel='stylesheet'\s?(id='[^']+')?\s+href='(.*)' (?:type='text\/css')*media='(.*)' \/>!", $input, $matches);
        if($matches[3][0] && $matches[2][0]){
                $media = $matches[3][0] !== '' && $matches[3][0] !== 'all' ? ' media="' . $matches[3][0] . '"' : '';
                return '<link rel="stylesheet" href="' . $matches[2][0] . '"' . $media . '>' . "\n";
        }
        return $input;
}
add_filter('style_loader_tag', 'roots_clean_style_tag');

Here is the fixed code (credit for the fix to Greg Volpe @ https://zerogravitymarketing.com)

Thanks again for the assistance.
All the best,
Barry.

Note: See TracTickets for help on using tickets.