Block model v3

.eslintignore

@@ -4,3 +4,4 @@ node_modules
 acceptance
 *.json
 remove_me
+# packages/volto-button-block

BLOCK-MODEL-V3.md

@@ -0,0 +1,97 @@
+# Block Model version 3
+
+## Introduction and history
+
+### DLR Block model (v1)
+
+The block has all the information needed for render itself, but the rules are exhaustive and cumbersome, prone to error if they are not exhaustive enough.
+
+### VLT Block model (v2)
+
+After DLR experience, we tried the approach of using a block wrapper in view mode that would arrange the blocks are grouped by a property (background color) and wrapped in a container. This container is the one having the vertical spacing and the color.
+This proved to simplify CSS dramatically, with the drawback that the wrapper and the arrangement logic should be present in the view mode, being very difficult to do the same in edit mode because of the DandD existing wrappers, so the edit mode renders "ugly" without them.
+
+## Block Model version 3
+
+### View/Edit containers
+
+The block should have the same containers in both View/Edit components, so we can write CSS once that applies to both.
+
+These containers will conform this two level wrappers definitions:
+
+#### Main/Outer container
+
+This is the container that receives the block injected classNames and styles from the StyleWrapper.
+It's the (familiar) `div` that has the `block ${type}` className.
+In View mode it should be provided by the block developer.
+In Edit mode it's part of the edit wrappers: `block-editor-${type}` wrapper, and automatically receives the StyleWrapper injected properties.
+
+The principal responsibility of the Main/Outer container, other than giving the block its background color, is to fit the block into the layout of the page by stacking itself above/below its siblings. It MUST be full width, and go from the left edge to the right edge of the page. It MUST NOT have any margin or padding. The only exception to this is the extra padding that is added for visual coherence when the block's background color is different than the previous or next sibling's background color. 
+
+#### Secondary/Inner container
+
+The Secondary/Inner container takes care of horiztonal (block's content width) and vertical (vertical spacing between siblings) offset. For example, for a block like the Slider, you might want to have a horizontal offset of zero and have the content fill the width of the page. On the other hand, for a Slate with a paragraph of text you might want space offsetting both sides to facilitate readibility and create a cleaner look.
+
+The vertical spatial relationships between contiguous blocks will be defined by the blocks' categories. For example, if a Slate (which has category inline) comes after a Silder (which has category full-width), the latter should add an extra bottom padding to improve the readibility of the following paragraph.
+
+To avoid background color inconsistencies, the vertical offset given by the Secondary/Inner container must be implemented using the padding property. As a general rule—and to establish a convention—the vertical space between two blocks should be provided by the upper block. This means that for most cases, the top of the block's content must be flush with the top of the container.
+
+
+### Block category
+
+A block should be able to be categorized given its nature and visual characteristics. This nature determines how they relate with the other siblings.
+
+This category will help to determine the default behavior of the block by injecting it as a className.
+
+### Improve the edit mode wrappers
+
+We can improve the current edit wrappers, but we have to do it in a non-breaking way.
+
+Current Edit mode wrappers:
+
+```
+.block-editor-$type $StyleWrapperClassNames $StyleWrapperStyles
+  div.[style="position: relative"] (the relative container)
+    div.drag.handle.wrapper (the one of the drag icon)
+    div.ui.drag.block.inner.$type (this is superfluous, but the block classname can't be removed)
+      div.[role="presentation"].block.$type.selected (the state-wrapper, controls the blue border)
+        {Edit component}
+      button.ui.basic.button.delete-button
+```
+
+Proposed wrappers:
+
+Edit
+```
+.block-editor-$type $StyleWrapperClassNames $StyleWrapperStyles
+  div.[style="position: relative"] (the relative container)
+    div.drag.handle.wrapper (the one of the drag icon)
+    div.ui.drag.block.inner.$type (this is superfluous, but the block classname can't be removed)
+      div.[role="presentation"].block.$type.selected category-action
+        <div classname="block-inner-container">
+          {Edit component}
+        </div>
+      button.ui.basic.button.delete-button
+```
+
+View
+```
+<div classname="block button category-action $StyleWrapperClassNames $StyleWrapperStyles">
+  <div classname="block-inner-container">
+    {View component}
+  </div>
+</div>
+```
+
+CSS
+```
+.block-editor-button,
+.button.button {
+  background: var(--background-color)
+}
+```
+
+## Layout and vertical space rules
+
+https://github.com/kitconcept/volto-light-theme#vertical-spacing-rules
+https://github.com/kitconcept/dlr-internet/blob/main/docs/development/layout-rules.md

UPGRADE-GUIDE.md

@@ -19,6 +19,53 @@ The MobileNavigation component was updated to be more easily customizable.
 The component can now handle infinite navigation depth instead of only three levels, if configured to do so.
 The Burger Menu can now be easily customized by overriding the new MobileNavigationToggler.jsx file.
 
+## volto-light-theme 4.0.0
+
+### Block Model v3
+
+Read more details in: https://github.com/kitconcept/volto-light-theme/blob/main/BLOCK-MODEL-V3.md
+
+### Color definitions
+
+The VLT has migrated to use the standardized color definitions in Volto.
+Read more abot them in: https://6.docs.plone.org/volto/development/color-picker-widget.html?highlight=color#color-definitions
+
+Example:
+
+```ts
+config.settings.backgroundColors = [
+  {
+    style: {
+      '--background-color': 'transparent',
+    },
+    name: 'transparent',
+    label: 'Transparent',
+  },
+  {
+    style: {
+      '--background-color': '#ecebeb',
+    },
+    name: 'grey',
+    label: 'Grey',
+  },
+];
+```
+
+using them simplifies a lot internal the CSS used, so VLT moved to use it.
+Tecnically you can still use them, but you'll have to bring back the related CSS classes, specially if you extended the initial color names.
+
+If you want to upgrade, it needs a migration of your blocks.
+This migration is provided in the `migratev3` BrowserView in the backend.
+
+### Block widths
+
+VLT has started to use the standard block width definition as well.
+For now it uses a new widget component that would be ported to Volto core as soon as it's ready.
+This component saves the value of the custom CSS property `--block-width` ias a StyleWrapper value, so it can be used later when the StyleWrapper injects it in the markup.
+
+This is a breaking change, and needs a migration of your blocks.
+This migration is provided in the `migratev3` BrowserView in the backend.
+
 ## volto-light-theme 3.0.0
 
 ### Blocks background colors go full width

mrs.developer.json

@@ -7,11 +7,12 @@
     "tag": "18.0.0-alpha.45"
   },
   "volto-button-block": {
-    "develop": false,
+    "develop": true,
     "output": "packages",
     "package": "@kitconcept/volto-button-block",
     "url": "[email protected]:kitconcept/volto-button-block.git",
-    "https": "https://github.com/kitconcept/volto-button-block.git"
+    "https": "https://github.com/kitconcept/volto-button-block.git",
+    "branch": "main"
   },
   "volto-dsgvo-banner": {
     "develop": false,
@@ -21,11 +22,12 @@
     "https": "https://github.com/kitconcept/volto-dsgvo-banner.git"
   },
   "volto-heading-block": {
-    "develop": false,
+    "develop": true,
     "output": "packages",
     "package": "@kitconcept/volto-heading-block",
     "url": "[email protected]:kitconcept/volto-heading-block.git",
-    "https": "https://github.com/kitconcept/volto-heading-block.git"
+    "https": "https://github.com/kitconcept/volto-heading-block.git",
+    "branch": "blockModelV3"
   },
   "volto-highlight-block": {
     "develop": false,
@@ -42,11 +44,12 @@
     "https": "https://github.com/kitconcept/volto-introduction-block.git"
   },
   "volto-separator-block": {
-    "develop": false,
+    "develop": true,
     "output": "packages",
     "package": "@kitconcept/volto-separator-block",
     "url": "[email protected]:kitconcept/volto-separator-block.git",
-    "https": "https://github.com/kitconcept/volto-separator-block.git"
+    "https": "https://github.com/kitconcept/volto-separator-block.git",
+    "branch": "blockModelV3"
   },
   "volto-slider-block": {
     "develop": false,

package.json

@@ -27,11 +27,12 @@
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "start": "VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto start",
+    "postinstall": "pnpm build:deps",
+    "start": "pnpm build:deps && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto start",
     "start:prod": "pnpm --filter @plone/volto start:prod",
-    "build": "VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto build",
-    "build:deps": "pnpm --filter @plone/registry --filter @plone/components build",
-    "i18n": "pnpm --filter addons i18n",
+    "build": "pnpm build:deps && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto build",
+    "build:deps": "pnpm --parallel --filter @plone/registry --filter @plone/components build",
+    "i18n": "pnpm --filter @kitconcept/volto-light-theme i18n",
     "test": "RAZZLE_JEST_CONFIG=$(pwd)/jest-addon.config.js pnpm --filter @plone/volto test",
     "lint": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --max-warnings=0 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --fix 'packages/**/src/**/*.{js,jsx,ts,tsx}'",

packages/volto-light-theme/package.json

@@ -37,10 +37,16 @@
     "@plone/scripts": "^3.6.2",
     "react-redux": "8.1.2",
     "react-router-dom": "5.2.0",
+    "@plone/types": "workspace:*",
+    "@types/lodash": "^4.14.201",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "release-it": "^17.7.0"
   },
   "dependencies": {
-    "@plone/components": "workspace:*"
+    "@plone/components": "workspace:*",
+    "classnames": "2.5.1",
+    "react-aria-components": "^1.1.1"
   },
   "peerDependencies": {
     "@eeacms/volto-accordion-block": "^10.4.6",
@@ -56,6 +62,8 @@
     "react": "18.2.0",
     "react-intl": "^3.12.1",
     "react-redux": "8.1.2",
-    "react-router-dom": "5.2.0"
+    "react-router-dom": "5.2.0",
+    "react-dom": "18.2.0",
+    "semantic-ui-react": "2.1.5"
   }
 }

