Merge branch 'release' into SLB-308-cta-block-gutenberg

AmazeeLabs · Apr 15, 2024 · f3f8f8a · f3f8f8a
2 parents fcb16e6 + aeea400
commit f3f8f8a
Show file tree

Hide file tree

Showing 11 changed files with 253 additions and 7 deletions.
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/image-teaser.tsx b/packages/drupal/gutenberg_blocks/src/blocks/image-teaser.tsx
@@ -0,0 +1,119 @@
+import {
+  // @ts-ignore
+  __experimentalLinkControl as LinkControl,
+  InnerBlocks,
+  InspectorControls,
+  RichText,
+} from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+import { PanelBody } from 'wordpress__components';
+import { dispatch } from 'wordpress__data';
+
+import { DrupalMediaEntity } from '../utils/drupal-media';
+
+// @ts-ignore
+const { t: __ } = Drupal;
+// @ts-ignore
+const { setPlainTextAttribute } = silverbackGutenbergUtils;
+
+registerBlockType('custom/image-teaser', {
+  title: __('Image Teaser'),
+  parent: ['custom/image-teasers'],
+  icon: 'cover-image',
+  category: 'layout',
+  attributes: {
+    mediaEntityIds: {
+      type: 'array',
+    },
+    title: {
+      type: 'string',
+    },
+    ctaUrl: {
+      type: 'string',
+    },
+    ctaText: {
+      type: 'string',
+    },
+  },
+  edit: (props) => {
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('CTA Link')}>
+            <LinkControl
+              placeholder={__('Link')}
+              value={{
+                url: props.attributes.ctaUrl,
+              }}
+              settings={{}}
+              onChange={(link: { url: string; opensInNewTab: boolean }) => {
+                props.setAttributes({
+                  ctaUrl: link.url,
+                });
+              }}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div>
+          <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);
+              }}
+            />
+          </div>
+
+          <div>
+            <div>
+              <RichText
+                className={'font-bold text-2xl mt-3'}
+                identifier="title"
+                tagName="div"
+                value={props.attributes.title as string}
+                allowedFormats={[]}
+                // @ts-ignore
+                disableLineBreaks={true}
+                placeholder={__('Title')}
+                keepPlaceholderOnFocus={true}
+                onChange={(title) => {
+                  setPlainTextAttribute(props, 'title', title);
+                }}
+              />
+            </div>
+            <div>
+              <RichText
+                identifier="ctaText"
+                tagName="div"
+                multiline={false}
+                value={props.attributes.ctaText as string}
+                allowedFormats={[]}
+                // @ts-ignore
+                disableLineBreaks={true}
+                placeholder={__('CTA text')}
+                keepPlaceholderOnFocus={true}
+                style={{
+                  cursor: 'text',
+                }}
+                onChange={(ctaText) => {
+                  setPlainTextAttribute(props, 'ctaText', ctaText);
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  },
+  save: () => <InnerBlocks.Content />,
+});
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/image-teasers.tsx b/packages/drupal/gutenberg_blocks/src/blocks/image-teasers.tsx
@@ -0,0 +1,24 @@
+import { InnerBlocks } from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+
+// @ts-ignore
+const { t: __ } = Drupal;
+
+registerBlockType('custom/image-teasers', {
+  title: __('Image Teasers'),
+  icon: 'format-image',
+  category: 'layout',
+  attributes: {},
+  edit: () => {
+    return (
+      <>
+        <InnerBlocks
+          templateLock={false}
+          allowedBlocks={['custom/image-teaser']}
+          template={[['custom/image-teaser']]}
+        />
+      </>
+    );
+  },
+  save: () => <InnerBlocks.Content />,
+});
diff --git a/packages/drupal/gutenberg_blocks/src/index.ts b/packages/drupal/gutenberg_blocks/src/index.ts
@@ -4,3 +4,5 @@ import './blocks/content';
 import './blocks/heading';
 import './blocks/form';
 import './blocks/cta';
+import './blocks/image-teaser';
+import './blocks/image-teasers';
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
@@ -7,6 +7,7 @@ _meta:
   depends:
     3a0fe860-a6d6-428a-9474-365bd57509aa: media
     478c4289-961d-4ce8-85d6-578ae05f3019: media
+    72187a1f-3e48-4b45-a9b7-189c6fd7ee26: media
 default:
   revision_uid:
     -
@@ -84,6 +85,15 @@ default:
         <!-- wp:custom/cta {"url":"https://www.google.com","text":"External CTA","data-id":"https://www.google.com","data-entity-type":"","openInNewTab":true} /-->
 
         <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media"} /-->
+        <!-- wp:custom/image-teasers -->
+        <!-- wp:custom/image-teaser {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"title":"Teaser 1","ctaUrl":"https://google.com","ctaText":"Foo"} /-->
+
+        <!-- wp:custom/image-teaser {"mediaEntityIds":["72187a1f-3e48-4b45-a9b7-189c6fd7ee26"],"title":"Teaser 2","ctaUrl":"https://google.com","ctaText":"Bar"} /-->
+        <!-- /wp:custom/image-teasers -->
+
+        <!-- wp:paragraph -->
+        <p></p>
+        <!-- /wp:paragraph -->
         <!-- /wp:custom/content -->
       format: gutenberg
       summary: ''

