From fd0ab1477cf3646be2bca748f85b6e59dd5f8f2b Mon Sep 17 00:00:00 2001 From: Mattia Simonato Date: Thu, 11 Apr 2024 14:47:10 +0200 Subject: [PATCH 1/2] feat(SLB-284): add cta to Hero --- packages/ui/src/components/Organisms/PageHero.tsx | 12 +++++++++++- packages/ui/src/components/Routes/Page.stories.tsx | 2 ++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx index 212e97432..a90c9e778 100644 --- a/packages/ui/src/components/Organisms/PageHero.tsx +++ b/packages/ui/src/components/Organisms/PageHero.tsx @@ -1,4 +1,4 @@ -import { Image, PageFragment } from '@custom/schema'; +import { Image, Link, PageFragment } from '@custom/schema'; import React from 'react'; export function PageHero(props: NonNullable) { @@ -45,6 +45,16 @@ export function PageHero(props: NonNullable) { {props.lead ? (

{props.lead}

) : null} + {props.ctaText && props.ctaUrl ? ( + + {props.ctaText} + + ) : null} diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx index f72684dcb..dc50f159d 100644 --- a/packages/ui/src/components/Routes/Page.stories.tsx +++ b/packages/ui/src/components/Routes/Page.stories.tsx @@ -74,6 +74,8 @@ export const FullHero = { source: image(Landscape, { width: 2000 }), alt: 'Stock photo landscape hero.', }, + ctaUrl: '/test' as Url, + ctaText: 'Call to action', }, }, }, From aeea400cefcd663cdb657e909b44d837e4a69a29 Mon Sep 17 00:00:00 2001 From: Alex Tkachev Date: Thu, 11 Apr 2024 19:15:59 +0400 Subject: [PATCH 2/2] feat(SLB-286): add image-teasers gutenberg block --- .../src/blocks/image-teaser.tsx | 119 ++++++++++++++++++ .../src/blocks/image-teasers.tsx | 24 ++++ packages/drupal/gutenberg_blocks/src/index.ts | 2 + .../a397ca48-8fad-411e-8901-0eba2feb989c.yml | 7 ++ packages/schema/src/fragments/Page.gql | 1 + .../PageContent/BlockImageTeasers.gql | 11 ++ packages/schema/src/schema.graphql | 17 ++- .../src/components/Organisms/PageDisplay.tsx | 15 +++ tests/schema/specs/blocks.spec.ts | 40 +++++- 9 files changed, 234 insertions(+), 2 deletions(-) create mode 100644 packages/drupal/gutenberg_blocks/src/blocks/image-teaser.tsx create mode 100644 packages/drupal/gutenberg_blocks/src/blocks/image-teasers.tsx create mode 100644 packages/schema/src/fragments/PageContent/BlockImageTeasers.gql diff --git a/packages/drupal/gutenberg_blocks/src/blocks/image-teaser.tsx b/packages/drupal/gutenberg_blocks/src/blocks/image-teaser.tsx new file mode 100644 index 000000000..3306341e0 --- /dev/null +++ b/packages/drupal/gutenberg_blocks/src/blocks/image-teaser.tsx @@ -0,0 +1,119 @@ +import { + // @ts-ignore + __experimentalLinkControl as LinkControl, + InnerBlocks, + InspectorControls, + RichText, +} from 'wordpress__block-editor'; +import { registerBlockType } from 'wordpress__blocks'; +import { PanelBody } from 'wordpress__components'; +import { dispatch } from 'wordpress__data'; + +import { DrupalMediaEntity } from '../utils/drupal-media'; + +// @ts-ignore +const { t: __ } = Drupal; +// @ts-ignore +const { setPlainTextAttribute } = silverbackGutenbergUtils; + +registerBlockType('custom/image-teaser', { + title: __('Image Teaser'), + parent: ['custom/image-teasers'], + icon: 'cover-image', + category: 'layout', + attributes: { + mediaEntityIds: { + type: 'array', + }, + title: { + type: 'string', + }, + ctaUrl: { + type: 'string', + }, + ctaText: { + type: 'string', + }, + }, + edit: (props) => { + return ( + <> + + + { + props.setAttributes({ + ctaUrl: link.url, + }); + }} + /> + + +
+
+ { + // @ts-ignore + error = typeof error === 'string' ? error : error[2]; + dispatch('core/notices').createWarningNotice(error); + }} + /> +
+ +
+
+ { + setPlainTextAttribute(props, 'title', title); + }} + /> +
+
+ { + setPlainTextAttribute(props, 'ctaText', ctaText); + }} + /> +
+
+
+ + ); + }, + save: () => , +}); diff --git a/packages/drupal/gutenberg_blocks/src/blocks/image-teasers.tsx b/packages/drupal/gutenberg_blocks/src/blocks/image-teasers.tsx new file mode 100644 index 000000000..e94dd2df8 --- /dev/null +++ b/packages/drupal/gutenberg_blocks/src/blocks/image-teasers.tsx @@ -0,0 +1,24 @@ +import { InnerBlocks } from 'wordpress__block-editor'; +import { registerBlockType } from 'wordpress__blocks'; + +// @ts-ignore +const { t: __ } = Drupal; + +registerBlockType('custom/image-teasers', { + title: __('Image Teasers'), + icon: 'format-image', + category: 'layout', + attributes: {}, + edit: () => { + return ( + <> + + + ); + }, + save: () => , +}); diff --git a/packages/drupal/gutenberg_blocks/src/index.ts b/packages/drupal/gutenberg_blocks/src/index.ts index 5dffd482a..08099821b 100644 --- a/packages/drupal/gutenberg_blocks/src/index.ts +++ b/packages/drupal/gutenberg_blocks/src/index.ts @@ -3,3 +3,5 @@ import './blocks/hero'; import './blocks/content'; import './blocks/heading'; import './blocks/form'; +import './blocks/image-teaser'; +import './blocks/image-teasers'; diff --git a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml index e8fcab1ab..3076dbacc 100644 --- a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml +++ b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml @@ -7,6 +7,7 @@ _meta: depends: 3a0fe860-a6d6-428a-9474-365bd57509aa: media 478c4289-961d-4ce8-85d6-578ae05f3019: media + 72187a1f-3e48-4b45-a9b7-189c6fd7ee26: media default: revision_uid: - @@ -79,6 +80,12 @@ default:

