An addon for Volto thatt contains some dummy blocks. The code on this block is a demo you can copy to your project. Its aim is to show how simple blocks are built using components provided by Volto
This addon provides 6 different Volto Blocks. They are meant to be used as demo-code to learn how Volto Blocks are created.
You can copy-and-paste the code into your project and modify where required.
All block code is compatible with the Block style wrapper so either the values coming from the styling schema (if available) or class names added by the styleClassNameExtenders will be available in your blocks.
All block schemas are internationalized, which means that if you run make i18n the field names will be added to the po files, ready to be translated into other languages.
This block uses Volto provided View and Edit components. It only configures a custom schema with a URL and a title.
This block shows how Volto provides the Edit component automatically, without needing to add any boilerplate. It also shows that Volto provides a very simple View component that renders all values in the schema.
This block uses Volto provided Edit component. It configures a custom schema with a URL and a title and provides also a View component.
This block shows how we can configure a simple block with some fields and build a custom view component for it without worrying about the Edit component.
This block uses custom View and Edit components. As we are using a custom Edit component, there is no need to configure the block schema.
This block shows how we can create a simple block with custom View and Edit components. The Edit component featured here is a basic one where we just inject a schema in it.
This block uses a custom view component and defines a schema for it. But the schema features a special field called variation and also a list of available variations in the block configuration.
This block shows how to create a manual implementation of variations and how we call the selected variation's template.
This block uses a custom view component and makes use of the withBlockExtensions HOC that Volto provides to provide variations.
This block shows how we can build a block that uses variations. Just wrapping the view component definition with the withBlockExtensions HOC, and providing a list of variations in the block config.
This block uses a custom view component and makes use of the withBlockExtensions HOC that Volto provides to provide variations. One of the variation uses a schema enhancer to provide additional fields to the block when using this variation.
This block shows how we can build a block that uses variations. Just wrapping the view component definition with the withBlockExtensions HOC, and providing a list of variations in the block config. Moreover, it shows how we can use the schema enhancing functionality to add additional fields to the block when using a given variation.
To install your project, you must choose the method appropriate to your version of Volto.
Create a new Volto project (you can skip this step if you already have one):
npm install -g yo @plone/generator-volto
yo @plone/volto my-volto-project --addon volto-demo-blocks
cd my-volto-project
Add volto-demo-blocks to your package.json:
"addons": [
"volto-demo-blocks"
],
"dependencies": {
"volto-demo-blocks": "*"
}Download and install the new add-on by running:
yarn install
Start volto with:
yarn start
Add volto-demo-blocks to your package.json:
"dependencies": {
"volto-demo-blocks": "*"
}Add volto-demo-blocks to your volto.config.js:
const addons = ['volto-demo-blocks'];If this package provides a Volto theme, and you want to activate it, then add the following to your volto.config.js:
const theme = 'volto-demo-blocks';Visit http://localhost:3000/ in a browser, login, and check the awesome new features.
The development of this add-on is done in isolation using a new approach using pnpm workspaces and latest mrs-developer and other Volto core improvements.
For this reason, it only works with pnpm and Volto 18 (currently in alpha).
Run make help to list the available commands.
help Show this help
install Installs the add-on in a development environment
start Starts Volto, allowing reloading of the add-on during development
build Build a production bundle for distribution of the project with the add-on
i18n Sync i18n
ci-i18n Check if i18n is not synced
format Format codebase
lint Lint, or catch and remove problems, in code base
release Release the add-on on npmjs.org
release-dry-run Dry-run the release of the add-on on npmjs.org
test Run unit tests
ci-test Run unit tests in CI
backend-docker-start Starts a Docker-based backend for development
storybook-start Start Storybook server on port 6006
storybook-build Build Storybook
acceptance-frontend-dev-start Start acceptance frontend in development mode
acceptance-frontend-prod-start Start acceptance frontend in production mode
acceptance-backend-start Start backend acceptance server
ci-acceptance-backend-start Start backend acceptance server in headless mode for CI
acceptance-test Start Cypress in interactive mode
ci-acceptance-test Run cypress tests in headless mode for CI
Install package requirements.
make installStart the backend.
make backend-docker-startIn a separate terminal session, start the frontend.
make startRun ESlint, Prettier, and Stylelint in analyze mode.
make lintRun ESlint, Prettier, and Stylelint in fix mode.
make formatExtract the i18n messages to locales.
make i18nRun unit tests.
make testRun each of these steps in separate terminal sessions.
In the first session, start the frontend in development mode.
make acceptance-frontend-dev-startIn the second session, start the backend acceptance server.
make acceptance-backend-startIn the third session, start the Cypress interactive test runner.
make acceptance-testThe project is licensed under the MIT license.
Crafted with care by Generated using Cookieplone (0.8.1) and cookiecutter-plone (d9b5293) on 2024-12-29 17:06:29.942612. A special thanks to all contributors and supporters!