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 08099821b..a0aff90af 100644 --- a/packages/drupal/gutenberg_blocks/src/index.ts +++ b/packages/drupal/gutenberg_blocks/src/index.ts @@ -5,3 +5,4 @@ import './blocks/heading'; import './blocks/form'; import './blocks/image-teaser'; import './blocks/image-teasers'; +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 3076dbacc..116627ac3 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 @@ -10,43 +10,31 @@ _meta: 72187a1f-3e48-4b45-a9b7-189c6fd7ee26: media default: revision_uid: - - - target_id: 1 + - target_id: 1 status: - - - value: true + - value: true uid: - - - target_id: 1 + - target_id: 1 title: - - - value: 'Blocks: complete' + - value: 'Blocks: complete' created: - - - value: 1686759493 + - value: 1686759493 promote: - - - value: false + - value: false sticky: - - - value: false + - value: false moderation_state: - - - value: published + - value: published path: - - - alias: /blocks-complete + - alias: /blocks-complete langcode: en pathauto: 0 content_translation_source: - - - value: und + - value: und content_translation_outdated: - - - value: false + - value: false body: - - - value: |- + - value: |- @@ -86,6 +74,9 @@ default: + + +

@@ -95,40 +86,29 @@ default: translations: de: status: - - - value: true + - value: true uid: - - - target_id: 1 + - target_id: 1 title: - - - value: 'Blocks: complete DE' + - value: 'Blocks: complete DE' created: - - - value: 1687338353 + - value: 1687338353 promote: - - - value: false + - value: false sticky: - - - value: false + - value: false moderation_state: - - - value: published + - value: published path: - - - alias: /blocks-complete + - alias: /blocks-complete langcode: de pathauto: 0 content_translation_source: - - - value: en + - value: en content_translation_outdated: - - - value: false + - value: false body: - - - value: |- + - value: |- @@ -162,9 +142,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 232210302..9300972cb 100644 --- a/packages/schema/src/schema.graphql +++ b/packages/schema/src/schema.graphql @@ -198,6 +198,7 @@ union PageContent @resolveEditorBlockType = | BlockMedia | BlockForm | BlockImageTeasers + | BlockCta type BlockForm @type(id: "custom/form") { url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$") @@ -237,6 +238,12 @@ type BlockImageTeaser @default @value { ctaUrl: Url @resolveEditorBlockAttribute(key: "ctaUrl") } +type BlockCta @type(id: "custom/cta") { + url: Url @resolveEditorBlockAttribute(key: "url") + text: String @resolveEditorBlockAttribute(key: "text") + openInNewTab: Boolean @resolveEditorBlockAttribute(key: "openInNewTab") +} + input PaginationInput { limit: Int! offset: Int! diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts index 90360da34..c542e5649 100644 --- a/tests/schema/specs/blocks.spec.ts +++ b/tests/schema/specs/blocks.spec.ts @@ -48,6 +48,11 @@ test('Blocks', async () => { ctaUrl } } + ... on BlockCta { + url + text + openInNewTab + } } } { @@ -132,6 +137,18 @@ test('Blocks', async () => { }, ], }, + { + "__typename": "BlockCta", + "openInNewTab": null, + "text": "Internal CTA", + "url": "/en/drupal", + }, + { + "__typename": "BlockCta", + "openInNewTab": true, + "text": "External CTA", + "url": "https://www.google.com", + }, { "__typename": "BlockMarkup", "markup": " @@ -174,6 +191,12 @@ test('Blocks', async () => {

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