feat(SLB-297 SLB-296): replace the core quote block with a custom one

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 [
+      'text' => [
+        '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: {
+    text: {
+      type: 'string',
+    },
+    author: {
+      tpye: 'string',
+    },
+    role: {
+      type: 'string',
+    },
+    mediaEntityIds: {
+      type: 'array',
+    },
+  },
+  // @ts-ignore
+  edit: compose(withState())((props) => {
+    return (
+      <blockquote>
+        <RichText
+          identifier="text"
+          value={props.attributes.text}
+          allowedFormats={['core/bold']}
+          // @ts-ignore
+          disableLineBreaks={false}
+          placeholder={__('Quote')}
+          keepPlaceholderOnFocus={false}
+          onChange={(text) => {
+            props.setAttributes({
+              text: cleanUpText(text),
+            });
+          }}
+        />
+        <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

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