From e925360f69ced9aa787d5562b8538d2ee061a409 Mon Sep 17 00:00:00 2001 From: Vasile Chindris Date: Mon, 15 Apr 2024 10:33:44 +0300 Subject: [PATCH] feat(SLB-313 SLB-308): store uuid and entity type on cta elements --- .../gutenberg_blocks/src/blocks/cta.tsx | 35 +++++++++++++++++-- .../a397ca48-8fad-411e-8901-0eba2feb989c.yml | 12 ++++--- packages/schema/src/fragments/Page.gql | 1 + .../src/fragments/PageContent/BlockCta.gql | 5 +++ .../Organisms/PageContent/BlockCta.tsx | 7 ++++ .../src/components/Organisms/PageDisplay.tsx | 3 ++ tests/schema/specs/blocks.spec.ts | 12 +++++++ 7 files changed, 68 insertions(+), 7 deletions(-) create mode 100644 packages/schema/src/fragments/PageContent/BlockCta.gql create mode 100644 packages/ui/src/components/Organisms/PageContent/BlockCta.tsx diff --git a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx index ec6d9f7b4..ed98d4d0c 100644 --- a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx +++ b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx @@ -26,8 +26,11 @@ registerBlockType('custom/cta', { type: 'string', }, // To have an easier integration with entity usage, we also retrieve and - // store the uuid of internal links. - uuid: { + // store the uuid (data-id) and the entity type of internal links. + 'data-id': { + type: 'string', + }, + 'data-entity-type': { type: 'string', }, openInNewTab: { @@ -61,11 +64,37 @@ registerBlockType('custom/cta', { openInNewTab: props.attributes.openInNewTab, }} settings={{}} + // If you want to use a specific linkit profile for the suggestions, + // then you can do that by using the 'suggestionsQuery' property, like + // the one bellow, and change the 'subtype' property to the machine + // name of the linkit profile. By default, the 'gutenberg' profile + // is used. Of course, in this case, if the linkit profile can search + // through multiple entity types, then you'll have to set the value + // for 'data-entity-type' in the onChange() handler by yourself. + + //suggestionsQuery={{ + // type: 'post', + // subtype: 'gutenberg', + //}} // @ts-ignore onChange={(link) => { props.setAttributes({ url: link.url, - uuid: link.id, + 'data-id': link.id, + 'data-entity-type': + // At the moment, the silverback_gutenberg link autocomplete + // controller does not return the machine name of the entity + // type. Instead, it returns the human readable, translated, + // entity type label. We should refactor the LinkAutocomplete + // controller to return the machine name of the entity type, and + // then we can set the data-entity-type value more accurate. + // Right now, we just make a "guess" based on the the human + // readable label for English and German. + link.type.startsWith('Media') || link.type.startsWith('Medien') + ? 'media' + : link.type !== 'URL' + ? 'node' + : '', }); }} /> 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 116627ac3..2a18b3664 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 @@ -74,9 +74,11 @@ default: - + - + + +

@@ -142,9 +144,11 @@ translations:

Quote DE

Citation DE
- + + + - + format: gutenberg summary: '' diff --git a/packages/schema/src/fragments/Page.gql b/packages/schema/src/fragments/Page.gql index 36139a644..38c057340 100644 --- a/packages/schema/src/fragments/Page.gql +++ b/packages/schema/src/fragments/Page.gql @@ -32,6 +32,7 @@ fragment Page on Page { ...BlockMedia ...BlockForm ...BlockImageTeasers + ...BlockCta } metaTags { tag diff --git a/packages/schema/src/fragments/PageContent/BlockCta.gql b/packages/schema/src/fragments/PageContent/BlockCta.gql new file mode 100644 index 000000000..2dae0fda2 --- /dev/null +++ b/packages/schema/src/fragments/PageContent/BlockCta.gql @@ -0,0 +1,5 @@ +fragment BlockCta on BlockCta { + url + text + openInNewTab +} diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx new file mode 100644 index 000000000..a652f30b5 --- /dev/null +++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx @@ -0,0 +1,7 @@ +import { BlockCtaFragment } from '@custom/schema'; +import React from 'react'; + +export function BlockCta(props: BlockCtaFragment) { + console.log(props); + return
; +} diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx index 46f9627d0..bcefcb2ec 100644 --- a/packages/ui/src/components/Organisms/PageDisplay.tsx +++ b/packages/ui/src/components/Organisms/PageDisplay.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { isTruthy } from '../../utils/isTruthy'; import { UnreachableCaseError } from '../../utils/unreachable-case-error'; import { PageTransition } from '../Molecules/PageTransition'; +import { BlockCta } from './PageContent/BlockCta'; import { BlockForm } from './PageContent/BlockForm'; import { BlockMarkup } from './PageContent/BlockMarkup'; import { BlockMedia } from './PageContent/BlockMedia'; @@ -40,6 +41,8 @@ export function PageDisplay(page: PageFragment) { BlockImageTeasers goes here
); + case 'BlockCta': + return ; default: throw new UnreachableCaseError(block); } diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts index c542e5649..5a9c453af 100644 --- a/tests/schema/specs/blocks.spec.ts +++ b/tests/schema/specs/blocks.spec.ts @@ -71,6 +71,12 @@ test('Blocks', async () => { 'data-id="[numeric]"', ); + const ctaToMediaBlock = result.data.complete.content[8]; + ctaToMediaBlock.url = ctaToMediaBlock.url.replace( + /media\/\d+/, + 'media/[numeric]', + ); + expect(result).toMatchInlineSnapshot(` { "data": { @@ -149,6 +155,12 @@ test('Blocks', async () => { "text": "External CTA", "url": "https://www.google.com", }, + { + "__typename": "BlockCta", + "openInNewTab": null, + "text": "CTA with link to media", + "url": "/media/[numeric]", + }, { "__typename": "BlockMarkup", "markup": "