WYSIWYG Package for Umbraco 15+
Backoffice vs Frontend
I've been a fan of What You See Is What You Get since my DeskTop-Publishing (DTP) days. Now I'm trying to implement this theme on the web as well.
For Umbraco 13, a community project demonstrated that the new block grid in the back office can be used to create an editable preview that almost matches the front-end display. The CSS required for this can be used on both sides.
However, a lot has changed with the new back office, Bellissima, and as far as I can tell, a comparable solution is currently not possible (version 15.4.0).
However, this is just an element for editing the individual layout blocks, and in my opinion, a solution should be feasible. However, this should be coordinated with the Umbraco development team, as the necessary changes would be quite complex.
What I've achieved so far is still impressive and a great help for editors. A demonstration can be viewed on YouTube. The Github project is open source, and I hope that supporters will contribute additional modules or make suggestions for improvements.
For me, this is my introduction to Bellissima's new back-office technology. Key technologies and concepts, which themselves require some learning, include TypeScript, Vite, Lit, Web Components, and RxJS.
Some of them weren't entirely new to me and I'd already encountered them in connection with Angular projects. However, my personal focus was on backend technologies such as ASP.NET, C#, databases, REST APIs, Razor, etc.
Since Umbraco itself offers a wide range of APIs, I will probably shift this focus.
I find two differences between TypeScript and C# particularly difficult to get used to:
- The as or is operator works differently in C# than in TypeScript. It's important to configure tsc (TypeScript validation) because JavaScript doesn't offer type safety and, unlike C# code, doesn't check objects for their type at runtime. This means that you can get any object that isn't null. In other words, this means more effort in JavaScript to ensure that the expected object is passed to a function or method.
- The use of asynchronous methods is different. Here, too, I think C# takes some of the work off the developer's hands. Above all, you have to get used to a different approach and first understand the concept. The same keywords are probably the reason for the confusion here too.
Another topic was new, and I had to do a lot of research. CSS has evolved significantly in recent years (even more so since I started looking into it more closely). Web components also introduce a new concept of encapsulation, which I also had to get used to. I'll probably make the next improvements or extensions to my package here. Ultimately, the only way to externally influence a component's styling is through CSS variables. Their use, of course, must be considered or defined by the component.