@kitconcept/volto-light-theme 5.0.0 → 6.0.0-alpha.0

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

@@ -3,24 +3,28 @@
  * REASON: This version enables auto-grouping of blocks that share the same style property
  * in the StylingWrapper. In the future one could improve it by enabling a way to choose the
  * grouping property, eg. using a property other than `backgroundColor`.
- * FILE: https://github.com/plone/volto/blob/9882c66da42e5440ca1c949d829b78f2b1328683/src/components/theme/View/RenderBlocks.jsx#L25
- * FILE VERSION: Volto 17.0.0-alpha.16
- * DATE: 2023-06-28
+ * UPDATE 2024-01-11: This allows now the grouping using injected style custom CSS properties from
+ * the StyleWrapper.
+ * FILE: https://github.com/kitconcept/volto-light-theme/blob/dcd5d46f683c42ac9465098272714359d8f1fb92/src/customizations/volto/components/theme/View/RenderBlocks.jsx
+ * FILE VERSION: volto-light-theme 3.0.0-alpha.1
+ * DATE: 2024-01-11
  * DEVELOPER: @sneridagh
  */
 
 import React from 'react';
-import { getBaseUrl, applyBlockDefaults } from '@plone/volto/helpers';
-import { defineMessages, useIntl } from 'react-intl';
-import { map } from 'lodash';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import {
+  applyBlockDefaults,
   getBlocksFieldname,
   getBlocksLayoutFieldname,
   hasBlocksData,
-} from '@plone/volto/helpers';
+  findStyleByName,
+} from '@plone/volto/helpers/Blocks/Blocks';
+import { defineMessages, useIntl } from 'react-intl';
+import { map } from 'lodash';
 import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
 import config from '@plone/volto/registry';
-import { ViewDefaultBlock } from '@plone/volto/components';
+import ViewDefaultBlock from '@plone/volto/components/manage/Blocks/Block/DefaultView';
 import cx from 'classnames';
 import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import RenderEmptyBlock from '@plone/volto/components/theme/View/RenderEmptyBlock';
@@ -36,15 +40,13 @@ const messages = defineMessages({
   },
 });
 
-export function groupByBGColor(blocks, blocks_layout) {
+export function groupByBGColor(blocks, blocks_layout, colorDefinitions) {
   const result = [];
   let currentArr = [];
   let currentBGColor;
 
   blocks_layout.items.forEach((blockId) => {
-    let currentBlockColor =
-      blocks[blockId]?.styles?.backgroundColor ?? 'transparent';
-
+    let currentBlockColor = blocks[blockId]?.theme || 'default';
     if (currentBlockColor !== currentBGColor) {
       currentBGColor = currentBlockColor;
       // write it only if the array has some block inside
@@ -71,90 +73,105 @@ const RenderBlocks = (props) => {
   const grouped = groupByBGColor(
     content[blocksFieldname],
     content[blocksLayoutFieldname],
+    config.blocks.themes,
   );
 
   return hasBlocksData(content) ? (
     <CustomTag>
-      {map(grouped, (group) => (
-        <MaybeWrap
-          key={`block-group-${group[0]}`}
-          condition={
-            config.settings.enableAutoBlockGroupingByBackgroundColor &&
-            !isContainer
-          }
-          className={cx(
-            'blocks-group-wrapper',
-            content[blocksFieldname][group[0]]?.styles?.backgroundColor ??
-              'transparent',
-          )}
-        >
-          {map(group, (block) => {
-            const Block =
-              blocksConfig[content[blocksFieldname]?.[block]?.['@type']]
-                ?.view || ViewDefaultBlock;
+      {map(grouped, (group) => {
+        const themes =
+          config.blocks.blocksConfig[
+            content[blocksFieldname][group[0]]['@type']
+          ].themes ?? config.blocks.themes;
 
-            const blockData = applyBlockDefaults({
-              data: content[blocksFieldname][block],
-              intl,
-              metadata,
-              properties: content,
-            });
-
-            if (content[blocksFieldname]?.[block]?.['@type'] === 'empty') {
-              return (
-                <MaybeWrap
-                  key={block}
-                  condition={blockWrapperTag}
-                  as={blockWrapperTag}
-                >
-                  <RenderEmptyBlock />
-                </MaybeWrap>
-              );
+        return (
+          <MaybeWrap
+            key={`block-group-${group[0]}`}
+            condition={
+              config.settings.enableAutoBlockGroupingByBackgroundColor &&
+              !isContainer
             }
+            className={cx(
+              'blocks-group-wrapper',
+              content[blocksFieldname][group[0]]?.theme || 'default',
+            )}
+            style={
+              findStyleByName(
+                themes,
+                content[blocksFieldname][group[0]]?.theme,
+              ) || findStyleByName(themes, config.blocks.themes[0].name)
+            }
+          >
+            {map(group, (block) => {
+              const Block =
+                blocksConfig[content[blocksFieldname]?.[block]?.['@type']]
+                  ?.view || ViewDefaultBlock;
 
-            if (Block) {
-              return (
-                <MaybeWrap
-                  key={block}
-                  condition={blockWrapperTag}
-                  as={blockWrapperTag}
-                >
-                  <StyleWrapper
+              const blockData = applyBlockDefaults({
+                data: content[blocksFieldname][block],
+                intl,
+                metadata,
+                properties: content,
+              });
+
+              if (content[blocksFieldname]?.[block]?.['@type'] === 'empty') {
+                return (
+                  <MaybeWrap
                     key={block}
-                    {...props}
-                    id={block}
-                    block={block}
-                    data={blockData}
+                    condition={blockWrapperTag}
+                    as={blockWrapperTag}
                   >
-                    <Block
+                    <RenderEmptyBlock />
+                  </MaybeWrap>
+                );
+              }
+
+              if (Block) {
+                return (
+                  <MaybeWrap
+                    key={block}
+                    condition={blockWrapperTag}
+                    as={blockWrapperTag}
+                  >
+                    <StyleWrapper
+                      key={block}
+                      {...props}
                       id={block}
-                      metadata={metadata}
-                      properties={content}
+                      block={block}
                       data={blockData}
-                      path={getBaseUrl(location?.pathname || '')}
-                      blocksConfig={blocksConfig}
-                    />
-                  </StyleWrapper>
-                </MaybeWrap>
-              );
-            }
+                    >
+                      <Block
+                        id={block}
+                        metadata={metadata}
+                        properties={content}
+                        data={blockData}
+                        path={getBaseUrl(location?.pathname || '')}
+                        blocksConfig={blocksConfig}
+                      />
+                    </StyleWrapper>
+                  </MaybeWrap>
+                );
+              }
+
+              if (blockData) {
+                return (
+                  <div key={block}>
+                    {intl.formatMessage(messages.unknownBlock, {
+                      block: content[blocksFieldname]?.[block]?.['@type'],
+                    })}
+                  </div>
+                );
+              }
 
-            if (blockData) {
               return (
                 <div key={block}>
-                  {intl.formatMessage(messages.unknownBlock, {
-                    block: content[blocksFieldname]?.[block]?.['@type'],
-                  })}
+                  {intl.formatMessage(messages.invalidBlock)}
                 </div>
               );
-            }
-
-            return (
-              <div key={block}>{intl.formatMessage(messages.invalidBlock)}</div>
-            );
-          })}
-        </MaybeWrap>
-      ))}
+            })}
+          </MaybeWrap>
+        );
+      })}
     </CustomTag>
   ) : (
     ''

package/src/customizations/volto/components/theme/View/RenderBlocks.test.jsx

@@ -11,9 +11,7 @@ describe('groupByBGColor', () => {
         },
         3: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
       },
       blocks_layout: {
@@ -32,15 +30,11 @@ describe('groupByBGColor', () => {
         },
         2: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         3: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
       },
       blocks_layout: {
@@ -56,21 +50,15 @@ describe('groupByBGColor', () => {
       blocks: {
         1: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         2: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         3: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
       },
       blocks_layout: {
@@ -86,18 +74,14 @@ describe('groupByBGColor', () => {
       blocks: {
         1: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         2: {
           '@type': 'slate',
         },
         3: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
       },
       blocks_layout: {
@@ -123,15 +107,11 @@ describe('groupByBGColor', () => {
         },
         3: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         4: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         5: {
           '@type': 'slate',
@@ -169,15 +149,11 @@ describe('groupByBGColor', () => {
         },
         3: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         4: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         5: {
           '@type': 'slate',
@@ -221,15 +197,11 @@ describe('groupByBGColor', () => {
         },
         3: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         4: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         5: {
           '@type': 'slate',
@@ -270,15 +242,11 @@ describe('groupByBGColor', () => {
         },
         4: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         5: {
           '@type': 'slate',
-          styles: {
-            backgroundColor: 'grey',
-          },
+          theme: 'grey',
         },
         6: {
           '@type': 'slate',

package/src/helpers/helpers.test.ts

@@ -0,0 +1,51 @@
+import { getCurrentStyleByName } from './helpers';
+
+describe('getCurrentStyleByName', () => {
+  const styleDefinitions = [
+    {
+      style: { color: 'red' },
+      name: 'Red',
+      label: 'Red',
+    },
+    {
+      style: { color: 'blue' },
+      name: 'Blue',
+      label: 'Blue',
+    },
+  ];
+
+  it('should return the current block color when it exists in style definitions', () => {
+    const fieldName = 'color';
+    const block = {
+      styles: {
+        color: { color: 'red' },
+      },
+    };
+
+    const result = getCurrentStyleByName(styleDefinitions, fieldName, block);
+
+    expect(result).toBe('Red');
+  });
+
+  it('should return undefined when the current block style does not exist in style definitions', () => {
+    const fieldName = 'color';
+    const block = {
+      styles: {
+        color: { color: 'green' },
+      },
+    };
+
+    const result = getCurrentStyleByName(styleDefinitions, fieldName, block);
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should return undefined when the block styles object is undefined', () => {
+    const fieldName = 'color';
+    const block = {};
+
+    const result = getCurrentStyleByName(styleDefinitions, fieldName, block);
+
+    expect(result).toBeUndefined();
+  });
+});

package/src/helpers/helpers.ts

@@ -0,0 +1,48 @@
+import type { StyleDefinition } from '@plone/types';
+import { v4 as uuid } from 'uuid';
+import find from 'lodash/find';
+
+/**
+ * Generate empty blocks blocks/blocks_layout pair given the type
+ * (could be empty, if not type given) and the number of blocks
+ * @function blocksFormGenerator
+ * @param number How many blocks to generate of the type (could be "empty", if no type provided)
+ * @param type The type of the blocks
+ * @return  pair filled with the generated blocks
+ */
+export function blocksFormGenerator(number: number, type: string, data: any) {
+  const idMap = [...Array(number).keys()].map(() => uuid());
+  const start = {
+    blocks: {},
+    blocks_layout: { items: idMap },
+  };
+
+  return {
+    ...start,
+    ...data,
+    blocks: Object.fromEntries(
+      start.blocks_layout.items.map((item) => [
+        item,
+        { '@type': type || 'empty' },
+      ]),
+    ),
+  };
+}
+
+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;
+}

package/src/index.ts

@@ -0,0 +1,54 @@
+import type { ConfigType } from '@plone/registry';
+
+import { defineMessages } from 'react-intl';
+import { Container } from '@plone/components';
+
+import EventView from './components/Theme/EventView';
+
+import { migrateToVLT6ColorAndWidthModel } from './transforms/to6';
+
+import installSettings from './config/settings';
+import installBlocks from './config/blocks';
+import installClassExtenders from './config/classExtenders';
+import installWidgets from './config/widgets';
+import installSlots from './config/slots';
+
+import '@plone/components/dist/basic.css';
+
+defineMessages({
+  Press: {
+    id: 'Press',
+    defaultMessage: 'Press',
+  },
+  Sitemap: {
+    id: 'Sitemap',
+    defaultMessage: 'Sitemap',
+  },
+});
+
+const applyConfig = (config: ConfigType) => {
+  installSettings(config);
+  installBlocks(config);
+  installClassExtenders(config);
+  installWidgets(config);
+  installSlots(config);
+
+  // Register a custom Container component from @plone/components
+  config.registerComponent({
+    name: 'Container',
+    component: Container,
+  });
+
+  config.registerUtility({
+    name: 'migrateToVLT6ColorAndWidthModel',
+    type: 'transform',
+    dependencies: { reducer: 'content' },
+    method: migrateToVLT6ColorAndWidthModel,
+  });
+
+  config.views.contentTypesViews.Event = EventView;
+
+  return config;
+};
+
+export default applyConfig;