Why are global classes inserted multiple times with each block

I do believe the class system is very glitchy. I make changes and click the Save button sometimes they are saved, sometimes not. I try to delete a class and sometimes it is deleted globally and sometimes not and even when I go into Stylebook > Classes I can’t remove it from there.

The CSS definition of every class, whether global or local is pasted within each block that uses it, so on a simple page it would be included hundreds of times. This is not ok.

It took me about an hour to clean all the classes from within the database and server filesystem directly… I’m not using those again, I’ll just write my own custom CSS and insert it into the header.

I think the class system is a really cool idea, but needs a lot of work before it’s a smooth and stable experience.

If you have problems with classes, please provide exact steps how to reproduce

Thank you for replying. Steps to reproduce is to create a global class via the editor, attach some styles to it and then attach this class to several blocks. My expectation is that the class styles are defined and served once on the page when loaded (either in the header or in a separate .css file), but what I’m seeing is that the styles for the global class are inserted once for every block that uses the class as a <style scoped>. So it’s duplicated multiple times per page which seems unnecessary and only slows loading time of page (could be noticeable with many global classes attached to many blocks).

I mean problems with class deletion

currently global styles are inlined in block, this is doesn’t slow down page, it’s opposite and more performant than adding in head section. When WordPress will have option to use custom styles in Style API, we will update this process but currently inline style for global styles is best for speed and compatibility with other plugins

Ok, thank you for clarifying. I don’t really understand why it’s more performant/better than embedding the global style once in the head section, but that’s ok, I believe you.

As for issues with the deletion of global styles, I described what I observed on my installation. I had a global class attached to several blocks. I clicked on the global class name on one of these blocks and clicked the delete icon. I expected it would be deleted from everywhere (and either removed from the other blocks or converted to classic class on them). However, when I did the same for each of the other blocks, the global class with all its style definitions was still attached. Anyhow, I clicked delete for the global class on every single block that had it. I saved the page and closed it. Then I saw the global class was still in the database and could be re-attached. So I went into the Stylebook to tried to delete it from there. I clicked the delete icon next to the global class in the Stylebook. There’s no Save button on the Classes tab in the Stylebook that I could see so I closed it. When I reopened it the global class was still there. I clicked on the delete icon again and navigated to the variables section and clicked on the Save button there, hoping it would save the Classes section too and delete that class. It didn’t. I couldn’t remove the class at all. Those same steps worked to remove some classes, but not others and I can’t figure out what would have prevented them from being removed. I had already removed them from any block that was using them.

You can embed only ALL styles in header, to embed only related to blocks, you must check all blocks (so this will double all requests) and this will not work if you use injected blocks, reusable or Ajax loading

Thank you for explanation about deleting. Unfortunately, I can’t reproduce any of them

Videos

1. Deletion from content – works as expected https://monosnap.com/file/ORxvCRmddfaNMHBQeAMYV5f3nufeKD
2. Deletion from stylebook – works as expected. https://monosnap.com/file/qdc17WqOUqE2sh0sErnCI6QZPDEize

Maybe you are trying to remove class from block instead of deleting it. Please, note that removing class from database, will not remove it from all blocks on site (but this will remove attached styles)

Thank you for explaining ?? Perhaps I was trying to remove it the wrong way, that’s all good.