BlockStyleWrapper aware of block themes

packages/types/src/blocks/index.d.ts

@@ -120,3 +120,15 @@ export interface BlockEditProps {
   errors: Record<string, Array<string>>;
   blocksErrors: Record<string, Record<string, Array<string>>>;
 }
+
+export type StyleDefinition =
+  | {
+      name: string;
+      label: string;
+      style: Record<`--${string}`, string>;
+    }
+  | {
+      name: string;
+      label: string;
+      style: undefined;
+    };

packages/types/src/config/Blocks.d.ts

@@ -2,13 +2,16 @@ import type { Content } from '../content';
 import type { BlockViewProps, BlockEditProps } from '../blocks';
 import type { IntlShape } from 'react-intl';
 import { User } from '../services';
+import { StyleDefinition } from '../blocks';
 
 export interface BlocksConfig {
   blocksConfig: BlocksConfigData;
   groupBlocksOrder: { id: string; title: string };
   requiredBlocks: string[];
   initialBlocks: Record<string, string[]> | Record<string, object[]>;
   initialBlocksFocus: Record<string, string>;
+  themes: StyleDefinition[];
+  widths: StyleDefinition[];
 }
 
 export interface BlocksConfigData {

packages/volto/news/6445.feature

@@ -0,0 +1 @@
+Enhance the `buildStyleObjectFromData` helper. @sneridagh

packages/volto/src/components/manage/Blocks/Block/EditBlockWrapper.jsx

@@ -69,7 +69,7 @@ const EditBlockWrapper = (props) => {
     data,
     classNames,
   });
-  const style = buildStyleObjectFromData(data.styles);
+  const style = buildStyleObjectFromData(data);
 
   // We need to merge the StyleWrapper styles with the draggable props from b-D&D
   const styleMergedWithDragProps = {

packages/volto/src/components/manage/Blocks/Block/StyleWrapper.jsx

@@ -19,7 +19,7 @@ const StyleWrapper = (props) => {
     classNames,
   });
 
-  style = buildStyleObjectFromData(data.styles);
+  style = buildStyleObjectFromData(data);
 
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {

packages/volto/src/helpers/Blocks/Blocks.js

@@ -629,51 +629,91 @@ export const styleDataToStyleObject = (key, value, prefix = '') => {
  * Generate styles object from data
  *
  * @function buildStyleObjectFromData
- * @param {Object} obj A style wrapper object data
+ * @param {Object} data A block data object
  * @param {string} prefix The prefix (could be dragged from a recursive call, initially empty)
  * @return {Object} The style object ready to be passed as prop
  */
-export const buildStyleObjectFromData = (obj = {}, prefix = '') => {
+export const buildStyleObjectFromData = (data = {}, prefix = '') => {
   // style wrapper object has the form:
   // const styles = {
   //   color: 'red',
   //   '--background-color': '#AABBCC',
   // }
   // Returns: {'--background-color: '#AABBCC'}
 
-  return Object.fromEntries(
-    Object.entries(obj)
-      .filter(([k, v]) => k.startsWith('--') || isObject(v))
-      .reduce(
-        (acc, [k, v]) => [
-          ...acc,
-          // Kept for easy debugging
-          // ...(() => {
-          //   if (isObject(v)) {
-          //     return Object.entries(
-          //       buildStyleObjectFromData(
-          //         v,
-          //         `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`,
-          //       ),
-          //     );
-          //   }
-          //   return [styleDataToStyleObject(k, v, prefix)];
-          // })(),
-          ...(isObject(v)
-            ? Object.entries(
-                buildStyleObjectFromData(
-                  v,
-                  `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`, // We don't add a prefix if the key ends with the marker suffix
-                ),
-              )
-            : [styleDataToStyleObject(k, v, prefix)]),
-        ],
-        [],
-      )
-      .filter((v) => !!v),
-  );
+  function recursiveBuildStyleObjectFromData(obj, prefix) {
+    return Object.fromEntries(
+      Object.entries(obj)
+        .filter(([k, v]) => k.startsWith('--') || isObject(v))
+        .reduce(
+          (acc, [k, v]) => [
+            ...acc,
+            // Kept for easy debugging
+            // ...(() => {
+            //   if (isObject(v)) {
+            //     return Object.entries(
+            //       buildStyleObjectFromData(
+            //         v,
+            //         `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`,
+            //       ),
+            //     );
+            //   }
+            //   return [styleDataToStyleObject(k, v, prefix)];
+            // })(),
+            ...(isObject(v)
+              ? Object.entries(
+                  recursiveBuildStyleObjectFromData(
+                    v,
+                    `${k.endsWith(':noprefix') ? '' : `${prefix}${k}--`}`, // We don't add a prefix if the key ends with the marker suffix
+                  ),
+                )
+              : [styleDataToStyleObject(k, v, prefix)]),
+          ],
+          [],
+        )
+        .filter((v) => !!v),
+    );
+  }
+
+  // If the block has a `@type`, it's a full data block object
+  // Then apply the style enhancers
+  if (data['@type']) {
+    const styleObj = data.styles || {};
+    const stylesFromCSSproperties = recursiveBuildStyleObjectFromData(
+      styleObj,
+      prefix,
+    );
+
+    let stylesFromObjectStyleEnhancers = {};
+    const enhancers = config.getUtilities({
+      type: 'styleWrapperStyleObjectEnhancer',
+    });
+
+    enhancers.forEach(({ method }) => {
+      stylesFromObjectStyleEnhancers = {
+        ...stylesFromObjectStyleEnhancers,
+        ...method(data),
+      };
+    });
+
+    return { ...stylesFromCSSproperties, ...stylesFromObjectStyleEnhancers };
+  } else {
+    return recursiveBuildStyleObjectFromData(data, prefix);
+  }
 };
 
+/**
+ * Find a matching style by name given a style definition
+ *
+ * @function findStyleByName
+ * @param {Object} styleDefinitions An object with the style definitions
+ * @param {string} name The name of the style to find
+ * @return {Object} The style object of the matching name
+ */
+export function findStyleByName(styleDefinitions, name) {
+  return styleDefinitions.find((color) => color.name === name)?.style;
+}
+
 /**
  * Return previous/next blocks given the content object and the current block id
  *