Skip to content
This repository has been archived by the owner on Oct 10, 2022. It is now read-only.

Unnecessary CSS loaded in frontend #210

Closed
Azragh opened this issue Aug 21, 2019 · 9 comments
Closed

Unnecessary CSS loaded in frontend #210

Azragh opened this issue Aug 21, 2019 · 9 comments

Comments

@Azragh
Copy link

Azragh commented Aug 21, 2019

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:
image

Head after enabling:
image

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
Copy link
Owner

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

@Azragh
Copy link
Author

Azragh commented Aug 22, 2019

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
Copy link
Author

Azragh commented Aug 23, 2019

Just to prove:

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

Process creating the block:
image

image

image

So everything fine, nothing changed. There we are:
image

After activating, checking the source code again:
image

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
Copy link
Owner

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
Copy link
Author

Azragh commented Aug 23, 2019

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
Copy link
Contributor

Connum commented Feb 10, 2020

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
Copy link
Owner

Send in a PR and I'll check it.

@Connum
Copy link
Contributor

Connum commented Feb 12, 2020

See #267

@ahmadawais
Copy link
Owner

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants