tsu_newsletter_block/build/render.php

<?php ?>

<style>
    .tsu-newsletter-block-input-custom-class {
        border-color: rgba(177, 48, 65, 1);
        border-radius: 12px;
        padding: 12px;
        border-style: solid;
    }

    .tsu-newsletter-block-input-custom-class:focus {
        background-color: rgba(177, 48, 65, 0.1);
    }

    .tsu-newsletter-block-layout-right-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .tsu-newsletter-privacy {
        font-size: small;
        color: grey;
    }
</style>

<script>
    function saveEmail(event) {
        console.log(event);
    }
</script>


<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"
    style="margin-top:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--70)">
    <div
        class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-layout-15 wp-block-columns-is-layout-flex">
        <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
            <p class="has-x-large-font-size" style="line-height:0">
                Newsletter
            </p>
        </div>
    </div>

    <div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-layout-16 wp-block-columns-is-layout-flex"
        style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)">
        <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
            <p>
                Zapisz się do naszego newslettera i otrzymuj aktualności dotyczące realizowanych przez nas projektów.
            </p>
        </div>
        <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
            <form class="is-layout-flex tsu-newsletter-block-layout-right-wrapper">
                <input type="text" class="tsu-newsletter-block-input-custom-class" placeholder="Adres e-mail..."
                    style="flex-grow: 3">
                <div class="wp-block-buttons wp-block-buttons-is-layout-flex" style="flex-grow: 1">
                    <div class="wp-block-button has-custom-font-size has-small-font-size">
                        <a class="wp-block-button__link wp-element-button" style="border-radius:12px">
                            → ZAPISUJĘ SIĘ
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>