Skip to content

Commit

Permalink
feat(SLB-313 SLB-308): gutenberg cta block and its graphql schema
Browse files Browse the repository at this point in the history
  • Loading branch information
chindris committed Apr 16, 2024
1 parent 2102577 commit e61121e
Show file tree
Hide file tree
Showing 6 changed files with 155 additions and 49 deletions.
93 changes: 93 additions & 0 deletions packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<RichText
identifier="text"
className={`button`}
tagName="p"
value={props.attributes.text}
allowedFormats={[]}
// @ts-ignore
disableLineBreaks={true}
placeholder={__('Link text')}
keepPlaceholderOnFocus={true}
style={{
cursor: 'text',
}}
onChange={(text: string) => {
setPlainTextAttribute(props, 'text', text);
}}
/>
<LinkControl
value={{
url: props.attributes.url,
openInNewTab: props.attributes.openInNewTab,
}}
settings={{}}
// @ts-ignore
onChange={(link) => {
props.setAttributes({
url: link.url,
uuid: link.id,
});
}}
/>
<ToggleControl
label={__('Open in new tab')}
help={
props.attributes.openInNewTab
? __('Opens in a new tab.')
: __('Opens in the same tab.')
}
checked={props.attributes.openInNewTab}
onChange={(openInNewTab) => {
props.setAttributes({
openInNewTab,
});
}}
/>
</div>
);
}),

save: () => {
return null;
},
});
1 change: 1 addition & 0 deletions packages/drupal/gutenberg_blocks/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ import './blocks/heading';
import './blocks/form';
import './blocks/image-teaser';
import './blocks/image-teasers';
import './blocks/cta';
Original file line number Diff line number Diff line change
Expand Up @@ -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: |-
<!-- wp:custom/hero {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"headline":"All kinds of blocks with maximum data","lead":"Lead text","ctaUrl":"https://example.com","ctaText":"CTA text","formId":"contact"} /-->
<!-- wp:custom/content -->
Expand Down Expand Up @@ -86,6 +74,9 @@ default:
<!-- wp:custom/image-teaser {"mediaEntityIds":["72187a1f-3e48-4b45-a9b7-189c6fd7ee26"],"title":"Teaser 2","ctaUrl":"https://google.com","ctaText":"Bar"} /-->
<!-- /wp:custom/image-teasers -->
<!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA","uuid":"f1f827c9-ed06-4e7d-b89d-a169e70a459c"} /-->
<!-- wp:custom/cta {"url":"https://www.google.com","text":"External CTA","uuid":"https://www.google.com","openInNewTab":true} /-->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
Expand All @@ -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: |-
<!-- wp:custom/hero {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"headline":"All kinds of blocks with maximum data DE","lead":"Lead text DE"} /-->
<!-- wp:custom/content -->
Expand Down Expand Up @@ -162,9 +142,9 @@ translations:
<blockquote class="wp-block-quote"><p>Quote DE</p><cite>Citation DE</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA DE","uuid":"f1f827c9-ed06-4e7d-b89d-a169e70a459c"} /-->
<!-- wp:custom/cta {"url":"https://www.example.com","text":"External CTA DE","uuid":"https://www.example.com","openInNewTab":true} /-->
<!-- /wp:custom/content -->
format: gutenberg
summary: ''
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ default:
<!-- wp:custom/heading -->
<h2 class="wp-block-custom-heading"></h2>
<!-- /wp:custom/heading -->
<!-- wp:custom/cta /-->
<!-- /wp:custom/content -->
format: gutenberg
summary: ''
7 changes: 7 additions & 0 deletions packages/schema/src/schema.graphql
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,7 @@ union PageContent @resolveEditorBlockType =
| BlockMedia
| BlockForm
| BlockImageTeasers
| BlockCta

type BlockForm @type(id: "custom/form") {
url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$")
Expand Down Expand Up @@ -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!
Expand Down
23 changes: 23 additions & 0 deletions tests/schema/specs/blocks.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ test('Blocks', async () => {
ctaUrl
}
}
... on BlockCta {
url
text
openInNewTab
}
}
}
{
Expand Down Expand Up @@ -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": "
Expand Down Expand Up @@ -174,6 +191,12 @@ test('Blocks', async () => {
<h2 class="wp-block-custom-heading"></h2>
",
},
{
"__typename": "BlockCta",
"openInNewTab": null,
"text": null,
"url": null,
},
],
"hero": {
"__typename": "Hero",
Expand Down

0 comments on commit e61121e

Please sign in to comment.