Quote

Citation
+ + + + + +

diff --git a/packages/schema/src/fragments/Page.gql b/packages/schema/src/fragments/Page.gql index f3482cefa..36139a644 100644 --- a/packages/schema/src/fragments/Page.gql +++ b/packages/schema/src/fragments/Page.gql @@ -31,6 +31,7 @@ fragment Page on Page { ...BlockMarkup ...BlockMedia ...BlockForm + ...BlockImageTeasers } metaTags { tag diff --git a/packages/schema/src/fragments/PageContent/BlockImageTeasers.gql b/packages/schema/src/fragments/PageContent/BlockImageTeasers.gql new file mode 100644 index 000000000..cfc0f42bf --- /dev/null +++ b/packages/schema/src/fragments/PageContent/BlockImageTeasers.gql @@ -0,0 +1,11 @@ +fragment BlockImageTeasers on BlockImageTeasers { + teasers { + image { + source(width: 1536, sizes: [[768, 768], [1536, 1536]]) + alt + } + title + ctaText + ctaUrl + } +} diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql index 90c646ca4..232210302 100644 --- a/packages/schema/src/schema.graphql +++ b/packages/schema/src/schema.graphql @@ -193,7 +193,11 @@ type Hero { @webformIdToUrl(id: "$") } -union PageContent @resolveEditorBlockType = BlockMarkup | BlockMedia | BlockForm +union PageContent @resolveEditorBlockType = + BlockMarkup + | BlockMedia + | BlockForm + | BlockImageTeasers type BlockForm @type(id: "custom/form") { url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$") @@ -222,6 +226,17 @@ type BlockMedia @type(id: "drupalmedia/drupal-media-entity") { caption: Markup @resolveEditorBlockAttribute(key: "caption") } +type BlockImageTeasers @type(id: "custom/image-teasers") { + teasers: [BlockImageTeaser!]! @resolveEditorBlockChildren +} + +type BlockImageTeaser @default @value { + image: MediaImage @resolveEditorBlockMedia + title: String @resolveEditorBlockAttribute(key: "title") + ctaText: String @resolveEditorBlockAttribute(key: "ctaText") + ctaUrl: Url @resolveEditorBlockAttribute(key: "ctaUrl") +} + input PaginationInput { limit: Int! offset: Int! diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx index 1b91f99bf..46f9627d0 100644 --- a/packages/ui/src/components/Organisms/PageDisplay.tsx +++ b/packages/ui/src/components/Organisms/PageDisplay.tsx @@ -25,6 +25,21 @@ export function PageDisplay(page: PageFragment) { return ; case 'BlockForm': return ; + case 'BlockImageTeasers': + return ( + // TODO: Implement BlockImageTeasers +
+ BlockImageTeasers goes here +
+ ); default: throw new UnreachableCaseError(block); } diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts index df0bd4c7d..90360da34 100644 --- a/tests/schema/specs/blocks.spec.ts +++ b/tests/schema/specs/blocks.spec.ts @@ -37,6 +37,17 @@ test('Blocks', async () => { ... on BlockForm { url } + ... on BlockImageTeasers { + teasers { + __typename + image { + __typename + } + title + ctaText + ctaUrl + } + } } } { @@ -96,7 +107,34 @@ test('Blocks', async () => {

Heading 3

Quote

Citation
- + ", + }, + { + "__typename": "BlockImageTeasers", + "teasers": [ + { + "__typename": "BlockImageTeaser", + "ctaText": "Foo", + "ctaUrl": "https://google.com", + "image": { + "__typename": "MediaImage", + }, + "title": "Teaser 1", + }, + { + "__typename": "BlockImageTeaser", + "ctaText": "Bar", + "ctaUrl": "https://google.com", + "image": { + "__typename": "MediaImage", + }, + "title": "Teaser 2", + }, + ], + }, + { + "__typename": "BlockMarkup", + "markup": "

", },