Hey Wappler team.
How do I go about creating custom Blocks. We use our own Widgets over and over again and it would be nice if we can just add them as Blocks.
In here…
I wanted to bring up this topic dozens of times, but each time I postponed it for later…
This is very lacking. And it would speed up the development at times.
Of course, it would be a plus that it would be possible to create custom Blocks that consist of standard Bootstrap elements. But it would be much cooler if you could connect your css styles to a custom Block so that they are immediately imported into the main style.css file. Then, when developing a new project, you would not have to do the same actions for the hundredth time or copy-paste pieces of code from old projects.
PS don’t forget to leave your own vote for the request
3 Likes
OOOOO your idea about linking to the CSS sheet is even better
1 Like
Yes we were brainstorming about the same idea - how to connect custom blocks with css.
So that when you insert the block not only the html of it but also a custom css is inserted.
The issue is that there are so many ways to insert the css… add it online or create a custom css block just next to the html or merge css classes with the global css.
But each approach has its own issues, so we haven’t found the best way yet.
1 Like
For now , if there is a structure that uses the existing css in the current project and does not need to create or add a new css , I think it will be sufficient for now . That’s my opinion and it would be very useful.
1 Like
Yes, I agree, I also thought about this problem. I came to the conclusion that the switch could be the solution.
As standard, css is added to the main style.css file framed with a lowercase comment that these are the styles responsible for the custom Block #2332 (number as an example). This will make it easy to navigate css without creating chaos.
In some cases, it really makes sense to resort to full modularity, including highlighting css in a separate file. In this case, the user will simply select this css setting in a custom Block.
The third, the most complex method, makes sense when it comes to some global widgets used throughout the project. The user simply selects setting 3 for the css custom Block.
As you correctly noticed, each method has its pros and cons. But the choice largely depends on the nature of the custom Block. You have no way to find out the nature of a custom Block, but the developer knows. Therefore, it would be a good solution to allow the user to define a way to integrate css into a project for a specific custom Block.
2 Likes
Couldn’t you do something on the lines of your master block so the one that shows in the snippets window creates css with class selectors so when added to a page it has a default style based on classes then lets say you want to edit a colour on a single snippet in a page this could be in-line css.
So then next time you add the snippet it remains how it was without in-line styles as it wasn’t the master snippet your was editing that uses class selectors.
Another idea Is lets say you create these snippets in a partial like page where it’s in another page. In this page any styles you add would instead of been added to style.css get added onto the page in some <style> tags and something you can use to identify this like a Wappler comment.
The snippet html would also be present on this page but also wrap this in a Wappler block with something like the is-snippet_name etc then save this globally in Wappler. Then when it comes to individual projects when you add the snippet it adds the html where required and as there is a custom is-snippet_name this could show like a UI element in the app structure followed by the snippet content like rows images etc on the first add of a snippet import the css and have a way of recognising it in style.css again maybe a Wappler comment.
This then would allow you to also have an option on the custom block to update the content inside to whatever is in the global version and reimport the styles again so now you can choose to update or leave alone the block in old projects.
Just an idea I have no idea if this would ever work.
I found were the definitions sit
/Users/username/Library/Application\ Support/Wappler/Configuration/Shared/DMXzone/dmxAppConnect/rules/extensions/bootswatch5_rules.js
and the code is easy enough to understand. problem is every time you restart the page reverts. Would be great if we have a version of this file that pulls from the app root and doesn’t get overwritten.
All this should be part of the extensibility feature that the team was working on.
Unfortunately it was postponed due to those damn priorities getting in the middle
@george I hope they can get a push during version 5. It’s something we really need to push the platform forward.
These requests keep popping in one form or another and they are all easily solved by implementing AC extensibility.
3 Likes
(I think you mean bootstrap5_block_rules.js.) As you say, the code is clear and it wouldn’t be difficult to create similar blocks. Having a corresponding ‘user’ file (which wouldn’t get overwritten) would be a useful feature and probably not too difficult to implement. However, it would probably be quite difficult to create a UI to create these templates - particularly if the code were validated and the resulting blocks were only allowed to be inserted to maintain valid HTML etc. Also, creating an .svg file would be a bit of a fiddle (although obviously it could be optional).
I would prefer the implementation of a related feature request, which has a lot of votes and would probably get more if it were more recent (it’s almost 4 years old).
There are several similar requests, including this one and this one.
1 Like