@shopware/cms-base-layer 4.0.0 → 4.1.0

package/app/components/public/cms/block/CmsBlockImageGallery.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageGallery } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockImageGallery;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const cmsContent = getSlotContent("imageGallery");
+const cmsContent = computed(() => getSlotContent("imageGallery"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockImageGalleryBig.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageGalleryBig } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockImageGalleryBig;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const cmsContent = getSlotContent("imageGallery");
+const cmsContent = computed(() => getSlotContent("imageGallery"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockImageHighlightRow.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageHighlightRow } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,11 +8,11 @@ const props = defineProps<{
   content: CmsBlockImageHighlightRow;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerContent = getSlotContent("center");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
+const centerContent = computed(() => getSlotContent("center"));
 </script>
 <template>
   <div

package/app/components/public/cms/block/CmsBlockImageSimpleGrid.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageSimpleGrid } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,11 +8,11 @@ const props = defineProps<{
   content: CmsBlockImageSimpleGrid;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftTopContent = getSlotContent("left-top");
-const leftBottomContent = getSlotContent("left-bottom");
-const rightContent = getSlotContent("right");
+const leftTopContent = computed(() => getSlotContent("left-top"));
+const leftBottomContent = computed(() => getSlotContent("left-bottom"));
+const rightContent = computed(() => getSlotContent("right"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockImageSlider.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageSlider } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,8 +8,8 @@ const props = defineProps<{
   content: CmsBlockImageSlider;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const cmsContent = getSlotContent("imageSlider");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const cmsContent = computed(() => getSlotContent("imageSlider"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockImageText.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageText } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,10 +8,10 @@ const props = defineProps<{
   content: CmsBlockImageText;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
 </script>
 <template>
   <div

package/app/components/public/cms/block/CmsBlockImageTextBubble.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageTextBubble } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,14 +8,14 @@ const props = defineProps<{
   content: CmsBlockImageTextBubble;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftText = getSlotContent("left-text");
-const leftImage = getSlotContent("left-image");
-const centerText = getSlotContent("center-text");
-const centerImage = getSlotContent("center-image");
-const rightText = getSlotContent("right-text");
-const rightImage = getSlotContent("right-image");
+const leftText = computed(() => getSlotContent("left-text"));
+const leftImage = computed(() => getSlotContent("left-image"));
+const centerText = computed(() => getSlotContent("center-text"));
+const centerImage = computed(() => getSlotContent("center-image"));
+const rightText = computed(() => getSlotContent("right-text"));
+const rightImage = computed(() => getSlotContent("right-image"));
 </script>
 <template>
   <div

package/app/components/public/cms/block/CmsBlockImageTextCover.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageTextCover } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,10 +8,10 @@ const props = defineProps<{
   content: CmsBlockImageTextCover;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
 </script>
 <template>
   <article

package/app/components/public/cms/block/CmsBlockImageTextGallery.vue

@@ -4,6 +4,7 @@ import type {
   CmsElementImage,
   CmsElementText,
 } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -11,21 +12,28 @@ const props = defineProps<{
   content: CmsBlockImageTextGallery;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftTextContent = getSlotContent("left-text") as CmsElementText;
-const rightTextContent = getSlotContent("right-text") as CmsElementText;
-const centerTextContent = getSlotContent("center-text") as CmsElementText;
+const leftTextContent = computed(
+  () => getSlotContent("left-text") as CmsElementText | undefined,
+);
+const rightTextContent = computed(
+  () => getSlotContent("right-text") as CmsElementText | undefined,
+);
+const centerTextContent = computed(
+  () => getSlotContent("center-text") as CmsElementText | undefined,
+);
 
-const leftImageContent = getSlotContent(
-  "left-image",
-) as unknown as CmsElementImage;
-const rightImageContent = getSlotContent(
-  "right-image",
-) as unknown as CmsElementImage;
-const centerImageContent = getSlotContent(
-  "center-image",
-) as unknown as CmsElementImage;
+const leftImageContent = computed(
+  () => getSlotContent("left-image") as unknown as CmsElementImage | undefined,
+);
+const rightImageContent = computed(
+  () => getSlotContent("right-image") as unknown as CmsElementImage | undefined,
+);
+const centerImageContent = computed(
+  () =>
+    getSlotContent("center-image") as unknown as CmsElementImage | undefined,
+);
 
 // TODO: useRouter
 function onImageClick(
@@ -52,29 +60,44 @@ function onImageClick(
   >
     <div class="w-full sm:flex-1">
       <CmsElementImage
+        v-if="leftImageContent"
         :content="leftImageContent"
         :style="{ cursor: leftImageContent.data?.url && 'pointer' }"
         @click="onImageClick(leftImageContent)"
       />
-      <CmsElementText :content="leftTextContent" class="self-stretch" />
+      <CmsElementText
+        v-if="leftTextContent"
+        :content="leftTextContent"
+        class="self-stretch"
+      />
     </div>
     <div class="w-full sm:flex-1">
       <CmsElementImage
+        v-if="centerImageContent"
         :content="centerImageContent"
         :style="{
           cursor: centerImageContent.data?.url && 'pointer',
         }"
         @click="onImageClick(centerImageContent)"
       />
-      <CmsElementText :content="centerTextContent" class="self-stretch" />
+      <CmsElementText
+        v-if="centerTextContent"
+        :content="centerTextContent"
+        class="self-stretch"
+      />
     </div>
     <div class="w-full sm:flex-1">
       <CmsElementImage
+        v-if="rightImageContent"
         :content="rightImageContent"
         :style="{ cursor: rightImageContent.data?.url && 'pointer' }"
         @click="onImageClick(rightImageContent)"
       />
-      <CmsElementText :content="rightTextContent" class="self-stretch" />
+      <CmsElementText
+        v-if="rightTextContent"
+        :content="rightTextContent"
+        class="self-stretch"
+      />
     </div>
   </article>
 </template>

package/app/components/public/cms/block/CmsBlockImageTextRow.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageTextRow } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,14 +8,14 @@ const props = defineProps<{
   content: CmsBlockImageTextRow;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftImageContent = getSlotContent("left-image");
-const leftTextContent = getSlotContent("left-text");
-const centerImageContent = getSlotContent("center-image");
-const centerTextContent = getSlotContent("center-text");
-const rightImageContent = getSlotContent("right-image");
-const rightTextContent = getSlotContent("right-text");
+const leftImageContent = computed(() => getSlotContent("left-image"));
+const leftTextContent = computed(() => getSlotContent("left-text"));
+const centerImageContent = computed(() => getSlotContent("center-image"));
+const centerTextContent = computed(() => getSlotContent("center-text"));
+const rightImageContent = computed(() => getSlotContent("right-image"));
+const rightTextContent = computed(() => getSlotContent("right-text"));
 </script>
 <template>
   <div

package/app/components/public/cms/block/CmsBlockImageThreeColumn.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageThreeColumn } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,11 +8,11 @@ const props = defineProps<{
   content: CmsBlockImageThreeColumn;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerContent = getSlotContent("center");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
+const centerContent = computed(() => getSlotContent("center"));
 </script>
 <template>
   <div class="flex flex-col sm:flex-row justify-start items-start gap-6 w-full">

package/app/components/public/cms/block/CmsBlockImageThreeCover.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageThreeCover } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,11 +8,11 @@ const props = defineProps<{
   content: CmsBlockImageThreeCover;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerContent = getSlotContent("center");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
+const centerContent = computed(() => getSlotContent("center"));
 </script>
 <template>
   <div

package/app/components/public/cms/block/CmsBlockImageTwoColumn.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageTwoColumn } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,10 +8,10 @@ const props = defineProps<{
   content: CmsBlockImageTwoColumn;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
 </script>
 <template>
   <div

package/app/components/public/cms/block/CmsBlockProductDescriptionReviews.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { CmsBlockProductDescriptionReviews } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
   content: CmsBlockProductDescriptionReviews;
 }>();
-const { getSlotContent } = useCmsBlock(props.content);
-const slotContent = getSlotContent("content");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const slotContent = computed(() => getSlotContent("content"));
 </script>
 <template>
   <div class="cms-block-product-description-reviews">

package/app/components/public/cms/block/CmsBlockProductHeading.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockProductHeading } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,10 +8,10 @@ const props = defineProps<{
   content: CmsBlockProductHeading;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockProductListing.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockProductListing } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,8 +8,8 @@ const props = defineProps<{
   content: CmsBlockProductListing;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const slotContent = getSlotContent("content");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const slotContent = computed(() => getSlotContent("content"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockProductThreeColumn.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockProductThreeColumn } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,11 +8,11 @@ const props = defineProps<{
   content: CmsBlockProductThreeColumn;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerContent = getSlotContent("center");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
+const centerContent = computed(() => getSlotContent("center"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockSidebarFilter.vue

@@ -3,6 +3,7 @@ import type {
   CmsBlockSidebarFilter,
   CmsElementSidebarFilter,
 } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -10,11 +11,12 @@ const props = defineProps<{
   content: CmsBlockSidebarFilter;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const slotContent = getSlotContent(
-  "content",
-) as unknown as CmsElementSidebarFilter;
+const { getSlotContent } = useCmsBlock(() => props.content);
+const slotContent = computed(
+  () =>
+    getSlotContent("content") as unknown as CmsElementSidebarFilter | undefined,
+);
 </script>
 <template>
-  <CmsElementSidebarFilter :content="slotContent" />
+  <CmsElementSidebarFilter v-if="slotContent" :content="slotContent" />
 </template>

package/app/components/public/cms/block/CmsBlockText.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockText } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockText;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const slotContent = getSlotContent("content");
+const slotContent = computed(() => getSlotContent("content"));
 </script>
 <template>
   <CmsGenericElement :content="slotContent" />

package/app/components/public/cms/block/CmsBlockTextHero.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockTextHero } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockTextHero;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const slotContent = getSlotContent("content");
+const slotContent = computed(() => getSlotContent("content"));
 </script>
 <template>
   <CmsGenericElement :content="slotContent" />

package/app/components/public/cms/block/CmsBlockTextOnImage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockTextOnImage } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockTextOnImage;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const slotContent = getSlotContent("content");
+const slotContent = computed(() => getSlotContent("content"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockTextThreeColumn.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockTextThreeColumn } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,11 +8,11 @@ const props = defineProps<{
   content: CmsBlockTextThreeColumn;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerContent = getSlotContent("center");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
+const centerContent = computed(() => getSlotContent("center"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockTextTwoColumn.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockTextTwoColumn } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,10 +8,10 @@ const props = defineProps<{
   content: CmsBlockTextTwoColumn;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockVideo.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { CmsBlockVideo } from "@shopware/composables";
+import { computed } from "vue";
+
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockVideo;
+}>();
+
+const { getSlotContent } = useCmsBlock(() => props.content);
+
+const slotContent = computed(() => getSlotContent("video"));
+</script>
+<template>
+  <div class="cms-block-video">
+    <CmsGenericElement :content="slotContent" />
+  </div>
+</template>

package/app/components/public/cms/block/CmsBlockVimeoVideo.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockVimeoVideo } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockVimeoVideo;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const slotContent = getSlotContent("video");
+const slotContent = computed(() => getSlotContent("video"));
 </script>
 <template>
   <div class="cms-block-vimeo-video relative">

package/app/components/public/cms/block/CmsBlockYoutubeVideo.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockYoutubeVideo } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockYoutubeVideo;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const slotContent = getSlotContent("video");
+const slotContent = computed(() => getSlotContent("video"));
 </script>
 <template>
   <div class="cms-block-youtube-video relative">

package/app/components/public/cms/element/CmsElementCategoryName.md

@@ -0,0 +1,8 @@
+Display the category name as the page headline, in the `category-heading` block. Since Shopware 6.7.12 the default listing layouts use it in place of a text element.
+
+The element is a text element with its own type:
+
+- **Mapped content** (by default `category.name`) is wrapped in `<h1 class="cms-element-category-name-headline">`, as in the Storefront. When the value does not resolve, for example on a page without a category, no empty headline is rendered.
+- **Static content** is authored HTML and is rendered as it is.
+
+Rendering goes through `CmsElementText`, so the vertical alignment, link handling and the [`cms-element-text` typography](#cmselementtext) apply. The root carries the `cms-element-category-name` class as well.