Przyciski i linki

Przycisk prowadzący do adresu

Jeśli element przenosi użytkownika do strony, maila lub telefonu, użyj a wystylowanego jako przycisk. button type="submit" służy do wysłania formularza i jest obsługiwany przez komponent formularza. Nie zastępuj go linkiem, bo utracisz wysyłkę i walidację.

Poniżej znajdziesz kompletny blocks/button.html. Ma tekst, adres, widoczność, kolory, obramowanie, promień, dwa wypełnienia i wielkość tekstu. Każda kontrolka ma rzeczywistą wartość domyślną i wpływa na styl elementu.

1. Tekst i miejsce docelowe

<a href="[[ safe_url(block.settings.url) ]]">
  <span data-text-field="[[ block.settings_path ]].label" gs-text="block.settings.label"></span>
</a>

Użyj text o ID label oraz url o ID url. Filtr safe_url sprawdza adres. Powiązanie na span umożliwia edycję tekstu. Adres i wygląd przykładowego bloku zmienia się w kontrolkach schema — nie zakładaj, że zwykły tag a automatycznie otrzyma cały specjalny edytor starszych przycisków.

W linku WhatsApp używaj numeru międzynarodowego bez plusa i spacji. Parametry wiadomości koduj jako URL. Nie używaj javascript: ani zdarzeń inline. Kontrolka url schema przyjmuje gotowy adres; złożony wybór rodzaju linku w panelu jest osobnym mechanizmem platformy.

2. Styl i wymiary

Nazwij kontrolki precyzyjnie: „Grubość obramowania”, „Zaokrąglenie”, „Wypełnienie pionowe”, „Wypełnienie poziome”, „Rozmiar tekstu”. Użyj suwaka z polem liczbowym, jednostką i zakresem. Kolory deklaruj jako color, co korzysta ze wspólnego pickera.

{"type":"range","id":"padding_x","label":"Wypełnienie poziome","min":8,"max":64,"step":1,"default":20,"unit":"px"}

Wynik CSS to padding:12px 20px, gdzie pierwsza wartość dotyczy góry/dołu, druga boków. Grubość 0 wyłącza widoczne obramowanie. Promień 0 oznacza ostre rogi. Nie zamieniaj tych wartości na domyślne przez test prawdziwości.

3. Stany i dostępność

W CSS dodaj display:inline-flex, wyrównanie zawartości, czytelny kontrast, minimalną wysokość 44 px, :hover i widoczny :focus-visible. Nie usuwaj obrysu klawiatury bez zastępstwa. Tekst powinien opisywać działanie, np. „Napisz do nas”.

Domyślnie link otwiera się w tej samej karcie. Jeżeli świadomie dodasz target="_blank", dodaj też rel="noopener noreferrer" i poinformuj odwiedzającego. Nie dodawaj obsługi kliknięć skryptem do zwykłej nawigacji.

4. Ikona i ukrywanie

Przykład nie zawiera ikony. Dodawaj ją tylko wtedy, gdy ma być faktycznie renderowana; pusty przycisk nie powinien pokazywać domyślnej gwiazdki w konfiguracji. Obsługę ikon znajdziesz w instrukcji kart i mediów.

show_link ukrywa cały element warunkiem Loom. Usunięcie instancji z kreatora usuwa cały blok. Pusty adres nie jest adresem docelowym — ustal poprawny cel albo wyłącz widoczność przycisku.

Przycisk wysyłania formularza

Formularz używa ContactFormPlugin: podczas wysyłania przycisk jest zablokowany, a pod nim pojawia się status. W stopce Paylio tekst wysyłania jest powiązany z content.badge. Nie ustawiaj mailto: jako zamiennika prawdziwego submitu. Szczegóły w formularzach.

Test końcowy

Sprawdź tekst i adres po zapisie, każdy rodzaj linku, wartości 0 dla obramowania/promienia, długi tekst na telefonie, klawiaturę i fokus. Linki testuj w publicznym podglądzie; tryb edycji może przechwytywać kliknięcia.

Kompletny plik bloku

Zobacz komponenty GS Loom UI: warianty primary, secondary, outline, ghost, link i danger, rozmiary, tokeny motywu i ustawienia edytora.

blocks/button.html

<template gs-if="block.settings.show_link">
<a class="launch-cta" href="[[ safe_url(block.settings.url) ]]" style="background:[[ block.settings.background ]];color:[[ block.settings.color ]];border:[[ block.settings.border_width ]]px solid [[ block.settings.border_color ]];border-radius:[[ block.settings.radius ]]px;padding:[[ block.settings.padding_y ]]px [[ block.settings.padding_x ]]px;font-size:[[ block.settings.font_size ]]px">
  <span data-text-field="[[ block.settings_path ]].label" gs-text="block.settings.label"></span>
</a>
</template>