Skip to content

Commit

Permalink
Merge branch 'SLB-296-quote-block-gutenberg' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
chindris committed Apr 22, 2024
2 parents a1506ef + 045ce67 commit ea949a9
Show file tree
Hide file tree
Showing 23 changed files with 479 additions and 27 deletions.
6 changes: 5 additions & 1 deletion apps/cms/config/sync/gutenberg.settings.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ page_template_lock: all
page_allowed_blocks:
core/paragraph: core/paragraph
core/list: core/list
core/quote: core/quote
core/table: core/table
core/all: 0
core/image: 0
core/heading: 0
core/gallery: 0
core/quote: 0
core/audio: 0
core/button: 0
core/buttons: 0
Expand Down Expand Up @@ -75,6 +75,7 @@ page_allowed_drupal_blocks:
drupalblock/all_core: 0
page_title_block: 0
drupalblock/all_forms: 0
masquerade: 0
user_login_block: 0
drupalblock/all_lists_views_: 0
'views_block:content_recent-block_1': 0
Expand All @@ -91,3 +92,6 @@ page_allowed_drupal_blocks:
system_branding_block: 0
node_syndicate_block: 0
drupalblock/all_user: 0
drupalblock/all_webform: 0
webform_block: 0
webform_submission_limit_block: 0
5 changes: 5 additions & 0 deletions packages/drupal/gutenberg_blocks/css/edit.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@
content: '';
}

.gutenberg__editor blockquote .quote-author,
.gutenberg__editor blockquote .quote-role {
text-align: right;
}

