Additional CSS in edit mode

I Need Help
1

Am I missing a trick in the app here? So there is the “Additional CSS” code window. But that is only applied in preview / publish.If I want additional css rules / classes available visually in edit mode???

.img-drop-shadow {
  filter: drop-shadow(0 0.5rem 1rem rgba(0,0,0,0.15));
}
2

@Norm Would it work architecturally to have a input field in the class inspector somewhere, maybe in here or a dedicated tab to add custom css rules for the class?

CleanShot 2025-11-29 at 12 .18.49@2x
CleanShot 2025-11-29 at 12 .18.49@2x1284×1114 71.7 KB

2 Likes
3

That is correct

I put this same idea forward in Blocs 4 (I think it was)… we got the additional CSS input instead, but it’s not visually useful on the design canvas. Custom CSS, with breakpoint support in the Class Editor would have been a fantastic Plus feature for pro users. :man_shrugging:

3 Likes
4

Yeah, I have ran into the WYSIWYG problem a few times already. Last one was visualising the default bootstrap system font stack in edit mode. There are a bunch of filters I’d like to use.

1 Like
5

You will find as features get rolled out they are often missing key aspects or workflow issues and stay like that for years. It seems like since the mainstream assistance of AI, Blocs development is happening faster and with less bugs? :grinning_face_with_smiling_eyes: But practical use and workflow is still important.

6

Yeah it would (be / have been) really beneficial.

https://forum.blocsapp.com/t/adding-css-code-to-class-editor/7025 (2019, Norm comments here)
https://forum.blocsapp.com/t/add-a-free-form-text-tab-to-the-class-editor/19260
etc.,

1 Like
7

This could be a solution to the valid concern of user error on input:

Untested!

import WebKit

func isCSSValid(_ css: String, completion: @escaping (Bool) -> Void) {
    let webView = WKWebView()
    let js = """
    (function() {
        try {
            var style = document.createElement('style');
            style.textContent = `%@`;
            document.head.appendChild(style);
            // If it reaches here, syntax is accepted by the browser.
            document.head.removeChild(style);
            return true;
        } catch (e) {
            return false;
        }
    })();
    """
    // Escape backticks and backslashes if needed
    let escaped = css
        .replacingOccurrences(of: "\\", with: "\\\\")
        .replacingOccurrences(of: "`", with: "\\`")
        .replacingOccurrences(of: "\n", with: "\\n")

    let script = String(format: js, escaped)

    webView.evaluateJavaScript(script) { result, error in
        if let boolResult = result as? Bool {
            completion(boolResult)
        } else {
            completion(false)
        }
    }
}
8

As others have mentioned here in your post, the code focused approach to CSS input for classes is not available in Blocs and yes it has been requested on numerous occasions.

The particular feature being discussed here has been in and out of our road map over the years. Because Blocs is geared more towards visual design not code, it’s unfortunate that it’s taken a back seat and not made it into the app yet.

However… :wink:

We have big plans for the Class Editor in 2026, I’ve been working on ways of simplifying this part of Blocs, whilst expanding its capabilities, which can be tricky.

I think the next iteration of the Class Editor will be easier for none coders to understand and flexible enough for users who like to get a little more into the weeds.

So to summarise, no functionality will be lost, only expanded, it’ll be more flexible and easier to use.

But more on that next year. :grinning_face:

8 Likes
9

Sounds exciting!

10

Oh yes, every new year for Blocs is exciting. :grinning_face:

Lots of goodies and surprises are coming. :star_struck:

5 Likes
11

OK, but just one request: please don’t release a Blocs that can only be used with the latest OS. Make it usable for those who are still working with older OS versions (for example, I’m not moving from 14.6.1 for now). Not all of us want (or can afford) to buy a new Mac every 2–3 years… :folded_hands:

2 Likes
12

We have invested in a proper testing setup here at the Blocs HQ with a room full of Macs running older versions of MacOS so we can test properly on devices.

We usual drop a few years in MacOS versions with ever major release of Blocs, but we are aiming to reduce that number now we have dedicated testing facilities for older versions of MacOS.

3 Likes