fix(cms): image text blocks distinction #1065 (#1070)

vuestorefront · Sep 11, 2020 · e296bea · e296bea · vercel · Sep 11, 2020
1 parent ab7a7bc
commit e296bea
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 43 deletions.
diff --git a/packages/default-theme/cms/blocks/CmsBlockImageText.vue b/packages/default-theme/cms/blocks/CmsBlockImageText.vue
@@ -0,0 +1,84 @@
+<template>
+  <article class="cms-block-image-text">
+    <CmsGenericElement
+      :content="getLeftContent"
+      class="cms-block-image-text__image"
+    />
+    <CmsGenericElement
+      :content="getRightContent"
+      class="cms-block-image-text__text"
+    />
+  </article>
+</template>
+
+<script>
+import CmsGenericElement from "sw-cms/CmsGenericElement"
+
+export default {
+  name: "CmsBlockImageText",
+
+  components: {
+    CmsGenericElement,
+  },
+
+  props: {
+    content: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    getSlots() {
+      return this.content.slots || []
+    },
+
+    getLeftContent() {
+      return this.getSlots.find(({ slot }) => slot === "left")
+    },
+    getRightContent() {
+      return this.getSlots.find(({ slot }) => slot === "right")
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/variables";
+
+.cms-block-image-text {
+  display: flex;
+  flex-direction: column;
+  margin-right: 0;
+  margin-left: 0;
+
+  &__image,
+  &__text {
+    margin: var(--spacer-sm);
+    flex: 1;
+    & img {
+      height: 340px;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  @include for-desktop {
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-around;
+
+    .cms-block-image-text__image {
+      margin-bottom: 0;
+      margin-right: var(--spacer-sm);
+      margin-top: 0;
+    }
+
+    .cms-block-image-text__text {
+      margin-bottom: 0;
+      margin-left: var(--spacer-sm);
+      margin-top: 0;
+    }
+  }
+}
+</style>
diff --git a/packages/default-theme/cms/blocks/CmsBlockTextOnImage.vue b/packages/default-theme/cms/blocks/CmsBlockTextOnImage.vue
@@ -1,12 +1,9 @@
 <template>
   <article class="cms-block-text-on-image">
     <CmsGenericElement
-      :content="getLeftContent"
-      class="cms-block-text-on-image__image"
-    />
-    <CmsGenericElement
-      :content="getRightContent"
-      class="cms-block-text-on-image__text"
+      v-if="getContent"
+      :content="getContent"
+      class="cms-block-text-on-image__content"
     />
   </article>
 </template>
@@ -33,11 +30,8 @@ export default {
       return this.content.slots || []
     },
 
-    getLeftContent() {
-      return this.getSlots.find(({ slot }) => slot === "left")
-    },
-    getRightContent() {
-      return this.getSlots.find(({ slot }) => slot === "right")
+    getContent() {
+      return this.getSlots.length && this.getSlots[0]
     },
   },
 }
@@ -47,38 +41,11 @@ export default {
 @import "@/assets/scss/variables";
 
 .cms-block-text-on-image {
-  display: flex;
-  flex-direction: column;
-  margin-right: 0;
-  margin-left: 0;
-
-  &__image,
-  &__text {
-    margin: var(--spacer-sm);
-    flex: 1;
-    & img {
-      height: 340px;
-      object-fit: cover;
-      width: 100%;
-    }
-  }
-
-  @include for-desktop {
-    align-items: center;
-    flex-direction: row;
-    justify-content: space-around;
-
-    .cms-block-text-on-image__image {
-      margin-bottom: 0;
-      margin-right: var(--spacer-sm);
-      margin-top: 0;
-    }
+  background-position: center;
+  background-size: cover;
 
-    .cms-block-text-on-image__text {
-      margin-bottom: 0;
-      margin-left: var(--spacer-sm);
-      margin-top: 0;
-    }
+  &__content {
+    padding: var(--spacer-2xl) var(--spacer-xl);
   }
 }
 </style>
diff --git a/packages/default-theme/cms/cmsMap.json b/packages/default-theme/cms/cmsMap.json
@@ -7,7 +7,7 @@
     "text-on-image": "CmsBlockTextOnImage",
     "sidebar-filter": "CmsBlockDefault",
     "product-listing": "CmsBlockDefault",
-    "image-text": "CmsBlockTextOnImage",
+    "image-text": "CmsBlockImageText",
     "image": "CmsBlockDefault",
     "image-cover": "CmsBlockImageCover",
     "category-navigation": "CmsBlockCategoryNavigation",