Split Content

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

.block-split-content {
    color: var(--text-color);
    &--swap {
        .row {
            flex-direction: row-reverse;
        }
        .acf-innerblocks-container {
            .block-image {
                @include bp($md){
                    margin-left: calc(calc(1/12) * 100%);
                }
            }
        }
    }

    .sub-heading{
        @include fluid-type(20, 26);
        line-height: 1.5;
    }

    .row {
        align-items: center;
    }

    .split-content {
        .heading {
            line-height: 1.25;
        }

        display: flex;
        flex-direction: column;
        gap: 26px;

        .content {
            h1,h2,h3{
                margin-bottom: 1rem;
            }
            p {
                @include fluid-type(16, 18);

                &:last-of-type {
                    margin: 0;
                }
            }
        }

        .btn {
            @include fluid-type(16, 18);
            margin-top: 1rem;
            text-decoration-color: var(--contrast);

            @include bp($md) {
                margin-top: 2rem;
            }
        }
    }

    .acf-innerblocks-container {
        .block-image {
            @include bp($md){
                width: calc(calc(11/12) * 100%);
            }
        }
    }

}

class SplitContent {

	constructor() {
		this.blocks = document.querySelectorAll('.block-split-content');
		this.init();
	}

	init() {
		this.blocks.forEach((block) => {
			this.initSingle(block);
		});
	}

	initSingle(block){

	}
}

new SplitContent();

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/split-content",
    "title": "Split Content",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-split-content.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 - Split Content",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/split-content/block-split-content.css"],
    "viewScript": ["split-content"]
}