feat(SLB-286): add visual grouping to image-teasers gutenberg block

Copied from other project.
AmazeeLabs · Apr 15, 2024 · 1ed83c1 · 1ed83c1
1 parent aeea400
commit 1ed83c1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/packages/drupal/gutenberg_blocks/css/edit.css b/packages/drupal/gutenberg_blocks/css/edit.css
@@ -10,4 +10,28 @@
 .gutenberg__editor blockquote::before,
 .gutenberg__editor blockquote::after {
   content: '';
+}
+
+.gutenberg__editor .container-wrapper {
+  display: block;
+  position: relative;
+  margin: 40px 0;
+  border-left: 34px solid #666666;
+  padding-left: 10px;
+  min-height: 250px;
+}
+
+.gutenberg__editor .container-wrapper .container-label {
+  font: bold 12px Sans-Serif;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: #fff;
+  padding: 5px 10px;
+  margin: 0 0 10px 0;
+  line-height: 24px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+  transform: rotate(90deg);
 }
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/image-teasers.tsx b/packages/drupal/gutenberg_blocks/src/blocks/image-teasers.tsx
@@ -11,13 +11,14 @@ registerBlockType('custom/image-teasers', {
   attributes: {},
   edit: () => {
     return (
-      <>
+      <div className={'container-wrapper'}>
+        <div className={'container-label'}>{__('Image Teasers')}</div>
         <InnerBlocks
           templateLock={false}
           allowedBlocks={['custom/image-teaser']}
           template={[['custom/image-teaser']]}
         />
-      </>
+      </div>
     );
   },
   save: () => <InnerBlocks.Content />,