This talk is regarding the building blocks of Volto. How Volto works internally and how it generates the Form, How you can enable the Draftjs Editor. How you can customize css.

1. Do you want to
contribute to
volto?
@iFlameing

2. Who Am I
Alok Kumar
Developer at Kitconcept.
Mainly working on Volto.
contributor of gatsby-source-plone
Author of gatsby-theme-plone
@iFlameing

3. How Volto
Generates forms
for content types
@iFlameing

4. @iFlameing

5. @iFlameing
src/components/manage/Add/Add
In Add.jsx we fetch the schema of the content type using
getSchema action
when we click on any content type we go to the add component

6. @iFlameing
Schema Look Like This

7. @iFlameing
Schema Of File Content Type

8. @iFlameing
Schema Of File Content Type

9. Then we pass Schema to Form.jsx.
Form.jsx
Field.jsx
Form.jsx send Schema
properties of the individual
fieldsets in Field.jsx.
Render the Desired Widget which we see in frontend
Generally Field.jsx get the
widget by mapping the
widget name with the widget
component
src/components/manage/Form/Form
src/components/manage/Form/Field
@iFlameing

10. Here is the Render view of Individual Widget

11. Here is the example of widget mapping and
how it will be accessed
@iFlameing

12. How You get DraftJs Editor for your
content type.
@iFlameing
As You Know that Volto has powerful Editor. In which not
only you can write text but you can also render your
custom react component.
2.
In volto you have to enable the block behaviour for your content
type

13. Steps for Enabling the Block Behaviour
Click on User Icon Present in left bottom page
Then click on Site Setup
After that you have click on
dexterity Content type
@iFlameing

14. Steps for Enabling the Block Behaviour
After that you have to click on
dexterity Content type
@iFlameing
Then You have to select your
content type

15. Then click on behaviours
@iFlameing
Enable the block behaviour

16. @iFlameing
Before Block Behaviour Enabled After Block Behaviour Enabled

17. @iFlameing
Let's See Some Blocks

18. 3. How To Create Blocks
If You want to create a block you simply need to create two React component
Edit.jsx
View.jsx
Sidebar
How Your blocks behaves in Edit Mode
How Your blocks behaves in View Mode
If you provide any customizability to Editor
For example
Editor can add the Title of the block
@iFlameing

19. After creating block you just have to register in config file
id : You have to provide a unique id because
it is used for accessing the block Edit View
component.
title : Name of the block
Icon : Icon for the block
edit/view : Your edit and view component
mostUsed : true/false
You can register your block by going to src/config/Blocks.jsx
and append your config in blocksConfig object
@iFlameing

20. @iFlameing
For More Informatin regarding
How to create Blocks visit
https://docs.voltocms.com/blocks/
introduction/

21. 3. How you can style Your Blocks
@iFlameing
You can style your code by simple going to
theme/themes/pastanaga/extras/
and add your css code here
Here you find the list of different files and
you can write your own custom css in one
of the file if your CSS belongs to it
otherwise create a file new file and add
your css there. But If you have created a
new file then you have to import it in
main.less.
theme/themes/pastanaga/extras/mai
n.less

22. Questions

23. Thank You