feat(SLB-313 SLB-308): gutenberg cta block and its graphql schema

AmazeeLabs · Apr 11, 2024 · ab8d76a · ab8d76a
1 parent 184d6d5
commit ab8d76a
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 10 deletions.
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
@@ -0,0 +1,93 @@
+import {
+  // @ts-ignore
+  __experimentalLinkControl as LinkControl,
+  RichText,
+} from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+import { ToggleControl } from 'wordpress__components';
+import { compose, withState } from 'wordpress__compose';
+
+// @ts-ignore
+const { t: __ } = Drupal;
+
+// @ts-ignore
+const { setPlainTextAttribute } = silverbackGutenbergUtils;
+
+// @ts-ignore
+registerBlockType('custom/cta', {
+  title: 'CTA',
+  icon: 'admin-links',
+  category: 'common',
+  attributes: {
+    url: {
+      type: 'string',
+    },
+    text: {
+      type: 'string',
+    },
+    // To have an easier integration with entity usage, we also retrieve and
+    // store the uuid of internal links.
+    uuid: {
+      type: 'string',
+    },
+    openInNewTab: {
+      type: 'boolean',
+    },
+  },
+  // @ts-ignore
+  edit: compose(withState({}))((props) => {
+    return (
+      <div>
+        <RichText
+          identifier="text"
+          className={`button`}
+          tagName="p"
+          value={props.attributes.text}
+          allowedFormats={[]}
+          // @ts-ignore
+          disableLineBreaks={true}
+          placeholder={__('Link text')}
+          keepPlaceholderOnFocus={true}
+          style={{
+            cursor: 'text',
+          }}
+          onChange={(text: string) => {
+            setPlainTextAttribute(props, 'text', text);
+          }}
+        />
+        <LinkControl
+          value={{
+            url: props.attributes.url,
+            openInNewTab: props.attributes.openInNewTab,
+          }}
+          settings={{}}
+          // @ts-ignore
+          onChange={(link) => {
+            props.setAttributes({
+              url: link.url,
+              uuid: link.id,
+            });
+          }}
+        />
+        <ToggleControl
+          label={__('Open in new tab')}
+          help={
+            props.attributes.openInNewTab
+              ? __('Opens in a new tab.')
+              : __('Opens in the same tab.')
+          }
+          checked={props.attributes.openInNewTab}
+          onChange={(openInNewTab) => {
+            props.setAttributes({
+              openInNewTab,
+            });
+          }}
+        />
+      </div>
+    );
+  }),
+
+  save: () => {
+    return null;
+  },
+});
diff --git a/packages/drupal/gutenberg_blocks/src/index.ts b/packages/drupal/gutenberg_blocks/src/index.ts
@@ -3,3 +3,4 @@ import './blocks/hero';
 import './blocks/content';
 import './blocks/heading';
 import './blocks/form';
+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
@@ -79,9 +79,9 @@ default:
         <blockquote class="wp-block-quote"><p>Quote</p><cite>Citation</cite></blockquote>
         <!-- /wp:quote -->
 
-        <!-- wp:paragraph -->
-        <p></p>
-        <!-- /wp:paragraph -->
+        <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA","uuid":"f1f827c9-ed06-4e7d-b89d-a169e70a459c"} /-->
+
+        <!-- wp:custom/cta {"url":"https://www.google.com","text":"External CTA","uuid":"https://www.google.com","openInNewTab":true} /-->
         <!-- /wp:custom/content -->
       format: gutenberg
       summary: ''
@@ -155,9 +155,9 @@ translations:
           <blockquote class="wp-block-quote"><p>Quote DE</p><cite>Citation DE</cite></blockquote>
           <!-- /wp:quote -->
 
-          <!-- wp:paragraph -->
-          <p></p>
-          <!-- /wp:paragraph -->
+          <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA DE","uuid":"f1f827c9-ed06-4e7d-b89d-a169e70a459c"} /-->
+
+          <!-- wp:custom/cta {"url":"https://www.example.com","text":"External CTA DE","uuid":"https://www.example.com","openInNewTab":true} /-->
           <!-- /wp:custom/content -->
         format: gutenberg
         summary: ''
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
@@ -65,6 +65,8 @@ default:
         <!-- wp:custom/heading -->
         <h2 class="wp-block-custom-heading"></h2>
         <!-- /wp:custom/heading -->
+
+        <!-- wp:custom/cta /-->
         <!-- /wp:custom/content -->
       format: gutenberg
       summary: ''
diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
@@ -193,7 +193,17 @@ type Hero {
     @webformIdToUrl(id: "$")
 }
 
-union PageContent @resolveEditorBlockType = BlockMarkup | BlockMedia | BlockForm
+union PageContent @resolveEditorBlockType =
+    BlockMarkup
+  | BlockMedia
+  | BlockForm
+  | BlockCta
+
+type BlockCta @type(id: "custom/cta") {
+  url: Url @resolveEditorBlockAttribute(key: "url")
+  text: String @resolveEditorBlockAttribute(key: "text")
+  openInNewTab: Boolean @resolveEditorBlockAttribute(key: "openInNewTab")
+}
 
 type BlockForm @type(id: "custom/form") {
   url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$")

diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts
@@ -37,6 +37,11 @@ test('Blocks', async () => {
         ... on BlockForm {
           url
         }
+        ... on BlockCta {
+          url
+          text
+          openInNewTab
+        }
       }
     }
     {
@@ -96,9 +101,19 @@ test('Blocks', async () => {
     <h3 class="wp-block-custom-heading">Heading 3</h3>
 
     <blockquote class="wp-block-quote"><p>Quote</p><cite>Citation</cite></blockquote>
-
-    <p></p>
-    ",
+",
+            },
+            {
+              "__typename": "BlockCta",
+              "openInNewTab": null,
+              "text": "Internal CTA",
+              "url": "/en/drupal",
+            },
+            {
+              "__typename": "BlockCta",
+              "openInNewTab": true,
+              "text": "External CTA",
+              "url": "https://www.google.com",
             },
           ],
           "hero": {
@@ -136,6 +151,12 @@ test('Blocks', async () => {
     <h2 class="wp-block-custom-heading"></h2>
     ",
             },
+            {
+              "__typename": "BlockCta",
+              "openInNewTab": null,
+              "text": null,
+              "url": null,
+            },
           ],
           "hero": {
             "__typename": "Hero",