Volto Tips and Tricks

Techniques, workarounds, and known obstacles in Volto to how I want to use it

Styles Palette

Many blocks right-sidebar includes a "Styles" palette (click the palette icon). This enables applying many powerful CSS features, including assigning arbitrary CSS classes and ids to your block (in the Advanced tab), text alignment, font size, and justification ( tab), and much more. Float Blocks is a valuable example with an additional hint for dealing with blocks that lack the Style palette. I used the option on the tab to get the drop-cap accent at the beginning of this paragraph.

See also my Handy Snippets page for elaborate block idioms I use on this site.

Float Blocks

Floating page elements provides a way to wrap text around other text.

  • The Style palette tab includes an menu by which you can select the float alignment of a block.
  • The Style palette tab includes a menu. You select the direction of float direction of the block you want to clear, and then this paragraph will be moved below that block if it would wrap around it.

A problem arises for blocks that are not subject to the Styles palette. An example is the Table of Contents block. What if you want to float a ToC block to the right, as I have done on this page?

  • The Columns block is subject to the Styles palette, and can include any other block.
  • I included the ToC block in a one-column Columns block, and then was able to float the whole thing right.

(I bet there's a bunch of other obscure uses for a one-column Columns block.)

Block copy, cut, and paste (from #4056 (comment))

@tiberiuichim made a brief video showing the functionality: https://www.youtube.com/watch?v=wojij3xU_h0

Some things to note:

  • Click in a block where you want the selection to start.
  • Use the copy/cut/delete icons that show in the left sidebar when stuff is selected to copy/cut/delete. (Ctrl-C / Ctrl-X / Del don't yet work.
  • Once you've copied or cut a Paste icon will show instead. You can use it to paste in an empty block on the current page or navigate to another page to paste there.
  • Note that these block cut/copy operations provide a way to move a block into or out of a Columns block that otherwise doesn't provide for drag-and-drop moves across the Columns block boundary.)

Workaround Shortcomings

Dividing and Converting Bullet Lists

Dividing list blocks

  • You can divide a list block by dedenting a list element (using Shift-tab) to zero.

Changing list block element types (unordered vs ordered)

  • You can change the type of a list block element by highlighting some text and using the highlighted text menu to select the other list element type.
  • Need to use highlight menu to change list type of nested list.
    • Trying to use text gestures (leading "*" or "1.") to change type of leading entry of a nested list changes the containing list to a non-list.
    • Using the highlight menu to change the nested list type does not have this problem.

Standard header creation methods:

  • Volto comes configured to provide only two heading levels using the edited-text Selection menu: (the H menu option) and (the h menu option).
  • You can also create them using Markdown gestures '# ' () and '## ' () at the beginning of a line.

Alternate creation methods, for other levels, with varying functionality:

  • You can create headers by mouse-pasting rendered headers.
    • These headers are automatically included in table-of-contents block listings, and they get mouse-hover anchors for links from the ToC listings.
  • Pasting or headers isn't currently recognized by Volto. )-:
  • You can create any level headers by using the or by using the block. However:
    • You have to configure to provide more than and headers.
    • None of the headers created with or by the block are noticed by the ToC block, nor do they get automatic mouse-hover anchors for linking to the header.

An little bit cumbersome, but you can use the HTML block to craft an heading then save your page and mouse-copy the heading. Resume editing to replace the HTML block version with the heading pasted into a text block. That pasted copy will have all the heading functionality!

Persisting Bugs

Table of Contents block doesn't include headers nested within block containers.

#15 Fails to include headers in blocks that are nested within ot…

See Also

See my chronicle of my Volto/Plone 6 efforts, Efforts and Issues!