Issue 32 updating blocks

packages/volto-code-block/news/32.internal

@@ -0,0 +1 @@
+Updated blocks: Implement style wrappers + captions for the Mermaid block, size and alignment for code and gist blocks. @humanaice

packages/volto-code-block/news/33.internal

@@ -0,0 +1 @@
+Update Storybook with alignment examples for all blocks. @humanaice

packages/volto-code-block/src/components/Blocks/Code/DefaultView.jsx

@@ -14,25 +14,33 @@ 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>
       )}
     </>