Merge branch 'dev' of https://github.com/AmazeeLabs/silverback-template…

… into feat/SLB-314

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;
+  },
+});

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';

packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml

@@ -11,50 +11,40 @@ _meta:
     5dfc1856-e9e4-4f02-9cd6-9d888870ce1a: media
 default:
   revision_uid:
-    -
-      target_id: 1
+    - target_id: 1
   status:
-    -
-      value: true
+    - value: true
   uid:
-    -
-      target_id: 1
+    - target_id: 1
   title:
-    -
-      value: 'Blocks: complete'
+    - value: 'Blocks: complete'
   created:
-    -
-      value: 1686759493
+    - value: 1686759493
   promote:
-    -
-      value: false
+    - value: false
   sticky:
-    -
-      value: false
+    - value: false
   moderation_state:
-    -
-      value: published
+    - value: published
   path:
-    -
-      alias: /blocks-complete
+    - alias: /blocks-complete
       langcode: en
       pathauto: 0
   content_translation_source:
-    -
-      value: und
+    - value: und
   content_translation_outdated:
-    -
-      value: false
+    - value: false
   body:
-    -
-      value: |-
+    - value: |-
         <!-- wp:custom/hero {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"headline":"All kinds of blocks with maximum data","lead":"Lead text","ctaUrl":"https://example.com","ctaText":"CTA text","formId":"contact"} /-->
 
         <!-- wp:custom/content -->
         <!-- wp:paragraph -->
         <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"} /-->
@@ -115,7 +105,6 @@ default:
 
         <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media","icon":"ARROW","iconPosition":"BEFORE"} /-->
 
-
         <!-- wp:custom/quote {"quote":"Lorem ipsum dolor sit amet, \u003cstrong\u003econsectetur\u003c/strong\u003e adipiscing elit. Vivamus sagittis nisi nec neque porta, a ornare ligula efficitur.","author":"John Doe","role":"Project manager","mediaEntityIds":["5dfc1856-e9e4-4f02-9cd6-9d888870ce1a"]} /-->
 
         <!-- wp:paragraph -->
@@ -127,40 +116,29 @@ default:
 translations:
   de:
     status:
-      -
-        value: true
+      - value: true
     uid:
-      -
-        target_id: 1
+      - target_id: 1
     title:
-      -
-        value: 'Blocks: complete DE'
+      - value: 'Blocks: complete DE'
     created:
-      -
-        value: 1687338353
+      - value: 1687338353
     promote:
-      -
-        value: false
+      - value: false
     sticky:
-      -
-        value: false
+      - value: false
     moderation_state:
-      -
-        value: published
+      - value: published
     path:
-      -
-        alias: /blocks-complete
+      - alias: /blocks-complete
         langcode: de
         pathauto: 0
     content_translation_source:
-      -
-        value: en
+      - value: en
     content_translation_outdated:
-      -
-        value: false
+      - value: false
     body:
-      -
-        value: |-
+      - value: |-
           <!-- wp:custom/hero {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"headline":"All kinds of blocks with maximum data DE","lead":"Lead text DE"} /-->
 
           <!-- wp:custom/content -->

packages/schema/src/fragments/Page.gql

@@ -35,6 +35,7 @@ fragment Page on Page {
     ...BlockCta
     ...BlockImageWithText
     ...BlockQuote
+    ...BlockHorizontalSeparator
   }
   metaTags {
     tag

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
+}

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: "$")
@@ -264,6 +265,18 @@ enum CTAIconPosition {
   BEFORE
 }
 
+type BlockImageWithText @type(id: "custom/image-with-text") {
+  image: MediaImage @resolveEditorBlockMedia
+  textContent: BlockMarkup @resolveEditorBlockChildren @seek(pos: 0)
+}
+
+type BlockQuote @type(id: "custom/quote") {
+  quote: Markup @resolveEditorBlockAttribute(key: "quote")
+  author: String @resolveEditorBlockAttribute(key: "author")
+  role: String @resolveEditorBlockAttribute(key: "role")
+  image: MediaImage @resolveEditorBlockMedia
+}
+
 type BlockImageWithText @type(id: "custom/image-with-text") {
   image: MediaImage @resolveEditorBlockMedia
   imagePosition: ImagePosition!
@@ -283,6 +296,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!

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>;

packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function BlockHorizontalSeparator() {
+  return <hr />;
+}

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);
               }

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(

tests/schema/specs/blocks.spec.ts

@@ -55,6 +55,23 @@ test('Blocks', async () => {
           icon
           iconPosition
         }
+        ... on BlockImageWithText {
+          image {
+            __typename
+          }
+          textContent {
+            __typename
+            markup
+          }
+        }
+        ... on BlockQuote {
+          quote
+          author
+          role
+          image {
+            __typename
+          }
+        }
         ... on BlockImageWithText {
           image {
             __typename
@@ -73,6 +90,9 @@ test('Blocks', async () => {
             __typename
           }
         }
+        ... on BlockHorizontalSeparator {
+          __typename
+        }
       }
     }
     {
@@ -108,6 +128,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",