Big Teaser

Title

Subtitle

Button

The Big-Teaser Component is a customizable block that integrates:

Image Component: For displaying a background image.
Heading Component: For displaying the main title.
Subtitle Component: For displaying a supporting subtitle.
Button Component: For adding a call-to-action button.
Spacer Settings: For adjusting container spacing.

It supports both the WordPress block editor (Gutenberg) and frontend rendering.

JavaScript Implementation

Block Registration

registerBlockType('basetheme/big-teaser', {
    title: 'Big-teaser',
    icon: image,
    supports: {},
    attributes: {
        ...getDefaultImageAttributes,
        ...defaultHeadingAttributes,
        ...defaultSubtitleAttributes,
        ...defaultSpacerAttributes,
        ...defaultButtonAttributes,
    },
    edit: EditComponent,
    save: () => null,
});

Attributes

Attribute	Type	Default Value	Description
`mediaUrl`	`string`	Placeholder image URL	The URL of the image.
`spacer`	`string`	`''`	Spacer class for container spacing.
`heading`	`string`	`'Title'`	The main heading.
`subtitle`	`string`	`'Subtitle'`	The subtitle text.
`linkText`	`string`	`'Mehr erfahren'`	Button text.
`linkObject`	`object`	`{ url: '' }`	Button link properties.
`buttonColorName`	`string`	`'primary'`	Button color.

Edit Component

function EditComponent(props) {
    const { attributes, setAttributes } = props;

    return (
        <>
            <InspectorControls>
                <SpacerSettings
                    title="Container Settings"
                    attributes={{ spacer: attributes.spacer }}
                    setAttributes={(newAttributes) =>
                        setAttributes({ spacer: newAttributes.spacer })
                    }
                />
                <ImageSettings
                    attributes={attributes}
                    setAttributes={setAttributes}
                    imageSizeOptions={[
                        { value: 'pageBanner', label: 'Banner' },
                        { value: 'full', label: 'Full' },
                        { value: 'medium', label: 'Medium' },
                        { value: 'partnerLogo', label: 'Partner Logo' },
                    ]}
                />
            </InspectorControls>
            <div className={`big-teaser ${spacerClass(attributes.spacer)}`}>
                <div className="position-relative w-100 h-100">
                    <Image
                        mediaUrl={attributes.mediaUrl}
                        alt="Upload Image"
                        variant="cover"
                    />
                    <div className="position-absolute bottom-0 left-0 w-100 pb-6">
                        <div className="container">
                            <div className="row">
                                <div className="col-12">
                                    <Heading
                                        attributes={attributes}
                                        setAttributes={setAttributes}
                                        className="text-white fs-36 fw-bold"
                                    />
                                    <Subtitle
                                        attributes={attributes}
                                        setAttributes={setAttributes}
                                        className="text-white fs-24 fw-bold"
                                    />
                                    <Button
                                        attributes={attributes}
                                        setAttributes={setAttributes}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

PHP Implementation

The backend logic initializes necessary attributes and renders the block using utility functions for image, heading, subtitle, and button.

Utilities Initialization

use basetheme\Utilities\Image_Utils;
use basetheme\Utilities\Spacer_Utils;
use basetheme\Utilities\Button_Utils;
use basetheme\Utilities\Heading_Utils;
use basetheme\Utilities\Subtitle;

Image_Utils::init_image($attributes);
Button_Utils::init_button($attributes);
Heading_Utils::init_heading($attributes);
Subtitle::init_subtitle($attributes);

if (!isset($attributes["spacer"])) {
    $attributes["spacer"] = "";
}

Frontend Rendering

<section class="bs-big-teaser big-teaser <?php echo Spacer_Utils::render_spacer($attributes['spacer']); ?>">
    <div class="position-relative w-100 h-100">
        <?php Image_Utils::render_image($attributes, "w-100 h-100 object-fit-cover"); ?>
        <div class="position-absolute bottom-0 left-0 w-100 pb-6">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <?php echo Heading_Utils::render_heading($attributes["heading"], $attributes, "fs-36 fw-bold text-white"); ?>
                        <?php echo Subtitle::render_subtitle($attributes["subtitle"], $attributes, "fs-24 fw-bold text-white"); ?>
                        <?php Button_Utils::render_button($attributes); ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Example Usage

Block Editor

In the WordPress editor, users can:

Select and configure a background image.
Adjust spacing using spacer settings.
Add or modify the heading, subtitle, and button.

Frontend

The block renders as a visually appealing teaser section with:

A full-width background image.
Heading and subtitle overlay.
A call-to-action button.

Conclusion

The Big-Teaser Component merges essential utilities—image, heading, subtitle, button, and spacing—into one cohesive and reusable block.