Text Highlight

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-text-highlight {
	--text-color: var(--black);

	@include padding-top(rem-calc(90));
	@include padding-bottom(rem-calc(90));

	.container {
		--bs-gutter-x: #{rem-calc(12)};

		position: relative;
	}

	.title-highlight {
		margin-bottom: 0;
		line-height: 1;
		text-wrap: wrap;

		.letter {
			opacity: 0.1;
		}

		.word {
			display: inline-flex !important;

			&:first-child {
				margin-left: 18%;
			};
		}
	}
}

class TextHighlight {
	/**
	 * Create and initialise objects of this class
	 * @param {object} block
	 */
	constructor(block) {
		this.block = block;

		this.titleHighlightLinks = this.block.querySelectorAll(".title-highlight");
		if (this.titleHighlightLinks.length > 0) {
			this.init();
		}
	}

	init() {
		SplitText.create(this.titleHighlightLinks, {
			type: "chars, words",
			autoSplit: true,
			wordsClass: "word",
			charsClass: "letter",
			onSplit: (instance) => {
				return gsap.fromTo(instance.chars, {
					opacity: 0.1,
				}, {
					opacity: 1,
					stagger: 0.1,
					scrollTrigger: {
						trigger: this.block,
						start: "top 50%",
						end: "top top",
						scrub: true,
						invalidateOnRefresh: true,
						refreshPriority: 0,
					},
				});
			},
		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-text-highlight').forEach( block => new TextHighlight(block) );
});

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