1. The document discusses building add-ons for Volto, an open-source headless CMS built on Plone and React. 2. It provides instructions on how to generate the boilerplate for a Volto add-on using the Plone Yemon generator, and how to configure the project to include add-on files. 3. The document then demonstrates how to create the basic files and functions needed for a custom add-on, including adding custom blocks, styles, reducers, and overriding add-on components.

1. 1
B U I L D I N G
V O L T O
A D D O N S
P L O N E
C O N F 2 0 2 0

2. 2
W H O A M I
Alok Kumar
Developer at Kitconcept.
Mainly working on Volto.
contributor of gatsby-source-plone
Author of gatsby-theme-plone
@iFlameing

3. 3
Bootstrapping Addon
Structure
For bootstrapping Addon Structure, we will be using Plone
Yemon generator provided by our awesome plone
community
npm install -g yo
npm install -g @plone/generator-volto
@iFlameing

4. 4
Show Them How To Generate
Boilerplate using Yemon Generator
@iFlameing
yo @plone/volto volto-addons-conf-2020

5. Making Project aware of
our addon files
5
Updating Jsconfig so that our project knows that we have a
development package at this place. So, that it can resolve
the package successfully.
@iFlameing

6. 6
@iFlameing

7. 7
Creating our First Addon File
Under Your addon dir create another dir volto-form-
builder
You have to create an index.js file in src dir because this
file must export a function signature that takes volto config
and returns new config.
@iFlameing

8. 8
Function Signature
@iFlameing

9. 9
Let's first dive into how we
can create the block in Volto
We can add blocks bypassing a block config. A simple
example will be like this.
@iFlameing

10. 1 0
@iFlameing

11. 1 1
Passing Our Custom Group
@iFlameing

12. 1 2
Passing Our Custom block
@iFlameing

13. 1 3
How To Store Our State Of
Addons
You can write your custom reducer related to your addon.
You have to create the reducer and you have to pass it in
the config
@iFlameing

14. 1 4
@iFlameing

15. 1 5
How To style our Addon
@iFlameing

16. 1 6
Just create a .less file and import in the component where
you want that style
Just one thing please place these three lines in the starting
of the .less file.
@iFlameing

17. 1 7
@iFlameing

18. 1 8
Notice that by importing '../../theme.config' we’re able to
have access to Volto’s (and, by extension, all SemanticUIs)
LESS variables
@iFlameing

19. 1 9
How To Override The
Addons Block
@iFlameing

20. 2 0
@iFlameing
You can override a Volto Addon same as Volto by putting
the name of Addon in the customization folder and
following the same path as the file in Addon.
And move your Volto customization in Volto folder.

21. 2 1
@iFlameing
customiszations/volto-form-
builder/components/Textarea/View.jsx
Example

22. 2 2
@iFlameing
Volto →add-ons →Project
Order Of Customizations

23. 2 3
@iFlameing
?
Questions