Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/release' into SLB-287-background…
Browse files Browse the repository at this point in the history
…-image-cards
  • Loading branch information
mattiasimonato committed Apr 18, 2024
2 parents 00743e3 + 3414576 commit 1e5c13a
Show file tree
Hide file tree
Showing 19 changed files with 287 additions and 63 deletions.
1 change: 0 additions & 1 deletion apps/cms/config/sync/config_ignore.settings.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,4 @@ _core:
mode: simple
ignored_config_entities:
- 'webform.webform*'
- ~webform.webform.inquiry
enable_export_filtering: true
2 changes: 1 addition & 1 deletion apps/website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"test:static": "tsc --noEmit && eslint '**/*.{ts,tsx,js,jsx}' --ignore-path='./.gitignore'",
"full-rebuild": "pnpm clean && pnpm build:gatsby",
"start:drupal": "pnpm run --filter @custom/cms start",
"build:drupal": "CLOUDINARY_CLOUDNAME=test start-test start:drupal 8888 build:gatsby",
"build:drupal": "CLOUDINARY_CLOUDNAME=test pnpm start-test start:drupal 8888 build:gatsby",
"build:gatsby": "gatsby build",
"build": "if node has-drupal.mjs; then pnpm build:drupal; else pnpm build:gatsby; fi",
"start": "publisher",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
edit:
version: VERSION
js:
js/gutenberg_blocks.umd.js: {}
css:
Expand Down
128 changes: 128 additions & 0 deletions packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import {
// @ts-ignore
__experimentalLinkControl as LinkControl,
InspectorControls,
RichText,
} from 'wordpress__block-editor';
import { registerBlockType } from 'wordpress__blocks';
import { PanelBody, 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 (data-id) and the entity type of internal links.
'data-id': {
type: 'string',
},
'data-entity-type': {
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);
}}
/>
<InspectorControls>
<PanelBody title={__('CTA Link')}>
<LinkControl
value={{
url: props.attributes.url,
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,
'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'
: '',
});
}}
/>
<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,
});
}}
/>
</PanelBody>
</InspectorControls>
</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 @@ -86,6 +86,11 @@ 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","data-id":"f1f827c9-ed06-4e7d-b89d-a169e70a459c","data-entity-type":"node"} /-->
<!-- wp:custom/cta {"url":"https://www.google.com","text":"External CTA","data-id":"https://www.google.com","data-entity-type":"","openInNewTab":true} /-->
<!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media"} /-->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
Expand Down Expand Up @@ -162,9 +167,11 @@ 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","data-id":"f1f827c9-ed06-4e7d-b89d-a169e70a459c","data-entity-type":"node"} /-->
<!-- wp:custom/cta {"url":"https://www.example.com","text":"External CTA DE","data-id":"https://www.example.com","data-entity-type":"","openInNewTab":true} /-->
<!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media DE","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media"} /-->
<!-- /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: ''
Original file line number Diff line number Diff line change
Expand Up @@ -219,4 +219,4 @@ access:
users: { }
permissions: { }
handlers: { }
variants: { }
variants: { }
1 change: 1 addition & 0 deletions packages/schema/src/fragments/Page.gql
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ fragment Page on Page {
...BlockMedia
...BlockForm
...BlockImageTeasers
...BlockCta
}
metaTags {
tag
Expand Down
5 changes: 5 additions & 0 deletions packages/schema/src/fragments/PageContent/BlockCta.gql
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
fragment BlockCta on BlockCta {
url
text
openInNewTab
}
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
24 changes: 6 additions & 18 deletions packages/ui/src/components/Organisms/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,7 @@ export function Footer() {
</a>
<div className="sm:flex sm:items-center sm:justify-between">
<div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
<a
href="#"
className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
>
<a href="#" className="text-gray-400 hover:text-black">
<svg
className="w-5 h-5"
fill="currentColor"
Expand All @@ -88,10 +85,7 @@ export function Footer() {
/>
</svg>
</a>
<a
href="#"
className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
>
<a href="#" className="text-gray-400 hover:text-black">
<svg
className="w-5 h-5"
fill="currentColor"
Expand All @@ -101,10 +95,7 @@ export function Footer() {
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<a
href="#"
className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
>
<a href="#" className="text-gray-400 hover:text-black">
<svg
className="w-5 h-5"
fill="currentColor"
Expand All @@ -118,10 +109,7 @@ export function Footer() {
/>
</svg>
</a>
<a
href="#"
className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
>
<a href="#" className="text-gray-400 hover:text-black">
<svg
className="w-5 h-5"
fill="currentColor"
Expand Down Expand Up @@ -155,7 +143,7 @@ export function Footer() {
<Link
href={item.target!}
className={
'text-gray-900 block hover:text-blue-600 transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
'text-gray-900 block hover:underline transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
}
>
{item.title}
Expand All @@ -174,7 +162,7 @@ export function Footer() {
<Link
key={child.target}
href={child.target}
className="block transition-all text-base mb-4 hover:text-blue-600"
className="block transition-all text-base mb-4 hover:underline"
>
{child.title}
</Link>
Expand Down
7 changes: 7 additions & 0 deletions packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { BlockCtaFragment } from '@custom/schema';
import React from 'react';

export function BlockCta(props: BlockCtaFragment) {
console.log(props);
return <div />;
}
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function BlockMarkup(props: BlockMarkupFragment) {
className={clsx(className, { 'list-none relative': unordered })}
>
{unordered ? (
<ArrowRightCircleIcon className="w-6 h-6 absolute mt-0.5 left-[-1.5em] text-indigo-600" />
<ArrowRightCircleIcon className="not-prose w-6 h-6 absolute mt-1.5 left-[-1.5em] text-indigo-600" />
) : null}
{children}
</li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function BlockMedia(props: BlockMediaFragment) {
<figure className="mt-16 mx-auto max-w-3xl">
<Media {...props.media} />
{props.caption ? (
<figcaption className="mt-4 flex gap-x-2 text-sm leading-6 text-gray-500">
<figcaption className="mt-3 flex justify-center gap-x-2 text-sm leading-6 text-gray-500">
<Html markup={props.caption} />
</figcaption>
) : null}
Expand All @@ -27,7 +27,7 @@ function Media(props: Required<BlockMediaFragment>['media']) {
case 'MediaImage':
return (
<Image
className="rounded-xl max-w-full mx-auto"
className="max-w-full mx-auto"
source={props.source}
alt={props.alt}
/>
Expand Down
3 changes: 3 additions & 0 deletions packages/ui/src/components/Organisms/PageDisplay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -40,6 +41,8 @@ export function PageDisplay(page: PageFragment) {
BlockImageTeasers goes here
</div>
);
case 'BlockCta':
return <BlockCta key={index} {...block} />;
default:
throw new UnreachableCaseError(block);
}
Expand Down
Loading

0 comments on commit 1e5c13a

Please sign in to comment.