chore(SLB-339): quote editor block style

AmazeeLabs · Apr 23, 2024 · fb37694 · fb37694
1 parent 045ce67
commit fb37694
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 61 deletions.
diff --git a/apps/cms/config/sync/core.entity_view_display.media.image.quote.yml b/apps/cms/config/sync/core.entity_view_display.media.image.quote.yml
@@ -0,0 +1,33 @@
+uuid: 195a40ca-6da4-4e2e-bc2f-c9c1fc0385bb
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.quote
+    - field.field.media.image.field_media_image
+    - image.style.quote
+    - media.type.image
+  module:
+    - image
+id: media.image.quote
+targetEntityType: media
+bundle: image
+mode: quote
+content:
+  field_media_image:
+    type: image
+    label: visually_hidden
+    settings:
+      image_link: ''
+      image_style: quote
+      image_loading:
+        attribute: lazy
+    third_party_settings: {  }
+    weight: 0
+    region: content
+hidden:
+  created: true
+  langcode: true
+  name: true
+  thumbnail: true
+  uid: true
diff --git a/apps/cms/config/sync/core.entity_view_mode.media.quote.yml b/apps/cms/config/sync/core.entity_view_mode.media.quote.yml
@@ -0,0 +1,11 @@
+uuid: f54c9109-a0ff-4a09-9772-748af96b8eb0
+langcode: en
+status: true
+dependencies:
+  module:
+    - media
+id: media.quote
+label: Quote
+description: ''
+targetEntityType: media
+cache: true
diff --git a/apps/cms/config/sync/image.style.quote.yml b/apps/cms/config/sync/image.style.quote.yml
@@ -0,0 +1,15 @@
+uuid: 983e88dc-78f8-463d-b088-026d7d96bcc0
+langcode: en
+status: true
+dependencies: {  }
+name: quote
+label: 'Quote (24x24)'
+effects:
+  3ac18111-aeda-4cd7-aafc-5cd66d0cbf7e:
+    uuid: 3ac18111-aeda-4cd7-aafc-5cd66d0cbf7e
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 24
+      height: 24
+      anchor: center-center
diff --git a/packages/drupal/gutenberg_blocks/css/edit.css b/packages/drupal/gutenberg_blocks/css/edit.css
@@ -7,16 +7,17 @@
   margin:0;
 }
 
+.gutenberg__editor blockquote .quote-image img {
+  object-fit: cover;
+  max-width: 100%;
+  border-radius: 9999px;
+}
+
 .gutenberg__editor blockquote::before,
 .gutenberg__editor blockquote::after {
   content: '';
 }
 
-.gutenberg__editor blockquote .quote-author,
-.gutenberg__editor blockquote .quote-role {
-  text-align: right;
-}
-
 .gutenberg__editor .container-wrapper {
   display: block;
   position: relative;

diff --git a/packages/drupal/gutenberg_blocks/src/blocks/quote.tsx b/packages/drupal/gutenberg_blocks/src/blocks/quote.tsx
@@ -35,63 +35,83 @@ registerBlockType(`custom/quote`, {
   // @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) => {
+      <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-gray-900">
+        <blockquote>
+          <svg
+            width="32"
+            height="24"
+            viewBox="0 0 32 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            role="img"
+            aria-labelledby="quote-svg-title"
+          >
+            <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>
+          <RichText
+            identifier="quote"
+            value={props.attributes.quote}
+            allowedFormats={['core/bold']}
             // @ts-ignore
-            error = typeof error === 'string' ? error : error[2];
-            dispatch('core/notices').createWarningNotice(error);
-          }}
-        />
-      </blockquote>
+            disableLineBreaks={false}
+            placeholder={__('Quote')}
+            keepPlaceholderOnFocus={false}
+            onChange={(quote) => {
+              props.setAttributes({
+                quote: cleanUpText(quote, ['strong']),
+              });
+            }}
+          />
+          <div className="flex not-prose items-center flex-wrap">
+            <div className="mr-3 quote-image">
+              <DrupalMediaEntity
+                attributes={{
+                  ...props.attributes,
+                  lockViewMode: true,
+                  allowedTypes: ['image'],
+                  viewMode: 'quote',
+                }}
+                setAttributes={props.setAttributes}
+                isMediaLibraryEnabled={true}
+                onError={(error) => {
+                  // @ts-ignore
+                  error = typeof error === 'string' ? error : error[2];
+                  dispatch('core/notices').createWarningNotice(error);
+                }}
+              />
+            </div>
+            <RichText
+              identifier="author"
+              value={props.attributes.author}
+              allowedFormats={[]}
+              // @ts-ignore
+              disableLineBreaks={false}
+              placeholder={__('Author')}
+              keepPlaceholderOnFocus={false}
+              onChange={(author) => {
+                setPlainTextAttribute(props, 'author', author);
+              }}
+            />
+            <span className="ml-3 text-base">/</span>
+            <RichText
+              identifier="role"
+              className="mt-0.5 not-italic text-gray-500 text-sm ml-3"
+              value={props.attributes.role}
+              allowedFormats={[]}
+              // @ts-ignore
+              disableLineBreaks={false}
+              placeholder={__('Role')}
+              keepPlaceholderOnFocus={false}
+              onChange={(role) => {
+                setPlainTextAttribute(props, 'role', role);
+              }}
+            />
+          </div>
+        </blockquote>
+      </div>
     );
   }),
   save() {