Merge branch 'main' into Swedish-translation

README.md

@@ -36,6 +36,30 @@ You can build your own or choose from the community released ones:
 You can try a Volto online demo at [https://demo.plone.org/](https://demo.plone.org/).
 
 
+## Monorepo structure
+
+Since version 18.0.0-alpha4, the Volto core repository has had the shape of a monorepo, where "mono" means "single" and "repo" is short for "repository".
+This means that several apps and libraries related to each other are stored in the same repository.
+They are managed together but released individually.
+This allows the code to be shared effectively, and unifies tracking of changes across all of the apps and libraries.
+
+| Package | Location |
+|---|---|
+| [`@plone/client`](https://www.npmjs.com/package/@plone/client) | [`packages/client`](https://github.com/plone/volto/tree/main/packages/client#readme) |
+| [`@plone/components`](https://www.npmjs.com/package/@plone/components) | [`packages/components`](https://github.com/plone/volto/tree/main/packages/components#readme) |
+| [`@plone/generator-volto`](https://www.npmjs.com/package/@plone/generator-volto) | [`packages/generator-volto`](https://github.com/plone/volto/tree/main/packages/generator-volto#readme) |
+| [`@plone/helpers`](https://www.npmjs.com/package/@plone/helpers) | [`packages/helpers`](https://github.com/plone/volto/tree/main/packages/helpers#readme) |
+| [`@plone/providers`](https://www.npmjs.com/package/@plone/providers) | [`packages/providers`](https://github.com/plone/volto/tree/main/packages/providers#readme) |
+| [`@plone/registry`](https://www.npmjs.com/package/@plone/registry) | [`packages/registry`](https://github.com/plone/volto/tree/main/packages/registry#readme) |
+| [`@plone/scripts`](https://www.npmjs.com/package/@plone/scripts) | [`packages/scripts`](https://github.com/plone/volto/tree/main/packages/scripts#readme) |
+| [`@plone/types`](https://www.npmjs.com/package/@plone/types) | [`packages/types`](https://github.com/plone/volto/tree/main/packages/types#readme) |
+| none | [`packages/volto-guillotina`](https://github.com/plone/volto/tree/main/packages/volto-guillotina) |
+| [`@plone/volto-slate`](https://www.npmjs.com/package/@plone/volto-slate) | [`packages/volto-slate`](https://github.com/plone/volto/tree/main/packages/volto-slate#readme) |
+| [`@plone/volto-testing`](https://www.npmjs.com/package/@plone/volto-testing) | [`packages/volto-testing`](https://github.com/plone/volto/tree/main/packages/volto-testing) |
+
+See also [Monorepo structure](https://6.docs.plone.org/volto/contributing/developing-core.html#monorepo-structure).
+
+
 ## Create a Volto project
 
 To start a new project using Volto, follow the [Plone installation documentation](https://6.docs.plone.org/install/create-project.html).
@@ -118,12 +142,12 @@ To ensure your website gets the greatest exposure, add it both to [Awesome Volto
 - [Debako Udala / Ayuntamiento de Deba](https://www.deba.eus/eu) (Website of the municipality of Deba, developed by [CodeSyntax](https://www.codesyntax.com/en), 2022)
 - [European Environment Agency](https://www.eea.europa.eu/en) (Website of the European Environment Agency. Developed by [Eau de Web](https://eaudeweb.ro), 2023)
 - [Energy Climate Union portal for Europe](https://climate-energy.eea.europa.eu/) (Thematic website focusing on European strides towards mitigating climate change, developed by [Eau de Web](https://eaudeweb.ro/), 2020)
-- [Excellence at Humboldt-Universität zu Berlin](https://www.alles-beginnt-mit-einer-frage.de) (Website for the excellence initiative of the [Humboldt University Berlin](https://www.hu-berlin.de/de), developed by [kitconcept GmbH](https://kitconcept.com), 2019)
+- [Excellence at Humboldt-Universität zu Berlin](https://www.alles-beginnt-mit-einer-frage.de) (Website for the excellence initiative of the [Humboldt University Berlin](https://www.hu-berlin.de/de), developed by [kitconcept GmbH](https://kitconcept.com/en), 2019)
 - [Forest Information System for Europe](https://forest.eea.europa.eu) (Thematic website focusing on European forests, developed by [Eau de Web](https://eaudeweb.ro/), 2019)
-- [Forschungszentrum Jülich](https://www.fz-juelich.de/de) (Website for Forschungzentrum Jülich, which is one of the largest research institutions in Europe, developed by [kitconcept GmbH](https://kitconcept.com), 2022)
-- [German Aerospace Center (DLR)](https://www.dlr.de/de) (The German Aerospace Center (DLR) is the Federal Republic of Germany's research center for aeronautics. With more than 10.000 employees and a yearly budget of more than 1 billion euros, it is one of the largest research institutions in Germany, developed by [kitconcept GmbH](https://kitconcept.com), 2023)
-- [Helmholtz-Institut Erlangen-Nürnberg für Erneuerbare Energien (HI-ERN)](https://www.hi-ern.de/de) (Website for HI ERN, a research institution for renewable energies, developed by [kitconcept GmbH](https://kitconcept.com), 2022)
-- [Humboldt Labor](https://www.humboldtforum.org/de/programm/dauerangebot/ausstellung/nach-der-natur-14144/) (The Humboldt Lab is a website where the Humboldt University Berlin presents its latest research projects and findings. Developed by [WLDX](https://wldx.de/) and [kitconcept GmbH](https://kitconcept.com), 2020)
+- [Forschungszentrum Jülich](https://www.fz-juelich.de/de) (Website for Forschungzentrum Jülich, which is one of the largest research institutions in Europe, developed by [kitconcept GmbH](https://kitconcept.com/en), 2022)
+- [German Aerospace Center (DLR)](https://www.dlr.de/de) (The German Aerospace Center (DLR) is the Federal Republic of Germany's research center for aeronautics. With more than 10.000 employees and a yearly budget of more than 1 billion euros, it is one of the largest research institutions in Germany, developed by [kitconcept GmbH](https://kitconcept.com/en), 2023)
+- [Helmholtz-Institut Erlangen-Nürnberg für Erneuerbare Energien (HI-ERN)](https://www.hi-ern.de/de) (Website for HI ERN, a research institution for renewable energies, developed by [kitconcept GmbH](https://kitconcept.com/en), 2022)
+- [Humboldt Labor](https://www.humboldtforum.org/de/programm/dauerangebot/ausstellung/nach-der-natur-14144/) (The Humboldt Lab is a website where the Humboldt University Berlin presents its latest research projects and findings. Developed by [WLDX](https://wldx.de/) and [kitconcept GmbH](https://kitconcept.com/en), 2020)
 - [ILPO](https://ilpo.jyu.fi/) (the registration portal of continuous learning at the University of Jyväskylä. Developed by University of Jyväskylä, 2022)
 - [Industrial Emissions portal for Europe](https://industry.eea.europa.eu) (Thematic website focusing on European industrial emissions, developed by [Eau de Web](https://eaudeweb.ro/), 2020)
 - [Jobfamilie MEDICE](https://jobfamilie.medice.de/de) (Carrer website for MEDICE Arzneimittel Pütter GmbH & Co. KG), developed by [Werkbank GmbH](https://werkbank.de/), 2020)
@@ -135,13 +159,13 @@ To ensure your website gets the greatest exposure, add it both to [Awesome Volto
 - [ResOU](https://resou.osaka-u.ac.jp/ja) (ResOU is introducing official researched releases by the University of Osaka, Japan. Developed by [CMScom](https://www.cmscom.jp), 2020)
 - [Stradanove](https://www.stradanove.it/) (Website of the Department of Youth Policies of the Municipality of Modena, developed by [RedTurtle](https://www.redturtle.it), 2020)
 - [Study guide at University of Jyväskylä](https://studyguide.jyu.fi/2020/en/) (Static website where [Volto is used as a headless CMS for authoring additional content](https://tech.blog.jyu.fi/2020/06/plone-volto-hasura-gatsbyjs-mashup/), 2020)
-- [Talke Carrer Website](https://karriere.talke.com/) (Carrer website for [Talke](https://www.talke.com), one of the leading a chemical and petrochemical logistics companies in Germany, developed by [kitconcept GmbH](https://kitconcept.com), 2020)
+- [Talke Carrer Website](https://karriere.talke.com/) (Carrer website for [Talke](https://www.talke.com), one of the leading a chemical and petrochemical logistics companies in Germany, developed by [kitconcept GmbH](https://kitconcept.com/en), 2020)
 - [UEU](https://www.ueu.eus) (Website for Udako Euskal Unibertsitatea, a non-profit University offering all its service only in Basque: courses, publications, ... developed by [CodeSyntax](https://www.codesyntax.com/en), 2023)
 - [Unione dei Comuni della Val Bisenzio](https://www.bisenzio.it/) (Website of the Municipality union of Val Bisenzio. Developed by [RedTurtle](https://www.redturtle.it), 2021)
-- [VHS Ehrenamtsportal](https://vhs-ehrenamtsportal.de) (Website to help volunteers that help refugees for the [German Adult Education Association](https://www.volkshochschule.de/), developed by [kitconcept GmbH](https://kitconcept.com), 2018)
+- [VHS Ehrenamtsportal](https://vhs-ehrenamtsportal.de) (Website to help volunteers that help refugees for the [German Adult Education Association](https://www.volkshochschule.de/), developed by [kitconcept GmbH](https://kitconcept.com/en), 2018)
 - [VisitModena](https://www.visitmodena.it/it) (Tourist website of the Municipality of Modena, developed by [RedTurtle](https://www.redturtle.it), 2020)
 - [WISE-Freshwater](https://water.europa.eu/freshwater) (WISE-Freshwater, the Freshwater Information System for Europe. Developed by [Eau de web](https://eaudeweb.ro) for the European Environmental Agency, 2021)
-- [Zeelandia](https://www.zeelandia.de/) (Corporate website for one of the leading bakery ingredients manufacturers in Germany, developed by [kitconcept GmbH](https://kitconcept.com), 2019)
+- [Zeelandia](https://www.zeelandia.de/) (Corporate website for one of the leading bakery ingredients manufacturers in Germany, developed by [kitconcept GmbH](https://kitconcept.com/en), 2019)
 
 
 ### Open-source websites built with Volto

apps/nextjs/package.json

@@ -18,7 +18,7 @@
     "@tanstack/react-query": "^5.59.0",
     "next": "14.2.14",
     "react": "^18",
-    "react-aria-components": "^1.4.0",
+    "react-aria-components": "^1.5.0",
     "react-dom": "^18"
   },
   "devDependencies": {

apps/vite-ssr/package.json

@@ -24,7 +24,7 @@
     "axios": "^1.6.5",
     "get-port": "^7.0.0",
     "react": "^18.2.0",
-    "react-aria-components": "^1.4.0",
+    "react-aria-components": "^1.5.0",
     "react-dom": "^18.2.0",
     "sirv": "^2.0.4"
   },

apps/vite/package.json

@@ -19,7 +19,7 @@
     "@tanstack/router-devtools": "^1.67.0",
     "axios": "^1.6.5",
     "react": "^18.2.0",
-    "react-aria-components": "^1.4.0",
+    "react-aria-components": "^1.5.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

docs/source/configuration/settings-reference.md

@@ -463,6 +463,23 @@ querystringSearchGet
     [See an explanation of character limits in URLs](https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers/417184#417184).
     Please test this setting properly before enabling in a production site.
 
+cssLayers
+    To use CSS layers when styling Volto, you can define and apply them at the very top level of the page, where they appear in the `<head>` tag.
+    By using this configuration, you can pass the layer list definition as an array:
+
+    ```js
+    config.settings.cssLayers = ['reset', 'plone-components', 'layout', 'addons', 'theme'];
+    ```
+
+showRelatedItems
+    If true, the `RelatedItems` component will show items from the `relatedItems` field. Default: false.
+
+    ```{versionadded} 18.5.0
+    ```
+
+
+showTags
+    If true, the `Tags` component will show tags from the `subjects` field. Default: true.
 ```
 
 ## Views settings

docs/source/contributing/developing-core.md

@@ -42,32 +42,35 @@ The workspaces are located in the `packages` or `apps` folder.
 ### Folder layout
 
 Volto has the following folder structure.
+The package `volto` is the core code of Volto.
 
 ```text
-(volto-monorepo)/
+/
 ├─ apps/
-│  ├─ plone
 │  ├─ nextjs
 │  ├─ remix
-│  └─ rr7
+│  ├─ rr7
+│  ├─ vite
+│  └─ vite-ssr
+├─ ...
 ├─ packages/
-│  ├─ volto
+│  ├─ blocks
 │  ├─ client
 │  ├─ components
-│  ├─ registry
-│  ├─ types
 │  ├─ coresandbox
 │  ├─ generator-volto
+│  ├─ helpers
+│  ├─ providers
+│  ├─ registry
 │  ├─ scripts
+│  ├─ slots
+│  ├─ theming
 │  ├─ tsconfig
+│  ├─ types
+│  ├─ volto
 │  ├─ volto-guillotina
 │  ├─ volto-slate
 │  └─ volto-testing
-├─ .gitignore
-├─ package.json
-├─ pnpm-workspace.yaml
-├─ turbo.json
-├─ tsconfig.json
 ├─ ...
 ```
 

docs/source/development/images.md

@@ -88,5 +88,5 @@ If the image is rendered at full viewport width when the viewport is less than `
 
 More information on this subject can be found at the following resources.
 
-- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Responsive_images
 - https://www.builder.io/blog/fast-images

docs/source/release-notes/index.md

@@ -17,6 +17,20 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.4.0 (2024-12-17)
+
+### Feature
+
+- Added a setting in the `config` object to set the site's CSS layers, if required. @sneridagh [#6539](https://github.com/plone/volto/issues/6539)
+
+### Internal
+
+- Fixed and re-enabled the types declaration extractor from core Volto. @sneridagh [#6534](https://github.com/plone/volto/issues/6534)
+
+### Documentation
+
+- Add monorepo structure to the README. Update the monorepo structure file tree. @stevepiercy [#6542](https://github.com/plone/volto/issues/6542)
+
 ## 18.3.0 (2024-12-12)
 
 ### Feature

packages/blocks/Image/index.tsx

@@ -1,4 +1,4 @@
-import { BlockViewProps } from '@plone/types';
+import type { BlockViewProps } from '@plone/types';
 import { usePloneProvider } from '@plone/providers';
 
 const ImageBlockView = (props: BlockViewProps) => {

packages/blocks/RenderBlocks/BlockWrapper.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import cx from 'clsx';
 import type { RenderBlocksProps } from './RenderBlocks';
 

packages/blocks/Teaser/index.tsx

@@ -1,4 +1,4 @@
-import { BlockViewProps } from '@plone/types';
+import type { BlockViewProps } from '@plone/types';
 import { Link } from '@plone/components';
 
 const TeaserBlockView = (props: BlockViewProps) => {

packages/blocks/index.ts

@@ -1,4 +1,4 @@
-import { ConfigType } from '@plone/registry';
+import type { ConfigType } from '@plone/registry';
 import { slate } from './config/slate';
 import { blocksConfig } from './config';
 

packages/blocks/news/6536.internal

@@ -0,0 +1 @@
+Centralize `tsconfig`. @sneridagh

packages/blocks/package.json

@@ -28,9 +28,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "type": "module",
   "main": "index.ts",
   "scripts": {
     "test": "vitest",
+    "check-ts": "tsc --project tsconfig.json",
     "dry-release": "release-it --dry-run",
     "release": "release-it",
     "release-major-alpha": "release-it major --preRelease=alpha",

packages/components/CHANGELOG.md

@@ -8,6 +8,16 @@
 
 <!-- towncrier release notes start -->
 
+## 3.0.1 (2024-12-17)
+
+### Bugfix
+
+- Fixed precedence of the Quanta layer by adding a base layer for all the basic components. @sneridagh [#6539](https://github.com/plone/volto/issues/6539)
+
+### Internal
+
+- Update `@plone/components`'s URLs in its `package.json`. @stevepiercy [#6542](https://github.com/plone/volto/issues/6542)
+
 ## 3.0.0 (2024-12-12)
 
 ### Breaking

packages/components/README.md

@@ -62,11 +62,19 @@ Using them as a baseline will allow you to quickly build your theme around them.
 `@plone/components` basic styles provide a simple, yet powerful, set of tokenized custom CSS properties that will help you customize your own styles on the top of the basic styling.
 You can override them in your classes while maintaining them for others.
 
+### CSS layers
+
+This package uses CSS layers to style the components in a more flexible way.
+It uses the `plone-components` layer name to scope all the CSS declarations in the package.
+The basic styling uses the nested `plone-components.base` named layer.
+You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way.
+
 ### Quanta
 
 This package also features the Quanta components.
-The Quanta theme is an example of it.
-These components use the basic styling as a baseline, not only in styling, but also in the component side, reusing the CSS and custom CSS properties in it.
+These components use the basic styling as a baseline, extending them to achieve the Quanta look and feel.
+They also extend the basic React components in a composable way.
+The Quanta styling is scoped in the `plone-components.quanta` named layer.
 
 Quanta is built upon the basic styles in an additive way.
 The use of the Quanta CSS implies using it upon basic styling.

packages/components/package.json

@@ -8,13 +8,13 @@
     }
   ],
   "license": "MIT",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "repository": {
     "type": "git",
-    "url": "http://github.com/plone/components.git"
+    "url": "http://github.com/plone/volto.git"
   },
   "bugs": {
-    "url": "https://github.com/plone/components/issues"
+    "url": "https://github.com/plone/volto/issues"
   },
   "type": "module",
   "files": [

packages/components/src/stories/Introduction.mdx

@@ -5,16 +5,17 @@ import { Meta } from '@storybook/blocks';
 
 # `@plone/components`
 
-This package contains ReactJS components for using Plone as a headless CMS.
+This package contains ReactJS components for Plone 7 and Plone's API-first CMS story.
 
 The purpose of this package is to provide an agnostic set of baseline components to build Plone sites upon.
 
 ## Usage
 
-Using the package manager of your choice (npm, yarn, pnpm) install the package:
+You can use your choice of package manager (npm, yarn, or pnpm) to install the package in your app.
+If you add the components to a Volto add-on or workspace, use pnpm, as shown.
 
 ```shell
-yarn add @plone/components
+pnpm add @plone/components
 ```
 
 Whenever you want to use the components, all are exported as named exports:
@@ -53,12 +54,19 @@ or selectively:
 import '@plone/components/src/styles/basic/TextField.css';
 ```
 
+### CSS layers
 
-## Quanta
+This package uses CSS layers to style the components in a more flexible way.
+It uses the `plone-components` layer name to scope all the CSS declarations in the package.
+The basic styling uses the nested `plone-components.base` named layer.
+You can use the `plone-components` layer to override the basic styling, or use the `plone-components.base` layer to override the basic styling in a more specific way.
+
+### Quanta
 
 This package also features the Quanta components.
-The Quanta theme is an example of it.
-These components use the basic styling as a baseline, not only in styling, but also in the component side, reusing the CSS and custom CSS properties in it.
+These components use the basic styling as a baseline, extending them to achieve the Quanta look and feel.
+They also extend the basic React components in a composable way.
+The Quanta styling is scoped in the `plone-components.quanta` named layer.
 
 Quanta is built upon the basic styles in an additive way.
 The use of the Quanta CSS implies using it upon basic styling.

packages/components/src/styles/basic/BlockToolbar.css

@@ -4,7 +4,7 @@
 @import './Menu.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .blocks-toolbar {
     display: flex;
     flex-wrap: wrap;

packages/components/src/styles/basic/Breadcrumbs.css

@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Breadcrumbs {
     display: flex;
     align-items: center;

packages/components/src/styles/basic/Button.css

@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Button {
     padding: 8px 8px;
     border: 1px solid var(--border-color);

packages/components/src/styles/basic/Calendar.css

@@ -1,7 +1,7 @@
 @import './Button.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Calendar {
     width: fit-content;
     max-width: 100%;

packages/components/src/styles/basic/Checkbox.css

@@ -1,6 +1,6 @@
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-Checkbox {
     --selected-color: var(--highlight-background);
     --selected-color-pressed: var(--highlight-background-pressed);

packages/components/src/styles/basic/CheckboxGroup.css

@@ -3,7 +3,7 @@
 @import './Button.css';
 @import './theme.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-CheckboxGroup {
     display: flex;
     flex-direction: column;

packages/components/src/styles/basic/ColorArea.css

@@ -1,6 +1,6 @@
 @import './ColorSlider.css';
 
-@layer plone-components {
+@layer plone-components.base {
   .react-aria-ColorArea {
     width: 192px;
     height: 192px;