@eeacms/volto-eea-website-policy 0.3.0 → 0.3.3

package/CHANGELOG.md

@@ -4,92 +4,89 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [0.3.0](https://github.com/eea/volto-eea-website-policy/compare/0.2.6...0.3.0)
+### [0.3.3](https://github.com/eea/volto-eea-website-policy/compare/0.3.2...0.3.3) - 5 September 2022
 
-- change(package): bump release version [`1b00439`](https://github.com/eea/volto-eea-website-policy/commit/1b0043933442bb73c1042dce644a2c09e5f210f4)
-- change(item): enable theming for icon and text color and added tertiary option [`58c2d28`](https://github.com/eea/volto-eea-website-policy/commit/58c2d2864fe94c9e7808064b61d3b6c4e6fccbb1)
-- change(item): commented sizes too small for item icons and enabled tertiary theme [`0f02d7d`](https://github.com/eea/volto-eea-website-policy/commit/0f02d7d6204b068b78c3f977a561782a19b6f79e)
+#### :hammer_and_wrench: Others
 
-#### [0.2.6](https://github.com/eea/volto-eea-website-policy/compare/0.2.5...0.2.6)
+- override(ContentTypeLayout): Enable volto.blocks.editable.layout - refs #153858 [Alin Voinea - [`a07d3f5`](https://github.com/eea/volto-eea-website-policy/commit/a07d3f5f175925fdcd600e3c99620b4c0f42cb69)]
+- override(ContentTypeLayout) - from @plone/volto 16 alpha 12 [Alin Voinea - [`777068d`](https://github.com/eea/volto-eea-website-policy/commit/777068d4b41d4c94863e2c34ea274f150ead7875)]
+### [0.3.2](https://github.com/eea/volto-eea-website-policy/compare/0.3.1...0.3.2) - 10 August 2022
 
-> 1 July 2022
+#### :hammer_and_wrench: Others
 
-- Fix Cannot read properties of undefined (reading 'translations') [`8e7b8b8`](https://github.com/eea/volto-eea-website-policy/commit/8e7b8b8533b14f173d77783fe2d0b517c29c5937)
-- Customize Toolbar.jsx - copied unchanged from @plone/volto 16.0.0.alpha.11 [`b7add4f`](https://github.com/eea/volto-eea-website-policy/commit/b7add4faa8ef2dde7d77489fc8bc431cbb023314)
+- Safely get data - refs #153018 [Alin Voinea - [`aefc689`](https://github.com/eea/volto-eea-website-policy/commit/aefc68979f6aad86ea02952f82e639dfe8c566f2)]
+- Customize Blocks helper - copy unchanged from @plone/volto 16.alpha.12 [Alin Voinea - [`368ffa8`](https://github.com/eea/volto-eea-website-policy/commit/368ffa8c9ebfc54d364d7bf13b60f4016f1c90e8)]
+### [0.3.1](https://github.com/eea/volto-eea-website-policy/compare/0.3.0...0.3.1) - 1 August 2022
 
-#### [0.2.5](https://github.com/eea/volto-eea-website-policy/compare/0.2.4...0.2.5)
+### [0.3.0](https://github.com/eea/volto-eea-website-policy/compare/0.2.6...0.3.0) - 6 July 2022
 
-> 23 June 2022
+#### :nail_care: Enhancements
 
-- Rounded Card variation and disable ImageCards block [`#11`](https://github.com/eea/volto-eea-website-policy/pull/11)
-- Rounded card via style wrapper [`6728684`](https://github.com/eea/volto-eea-website-policy/commit/67286844b00902aa4c6b316b50be35db95c531f0)
-- Revert "Rounded Card variation - refs #148723" [`0168a86`](https://github.com/eea/volto-eea-website-policy/commit/0168a86fa644a9b848e37c7f5054eb4308c36784)
-- Disable Image Cards block [`3ed8dc3`](https://github.com/eea/volto-eea-website-policy/commit/3ed8dc311cad8e30a8c918ecec7b21cc99260c50)
-- Rounded Card variation - refs #148723 [`4b46731`](https://github.com/eea/volto-eea-website-policy/commit/4b46731e25962bbb6e7159d0db8a9a642a95eb53)
+- change(package): bump release version [David Ichim - [`1b00439`](https://github.com/eea/volto-eea-website-policy/commit/1b0043933442bb73c1042dce644a2c09e5f210f4)]
+- change(item): enable theming for icon and text color and added tertiary option [David Ichim - [`58c2d28`](https://github.com/eea/volto-eea-website-policy/commit/58c2d2864fe94c9e7808064b61d3b6c4e6fccbb1)]
+- change(item): commented sizes too small for item icons and enabled tertiary theme [David Ichim - [`0f02d7d`](https://github.com/eea/volto-eea-website-policy/commit/0f02d7d6204b068b78c3f977a561782a19b6f79e)]
 
-#### [0.2.4](https://github.com/eea/volto-eea-website-policy/compare/0.2.3...0.2.4)
+### [0.2.6](https://github.com/eea/volto-eea-website-policy/compare/0.2.5...0.2.6) - 1 July 2022
 
-> 13 June 2022
+#### :hammer_and_wrench: Others
 
-- Release [`#10`](https://github.com/eea/volto-eea-website-policy/pull/10)
-- Fix listing block title: Listing (Content) [`cec2760`](https://github.com/eea/volto-eea-website-policy/commit/cec276082c3fc1b5486c996c3746a6958fb3a1a9)
-- Add theme to teaser stylewrapper [`60eeb28`](https://github.com/eea/volto-eea-website-policy/commit/60eeb28b7793708c59d0af73ffb09895e8f2c87d)
-- Fix className vs class warning [`fea1603`](https://github.com/eea/volto-eea-website-policy/commit/fea1603eefd628d57640a6b94ddbbb7edfb0d841)
-- Custom card view for teaser [`c8eded0`](https://github.com/eea/volto-eea-website-policy/commit/c8eded011b8317cce9f842526f5d86771f54797b)
+- Fix Cannot read properties of undefined (reading 'translations') [Alin Voinea - [`8e7b8b8`](https://github.com/eea/volto-eea-website-policy/commit/8e7b8b8533b14f173d77783fe2d0b517c29c5937)]
+- Customize Toolbar.jsx - copied unchanged from @plone/volto 16.0.0.alpha.11 [Alin Voinea - [`b7add4f`](https://github.com/eea/volto-eea-website-policy/commit/b7add4faa8ef2dde7d77489fc8bc431cbb023314)]
+### [0.2.5](https://github.com/eea/volto-eea-website-policy/compare/0.2.4...0.2.5) - 23 June 2022
 
-#### [0.2.3](https://github.com/eea/volto-eea-website-policy/compare/0.2.2...0.2.3)
+#### :hammer_and_wrench: Others
 
-> 10 June 2022
+- Rounded card via style wrapper [Alin Voinea - [`6728684`](https://github.com/eea/volto-eea-website-policy/commit/67286844b00902aa4c6b316b50be35db95c531f0)]
+- Revert "Rounded Card variation - refs #148723" [Alin Voinea - [`0168a86`](https://github.com/eea/volto-eea-website-policy/commit/0168a86fa644a9b848e37c7f5054eb4308c36784)]
+- Disable Image Cards block [Alin Voinea - [`3ed8dc3`](https://github.com/eea/volto-eea-website-policy/commit/3ed8dc311cad8e30a8c918ecec7b21cc99260c50)]
+- Rounded Card variation - refs #148723 [Alin Voinea - [`4b46731`](https://github.com/eea/volto-eea-website-policy/commit/4b46731e25962bbb6e7159d0db8a9a642a95eb53)]
+### [0.2.4](https://github.com/eea/volto-eea-website-policy/compare/0.2.3...0.2.4) - 13 June 2022
 
-- Add Item block [`#9`](https://github.com/eea/volto-eea-website-policy/pull/9)
-- prettier fix [`c2a6d2d`](https://github.com/eea/volto-eea-website-policy/commit/c2a6d2d3b12ce771b9b4413c5a6db157ccd9d1fc)
-- Update index.js [`fb73895`](https://github.com/eea/volto-eea-website-policy/commit/fb7389509bc7e207942762c5e02a93d0168a6fba)
-- removed change from commit 719e3778 [`29e636b`](https://github.com/eea/volto-eea-website-policy/commit/29e636b34ab02992c67cc5960f4dc6b21b1b4e71)
-- added navDepth to level 4 in order to fill mega menu [`719e377`](https://github.com/eea/volto-eea-website-policy/commit/719e37785cfa2ed37568c82a34dc470b52483d04)
-- Rearrange Block Chooser [`9a5c118`](https://github.com/eea/volto-eea-website-policy/commit/9a5c1187ba21fa1898394a4b6cf6dd68bd68f258)
-- Move Item block un components folder [`9fb6ab2`](https://github.com/eea/volto-eea-website-policy/commit/9fb6ab2fb02cc5c1a7e25367de5ebe7109bd3dc4)
-- Set default sizes for image & icon in Item block [`af22ec7`](https://github.com/eea/volto-eea-website-policy/commit/af22ec78b2c6fd1d033dc1acfec5e64f8926cd77)
-- Add helpers functions [`353581c`](https://github.com/eea/volto-eea-website-policy/commit/353581cc6602b5e573eee93c74a67656203c0968)
-- Add Teaser block folder's structure [`9457dd4`](https://github.com/eea/volto-eea-website-policy/commit/9457dd4ffaa2631eceb46bfd1ec2d201e8b3d7a8)
+#### :hammer_and_wrench: Others
 
-#### [0.2.2](https://github.com/eea/volto-eea-website-policy/compare/0.2.1...0.2.2)
+- Fix listing block title: Listing (Content) [Alin Voinea - [`cec2760`](https://github.com/eea/volto-eea-website-policy/commit/cec276082c3fc1b5486c996c3746a6958fb3a1a9)]
+- Add theme to teaser stylewrapper [Alin Voinea - [`60eeb28`](https://github.com/eea/volto-eea-website-policy/commit/60eeb28b7793708c59d0af73ffb09895e8f2c87d)]
+- Fix className vs class warning [Alin Voinea - [`fea1603`](https://github.com/eea/volto-eea-website-policy/commit/fea1603eefd628d57640a6b94ddbbb7edfb0d841)]
+- Custom card view for teaser [Alin Voinea - [`c8eded0`](https://github.com/eea/volto-eea-website-policy/commit/c8eded011b8317cce9f842526f5d86771f54797b)]
+### [0.2.3](https://github.com/eea/volto-eea-website-policy/compare/0.2.2...0.2.3) - 10 June 2022
 
-> 24 May 2022
+#### :hammer_and_wrench: Others
 
-- Install callout and remove blockquote - refs #148688 [`#8`](https://github.com/eea/volto-eea-website-policy/pull/8)
+- prettier fix [David Ichim - [`c2a6d2d`](https://github.com/eea/volto-eea-website-policy/commit/c2a6d2d3b12ce771b9b4413c5a6db157ccd9d1fc)]
+- Update index.js [ichim-david - [`fb73895`](https://github.com/eea/volto-eea-website-policy/commit/fb7389509bc7e207942762c5e02a93d0168a6fba)]
+- removed change from commit 719e3778 [ichim-david - [`29e636b`](https://github.com/eea/volto-eea-website-policy/commit/29e636b34ab02992c67cc5960f4dc6b21b1b4e71)]
+- added navDepth to level 4 in order to fill mega menu [ichim-david - [`719e377`](https://github.com/eea/volto-eea-website-policy/commit/719e37785cfa2ed37568c82a34dc470b52483d04)]
+- Rearrange Block Chooser [Alin Voinea - [`9a5c118`](https://github.com/eea/volto-eea-website-policy/commit/9a5c1187ba21fa1898394a4b6cf6dd68bd68f258)]
+- Move Item block un components folder [Miu Razvan - [`9fb6ab2`](https://github.com/eea/volto-eea-website-policy/commit/9fb6ab2fb02cc5c1a7e25367de5ebe7109bd3dc4)]
+- Set default sizes for image & icon in Item block [Miu Razvan - [`af22ec7`](https://github.com/eea/volto-eea-website-policy/commit/af22ec78b2c6fd1d033dc1acfec5e64f8926cd77)]
+- Add helpers functions [Miu Razvan - [`353581c`](https://github.com/eea/volto-eea-website-policy/commit/353581cc6602b5e573eee93c74a67656203c0968)]
+- Add Teaser block folder's structure [Alin Voinea - [`9457dd4`](https://github.com/eea/volto-eea-website-policy/commit/9457dd4ffaa2631eceb46bfd1ec2d201e8b3d7a8)]
+### [0.2.2](https://github.com/eea/volto-eea-website-policy/compare/0.2.1...0.2.2) - 24 May 2022
 
-#### [0.2.1](https://github.com/eea/volto-eea-website-policy/compare/0.2.0...0.2.1)
+### [0.2.1](https://github.com/eea/volto-eea-website-policy/compare/0.2.0...0.2.1) - 25 March 2022
 
-> 25 March 2022
+### [0.2.0](https://github.com/eea/volto-eea-website-policy/compare/0.1.1...0.2.0) - 18 March 2022
 
-- 137187 keycloak integration for plone6 (#3) [`#6`](https://github.com/eea/volto-eea-website-policy/pull/6)
-- 137187 keycloak integration for plone6 [`#3`](https://github.com/eea/volto-eea-website-policy/pull/3)
+#### :hammer_and_wrench: Others
 
-#### [0.2.0](https://github.com/eea/volto-eea-website-policy/compare/0.1.1...0.2.0)
+- Release 0.2.0 [Alin Voinea - [`4b72206`](https://github.com/eea/volto-eea-website-policy/commit/4b72206675ab13ed81567df590849613581d7f10)]
+- Update index.js [Alexandru Ghica - [`0f5be15`](https://github.com/eea/volto-eea-website-policy/commit/0f5be1553b608f49c9a61bbc69a0f90219260a83)]
+- Update index.js [Alexandru Ghica - [`03dd3b1`](https://github.com/eea/volto-eea-website-policy/commit/03dd3b162d3175df00048339bed4f9a7d097a896)]
+- format index.js [Andrei Grigore - [`db4481a`](https://github.com/eea/volto-eea-website-policy/commit/db4481aeeba59a769272659f33278c902fc69bec)]
+- Update index.js [Alexandru Ghica - [`dc09886`](https://github.com/eea/volto-eea-website-policy/commit/dc0988640a76a9914381b120f58bb61a9ab1eb39)]
+- Added externalRoutes [Alexandru Ghica - [`b68135b`](https://github.com/eea/volto-eea-website-policy/commit/b68135b013fafa93a41ea602ea2fad30879abe0f)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`575cca6`](https://github.com/eea/volto-eea-website-policy/commit/575cca674602ca2e1c2a41300c47ba594ff49aa0)]
+### [0.1.1](https://github.com/eea/volto-eea-website-policy/compare/0.1.0...0.1.1) - 4 March 2022
 
-> 18 March 2022
+#### :hammer_and_wrench: Others
 
-- Release [`#5`](https://github.com/eea/volto-eea-website-policy/pull/5)
-- Enable multilingual - refs #146771 [`#4`](https://github.com/eea/volto-eea-website-policy/pull/4)
-- Release 0.2.0 [`4b72206`](https://github.com/eea/volto-eea-website-policy/commit/4b72206675ab13ed81567df590849613581d7f10)
-- Update index.js [`0f5be15`](https://github.com/eea/volto-eea-website-policy/commit/0f5be1553b608f49c9a61bbc69a0f90219260a83)
-- Update index.js [`03dd3b1`](https://github.com/eea/volto-eea-website-policy/commit/03dd3b162d3175df00048339bed4f9a7d097a896)
-- format index.js [`db4481a`](https://github.com/eea/volto-eea-website-policy/commit/db4481aeeba59a769272659f33278c902fc69bec)
-- Update index.js [`dc09886`](https://github.com/eea/volto-eea-website-policy/commit/dc0988640a76a9914381b120f58bb61a9ab1eb39)
-- Added externalRoutes [`b68135b`](https://github.com/eea/volto-eea-website-policy/commit/b68135b013fafa93a41ea602ea2fad30879abe0f)
+- Enable description block by default [Alin Voinea - [`b3d6534`](https://github.com/eea/volto-eea-website-policy/commit/b3d6534a57f7288899c4f59b5cec553370363d8b)]
+- Prepare for first release [Alin Voinea - [`69e36b1`](https://github.com/eea/volto-eea-website-policy/commit/69e36b1c82b75b0917ef3d433581c50cdcf6c341)]
+- Enable working copy support [Alin Voinea - [`7c6269d`](https://github.com/eea/volto-eea-website-policy/commit/7c6269d75df915f39c15e8ed0893cc062601e7a7)]
+- Enable multilingual [Alin Voinea - [`73210b9`](https://github.com/eea/volto-eea-website-policy/commit/73210b90ad968909da0c15583992f8f58e99e632)]
+### 0.1.0 - 4 March 2022
 
-#### [0.1.1](https://github.com/eea/volto-eea-website-policy/compare/0.1.0...0.1.1)
+#### :hammer_and_wrench: Others
 
-> 4 March 2022
-
-- Release [`#1`](https://github.com/eea/volto-eea-website-policy/pull/1)
-- Enable description block by default [`b3d6534`](https://github.com/eea/volto-eea-website-policy/commit/b3d6534a57f7288899c4f59b5cec553370363d8b)
-- Prepare for first release [`69e36b1`](https://github.com/eea/volto-eea-website-policy/commit/69e36b1c82b75b0917ef3d433581c50cdcf6c341)
-- Enable working copy support [`7c6269d`](https://github.com/eea/volto-eea-website-policy/commit/7c6269d75df915f39c15e8ed0893cc062601e7a7)
-- Enable multilingual [`73210b9`](https://github.com/eea/volto-eea-website-policy/commit/73210b90ad968909da0c15583992f8f58e99e632)
-
-#### 0.1.0
-
-> 4 March 2022
-
-- Initial commit [`3800692`](https://github.com/eea/volto-eea-website-policy/commit/3800692f7a4de6460815bd6061facacb986cbef0)
+- yarn bootstrap [Alin Voinea - [`9b4d197`](https://github.com/eea/volto-eea-website-policy/commit/9b4d197cbc7992566cb36524d190078d5ad21a44)]
+- Initial commit [Alin Voinea - [`3800692`](https://github.com/eea/volto-eea-website-policy/commit/3800692f7a4de6460815bd6061facacb986cbef0)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-policy",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "@eeacms/volto-eea-website-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/ContextNavigation/ContextNavigationEdit.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { EditSchema } from './schema';
+import { InlineForm, SidebarPortal } from '@plone/volto/components';
+import ContextNavigationView from './ContextNavigationView';
+
+const ContextNavigationFillView = (props) => {
+  const schema = EditSchema();
+  return (
+    <>
+      <h3>Context navigation</h3>
+      <ContextNavigationView {...props} />{' '}
+      <SidebarPortal selected={props.selected}>
+        {props.selected && (
+          <InlineForm
+            title={schema.title}
+            schema={schema}
+            formData={props.data}
+            onChangeField={(id, value) => {
+              props.onChangeBlock(props.block, {
+                ...props.data,
+                [id]: value,
+              });
+            }}
+          />
+        )}
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default ContextNavigationFillView;

package/src/components/Blocks/ContextNavigation/ContextNavigationView.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ConnectedContextNavigation from '@plone/volto/components/theme/Navigation/ContextNavigation';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+const ContextNavigationView = ({ data = {} }) => {
+  const navProps = { ...data };
+  const root_path = data?.root_node?.[0]?.['@id'];
+  if (root_path) navProps['root_path'] = flattenToAppURL(root_path);
+
+  return (
+    <>
+      <ConnectedContextNavigation params={navProps} />
+    </>
+  );
+};
+
+export default ContextNavigationView;

package/src/components/Blocks/ContextNavigation/index.js

@@ -0,0 +1,26 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import ContextNavigationEdit from './ContextNavigationEdit';
+import ContextNavigationView from './ContextNavigationView';
+import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.contextNavigation = {
+    id: 'contextNavigation',
+    title: 'Navigation',
+    icon: codeSVG,
+    group: 'site',
+    view: ContextNavigationView,
+    edit: ContextNavigationEdit,
+    schema: BlockSettingsSchema,
+    restricted: false,
+    mostUsed: true,
+    blockHasOwnFocusManagement: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  return config;
+};

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

@@ -0,0 +1,81 @@
+export const EditSchema = () => {
+  return {
+    title: 'Navigation',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'name',
+          'root_node',
+          'includeTop',
+          'currentFolderOnly',
+          'topLevel',
+          'bottomLevel',
+          'no_icons',
+          'thumb_scale',
+          'no_thumbs',
+        ],
+      },
+    ],
+    required: [],
+    properties: {
+      name: {
+        title: 'Title',
+        description: 'The title of the navigation tree',
+      },
+      root_node: {
+        title: 'Root node',
+        description:
+          'You may search for and choose a folder to act as the root of the navigation tree. Leave blank to use the Plone site root.',
+        widget: 'object_browser',
+        // TODO: these don't work. Why?
+        mode: 'link',
+        selectedItemAttrs: ['Title', 'Description'],
+      },
+      includeTop: {
+        title: 'Include top node',
+        description:
+          "Whether or not to show the top, or 'root', node in the navigation tree. This is affected by the 'Start level' setting.",
+        type: 'boolean',
+      },
+      currentFolderOnly: {
+        title: 'Only show the contents of the current folder',
+        description:
+          'If selected, the navigation tree will only show the current folder and its children at all times.',
+        type: 'boolean',
+      },
+
+      topLevel: {
+        title: 'Start level',
+        description:
+          'An integer value that specifies the number of folder levels below the site root that must be exceeded before the navigation tree will display. 0 means that the navigation tree should be displayed everywhere including pages in the root of the site. 1 means the tree only shows up inside folders located in the root and downwards, never showing at the top level.',
+        type: 'number',
+        default: 1,
+      },
+      bottomLevel: {
+        title: 'Navigation tree depth',
+        description:
+          'How many folders should be included before the navigation tree stops. 0 means no limit. 1 only includes the root folder.',
+        type: 'number',
+        default: 0,
+      },
+      no_icons: {
+        title: 'Supress icons',
+        description:
+          'If enabled, the portlet will not show document type icons.',
+        type: 'boolean',
+      },
+      thumb_scale: {
+        title: 'Override thumb scale',
+        description:
+          "Enter a valid scale name (see 'Image Handling' control panel) to override (e.g. icon, tile, thumb, mini, preview, ... ). Leave empty to use default (see 'Site' control panel).",
+      },
+      no_thumbs: {
+        title: 'Supress thumbs',
+        type: 'boolean',
+        description: 'If enabled, the portlet will not show thumbs.',
+      },
+    },
+  };
+};

package/src/customizations/volto/components/manage/Controlpanels/ContentTypeLayout.jsx

@@ -0,0 +1,520 @@
+/**
+ * Content Type component.
+ * @module components/manage/Controlpanels/ContentTypeLayout
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Link } from 'react-router-dom';
+import {
+  getParentUrl,
+  hasBlocksData,
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers';
+import { Portal } from 'react-portal';
+import { Button, Segment } from 'semantic-ui-react';
+import { toast } from 'react-toastify';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { nth, join } from 'lodash';
+import {
+  Error,
+  Form,
+  Icon,
+  Toolbar,
+  Sidebar,
+  Toast,
+} from '@plone/volto/components';
+import {
+  getSchema,
+  updateSchema,
+  getControlpanel,
+  updateControlpanel,
+} from '@plone/volto/actions';
+
+import saveSVG from '@plone/volto/icons/save.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import backSVG from '@plone/volto/icons/back.svg';
+
+const messages = defineMessages({
+  changesSaved: {
+    id: 'Changes saved.',
+    defaultMessage: 'Changes saved.',
+  },
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  save: {
+    id: 'Save',
+    defaultMessage: 'Save',
+  },
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+  info: {
+    id: 'Info',
+    defaultMessage: 'Info',
+  },
+  enable: {
+    id: 'Enable editable Blocks',
+    defaultMessage: 'Enable editable Blocks',
+  },
+});
+
+/**
+ * ContentTypeLayout class.
+ * @class ContentTypeLayout
+ * @extends Component
+ */
+class ContentTypeLayout extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    updateControlpanel: PropTypes.func.isRequired,
+    getControlpanel: PropTypes.func.isRequired,
+    getSchema: PropTypes.func.isRequired,
+    updateSchema: PropTypes.func.isRequired,
+    id: PropTypes.string.isRequired,
+    parent: PropTypes.string.isRequired,
+    pathname: PropTypes.string.isRequired,
+    schemaRequest: PropTypes.objectOf(PropTypes.any).isRequired,
+    cpanelRequest: PropTypes.objectOf(PropTypes.any).isRequired,
+    schema: PropTypes.objectOf(PropTypes.any),
+    controlpanel: PropTypes.shape({
+      '@id': PropTypes.string,
+      data: PropTypes.object,
+      schema: PropTypes.object,
+      title: PropTypes.string,
+    }),
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    schema: {},
+    controlpanel: null,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs ContentTypeLayout
+   */
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      visual: false,
+      content: null,
+      readOnlyBehavior: null,
+      error: null,
+      isClient: false,
+    };
+
+    this.onCancel = this.onCancel.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.onEnableBlocks = this.onEnableBlocks.bind(this);
+    this.onEnableBlocksBehavior = this.onEnableBlocksBehavior.bind(this);
+    this.onDisableBlocksBehavior = this.onDisableBlocksBehavior.bind(this);
+    this.form = React.createRef();
+  }
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.getControlpanel(join([this.props.parent, this.props.id], '/'));
+    this.props.getSchema(this.props.id);
+    this.setState({ isClient: true });
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    // Control Panel GET
+    if (
+      this.props.cpanelRequest.get.loading &&
+      nextProps.cpanelRequest.get.error
+    ) {
+      this.setState({
+        error: nextProps.cpanelRequest.get.error,
+      });
+    }
+
+    // Schema GET
+    if (this.props.schemaRequest.loading && nextProps.schemaRequest.loaded) {
+      const properties = nextProps.schema?.properties || {};
+      const content = {};
+      for (const key in properties) {
+        const value = properties[key].default;
+        if (value) {
+          content[key] = value;
+        }
+      }
+
+      if (hasBlocksData(properties)) {
+        this.setState({
+          visual: true,
+        });
+
+        const blocksFieldName = getBlocksFieldname(properties);
+        const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+        content[blocksFieldName] = properties[blocksFieldName]?.default || {};
+        content[blocksLayoutFieldname] = properties[blocksLayoutFieldname]
+          ?.default || { items: [] };
+
+        const blocksBehavior = properties[blocksFieldName]?.behavior || '';
+        this.setState({
+          readOnlyBehavior: !blocksBehavior.includes('generated')
+            ? blocksBehavior
+            : '',
+        });
+      } else {
+        this.setState({
+          visual: false,
+          readOnlyBehavior: '',
+        });
+      }
+
+      this.setState({
+        content: content,
+      });
+    }
+
+    // Schema updated
+    if (
+      this.props.schemaRequest.update.loading &&
+      nextProps.schemaRequest.update.loaded
+    ) {
+      this.props.getSchema(this.props.id);
+      toast.info(
+        <Toast
+          info
+          title={this.props.intl.formatMessage(messages.info)}
+          content={this.props.intl.formatMessage(messages.changesSaved)}
+        />,
+      );
+    }
+
+    // Blocks behavior disabled
+    if (
+      this.props.cpanelRequest.update.loading &&
+      nextProps.cpanelRequest.update.loaded
+    ) {
+      this.onEnableBlocks();
+    }
+  }
+
+  /**
+   * Submit handler
+   * @method onSubmit
+   * @param {object} data Form data.
+   * @returns {undefined}
+   */
+  onSubmit(data) {
+    const schema = { properties: {} };
+    Object.keys(data)
+      .filter((k) => data[k])
+      .forEach((k) => (schema.properties[k] = { default: data[k] }));
+    this.props.updateSchema(this.props.id, schema);
+  }
+
+  /**
+   * Cancel handler
+   * @method onCancel
+   * @returns {undefined}
+   */
+  onCancel() {
+    const url = getParentUrl(this.props.pathname);
+    this.props.history.push(getParentUrl(url));
+  }
+
+  /**
+   * Enable blocks handler
+   * @method onEnableBlocks
+   * @returns {undefined}
+   */
+  onEnableBlocks() {
+    const { properties = {} } = this.props.schema;
+    const blocksFieldName = getBlocksFieldname(properties);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+    const schema = {
+      fieldsets: [
+        {
+          id: 'layout',
+          title: 'Layout',
+          fields: ['blocks', 'blocks_layout'],
+        },
+      ],
+      properties: {
+        blocks: {
+          title: 'Blocks',
+          type: 'dict',
+          widget: 'json',
+          factory: 'JSONField',
+          default: properties[blocksFieldName]?.default || {},
+        },
+        blocks_layout: {
+          title: 'Blocks Layout',
+          type: 'dict',
+          widget: 'json',
+          factory: 'JSONField',
+          default: properties[blocksLayoutFieldname]?.default || { items: [] },
+        },
+      },
+    };
+    this.props.updateSchema(this.props.id, schema);
+  }
+
+  /**
+   * Disable Blocks behavior handler
+   * @method onDisableBlocksBehavior
+   * @returns {undefined}
+   */
+  onDisableBlocksBehavior() {
+    this.props.updateControlpanel(this.props.controlpanel['@id'], {
+      [this.state.readOnlyBehavior]: false,
+      'volto.blocks.editable.layout': true,
+    });
+  }
+
+  /**
+   * Enable Blocks behavior handler
+   * @method onEnableBlocksBehavior
+   * @returns {undefined}
+   */
+  onEnableBlocksBehavior() {
+    this.props.updateControlpanel(this.props.controlpanel['@id'], {
+      'volto.blocks.editable.layout': true,
+    });
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    // Error
+    if (this.state.error) {
+      return <Error error={this.state.error} />;
+    }
+
+    if (!this.state.visual) {
+      // Still loading
+      if (!this.state.content) {
+        return <div />;
+      }
+
+      // Blocks are not enabled
+      return (
+        <>
+          <Segment
+            placeholder
+            id="page-controlpanel-layout"
+            className="ui container center aligned"
+          >
+            <div>
+              <FormattedMessage
+                id="Can not edit Layout for <strong>{type}</strong> content-type as it doesn't have support for <strong>Volto Blocks</strong> enabled"
+                defaultMessage="Can not edit Layout for <strong>{type}</strong> content-type as it doesn't have support for <strong>Volto Blocks</strong> enabled"
+                values={{
+                  strong: (...chunks) => <strong>{chunks}</strong>,
+                  type: this.props?.controlpanel?.title || this.props.id,
+                }}
+              />
+            </div>
+            <div className="ui divider"></div>
+            <Button
+              primary
+              onClick={this.onEnableBlocksBehavior}
+              content={this.props.intl.formatMessage(messages.enable)}
+            />
+          </Segment>
+          <Portal
+            node={this.state.isClient && document.getElementById('toolbar')}
+          >
+            <Toolbar
+              pathname={this.props.pathname}
+              hideDefaultViewButtons
+              inner={
+                <>
+                  <Link className="item" to="#" onClick={() => this.onCancel()}>
+                    <Icon
+                      name={backSVG}
+                      size="30px"
+                      className="contents circled"
+                      title={this.props.intl.formatMessage(messages.back)}
+                    />
+                  </Link>
+                </>
+              }
+            />
+          </Portal>
+        </>
+      );
+    }
+
+    if (this.state.readOnlyBehavior) {
+      return (
+        <>
+          <Segment
+            placeholder
+            id="page-controlpanel-layout"
+            className="ui container center aligned"
+          >
+            <div>
+              <FormattedMessage
+                id="Can not edit Layout for <strong>{type}</strong> content-type as the <strong>Blocks behavior</strong> is enabled and <strong>read-only</strong>"
+                defaultMessage="Can not edit Layout for <strong>{type}</strong> content-type as the <strong>Blocks behavior</strong> is enabled and <strong>read-only</strong>"
+                values={{
+                  strong: (...chunks) => <strong>{chunks}</strong>,
+                  type: this.props?.controlpanel?.title || this.props.id,
+                }}
+              />
+            </div>
+            <div className="ui divider"></div>
+            <Button
+              primary
+              onClick={this.onDisableBlocksBehavior}
+              content={this.props.intl.formatMessage(messages.enable)}
+            />
+          </Segment>
+          <Portal
+            node={this.state.isClient && document.getElementById('toolbar')}
+          >
+            <Toolbar
+              pathname={this.props.pathname}
+              hideDefaultViewButtons
+              inner={
+                <>
+                  <Link className="item" to="#" onClick={() => this.onCancel()}>
+                    <Icon
+                      name={backSVG}
+                      size="30px"
+                      className="contents circled"
+                      title={this.props.intl.formatMessage(messages.back)}
+                    />
+                  </Link>
+                </>
+              }
+            />
+          </Portal>
+        </>
+      );
+    }
+
+    // Render layout editor
+    const blocksFieldName = getBlocksFieldname(
+      this.props.schema?.properties || {},
+    );
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(
+      this.props.schema?.properties || {},
+    );
+    return (
+      <div id="page-controlpanel-layout">
+        <Form
+          isAdminForm
+          ref={this.form}
+          schema={{
+            fieldsets: [
+              {
+                id: 'layout',
+                title: 'Layout',
+                fields: [blocksFieldName, blocksLayoutFieldname],
+              },
+            ],
+            properties: {
+              ...this.props.schema.properties[blocksFieldName],
+              ...this.props.schema.properties[blocksLayoutFieldname],
+            },
+            required: [],
+          }}
+          formData={this.state.content}
+          onSubmit={this.onSubmit}
+          onCancel={this.onCancel}
+          pathname={this.props.pathname}
+          visual={this.state.visual}
+          hideActions
+        />
+        <Portal
+          node={this.state.isClient && document.getElementById('sidebar')}
+        >
+          <Sidebar settingsTab={true} documentTab={false} />
+        </Portal>
+        <Portal
+          node={this.state.isClient && document.getElementById('toolbar')}
+        >
+          <Toolbar
+            pathname={this.props.pathname}
+            hideDefaultViewButtons
+            inner={
+              <>
+                <Button
+                  id="toolbar-save"
+                  className="save"
+                  aria-label={this.props.intl.formatMessage(messages.save)}
+                  onClick={() => this.form.current.onSubmit()}
+                  disabled={this.props.schemaRequest.update.loading}
+                  loading={this.props.schemaRequest.update.loading}
+                >
+                  <Icon
+                    name={saveSVG}
+                    className="circled"
+                    size="30px"
+                    title={this.props.intl.formatMessage(messages.save)}
+                  />
+                </Button>
+                <Button
+                  className="cancel"
+                  aria-label={this.props.intl.formatMessage(messages.cancel)}
+                  onClick={() => this.onCancel()}
+                >
+                  <Icon
+                    name={clearSVG}
+                    className="circled"
+                    size="30px"
+                    title={this.props.intl.formatMessage(messages.cancel)}
+                  />
+                </Button>
+              </>
+            }
+          />
+        </Portal>
+      </div>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state, props) => ({
+      schema: state.schema.schema,
+      schemaRequest: state.schema,
+      cpanelRequest: state.controlpanels,
+      controlpanel: state.controlpanels.controlpanel,
+      pathname: props.location.pathname,
+      id: nth(props.location.pathname.split('/'), -2),
+      parent: nth(props.location.pathname.split('/'), -3),
+    }),
+    { getSchema, updateSchema, getControlpanel, updateControlpanel },
+  ),
+)(ContentTypeLayout);

package/src/customizations/volto/helpers/Blocks/Blocks.js

@@ -0,0 +1,440 @@
+/**
+ * Blocks helper.
+ * @module helpers/Blocks
+ */
+
+import { omit, without, endsWith, find, isObject, keys, toPairs } from 'lodash';
+import move from 'lodash-move';
+import { v4 as uuid } from 'uuid';
+import config from '@plone/volto/registry';
+import { applySchemaEnhancer } from '@plone/volto/helpers';
+
+/**
+ * Get blocks field.
+ * @function getBlocksFieldname
+ * @param {Object} props Properties.
+ * @return {string} Field name of the blocks
+ */
+export function getBlocksFieldname(props) {
+  return (
+    find(
+      keys(props),
+      (key) => key !== 'volto.blocks' && endsWith(key, 'blocks'),
+    ) || null
+  );
+}
+
+/**
+ * Get blocks layout field.
+ * @function getBlocksLayoutFieldname
+ * @param {Object} props Properties.
+ * @return {string} Field name of the blocks layout
+ */
+export function getBlocksLayoutFieldname(props) {
+  return (
+    find(
+      keys(props),
+      (key) => key !== 'volto.blocks' && endsWith(key, 'blocks_layout'),
+    ) || null
+  );
+}
+
+/**
+ * Has blocks data.
+ * @function hasBlocksData
+ * @param {Object} props Properties.
+ * @return {boolean} True if it has blocks data.
+ */
+export function hasBlocksData(props) {
+  return (
+    find(
+      keys(props),
+      (key) => key !== 'volto.blocks' && endsWith(key, 'blocks'),
+    ) !== undefined
+  );
+}
+
+/**
+ * Pluggable method to test if a block has a set value (any non-empty value)
+ * @function blockHasValue
+ * @param {Object} data Block data
+ * @return {boolean} True if block has a non-empty value
+ */
+export function blockHasValue(data) {
+  const { blocks } = config;
+  const blockType = data['@type'];
+  const check = blocks.blocksConfig[blockType]?.blockHasValue;
+  if (!check) {
+    return true;
+  }
+  return check(data);
+}
+
+/**
+ * Get block pairs of [id, block] from content properties
+ * @function getBlocks
+ * @param {Object} properties
+ * @return {Array} a list of block [id, value] pairs, in order from layout
+ */
+export const getBlocks = (properties) => {
+  const blocksFieldName = getBlocksFieldname(properties);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
+  return (
+    properties[blocksLayoutFieldname]?.items?.map((n) => [
+      n,
+      properties[blocksFieldName][n],
+    ]) || []
+  );
+};
+
+/**
+ * Move block to different location index within blocks_layout
+ * @function moveBlock
+ * @param {Object} formData Form data
+ * @param {number} source index within form blocks_layout items
+ * @param {number} destination index within form blocks_layout items
+ * @return {Object} New form data
+ */
+export function moveBlock(formData, source, destination) {
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  return {
+    ...formData,
+    [blocksLayoutFieldname]: {
+      items: move(formData[blocksLayoutFieldname].items, source, destination),
+    },
+  };
+}
+
+/**
+ * Delete block by id
+ * @function deleteBlock
+ * @param {Object} formData Form data
+ * @param {string} blockId Block uid
+ * @return {Object} New form data
+ */
+export function deleteBlock(formData, blockId) {
+  const blocksFieldname = getBlocksFieldname(formData);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+
+  let newFormData = {
+    ...formData,
+    [blocksLayoutFieldname]: {
+      items: without(formData[blocksLayoutFieldname].items, blockId),
+    },
+    [blocksFieldname]: omit(formData[blocksFieldname], [blockId]),
+  };
+
+  if (newFormData[blocksLayoutFieldname].items.length === 0) {
+    newFormData = addBlock(newFormData, config.settings.defaultBlockType, 0);
+  }
+
+  return newFormData;
+}
+
+/**
+ * Add block
+ * @function addBlock
+ * @param {Object} formData Form data
+ * @param {string} type Block type
+ * @param {number} index Destination index
+ * @return {Array} New block id, New form data
+ */
+export function addBlock(formData, type, index) {
+  const { settings } = config;
+  const id = uuid();
+  const idTrailingBlock = uuid();
+  const blocksFieldname = getBlocksFieldname(formData);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const totalItems = formData[blocksLayoutFieldname].items.length;
+  const insert = index === -1 ? totalItems : index;
+
+  return [
+    id,
+    {
+      ...formData,
+      [blocksLayoutFieldname]: {
+        items: [
+          ...formData[blocksLayoutFieldname].items.slice(0, insert),
+          id,
+          ...(type !== settings.defaultBlockType ? [idTrailingBlock] : []),
+          ...formData[blocksLayoutFieldname].items.slice(insert),
+        ],
+      },
+      [blocksFieldname]: {
+        ...formData[blocksFieldname],
+        [id]: {
+          '@type': type,
+        },
+        ...(type !== settings.defaultBlockType && {
+          [idTrailingBlock]: {
+            '@type': settings.defaultBlockType,
+          },
+        }),
+      },
+      selected: id,
+    },
+  ];
+}
+
+/**
+ * Mutate block
+ * @function mutateBlock
+ * @param {Object} formData Form data
+ * @param {string} id Block uid to mutate
+ * @param {number} value Block's new value
+ * @return {Object} New form data
+ */
+export function mutateBlock(formData, id, value) {
+  const { settings } = config;
+  const blocksFieldname = getBlocksFieldname(formData);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const index = formData[blocksLayoutFieldname].items.indexOf(id) + 1;
+
+  // Test if block at index is already a placeholder (trailing) block
+  const trailId = formData[blocksLayoutFieldname].items[index];
+  if (trailId) {
+    const block = formData[blocksFieldname][trailId];
+    if (!blockHasValue(block)) {
+      return {
+        ...formData,
+        [blocksFieldname]: {
+          ...formData[blocksFieldname],
+          [id]: value || null,
+        },
+      };
+    }
+  }
+
+  const idTrailingBlock = uuid();
+  return {
+    ...formData,
+    [blocksFieldname]: {
+      ...formData[blocksFieldname],
+      [id]: value || null,
+      [idTrailingBlock]: {
+        '@type': settings.defaultBlockType,
+      },
+    },
+    [blocksLayoutFieldname]: {
+      items: [
+        ...formData[blocksLayoutFieldname].items.slice(0, index),
+        idTrailingBlock,
+        ...formData[blocksLayoutFieldname].items.slice(index),
+      ],
+    },
+  };
+}
+
+/**
+ * Insert new block before another block
+ * @function insertBlock
+ * @param {Object} formData Form data
+ * @param {string} id Insert new block before the block with this id
+ * @param {number} value New block's value
+ * @return {Array} New block id, New form data
+ */
+export function insertBlock(formData, id, value, current = {}) {
+  const blocksFieldname = getBlocksFieldname(formData);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const index = formData[blocksLayoutFieldname].items.indexOf(id);
+
+  const newBlockId = uuid();
+  return [
+    newBlockId,
+    {
+      ...formData,
+      [blocksFieldname]: {
+        ...formData[blocksFieldname],
+        [newBlockId]: value || null,
+        [id]: {
+          ...formData[blocksFieldname][id],
+          ...current,
+        },
+      },
+      [blocksLayoutFieldname]: {
+        items: [
+          ...formData[blocksLayoutFieldname].items.slice(0, index),
+          newBlockId,
+          ...formData[blocksLayoutFieldname].items.slice(index),
+        ],
+      },
+    },
+  ];
+}
+
+/**
+ * Change block
+ * @function changeBlock
+ * @param {Object} formData Form data
+ * @param {string} id Block uid to change
+ * @param {number} value Block's new value
+ * @return {Object} New form data
+ */
+export function changeBlock(formData, id, value) {
+  const blocksFieldname = getBlocksFieldname(formData);
+  return {
+    ...formData,
+    [blocksFieldname]: {
+      ...formData[blocksFieldname],
+      [id]: value || null,
+    },
+  };
+}
+
+/**
+ * Get the next block UID within form
+ * @function nextBlockId
+ * @param {Object} formData Form data
+ * @param {string} currentBlock Block uid
+ * @return {string} Next block uid
+ */
+export function nextBlockId(formData, currentBlock) {
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const currentIndex = formData[blocksLayoutFieldname].items.indexOf(
+    currentBlock,
+  );
+
+  if (currentIndex === formData[blocksLayoutFieldname].items.length - 1) {
+    // We are already at the bottom block don't do anything
+    return null;
+  }
+
+  const newIndex = currentIndex + 1;
+  return formData[blocksLayoutFieldname].items[newIndex];
+}
+
+/**
+ * Get the previous block UID within form
+ * @function previousBlockId
+ * @param {Object} formData Form data
+ * @param {string} currentBlock Block uid
+ * @return {string} Previous block uid
+ */
+export function previousBlockId(formData, currentBlock) {
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
+  const currentIndex = formData[blocksLayoutFieldname].items.indexOf(
+    currentBlock,
+  );
+
+  if (currentIndex === 0) {
+    // We are already at the top block don't do anything
+    return null;
+  }
+  const newindex = currentIndex - 1;
+  return formData[blocksLayoutFieldname].items[newindex];
+}
+
+/**
+ * Generate empty block form
+ * @function emptyBlocksForm
+ * @param {Object} formData Form data
+ * @return {Object} Empty blocks form with one defaultBlockType block
+ */
+export function emptyBlocksForm() {
+  const { settings } = config;
+  const id = uuid();
+  return {
+    blocks: {
+      [id]: {
+        '@type': settings.defaultBlockType,
+      },
+    },
+    blocks_layout: { items: [id] },
+  };
+}
+
+/**
+ * Recursively discover blocks in data and call the provided callback
+ * @function visitBlocks
+ * @param {Object} content A content data structure (an object with blocks and blocks_layout)
+ * @param {Function} callback A function to call on each discovered block
+ */
+export function visitBlocks(content, callback) {
+  const queue = getBlocks(content);
+  while (queue.length > 0) {
+    const [id, blockdata] = queue.shift();
+    callback([id, blockdata]);
+
+    // assumes that a block value is like: {blocks, blocks_layout} or
+    // { data: {blocks, blocks_layout}}
+    if (Object.keys(blockdata || {}).indexOf('blocks') > -1) {
+      queue.push(...getBlocks(blockdata));
+    }
+    if (Object.keys(blockdata?.data || {}).indexOf('blocks') > -1) {
+      queue.push(...getBlocks(blockdata.data));
+    }
+  }
+}
+
+/**
+ * Initializes data with the default values coming from schema
+ */
+export function applySchemaDefaults({ data = {}, schema }) {
+  const derivedData = {
+    ...Object.keys(schema.properties).reduce((accumulator, currentField) => {
+      return schema.properties[currentField].default
+        ? {
+            ...accumulator,
+            [currentField]: schema.properties[currentField].default,
+          }
+        : accumulator;
+    }, {}),
+    ...data,
+  };
+  return derivedData;
+}
+
+/**
+ * Apply the block's default (as defined in schema) to the block data.
+ *
+ * @function applyBlockDefaults
+ * @param {Object} params An object with data, intl and anything else
+ * @return {Object} Derived data, with the defaults extracted from the schema
+ */
+export function applyBlockDefaults({ data = {}, intl, ...rest }, blocksConfig) {
+  const block_type = data['@type'];
+  const { blockSchema } =
+    (blocksConfig || config.blocks.blocksConfig)[block_type] || {};
+  if (!blockSchema) return data;
+
+  let schema =
+    typeof blockSchema === 'function'
+      ? blockSchema({ data, intl, ...rest })
+      : blockSchema;
+  schema = applySchemaEnhancer({ schema, formData: data, intl });
+
+  return applySchemaDefaults({ data, schema });
+}
+
+export const buildStyleClassNamesFromData = (styles) => {
+  // styles has the form
+  // const styles = {
+  // color: 'red',
+  // backgroundColor: '#AABBCC',
+  // }
+  // Returns: ['has--color--red', 'has--backgroundColor--AABBCC']
+  let styleArray = [];
+  const pairedStyles = toPairs(styles);
+  pairedStyles.forEach((item) => {
+    if (isObject(item[1])) {
+      const flattenedNestedStyles = toPairs(item[1]).map((nested) => [
+        item[0],
+        ...nested,
+      ]);
+      flattenedNestedStyles.forEach((sub) => styleArray.push(sub));
+    } else {
+      styleArray.push(item);
+    }
+  });
+  return styleArray.map((item) => {
+    const classname = item.map((item) => {
+      const str_item = item ? item.toString() : '';
+      return str_item && str_item.startsWith('#')
+        ? str_item.replace('#', '')
+        : str_item;
+    });
+    return `has--${classname[0]}--${classname[1]}${
+      classname[2] ? `--${classname[2]}` : ''
+    }`;
+  });
+};

package/src/index.js

@@ -2,6 +2,7 @@ import { runtimeConfig } from '@plone/volto/runtime_config';
 import installCallout from 'volto-slate/editor/plugins/Callout';
 import installItemBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Item';
 import customizeTeaserBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Teaser';
+import installContextNavigationBlock from '@eeacms/volto-eea-website-policy/components/Blocks/ContextNavigation';
 
 const applyConfig = (config) => {
   // if (process.env.NODE_ENV === 'production') {
@@ -99,10 +100,11 @@ const applyConfig = (config) => {
   }
 
   // Custom blocks
-  config = [installItemBlock, customizeTeaserBlock].reduce(
-    (acc, apply) => apply(acc),
-    config,
-  );
+  config = [
+    installItemBlock,
+    installContextNavigationBlock,
+    customizeTeaserBlock,
+  ].reduce((acc, apply) => apply(acc), config);
   config.blocks.blocksConfig.item.mostUsed = true;
 
   // Disable some blocks