diff --git a/packages/schema/src/fragments/Page.gql b/packages/schema/src/fragments/Page.gql
@@ -32,6 +32,7 @@ fragment Page on Page {
     ...BlockMedia
     ...BlockForm
     ...BlockCta
+    ...BlockImageTeasers
   }
   metaTags {
     tag

diff --git a/packages/schema/src/fragments/PageContent/BlockImageTeasers.gql b/packages/schema/src/fragments/PageContent/BlockImageTeasers.gql
@@ -0,0 +1,11 @@
+fragment BlockImageTeasers on BlockImageTeasers {
+  teasers {
+    image {
+      source(width: 1536, sizes: [[768, 768], [1536, 1536]])
+      alt
+    }
+    title
+    ctaText
+    ctaUrl
+  }
+}
diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
@@ -198,12 +198,7 @@ union PageContent @resolveEditorBlockType =
   | BlockMedia
   | BlockForm
   | BlockCta
-
-type BlockCta @type(id: "custom/cta") {
-  url: Url @resolveEditorBlockAttribute(key: "url")
-  text: String @resolveEditorBlockAttribute(key: "text")
-  openInNewTab: Boolean @resolveEditorBlockAttribute(key: "openInNewTab")
-}
+  | BlockImageTeasers
 
 type BlockForm @type(id: "custom/form") {
   url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$")
@@ -232,6 +227,23 @@ type BlockMedia @type(id: "drupalmedia/drupal-media-entity") {
   caption: Markup @resolveEditorBlockAttribute(key: "caption")
 }
 
+type BlockCta @type(id: "custom/cta") {
+  url: Url @resolveEditorBlockAttribute(key: "url")
+  text: String @resolveEditorBlockAttribute(key: "text")
+  openInNewTab: Boolean @resolveEditorBlockAttribute(key: "openInNewTab")
+}
+
+type BlockImageTeasers @type(id: "custom/image-teasers") {
+  teasers: [BlockImageTeaser!]! @resolveEditorBlockChildren
+}
+
+type BlockImageTeaser @default @value {
+  image: MediaImage @resolveEditorBlockMedia
+  title: String @resolveEditorBlockAttribute(key: "title")
+  ctaText: String @resolveEditorBlockAttribute(key: "ctaText")
+  ctaUrl: Url @resolveEditorBlockAttribute(key: "ctaUrl")
+}
+
 input PaginationInput {
   limit: Int!
   offset: Int!

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

diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx
@@ -1,4 +1,4 @@
-import { Image, PageFragment } from '@custom/schema';
+import { Image, Link, PageFragment } from '@custom/schema';
 import React from 'react';
 
 export function PageHero(props: NonNullable<PageFragment['hero']>) {
@@ -45,6 +45,16 @@ export function PageHero(props: NonNullable<PageFragment['hero']>) {
           {props.lead ? (
             <p className="mt-6 text-lg leading-8 text-gray-300">{props.lead}</p>
           ) : null}
+          {props.ctaText && props.ctaUrl ? (
+            <Link
+              href={props.ctaUrl}
+              className={
+                'mt-7 inline-block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'
+              }
+            >
+              {props.ctaText}
+            </Link>
+          ) : null}
         </div>
       </div>
     </div>

diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx
@@ -74,6 +74,8 @@ export const FullHero = {
           source: image(Landscape, { width: 2000 }),
           alt: 'Stock photo landscape hero.',
         },
+        ctaUrl: '/test' as Url,
+        ctaText: 'Call to action',
       },
     },
   },

diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts
@@ -42,6 +42,17 @@ test('Blocks', async () => {
           text
           openInNewTab
         }
+        ... on BlockImageTeasers {
+          teasers {
+            __typename
+            image {
+              __typename
+            }
+            title
+            ctaText
+            ctaUrl
+          }
+        }
       }
     }
     {
@@ -127,6 +138,35 @@ test('Blocks', async () => {
               "text": "CTA with link to media",
               "url": "/media/[numeric]",
             },
+            {
+              "__typename": "BlockImageTeasers",
+              "teasers": [
+                {
+                  "__typename": "BlockImageTeaser",
+                  "ctaText": "Foo",
+                  "ctaUrl": "https://google.com",
+                  "image": {
+                    "__typename": "MediaImage",
+                  },
+                  "title": "Teaser 1",
+                },
+                {
+                  "__typename": "BlockImageTeaser",
+                  "ctaText": "Bar",
+                  "ctaUrl": "https://google.com",
+                  "image": {
+                    "__typename": "MediaImage",
+                  },
+                  "title": "Teaser 2",
+                },
+              ],
+            },
+            {
+              "__typename": "BlockMarkup",
+              "markup": "
+    <p></p>
+    ",
+            },
           ],
           "hero": {
             "__typename": "Hero",