From 1255bfefd7a5e0c2631f25407d2e1271c08a65be Mon Sep 17 00:00:00 2001
From: Luka Vuk <luka.vuk0909@gmail.com>
Date: Wed, 29 Jan 2025 17:33:56 +0100
Subject: [PATCH 1/4] add core-cover

---
 app/components/wp-block/core-cover.vue | 103 +++++++++++++++++++++++++
 app/components/wp-content.vue          |   1 +
 2 files changed, 104 insertions(+)
 create mode 100644 app/components/wp-block/core-cover.vue

diff --git a/app/components/wp-block/core-cover.vue b/app/components/wp-block/core-cover.vue
new file mode 100644
index 0000000..e94023f
--- /dev/null
+++ b/app/components/wp-block/core-cover.vue
@@ -0,0 +1,103 @@
+<template>
+    <div
+        :class="classes"
+        :style="styles"
+    >
+        <wp-content
+            :blocks="innerBlocks"
+            class="content"
+        />
+        <div
+            class="overlay"
+            :style="overlayStyles"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    attrs: {
+        type: Object,
+        default: () => ({})
+    },
+    innerBlocks: {
+        type: Array,
+        default: () => []
+    }
+})
+
+const classes = computed(() => [
+    'core-cover',
+    { 'is-fixed': props.attrs?.isFixed },
+    { 'is-repeated': props.attrs?.isRepeated },
+    'margin-section'
+])
+
+const styles = computed(() => {
+    let minHeight = `${props.attrs?.minHeight}${props.attrs?.minHeightUnit || 'px'}`
+    if (!props.attrs?.minHeight) {
+        minHeight = 'none'
+    }
+
+    return {
+        'background-image': `url(${props.attrs?.url})`,
+        'min-height': minHeight
+    }
+})
+
+const overlayStyles = computed(() => ({
+    background: overlayBackground.value,
+    opacity: opacityValue.value
+}))
+
+const overlayBackground = computed(() => (
+    props.attrs?.customGradient
+    || props.attrs?.customOverlayColor
+    || props.attrs?.overlayColor
+    || props.attrs?.gradient
+))
+
+const opacityValue = computed(() => (
+    props.attrs?.opacity / 100
+    || props.attrs?.dimRatio / 100
+))
+</script>
+
+<style scoped>
+.core-cover {
+    position: relative;
+    color: var(--color-white);
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+
+    .content {
+        position: relative;
+        z-index: 10;
+        margin: var(--unit-gutter) auto;
+    }
+    .overlay {
+        z-index: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        width: 100%;
+    }
+    &.is-fixed {
+        background-attachment: fixed;
+    }
+    &.is-repeated {
+        background-repeat: repeat;
+        background-size: auto;
+    }
+}
+</style>
diff --git a/app/components/wp-content.vue b/app/components/wp-content.vue
index f91bfe5..6a146f2 100644
--- a/app/components/wp-content.vue
+++ b/app/components/wp-content.vue
@@ -19,6 +19,7 @@ const allBlocks = {
     'core-image': resolveComponent('wp-block-core-image'),
     'core-columns': resolveComponent('wp-block-core-columns'),
     'core-column': resolveComponent('wp-block-core-column'),
+    'core-cover': resolveComponent('wp-block-core-cover'),
     'core-list': resolveComponent('wp-block-core-list'),
     'core-spacer': resolveComponent('wp-block-core-spacer'),
     'core-gallery': resolveComponent('wp-block-core-gallery'),

From 6e183b364d2acfd192e75374c09713ad0dcc40c3 Mon Sep 17 00:00:00 2001
From: Luka Vuk <luka.vuk0909@gmail.com>
Date: Wed, 29 Jan 2025 17:36:03 +0100
Subject: [PATCH 2/4] remove .overlay styles from main

---
 app/assets/css/main.css | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 2c05c00..6fb672b 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -47,14 +47,6 @@ button {
         display: block;
     }
 }
-.overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.3);
-}
 .svg {
     path {
         transition: fill 0.4s;

From 5fe1bb64307aa8707512baf600148d5d40d857d4 Mon Sep 17 00:00:00 2001
From: Luka Vuk <luka.vuk0909@gmail.com>
Date: Wed, 29 Jan 2025 17:46:25 +0100
Subject: [PATCH 3/4] align attribute is "textAlign" not "align" for headings

---
 app/components/wp-block/core-heading.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/wp-block/core-heading.vue b/app/components/wp-block/core-heading.vue
index 9515af6..f5b4f30 100644
--- a/app/components/wp-block/core-heading.vue
+++ b/app/components/wp-block/core-heading.vue
@@ -22,7 +22,7 @@ const props = defineProps({
 const classes = computed(() => [
     'core-heading',
     'margin-text',
-    `align-${props.attrs?.align || 'default'}`,
+    `align-${props.attrs?.textAlign || 'default'}`,
     `is-${props.attrs?.tagName}`
 ])
 const styles = computed(() => ({

From e3039bf33a993668987a17d079e271c72c0e9251 Mon Sep 17 00:00:00 2001
From: Luka Vuk <luka.vuk0909@gmail.com>
Date: Thu, 30 Jan 2025 19:26:01 +0100
Subject: [PATCH 4/4] Update package.json

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index fbf32bf..943b5d7 100644
--- a/package.json
+++ b/package.json
@@ -47,5 +47,8 @@
         "storybook": "^8.3.0",
         "typescript": "^5.6.3",
         "vue": "^3.4.36"
+    },
+    "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "4.9.5"
     }
 }