feat(SLB-289): introduce custom/image-with-text block

AmazeeLabs · Apr 17, 2024 · d409a18 · d409a18
1 parent 163b183
commit d409a18
Show file tree

Hide file tree

Showing 11 changed files with 402 additions and 37 deletions.
diff --git a/packages/drupal/gutenberg_blocks/package.json b/packages/drupal/gutenberg_blocks/package.json
@@ -27,6 +27,7 @@
     "@types/wordpress__core-data": "2.4.5",
     "@types/wordpress__data": "6.0.2",
     "@types/wordpress__editor": "13.0.0",
+    "@types/wordpress__hooks": "2.4.0",
     "@vitejs/plugin-react": "4.2.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.10"

diff --git a/packages/drupal/gutenberg_blocks/src/blocks/image-with-text.tsx b/packages/drupal/gutenberg_blocks/src/blocks/image-with-text.tsx
@@ -0,0 +1,79 @@
+import { InnerBlocks, InspectorControls } from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+import { PanelBody, SelectControl } from 'wordpress__components';
+import { dispatch } from 'wordpress__data';
+
+import { DrupalMediaEntity } from '../utils/drupal-media';
+
+// @ts-ignore
+const { t: __ } = Drupal;
+
+registerBlockType('custom/image-with-text', {
+  title: __('Image with Text'),
+  icon: 'cover-image',
+  category: 'layout',
+  attributes: {
+    mediaEntityIds: {
+      type: 'array',
+    },
+    imagePosition: {
+      type: 'string',
+      default: 'left',
+    },
+  },
+  edit: (props) => {
+    const { setAttributes } = props;
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Image position')}>
+            <SelectControl
+              value={props.attributes.imagePosition as string}
+              options={[
+                { label: __('Left'), value: 'left' },
+                { label: __('Right'), value: 'right' },
+              ]}
+              onChange={(imagePosition: string) => {
+                setAttributes({
+                  imagePosition,
+                });
+              }}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div className={'container-wrapper'}>
+          <div className={'container-label'}>{__('Image with Text')}</div>
+          <DrupalMediaEntity
+            classname={'w-full'}
+            attributes={{
+              ...(props.attributes as any),
+              lockViewMode: true,
+              viewMode: 'gutenberg_header',
+              allowedTypes: ['image'],
+            }}
+            setAttributes={props.setAttributes}
+            isMediaLibraryEnabled={true}
+            onError={(error) => {
+              // @ts-ignore
+              error = typeof error === 'string' ? error : error[2];
+              dispatch('core/notices').createWarningNotice(error);
+            }}
+          />
+          <InnerBlocks
+            templateLock={false}
+            allowedBlocks={[
+              // Only markup blocks.
+              'core/paragraph',
+              'core/list',
+              'core/table',
+              'core/quote',
+              'custom/heading',
+            ]}
+            template={[['core/paragraph']]}
+          />
+        </div>
+      </>
+    );
+  },
+  save: () => <InnerBlocks.Content />,
+});
diff --git a/packages/drupal/gutenberg_blocks/src/index.ts b/packages/drupal/gutenberg_blocks/src/index.ts
@@ -5,5 +5,6 @@ import './blocks/heading';
 import './blocks/form';
 import './blocks/image-teaser';
 import './blocks/image-teasers';
+import './blocks/image-with-text';
 import './filters/list';
 import './blocks/cta';
diff --git a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
@@ -60,6 +60,32 @@ default:
 
         <!-- wp:custom/form {"formId":"contact"} /-->
 
+        <!-- wp:custom/image-with-text {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"]} -->
+        <!-- wp:paragraph -->
+        <p>All kinds of allowed blocks</p>
+        <!-- /wp:paragraph -->
+
+        <!-- wp:list -->
+        <ul><li>bla</li></ul>
+        <!-- /wp:list -->
+
+        <!-- wp:custom/heading {"text":"Heading"} -->
+        <h2 class="wp-block-custom-heading">Heading</h2>
+        <!-- /wp:custom/heading -->
+
+        <!-- wp:table -->
+        <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table><figcaption>Caption</figcaption></figure>
+        <!-- /wp:table -->
+
+        <!-- wp:quote -->
+        <blockquote class="wp-block-quote"><p>Quote</p><cite>Citation</cite></blockquote>
+        <!-- /wp:quote -->
+
+        <!-- wp:paragraph -->
+        <p></p>
+        <!-- /wp:paragraph -->
+        <!-- /wp:custom/image-with-text -->
+
         <!-- wp:paragraph -->
         <p>Starting from this paragraph, all the following blocks should be aggregated, as they are just HTML</p>
         <!-- /wp:paragraph -->

diff --git a/packages/drupal/test_content/content/node/ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml b/packages/drupal/test_content/content/node/ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml
@@ -67,6 +67,12 @@ default:
         <!-- /wp:custom/heading -->
 
         <!-- wp:custom/cta /-->
+
+        <!-- wp:custom/image-with-text -->
+        <!-- wp:paragraph -->
+        <p></p>
+        <!-- /wp:paragraph -->
+        <!-- /wp:custom/image-with-text -->
         <!-- /wp:custom/content -->
       format: gutenberg
       summary: ''
diff --git a/packages/schema/src/fragments/Page.gql b/packages/schema/src/fragments/Page.gql
@@ -33,6 +33,7 @@ fragment Page on Page {
     ...BlockForm
     ...BlockImageTeasers
     ...BlockCta
+    ...BlockImageWithText
   }
   metaTags {
     tag

diff --git a/packages/schema/src/fragments/PageContent/BlockImageWithText.gql b/packages/schema/src/fragments/PageContent/BlockImageWithText.gql
@@ -0,0 +1,9 @@
+fragment BlockImageWithText on BlockImageWithText {
+  image {
+    source(width: 1536, sizes: [[768, 768], [1536, 1536]])
+    alt
+  }
+  textContent {
+    markup
+  }
+}
diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
@@ -199,6 +199,7 @@ union PageContent @resolveEditorBlockType =
   | BlockForm
   | BlockImageTeasers
   | BlockCta
+  | BlockImageWithText
 
 type BlockForm @type(id: "custom/form") {
   url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$")
@@ -244,6 +245,11 @@ type BlockCta @type(id: "custom/cta") {
   openInNewTab: Boolean @resolveEditorBlockAttribute(key: "openInNewTab")
 }
 
+type BlockImageWithText @type(id: "custom/image-with-text") {
+  image: MediaImage @resolveEditorBlockMedia
+  textContent: BlockMarkup @resolveEditorBlockChildren @seek(pos: 0)
+}
+
 input PaginationInput {
   limit: Int!
   offset: Int!

diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx
@@ -43,6 +43,21 @@ export function PageDisplay(page: PageFragment) {
                     );
                   case 'BlockCta':
                     return <BlockCta key={index} {...block} />;
+                  case 'BlockImageWithText':
+                    return (
+                      // TODO: Implement BlockImageWithText
+                      <div
+                        style={{
+                          color: 'red',
+                          border: 'solid 3px red',
+                          padding: '3px',
+                          margin: '5px 0',
+                        }}
+                        // eslint-disable-next-line react/jsx-no-literals
+                      >
+                        BlockImageWithText goes here
+                      </div>
+                    );
                   default:
                     throw new UnreachableCaseError(block);
                 }