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": "