Unnecessary CSS loaded in frontend

[Azragh]

Bug Report

Expected Behavior

After creating / enabling my first guten-block plugin I inspected the pages source code to see at which position my frontend stylesheet for the new block gets included. To my surprise there wasn't just one new file but 6 instead.

Actual Behavior

The other 5 stylesheets are for the editor only (at least I think so? correct me if I'm wrong ;)), so they shouldn't be there at all.

• wp-editor-font-css
• wp-components-css
• wp-block-editor-css
• wp-nux-css
• wp-editor-css

Head before enabling the plugin:

Head after enabling:

Steps to Reproduce

1. Create a block
2. Look at frontend source
3. Enable Plugin / Refresh page
4. Compare =)

• node: v10.16.3
• npm: v6.9.0
• system: Windows 10
• browser: Chrome v76.0.3809.100

I've also tested this on a new WP installation with default theme and no plugins active.

[ahmadawais]

You must have included these CSS by yourself. Coz I don't recognize these new files.

[Azragh]

Nope. As I said after noticing this I've set up a new blank installation with it's default theme and no other plugins active, just to be sure that it's not my or another plugin's fault. I didn't change anything except the name of the new block.

[Azragh]

Just to prove:

Source screenshot of the absolutely blank installation with the twentynineteen theme:

Process creating the block:

So everything fine, nothing changed. There we are:

After activating, checking the source code again:

Doesn't matter if I type 'npm start', 'run build' or even eject, or if it's running or not, so what's different at my setup? Could it be because I'm using XAMPP or any related issue?

[ahmadawais]

These are the three files that create-guten-block enqueues https://github.com/ahmadawais/create-guten-block/blob/master/packages/cgb-scripts/template/src/init.php#L32-L54

Everything else comes from your own setup.

Take time to read the links of these scripts and their names.

Your theme is putting out these links.

Press COMMAND (⌘) + F and search plugins/testblock only these scripts are through create-guten-block. Rest are from WordPress, or your theme, or you are looking at the source while logged in instead of looking at Incognito mode for what actually gets loaded for the user.

Peace! ✌️

[Azragh]

I know that these are the only files called by the plugin (first thing I did was looking at init.php), but the other ones get loaded as soon I enable it. I disable it and their gone - so in some way the plugin has an effect on wordpress' register/enqueue functions - doesn't matter if I'm logged in, inkognito mode or whatever..

And as I said (twice): the theme is twentynineteen - nothing changed.

Anyway, thanks.

[Connum]

For anyone stumbling upon this:

I found the same issue and investigated it. Turns out, the reason for the additional styles being loaded in the frontend is the dependency to wp-editor defined in wp_register_style() of the frontend CSS.

I fixed it by replacing array('wp-editor') with is_admin() ? array('wp-editor') : null.

In my opinion this should be reopened and addressed, and I find it curious that the author didn't catch that when presented with this issue.

[ahmadawais]

Send in a PR and I'll check it.

[Connum]

See #267

[ahmadawais]

This issue must have been solved via #267.

Successfully published:

• cgb-scripts@1.23.0
• create-guten-block@1.14.0

You do have to manually update the init.php file like this.