feat: add CmsBlockHtml and CmsElementHtml

.changeset/fluffy-ghosts-strive.md

@@ -0,0 +1,6 @@
+---
+"@shopware/cms-base-layer": minor
+---
+
+Added CmsBlockHtml to render html blocks.
+Added CmsElementHtml to render html element.

packages/cms-base-layer/components/public/cms/element/CmsBlockHtml.md

@@ -0,0 +1 @@
+Render a HTML section

packages/cms-base-layer/components/public/cms/element/CmsBlockHtml.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { CmsBlockHtml } from "@shopware/composables";
+
+defineProps<{
+  content: CmsBlockHtml;
+}>();
+</script>
+
+<template>
+  <div>
+    <CmsGenericElement
+      v-for="slot in content.slots"
+      :key="slot.versionId"
+      :content="slot"
+    />
+  </div>
+</template>

packages/cms-base-layer/components/public/cms/element/CmsElementHtml.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { CmsElementHtml } from "@shopware/composables";
+
+import { getCmsLayoutConfiguration } from "@shopware/helpers";
+import { h } from "vue";
+
+const props = defineProps<{
+  content: CmsElementHtml;
+}>();
+
+const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
+
+const HtmlComponent = () => {
+  return h("div", {
+    class: cssClasses,
+    style: layoutStyles,
+    innerHTML: props.content.data.content || "",
+  });
+};
+</script>
+
+<template>
+  <HtmlComponent />
+</template>

packages/composables/src/types/cmsBlockTypes.ts

@@ -78,3 +78,4 @@ export type CmsBlockProductDescriptionReviews = BlockType<"content">;
 export type CmsBlockCrossSelling = BlockType<"content">;
 
 export type CmsBlockForm = BlockType<"content">;
+export type CmsBlockHtml = BlockType<"content">;

packages/composables/src/types/cmsElementTypes.ts

@@ -45,6 +45,15 @@ export type CmsElementText = Schemas["CmsSlot"] & {
   };
 };
 
+// HTML
+export type CmsElementHtml = Schemas["CmsSlot"] & {
+  type: "html";
+  data: {
+    content: string;
+    apiAlias: "cms_html";
+  };
+};
+
 // Image
 
 type ImageElementConfig = {