@kitconcept/volto-light-theme 1.0.0-rc.1 → 1.0.0-rc.3

package/.github/workflows/deploy.yml

@@ -0,0 +1,99 @@
+name: Release and deploy
+on:
+  - push
+
+env:
+  ENVIRONMENT: "light-theme.kitconcept.io"
+  IMAGE_NAME: "ghcr.io/kitconcept/voltolighttheme-frontend"
+  VOLTO_VERSION: "17.0.0-alpha.16"
+
+jobs:
+  meta:
+    runs-on: ubuntu-latest
+    outputs:
+      ENVIRONMENT: ${{ steps.vars.outputs.ENVIRONMENT }}
+      STACK_NAME: ${{ steps.vars.outputs.STACK_NAME }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set Env Vars
+        id: vars
+        run: |
+          ENVIRONMENT=${{ env.ENVIRONMENT }}
+          echo "ENVIRONMENT=${ENVIRONMENT}" >> $GITHUB_OUTPUT
+          echo "STACK_NAME=${ENVIRONMENT//./-}" >> $GITHUB_OUTPUT
+
+  release:
+    runs-on: ubuntu-latest
+    needs:
+      - meta
+    steps:
+
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: |
+            ${{ env.IMAGE_NAME }}
+          labels: |
+            org.label-schema.docker.cmd=docker run -d -p 3000:3000 ${{ env.IMAGE_NAME }}
+          flavor: |
+            latest=false
+          tags: |
+            type=ref,event=branch
+            type=sha
+            type=raw,value=latest,enable={{is_default_branch}}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v3
+        with:
+          platforms: linux/amd64
+          context: ./
+          file: dockerfiles/Dockerfile
+          build-args: |
+            ADDON_NAME=@kitconcept/volto-light-theme
+            ADDON_PATH=volto-light-theme
+            VOLTO_VERSION=${{ env.VOLTO_VERSION }}
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: $${{ steps.meta.outputs.labels }}
+  deploy:
+    if: ${{ github.ref == 'refs/heads/main' }}
+    runs-on: ubuntu-latest
+    needs:
+      - meta
+      - release
+    environment: ${{ needs.meta.outputs.ENVIRONMENT }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Deploy to cluster
+        uses: kitconcept/docker-stack-deploy@v1.2.0
+        with:
+          registry: "ghcr.io"
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+          remote_host: ${{ secrets.DEPLOY_HOST }}
+          remote_port: ${{ secrets.DEPLOY_PORT }}
+          remote_user: ${{ secrets.DEPLOY_USER }}
+          remote_private_key: ${{ secrets.DEPLOY_SSH }}
+          stack_file: devops/stacks/${{ needs.meta.outputs.ENVIRONMENT }}.yml
+          stack_name: ${{ needs.meta.outputs.STACK_NAME }}
+          stack_param: ${{ github.ref_name }}
+          env_file: ${{ secrets.ENV_FILE }}
+          deploy_timeout: 480

package/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.overrides",
+      "options": {
+        "parser": "less"
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -8,6 +8,29 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-rc.3 (2023-07-10)
+
+### Breaking
+
+- Remove `@kitconcept/volto-blocks-grid` dependency @sneridagh [#131](https://github.com/kitconcept/volto-light-theme/pull/131)
+
+### Bugfix
+
+- Fix minor style bugs for Listing block @danalvrz [#130](https://github.com/kitconcept/volto-light-theme/pull/130)
+
+### Internal
+
+- Create deploy to https://light-theme.kitconcept.io [@ericof] [#72](https://github.com/kitconcept/volto-light-theme/pull/72)
+
+
+## 1.0.0-rc.2 (2023-07-07)
+
+### Bugfix
+
+- Add NewsItemView @iFlamieng [#127](https://github.com/kitconcept/volto-light-theme/pull/127)
+- Add support for margins in responsive. Improve the spacing in grids. @sneridagh [#129](https://github.com/kitconcept/volto-light-theme/pull/129)
+
+
 ## 1.0.0-rc.1 (2023-07-05)
 
 ### Bugfix

package/Makefile

@@ -26,36 +26,43 @@ VOLTO_VERSION=17.0.0-alpha.16
 
 ADDON_NAME='@kitconcept/volto-light-theme'
 ADDON_PATH='volto-light-theme'
-DEV_COMPOSE=dockerfiles/docker-compose.yml
+COMPOSE_FILE=dockerfiles/docker-compose.yml
 ACCEPTANCE_COMPOSE=acceptance/docker-compose.yml
 CMD=CURRENT_DIR=${CURRENT_DIR} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} VOLTO_VERSION=${VOLTO_VERSION} PLONE_VERSION=${PLONE_VERSION} docker compose
-DOCKER_COMPOSE=${CMD} -p ${ADDON_PATH} -f ${DEV_COMPOSE}
+DOCKER_COMPOSE=${CMD} -p ${ADDON_PATH} -f ${COMPOSE_FILE}
+DEV_COMPOSE=COMPOSE_PROFILES=dev ${DOCKER_COMPOSE}
+LIVE_COMPOSE=COMPOSE_PROFILES=dev ${DOCKER_COMPOSE}
 ACCEPTANCE=${CMD} -p ${ADDON_PATH}-acceptance -f ${ACCEPTANCE_COMPOSE}
 
 .PHONY: build-backend
 build-backend: ## Build
 	@echo "$(GREEN)==> Build Backend Container $(RESET)"
-	${DOCKER_COMPOSE} build backend
+	${DEV_COMPOSE} build backend
 
 .PHONY: start-backend
 start-backend: ## Starts Docker backend
 	@echo "$(GREEN)==> Start Docker-based Plone Backend $(RESET)"
-	${DOCKER_COMPOSE} up backend -d
+	${DEV_COMPOSE} up backend -d
 
 .PHONY: stop-backend
 stop-backend: ## Stop Docker backend
 	@echo "$(GREEN)==> Stop Docker-based Plone Backend $(RESET)"
-	${DOCKER_COMPOSE} stop backend
+	${DEV_COMPOSE} stop backend
+
+.PHONY: build-live
+build-live: ## Build Addon live
+	@echo "$(GREEN)==> Build Addon development container $(RESET)"
+	${LIVE_COMPOSE} build addon-live
 
 .PHONY: build-addon
 build-addon: ## Build Addon dev
 	@echo "$(GREEN)==> Build Addon development container $(RESET)"
-	${DOCKER_COMPOSE} build addon-dev
+	${DEV_COMPOSE} build addon-dev
 
 .PHONY: start-dev
 start-dev: ## Starts Dev container
 	@echo "$(GREEN)==> Start Addon Development container $(RESET)"
-	${DOCKER_COMPOSE} up addon-dev
+	${DEV_COMPOSE} up addon-dev
 
 .PHONY: dev
 dev: ## Develop the addon
@@ -72,27 +79,27 @@ help:		## Show this help.
 # Dev Helpers
 .PHONY: i18n
 i18n: ## Sync i18n
-	${DOCKER_COMPOSE} run addon-dev i18n
+	${DEV_COMPOSE} run addon-dev i18n
 
 .PHONY: format
 format: ## Format codebase
-	${DOCKER_COMPOSE} run addon-dev lint:fix
-	${DOCKER_COMPOSE} run addon-dev prettier:fix
-	${DOCKER_COMPOSE} run addon-dev stylelint:fix
+	${DEV_COMPOSE} run addon-dev lint:fix
+	${DEV_COMPOSE} run addon-dev prettier:fix
+	${DEV_COMPOSE} run addon-dev stylelint:fix
 
 .PHONY: lint
 lint: ## Lint Codebase
-	${DOCKER_COMPOSE} run addon-dev lint
-	${DOCKER_COMPOSE} run addon-dev prettier
-	${DOCKER_COMPOSE} run addon-dev stylelint --allow-empty-input
+	${DEV_COMPOSE} run addon-dev lint
+	${DEV_COMPOSE} run addon-dev prettier
+	${DEV_COMPOSE} run addon-dev stylelint --allow-empty-input
 
 .PHONY: test
 test: ## Run unit tests
-	${DOCKER_COMPOSE} run addon-dev test --watchAll
+	${DEV_COMPOSE} run addon-dev test --watchAll
 
 .PHONY: test-ci
 test-ci: ## Run unit tests in CI
-	${DOCKER_COMPOSE} run -e CI=1 addon-dev test
+	${DEV_COMPOSE} run -e CI=1 addon-dev test
 
 ## Acceptance
 .PHONY: install-acceptance
@@ -126,4 +133,4 @@ status-test-acceptance-server: ## Status of Acceptance Server
 
 .PHONY: debug-frontend
 debug-frontend:  ## Run bash in the Frontend container
-	${DOCKER_COMPOSE} run --entrypoint bash addon-dev
+	${DEV_COMPOSE} run --entrypoint bash addon-dev

package/devops/stacks/light-theme.kitconcept.io.yml

@@ -0,0 +1,66 @@
+version: '3.3'
+
+services:
+
+  frontend:
+    image: ghcr.io/kitconcept/voltolighttheme-frontend:${STACK_PARAM:-latest}
+    environment:
+      RAZZLE_INTERNAL_API_PATH: http://light-theme-kitconcept-io_backend:8080/Plone
+    depends_on:
+      - backend
+    networks:
+      - public
+    healthcheck:
+      disable: true
+    deploy:
+      replicas: 2
+      placement:
+        constraints:
+          - node.labels.type == app
+          - node.labels.env == staging
+      labels:
+        - traefik.enable=true
+        - traefik.docker.network=public
+        - traefik.constraint-label=public
+        # Service
+        - traefik.http.services.svc-lighttheme-stg-front.loadbalancer.server.port=3000
+        # Middlewares
+        # Routers
+        ## light-theme.kitconcept.io
+        - traefik.http.routers.rt-lighttheme-stg-front.rule=Host(`light-theme.kitconcept.io`)
+        - traefik.http.routers.rt-lighttheme-stg-front.entrypoints=https
+        - traefik.http.routers.rt-lighttheme-stg-front.tls=true
+        - traefik.http.routers.rt-lighttheme-stg-front.tls.certresolver=le
+        - traefik.http.routers.rt-lighttheme-stg-front.service=svc-lighttheme-stg-front
+        - traefik.http.routers.rt-lighttheme-stg-front.middlewares=gzip
+
+  backend:
+    image: ghcr.io/kitconcept/voltolighttheme:latest
+    networks:
+      - public
+    deploy:
+      replicas: 1
+      placement:
+        constraints:
+          - node.labels.type == app
+          - node.labels.env == staging
+      labels:
+        - traefik.enable=true
+        - traefik.docker.network=public
+        - traefik.constraint-label=public
+        # Service
+        - traefik.http.services.svc-lighttheme-stg-backend.loadbalancer.server.port=8080
+        # Middleware
+        - "traefik.http.middlewares.mw-lighttheme-stg-backend-vhm.replacepathregex.regex=^/\\+\\+api\\+\\+($$|/.*)"
+        - "traefik.http.middlewares.mw-lighttheme-stg-backend-vhm.replacepathregex.replacement=/VirtualHostBase/https/light-theme.kitconcept.io/Plone/++api++/VirtualHostRoot/$$1"
+        # Router ++api++
+        - traefik.http.routers.rt-lighttheme-stg-backend.rule=Host(`light-theme.kitconcept.io`) && (PathPrefix(`/++api++`))
+        - traefik.http.routers.rt-lighttheme-stg-backend.entrypoints=https
+        - traefik.http.routers.rt-lighttheme-stg-backend.tls=true
+        - traefik.http.routers.rt-lighttheme-stg-backend.service=svc-lighttheme-stg-backend
+        - traefik.http.routers.rt-lighttheme-stg-backend.middlewares=gzip,mw-lighttheme-stg-backend-vhm
+
+networks:
+  public:
+    external: true
+    driver: overlay

package/dockerfiles/Dockerfile

@@ -5,9 +5,17 @@ FROM plone/frontend-builder:${VOLTO_VERSION} as builder
 ARG ADDON_NAME
 ARG ADDON_PATH
 
+ENV THEME='@kitconcept/volto-light-theme'
+
+# Copy helper.py as /setupAddon
+COPY dockerfiles/helper.py /setupAddon
+
+# Copy addon code
 COPY --chown=node:node ./ /app/src/addons/${ADDON_PATH}/
 
+# Install
 RUN <<EOT
+    set -e
     /setupAddon
     yarn install --network-timeout 1000000
     yarn build
@@ -16,9 +24,9 @@ EOT
 
 FROM plone/frontend-prod-config:${VOLTO_VERSION}
 
-LABEL maintainer="Plone Community <dev@plone.org>" \
-      org.label-schema.name="volto-social-blocks" \
-      org.label-schema.description="Plone frontend image" \
-      org.label-schema.vendor="Plone Foundation"
+LABEL maintainer="kitconcept GmbH <contact@kitconcept.com>" \
+      org.label-schema.name="ghcr.io/kitconcept/lighttheme" \
+      org.label-schema.description="Volto project with @kitconcept/volto-light-theme" \
+      org.label-schema.vendor="kitconcept GmbH"
 
 COPY --from=builder /app/ /app/

package/dockerfiles/Dockerfile.dev

@@ -5,6 +5,9 @@ FROM plone/frontend-dev:${VOLTO_VERSION}
 ARG ADDON_NAME
 ARG ADDON_PATH
 
+# Copy helper.py as /setupAddon
+COPY dockerfiles/helper.py /setupAddon
+
 # Copy linter / prettier configs
 COPY --chown=node:node .eslintignore* .prettierignore* /app/
 
@@ -15,6 +18,7 @@ COPY --chown=node:node volto.config.js* /app/
 COPY --chown=node:node package.json /app/src/addons/${ADDON_PATH}/
 
 RUN <<EOT
+    set -e
     /setupAddon
     yarn install --network-timeout 1000000
 EOT

package/dockerfiles/docker-compose.yml

@@ -9,7 +9,7 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+        VOLTO_VERSION: "${VOLTO_VERSION:-16}"
     volumes:
       - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
     environment:
@@ -22,11 +22,25 @@ services:
     profiles:
       - dev
 
-  backend:
-    image: plone/plone-backend:${PLONE_VERSION:-6}
+  addon-live:
+    build:
+      context: ../
+      dockerfile: ./dockerfiles/Dockerfile
+      args:
+        ADDON_NAME: "${ADDON_NAME}"
+        ADDON_PATH: "${ADDON_PATH}"
+        VOLTO_VERSION: "${VOLTO_VERSION:-16}"
     environment:
-      SITE: Plone
-      CORS_ALLOW_ORIGIN: '*'
+      RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
+      RAZZLE_API_PATH: http://localhost:8080/Plone
+    ports:
+      - 3000:3000
+    tty: true
+    profiles:
+      - live
+
+  backend:
+    image: ghcr.io/kitconcept/voltolighttheme:latest
     ports:
       - 8080:8080
     profiles:

package/dockerfiles/helper.py

@@ -0,0 +1,120 @@
+#!/usr/bin/python3
+"""Addon support for Volto."""
+from pathlib import Path
+from typing import Tuple
+
+import json
+import logging
+import os
+
+
+logger = logging.getLogger("Volto Helper")
+
+
+APP_FOLDER = Path("/app").resolve()
+PACKAGE_JSON_PATH = (APP_FOLDER / "package.json").resolve()
+JSCONFIG_PATH = (APP_FOLDER / "jsconfig.json").resolve()
+VOLTOCONFIGPATH = (APP_FOLDER / "volto.config.js").resolve()
+
+
+ADDON_NAME = os.environ.get("ADDON_NAME", "")
+ADDITIONAL_ADDONS = os.environ.get("ADDITIONAL_ADDONS", "")
+
+
+def add_packages_to_package_json(config: dict, packages: dict) -> dict:
+    """Add addons to the main `package.json`."""
+    addons = config.get("addons", [])
+    workspaces = config.get("workspaces", [])
+    for pkg_name, pkg_path in packages.items():
+        if not VOLTOCONFIGPATH.exists():
+            addons.append(pkg_name)
+        workspace_path = pkg_path.replace("/src", "")
+        workspaces.append(f"src/{workspace_path}")
+    config["addons"] = addons
+    config["workspaces"] = workspaces
+    return config
+
+
+def parse_jsonconfig(config: dict) -> dict:
+    """Parse existing `jsconfig.json`."""
+    packages = {}
+    config_paths = config.get("compilerOptions", {}).get("paths", {})
+    for pkg_name, pkg_path in config_paths.items():
+        if isinstance(pkg_path, list):
+            packages[pkg_name] = pkg_path[0]
+    return packages
+
+
+def parse_addon_name(addon_name: str) -> Tuple[str, str]:
+    """Parse the addon name and return also its probable path."""
+    if addon_name.startswith("@"):
+        _, path = addon_name.split("/")
+        return addon_name, path
+    return addon_name, addon_name
+
+
+def addon_to_package_json(config: dict, addon_name: str, addon_path: str) -> dict:
+    """Add a single addon to main `package.json`."""
+    project_addons = config["addons"]
+    project_dependencies = config["dependencies"]
+    # Process package.json for the addon
+    workspace_path = f"src/addons/{addon_path}"
+    addon_path = (APP_FOLDER / workspace_path).resolve()
+    addon_config = json.load(open(addon_path / "package.json"))
+    # Process peerDependencies
+    peer_dependencies = addon_config.get("peerDependencies", {})
+    for dependency_name, version in peer_dependencies.items():
+        if dependency_name in project_dependencies:
+            continue
+        project_dependencies[dependency_name] = version
+    # Process peerAddons
+    peer_addons = addon_config.get("peerAddons", [])
+    for name in peer_addons:
+        if name in project_addons:
+            continue
+        project_addons.append(name)
+    # Add our addon to addons and to workspaces
+    project_addons.append(addon_name)
+    workspaces = config.get("workspaces", [])
+    workspaces.append(workspace_path)
+
+    config["addons"] = project_addons
+    config["dependencies"] = project_dependencies
+    config["workspaces"] = workspaces
+    return config
+
+
+def addon_to_jsconfig_json(config: dict, addon_name: str, addon_path: str) -> dict:
+    """Add a single addon to `jsconfig.json`."""
+    if "compilerOptions" not in config:
+        config["compilerOptions"] = {}
+    if "paths" not in config:
+        config["compilerOptions"]["paths"] = {}
+
+    config["compilerOptions"]["paths"][addon_name] = [f"addons/{addon_path}/src"]
+    return config
+
+
+if ADDON_NAME:
+    logger.info("Processing the ADDON_NAME variable.")
+    SETTINGS = (
+        (addon_to_package_json, PACKAGE_JSON_PATH),
+        (addon_to_jsconfig_json, JSCONFIG_PATH),
+    )
+    addon_name, addon_path = parse_addon_name(ADDON_NAME)
+    for func, path in SETTINGS:
+        data = func(json.load(open(path)), addon_name=addon_name, addon_path=addon_path)
+        json.dump(data, open(path, "w"), indent=2)
+else:
+    packages = {}
+    if JSCONFIG_PATH.exists():
+        packages = parse_jsonconfig(json.load(open(JSCONFIG_PATH)))
+
+    if not packages:
+        logger.warning("Existing jsconfig.json does not contain packages.")
+    else:
+        logger.info("Processing existing jsconfig.json.")
+        package_json = json.load(open(PACKAGE_JSON_PATH))
+        # Process package_json
+        package_json = add_packages_to_package_json(package_json, packages)
+        json.dump(package_json, open(PACKAGE_JSON_PATH, "w"), indent=2)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.3",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {
@@ -36,11 +36,21 @@
     "postcss-scss": "4.0.6",
     "prettier": "2.0.5",
     "razzle-plugin-scss": "4.2.18",
-    "release-it": "15.11.0",
+    "release-it": "^16.1.0",
     "stylelint-config-prettier": "9.0.4",
     "stylelint-config-sass-guidelines": "9.0.1",
     "stylelint-prettier": "1.1.2"
   },
+  "peerAddons": [
+    "@eeacms/volto-accordion-block",
+    "@kitconcept/volto-button-block",
+    "@kitconcept/volto-dsgvo-banner",
+    "@kitconcept/volto-heading-block",
+    "@kitconcept/volto-image-block",
+    "@kitconcept/volto-introduction-block",
+    "@kitconcept/volto-separator-block",
+    "@kitconcept/volto-slider-block"
+  ],
   "peerDependencies": {
     "@eeacms/volto-accordion-block": "^9.0.0",
     "@kitconcept/volto-button-block": "^2.1.0",

package/src/components/Blocks/Button/schema.js

@@ -2,9 +2,9 @@ import { defineMessages } from 'react-intl';
 import { defaultStylingSchema } from '../schema';
 
 const messages = defineMessages({
-  Align: {
-    id: 'Alignment',
-    defaultMessage: 'Alignment',
+  BlockWidth: {
+    id: 'Block Width',
+    defaultMessage: 'Block Width',
   },
 });
 
@@ -18,7 +18,7 @@ export const ButtonStylingSchema = ({ schema, formData, intl }) => {
 
   schema.properties.styles.schema.properties.buttonAlign = {
     widget: 'align',
-    title: intl.formatMessage(messages.Align),
+    title: intl.formatMessage(messages.BlockWidth),
     actions: ['center', 'wide'],
   };
 

package/src/components/Blocks/Teaser/schema.js

@@ -3,3 +3,8 @@ export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
 
   return schema;
 };
+
+export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
+  return schema;
+};

package/src/customizations/volto/components/theme/View/NewsItemView.jsx

@@ -0,0 +1,57 @@
+/**
+ * OVERRIDE NewsItemView.jsx
+ * REASON: BFS theme
+ * DATE: 2023-07-04
+ * DEVELOPER: @IFlameing
+ */
+
+/**
+ * NewsItemView view component.
+ * @module components/theme/View/NewsItemView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import { FormattedDate } from '@plone/volto/components';
+
+/**
+ * NewsItemView view component class.
+ * @function NewsItemView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const NewsItemView = ({ content }) => {
+  return (
+    <div id="page-document" className="ui container viewwrapper event-view">
+      <div className="dates">
+        {content?.effective ? (
+          <span className="day">
+            <FormattedDate date={content?.effective} />{' '}
+          </span>
+        ) : (
+          <span className="day">No date</span>
+        )}{' '}
+        <span className="headtitle">| {content?.head_title}</span>
+      </div>
+      <RenderBlocks content={content} />
+    </div>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+NewsItemView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    text: PropTypes.shape({
+      data: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default NewsItemView;

package/src/index.js

@@ -3,8 +3,7 @@ import { defineMessages } from 'react-intl';
 import { composeSchema, getPreviousNextBlock } from '@plone/volto/helpers';
 import { defaultStylingSchema } from './components/Blocks/schema';
 import { teaserSchemaEnhancer } from './components/Blocks/Teaser/schema';
-// eslint-disable-next-line import/no-unresolved
-import { gridTeaserDisableStylingSchema } from '@kitconcept/volto-blocks-grid/components/Teaser/schema';
+import { gridTeaserDisableStylingSchema } from '@plone/volto/components/manage/Blocks/Teaser/schema';
 
 import ContainerQueriesPolyfill from './components/CQPolyfill';
 import Container from './components/Atoms/Container/Container';
@@ -88,6 +87,11 @@ const applyConfig = (config) => {
         styles.push('is--last--of--block-type');
       }
 
+      // Inject a class depending if it has a headline
+      if (data?.headline || previousBlock?.['@type'] === 'heading') {
+        styles.push('has--headline');
+      }
+
       // Given a StyleWrapper defined `backgroundColor` style
       const previousColor =
         previousBlock?.styles?.backgroundColor ?? 'transparent';

package/src/theme/_bgcolor-blocks-layout.scss

@@ -31,7 +31,9 @@
     margin-bottom: $grid-block-vertical-spacing-bottom;
   }
   &.next--is--same--block-type.next--has--same--backgroundColor {
-    margin-bottom: -1rem;
+    // We rely on the grid gutter to keep the vertical spacing in case grid + grid
+    // So here we cancel the default block margin-bottom
+    margin-bottom: 0;
   }
 }
 

package/src/theme/_content.scss

@@ -5,3 +5,28 @@
   padding: 0;
   margin-top: 0;
 }
+
+.contenttype-news-item {
+  .documentFirstHeading {
+    margin-top: 0px;
+  }
+  .blocks-group-wrapper {
+    padding-top: 0px;
+  }
+  .dates {
+    max-width: var(--default-container-width) !important;
+    margin-top: 40px;
+    margin-right: auto;
+    margin-bottom: 40px;
+    margin-left: auto;
+    .day,
+    .headtitle {
+      font-size: 18px;
+
+      font-weight: 700;
+      letter-spacing: 1px;
+      line-height: 24px;
+      text-transform: uppercase;
+    }
+  }
+}

package/src/theme/_layout.scss

@@ -4,12 +4,12 @@
   --narrow-container-width: 620px;
 }
 
-// Container queries still do not work with CSS properties
+// Container queries still do not work with CSS custom properties
 // They should be exact numbers
 // For now, maintain in sync with the above
-$layout-container-width: 1440px;
-$default-container-width: 940px;
-$narrow-container-width: 620px;
+$layout-container-width: 1440px !default;
+$default-container-width: 940px !default;
+$narrow-container-width: 620px !default;
 
 @mixin narrow-container-width() {
   max-width: var(--narrow-container-width);
@@ -21,6 +21,13 @@ $narrow-container-width: 620px;
   max-width: var(--default-container-width);
   margin-right: auto;
   margin-left: auto;
+
+  // This is mostly aesthetical if you don't want to "see" the jump
+  // but a nice animation instead - PoC (WIP)
+  // @media only screen and (max-width: #{$default-container-width + 5px}) {
+  //   margin-right: 5px;
+  //   margin-left: 5px;
+  // }
 }
 
 @mixin layout-container-width() {
@@ -29,11 +36,24 @@ $narrow-container-width: 620px;
   margin-left: auto;
 }
 
-// One still cannot use variables or CSS properties directly on @container queries
+// One still cannot use CSS custom properties directly on @container queries
 @mixin adjustMarginsToContainer($width) {
+  // Next two ones are mostly aesthetical if you don't want to "see" the jump - PoC (WIP)
+  // transition: margin 1s ease;
+
+  // @container (max-width: #{$width + 5px}) {
+  //   margin-right: 5px;
+  //   margin-left: 5px;
+  // }
+
+  // @container (max-width: #{$width}) {
+  //   margin-right: 0px;
+  //   margin-left: 0px;
+  // }
+
   @container (max-width: #{$width - 1}) {
-    margin-right: 2rem;
-    margin-left: 2rem;
+    margin-right: 20px;
+    margin-left: 20px;
   }
 }
 
@@ -127,7 +147,9 @@ footer {
   & > pre,
   & > .block.code {
     @include narrow-container-width();
-    @include adjustMarginsToContainer($narrow-container-width + 2 * 36px);
+    // Why was this for? Removing for now (Victor: 2023-07-06)
+    // @include adjustMarginsToContainer($narrow-container-width + 2 * 36px);
+    @include adjustMarginsToContainer($narrow-container-width);
   }
 
   & > h1.documentFirstHeading,
@@ -146,6 +168,7 @@ footer {
   & > .table-of-contents,
   & > .slate blockquote {
     @include default-container-width();
+    @include adjustMarginsToContainer($default-container-width);
   }
 
   & > .block.teaser,
@@ -234,7 +257,18 @@ footer {
 .block.gridBlock .grid-items,
 .block.gridBlock h2.headline {
   @include default-container-width();
-  max-width: calc(var(--default-container-width) + 1rem);
+  // Adding 2 * 20px (one for each side) we force the container to extend the value of
+  // the gutter
+  max-width: calc(var(--default-container-width) + 2 * 20px);
+}
+
+.block.gridBlock {
+  .ui.grid > .column:not(.row):first-child {
+    padding-left: 20px;
+  }
+  .ui.grid > .column:not(.row):last-child {
+    padding-right: 20px;
+  }
 }
 
 // Fix for Image Grid with only one image
@@ -252,6 +286,11 @@ body.has-toolbar.has-sidebar .block .ui.basic.button.delete-button {
   margin-right: -30px !important;
 }
 
+// Listings edge case, conflicting with Pastanaga CSS
+.listing-item {
+  width: initial;
+}
+
 #page-add,
 #page-edit {
   .block-editor-accordion {

package/src/theme/_variables.scss

@@ -107,7 +107,7 @@ $block-vertical-space: 25px !default;
 }
 
 @mixin vertical-space-button() {
-  margin-top: 40px;
+  margin-top: 80px;
   margin-bottom: 80px;
 }
 

package/src/theme/blocks/_button.scss

@@ -5,6 +5,12 @@
     @include vertical-space-button();
   }
 
+  p + & {
+    .button.container {
+      margin-top: 60px;
+    }
+  }
+
   button {
     margin: 0;
   }

package/src/theme/blocks/_listing.scss

@@ -1,111 +1,184 @@
 // Listing Block
-.block.listing.default {
-  .headline {
-    @include block-title();
+.block.listing {
+  &.next--has--same--backgroundColor.next--is--same--block-type,
+  &.next--is--__button {
+    .listing-item:last-child {
+      padding-bottom: 40px !important;
+      border-bottom: 1px solid $black !important;
+    }
   }
+
   .listing-item {
-    padding-bottom: 40px;
+    padding-bottom: 40px !important;
     border-bottom: 1px solid $black;
     margin-bottom: 40px;
 
-    a {
-      .listing-body {
-        h2 {
-          color: $black;
-          @include text-heading-h2();
-        }
-        p {
-          margin-bottom: 0;
-          @include body-text();
-        }
-        p:empty {
-          display: none;
-        }
-      }
+    &:last-child:not(> .column) {
+      padding-bottom: 0 !important;
+      border-bottom: none !important;
+      margin-bottom: 0;
     }
   }
-}
 
-.block.listing.summary {
-  .listing-item {
-    padding-top: 0 !important;
-    padding-bottom: 40px !important;
-    margin-bottom: 40px;
-    img {
-      width: 25%;
-      height: min-content;
-      aspect-ratio: $aspect-ratio;
+  // Default variation
+  &.default {
+    .headline {
+      @include block-title();
     }
-    h3 {
-      margin-bottom: 40px;
-      color: $black;
-      @include text-heading-h2();
+
+    .listing-item {
+      a {
+        .listing-body {
+          h2 {
+            color: $black;
+            @include text-heading-h2();
+          }
+          p {
+            margin-bottom: 0;
+            @include body-text();
+          }
+          p:empty {
+            display: none;
+          }
+        }
+      }
     }
   }
-}
 
-// Grid Listing Block
-.block.listing.grid {
-  .items {
-    display: flex;
-    flex-wrap: wrap;
-    @media only screen and (max-width: $tablet-breakpoint) {
-      flex-direction: column;
+  // Summary variation
+  &.summary {
+    &.next--has--same--backgroundColor {
+      .listing-item:last-child {
+        padding-bottom: 40px;
+        border-bottom: 1px solid $black !important;
+      }
+    }
+    .listing-item {
+      padding-top: 0 !important;
+
+      img {
+        width: 25%;
+        height: min-content;
+        aspect-ratio: $aspect-ratio;
+      }
+      h3 {
+        margin-bottom: 40px;
+        color: $black;
+        @include text-heading-h2();
+      }
     }
   }
-  .headline {
-    @include block-title();
-  }
-  .listing-item {
-    @media only screen and (min-width: $tablet-breakpoint) {
-      width: 50%;
+
+  // Grid variation
+  &.grid {
+    &.next--has--same--backgroundColor.next--is--same--block-type,
+    &.next--is--__button {
+      .listing-item:last-child {
+        padding-bottom: 0 !important;
+        border-bottom: none !important;
+      }
     }
-    margin-bottom: 0;
 
-    .card-container {
-      width: 100%;
-      margin: 0.5rem;
+    .items {
+      display: flex;
+      flex-wrap: wrap;
       @media only screen and (max-width: $tablet-breakpoint) {
-        margin-left: 0;
+        flex-direction: column;
       }
-      background-color: $lightgrey;
     }
-
-    img.grid-item-image {
-      width: 100%;
-      aspect-ratio: $aspect-ratio;
+    .headline {
+      @include block-title();
     }
+    .listing-item {
+      @media only screen and (min-width: $tablet-breakpoint) {
+        width: 50%;
 
-    .grid-item {
-      margin-top: 40px;
-    }
+        &:nth-child(2n) {
+          .card-container {
+            margin-left: 0.5rem;
+          }
+        }
 
-    .content {
-      padding: 0 20px 40px 20px;
+        &:nth-child(2n + 1) {
+          .card-container {
+            margin-right: 0.5rem;
+          }
+        }
 
-      .headline {
-        padding: 0 !important;
-        margin-bottom: 20px;
-        color: $black;
-        letter-spacing: 1px;
-        text-transform: uppercase;
-        @include headtitle1();
+        &:last-child,
+        &:nth-last-child(2):not(:nth-child(2n)) {
+          .card-container {
+            margin-bottom: 0 !important;
+          }
+        }
+
+        &:first-child,
+        &:nth-child(2) {
+          .card-container {
+            margin-top: 0 !important;
+          }
+        }
       }
 
-      h2 {
-        margin: 0 0 20px 0;
-        color: $black;
-        @include text-heading-h3();
+      padding-bottom: 0 !important;
+      border-bottom: none !important;
+      margin-bottom: 0 !important;
+
+      &:last-child:nth-child(2n + 1) {
+        margin-left: 0 !important;
       }
-      p {
-        margin-bottom: 0;
-        @include body-text();
+
+      .card-container {
+        width: 100%;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+        background-color: $lightgrey;
+        @media only screen and (max-width: $tablet-breakpoint) {
+          margin-left: 0;
+        }
       }
-      p:empty {
-        display: none;
+
+      img.grid-item-image {
+        width: 100%;
+        margin: 0;
+        aspect-ratio: $aspect-ratio;
+      }
+
+      .grid-item {
+        margin-top: 40px;
+      }
+
+      .content {
+        padding: 0 20px 40px 20px;
+
+        .headline {
+          padding: 0 !important;
+          margin-bottom: 20px;
+          color: $black;
+          letter-spacing: 1px;
+          text-transform: uppercase;
+          @include headtitle1();
+        }
+
+        h2 {
+          margin: 0 0 20px 0;
+          color: $black;
+          @include text-heading-h3();
+        }
+        p {
+          margin-bottom: 0;
+          @include body-text();
+        }
+        p:empty {
+          display: none;
+        }
       }
     }
   }
+
+  &.previous--is--same--block-type.previous--has--same--backgroundColor:not(.has--headline) {
+    margin-top: 200px;
+  }
 }
 
 #page-add .block-editor-listing.has--backgroundColor--grey,

package/src/theme/collections/grid.variables

@@ -1,2 +1,7 @@
 // We want the separation between cells in grids to be 1rem only
-@gutterWidth: 1rem;
+@gutterWidth: 20px;
+@rowSpacing: 20px;
+
+// This has to be 2 * 20px because it's going to be 1/2 in the source.
+@stackableGutter: 2 * 20px;
+