HTML snippets when saved as blocks looks like a blank block without text

[wwonderfull]

HTML snippets when saved as blocks looks too long and large on blocks panel as you can see on the screenshot pablo. And the block was given a name even that did not show. both of those snippets are part of the blocks

[Pablo]

The Blocks feature was designed for flexible layout (layout grid, flexbox). So, if you save a single object then it may not be able to generated a preview for it.

[wwonderfull]

Could there be improvements for this in future pablo.

[Pablo]

HTML objects are intentionally not rendered in blocks preview. To keep the thumbnail less cluttered.
What type of preview would you expect?

[wwonderfull]

I think if it shows at least a thumbnail of snippet with a text that would still be a better visualization, I think. As you had mentioned Pablo that it was meant for layouts but sometimes, we may have custom coded layout divs and spans along with some reusable css snippets or even javascripts. So we can use blocks to easily get them and edit or save them. Custom coded blocks.

[wwonderfull]

If I thought of a more complex solution simple enough, I would just take a UI snapshot of the custom design I made from preview and add that screenshot as a thumbnail for the snippets background. The thumbnails will be on my documents on a folder dedicated for the snippets where it will keep those uploaded images on a folder and render it on wwb when we are searching for custom blocks and can see preview on blocks panel.

A bit manually done although not full auto but efficient. What do you think pablo..

[Pablo]

In most of the blocks I've created, the HTML object is positioned at the right edge of the page.
To prevent clutter, it is intentionally excluded from the preview thumbnail, as the HTML code is usually not part of the layout.

If I enable this then it would make all my blocks look odd.

[wwonderfull]

but what if we add our own screenshot of the custom button or form we made and while saving the custom coded snippet on blocks panel we locally upload an image for it and instead of rendering the HTML snippet inside the blocks-panel what we are doing is we are rendering the image of the snippet. And if no image is found it will just show a thumbnail of custom code and describing itself with the code-blocks name.

we aren't rendering the snippet and the code and styles which is written inside that HTML snippet but it has its default thumbnail and assigned blocks name text by default and if we want we can just attach an image and the snippet will be showing a static ui image that we took screen shot locally and assigned for that snippet. so now as we search in blocks we will be able to take see what design snippet we are taking.

[Pablo]

You can add your own thumbnail image if you want. Just place the image in the blocks folder with the same name.