diff --git a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx new file mode 100644 index 000000000..ec6d9f7b4 --- /dev/null +++ b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx @@ -0,0 +1,93 @@ +import { + // @ts-ignore + __experimentalLinkControl as LinkControl, + RichText, +} from 'wordpress__block-editor'; +import { registerBlockType } from 'wordpress__blocks'; +import { ToggleControl } from 'wordpress__components'; +import { compose, withState } from 'wordpress__compose'; + +// @ts-ignore +const { t: __ } = Drupal; + +// @ts-ignore +const { setPlainTextAttribute } = silverbackGutenbergUtils; + +// @ts-ignore +registerBlockType('custom/cta', { + title: 'CTA', + icon: 'admin-links', + category: 'common', + attributes: { + url: { + type: 'string', + }, + text: { + type: 'string', + }, + // To have an easier integration with entity usage, we also retrieve and + // store the uuid of internal links. + uuid: { + type: 'string', + }, + openInNewTab: { + type: 'boolean', + }, + }, + // @ts-ignore + edit: compose(withState({}))((props) => { + return ( +
+ { + setPlainTextAttribute(props, 'text', text); + }} + /> + { + props.setAttributes({ + url: link.url, + uuid: link.id, + }); + }} + /> + { + props.setAttributes({ + openInNewTab, + }); + }} + /> +
+ ); + }), + + save: () => { + return null; + }, +}); diff --git a/packages/drupal/gutenberg_blocks/src/index.ts b/packages/drupal/gutenberg_blocks/src/index.ts index 5dffd482a..29b9cc2dc 100644 --- a/packages/drupal/gutenberg_blocks/src/index.ts +++ b/packages/drupal/gutenberg_blocks/src/index.ts @@ -3,3 +3,4 @@ import './blocks/hero'; import './blocks/content'; import './blocks/heading'; import './blocks/form'; +import './blocks/cta'; 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..55b3b2eba 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 @@ -79,9 +79,9 @@ default:

Quote

Citation
- -

- + + + format: gutenberg summary: '' @@ -155,9 +155,9 @@ translations:

Quote DE

Citation DE
- -

- + + + format: gutenberg summary: '' diff --git a/packages/drupal/test_content/content/node/ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml b/packages/drupal/test_content/content/node/ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml index 6ed97ed67..6c19a491d 100644 --- a/packages/drupal/test_content/content/node/ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml +++ b/packages/drupal/test_content/content/node/ceb9b2a7-4c4c-4084-ada9-d5f6505d466b.yml @@ -65,6 +65,8 @@ default:

+ + format: gutenberg summary: '' diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql index 90c646ca4..4750e167d 100644 --- a/packages/schema/src/schema.graphql +++ b/packages/schema/src/schema.graphql @@ -193,7 +193,17 @@ type Hero { @webformIdToUrl(id: "$") } -union PageContent @resolveEditorBlockType = BlockMarkup | BlockMedia | BlockForm +union PageContent @resolveEditorBlockType = + BlockMarkup + | BlockMedia + | BlockForm + | BlockCta + +type BlockCta @type(id: "custom/cta") { + url: Url @resolveEditorBlockAttribute(key: "url") + text: String @resolveEditorBlockAttribute(key: "text") + openInNewTab: Boolean @resolveEditorBlockAttribute(key: "openInNewTab") +} type BlockForm @type(id: "custom/form") { url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$") diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts index df0bd4c7d..05bed8794 100644 --- a/tests/schema/specs/blocks.spec.ts +++ b/tests/schema/specs/blocks.spec.ts @@ -37,6 +37,11 @@ test('Blocks', async () => { ... on BlockForm { url } + ... on BlockCta { + url + text + openInNewTab + } } } { @@ -96,9 +101,19 @@ test('Blocks', async () => {

Heading 3

Quote

Citation
- -

- ", +", + }, + { + "__typename": "BlockCta", + "openInNewTab": null, + "text": "Internal CTA", + "url": "/en/drupal", + }, + { + "__typename": "BlockCta", + "openInNewTab": true, + "text": "External CTA", + "url": "https://www.google.com", }, ], "hero": { @@ -136,6 +151,12 @@ test('Blocks', async () => {

", }, + { + "__typename": "BlockCta", + "openInNewTab": null, + "text": null, + "url": null, + }, ], "hero": { "__typename": "Hero",