@kitconcept/volto-separator-block NPM

volto-separator-block (@kitconcept/volto-separator-block)

A new add-on for Volto

kitconcept GmbH

The Volto Separator Block allows editors to add a visual separator between blocks to a Volto page.

Screenshot

Separator-Block

Screencast

Separator-Block

Block Alignment Enhancer

This block features by default a block schemaEnhancer that provides an alignment option for the separator. This can be disabled by overwriting with your own schemaEnhancer

  config.blocks.blocksConfig.separator = {
    ...config.blocks.blocksConfig.separator,
    schemaEnhancer: mySeparatorSchemaEnhancer,
  }

or setting it to null or undefined:

  config.blocks.blocksConfig.separator = {
    ...config.blocks.blocksConfig.separator,
    schemaEnhancer: null,
  }

Also, if you want to keep the default alignment but still add your own schemaEnhancer you can compose it along with your own:

import { composeSchema } from '@plone/volto/helpers';
import { SeparatorStyleEnhancer } from '@kitconcept/volto-separator-block';

    config.blocks.blocksConfig.separator = {
      ...config.blocks.blocksConfig.separator,
      schemaEnhancer: composeSchema(mySeparatorSchemaEnhancer, defaultSeparatorEnhancer),
    }

Installation

To install your project, you must choose the method appropriate to your version of Volto.

Volto 17 and earlier

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 @kitconcept/volto-separator-block
cd my-volto-project

Add @kitconcept/volto-separator-block to your package.json:

"addons": [
    "@kitconcept/volto-separator-block"
],

"dependencies": {
    "@kitconcept/volto-separator-block": "*"
}

Download and install the new add-on by running:

yarn install

Start volto with:

yarn start

Volto 18 and later

Add @kitconcept/volto-separator-block to your package.json:

"dependencies": {
    "@kitconcept/volto-separator-block": "*"
}

Add @kitconcept/volto-separator-block to your volto.config.js:

const addons = ['@kitconcept/volto-separator-block'];

If this package provides a Volto theme, and you want to activate it, then add the following to your volto.config.js:

const theme = '@kitconcept/volto-separator-block';

Test installation

Visit http://localhost:3000/ in a browser, login, and check the awesome new features.

Development

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).

Pre-requisites

Make convenience commands

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