Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…mplate into feat/SLB-288
  • Loading branch information
HagerDakroury committed May 17, 2024
2 parents 5ec0529 + bd32f0b commit 1faf238
Show file tree
Hide file tree
Showing 35 changed files with 1,280 additions and 384 deletions.
18 changes: 18 additions & 0 deletions packages/drupal/gutenberg_blocks/css/edit.css
Original file line number Diff line number Diff line change
Expand Up @@ -82,3 +82,21 @@
height: 1.25rem;
content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
}
.gutenberg__editor .custom-block-accordion-item-text.questionmark h3::before {
margin-right: 7px;
content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
}

.gutenberg__editor .custom-block-accordion-item-text.checkmark h3::before {
margin-right: 7px;
content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4-4Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
}

.gutenberg__editor .custom-block-accordion-item-text.arrow h3::before {
margin-right: 7px;
content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' %3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
}

.gutenberg__editor .edit-post-visual-editor__content-area a.no-underline {
text-decoration: none;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<?php

namespace Drupal\gutenberg_blocks\Plugin\Validation\GutenbergValidator;

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

/**
* @GutenbergValidator(
* id="accordion_item_text_validator",
* label = @Translation("Accordion Item Text validator")
* )
*/
class AccordionItemTextValidator extends GutenbergValidatorBase {
use GutenbergCardinalityValidatorTrait;
use StringTranslationTrait;

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

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

/**
* {@inheritDoc}
*/
public function validateContent($block = []): array {
$expectedChildren = [
'validationType' => GutenbergCardinalityValidatorInterface::CARDINALITY_ANY,
'min' => 1,
'max' => GutenbergCardinalityValidatorInterface::CARDINALITY_UNLIMITED,
];
return $this->validateCardinality($block, $expectedChildren);
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<?php

namespace Drupal\gutenberg_blocks\Plugin\Validation\GutenbergValidator;

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

/**
* @GutenbergValidator(
* id="accordion_validator",
* label = @Translation("Accordion validator")
* )
*/
class AccordionValidator extends GutenbergValidatorBase {
use GutenbergCardinalityValidatorTrait;
use StringTranslationTrait;

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

/**
* {@inheritDoc}
*/
public function validateContent($block = []): array {
$expectedChildren = [
[
'blockName' => 'custom/accordion-item-text',
'blockLabel' => $this->t('Accordion'),
'min' => 1,
'max' => GutenbergCardinalityValidatorInterface::CARDINALITY_UNLIMITED,
],
];
return $this->validateCardinality($block, $expectedChildren);
}

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import clsx from 'clsx';
import React, { Fragment } from 'react';
import {
InnerBlocks,
InspectorControls,
RichText,
} from 'wordpress__block-editor';
import { registerBlockType } from 'wordpress__blocks';
import { PanelBody, SelectControl } from 'wordpress__components';
import { compose, withState } from 'wordpress__compose';

// @ts-ignore
const { t: __ } = Drupal;
// @ts-ignore
registerBlockType('custom/accordion-item-text', {
title: 'Accordion Item Text',
icon: 'text',
category: 'layout',
parent: ['custom/accordion'],
attributes: {
title: {
type: 'string',
},
icon: {
type: 'string',
},
},
// @ts-ignore
edit: compose(withState())((props) => {
const { attributes, setAttributes } = props;
const icons = [
{ label: __('- Select an optional icon -'), value: '' },
{ label: __('Checkmark'), value: 'checkmark' },
{ label: __('Questionmark'), value: 'questionmark' },
{ label: __('Arrow'), value: 'arrow' },
];
setAttributes({
icon: attributes.icon === undefined ? '' : attributes.icon,
});

return (
<Fragment>
<InspectorControls>
<PanelBody title={__('Block settings')}>
<SelectControl
value={attributes.icon}
options={icons}
onChange={(newValue) => {
setAttributes({
icon: newValue,
});
}}
/>
</PanelBody>
</InspectorControls>
<div className={'container-wrapper'}>
<div className={'container-label'}>{__('Accordion Item Text')}</div>
<div
className={clsx(
'custom-block-accordion-item-text',
attributes.icon,
)}
>
<RichText
identifier="title"
tagName="h3"
value={attributes.title}
allowedFormats={[]}
// @ts-ignore
disableLineBreaks={true}
placeholder={__('Title')}
keepPlaceholderOnFocus={true}
onChange={(newValue) => {
setAttributes({ title: newValue });
}}
/>
<InnerBlocks
templateLock={false}
allowedBlocks={['core/paragraph', 'core/list', 'core/heading']}
template={[['core/paragraph', {}]]}
/>
</div>
</div>
</Fragment>
);
}),

save: () => {
return <InnerBlocks.Content />;
},
});
25 changes: 25 additions & 0 deletions packages/drupal/gutenberg_blocks/src/blocks/accordion.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { InnerBlocks } from 'wordpress__block-editor';
import { registerBlockType } from 'wordpress__blocks';

// @ts-ignore
const { t: __ } = Drupal;

registerBlockType('custom/accordion', {
title: __('Accordion'),
icon: 'menu',
category: 'layout',
attributes: {},
edit: () => {
return (
<div className={'container-wrapper'}>
<div className={'container-label'}>{__('Accordion')}</div>
<InnerBlocks
templateLock={false}
allowedBlocks={['custom/accordion-item-text']}
template={[['custom/accordion-item-text']]}
/>
</div>
);
},
save: () => <InnerBlocks.Content />,
});
62 changes: 45 additions & 17 deletions packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import clsx from 'clsx';
import {
// @ts-ignore
__experimentalLinkControl as LinkControl,
Expand All @@ -14,6 +15,23 @@ const { t: __ } = Drupal;
// @ts-ignore
const { setPlainTextAttribute } = silverbackGutenbergUtils;

const ArrowRightIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 15"
fill="none"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.83401 4.23435C9.98403 4.08437 10.1875 4.00012 10.3996 4.00012C10.6117 4.00012 10.8152 4.08437 10.9652 4.23435L14.1652 7.43435C14.3152 7.58437 14.3994 7.78782 14.3994 7.99995C14.3994 8.21208 14.3152 8.41553 14.1652 8.56555L10.9652 11.7656C10.8143 11.9113 10.6122 11.9919 10.4025 11.9901C10.1927 11.9883 9.99208 11.9041 9.84375 11.7558C9.69543 11.6075 9.61129 11.4068 9.60947 11.1971C9.60765 10.9873 9.68828 10.7852 9.83401 10.6344L11.6684 8.79995H2.39961C2.18744 8.79995 1.98395 8.71567 1.83392 8.56564C1.68389 8.41561 1.59961 8.21212 1.59961 7.99995C1.59961 7.78778 1.68389 7.5843 1.83392 7.43427C1.98395 7.28424 2.18744 7.19995 2.39961 7.19995H11.6684L9.83401 5.36555C9.68403 5.21553 9.59978 5.01208 9.59978 4.79995C9.59978 4.58782 9.68403 4.38437 9.83401 4.23435Z"
className=" fill-blue-600 group-hover:fill-white transition-all duration-200 ease-in-out"
/>
</svg>
);

// @ts-ignore
registerBlockType('custom/cta', {
title: 'CTA',
Expand Down Expand Up @@ -50,23 +68,33 @@ registerBlockType('custom/cta', {
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);
}}
/>
<a
className={clsx(
{
'flex-row-reverse': props.attributes.iconPosition === 'BEFORE',
},
'no-underline text-blue-600 hover:text-white font-medium hover:bg-blue-600 flex flex-row items-center border border-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg py-2 px-3 gap-2 text-xs text-center w-fit transition-all duration-200 ease-in-out group',
)}
>
<RichText
identifier="text"
tagName="span"
value={props.attributes.text}
allowedFormats={[]}
// @ts-ignore
disableLineBreaks={true}
placeholder={__('Link text')}
keepPlaceholderOnFocus={true}
style={{
cursor: 'text',
}}
onChange={(text: string) => {
setPlainTextAttribute(props, 'text', text);
}}
/>
{typeof props.attributes.icon !== 'undefined' &&
props.attributes.icon === 'ARROW' && <ArrowRightIcon />}
</a>
<InspectorControls>
<PanelBody title={__('CTA Link')}>
<LinkControl
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { registerBlockType } from 'wordpress__blocks';
import { compose, withState } from 'wordpress__compose';

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

const { t: __ } = Drupal;

// @ts-ignore
registerBlockType(`custom/horizontal-separator`, {
title: __('Horizontal separator'),
icon: 'minus',
category: 'text',
attributes: {},
// @ts-ignore
edit: compose(withState())(() => {
return <hr />;
}),
save() {
return null;
},
});
3 changes: 3 additions & 0 deletions packages/drupal/gutenberg_blocks/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,6 @@ import './blocks/image-with-text';
import './filters/list';
import './blocks/cta';
import './blocks/quote';
import './blocks/horizontal-separator';
import './blocks/accordion';
import './blocks/accordion-item-text';
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ default:
<p>A standalone paragraph with <strong><em>markup</em></strong> and <a href="/node/0b45a665-286a-414e-a091-c13fa4e20eb2" data-type="Content: Basic page" data-id="0b45a665-286a-414e-a091-c13fa4e20eb2" data-entity-type="node">link</a></p>
<!-- /wp:paragraph -->
<!-- wp:custom/horizontal-separator /-->
<!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"caption":"Media image"} /-->
<!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["478c4289-961d-4ce8-85d6-578ae05f3019"],"caption":"Media video"} /-->
Expand Down Expand Up @@ -115,9 +117,23 @@ default:
<!-- 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:custom/accordion -->
<!-- wp:custom/accordion-item-text {"title":"With a single paragraph and no icon","icon":""} -->
<!-- wp:paragraph -->
<p></p>
<p>Incididunt laborum velit non proident nostrud velit. Minim excepteur ut aliqua nisi. Culpa laboris consectetur proident. Tempor esse ullamco et dolor proident id officia laborum voluptate nostrud elit dolore qui amet. Ex Lorem irure eu anim ipsum officia.</p>
<!-- /wp:paragraph -->
<!-- /wp:custom/accordion-item-text -->
<!-- wp:custom/accordion-item-text {"title":"With a list and a paragraph and arrow icon","icon":"arrow"} -->
<!-- wp:list -->
<ul><li>Moitié-moitié</li><li>Fribourgeoise</li></ul>
<!-- /wp:list -->
<!-- wp:paragraph -->
<p>Incididunt laborum velit non proident nostrud velit. Minim excepteur ut aliqua nisi. Culpa laboris consectetur proident. Tempor esse ullamco et dolor proident id officia laborum voluptate nostrud elit dolore qui amet. Ex Lorem irure eu anim ipsum officia.</p>
<!-- /wp:paragraph -->
<!-- /wp:custom/accordion-item-text -->
<!-- /wp:custom/accordion -->
<!-- /wp:custom/content -->
format: gutenberg
summary: ''
Expand Down
2 changes: 2 additions & 0 deletions packages/schema/src/fragments/Page.gql
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ fragment Page on Page {
...BlockCta
...BlockImageWithText
...BlockQuote
...BlockHorizontalSeparator
...BlockAccordion
}
metaTags {
tag
Expand Down
Loading

0 comments on commit 1faf238

Please sign in to comment.