From e04e7233f6043586d8706b650f3bfb822464c93e Mon Sep 17 00:00:00 2001 From: Eli Stone Date: Fri, 3 May 2024 14:57:22 +0100 Subject: [PATCH 01/66] feat(slb-306): new gutenberg block for info-grid --- .../gutenberg_blocks/images/icons/email.svg | 1 + .../images/icons/life-ring.svg | 1 + .../gutenberg_blocks/images/icons/phone.svg | 1 + .../src/blocks/info-grid-item.tsx | 55 +++++++++++++++++++ .../gutenberg_blocks/src/blocks/info-grid.tsx | 38 +++++++++++++ packages/drupal/gutenberg_blocks/src/index.ts | 2 + .../gutenberg_blocks/src/utils/icon-list.ts | 25 +++++++++ 7 files changed, 123 insertions(+) create mode 100644 packages/drupal/gutenberg_blocks/images/icons/email.svg create mode 100644 packages/drupal/gutenberg_blocks/images/icons/life-ring.svg create mode 100644 packages/drupal/gutenberg_blocks/images/icons/phone.svg create mode 100644 packages/drupal/gutenberg_blocks/src/blocks/info-grid-item.tsx create mode 100644 packages/drupal/gutenberg_blocks/src/blocks/info-grid.tsx create mode 100644 packages/drupal/gutenberg_blocks/src/utils/icon-list.ts diff --git a/packages/drupal/gutenberg_blocks/images/icons/email.svg b/packages/drupal/gutenberg_blocks/images/icons/email.svg new file mode 100644 index 000000000..e8a2b5593 --- /dev/null +++ b/packages/drupal/gutenberg_blocks/images/icons/email.svg @@ -0,0 +1 @@ + diff --git a/packages/drupal/gutenberg_blocks/images/icons/life-ring.svg b/packages/drupal/gutenberg_blocks/images/icons/life-ring.svg new file mode 100644 index 000000000..304d20a2b --- /dev/null +++ b/packages/drupal/gutenberg_blocks/images/icons/life-ring.svg @@ -0,0 +1 @@ + diff --git a/packages/drupal/gutenberg_blocks/images/icons/phone.svg b/packages/drupal/gutenberg_blocks/images/icons/phone.svg new file mode 100644 index 000000000..db2787d11 --- /dev/null +++ b/packages/drupal/gutenberg_blocks/images/icons/phone.svg @@ -0,0 +1 @@ + diff --git a/packages/drupal/gutenberg_blocks/src/blocks/info-grid-item.tsx b/packages/drupal/gutenberg_blocks/src/blocks/info-grid-item.tsx new file mode 100644 index 000000000..44ae57968 --- /dev/null +++ b/packages/drupal/gutenberg_blocks/src/blocks/info-grid-item.tsx @@ -0,0 +1,55 @@ +import { InnerBlocks, InspectorControls } from "wordpress__block-editor"; +import { registerBlockType } from "wordpress__blocks"; +import { PanelBody, SelectControl } from 'wordpress__components'; +import { iconImagePreview, iconListOptions } from "../utils/icon-list"; + +// @ts-ignore +const { t: __ } = Drupal; + +registerBlockType("custom/info-grid-item", { + title: __("Info Grid Item"), + icon: "align-wide", + category: "layout", + attributes: { + icon: { + type: "string", + default: "EMAIL" + } + }, + edit: (props) => { + const { setAttributes } = props; + const iconPreview = iconImagePreview(props.attributes.icon as string); + const iconPreviewStyle = { maxWidth: '50px' }; + + return ( + <> + + + { + setAttributes({ icon }); + }} + /> + + + +
+
{__("Info Grid Item")}
+
+ {props.attributes.icon +
+ +
+ + ); + }, + save: () => +}); diff --git a/packages/drupal/gutenberg_blocks/src/blocks/info-grid.tsx b/packages/drupal/gutenberg_blocks/src/blocks/info-grid.tsx new file mode 100644 index 000000000..18620fa33 --- /dev/null +++ b/packages/drupal/gutenberg_blocks/src/blocks/info-grid.tsx @@ -0,0 +1,38 @@ +import { InnerBlocks } from "wordpress__block-editor"; +import { registerBlockType } from "wordpress__blocks"; +import { useSelect } from 'wordpress__data'; + + +// @ts-ignore +const { t: __ } = Drupal; + +const MAX_BLOCKS: number = 3; + +registerBlockType("custom/info-grid", { + title: __("Info Grid"), + icon: "editor-insertmore", + category: "layout", + attributes: {}, + edit: (props) => { + const { blockCount } = useSelect((select) => ({ + blockCount: select('core/block-editor').getBlockCount(props.clientId), + })); return ( +
+
{__("Info Grid")}
+ { + if (blockCount >= MAX_BLOCKS) { + return null; + } else { + return ; + } + }} + allowedBlocks={["custom/info-grid-item"]} + template={[]} + /> +
+ ); + }, + save: () => +}); diff --git a/packages/drupal/gutenberg_blocks/src/index.ts b/packages/drupal/gutenberg_blocks/src/index.ts index 2763bdad8..09d0dc458 100644 --- a/packages/drupal/gutenberg_blocks/src/index.ts +++ b/packages/drupal/gutenberg_blocks/src/index.ts @@ -9,3 +9,5 @@ import './blocks/image-with-text'; import './filters/list'; import './blocks/cta'; import './blocks/quote'; +import './blocks/info-grid' +import './blocks/info-grid-item' diff --git a/packages/drupal/gutenberg_blocks/src/utils/icon-list.ts b/packages/drupal/gutenberg_blocks/src/utils/icon-list.ts new file mode 100644 index 000000000..8953de6b0 --- /dev/null +++ b/packages/drupal/gutenberg_blocks/src/utils/icon-list.ts @@ -0,0 +1,25 @@ +// @ts-ignore +const { t: __ } = Drupal; + +const ICON_PATH = "/modules/custom/gutenberg_blocks/images/icons/"; + +// Icon list options +export const iconListOptions: { label: any, value: string }[] = [ + { label: __("Email"), value: "EMAIL" }, + { label: __("Telephone"), value: "PHONE" }, + { label: __("Life Ring"), value: "LIFE-RING" } +]; + +// Icon image preview +export const iconImagePreview = (icon: string) => { + switch (icon) { + case "EMAIL": + return ICON_PATH + "email.svg"; + case "PHONE": + return ICON_PATH + "phone.svg"; + case "LIFE-RING": + return ICON_PATH + "life-ring.svg"; + default: + return ""; + } +} From 8e66171689ad5c32e6fd97b212a3ad769b9f8546 Mon Sep 17 00:00:00 2001 From: Eli Stone Date: Tue, 7 May 2024 10:30:29 +0100 Subject: [PATCH 02/66] feat(slb-306): adding info-grid to frontend --- .idea/prettier.xml | 1 + .../src/blocks/info-grid-item.tsx | 36 ++++----- .../gutenberg_blocks/src/blocks/info-grid.tsx | 25 +++--- .../a397ca48-8fad-411e-8901-0eba2feb989c.yml | 81 ++++++++++--------- packages/schema/src/fragments/Page.gql | 1 + .../fragments/PageContent/BlockInfoGrid.gql | 12 +++ packages/schema/src/schema.graphql | 10 +++ .../src/components/Organisms/PageDisplay.tsx | 15 ++++ 8 files changed, 112 insertions(+), 69 deletions(-) create mode 100644 packages/schema/src/fragments/PageContent/BlockInfoGrid.gql diff --git a/.idea/prettier.xml b/.idea/prettier.xml index 6e16fd106..2089b4cf8 100644 --- a/.idea/prettier.xml +++ b/.idea/prettier.xml @@ -1,6 +1,7 @@ +