From fb376946d8b6e1f938cb98f0badf1dce342ab990 Mon Sep 17 00:00:00 2001 From: Vasile Chindris Date: Tue, 23 Apr 2024 21:31:51 +0300 Subject: [PATCH 1/5] chore(SLB-339): quote editor block style --- ....entity_view_display.media.image.quote.yml | 33 +++++ .../core.entity_view_mode.media.quote.yml | 11 ++ apps/cms/config/sync/image.style.quote.yml | 15 ++ packages/drupal/gutenberg_blocks/css/edit.css | 11 +- .../gutenberg_blocks/src/blocks/quote.tsx | 132 ++++++++++-------- 5 files changed, 141 insertions(+), 61 deletions(-) create mode 100644 apps/cms/config/sync/core.entity_view_display.media.image.quote.yml create mode 100644 apps/cms/config/sync/core.entity_view_mode.media.quote.yml create mode 100644 apps/cms/config/sync/image.style.quote.yml 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 new file mode 100644 index 000000000..b88657103 --- /dev/null +++ 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 new file mode 100644 index 000000000..51148e9b4 --- /dev/null +++ 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 new file mode 100644 index 000000000..b7a85ee89 --- /dev/null +++ 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 index 1c603451e..39ab66473 100644 --- 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 index 1aea31b6a..d5873d2d7 100644 --- 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 ( -
- { - props.setAttributes({ - quote: cleanUpText(quote, ['strong']), - }); - }} - /> - { - setPlainTextAttribute(props, 'author', author); - }} - /> - { - setPlainTextAttribute(props, 'role', role); - }} - /> - { +
+
+ + + + -
+ disableLineBreaks={false} + placeholder={__('Quote')} + keepPlaceholderOnFocus={false} + onChange={(quote) => { + props.setAttributes({ + quote: cleanUpText(quote, ['strong']), + }); + }} + /> +
+
+ { + // @ts-ignore + error = typeof error === 'string' ? error : error[2]; + dispatch('core/notices').createWarningNotice(error); + }} + /> +
+ { + setPlainTextAttribute(props, 'author', author); + }} + /> + / + { + setPlainTextAttribute(props, 'role', role); + }} + /> +
+
+ ); }), save() { From 7f2d44f37b327c86b512fcb432240eb858905d8c Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 24 Apr 2024 08:39:18 +0200 Subject: [PATCH 2/5] style: adjust margin --- .../ui/src/components/Organisms/PageContent/BlockQuote.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx index 6c1abaad9..d4f84abe1 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx @@ -24,12 +24,12 @@ export function BlockQuote(props: BlockQuoteFragment) {
{props.image && ( {props.image.alt )} -
+
{props.author &&

{props.author}

}
{props.role && ( From 12f141bcd3a8ea0a902a12c4e872ca8361e404e3 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 24 Apr 2024 09:13:30 +0200 Subject: [PATCH 3/5] style(SLB-298): add no author avatar block quote story --- .../Organisms/PageContent/BlockQuote.stories.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.stories.ts b/packages/ui/src/components/Organisms/PageContent/BlockQuote.stories.ts index ffe6090f1..6b40c8afd 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockQuote.stories.ts +++ b/packages/ui/src/components/Organisms/PageContent/BlockQuote.stories.ts @@ -21,3 +21,12 @@ export const Quote = { '

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

' as Markup, }, } satisfies StoryObj; + +export const NoAvatarQuote = { + args: { + role: 'test role', + author: 'Author name', + quote: + '

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

' as Markup, + }, +} satisfies StoryObj; From aba7e01561e83e6cc0a9719e265a2bb72ee43385 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Wed, 24 Apr 2024 10:41:49 +0200 Subject: [PATCH 4/5] style(SLB-298): add blockquote padding --- packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx index d4f84abe1..7ad1d3ab0 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx @@ -4,7 +4,7 @@ import React from 'react'; export function BlockQuote(props: BlockQuoteFragment) { return (
-
+
Date: Thu, 25 Apr 2024 09:32:20 +0200 Subject: [PATCH 5/5] style(SLB-298): typography tweaks --- .../ui/src/components/Organisms/PageContent/BlockQuote.tsx | 6 +++--- packages/ui/src/tailwind.css | 7 ++++++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx index 7ad1d3ab0..c99955e06 100644 --- a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx +++ b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx @@ -3,7 +3,7 @@ import React from 'react'; export function BlockQuote(props: BlockQuoteFragment) { return ( -
+
- {props.quote && } +

{props.quote && }

{props.image && ( {props.image.alt )} -
+
{props.author &&

{props.author}

}
{props.role && ( diff --git a/packages/ui/src/tailwind.css b/packages/ui/src/tailwind.css index 2d464b850..944e19871 100644 --- a/packages/ui/src/tailwind.css +++ b/packages/ui/src/tailwind.css @@ -6,12 +6,17 @@ @tailwind utilities; /* Prose overrides */ +.prose + :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) { + font-weight: 400; +} + .lg\:prose-xl :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) { padding-left: 0 !important; } -.prose :where(blockquote p):not( :where([class~='not-prose']) ) { +.prose :where(blockquote p):not(:where([class~='not-prose'])) { margin-top: 12px !important; margin-bottom: 12px !important; }