Content Image

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

.block-content-image {
	&__buttons {
		margin-top: rem-calc(32);
	}

	&__pre-heading {
		text-transform: uppercase;
		letter-spacing: 2px;
		font-size: rem-calc(12);
		margin-bottom: rem-calc(10);
	}

	&__heading {
		margin-bottom: rem-calc(24);
	}

	&__copy {
		font-size: rem-calc(16);
		line-height: rem-calc(24);
	}

	&__image {
		margin-top: rem-calc(40);

		@include bp($lg) {
			margin-top: 0;
		}
	}
	&-inner {
		justify-content: space-between;

		&.reverse {
			flex-direction: row-reverse;
		}
	}
}

class ContentImage {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-example');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			console.log("🚀 ~ file: Example.js ~ line 20 ~ Example ~ init ~ this.block", block);
		});
	}
}

new ContentImage();

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