@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-split-content-content {
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
gap: 26px;
min-height: rem-calc(350);
@include bp($lg) {
padding: 3rem;
}
@include bp($xl) {
padding: 4rem;
}
.button-wrapper {
margin-top: auto;
}
.content {
h1,h2,h3 {
font-family: 'Montserrat';
font-size: clamp(24px, 3vw, 44px);
font-weight: 600;
}
p {
@include fluid-type(16, 18);
&:last-of-type {
margin: 0;
}
}
}
&.has-primary-background-color,
&.has-tertiary-background-color,
&.has-accent-background-color {
--text-color: var(--white);
.content {
h1,h2,h3 {
color: var(--white);
}
p {
color: var(--white);
}
}
.btn {
color: var(--white);
&:hover {
border-color: var(--secondary);
color: var(--primary);
background-color: var(--secondary);
}
}
}
}
class SplitContentContent {
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-split-content-content').forEach((block) => {
new SplitContentContent(block);
})
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/split-content-content",
"title": "Split Content Content",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-split-content-content.php"
},
"parent": [ "strategiq/split-content" ],
"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 - Split Content Content",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": "file:../../assets/css/split-content-content/block-split-content-content.css"
}