Archived topic
3.1 Alpha - Possible Issue
6 replies · Started by Jeremy on September 9, 2021
Just got around to testing out 3.1 alpha on a local environment.
First of all, this is just awesome. Thank you!
WordPress: 5.8.1
GeneratePress: 3.1.0-alpha.1
GeneratePress Premium: 2.1.0-alpha.1
GenerateBlocks Pro: 1.4.0-alpha.1
The Dynamic Typography system is amazing, and working great. I did run into one issue I'd like to pass along though.
I set up locally hosted Roboto (and other fonts) to test with a child theme. Everything works great in the Customizer Preview window and the front end of the site. Roboto is loaded and displayed as expected. This is a really slick system, I love it.
However, the post editor is showing the WordPress default system font stack. It's only the body text, headings display whatever local font is chosen in the Typography Manager just fine. Custom fonts entered in GenerateBlocks works just fine as well.
Poking around dev tools I see that GeneratePress is indeed generating the correct CSS for the .editor-styles-wrapper. It appears that WordPress is inserting a <style> tag that is overwriting this with it's own font stack. Looks like line-spacing is overwritten as well.
If I create a custom-editor.css file, I can overwrite it and it works fine again with:
body {
font-family: "my-custom-font";
}
body p {
line-height: 1.6em;
}I wish I'd have tested this before updating to WordPress 5.8.1. I'm not sure if anything changed in the post editor with this update, or if it was working before.
It's certainly possible I'm missing something and will keep poking around as I have time. Anyway, figured I'd pass this along.
Appreciate all you guys do and thanks again.
Hi there,
Thanks for sharing this with us. :D
And yes, lots of things changed on Block editor styles for WP 5.8.
From styling of the actual blocks, to how the block editor works.
The list is long. Here it is if you want to check things out.
https://wordpress.org/support/wordpress-version/version-5-8/
There are too many changes to do a side-by-side comparison but if you really must, you can check their repository.
https://github.com/WordPress/WordPress
No problem Elvin.
I don't envy you guys having to keep up with the constant tidal wave of changes with WP. But you're doing a great job if it.
I'm always amazed with the useful updates to GP, and this alpha is no exception. Clearly a lot of work has gone into it.
I'll keep trying to break it when I get time and let you know if I find anything. :)
Thanks again and have a good day.
Hi Jeremy,
That's strange - .editor-styles-wrapper should be more specific than body. Does the same thing happen if you choose from the list of available system fonts?
Thanks for testing! Glad you like the new system :)
Hi Tom,
Yes, the same thing occurs when selecting an available system font in the Font Manager and applying it to html or body.
.editor-styles-wrapper does actually have specificity. It overwrites body and I've attached some better screenshots below to show what's happening.
I chose body { ... } in the editor style sheet because WordPress rewrites it as .editor-styles-wrapper { ... } when it parses the editor stylesheet. So, a good way to test if it's the font or WordPress.
So far it's the only way I've been able to get a local font to load in the post editor for body text. Headings load local fonts just fine (whether from the Font Manager, or through GenerateBlocks). The Customizer Preview and front end display fine as well.
Here's a few more screenshots:
Screenshot 1
Screenshot 2
Screenshot 3
Some extra info, if it's relevant:
In my functions.php I've always loaded an editor stylesheet.
function generate_child_setup()
{
add_editor_style( 'custom-editor.css' );
}In that stylesheet I add things to help match custom front end styles in the editor. So, in this case, to test this I've added the local font as I do in my style.css:
/* roboto-regular - latin */
@font-face {
font-family: "Thornbrand Roboto";
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'),
url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('fonts/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}This has always worked fine for me. And it's working now, just not for body text.
Local body fonts in the post editor stopped working when I updated WordPress to 5.8.1. Unfortunately, I also loaded up the alpha at the same time, so I'm not certain if this is something with 5.8.1 or with GP alpha. (Yeah, I know better... got ahead of myself!)
I'd be curious to know if you guys are able to load a local font in the editor with any issues. If I get some time today, I might try to spin up a fresh site and see if I can figure it out.
Hope you have a good day and a great weekend!
Thanks for this! Fixed in alpha.2 :)
Awesome!
Glad to be of any help and thanks for all you do.
