Styles not showing on design canvas - maybe this will SOLVE your problem too?

Tips and Tricks
1

Mac OS Sonoma 14.5
Blocs 5.2.4
M2 Pro

TL;DR

  • Blocs not showing styles on design canvas
  • Tried current beta, problem still exists
  • Corrupt class found
  • Class removed
  • Project back to normal (I hope)

Hopefully this will save someone the grief, I have had over the last few days.

Longer read:

I had to work on an update for an existing website I had made for a Client, this had very short time constraints.

I saved the client some money, by basing everything off the existing site, that was built in Blocs over 2 years ago. This is what I totally regret, as I have other tools in my toolbox, and I should have rebuilt this from scratch with one of those. This would have worked out better for me, even if I didn’t charge my client for that initial rebuild, thats how stupid this got. This is a massive trust issue for me, it can damage our reputations with our clients, because they do not care about buggy software.

Basically this is not the first time, I have had issues with Blocs projects causing me grief. And this once again has cost me hundreds of $$ of time, I cannot bill out.

Somewhere along the line, Blocs decided to corrupt something, eventually to the point where I could see no styling updated on the design canvas.

So here I am, working on an urgent - time critical project for a client, that requires rolling updates over a couple of weeks. I did not have the time or want to take the gamble by going through the backups to find a stable version, and then work through all the modifications I need to make again.

Instead I built 3 new pages, with no visible styles changes showing on the design canvas. Going back and forwards to preview. - Not my definition of fun. and you can imagine how much longer it took to build the site, which I can not bill my client for.

I managed to get this part of the project completed and uploaded. I now had some relief, to go back and see what was wrong.

My first thinking - the design canvas was not showing any new classes or style changes. But would on preview. So I thought something is up with the classes.

I decide to delete all unused classes… a ton show up, most of which I was actively using!!! :roll_eyes:

So as a test, I delete all of them. And now suddenly Blocs is working again :exploding_head:

So I reload a copy of the project that had all these classes still… as most of them I was already using and Blocs incorrectly says they were unused.

I scroll through them and I spot this…

CleanShot 2024-07-02 at 18.09.01@2x
CleanShot 2024-07-02 at 18.09.01@2x2069×647 79.6 KB

A class called