packages/volto-light-theme/src/components/Blocks/Button/schema.js

@@ -6,23 +6,40 @@ const messages = defineMessages({
     id: 'Block Width',
     defaultMessage: 'Block Width',
   },
+  Alignment: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
 });
 
 export const ButtonStylingSchema = ({ schema, formData, intl }) => {
   defaultStylingSchema({ schema, formData, intl });
 
+  schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
+    (item) => item !== 'inneralign',
+  );
+
   schema.properties.styles.schema.fieldsets[0].fields = [
-    'buttonAlign',
+    'blockWidth:noprefix',
     ...schema.properties.styles.schema.fieldsets[0].fields,
   ];
 
-  schema.properties.styles.schema.properties.buttonAlign = {
-    widget: 'align',
+  schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
+    widget: 'blockWidth',
     title: intl.formatMessage(messages.BlockWidth),
-    actions: ['center', 'wide'],
+    default: 'default',
+    filterActions: ['narrow', 'default'],
   };
 
-  schema.properties.inneralign.actions = ['left', 'center', 'right'];
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    'align:noprefix',
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+  ];
+
+  schema.properties.styles.schema.properties['align:noprefix'] = {
+    widget: 'blockAlignment',
+    title: intl.formatMessage(messages.Alignment),
+  };
 
   return schema;
 };

packages/volto-light-theme/src/components/Blocks/Separator/schema.js

@@ -0,0 +1,44 @@
+import { defineMessages } from 'react-intl';
+import { defaultStylingSchema } from '../schema';
+
+const messages = defineMessages({
+  BlockWidth: {
+    id: 'Block Width',
+    defaultMessage: 'Block Width',
+  },
+  Alignment: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
+});
+
+export const SeparatorStylingSchema = ({ schema, formData, intl }) => {
+  if (formData?.styles?.shortLine) {
+    schema.properties.styles.schema.fieldsets[0].fields = [
+      'align:noprefix',
+      ...schema.properties.styles.schema.fieldsets[0].fields,
+    ];
+
+    schema.properties.styles.schema.properties['align:noprefix'] = {
+      widget: 'blockAlignment',
+      title: intl.formatMessage(messages.Alignment),
+      default: 'left',
+    };
+  }
+
+  defaultStylingSchema({ schema, formData, intl });
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    'blockWidth:noprefix',
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+  ];
+
+  schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
+    widget: 'blockWidth',
+    title: intl.formatMessage(messages.BlockWidth),
+    default: 'default',
+    filterActions: ['narrow', 'default'],
+  };
+
+  return schema;
+};