Image Content Cta

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

.block-image-content-cta {
	padding: rem-calc(80) 0;

	&__content-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		padding: $grid-gutter-width 0;

		@include bp($lg) {
			padding: 0 rem-calc(40);
		}

		@include bp($xxl) {
			padding: 0;
		}
	}

	&__image {
		width: 100%;
	}

	&__person {
		font-size: $body-default;
		line-height: 24px;

		&-name {
			font-weight: 600;
		}
	}

	&__button-wrapper {
		margin-top: 1rem;

		@include bp($sm) {
			margin-top: 0;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			height: 100%;
		}
	}

}

class ImageContentCta {
	block;

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

	init() {
		/* Swiper Example
		this.swiperElem = this.block.querySelector('.swiper');
		this.swiper = new Swiper(this.swiperElem, {
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
				type: 'custom',
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			},
		}); 
		*/
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-image-content-cta').forEach((block) => {
		new ImageContentCta(block);
	})
});

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