Blocs 4.1 Beta Build 1

I actually just prefer using the system fonts. Though I fully understand there may be unique situations where true web design mandates using particular fonts styles.

My preference comes from my old age and my desire to simply read what I came to see. Not be entertained by the looks or function of a web page. Besides if it loads too slowly I won’t stay long enough to read the sites content anyway. System fonts are fast because there is absolutely nothing to load.

However, to each their own. :slight_smile: :crazy_face:

@Norm, thanks for under promising and over delivering as always!

1 Like

While testing out font-display:swap; in the Beta today, I was not seeing any improvement in Google’s Page Speed Insights with regard to the fonts it is flagging. The reason it seems is because I was doing the intuitive thing – changing all Classes in Blocs where a flagged font was used. That doesn’t work, sadly! I am instead forced to hack style.css by hand after exporting from Blocs to make sure that font-display:swap; is added to the main @font-face style at the top of style.css.

So unless I am missing something here, adding SWAP in the Blocs UI (within individual Classes) won’t do anything good at all for Google Page Speed Insights. (Somebody please prove me wrong!)

I would encourage all of you to test this for yourselves:

  1. Test one of your web pages where a custom font (“Local Web Fonts” in Font Manager) is used in Google Page Speed Insights.
  2. When that test is finished, scroll down and look for " Ensure text remains visible during webfont load " and then expand it and note the fonts mentioned. You can’t do anything about Font Awesome, unfortunately, but any other fonts you can.
  3. Find the Class or Classes where that flagged font is used on your page and change those Classes by adding Font Display: Swap in the Typography section of the Class Editor.
  4. Export your site.
  5. Swap out style.css on your server.
  6. Retest in Google Page Speed Insights. Note there is no change! Ack!
  7. Edit style.css in your favorite text editor and locate the parent @font-face style. Just before the closing “}” bracket, add this: font-display:swap;
  8. Save and swap that newly saved style.css with the one on your server.
  9. Retest in Page Speed Insights and the font in question will no longer be flagged.

So the question now becomes, how do we edit the parent @font-face style in Blocs without having to resort to a hack of style.css every time we export?

@Norm
I found the fix here for Font Awesome only. Just make sure Blocs uses Font Awesome 5.13 instead of the current 5.12. (5.12 generates font-display:auto; while 5.13 generates font-display:block; )

I just did this with success:

  1. Edited all.min.css to change the 3 instances of font-display:auto; to font-display:block;
  2. Edited style.css to add font-display:swap; wherever my flagged custom fonts were used inside their parent @font-face code blocks.
  3. Retested in Google Page Speed Insights and found that " Ensure text remains visible during webfont load " no longer displays at all, boosting my score as a result.

Updating all.min.css to version 5.13 is drop-dead easy, but allowing us to edit @font-face within Blocs, rather than be forced to hack style.css, is the big problem. But I don’t think we need the flexibility to edit that ourselves. So long as @font-face for all our custom, locally added fonts has font-display:swap; at the end, we’re good to go.

2 Likes

Thanks for the heads up!

1 Like

I’ve updated Font Awesome to the latest version 15.5.1, so this fix will be automatically applied. There are also some new icons included in the set :sunglasses:

The patch will be included in Blocs 4.1 beta 2 coming later this week.

4 Likes

I tried to export the project to the same location.
When I choose “Replace” I got a warning that this would delete the current project file.
Is it a bug or a feature?

save1 save2

Are you trying to export to a location that the actual Blocs project file is in?

This feature prevents deleting the currently open project

I find this irritating too.

Yes.
But it works in Version 4.0.4 as it allways does in any version.

It has potential to delete files so it is a fail safe.

Don’t you find that Blocs will destroy your file and it will break if you opt to delete all content in the export location?

Weird.
I always kept the project file in the actual project folder.
Never had any problems and the blocs file was never deleted.

Personally I never had problems as the export creates a folder and the “replacement question” makes sense to me.
The blocs file has it´s own symbol and so I was never confused.
Hope I could explain it well from my point of view (as a German my english ight be not very clear sometines).

@Bootsie I would keep the project file and resources well away from the export folder. It’s much safer and avoids confusion. For exports I maintain a folder called Blocs Exported that then contains sub folders for every exported project. All active project work and resources are kept in a different area of the computer.

1 Like

I have a main client job folder, within this the Blocs file, optimised files and working files, then a folder for the html output. It’s only this html output folder it affects isn’t it when it’s specified as the output folder? Always been that way. Makes sense to me!

1 Like

Might be a better and safer way than mine, just needs to change my workflow.
Thanks

So happy about the Ecommerce interactions! Quick question though…Would Buttons classes for Ecommerce links be overwritten in the Final Build? It looks like Paddle’s default style is taken over in this beta.

Designer Mode:


Preview:

Ah that requires a class to be added to clear the default Paddle styling I’ll fix that.

1 Like

Im not sure why you are getting this. Could you please send me a copy of the project file so I can take a look at the button.

This is previewed and exported with Blocs 4.1 right?

E-Commerce works perfect.
I have Blocs 4.1

1 Like

Okay. I’ll PM a share link.
I did have my own paddle button class before testing this beta but I’m not sure if that would’ve interfered.

Oh yeah that may do it. Try using it on a new button.

1 Like