Hero

Fields
PHP
SCSS
JavaScript
Pages
JSON
Notes

Field

Field Type

Field Name

Instructions

Content

tab

Heading

clone

block_hero_heading

-- Format

select

format

-- Text

text

Heading Above Image

true_false

block_hero_heading_above_image

Content Align

select

block_hero_content_align

Content

textarea

block_hero_content

350 character count

Enable Call To Action

true_false

block_hero_enable_cta

Call To Action

repeater

block_hero_call_to_action

-- Link

link

-- Style

select

style

Enable Posts

true_false

block_hero_enable_posts

Select Posts

relationship

block_hero_posts

If on a post type archive or category this will be overwritten.

Styling

tab

Size

select

block_hero_size

Background

group

block_hero_background

-- Type

select

type

-- Video

oembed

video

-- Image

image

-- Overlay

true_false

overlay

-- Background Size

select

size

-- Background Position

select

position

-- Enable Lightbox

true_false

enable_lightbox

-- Video Thumbnail

image

video_thumbnail

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

.block-hero {

	@include bp($lg) {
		margin-left: $container-spacing-desktop;
	}

	.position-relative {
		&:has(.hero__svg) {
			overflow: hidden;
		}
	}

	.hero__svg {
		z-index: 1;
		transform: translateX(100%);
		opacity: 0;
		animation: heroSvgFadeIn 1s ease-out forwards;
		animation-delay: 0.3s;
	}

	.hero__svg-left {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		transform: translateX(100%);
		opacity: 0;
		animation: heroSvgFadeInReverse 2s cubic-bezier(0.25, 0.1, 0.05, 1) forwards;
		animation-delay: 0.3s;
	}

	.hero__svg-right {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		transform: translateX(-100%);
		opacity: 0;
		animation: heroSvgFadeIn 2s cubic-bezier(0.25, 0.1, 0.05, 1) forwards;
		animation-delay: 1s;
	}

	@keyframes heroSvgFadeIn {
		0% {
			opacity: 0;
			transform: translateX(100%);
		}
		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes heroSvgFadeInReverse {
		0% {
			opacity: 0;
			transform: translateX(-100%);
		}
		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	&--large {
		margin-left: 0;

		.hero {
			background: transparent;
		}

		&.has-secondary-background-color {
			.hero__content-wrapper {
				background-color: $secondary;
			}
		}

		&.has-primary-background-color {
			.hero__content-wrapper {
				background-color: $primary;
			}
		}

		&.has-prussian-blue-background-color {
			background-color: transparent !important;
			.hero__content-wrapper  {
				background: $prussian-blue;
			}
		}

		&.has-primary-gradient-gradient-background {
			background: transparent !important;
			.hero__content-wrapper  {
				background: var(--primary-gradient);
			}
		}

		&.has-secondary-gradient-gradient-background {
			background: transparent !important;
			.hero__content-wrapper  {
				background: var(--secondary-gradient);
			}
		}

		&.has-tertiary-gradient-gradient-background {
			background: transparent !important;
			.hero__content-wrapper {
				background: var(--tertiary-gradient);
			}
		}


	}

	&--heading-above-image {
		@include bp($lg) {
			border-left: 1px solid $border-grey;
			margin-right: $container-spacing-desktop;
		}

		.hero {
			min-height: 410px;

			@include bp($md) {
				min-height: 570px;
			}

			&--call-to-action {
				justify-content: flex-end;

				@include bp($lg) {
					padding-right: 0;
				}
			}
		}
	}

	&.has-secondary-background-color {
		background-color: transparent !important;

		.hero {
			background: $secondary;
		}
	}

	&.has-white-background-color {
		.hero {
			background: $white;
		}
		.hero__title, .hero__content p {
			color: $black;
		}
	}

	&.has-light-blue-background-color {
		.hero {
			background: $light-blue;
		}
		.hero__title, .hero__content p {
			color: $black;
		}
	}

	&.has-primary-background-color {
		.hero {
			background: $primary;
		}
	}

	&.has-prussian-blue-background-color {
		background-color: transparent !important;
		.hero {
			background: $prussian-blue;
		}
	}

	&.has-primary-gradient-gradient-background {
		background: transparent !important;
		.hero {
			background: var(--primary-gradient);
		}
	}

	&.has-secondary-gradient-gradient-background {
		background: transparent !important;
		.hero {
			background: var(--secondary-gradient);
		}
	}

	&.has-tertiary-gradient-gradient-background {
		background: transparent !important;
		.hero {
			background: var(--tertiary-gradient);
		}
	}
}

There are is no JavaScript file with this component.

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

This component is not currently used on any pages.

There are is no readme file with this component.