update wrapper classes

kitconcept · Oct 29, 2024 · a79043c · a79043c
1 parent f50828a
commit a79043c
Show file tree

Hide file tree

Showing 4 changed files with 428 additions and 275 deletions.
diff --git a/packages/volto-light-theme/src/components/Blocks/schema.js b/packages/volto-light-theme/src/components/Blocks/schema.js
@@ -32,7 +32,6 @@ export const defaultStylingSchema = ({ schema, formData, intl }) => {
     widget: 'color_picker',
     title: intl.formatMessage(messages.backgroundColor),
     themes,
-    // default: formData?.styles?.['backgroundColor:noprefix'] ?? defaultTheme,
     default: defaultTheme,
   };
 

diff --git a/packages/volto-light-theme/src/config/classExtenders.ts b/packages/volto-light-theme/src/config/classExtenders.ts
@@ -43,25 +43,11 @@ export default function install(config: ConfigType) {
       }
 
       // Given a StyleWrapper defined `backgroundColor` style
-      const previousColor =
-        getCurrentStyleByName(
-          config.settings.backgroundColors,
-          'backgroundColor:noprefix',
-          previousBlock,
-        ) || 'default';
+      const previousColor = previousBlock?.theme || 'default';
 
-      const currentColor =
-        getCurrentStyleByName(
-          config.settings.backgroundColors,
-          'backgroundColor:noprefix',
-          data,
-        ) || 'default';
-      const nextColor =
-        getCurrentStyleByName(
-          config.settings.backgroundColors,
-          'backgroundColor:noprefix',
-          nextBlock,
-        ) || 'default';
+      const currentColor = data?.theme || 'default';
+
+      const nextColor = nextBlock?.theme || 'default';
 
       // Inject a class depending if the previous block has the same `backgroundColor`
       if (currentColor === previousColor) {
@@ -86,7 +72,7 @@ export default function install(config: ConfigType) {
     ({ data, classNames }: { data: any; classNames: Array<string> }) => {
       const currentBlockWidth =
         getCurrentStyleByName(
-          config.settings.blockWidths,
+          config.blocks.widths,
           'blockWidth:noprefix',
           data,
         ) || 'default';
@@ -99,12 +85,7 @@ export default function install(config: ConfigType) {
 
   config.settings.styleClassNameExtenders.push(
     ({ data, classNames }: { data: any; classNames: Array<string> }) => {
-      const currentBlockBackgroundColor =
-        getCurrentStyleByName(
-          config.settings.backgroundColors,
-          'backgroundColor:noprefix',
-          data,
-        ) || 'default';
+      const currentBlockBackgroundColor = data?.theme || 'default';
       if (currentBlockBackgroundColor) {
         // This has intentionally a different class name than in `VLT3`
         return [

diff --git a/packages/volto-light-theme/src/customizations/volto/components/theme/View/RenderBlocks.jsx b/packages/volto-light-theme/src/customizations/volto/components/theme/View/RenderBlocks.jsx
@@ -15,10 +15,10 @@ import React from 'react';
 import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import {
   applyBlockDefaults,
-  buildStyleObjectFromData,
   getBlocksFieldname,
   getBlocksLayoutFieldname,
   hasBlocksData,
+  findStyleByName,
 } from '@plone/volto/helpers/Blocks/Blocks';
 import { defineMessages, useIntl } from 'react-intl';
 import { map } from 'lodash';
@@ -28,7 +28,6 @@ import ViewDefaultBlock from '@plone/volto/components/manage/Blocks/Block/Defaul
 import cx from 'classnames';
 import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import RenderEmptyBlock from '@plone/volto/components/theme/View/RenderEmptyBlock';
-import { getCurrentStyleByName } from '../../../../../helpers/helpers';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -47,12 +46,7 @@ export function groupByBGColor(blocks, blocks_layout, colorDefinitions) {
   let currentBGColor;
 
   blocks_layout.items.forEach((blockId) => {
-    let currentBlockColor =
-      getCurrentStyleByName(
-        colorDefinitions,
-        'backgroundColor:noprefix',
-        blocks[blockId],
-      ) || 'default';
+    let currentBlockColor = blocks[blockId]?.theme || 'default';
     if (currentBlockColor !== currentBGColor) {
       currentBGColor = currentBlockColor;
       // write it only if the array has some block inside
@@ -79,21 +73,12 @@ const RenderBlocks = (props) => {
   const grouped = groupByBGColor(
     content[blocksFieldname],
     content[blocksLayoutFieldname],
-    config.settings.backgroundColors,
+    config.blocks.themes,
   );
 
   return hasBlocksData(content) ? (
     <CustomTag>
       {map(grouped, (group) => {
-        if (
-          content[blocksFieldname][group[0]] &&
-          !content[blocksFieldname][group[0]]?.styles
-        ) {
-          content[blocksFieldname][group[0]].styles = {};
-          content[blocksFieldname][group[0]].styles[
-            'backgroundColor:noprefix'
-          ] = config.settings.backgroundColors[0].style;
-        }
         return (
           <MaybeWrap
             key={`block-group-${group[0]}`}
@@ -103,15 +88,18 @@ const RenderBlocks = (props) => {
             }
             className={cx(
               'blocks-group-wrapper',
-              getCurrentStyleByName(
-                config.settings.backgroundColors,
-                'backgroundColor:noprefix',
-                content[blocksFieldname][group[0]],
-              ) || 'default',
-            )}
-            style={buildStyleObjectFromData(
-              content[blocksFieldname][group[0]]?.styles,
+              content[blocksFieldname][group[0]]?.theme || 'default',
             )}
+            style={
+              findStyleByName(
+                config.blocks.themes,
+                content[blocksFieldname][group[0]]?.theme,
+              ) ||
+              findStyleByName(
+                config.blocks.themes,
+                config.blocks.themes[0].name,
+              )
+            }
           >
             {map(group, (block) => {
               const Block =