Block plugin has contaminated the block editor

Plugins
1

Hi everyone! I purchased Pinegrow a few days ago thanks to @adamslowe’s conversation with WP Tavern. So thank you, Adam, for showcasing the application’s amazing potential. I trialed building my first plugin and installed in GeneratePress theme. Between Adam’s YT vid and the documentation, I was able to create a custom design section but the fonts in the block editor have changed! Anyone familiar with the block editor will know that this isn’t the original font - this is a font I chose for my h2 tag.
Any ideas as to why this could’ve happened?

Screenshot 2022-11-26 at 13.22.03
Screenshot 2022-11-26 at 13.22.031474×978 140 KB

Thanks in advance!

2

WordPress, in their infinite wisdom (sarcasm intended), decided that it would be fun to handle Block editor styles separately from the front-end. In some cases, you may need to create a separate stylesheet to override whatever shenanigans the block editor is pulling.

image
image749×839 129 KB

1 Like
3

@Hannah to add to @adamslowe’s reply:

When including styles with your custom blocks (Editor or front-end), it is a very good idea to scope all the rules to your block selectors.

For example, if the main block element has a class my-cool-block all CSS rules should scope to that:

.my-cool-block {
    ...
}

.my-cool-block h1 {
...
}
2 Likes
4

Thank you @matjaz, I’ll try this, although I’m confused why this is happening at all. I’d already removed the linked google fonts from the head ( h and p tags were being overwritten by the theme style sheet anyway) so it shouldn’t be able to call the fonts, in theory.

5

Thanks for the article you provided. I’ll definitely give it a read. I’ll let you know what has worked if I’m successful.

1 Like
6

You’ve probably done this, but just in case… when there are style issues … flush it. All of it. Especially while making edits, and this varies WILDY amongst hosts, and even moreso within the same host but individual to what plan you are on, what caching you or they [sometimes they auto-install or blindly implement] use, etc).

I say this mainly because you mentioned that you already removed the google fonts, but still see them… that screams CCAAAAAACHHHHHE!

But, you know… tecnnology, so maybe not.

2 Likes
7

So. many. times… :face_with_symbols_over_mouth:

I need more characters for this post and am trying not to use any four letter words.

2 Likes
8

Scoping the rules totally worked!!! Thank you sooooo much @matjaz, I’m so grateful that it ended being such a simple solution.

4 Likes
9

Lol, I’ve been tricked by the cache thing too so it’s literally become a life philosophy to check cache now.

2 Likes