don't let block-style override slate classname

src/editor/plugins/StyleMenu/StyleMenu.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ReactEditor, useSlate } from 'slate-react';
+import { useSlate } from 'slate-react';
 import { Dropdown } from 'semantic-ui-react';
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
@@ -27,19 +27,31 @@ const StyleMenuButton = ({ icon, active, ...props }) => (
   <ToolbarButton {...props} icon={icon} active={active} />
 );
 
-const StylingsButton = () => {
+const MenuOpts = ({ editor, toSelect, option }) => {
+  const isActive = toSelect.includes(option);
+  return (
+    <Dropdown.Item
+      as="span"
+      active={isActive}
+      className={cx({ active: isActive })}
+      {...option}
+      onClick={(event, selItem) => {
+        event.stopPropagation();
+        toggleStyle(editor, {
+          cssClass: selItem.value,
+          isBlock: selItem.isBlock,
+        });
+      }}
+    />
+  );
+};
+
+const StylingsButton = (props) => {
   const editor = useSlate();
   const intl = useIntl();
 
   // Converting the settings to a format that is required by dropdowns.
   const inlineOpts = [
-    {
-      text: intl.formatMessage(messages.inlineStyle),
-      disabled: false,
-      selected: false,
-      style: { opacity: 0.45 },
-      onClick: (event) => event.preventDefault(),
-    },
     ...config.settings.slate.styleMenu.inlineStyles.map((def) => {
       return {
         value: def.cssClass,
@@ -50,13 +62,6 @@ const StylingsButton = () => {
     }),
   ];
   const blockOpts = [
-    {
-      text: intl.formatMessage(messages.paragraphStyle),
-      disabled: false,
-      selected: false,
-      style: { opacity: 0.45 },
-      onClick: (event) => event.preventDefault(),
-    },
     ...config.settings.slate.styleMenu.blockStyles.map((def) => {
       return {
         value: def.cssClass,
@@ -84,10 +89,14 @@ const StylingsButton = () => {
     }
   }
 
+  const menuItemProps = {
+    toSelect,
+    editor,
+  };
   const showMenu = inlineOpts.length || blockOpts.length;
   return showMenu ? (
     <Dropdown
-      className="style-menu"
+      id="style-menu"
       multiple
       value={toSelect}
       disabled={config.settings.slate.styleMenu.disabled ?? false}
@@ -101,46 +110,27 @@ const StylingsButton = () => {
       }
     >
       <Dropdown.Menu>
-        {inlineOpts.map((option, index) => {
-          const isActive = toSelect.includes(option);
-          return (
-            <Dropdown.Item
-              key={`inline-style-${index}`}
-              as="span"
-              active={isActive}
-              className={cx({ active: isActive })}
-              onClick={(event, selItem) => {
-                event.stopPropagation();
-                toggleStyle(editor, {
-                  cssClass: selItem.value,
-                  isBlock: selItem.isBlock,
-                });
-                ReactEditor.focus(editor);
-              }}
-              {...option}
+        {inlineOpts.length && (
+          <>
+            <Dropdown.Header
+              content={intl.formatMessage(messages.inlineStyle)}
             />
-          );
-        })}
-        {blockOpts.map((option, index) => {
-          const isActive = toSelect.includes(option);
-          return (
-            <Dropdown.Item
-              key={`block-style-${index}`}
-              as="span"
-              active={isActive}
-              className={cx({ active: isActive })}
-              onClick={(event, selItem) => {
-                event.stopPropagation();
-                toggleStyle(editor, {
-                  cssClass: selItem.value,
-                  isBlock: selItem.isBlock,
-                });
-                ReactEditor.focus(editor);
-              }}
-              {...option}
+            {inlineOpts.map((option) => (
+              <MenuOpts {...menuItemProps} option={option} />
+            ))}
+          </>
+        )}
+
+        {blockOpts.length && (
+          <>
+            <Dropdown.Header
+              content={intl.formatMessage(messages.paragraphStyle)}
             />
-          );
-        })}
+            {blockOpts.map((option) => (
+              <MenuOpts {...menuItemProps} option={option} />
+            ))}
+          </>
+        )}
       </Dropdown.Menu>
     </Dropdown>
   ) : (

src/editor/plugins/StyleMenu/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import StyleMenu from './StyleMenu';
-import './style.css';
-import { Icon } from '@plone/volto/components';
-import paintSVG from '@plone/volto/icons/paint.svg';
+import './style.less';
 
 export default function install(config) {
   const { slate } = config.settings;
@@ -12,29 +10,10 @@ export default function install(config) {
   slate.toolbarButtons.push('styleMenu');
   slate.expandedToolbarButtons.push('styleMenu');
 
-  /* The slate Menu configuration in an addon */
-
-  slate.styleMenu = config.settings.slate.styleMenu || {};
-  slate.styleMenu.inlineStyles = [
-    {
-      cssClass: 'cool-inline-text',
-      label: 'Cool Inline Text',
-      icon: (props) => <Icon name={paintSVG} size="24px" />,
-    },
-  ];
-  slate.styleMenu.blockStyles = [
-    {
-      cssClass: 'underline-block-text',
-      label: 'Cool Block Text',
-      icon: (props) => <Icon name={paintSVG} size="24px" />,
-    },
-  ];
-
-  // slate.styleMenu = {
-  //   inlineStyles: [],
-  //   blockStyles: [],
-  //   //themeColors = { primary: 'red' };
-  // };
+  slate.styleMenu = {
+    inlineStyles: [],
+    blockStyles: [],
+  };
 
   return config;
 }

src/editor/plugins/StyleMenu/style.less

@@ -0,0 +1,48 @@
+/* Demo styles */
+
+.green-block-text {
+  color: green;
+}
+
+.underline-block-text {
+  text-decoration: underline;
+}
+
+.cool-inline-text {
+  font-style: italic;
+  font-weight: bold;
+}
+
+.red-inline-text {
+  color: red;
+}
+
+#style-menu.ui.dropdown .menu {
+  .item {
+    display: flex;
+    user-select: none;
+
+    span.text {
+      margin-top: auto;
+      line-height: normal;
+      vertical-align: middle;
+    }
+  }
+
+  .header {
+    color: rgb(153, 153, 153);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+
+  .active {
+    z-index: 1;
+    background: #68778d;
+    box-shadow: none;
+    color: #ffffff;
+    font-weight: 300;
+  }
+
+  overflow: auto;
+  max-height: 50vh;
+}

src/editor/plugins/StyleMenu/utils.js

@@ -1,7 +1,7 @@
 /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
 import { Editor, Transforms } from 'slate';
-import { isBlockActive } from 'volto-slate/utils';
 import config from '@plone/volto/registry';
+import { isBlockActive } from 'volto-slate/utils';
 
 /**
  * Toggles a style (e.g. in the StyleMenu plugin).

src/editor/render.jsx

@@ -15,10 +15,12 @@ export const Element = ({ element, attributes = {}, extras, ...rest }) => {
   const El = elements[element.type] || elements['default'];
 
   const out = Object.assign(
-    element.styleName ? { className: element.styleName } : {},
     ...Object.keys(attributes || {}).map((k) =>
       !isEmpty(attributes[k]) ? { [k]: attributes[k] } : {},
     ),
+    element.styleName
+      ? { className: cx(attributes.className, element.styleName) }
+      : {},
   );
 
   return (