@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"]
}