style: adjust quote styling

apps/cms/config/sync/gutenberg.settings.yml

@@ -4,12 +4,12 @@ page_template_lock: all
 page_allowed_blocks:
   core/paragraph: core/paragraph
   core/list: core/list
-  core/quote: core/quote
   core/table: core/table
   core/all: 0
   core/image: 0
   core/heading: 0
   core/gallery: 0
+  core/quote: 0
   core/audio: 0
   core/button: 0
   core/buttons: 0
@@ -75,6 +75,7 @@ page_allowed_drupal_blocks:
   drupalblock/all_core: 0
   page_title_block: 0
   drupalblock/all_forms: 0
+  masquerade: 0
   user_login_block: 0
   drupalblock/all_lists_views_: 0
   'views_block:content_recent-block_1': 0
@@ -91,3 +92,6 @@ page_allowed_drupal_blocks:
   system_branding_block: 0
   node_syndicate_block: 0
   drupalblock/all_user: 0
+  drupalblock/all_webform: 0
+  webform_block: 0
+  webform_submission_limit_block: 0

packages/drupal/gutenberg_blocks/css/edit.css

@@ -12,6 +12,11 @@
   content: '';
 }
 
+.gutenberg__editor blockquote .quote-author,
+.gutenberg__editor blockquote .quote-role {
+  text-align: right;
+}
+
 .gutenberg__editor .container-wrapper {
   display: block;
   position: relative;

packages/drupal/gutenberg_blocks/src/Plugin/Validation/GutenbergValidator/QuoteValidator.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace Drupal\gutenberg_blocks\Plugin\Validation\GutenbergValidator;
+
+use Drupal\Core\StringTranslation\StringTranslationTrait;
+use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergValidatorBase;
+
+/**
+ * @GutenbergValidator(
+ *   id="quote_validator",
+ *   label = @Translation("Quote validator")
+ * )
+ */
+class QuoteValidator extends GutenbergValidatorBase {
+  use StringTranslationTrait;
+
+  /**
+   * {@inheritDoc}
+   */
+  public function applies(array $block): bool {
+    return $block['blockName'] === 'custom/quote';
+  }
+
+  /**
+   * {@inheritDoc}
+   */
+  public function validatedFields($block = []): array {
+    return [
+      'quote' => [
+        'field_label' => $this->t('Quote text'),
+        'rules' => ['required'],
+      ],
+      'author' => [
+        'field_label' => $this->t('Quote author'),
+        'rules' => ['required'],
+      ],
+    ];
+  }
+
+}

packages/drupal/gutenberg_blocks/src/blocks/quote.tsx

@@ -0,0 +1,100 @@
+import { RichText } from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+import { compose, withState } from 'wordpress__compose';
+import { dispatch } from 'wordpress__data';
+
+import { cleanUpText } from '../utils/clean-up-text';
+import { DrupalMediaEntity } from '../utils/drupal-media';
+
+declare const Drupal: { t: (s: string) => string };
+
+const { t: __ } = Drupal;
+
+// @ts-ignore
+const { setPlainTextAttribute } = silverbackGutenbergUtils;
+
+// @ts-ignore
+registerBlockType(`custom/quote`, {
+  title: __('Quote'),
+  icon: 'format-quote',
+  category: 'text',
+  attributes: {
+    quote: {
+      type: 'string',
+    },
+    author: {
+      tpye: 'string',
+    },
+    role: {
+      type: 'string',
+    },
+    mediaEntityIds: {
+      type: 'array',
+    },
+  },
+  // @ts-ignore
+  edit: compose(withState())((props) => {
+    return (
+      <blockquote>
+        <RichText
+          identifier="quote"
+          value={props.attributes.quote}
+          allowedFormats={['core/bold']}
+          // @ts-ignore
+          disableLineBreaks={false}
+          placeholder={__('Quote')}
+          keepPlaceholderOnFocus={false}
+          onChange={(quote) => {
+            props.setAttributes({
+              quote: cleanUpText(quote, ['strong']),
+            });
+          }}
+        />
+        <RichText
+          identifier="author"
+          className="quote-author"
+          value={props.attributes.author}
+          allowedFormats={[]}
+          // @ts-ignore
+          disableLineBreaks={false}
+          placeholder={__('Author')}
+          keepPlaceholderOnFocus={false}
+          onChange={(author) => {
+            setPlainTextAttribute(props, 'author', author);
+          }}
+        />
+        <RichText
+          identifier="role"
+          className="quote-role"
+          value={props.attributes.role}
+          allowedFormats={[]}
+          // @ts-ignore
+          disableLineBreaks={false}
+          placeholder={__('Role')}
+          keepPlaceholderOnFocus={false}
+          onChange={(role) => {
+            setPlainTextAttribute(props, 'role', role);
+          }}
+        />
+        <DrupalMediaEntity
+          classname={'w-full'}
+          attributes={{
+            ...props.attributes,
+            lockViewMode: true,
+            allowedTypes: ['image'],
+          }}
+          setAttributes={props.setAttributes}
+          isMediaLibraryEnabled={true}
+          onError={(error) => {
+            // @ts-ignore
+            error = typeof error === 'string' ? error : error[2];
+            dispatch('core/notices').createWarningNotice(error);
+          }}
+        />
+      </blockquote>
+    );
+  }),
+  save() {
+    return null;
+  },
+});

packages/drupal/gutenberg_blocks/src/index.ts

@@ -6,3 +6,4 @@ import './blocks/form';
 import './blocks/image-teaser';
 import './blocks/image-teasers';
 import './blocks/cta';
+import './blocks/quote';

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

@@ -10,31 +10,43 @@ _meta:
     72187a1f-3e48-4b45-a9b7-189c6fd7ee26: 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 -->
@@ -79,6 +91,9 @@ 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/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":["3a0fe860-a6d6-428a-9474-365bd57509aa"]} /-->
+
         <!-- wp:paragraph -->
         <p></p>
         <!-- /wp:paragraph -->
@@ -88,29 +103,40 @@ 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 -->
@@ -149,6 +175,8 @@ translations:
           <!-- wp:custom/cta {"url":"https://www.example.com","text":"External CTA DE","data-id":"https://www.example.com","data-entity-type":"","openInNewTab":true} /-->
 
           <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media DE","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media"} /-->
+
+          <!-- wp:custom/quote {"quote":"Lorem ipsum dolor sit amet, consectetur \u003cstrong\u003eadipiscing\u003c/strong\u003e elit. Vivamus sagittis nisi nec neque porta, a ornare ligula efficitur DE.","author":"John Doe","role":"Projektmanager","mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"]} /-->
           <!-- /wp:custom/content -->
         format: gutenberg
         summary: ''

