8. Extend Plone with add-on packages – Mastering Plone Development

Extend Plone with add-on packages

8. Extend Plone with add-on packages#

In this chapter you will learn how to select and install Plone add-ons.

The creation of a custom add-on is explained in Create an add-on [The voting story]

Check out mastering-plone-project at tag initial:

git checkout initial

The code at the end of the chapter:

git checkout addons

More info in The code for the training

Plone add-ons enrich the CMS by

  • adding content types

  • adding behaviors with new fields, relations and other features for existing and custom content types

  • adding blocks to add elementary content snippets to a page

  • designing the layout

  • customizing the editor experience

  • adding content assembling features for overview pages

Plone has two groups of add-ons: add-ons for the Plone backend and add-ons for the frontend Volto.

Plone backend add-ons provide

  • content types

  • behaviors to enrich content types

Plone frontend add-ons provide

  • new blocks

  • variations and enhancements of blocks

  • a theme to design the layout of a site

  • components independent of blocks like a dropdown navigation

Both can be coupled, if a frontend feature depends on a new content type, a new behavior, or any other change needed in data structure. For example, an add-on that has the goal to provide a bookmarking feature depends on a backend add-on that handles the storing of the bookmarks.

8.1. How to find appropriate add-ons#

It can be hard to find the right add-on for your requirements. Here are some tips.

8.2. Example: the form block add-on#

For our case study, it would be nice to have a contact form to send questions to the conference organizers. We can use the Plone form block add-on for this.

It is released in two packages:

We have to add both of these to our project.

8.3. Install the backend add-on#

First, we must add the backend add-on as a dependency, so that its code will be available.

Edit the file backend/pyproject.toml and add plone.formblock to the dependencies:

1dependencies = [
2    "Products.CMFPlone==6.2.1",
3    "plone.api",
4    "plone.restapi",
5    "plone.volto",
6    "plone.formblock==1.0.0a3",
7]

It's a good idea to "pin" the add-on to a specific version, to make sure that it won't get accidentally upgraded when you don't expect it, if there is a new release of the add-on in the future.

Now re-install the project with the new dependencies:

make backend-install

This runs uv sync which updates the Python virtual environment with the dependencies listed in pyproject.toml. Now when the backend is restarted, the code for the add-on is available.

Backend add-ons usually also need to be installed in a specific Plone site.

In your browser, go to Site Setup at http://localhost:3000/controlpanel, and open the Add-ons control panel. You will see a list of available add-ons. Click to install the form block add-on.

Plone `Add-ons` control panel, showing available configuration options

Add-ons control panel, showing available configuration options.

See also

Documentation Install Plone add-ons

8.4. Install the frontend add-on#

We also need to install the code for the frontend add-on. Update the addons and dependencies in frontend/packages/volto-ploneconf-site/package.json:

"addons": [
  "@plone/volto-form-block"
],
"dependencies": {
  "@plone/volto-form-block": "^1.0.0-alpha.3",
},

Tip

dependencies tells the package manager pnpm to install the code. addons tells Volto to load the add-on's configuration.

Now re-install the frontend with the new dependencies:

make frontend-install

After you restart the frontend, you should be able to add a form block.

Tip

To confirm that the frontend add-on is installed, go to http://localhost:3000/controlpanel and look at the list of Add-ons at the bottom.

8.5. Summary#

We have seen in short how to extend a vanilla Plone website with third party add-ons to add new functionality. Even if you do not use many of these, they can be useful examples of how to implement features in Plone.

Contents