Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Martin 9 posts 79 karma points
    Feb 02, 2023 @ 09:01
    Martin
    0

    Block grid editor - how to inject editor stylesheet per page

    Hi, I am working on a solution where we have different design/css (multi-site) setup, but I want to use the same block grid editor (same blocks/settings) but load a different stylesheet for the editor in the backoffice depending on the page i'm currently editing.

    Any suggestions on how to do it in an as efficient way as possible?

    I'm a bit of a rookie when it comes to angular, but would the right approach be to create a new property editor based on block grid editor and then in the controller load the appropriate css?

    I can't find the source of how the block grid editor loads the default stylesheet.

    Perhaps someone can point me in the direction of where in the source i can find the setup of how the grid block property editor or have some suggestions of how this can be done!

    Thanks / Martin

  • Maximilian 2 posts 72 karma points
    Feb 05, 2023 @ 22:09
    Maximilian
    0

    I can't find the source of how the block grid editor loads the default stylesheet.

    Look at the block grid editors next-to-last Option "Layout Stylesheet". Here you can define the default layout stylesheet.

    Hope it helps.

    Best, Maximilian

  • Huw Reddick 1702 posts 5999 karma points MVP c-trib
    Feb 06, 2023 @ 07:52
    Huw Reddick
    0

    That would require a different blockgrid datatype defining for each page which is not what Martin was asking about.

  • Martin 9 posts 79 karma points
    Feb 06, 2023 @ 08:56
    Martin
    0

    Thanks both of you for the replies, and as Huw Reddick states, your suggestion wouldn't fit this case since i want to reuse the same datatype.

    If i have to duplicate the datatypes it gets quite bloated with editor information and if i want to change or make a new block available, it requires changes in all the duplicated editors which i want to avoid.

    It's proposed for a SaaS-ish solution with many tenants and not just a multisite with a couple of root-nodes, so that would make a lot of datatypes.

    I tried a solution where I have a angular controller that does a backend request based on the nodeId I'm on and provides the css to be imported for the backoffice view, but it has to be applied to each backoffice html/angular-view and it quickly becomes a huge amount of requests since a blockgrid can contain a whole lot of blockitems, so it doesn't seem like the right solution.

    I really like the blockgrid editor and if i can get this to work it'll be great in our product! The quest goes on...

  • Maximilian 2 posts 72 karma points
    Feb 06, 2023 @ 10:01
    Maximilian
    0

    It's proposed for a SaaS-ish solution with many tenants and not just a multisite with a couple of root-nodes, so that would make a lot of datatypes.

    I would try this solution: With your own Default Stylesheet you are free to define your own selectors. E.g.

    <body id="site-n">
    

    or

    <html class="site-n">
    

    you can define styles for every Site like

    body.site-n .umb-block-grid__layout-container {...}
    

    It should work.

  • Martin 9 posts 79 karma points
    Feb 06, 2023 @ 10:26
    Martin
    0

    That could be a way to do it but it's not scalable enough. I want the site-specific css to be separated with some sort of dynamic/back-end supported solution.

    Having one css with the specific styles/fonts/colors for hundreds of webs in one css-file would make it very large and hard do keep updated. Preferrably i'd also like to generate some of the styling from a settings node.

    I'd rather use the reference you point at to refer to a more generics css for the grid style so the disposition is correct and the same all over, but somehow add the site-specifics on a per-site so different users can see the grid with different colors/paddings/fonts which is what i want to add.

    One possible way (if i knew how to), could be to intercept/change the link for the selected css in the datatype/block settings and send the request with the current node i'm editing.

    Then i could just send it to a custom controller and send back the correct css (generics + specifics combined). Doing that in the rendering is easy enough but I would really like to be able to do it in the backoffice/editing experience as well.

  • Huw Reddick 1702 posts 5999 karma points MVP c-trib
    Feb 06, 2023 @ 10:58
    Huw Reddick
    1

    Hi Martin,

    I don't know if this will help at all, but may give you some isight/inspiration

    https://github.com/rickbutterfield/Our.Umbraco.BlockPreview

  • Martin 9 posts 79 karma points
    Feb 06, 2023 @ 15:43
    Martin
    0

    Great! That really looks like a promising project that seems to provide a solution for what I need. It's also not a lot of angular and i already have most of the backend components for passing css so it should really be manageable to implement.

    I'll report back and mark it as a solution when I've have tried it out, but from what i see it looks like a perfect match. Super thankful for you seeing that, I realize I've read the article the project refers to before, but that was a while ago and now I suddenly get the point :)

Please Sign in or register to post replies

Write your reply to:

Draft