Image And Form

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-image-and-form {
    padding-top: clamp(40px, 8vw, 140px);
	padding-bottom: clamp(40px, 8vw, 140px);

    &:not(.has-background) {
        background-color: var(--grey-primary);
        --current-background-color: var(--grey-primary);
        --heading-color: var(--primary);
    }

    &.has-primary-background-color {
        --current-background-color: var(--primary);
        --heading-color: var(--white);
    }

    &.has-tertiary-background-color {
        --current-background-color: var(--tertiary);
        --heading-color: var(--white);
    }

    &.has-accent-background-color {
        --current-background-color: var(--accentBlue);
        --heading-color: var(--white);
    }
    
    

    &__heading {
        text-align: center;
        max-width: rem-calc(700);
        margin: 0 auto;
        padding-bottom: 3rem;
        color: var(--heading-color);

        @include bp($xl) {
            padding-bottom: 6rem;
        }
    }
	
    &__background-image {
        min-height: 40vh;
        position: relative;

        @include bp($lg) {
            min-height: 70vh;
            position: sticky;
            top: var(--site-header-height);
        }

        img {
            border-radius: rem-calc(40);
        }
    }

    .gated-content-download {
        margin-top: rem-calc(40);
        padding-bottom: rem-calc(40);
    }

    &--blend-over-next-block {
        background: linear-gradient(180deg, var(--current-background-color) 80%, rgba(255, 255, 255, 0) 100%);

        @include bp($xl) {
            padding-bottom: 0 !important;
            margin-bottom: -8rem;
            overflow-y: visible;
            z-index: 2;
    
            .block-image-and-form {
                &__background-image {
                    z-index: 2;
                }
            }
        }
    }

    &--negative-top-margin {
        margin-top: -8rem;
        padding-top: 16rem;
        background-color: transparent;
        position: relative;

        @include bp($md, true) {
            margin-top: -4rem;
            padding-top: 8rem;
        }

        &:before {
            z-index: -1;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--grey-primary);
        }
    }

    &__content {
        order: 2;

        @include bp($lg) {
            order: 1;
        }
    }

    &__form {
        order: 1;

        @include bp($lg) {
            order: 2;
        }
    }
}

class ImageAndForm {
	constructor(block) {
		this.block = block;
		this.init();
	}

	/**
	 * GatedContent function to run class logic
	 * Can access `this.block`
	 */
	init() {
		const GForm = this.block.querySelector('.gform_wrapper form');
		// console.log(GForm);
		if(GForm) {
			new GFormValidator(GForm);
		}
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-image-and-form').forEach((block) => {
		new ImageAndForm(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/image-and-form",
    "title": "Image and Form",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-image-and-form.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Example",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/image-and-form/block-image-and-form.css", "nice-select"],
    "viewScript": ["nice-select","image-and-form"],
    "allowedBlocks": ["core/paragraph"]
}