.gutenberg__editor .container-wrapper {
display: block;
position: relative;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<?php

namespace Drupal\gutenberg_blocks\Plugin\Validation\GutenbergValidator;

use Drupal\Core\StringTranslation\StringTranslationTrait;
use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergValidatorBase;

/**
* @GutenbergValidator(
* id="quote_validator",
* label = @Translation("Quote validator")
* )
*/
class QuoteValidator extends GutenbergValidatorBase {
use StringTranslationTrait;

/**
* {@inheritDoc}
*/
public function applies(array $block): bool {
return $block['blockName'] === 'custom/quote';
}

/**
* {@inheritDoc}
*/
public function validatedFields($block = []): array {
return [
'quote' => [
'field_label' => $this->t('Quote text'),
'rules' => ['required'],
],
'author' => [
'field_label' => $this->t('Quote author'),
'rules' => ['required'],
],
];
}

}
100 changes: 100 additions & 0 deletions packages/drupal/gutenberg_blocks/src/blocks/quote.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import { RichText } from 'wordpress__block-editor';
import { registerBlockType } from 'wordpress__blocks';
import { compose, withState } from 'wordpress__compose';
import { dispatch } from 'wordpress__data';

import { cleanUpText } from '../utils/clean-up-text';
import { DrupalMediaEntity } from '../utils/drupal-media';

declare const Drupal: { t: (s: string) => string };

const { t: __ } = Drupal;

// @ts-ignore
const { setPlainTextAttribute } = silverbackGutenbergUtils;

// @ts-ignore
registerBlockType(`custom/quote`, {
title: __('Quote'),
icon: 'format-quote',
category: 'text',
attributes: {
quote: {
type: 'string',
},
author: {
tpye: 'string',
},
role: {
type: 'string',
},
mediaEntityIds: {
type: 'array',
},
},
// @ts-ignore
edit: compose(withState())((props) => {
return (
<blockquote>
<RichText
identifier="quote"
value={props.attributes.quote}
allowedFormats={['core/bold']}
// @ts-ignore
disableLineBreaks={false}
placeholder={__('Quote')}
keepPlaceholderOnFocus={false}
onChange={(quote) => {
props.setAttributes({
quote: cleanUpText(quote, ['strong']),
});
}}
/>
<RichText
identifier="author"
className="quote-author"
value={props.attributes.author}
allowedFormats={[]}
// @ts-ignore
disableLineBreaks={false}
placeholder={__('Author')}
keepPlaceholderOnFocus={false}
onChange={(author) => {
setPlainTextAttribute(props, 'author', author);
}}
/>
<RichText
identifier="role"
className="quote-role"
value={props.attributes.role}
allowedFormats={[]}
// @ts-ignore
disableLineBreaks={false}
placeholder={__('Role')}
keepPlaceholderOnFocus={false}
onChange={(role) => {
setPlainTextAttribute(props, 'role', role);
}}
/>
<DrupalMediaEntity
classname={'w-full'}
attributes={{
...props.attributes,
lockViewMode: true,
allowedTypes: ['image'],
}}
setAttributes={props.setAttributes}
isMediaLibraryEnabled={true}
onError={(error) => {
// @ts-ignore
error = typeof error === 'string' ? error : error[2];
dispatch('core/notices').createWarningNotice(error);
}}
/>
</blockquote>
);
}),
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 @@ -8,3 +8,4 @@ import './blocks/image-teasers';
import './blocks/image-with-text';
import './filters/list';
import './blocks/cta';
import './blocks/quote';
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
_meta:
version: '1.0'
entity_type: file
uuid: 2f1be18f-dc18-4b56-8ff0-ce24d8ff7df7
default_langcode: en
default:
uid:
-
target_id: 1
filename:
-
value: the_silverback.jpeg
uri:
-
value: 'public://2024-04/the_silverback.jpeg'
filemime:
-
value: image/jpeg
filesize:
-
value: 146269
status:
-
value: true
created:
-
value: 1713785099
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
_meta:
version: '1.0'
entity_type: media
uuid: 5dfc1856-e9e4-4f02-9cd6-9d888870ce1a
bundle: image
default_langcode: en
depends:
2f1be18f-dc18-4b56-8ff0-ce24d8ff7df7: file
default:
revision_user:
-
target_id: 1
status:
-
value: true
uid:
-
target_id: 1
name:
-
value: the_silverback.jpeg
created:
-
value: 1713785099
path:
-
alias: ''
langcode: en
pathauto: 0
content_translation_source:
-
value: und
content_translation_outdated:
-
value: false
field_media_image:
-
entity: 2f1be18f-dc18-4b56-8ff0-ce24d8ff7df7
alt: 'The silverback'
title: ''
width: 1280
height: 720
translations:
de:
status:
-
value: true
uid:
-
target_id: 1
name:
-
value: the_silverback.jpeg
created:
-
value: 1713785205
path:
-
alias: ''
langcode: de
pathauto: 0
content_translation_source:
-
value: en
content_translation_outdated:
-
value: false
field_media_image:
-
entity: 2f1be18f-dc18-4b56-8ff0-ce24d8ff7df7
alt: 'The silverback DE'
title: ''
width: 1280
height: 720
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ _meta:
3a0fe860-a6d6-428a-9474-365bd57509aa: media
478c4289-961d-4ce8-85d6-578ae05f3019: media
72187a1f-3e48-4b45-a9b7-189c6fd7ee26: media
5dfc1856-e9e4-4f02-9cd6-9d888870ce1a: media
default:
revision_uid:
-
Expand Down Expand Up @@ -102,10 +103,6 @@ default:
<h3 class="wp-block-custom-heading">Heading 3</h3>
<!-- /wp:custom/heading -->
<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Quote</p><cite>Citation</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:custom/image-teasers -->
<!-- wp:custom/image-teaser {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"title":"Teaser 1","ctaUrl":"https://google.com","ctaText":"Foo"} /-->
Expand All @@ -117,6 +114,9 @@ default:
<!-- 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:custom/quote {"quote":"Lorem ipsum dolor sit amet, \u003cstrong\u003econsectetur\u003c/strong\u003e adipiscing elit. Vivamus sagittis nisi nec neque porta, a ornare ligula efficitur.","author":"John Doe","role":"Project manager","mediaEntityIds":["5dfc1856-e9e4-4f02-9cd6-9d888870ce1a"]} /-->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
Expand Down Expand Up @@ -189,15 +189,13 @@ translations:
<h3 class="wp-block-custom-heading">Heading 3 DE</h3>
<!-- /wp:custom/heading -->
<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Quote DE</p><cite>Citation DE</cite></blockquote>
<!-- /wp:quote -->
<!-- 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/quote {"quote":"Lorem ipsum dolor sit amet, consectetur \u003cstrong\u003eadipiscing\u003c/strong\u003e elit. Vivamus sagittis nisi nec neque porta, a ornare ligula efficitur DE.","author":"John Doe","role":"Projektmanager","mediaEntityIds":["5dfc1856-e9e4-4f02-9cd6-9d888870ce1a"]} /-->
<!-- /wp:custom/content -->
format: gutenberg
summary: ''
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,6 @@ default:
<figure class="wp-block-table"><table><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table></figure>
<!-- /wp:table -->
<!-- wp:quote -->
<blockquote class="wp-block-quote"><p></p></blockquote>
<!-- /wp:quote -->
<!-- wp:custom/heading -->
<h2 class="wp-block-custom-heading"></h2>
<!-- /wp:custom/heading -->
Expand All @@ -73,6 +69,7 @@ default:
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:custom/image-with-text -->
<!-- wp:custom/quote {"quote":"In vitae diam quis odio tincidunt faucibus eget ut libero","author":"Jane Doe"} /-->
<!-- /wp:custom/content -->
format: gutenberg
summary: ''
1 change: 1 addition & 0 deletions packages/schema/src/fragments/Page.gql
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ fragment Page on Page {
...BlockImageTeasers
...BlockCta
...BlockImageWithText
...BlockQuote
}
metaTags {
tag
Expand Down
9 changes: 9 additions & 0 deletions packages/schema/src/fragments/PageContent/BlockQuote.gql
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
fragment BlockQuote on BlockQuote {
quote
author
role
image {
source(width: 1536, sizes: [[768, 768], [1536, 1536]])
alt
}
}
8 changes: 8 additions & 0 deletions packages/schema/src/schema.graphql
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,7 @@ union PageContent @resolveEditorBlockType =
| BlockImageTeasers
| BlockCta
| BlockImageWithText
| BlockQuote

type BlockForm @type(id: "custom/form") {
url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$")
Expand Down Expand Up @@ -250,6 +251,13 @@ type BlockImageWithText @type(id: "custom/image-with-text") {
textContent: BlockMarkup @resolveEditorBlockChildren @seek(pos: 0)
}

type BlockQuote @type(id: "custom/quote") {
quote: Markup @resolveEditorBlockAttribute(key: "quote")
author: String @resolveEditorBlockAttribute(key: "author")
role: String @resolveEditorBlockAttribute(key: "role")
image: MediaImage @resolveEditorBlockMedia
}

input PaginationInput {
limit: Int!
offset: Int!
Expand Down
Loading

0 comments on commit ea949a9

Please sign in to comment.