SlideShare une entreprise Scribd logo
1  sur  23
Télécharger pour lire hors ligne
Do you want to
contribute to
volto?
@iFlameing
Who Am I
Alok Kumar
Developer at Kitconcept.
Mainly working on Volto.
contributor of gatsby-source-plone
Author of gatsby-theme-plone
@iFlameing
How Volto
Generates forms
for content types
@iFlameing
@iFlameing
@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
@iFlameing
Schema Look Like This
@iFlameing
Schema Of File Content Type
@iFlameing
Schema Of File Content Type
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
Here is the Render view of Individual Widget
Here is the example of widget mapping and
how it will be accessed
@iFlameing
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
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
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
Then click on behaviours
@iFlameing
Enable the block behaviour
@iFlameing
Before Block Behaviour Enabled After Block Behaviour Enabled
@iFlameing
Let's See Some Blocks
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
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
@iFlameing
For More Informatin regarding
How to create Blocks visit
https://docs.voltocms.com/blocks/
introduction/
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
Questions
Thank You

Contenu connexe

Tendances

Permalink settings 05 (wp)
Permalink settings 05 (wp)Permalink settings 05 (wp)
Permalink settings 05 (wp)AbhishekMondal42
 
How To Post A Blog
How To Post A BlogHow To Post A Blog
How To Post A BlogA4ID
 
WP Tabbed Popular Posts & Products
WP Tabbed Popular Posts & ProductsWP Tabbed Popular Posts & Products
WP Tabbed Popular Posts & ProductsSoftProdigy
 
Did you know you can browse a photo to your post
Did you know you can browse a photo to your postDid you know you can browse a photo to your post
Did you know you can browse a photo to your postJeeran
 
Remove and add get started with your site
Remove and add get started with your siteRemove and add get started with your site
Remove and add get started with your sitePrashant Kumar Singh
 
Blogger vs Wordpress-best one to create a free blog
Blogger vs Wordpress-best one to create a free blogBlogger vs Wordpress-best one to create a free blog
Blogger vs Wordpress-best one to create a free blogsayan de
 

Tendances (6)

Permalink settings 05 (wp)
Permalink settings 05 (wp)Permalink settings 05 (wp)
Permalink settings 05 (wp)
 
How To Post A Blog
How To Post A BlogHow To Post A Blog
How To Post A Blog
 
WP Tabbed Popular Posts & Products
WP Tabbed Popular Posts & ProductsWP Tabbed Popular Posts & Products
WP Tabbed Popular Posts & Products
 
Did you know you can browse a photo to your post
Did you know you can browse a photo to your postDid you know you can browse a photo to your post
Did you know you can browse a photo to your post
 
Remove and add get started with your site
Remove and add get started with your siteRemove and add get started with your site
Remove and add get started with your site
 
Blogger vs Wordpress-best one to create a free blog
Blogger vs Wordpress-best one to create a free blogBlogger vs Wordpress-best one to create a free blog
Blogger vs Wordpress-best one to create a free blog
 

Similaire à Do you want to contribute to volto?

How Joomla! builds a webpage (annotated)
How Joomla! builds a webpage (annotated)How Joomla! builds a webpage (annotated)
How Joomla! builds a webpage (annotated)Randy Carey
 
10 ways to bind multiple models on a view in mvc code project
10 ways to bind multiple models on a view in mvc   code project10 ways to bind multiple models on a view in mvc   code project
10 ways to bind multiple models on a view in mvc code projectAkshat Kumar
 
6 Special Howtos for Drupal
6 Special Howtos for Drupal6 Special Howtos for Drupal
6 Special Howtos for DrupalWingston
 
Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBlog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateSean Burgess
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateSean Burgess
 
Getting Started with Visualforce
Getting Started with VisualforceGetting Started with Visualforce
Getting Started with VisualforceRati Sharma
 
Streamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptxStreamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptxShubhamJayswal6
 
