feat(SLB-292): horizontal separator gutenberg block

AmazeeLabs · Apr 29, 2024 · 07ec3af · 07ec3af
1 parent 575ecf8
commit 07ec3af
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 0 deletions.
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/horizontal-separator.tsx b/packages/drupal/gutenberg_blocks/src/blocks/horizontal-separator.tsx
@@ -0,0 +1,21 @@
+import { registerBlockType } from 'wordpress__blocks';
+import { compose, withState } from 'wordpress__compose';
+
+declare const Drupal: { t: (s: string) => string };
+
+const { t: __ } = Drupal;
+
+// @ts-ignore
+registerBlockType(`custom/horizontal-separator`, {
+  title: __('Horizontal separator'),
+  icon: 'minus',
+  category: 'text',
+  attributes: {},
+  // @ts-ignore
+  edit: compose(withState())(() => {
+    return <hr />;
+  }),
+  save() {
+    return null;
+  },
+});
diff --git a/packages/drupal/gutenberg_blocks/src/index.ts b/packages/drupal/gutenberg_blocks/src/index.ts
@@ -9,3 +9,4 @@ import './blocks/image-with-text';
 import './filters/list';
 import './blocks/cta';
 import './blocks/quote';
+import './blocks/horizontal-separator';
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
@@ -55,6 +55,8 @@ default:
         <p>A standalone paragraph with <strong><em>markup</em></strong> and <a href="/node/0b45a665-286a-414e-a091-c13fa4e20eb2" data-type="Content: Basic page" data-id="0b45a665-286a-414e-a091-c13fa4e20eb2" data-entity-type="node">link</a></p>
         <!-- /wp:paragraph -->
 
+        <!-- wp:custom/horizontal-separator /-->
+
         <!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"caption":"Media image"} /-->
 
         <!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["478c4289-961d-4ce8-85d6-578ae05f3019"],"caption":"Media video"} /-->

diff --git a/packages/schema/src/fragments/Page.gql b/packages/schema/src/fragments/Page.gql
@@ -35,6 +35,7 @@ fragment Page on Page {
     ...BlockCta
     ...BlockImageWithText
     ...BlockQuote
+    ...BlockHorizontalSeparator
   }
   metaTags {
     tag

diff --git a/packages/schema/src/fragments/PageContent/BlockHorizontalSeparator.gql b/packages/schema/src/fragments/PageContent/BlockHorizontalSeparator.gql
@@ -0,0 +1,5 @@
+fragment BlockHorizontalSeparator on BlockHorizontalSeparator {
+  # This is not really used, but until we have other real setting fields, we
+  # have to provide a dummy one.
+  markup
+}
diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
@@ -206,6 +206,7 @@ union PageContent @resolveEditorBlockType =
   | BlockCta
   | BlockImageWithText
   | BlockQuote
+  | BlockHorizontalSeparator
 
 type BlockForm @type(id: "custom/form") {
   url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$")
@@ -270,6 +271,10 @@ type BlockQuote @type(id: "custom/quote") {
   image: MediaImage @resolveEditorBlockMedia
 }
 
+type BlockHorizontalSeparator @type(id: "custom/horizontal-separator") {
+  markup: Markup! @resolveEditorBlockMarkup
+}
+
 input PaginationInput {
   limit: Int!
   offset: Int!

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.stories.ts b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.stories.ts
@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BlockHorizontalSeparator } from './BlockHorizontalSeparator';
+
+export default {
+  component: BlockHorizontalSeparator,
+} satisfies Meta<typeof BlockHorizontalSeparator>;
+
+export const HorizontalSeparator = {
+  args: {},
+} satisfies StoryObj<typeof BlockHorizontalSeparator>;
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function BlockHorizontalSeparator() {
+  return <hr />;
+}
diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx
@@ -6,6 +6,7 @@ import { UnreachableCaseError } from '../../utils/unreachable-case-error';
 import { PageTransition } from '../Molecules/PageTransition';
 import { BlockCta } from './PageContent/BlockCta';
 import { BlockForm } from './PageContent/BlockForm';
+import { BlockHorizontalSeparator } from './PageContent/BlockHorizontalSeparator';
 import { BlockMarkup } from './PageContent/BlockMarkup';
 import { BlockMedia } from './PageContent/BlockMedia';
 import { BlockQuote } from './PageContent/BlockQuote';
@@ -60,6 +61,8 @@ export function PageDisplay(page: PageFragment) {
                   );
                 case 'BlockQuote':
                   return <BlockQuote key={index} {...block} />;
+                case 'BlockHorizontalSeparator':
+                  return <BlockHorizontalSeparator key={index} {...block} />;
                 default:
                   throw new UnreachableCaseError(block);
               }

diff --git a/tests/e2e/specs/drupal/blocks.spec.ts b/tests/e2e/specs/drupal/blocks.spec.ts
@@ -22,6 +22,9 @@ test('All blocks are rendered', async ({ page }) => {
     page.locator('a:text("link")[href="/en/architecture"]'),
   ).toHaveCount(1);
 
+  // Horizontal separator.
+  await expect(page.locator('hr')).toHaveCount(1);
+
   // Image
   await expect(
     page.locator(

diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts
@@ -71,6 +71,9 @@ test('Blocks', async () => {
             __typename
           }
         }
+        ... on BlockHorizontalSeparator {
+          __typename
+        }
       }
     }
     {
@@ -106,6 +109,9 @@ test('Blocks', async () => {
     <p>A standalone paragraph with <strong><em>markup</em></strong> and <a href="/en/architecture" data-type="Content: Basic page" data-id="[numeric]" data-entity-type="node">link</a></p>
     ",
             },
+            {
+              "__typename": "BlockHorizontalSeparator",
+            },
             {
               "__typename": "BlockMedia",
               "caption": "Media image",