update block schema & cleanup

kitconcept · Jun 12, 2024 · 487f7a0 · 487f7a0
1 parent 825c330
commit 487f7a0
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 123 deletions.
diff --git a/mrs.developer.json b/mrs.developer.json
@@ -12,7 +12,7 @@
     "package": "@kitconcept/volto-button-block",
     "url": "[email protected]:kitconcept/volto-button-block.git",
     "https": "https://github.com/kitconcept/volto-button-block.git",
-    "branch": "blockModelV3"
+    "branch": "main"
   },
   "volto-dsgvo-banner": {
     "develop": false,

diff --git a/packages/volto-light-theme/src/components/Blocks/Button/schema.js b/packages/volto-light-theme/src/components/Blocks/Button/schema.js
@@ -15,6 +15,10 @@ const messages = defineMessages({
 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 = [
     'blockWidth:noprefix',
     ...schema.properties.styles.schema.fieldsets[0].fields,

diff --git a/packages/volto-light-theme/src/components/Blocks/Separator/schema.js b/packages/volto-light-theme/src/components/Blocks/Separator/schema.js
@@ -22,6 +22,7 @@ export const SeparatorStylingSchema = ({ schema, formData, intl }) => {
     schema.properties.styles.schema.properties['align:noprefix'] = {
       widget: 'blockAlignment',
       title: intl.formatMessage(messages.Alignment),
+      default: 'left',
     };
   }
 

diff --git a/packages/volto-light-theme/src/components/Blocks/schema.js b/packages/volto-light-theme/src/components/Blocks/schema.js
@@ -10,30 +10,28 @@ const messages = defineMessages({
 });
 
 export const defaultStylingSchema = ({ schema, formData, intl }) => {
-  // TODO: remove and use the config.settings.backgroundColors as default below too
-  const BG_COLORS = [
-    { name: 'white', label: 'White' },
-    { name: 'grey', label: 'Grey' },
-  ];
-
-  const colors =
-    config.blocks?.blocksConfig?.[formData['@type']]?.colors || BG_COLORS;
-
-  const defaultBGColor =
-    config.blocks?.blocksConfig?.[formData['@type']]?.defaultBGColor;
-
   addStyling({ schema, intl });
 
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-    'backgroundColor:noprefix',
-  ];
-  schema.properties.styles.schema.properties['backgroundColor:noprefix'] = {
-    widget: 'color_picker',
-    title: intl.formatMessage(messages.backgroundColor),
-    colors,
-    default: defaultBGColor,
-  };
+  if (config.settings.backgroundColors) {
+    const colors =
+      config.blocks?.blocksConfig?.[formData['@type']]?.colors ||
+      config.settings.backgroundColors;
+
+    const defaultBGColor =
+      config.blocks?.blocksConfig?.[formData['@type']]?.defaultBGColor ||
+      config.settings.backgroundColors[0];
+
+    schema.properties.styles.schema.fieldsets[0].fields = [
+      'backgroundColor:noprefix',
+      ...schema.properties.styles.schema.fieldsets[0].fields,
+    ];
+    schema.properties.styles.schema.properties['backgroundColor:noprefix'] = {
+      widget: 'color_picker',
+      title: intl.formatMessage(messages.backgroundColor),
+      colors,
+      default: defaultBGColor,
+    };
+  }
 
   return schema;
 };

diff --git a/packages/volto-light-theme/src/helpers/index.ts b/packages/volto-light-theme/src/helpers/index.ts
@@ -1,3 +1,5 @@
+import find from 'lodash/find';
+
 export function isEqual(x: any, y: any): boolean {
   const ok = Object.keys,
     tx = typeof x,
@@ -8,4 +10,28 @@ export function isEqual(x: any, y: any): boolean {
     : x === y;
 }
 
+type StyleDefinition = {
+  style: Record<string, string>;
+  name: string;
+  label: string;
+};
+
+export function getCurrentStyleByName(
+  styleDefinitions: Array<StyleDefinition>,
+  fieldName: string,
+  block: any,
+) {
+  let currentBlockColor;
+  let currentBlockStyle = block?.styles?.[fieldName];
+  // Find in color definitions the current style value
+  if (currentBlockStyle) {
+    const foundStyle = find(styleDefinitions, {
+      style: currentBlockStyle,
+    });
+    currentBlockColor = foundStyle?.name;
+  }
+
+  return currentBlockColor;
+}
+
 export * from './grouping';
diff --git a/packages/volto-light-theme/src/index.js b/packages/volto-light-theme/src/index.js
@@ -1,7 +1,8 @@
 import { defineMessages } from 'react-intl';
-import { cloneDeep, find } from 'lodash';
+import { cloneDeep } from 'lodash';
 
 import { composeSchema, getPreviousNextBlock } from '@plone/volto/helpers';
+import { getCurrentStyleByName } from '../src/helpers/index';
 import {
   defaultStylingSchema,
   removeStylingSchema,
@@ -39,11 +40,6 @@ import EventMetadataView from './components/Blocks/EventMetadata/View';
 import BlockWidthWidget from './components/Widgets/BlockWidthWidget';
 import BlockAlignmentWidget from './components/Widgets/BlockAlignmentWidget';
 
-const BG_COLORS = [
-  { name: 'white', label: 'White' },
-  { name: 'grey', label: 'Grey' },
-];
-
 defineMessages({
   Press: {
     id: 'Press',
@@ -55,19 +51,6 @@ defineMessages({
   },
 });
 
-function getCurrentStyleName(colorDefinitions, block) {
-  let currentBlockColor;
-  let currentBlockStyle = block?.styles?.['backgroundColor:noprefix'];
-  // Find in color definitions the current style value
-  if (currentBlockStyle) {
-    currentBlockColor = find(colorDefinitions, {
-      style: currentBlockStyle,
-    }).name;
-  }
-
-  return currentBlockColor;
-}
-
 const applyConfig = (config) => {
   config.settings.blockModel = 3;
   config.settings.enableAutoBlockGroupingByBackgroundColor = true;
@@ -79,19 +62,23 @@ const applyConfig = (config) => {
   config.settings.backgroundColors = [
     {
       style: {
-        '--background-color': 'white',
+        '--background-color': '#fff',
+        '--font-color': '#000',
       },
       name: 'white',
-      label: 'Transparent',
+      label: 'White',
     },
     {
       style: {
         '--background-color': '#ecebeb',
+        '--font-color': '#000',
       },
       name: 'grey',
       label: 'Grey',
     },
   ];
+  // TODO: The first item is considered the default option, it could be some other way
+  const defaultColor = config.settings.backgroundColors[0];
 
   config.widgets.widget.blockWidth = BlockWidthWidget;
   config.widgets.widget.blockAlignment = BlockAlignmentWidget;
@@ -171,14 +158,14 @@ const applyConfig = (config) => {
       const previousColor =
         previousBlock?.styles?.['backgroundColor:noprefix']?.[
           '--background-color'
-        ] ?? 'white';
+        ] ?? defaultColor?.['--background-color'];
       const currentColor =
         data?.styles?.['backgroundColor:noprefix']?.['--background-color'] ??
-        'white';
+        defaultColor?.['--background-color'];
       const nextColor =
         nextBlock?.styles?.['backgroundColor:noprefix']?.[
           '--background-color'
-        ] ?? 'white';
+        ] ?? defaultColor?.['--background-color'];
 
       // Inject a class depending if the previous block has the same `backgroundColor`
       if (currentColor === previousColor) {
@@ -196,14 +183,13 @@ const applyConfig = (config) => {
 
       // Convenience class for the current block's background color for not having to
       // rely on a style color selector
-      if (getCurrentStyleName(config.settings.backgroundColors, data)) {
-        styles.push(
-          `has--backgroundColor--${getCurrentStyleName(
-            config.settings.backgroundColors,
-            data,
-          )}`,
-        );
-      }
+      const currentColorName =
+        getCurrentStyleByName(
+          config.settings.backgroundColors,
+          'backgroundColor:noprefix',
+          data,
+        ) || defaultColor?.name;
+      styles.push(`has--backgroundColor--${currentColorName}`);
 
       return [...classNames, ...styles];
     },
@@ -230,7 +216,6 @@ const applyConfig = (config) => {
       'slateTable',
       'separator',
     ],
-    colors: BG_COLORS,
     schemaEnhancer: composeSchema(
       AccordionSchemaEnhancer,
       defaultStylingSchema,
@@ -241,13 +226,11 @@ const applyConfig = (config) => {
   config.blocks.blocksConfig.slateTable = {
     ...config.blocks.blocksConfig.slateTable,
     schemaEnhancer: defaultStylingSchema,
-    colors: BG_COLORS,
     sidebarTab: 1,
   };
 
   config.blocks.blocksConfig.listing = {
     ...config.blocks.blocksConfig.listing,
-    colors: BG_COLORS,
     schemaEnhancer: defaultStylingSchema,
     allowed_headline_tags: [['h2', 'h2']],
     variations: [
@@ -276,7 +259,8 @@ const applyConfig = (config) => {
   config.blocks.blocksConfig.accordion.blocksConfig.teaser.schemaEnhancer =
     composeSchema(teaserSchemaEnhancer, disableBgColorSchema);
 
-  config.blocks.blocksConfig.gridBlock.colors = BG_COLORS;
+  config.blocks.blocksConfig.gridBlock.colors =
+    config.settings.backgroundColors;
   config.blocks.blocksConfig.gridBlock.schemaEnhancer = defaultStylingSchema;
   config.blocks.blocksConfig.gridBlock.icon = gridSVG;
 
@@ -316,7 +300,6 @@ const applyConfig = (config) => {
   config.blocks.blocksConfig.slate = {
     ...config.blocks.blocksConfig.slate,
     category: 'inline',
-    colors: config.settings.backgroundColors,
     schemaEnhancer: defaultStylingSchema,
     sidebarTab: 1,
     blockModel: 3,
@@ -326,21 +309,18 @@ const applyConfig = (config) => {
     ...config.blocks.blocksConfig.teaser,
     group: 'teasers',
     imageScale: 'larger',
-    colors: BG_COLORS,
     schemaEnhancer: composeSchema(defaultStylingSchema, teaserSchemaEnhancer),
   };
 
   config.blocks.blocksConfig.video = {
     ...config.blocks.blocksConfig.video,
-    colors: BG_COLORS,
     schemaEnhancer: composeSchema(
       defaultStylingSchema,
       videoBlockSchemaEnhancer,
     ),
   };
   config.blocks.blocksConfig.maps = {
     ...config.blocks.blocksConfig.maps,
-    colors: BG_COLORS,
     schemaEnhancer: composeSchema(
       defaultStylingSchema,
       mapsBlockSchemaEnhancer,
@@ -351,7 +331,6 @@ const applyConfig = (config) => {
     ...config.blocks.blocksConfig.heading,
     sidebarTab: 0,
     allowed_headings: [['h2', 'h2']],
-    colors: BG_COLORS,
     schemaEnhancer: defaultStylingSchema,
     blockModel: config.settings.blockModel,
     category: 'heading',
@@ -373,7 +352,6 @@ const applyConfig = (config) => {
   config.blocks.blocksConfig.__button = {
     ...config.blocks.blocksConfig.__button,
     schemaEnhancer: ButtonStylingSchema,
-    colors: BG_COLORS,
     blockModel: config.settings.blockModel,
     sidebarTab: 1,
   };
@@ -400,7 +378,6 @@ const applyConfig = (config) => {
         config.blocks.blocksConfig.separator.schemaEnhancer,
         SeparatorStylingSchema,
       ),
-      colors: BG_COLORS,
       blockModel: config.settings.blockModel,
       category: 'separator',
     };

diff --git a/packages/volto-light-theme/src/theme/_layout.scss b/packages/volto-light-theme/src/theme/_layout.scss
@@ -400,6 +400,10 @@ External link removal for all the blocks.
     flex-direction: row-reverse;
     width: 100%;
 
+    .ui.basic.button {
+      line-height: 1rem;
+    }
+
     .ui.basic.button.delete-button {
       background: $white !important;
       border-radius: 50% !important;

diff --git a/packages/volto-light-theme/src/theme/_toolbar.scss b/packages/volto-light-theme/src/theme/_toolbar.scss
@@ -9,23 +9,3 @@
       0px 3px 3px 0px rgba(0, 0, 0, 0.23);
   }
 }
-
-#sidebar-properties {
-  .field.widget {
-    .buttons {
-      display: flex;
-      align-items: center;
-
-      button {
-        aspect-ratio: 1/1;
-        padding: 5px;
-        &[data-hovered='true'] {
-          box-shadow: inset 0 0 0 2px rgba(0, 112, 162, 0.5);
-        }
-        &.active {
-          box-shadow: inset 0 0 0 2px rgb(0, 112, 162);
-        }
-      }
-    }
-  }
-}
diff --git a/packages/volto-light-theme/src/theme/_typo-custom.scss b/packages/volto-light-theme/src/theme/_typo-custom.scss
@@ -7,12 +7,16 @@ h5,
 h6,
 p,
 a,
-li {
+li { 
+  @include body-text();
   font-family: $page-font;
   font-style: normal;
-  @include body-text();
+  color: var(--font-color, #000)
+
 }
 
+
+
 @mixin word-break {
   -ms-hyphens: auto;
   -moz-hyphens: auto;

diff --git a/packages/volto-light-theme/src/theme/_widgets.scss b/packages/volto-light-theme/src/theme/_widgets.scss
@@ -0,0 +1,19 @@
+#sidebar-properties {
+    .field.widget {
+      .buttons {
+        display: flex;
+        align-items: center;
+
+        button {
+          aspect-ratio: 1/1;
+          padding: 5px;
+          &[data-hovered='true'] {
+            box-shadow: inset 0 0 0 2px rgba(0, 112, 162, 0.5);
+          }
+          &.active {
+            box-shadow: inset 0 0 0 2px rgb(0, 112, 162);
+          }
+        }
+      }
+    }
+  }
diff --git a/packages/volto-light-theme/src/theme/blocks/_slate.scss b/packages/volto-light-theme/src/theme/blocks/_slate.scss
@@ -31,4 +31,10 @@
     left: unset !important;
     z-index: 100;
   }
+
+  &.previous--has--different--backgroundColor {
+    .slate-editor.selected .power-user-menu {
+      margin-top: $spacing-xlarge;
+    }
+  }
 }