Hi I am trying to add in our blocks the styling tool bar like the "column-block", "accordion-block" etc, but I haven't found how to add it. I found the block volto-block-style (GitHub - eea/volto-block-style: A style wrapper for Volto things) and I try to use, but it is not works, or I don't know how it works.
Before add the volto-block-style, I had the style toolbar in some blocks. Anyone can explain to me how it works, or how can we use it? I've looked in the code for column-block, accordion-block, divider-block, trying to find how it is defined, but I haven't found it.
volto-block-style is somewhat deprecated. It works by wrapping all blocks in a wrapping div and provides its own special classes for styling. Initially it was designed with a limited set of use cases in mind (for example to provide a wrapper container for blocks, for things like "I want this block to be set in a blue box"), then it just grew and grew more css-like capabilities. Overkill and you don't want to trust the editors with this, as they'll make a mess. To be able to have that style button, the volto-block-style performed a hack, which is to iterate over all the configured blocks and wrap their View components with a special wrapper component. This is why it only works with blocks defined in addons (the blocks defined in a Volto project are defined after the addon blocks) and it needs to be "the last", as its special hack code will only over the blocks that were defined at that point.
Volto's builtin styling framework is more bare-bones. There's no more dedicated style palette (which was a hack in itself), and instead says: a style is anything you want to define in a block schema, as long as it's an object (a block field) named styles, then it converts those to classnames that are applied to the block wrapper. What those styles do, you have to define them on your own in your CSS theme. It goes back to the idea of "a predefined look or behavior" for a block, which was provided by volto-block-style. But this new framework also has a better sense of direction, see 10. Block Styling – Effective Volto – Add-ons — Plone Training 2023 documentation
Edit: looking at that training, I see that it uses an older style, which is no longer used. There's no more separate StyleSchema now, it's all achieved with the regular schemaEnhancers.
Hi, I found my problem. It was because we use the volto-tabs-block, and it has the volto-style-block in their add-ons, and then our blocks didn't apply the wrapper.
After that, don't you recommend to use volto-style-block? I liked this because apply directly the styles without implement any CSS class. With the new way to add styles in a block, we need to implement all the CSS classes, or are there any utility to transform the styles in JSON format to js-css?
After that, don't you recommend to use volto-style-block?
@rboixaderg I'm not sure what to say. In principle, long term, it's a dead end. I estimate that it will still be maintained (and even lightly further developed) for the medium term, something like 2-3 years.
With the new way to add styles in a block, we need to implement all the CSS classes, or are there any utility to transform the styles in JSON format to js-css?
Yes, you need to implement all the css classes. With the new style framework the intention was not to allow such granular level of control to the editors. In theory you could port the controls of volto-style-block to the new framework and make them compatible with each other. One might argue that Volto could even ship with something like this by default (but disabled), for the "small website" usecase
