Add Effects to MediaBlocks

bside-ms · Sep 10, 2023 · 2794db5 · 2794db5
1 parent 884391f
commit 2794db5
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/src/blocks/MediaBlock.ts b/src/blocks/MediaBlock.ts
@@ -41,6 +41,29 @@ export const MediaBlock: Block = {
                 layout: 'horizontal',
             },
         },
+        {
+            name: 'effects',
+            label: 'Effekte',
+            type: 'select',
+            options: [
+                {
+                    label: 'Blur',
+                    value: 'blur',
+                },
+                {
+                    label: 'Grayscale',
+                    value: 'grayscale',
+                },
+                {
+                    label: 'Desaturated',
+                    value: 'desaturated',
+                },
+                {
+                    label: 'Darker',
+                    value: 'darker',
+                },
+            ],
+        },
         {
             name: 'caption',
             label: 'Anmerkung',

diff --git a/src/blocks/MediaContent.ts b/src/blocks/MediaContent.ts
@@ -82,6 +82,29 @@ export const MediaContent: Block = {
                 description: 'ToDo: Beschreibung einfügen.',
             },
         },
+        {
+            name: 'effects',
+            label: 'Effekte',
+            type: 'select',
+            options: [
+                {
+                    label: 'Blur',
+                    value: 'blur',
+                },
+                {
+                    label: 'Grayscale',
+                    value: 'grayscale',
+                },
+                {
+                    label: 'Desaturated',
+                    value: 'desaturated',
+                },
+                {
+                    label: 'Darker',
+                    value: 'darker',
+                },
+            ],
+        },
 
         richText(
             {

diff --git a/src/payload-types.ts b/src/payload-types.ts
@@ -138,6 +138,7 @@ export interface Organisation {
     | {
         media: string | Media;
         size?: 'normal' | 'wide' | 'event';
+        effects?: 'blur' | 'grayscale' | 'desaturated' | 'darker';
         caption?: string;
         id?: string;
         blockName?: string;
@@ -148,6 +149,7 @@ export interface Organisation {
         backgroundColor: 'white' | 'black';
         headline?: string;
         media: string | Media;
+        effects?: 'blur' | 'grayscale' | 'desaturated' | 'darker';
         richText: {
           [k: string]: unknown;
         }[];
@@ -245,6 +247,7 @@ export interface Circle {
     | {
         media: string | Media;
         size?: 'normal' | 'wide' | 'event';
+        effects?: 'blur' | 'grayscale' | 'desaturated' | 'darker';
         caption?: string;
         id?: string;
         blockName?: string;
@@ -255,6 +258,7 @@ export interface Circle {
         backgroundColor: 'white' | 'black';
         headline?: string;
         media: string | Media;
+        effects?: 'blur' | 'grayscale' | 'desaturated' | 'darker';
         richText: {
           [k: string]: unknown;
         }[];
@@ -352,6 +356,7 @@ export interface Page {
     | {
         media: string | Media;
         size?: 'normal' | 'wide' | 'event';
+        effects?: 'blur' | 'grayscale' | 'desaturated' | 'darker';
         caption?: string;
         id?: string;
         blockName?: string;
@@ -362,6 +367,7 @@ export interface Page {
         backgroundColor: 'white' | 'black';
         headline?: string;
         media: string | Media;
+        effects?: 'blur' | 'grayscale' | 'desaturated' | 'darker';
         richText: {
           [k: string]: unknown;
         }[];