Block examples documentation #6560
Conversation
✅ Deploy Preview for plone-components canceled.
|
|
Thank you for writing this @erral . It's awesome when an experienced Volto developer takes some time to pass on some of this hard-earned experience and writes some documentation. You are awesome for doing this. I plan on giving it a read sometime this week to see if there is anything that I can help with in potential suggestions. But again, thank you for doing this. |
There was a problem hiding this comment.
This is great stuff. Thank you!
I created a related PR to define Glossary terms at plone/documentation#1829, which needs to be merged before this PR to pull them into this PR's docs preview.
|
|
||
| customschemaandview | ||
| customviewandvariations | ||
| customviewvariationsandschemaenhancer |
There was a problem hiding this comment.
Please rename all the above files with dashes between words to improve SEO.
| --- | ||
| myst: | ||
| html_meta: | ||
| "description": "Volto block examples." |
There was a problem hiding this comment.
| "description": "Volto block examples." | |
| "description": "Volto block examples" |
| myst: | ||
| html_meta: | ||
| "description": "Volto block examples." | ||
| "property=og:description": "Volto block examples." |
There was a problem hiding this comment.
| "property=og:description": "Volto block examples." | |
| "property=og:description": "Volto block examples" |
| html_meta: | ||
| "description": "Volto block examples." | ||
| "property=og:description": "Volto block examples." | ||
| "property=og:title": "Block examples" |
There was a problem hiding this comment.
| "property=og:title": "Block examples" | |
| "property=og:title": "Volto block examples" |
| "keywords": "Volto, React, blocks, example, edit, view, Plone" | ||
| --- | ||
|
|
||
| # Volto Block examples |
There was a problem hiding this comment.
| # Volto Block examples | |
| # Volto block examples |
|
|
||
| With all the block components ready, you need to register the block into Volto. | ||
|
|
||
| To do so, open your addon's {file}`index.js` file, that will have the following contents: |
There was a problem hiding this comment.
| To do so, open your addon's {file}`index.js` file, that will have the following contents: | |
| To do so, open your add-on's {file}`index.js` file, and add the following contents. |
| export default applyConfig; | ||
| ``` | ||
|
|
||
| And before the last `return config;` statement, write the following configuration: |
There was a problem hiding this comment.
| And before the last `return config;` statement, write the following configuration: | |
| Before the last `return config;` statement, write the following configuration. |
| }, | ||
| ], | ||
| }; | ||
|
|
|
|
||
| ``` | ||
|
|
||
| On the top of the file you will need to import the relevant components, as follows: |
There was a problem hiding this comment.
| On the top of the file you will need to import the relevant components, as follows: | |
| At the top of the file, import the relevant components as follows. |
|
|
||
| Your block is ready to be used in your site. | ||
|
|
||
| Restart your Volto site and you will be able to add it using the block add form. |
There was a problem hiding this comment.
| Restart your Volto site and you will be able to add it using the block add form. | |
| Restart your Volto site, and you can add it using the block add form. |
|
@erral once you apply @stevepiercy suggestions and you feel that the work is ready for review you can add me as a reviewer if you would like, I volunteer to read the docs and give any potential suggestions if needed. |
I have reviewed the block documentation, converted some code blocks from class components to functional components, and provide an example of a simple block.
📚 Documentation preview 📚: https://volto--6560.org.readthedocs.build/