The battle between the states (all about flutter stateless & stateful widgets...
The battle between the states (all about flutter stateless & stateful widgets...The battle between the states (all about flutter stateless & stateful widgets...
The battle between the states (all about flutter stateless & stateful widgets...Katy Slemon
 
Implementing auto complete using JQuery
Implementing auto complete using JQueryImplementing auto complete using JQuery
Implementing auto complete using JQueryBhushan Mulmule
 
Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1フ乇丂ひ丂
 
Different types of sticker apps
Different types of sticker appsDifferent types of sticker apps
Different types of sticker appsJelena Krmar
 
Web components
Web componentsWeb components
Web componentsMohd Saeed
 
Cis407 a ilab 6 web application development devry university
Cis407 a ilab 6 web application development devry universityCis407 a ilab 6 web application development devry university
Cis407 a ilab 6 web application development devry universitylhkslkdh89009
 
ChircuVictor StefircaMadalin rad_aspmvc3_wcf_vs2010
ChircuVictor StefircaMadalin rad_aspmvc3_wcf_vs2010ChircuVictor StefircaMadalin rad_aspmvc3_wcf_vs2010
ChircuVictor StefircaMadalin rad_aspmvc3_wcf_vs2010vchircu
 

Similaire à Do you want to contribute to volto? (20)

How Joomla! builds a webpage (annotated)
How Joomla! builds a webpage (annotated)How Joomla! builds a webpage (annotated)
How Joomla! builds a webpage (annotated)
 
10 ways to bind multiple models on a view in mvc code project
10 ways to bind multiple models on a view in mvc   code project10 ways to bind multiple models on a view in mvc   code project
10 ways to bind multiple models on a view in mvc code project
 
Creating a New iSites Tool
Creating a New iSites ToolCreating a New iSites Tool
Creating a New iSites Tool
 
6 Special Howtos for Drupal
6 Special Howtos for Drupal6 Special Howtos for Drupal
6 Special Howtos for Drupal
 
Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBlog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
 
Custom PrimeFaces components
Custom PrimeFaces componentsCustom PrimeFaces components
Custom PrimeFaces components
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
 
Getting Started with Visualforce
Getting Started with VisualforceGetting Started with Visualforce
Getting Started with Visualforce
 
MVC Training Part 2
MVC Training Part 2MVC Training Part 2
MVC Training Part 2
 
Streamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptxStreamlining React Component Development and Sharing with bit.pptx
Streamlining React Component Development and Sharing with bit.pptx
 
Actionview
ActionviewActionview
Actionview
 
The battle between the states (all about flutter stateless & stateful widgets...
The battle between the states (all about flutter stateless & stateful widgets...The battle between the states (all about flutter stateless & stateful widgets...
The battle between the states (all about flutter stateless & stateful widgets...
 
Implementing auto complete using JQuery
Implementing auto complete using JQueryImplementing auto complete using JQuery
Implementing auto complete using JQuery
 
Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1Appcelerator Titanium Kinetic practices part 1
Appcelerator Titanium Kinetic practices part 1
 
ASP.NET MVC3 RAD
ASP.NET MVC3 RADASP.NET MVC3 RAD
ASP.NET MVC3 RAD
 
Different types of sticker apps
Different types of sticker appsDifferent types of sticker apps
Different types of sticker apps
 
Web components
Web componentsWeb components
Web components
 
Cis407 a ilab 6 web application development devry university
Cis407 a ilab 6 web application development devry universityCis407 a ilab 6 web application development devry university
Cis407 a ilab 6 web application development devry university
 
ChircuVictor StefircaMadalin rad_aspmvc3_wcf_vs2010
ChircuVictor StefircaMadalin rad_aspmvc3_wcf_vs2010ChircuVictor StefircaMadalin rad_aspmvc3_wcf_vs2010
ChircuVictor StefircaMadalin rad_aspmvc3_wcf_vs2010
 
Using advanced features in joomla
Using advanced features in joomlaUsing advanced features in joomla
Using advanced features in joomla
 

Dernier

Presentation for the Strategic Dialogue on the Future of Agriculture, Brussel...
Presentation for the Strategic Dialogue on the Future of Agriculture, Brussel...Presentation for the Strategic Dialogue on the Future of Agriculture, Brussel...
Presentation for the Strategic Dialogue on the Future of Agriculture, Brussel...Krijn Poppe
 
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...Kayode Fayemi
 
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdf
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdfCTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdf
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdfhenrik385807
 
George Lever - eCommerce Day Chile 2024
George Lever -  eCommerce Day Chile 2024George Lever -  eCommerce Day Chile 2024
George Lever - eCommerce Day Chile 2024eCommerce Institute
 
OSCamp Kubernetes 2024 | Zero-Touch OS-Infrastruktur für Container und Kubern...
OSCamp Kubernetes 2024 | Zero-Touch OS-Infrastruktur für Container und Kubern...OSCamp Kubernetes 2024 | Zero-Touch OS-Infrastruktur für Container und Kubern...
OSCamp Kubernetes 2024 | Zero-Touch OS-Infrastruktur für Container und Kubern...NETWAYS
 
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara ServicesVVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara ServicesPooja Nehwal
 
Open Source Strategy in Logistics 2015_Henrik Hankedvz-d-nl-log-conference.pdf
Open Source Strategy in Logistics 2015_Henrik Hankedvz-d-nl-log-conference.pdfOpen Source Strategy in Logistics 2015_Henrik Hankedvz-d-nl-log-conference.pdf
Open Source Strategy in Logistics 2015_Henrik Hankedvz-d-nl-log-conference.pdfhenrik385807
 
Motivation and Theory Maslow and Murray pdf
Motivation and Theory Maslow and Murray pdfMotivation and Theory Maslow and Murray pdf
Motivation and Theory Maslow and Murray pdfakankshagupta7348026
 
call girls in delhi malviya nagar @9811711561@
call girls in delhi malviya nagar @9811711561@call girls in delhi malviya nagar @9811711561@
call girls in delhi malviya nagar @9811711561@vikas rana
 
Russian Call Girls in Kolkata Vaishnavi 🤌 8250192130 🚀 Vip Call Girls Kolkata
Russian Call Girls in Kolkata Vaishnavi 🤌  8250192130 🚀 Vip Call Girls KolkataRussian Call Girls in Kolkata Vaishnavi 🤌  8250192130 🚀 Vip Call Girls Kolkata
Russian Call Girls in Kolkata Vaishnavi 🤌 8250192130 🚀 Vip Call Girls Kolkataanamikaraghav4
 
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...Hasting Chen
 
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night Enjoy
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night EnjoyCall Girl Number in Khar Mumbai📲 9892124323 💞 Full Night Enjoy
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night EnjoyPooja Nehwal
 
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )Pooja Nehwal
 
Philippine History cavite Mutiny Report.ppt
Philippine History cavite Mutiny Report.pptPhilippine History cavite Mutiny Report.ppt
Philippine History cavite Mutiny Report.pptssuser319dad
 
Navi Mumbai Call Girls Service Pooja 9892124323 Real Russian Girls Looking Mo...
Navi Mumbai Call Girls Service Pooja 9892124323 Real Russian Girls Looking Mo...Navi Mumbai Call Girls Service Pooja 9892124323 Real Russian Girls Looking Mo...
Navi Mumbai Call Girls Service Pooja 9892124323 Real Russian Girls Looking Mo...Pooja Nehwal
 
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptx
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptxMohammad_Alnahdi_Oral_Presentation_Assignment.pptx
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptxmohammadalnahdi22
 
ANCHORING SCRIPT FOR A CULTURAL EVENT.docx
ANCHORING SCRIPT FOR A CULTURAL EVENT.docxANCHORING SCRIPT FOR A CULTURAL EVENT.docx
ANCHORING SCRIPT FOR A CULTURAL EVENT.docxNikitaBankoti2
 
Open Source Camp Kubernetes 2024 | Running WebAssembly on Kubernetes by Alex ...
Open Source Camp Kubernetes 2024 | Running WebAssembly on Kubernetes by Alex ...Open Source Camp Kubernetes 2024 | Running WebAssembly on Kubernetes by Alex ...
Open Source Camp Kubernetes 2024 | Running WebAssembly on Kubernetes by Alex ...NETWAYS
 
OSCamp Kubernetes 2024 | A Tester's Guide to CI_CD as an Automated Quality Co...
OSCamp Kubernetes 2024 | A Tester's Guide to CI_CD as an Automated Quality Co...OSCamp Kubernetes 2024 | A Tester's Guide to CI_CD as an Automated Quality Co...
OSCamp Kubernetes 2024 | A Tester's Guide to CI_CD as an Automated Quality Co...NETWAYS
 
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...Sheetaleventcompany
 

Dernier (20)

Presentation for the Strategic Dialogue on the Future of Agriculture, Brussel...
Presentation for the Strategic Dialogue on the Future of Agriculture, Brussel...Presentation for the Strategic Dialogue on the Future of Agriculture, Brussel...
Presentation for the Strategic Dialogue on the Future of Agriculture, Brussel...
 
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
Governance and Nation-Building in Nigeria: Some Reflections on Options for Po...
 
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdf
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdfCTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdf
CTAC 2024 Valencia - Henrik Hanke - Reduce to the max - slideshare.pdf
 
George Lever - eCommerce Day Chile 2024
George Lever -  eCommerce Day Chile 2024George Lever -  eCommerce Day Chile 2024
George Lever - eCommerce Day Chile 2024
 
OSCamp Kubernetes 2024 | Zero-Touch OS-Infrastruktur für Container und Kubern...
OSCamp Kubernetes 2024 | Zero-Touch OS-Infrastruktur für Container und Kubern...OSCamp Kubernetes 2024 | Zero-Touch OS-Infrastruktur für Container und Kubern...
OSCamp Kubernetes 2024 | Zero-Touch OS-Infrastruktur für Container und Kubern...
 
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara ServicesVVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
VVIP Call Girls Nalasopara : 9892124323, Call Girls in Nalasopara Services
 
Open Source Strategy in Logistics 2015_Henrik Hankedvz-d-nl-log-conference.pdf
Open Source Strategy in Logistics 2015_Henrik Hankedvz-d-nl-log-conference.pdfOpen Source Strategy in Logistics 2015_Henrik Hankedvz-d-nl-log-conference.pdf
Open Source Strategy in Logistics 2015_Henrik Hankedvz-d-nl-log-conference.pdf
 
Motivation and Theory Maslow and Murray pdf
Motivation and Theory Maslow and Murray pdfMotivation and Theory Maslow and Murray pdf
Motivation and Theory Maslow and Murray pdf
 
call girls in delhi malviya nagar @9811711561@
call girls in delhi malviya nagar @9811711561@call girls in delhi malviya nagar @9811711561@
call girls in delhi malviya nagar @9811711561@
 
Russian Call Girls in Kolkata Vaishnavi 🤌 8250192130 🚀 Vip Call Girls Kolkata
Russian Call Girls in Kolkata Vaishnavi 🤌  8250192130 🚀 Vip Call Girls KolkataRussian Call Girls in Kolkata Vaishnavi 🤌  8250192130 🚀 Vip Call Girls Kolkata
Russian Call Girls in Kolkata Vaishnavi 🤌 8250192130 🚀 Vip Call Girls Kolkata
 
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
Re-membering the Bard: Revisiting The Compleat Wrks of Wllm Shkspr (Abridged)...
 
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night Enjoy
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night EnjoyCall Girl Number in Khar Mumbai📲 9892124323 💞 Full Night Enjoy
Call Girl Number in Khar Mumbai📲 9892124323 💞 Full Night Enjoy
 
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )
WhatsApp 📞 9892124323 ✅Call Girls In Juhu ( Mumbai )
 
Philippine History cavite Mutiny Report.ppt
Philippine History cavite Mutiny Report.pptPhilippine History cavite Mutiny Report.ppt
Philippine History cavite Mutiny Report.ppt
 
Navi Mumbai Call Girls Service Pooja 9892124323 Real Russian Girls Looking Mo...
Navi Mumbai Call Girls Service Pooja 9892124323 Real Russian Girls Looking Mo...Navi Mumbai Call Girls Service Pooja 9892124323 Real Russian Girls Looking Mo...
Navi Mumbai Call Girls Service Pooja 9892124323 Real Russian Girls Looking Mo...
 
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptx
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptxMohammad_Alnahdi_Oral_Presentation_Assignment.pptx
Mohammad_Alnahdi_Oral_Presentation_Assignment.pptx
 
ANCHORING SCRIPT FOR A CULTURAL EVENT.docx
ANCHORING SCRIPT FOR A CULTURAL EVENT.docxANCHORING SCRIPT FOR A CULTURAL EVENT.docx
ANCHORING SCRIPT FOR A CULTURAL EVENT.docx
 
Open Source Camp Kubernetes 2024 | Running WebAssembly on Kubernetes by Alex ...
Open Source Camp Kubernetes 2024 | Running WebAssembly on Kubernetes by Alex ...Open Source Camp Kubernetes 2024 | Running WebAssembly on Kubernetes by Alex ...
Open Source Camp Kubernetes 2024 | Running WebAssembly on Kubernetes by Alex ...
 
OSCamp Kubernetes 2024 | A Tester's Guide to CI_CD as an Automated Quality Co...
OSCamp Kubernetes 2024 | A Tester's Guide to CI_CD as an Automated Quality Co...OSCamp Kubernetes 2024 | A Tester's Guide to CI_CD as an Automated Quality Co...
OSCamp Kubernetes 2024 | A Tester's Guide to CI_CD as an Automated Quality Co...
 
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
No Advance 8868886958 Chandigarh Call Girls , Indian Call Girls For Full Nigh...
 

Do you want to contribute to volto?

  • 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
  • 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
  • 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
  • 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