Reorganize components;

src/BlockStyleWrapper/Edit.jsx → src/BlockStyleWrapper/BlockStyleWrapperEdit.jsx

@@ -4,7 +4,7 @@ import { StyleWrapperEdit, StyleWrapperView } from '../StyleWrapper';
 // For blocks, store the style data in data.styles, then
 // adapt the data.styles.[align,size,...] info to default data.align, data.size, etc.
 
-export default (props) => {
+const BlockStyleWrapperEdit = (props) => {
   const { block, data = {}, onChangeBlock } = props;
 
   return (
@@ -32,3 +32,5 @@ export default (props) => {
     </StyleWrapperEdit>
   );
 };
+
+export default BlockStyleWrapperEdit;

src/BlockStyleWrapper/View.jsx → src/BlockStyleWrapper/BlockStyleWrapperView.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleWrapperView } from '../StyleWrapper';
 
-export default ({ data, children }) => (
+const BlockStyleWrapperView = ({ data, children }) => (
   <StyleWrapperView data={data.styles || {}}>{children}</StyleWrapperView>
 );
+export default BlockStyleWrapperView;

src/BlockStyleWrapper/index.js

@@ -0,0 +1,2 @@
+export BlockStyleWrapperEdit from './BlockStyleWrapperEdit';
+export BlockStyleWrapperView from './BlockStyleWrapperView';

src/StyleWrapper/StyleWrapperEdit.jsx

@@ -8,7 +8,7 @@ import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import { StyleSchema } from './schema';
 import clearSVG from '@plone/volto/icons/clear.svg';
 
-export default (props) => {
+const StyleWrapperEdit = (props) => {
   const { children, selected, onChangeValue, data } = props;
   const [isOpen, setIsOpen] = React.useState(false);
   const nodeRef = React.useRef();
@@ -82,3 +82,5 @@ export default (props) => {
     </>
   );
 };
+
+export default StyleWrapperEdit;

src/StyleWrapper/StyleWrapperView.jsx

@@ -17,15 +17,18 @@ export function getStyle(name) {
   return pluggableStyles.find(({ id }) => id === name);
 }
 
-export default (props) => {
+const StyleWrapperView = (props) => {
   const { data = {}, children } = props;
   const { style_name, align, size } = data;
   const style = getStyle(style_name);
   const inlineStyles = getInlineStyles(data);
   const ViewComponentWrapper = style?.viewComponent;
 
   return Object.keys(inlineStyles).length > 0 || style || align || size ? (
-    <div className={cx(style?.cssClass, { align }, align)} style={inlineStyles}>
+    <div
+      className={cx('styled', style?.cssClass, { align }, align)}
+      style={inlineStyles}
+    >
       {size ? (
         <div
           className={cx({
@@ -53,3 +56,5 @@ export default (props) => {
     children
   );
 };
+
+export default StyleWrapperView;

src/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import BlockStyleWrapperEdit from './BlockStyleWrapper/Edit';
-import BlockStyleWrapperView from './BlockStyleWrapper/View';
+import {
+  BlockStyleWrapperEdit,
+  BlockStyleWrapperView,
+} from './BlockStyleWrapper';
 import StyleSelectWidget from './Widgets/StyleSelect';
 import AlignWidget from './Widgets/Align';
 import TextAlignWidget from './Widgets/TextAlign';
@@ -28,11 +30,14 @@ const applyConfig = (config) => {
         <EditComponent {...props} />
       </BlockStyleWrapperEdit>
     );
+    blocksConfig[name].edit.displayName = 'EditBlockWithStyleWrapper';
+
     blocksConfig[name].view = (props) => (
       <BlockStyleWrapperView {...props}>
         <ViewComponent {...props} />
       </BlockStyleWrapperView>
     );
+    blocksConfig[name].view.displayName = 'ViewBlockWithStyleWrapper';
   });
 
   config.widgets.widget.style_select = StyleSelectWidget;