[1

:man_shrugging: I never made that, so either Blocs added it, or its a class that became corrupt.

Either way, the project is now working, or as much as I can tell right now.

So if you come across this issue, it could be a corrupt class. Maybe we need some checks in the system @norm for this, or if there is already, something wasn’t working. It also showed a lot of classes I was actively using as unused!! So I wouldnt trust that feature without being very careful with what you tick for deletion.

I hope someone will be able to resolve a similar issue they may have without going through this misery, my loss you gain - I hope :smiley:

— Pete

3 Likes
2

That sounds like it was a nightmare. It’s also reminiscent of a problem I had a while back where SVG images were all fine in edit mode, but filling the page when previewed. It was all traced back to some sort of ordering bug in the class manager. These things are frustrating and very time consuming when they occur.

2 Likes
3

It sure was, and I don’t really have the time or capcity for the nightmare right now.

Try to help a client out… and….

4

I’m glad you got it sorted in the end. Losing hours, let alone days on broken projects just trying to update a website is stressful at the best of times. I would hope something could be done to ensure this cannot happen in the future.

1 Like
5

Yes, software can be frustrating at times. I remember having an issue with Adobe After Effects that caused me similar problems and to think Adobe is a gigantic company which has hundreds if not thousands of people working on that piece of software and it still can’t get things right. Sometimes when you put that in perspective of Blocs being programmed and maintained by one person, you think wow, what an incredible job they are doing. Still doesn’t take away your frustrations but a company which is making millions or billions and a hundred times the workforce can’t either. I’m glad you got it sorted in the end.

1 Like
6

Glad you got this sorted. At any point did you create any class names containing square bracket characters? It looks to me that you may have added a class name with a character structure that Blocs may have a problem with.

All sorts of structures are supported in coded CSS but the class names in Blocs are obviously (and never will be), as flexible as hand coded ones,

there are a lot of variations to consider.

Blocs is only able to identify classes that are used based on them showing up in the document HTML (which does not include code areas), this means if you have classes used and applied with JS or a custom Bric, which adds additional markup based on specific scenarios those wont be identified as used.

This is why they are listed for a final human check.

Think of how much Blocs has improved and changed in those 2 years. There are always going to be issues opening up a 2 year old project in an app that is receiving extensive updates in that period.

I’m yet to find an app that doesn’t have bugs, but Im glad you have, my advice is go use it.

7

If that’s the case, I suggest adding a check for these wrong kind of class names before being able to enter them into the class editor (if this kind of check isn’t done already).

8

No, because I know the class manager doesn’t allow us to do this. There is nothing complex about the CSS I created. It’s all very basic. As I said in my post, I never added it. There are no brackets, or anything beyond the use of a couple of pseudo elements that are supported in the class manager and are working fine.

I have no coded areas, with the exception being a MailChimp embed code. That only has some BS utility classes applied to it.

Let me give you an example. It tagged .mb-4 as unused. Yet the spacing options in the right panel applied this very class to some elements.

Neither have I, I don’t expect any software to be completely bug free. But you have to admit no styles applying to the design canvas is a significant one for a web builder app.

What I gather from this is you want me to leave? I’m not sure what you’re saying?

Pain points are valid feedback for any app. The ramifications of the issue I had were very real. And I shared a solution I found that may help someone.

It would also be naive to think people do not use an assortment of apps in their workflow. The right tool for the job. Which I was hoping would be the case for the project in question. Eventually I got there.

I have been thinking that maybe project health tools could be a good addition? How possible that is I don’t know. But a single faulty class caused a big problem here.

1 Like
9

There is a check, but it’s a moving target.

10

In that two years it’s had minor updates.

The project was fine previously.

1 Like
11

Maybe what ever caused that weird class to appear, also resulted in a lot of false positives for unused classes?

I haven’t tried, I’m not on my Mac. But I suspect you can’t even save a class called [1

12

I want all of our customers to be happy, I appreciate that sometimes this means they move on. I’m ok with that.

If I was using any kind of app that was costing me hundreds of dollars in lost time, not to mention lost time on their forum, writing lengthy comments about my frustrations and outright claiming this is a common occurrence and not the first time. I doubt I’d continue using it.

Obviously a lot of work goes into Blocs and we really do try hard to listen to users and deliver the best software we can. Some people see that and think we do a good job, others do not.

3 Likes
13

Many of us put a lot of work into producing products or services and building goodwill. That’s often thankless and it’s part of being in business.

I never said common, but it’s happened (not this particular issue) before and you were aware of that.

Not sure how long I spend writing a post matters. In fact I volunteer a lot of time helping users on the forum - more than most. It seems that wins me no credit when I have trouble, and is only valued by some -ironic.

The fact is, something broke at a really bad time for me (which you know about, that I’m currently being treated for cancer and having surgery), I found a solution, and shared the story. Warts and all, it’s what happened! And even though I found a solution, I would expect you would have some interest is investigating the cause? I obviously was.

I had no intention of just disappearing, especially since I developed some very popular third party extensions for Blocs. I’ve worked hard to have a good reputation, honesty and support. But it’s obviously very tactically implied I should just go. That might be the outcome I have resisted for some time. :cry:

3 Likes
15

Nothing in my responses to your original post was personal, I have not made any kind of negative comments towards you or your position here in the forum with regards to how you help others.

My point was very simple, if I was unhappy with a product, I’d stop using it, especially if those frustrations had been ongoing and cost me money.

Myself and Helen have both reached out to you personally and wished you well, regarding your illness and I’m sorry you have felt the need to bring this up.

16

That still stands Jerry, don’t ever send me, or any other users on the forum, patronising, condescending messages or you will be banned. I get messages from other forum users regarding your approach to help regularly.

Pages not updating
18

It would be nice if Blocs would remove only 100% unused classes, but it’s understandable that right now it requires a final human check.

To make it easier, I always add a prefix to the class names I create, so when I do this final human check, it is easier to know what classes are crated by me, what are created by the system, and what are just there by default.

Sorry to hear that. I wish you a full and speedy recovery! :flexed_biceps:

1 Like
20

Wouldn’t that be the solution?

You can enter names in the CSS but the app (Blocs) always attaches a prefix, just like Eldar does with his experience, we do something similar with Javascript functions. Ideally with an option in the preferences where I can specify the prefix. It only has to be a few letters. But then I can always see what I’ve done and later, when I’m searching through a large page, I quickly find points where it still hangs…