packages/drupal/test_content/content/node/ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml

@@ -67,6 +67,8 @@ default:
         <!-- /wp:custom/heading -->
 
         <!-- wp:custom/cta /-->
+
+        <!-- wp:custom/quote {"quote":"In vitae diam quis odio tincidunt faucibus eget ut libero","author":"Jane Doe"} /-->
         <!-- /wp:custom/content -->
       format: gutenberg
       summary: ''

packages/schema/src/fragments/Page.gql

@@ -33,6 +33,7 @@ fragment Page on Page {
     ...BlockForm
     ...BlockImageTeasers
     ...BlockCta
+    ...BlockQuote
   }
   metaTags {
     tag

packages/schema/src/fragments/PageContent/BlockQuote.gql

@@ -0,0 +1,9 @@
+fragment BlockQuote on BlockQuote {
+  quote
+  author
+  role
+  image {
+    source(width: 1536, sizes: [[768, 768], [1536, 1536]])
+    alt
+  }
+}

packages/schema/src/schema.graphql

@@ -199,6 +199,7 @@ union PageContent @resolveEditorBlockType =
   | BlockForm
   | BlockImageTeasers
   | BlockCta
+  | BlockQuote
 
 type BlockForm @type(id: "custom/form") {
   url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$")
@@ -244,6 +245,13 @@ type BlockCta @type(id: "custom/cta") {
   openInNewTab: Boolean @resolveEditorBlockAttribute(key: "openInNewTab")
 }
 
+type BlockQuote @type(id: "custom/quote") {
+  quote: Markup @resolveEditorBlockAttribute(key: "quote")
+  author: String @resolveEditorBlockAttribute(key: "author")
+  role: String @resolveEditorBlockAttribute(key: "role")
+  image: MediaImage @resolveEditorBlockMedia
+}
+
 input PaginationInput {
   limit: Int!
   offset: Int!

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

@@ -18,7 +18,6 @@ export function BlockMarkup(props: BlockMarkupFragment) {
       className={clsx([
         'mx-auto max-w-3xl prose lg:prose-xl mt-10',
         'prose-a:text-indigo-600',
-        'prose-blockquote:border-indigo-200',
         'prose-em:text-indigo-600',
         'prose-strong:text-indigo-600',
         'marker:text-indigo-600 marker:font-bold',
@@ -49,6 +48,25 @@ export function BlockMarkup(props: BlockMarkupFragment) {
               </li>
             );
           },
+          blockquote: ({ children }: PropsWithChildren<{}>) => {
+            return (
+              <blockquote className="border-l-0 relative pl-0">
+                <svg
+                  width="32"
+                  height="24"
+                  viewBox="0 0 32 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
+                    fill="#9CA3AF"
+                  />
+                </svg>
+                {children}
+              </blockquote>
+            );
+          },
         }}
         markup={props.markup}
       />