Internal: Updated blocks:

Humanaice · Humanaice · commit 71ca2cd5b7c3 · 2026-02-05T11:48:13.000-03:00
diff --git a/packages/volto-code-block/src/components/Blocks/Code/DefaultView.jsx b/packages/volto-code-block/src/components/Blocks/Code/DefaultView.jsx
@@ -14,25 +14,30 @@ const CodeView = (props) => {
     wrapLongLines,
     caption_title,
     caption_description,
+    styles = {},
   } = props;
+  const align = styles?.align || 'center';
+  const size = styles?.size || 'l';
   const styleWrap = wrapLongLines ? 'wrapLongLines' : '';
   const codeClassName = `code-block-wrapper ${codeStyle} ${styleWrap}`;
 
   return (
     <>
       {code && (
-        <div className={cx('block code', className)}>
-          <div className={codeClassName}>
-            <SyntaxHighlighter
-              code={code}
-              language={language}
-              showLineNumbers={showLineNumbers}
-              lineNbr={lineNbr}
-            />
+        <div className={cx('block code', className, `align-${align}`)}>
+          <div className={`code-content-wrapper block-${size}`}>
+            <div className={codeClassName}>
+              <SyntaxHighlighter
+                code={code}
+                language={language}
+                showLineNumbers={showLineNumbers}
+                lineNbr={lineNbr}
+              />
+            </div>
+            {caption_title && (
+              <Caption title={caption_title} description={caption_description} />
+            )}
           </div>
-          {caption_title && (
-            <Caption title={caption_title} description={caption_description} />
-          )}
         </div>
       )}
     </>
diff --git a/packages/volto-code-block/src/components/Blocks/Code/Edit.jsx b/packages/volto-code-block/src/components/Blocks/Code/Edit.jsx
@@ -10,6 +10,9 @@ import { highlight } from 'prismjs/components/prism-core';
 const CodeBlockEdit = (props) => {
   const { data, selected, block, onChangeBlock } = props;
   const [code, setCode] = React.useState(data.code || '');
+  const styles = data.styles || {};
+  const align = styles?.align || 'center';
+  const size = styles?.size || 'l';
   const className = `code-block-wrapper edit ${data.style}`;
   const codeBlockConfig = config.blocks?.blocksConfig?.codeBlock;
   const defaultLanguage = codeBlockConfig?.defaultLanguage;
@@ -27,22 +30,24 @@ const CodeBlockEdit = (props) => {
   };
 
   return (
-    <div className="block code">
-      <div className={className}>
-        <Editor
-          value={code}
-          onValueChange={(code) => handleChange(code)}
-          highlight={(code) => highlight(code, language)}
-          padding={10}
-          preClassName={`code-block-wrapper ${data.style} language-${data.language}`}
-        />
+    <div className={`block code align-${align}`}>
+      <div className={`code-content-wrapper block-${size}`}>
+        <div className={className}>
+          <Editor
+            value={code}
+            onValueChange={(code) => handleChange(code)}
+            highlight={(code) => highlight(code, language)}
+            padding={10}
+            preClassName={`code-block-wrapper ${data.style} language-${data.language}`}
+          />
+        </div>
         {caption_title && (
           <Caption title={caption_title} description={caption_description} />
         )}
-        <SidebarPortal selected={selected}>
-          <CodeBlockData {...props} />
-        </SidebarPortal>
       </div>
+      <SidebarPortal selected={selected}>
+        <CodeBlockData {...props} />
+      </SidebarPortal>
     </div>
   );
 };
diff --git a/packages/volto-code-block/src/components/Blocks/Code/schema.js b/packages/volto-code-block/src/components/Blocks/Code/schema.js
@@ -1,4 +1,5 @@
 import { defineMessages } from 'react-intl';
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 import STYLES from '../../SyntaxHighlighter/Styles';
 import config from '@plone/volto/registry';
 
@@ -39,6 +40,10 @@ const messages = defineMessages({
     id: 'Caption',
     defaultMessage: 'Caption',
   },
+  size: {
+    id: 'Size',
+    defaultMessage: 'Size',
+  },
 });
 
 export const codeSchema = (props) => {
@@ -61,7 +66,7 @@ export const codeSchema = (props) => {
     return STYLES.map((item) => [item[0], props.intl.formatMessage(item[1])]);
   };
 
-  return {
+  const schema = {
     title: props.intl.formatMessage(messages.codeBlock),
     fieldsets: [
       {
@@ -120,4 +125,20 @@ export const codeSchema = (props) => {
     },
     required: ['language'],
   };
+  // Add styling with alignment
+  addStyling({ schema, intl: props.intl });
+  schema.properties.styles.schema.properties.align = {
+    widget: 'align',
+    title: 'Alignment',
+    actions: ['left', 'center', 'right'],
+    default: 'center',
+  };
+  schema.properties.styles.schema.properties.size = {
+    title: props.intl.formatMessage(messages.size),
+    widget: 'image_size',
+    default: 'l',
+  };
+  schema.properties.styles.schema.fieldsets[0].fields.push('align');
+  schema.properties.styles.schema.fieldsets[0].fields.push('size');
+  return schema;
 };
diff --git a/packages/volto-code-block/src/components/Blocks/Gist/DefaultView.jsx b/packages/volto-code-block/src/components/Blocks/Gist/DefaultView.jsx
@@ -1,16 +1,31 @@
 import React from 'react';
 import Gist from 'react-gist';
 import Caption from '../../Caption/Caption';
+import cx from 'classnames';
 
 const GistView = (props) => {
-  const { file, gistId, caption_title, caption_description } = props;
+  const { 
+    file, 
+    gistId, 
+    caption_title, 
+    caption_description,
+    className,
+    styles = {},
+  } = props;
+  const align = styles?.align || 'center';
+  const size = styles?.size || 'l';
+
   return (
-    <>
-      {gistId && <Gist id={gistId} file={file} />}
-      {caption_title && (
-        <Caption title={caption_title} description={caption_description} />
-      )}
-    </>
+    <div className={cx('block gist', className, `align-${align}`)}>
+      <div className={`gist-content-wrapper block-${size}`}>
+        <div className="gistWrapper">
+          {gistId && <Gist id={gistId} file={file} />}
+        </div>
+        {caption_title && (
+          <Caption title={caption_title} description={caption_description} />
+        )}
+      </div>
+    </div>
   );
 };
 
diff --git a/packages/volto-code-block/src/components/Blocks/Gist/Edit.jsx b/packages/volto-code-block/src/components/Blocks/Gist/Edit.jsx
@@ -5,9 +5,9 @@ import GistBlockData from './Data';
 import View from './DefaultView';
 
 const GistBlockEdit = (props) => {
-  const { data, selected, block } = props;
-  const { gistId, file } = data;
-  const { caption_title, caption_description } = data;
+  const { data, selected, block, className } = props;
+  const { gistId, file, styles, caption_title, caption_description } = data;
+
   return (
     <div className="block gist edit" id={`gistBlock-${block}`}>
       {data && (
@@ -18,6 +18,8 @@ const GistBlockEdit = (props) => {
             file={file}
             caption_title={caption_title}
             caption_description={caption_description}
+            className={className}
+            styles={styles}
           />
         </>
       )}
diff --git a/packages/volto-code-block/src/components/Blocks/Gist/View.jsx b/packages/volto-code-block/src/components/Blocks/Gist/View.jsx
@@ -3,17 +3,20 @@ import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
 import GistView from './DefaultView';
 
 const GistBlockView = (props) => {
-  const { data, block } = props;
-  const { gistId, file, caption_title, caption_description } = data;
+  const { data, block, className } = props;
+  const { gistId, file, caption_title, caption_description, styles } = data;
+
   return (
-    <div className="block gist view" id={`gistBlock-${block}`}>
+    <div id={`gistBlock-${block}`}>
       {data && (
         <GistView
           caption_title={caption_title}
           caption_description={caption_description}
           gistId={gistId}
           file={file}
           block={block}
+          className={className}
+          styles={styles}
         />
       )}
     </div>
diff --git a/packages/volto-code-block/src/components/Blocks/Gist/schema.js b/packages/volto-code-block/src/components/Blocks/Gist/schema.js
@@ -1,4 +1,5 @@
 import { defineMessages } from 'react-intl';
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 
 const messages = defineMessages({
   gistBlock: {
@@ -21,10 +22,18 @@ const messages = defineMessages({
     id: 'Description',
     defaultMessage: 'Description',
   },
+  align: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
+  size: {
+    id: 'Size',
+    defaultMessage: 'Size',
+  },
 });
 
 export const gistSchema = (props) => {
-  return {
+  const schema = {
     title: props.intl.formatMessage(messages.gistBlock),
     fieldsets: [
       {
@@ -56,4 +65,20 @@ export const gistSchema = (props) => {
     },
     required: ['gistId'],
   };
+  // Add styling with alignment and size
+  addStyling({ schema, intl: props.intl });
+  schema.properties.styles.schema.properties.align = {
+    widget: 'align',
+    title: props.intl.formatMessage(messages.align),
+    actions: ['left', 'center', 'right'],
+    default: 'center',
+  };
+  schema.properties.styles.schema.properties.size = {
+    title: props.intl.formatMessage(messages.size),
+    widget: 'image_size',
+    default: 'l',
+  };
+  schema.properties.styles.schema.fieldsets[0].fields.push('align');
+  schema.properties.styles.schema.fieldsets[0].fields.push('size');
+  return schema;
 };
diff --git a/packages/volto-code-block/src/components/Blocks/Mermaid/Data.jsx b/packages/volto-code-block/src/components/Blocks/Mermaid/Data.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import { mermaidSchema } from './schema';
+import { useIntl } from 'react-intl';
+
+const MermaidBlockData = (props) => {
+  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
+    props;
+  const intl = useIntl();
+  const schema = mermaidSchema({ ...props, intl });
+
+  return (
+    <BlockDataForm
+      schema={schema}
+      title={schema.title}
+      onChangeField={(id, value) => {
+        onChangeBlock(block, {
+          ...data,
+          [id]: value,
+        });
+      }}
+      onChangeBlock={onChangeBlock}
+      formData={data}
+      block={block}
+      blocksConfig={blocksConfig}
+      navRoot={navRoot}
+      contentType={contentType}
+    />
+  );
+};
+
+export default MermaidBlockData;
diff --git a/packages/volto-code-block/src/components/Blocks/Mermaid/DefaultView.jsx b/packages/volto-code-block/src/components/Blocks/Mermaid/DefaultView.jsx
@@ -1,7 +1,10 @@
 import React, { useEffect, useState } from 'react';
+import Caption from '../../Caption/Caption';
+import cx from 'classnames';
 
 const MermaidView = (props) => {
-  const { code, block } = props;
+  const { code, block, styles = {}, caption_title, caption_description, className } = props;
+  const align = styles?.align || 'center';
   const elementId = `mermaid-${block}`;
   const [mermaid, setMermaid] = useState(null);
   const [svg, setSVG] = useState('');
@@ -34,9 +37,18 @@ const MermaidView = (props) => {
   }, [mermaid, elementId, code]);
 
   return (
-    <div className={'mermaidWrapper'}>
-      {svg && <div dangerouslySetInnerHTML={{ __html: svg }} />}
-    </div>
+    <>
+      {code && (
+        <div className={cx('block mermaid', className, `align-${align}`)}>
+          <div className="mermaidWrapper">
+            {svg && <div dangerouslySetInnerHTML={{ __html: svg }} />}
+            {caption_title && (
+              <Caption title={caption_title} description={caption_description} />
+            )}
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 
diff --git a/packages/volto-code-block/src/components/Blocks/Mermaid/Edit.jsx b/packages/volto-code-block/src/components/Blocks/Mermaid/Edit.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import config from '@plone/volto/registry';
 import Editor from '../../Editor/Editor.tsx';
 import { highlight } from 'prismjs/components/prism-core';
+import MermaidBlockData from './Data';
 
 const MermaidBlockEdit = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { data, block, onChangeBlock, selected } = props;
   const [code, setCode] = React.useState(data.code || '');
   const className = `code-block-wrapper edit light`;
   const allLanguages = config.settings.codeBlock.languages;
@@ -17,17 +19,22 @@ const MermaidBlockEdit = (props) => {
   };
 
   return (
-    <div className="block code">
-      <div className={className}>
-        <Editor
-          value={code}
-          onValueChange={(code) => handleChange(code)}
-          highlight={(code) => highlight(code, language)}
-          padding={10}
-          preClassName={`code-block-wrapper ${data.style} language-mermaid`}
-        />
+    <>
+      <div className="block code">
+        <div className={className}>
+          <Editor
+            value={code}
+            onValueChange={(code) => handleChange(code)}
+            highlight={(code) => highlight(code, language)}
+            padding={10}
+            preClassName={`code-block-wrapper ${data.style} language-mermaid`}
+          />
+        </div>
       </div>
-    </div>
+      <SidebarPortal selected={selected}>
+        <MermaidBlockData {...props} />
+      </SidebarPortal>
+    </>
   );
 };
 
diff --git a/packages/volto-code-block/src/components/Blocks/Mermaid/View.jsx b/packages/volto-code-block/src/components/Blocks/Mermaid/View.jsx
@@ -4,8 +4,7 @@ import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
 
 const MermaidBlockView = (props) => {
   const { block, data } = props;
-  const code = data.code || '';
-  return <>{code && <MermaidView code={code} block={block} />}</>;
+  return <>{data && <MermaidView {...data} block={block} />}</>;
 };
 
 export default withBlockExtensions(MermaidBlockView);
diff --git a/packages/volto-code-block/src/components/Blocks/Mermaid/schema.js b/packages/volto-code-block/src/components/Blocks/Mermaid/schema.js
diff --git a/packages/volto-code-block/src/index.js b/packages/volto-code-block/src/index.js
diff --git a/packages/volto-code-block/src/theme/main.less b/packages/volto-code-block/src/theme/main.less
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
