NEXT-33669 - implement cms blocks for SDK

src/messages.types.ts

@@ -1,3 +1,4 @@
+import type { cmsRegisterBlock } from './ui/cms/index';
 import type { notificationDispatch } from './notification/index';
 import type { windowRedirect, windowReload, windowRouterPush } from './window/index';
 import type { contextLanguage, contextEnvironment, contextLocale, contextCurrency, contextShopwareVersion, contextAppInformation, contextModuleInformation, contextUserInformation } from './context/index';
@@ -50,6 +51,7 @@ export interface ShopwareMessageTypes {
   uiTabsAddTabItem: uiTabsAddTabItem,
   uiModulePaymentOverviewCard: uiModulePaymentOverviewCard,
   cmsRegisterElement: cmsRegisterElement,
+  cmsRegisterBlock: cmsRegisterBlock,
   locationUpdateHeight: locationUpdateHeight,
   locationUpdateUrl: locationUpdateUrl,
   menuItemAdd: menuItemAdd,

src/ui/cms/index.ts

@@ -1,6 +1,7 @@
 import { createSender } from '../../channel';
 
 export const registerCmsElement = createSender('cmsRegisterElement');
+export const registerCmsBlock = createSender('cmsRegisterBlock');
 
 export type cmsRegisterElement = {
     responseType: void,
@@ -28,3 +29,48 @@ export type cmsRegisterElement = {
         [key: string]: unknown,
     },
 };
+
+export type cmsRegisterBlock = {
+    responseType: void,
+
+    /**
+     * A unique technical name for your block. We recommend to use a shorthand prefix for your company, e.g. "Swag" for shopware AG.
+     */
+    name: string,
+
+    /**
+     * The category your block is associated with, e.g. "commerce", "form", "image", "sidebar", "text-image", "text", "video", etc.
+     */
+    category?: ('commerce'|'form'|'image'|'sidebar'|'text-image'|'text'|'video') | string & Record<never, never>,
+
+    /**
+     * Your block's label which will be shown in the CMS module in the Administration.
+     */
+    label: string,
+
+    /**
+     * Define the slots of the block. Each slot is a single div. The element property is the name of the element that can be placed in the slot.
+     */
+    slots: Array<{
+        element: string,
+    }>,
+
+    /**
+     * Define the layout of the block. The grid property is a shorthand for the CSS grid property. The grid property is optional.
+     */
+    slotLayout?: {
+        /**
+         * The grid layout for the block. Each slot is a single div. Can be defined with the CSS shorthand property "grid":
+         * https://developer.mozilla.org/en-US/docs/Web/CSS/grid
+         * 
+         * Examples:
+         * 1 column layout example: "auto / auto"
+         * 2 column layout example: "auto / auto auto"
+         * 2 row layout example: "auto auto / auto-flow auto"
+         */
+        grid?: string,
+    },
+
+    // Aspect ratio should be x:y - minimum width should be XYZpx
+    previewImage?: string,
+}