What are powerblocks?

Powerblock is a functionality that lets you code new blocks in html, css, that can be edited instantly with Blackbell visual editor.

Video demo: https://www.youtube.com/watch?v=P2lfvdilmNQ

How to add new powerblock

To add a new powerblock, open the HTML tab.

You can start with a Powerblock from our Library or from scratch.

For example, if you add the Powerblock example, you will see :

How to open the editor

Select the block, then click on Edit Powerblock

The editor will open :

Here is another example:

How does the editor works

You can add inline style including Tailwind CSS or classes saved in powerblock.css, page.css or global.css

In the tab powerblock.html, you will see:

In the tab powerblock.css, add css code, which will be applied only for this block.

In the tab page.css, add css code, which will be applied for all blocks of the current page.

In the tab app.css, add css code, which will be applied for all blocks of all pages.

In the tab app.js, add JS code, which will be applied for all pages.

How to use Powerblock Text

Once you click on "Convert to PowerText", a new key will be added that makes this text editable with Blackbell visual editor.

How to use Powerblock Image

Once you click on "Convert to PowerImage", a new key will be added that makes this image editable with Blackbell visual editor. You can also configure the aspect ratio.

Video demo image drag and drop: https://d.pr/i/kMbb8n

How to use Powerblock Link

Once you click on "Convert to PowerText", a new key will be added that makes this element a link, editable with Blackbell visual editor.

How to use Powerblock List

TODO : update

<powerblock.List as |powerList|>  
    <powerList.Image @key="image" @aspectRatio={{array 1 1}} class="ab" />  
    <powerList.Text @key="text1" class="ab" />  
    <powerList.Text @key="text2" class="ab2" />  
    <powerList.Link @key="link" class="33" /> 
</powerblock.List>

This is a wrapper for list items, so that you can add multiple items with same structure.

There can be only one LIST per block to avoid issues

Video demo adding list item visually : https://d.pr/v/wRQ3z3

Misc utilities

Unsaved tab show a white circle. Save with CMS S.

Start coding to bring the helper

Easily add example, by using the shortcut buttons