Edycja na podglądzie

Renderer przekształca HTML w elementy React i podłącza wspólne mechanizmy edytora. Nie montuje surowego HTML przez dangerouslySetInnerHTML w panelu.

html

<article data-canvas-card="[[ block.field_path ]].card">
  <h2 data-text-field="[[ block.settings_path ]].title" gs-text="block.settings.title"></h2>
  <p data-text-field="[[ block.settings_path ]].text" gs-text="block.settings.text"></p>
</article>

Dla tekstu używaj identyfikatorów rozpoznawanych przez edytor (title, text, label, eyebrow, badge, meta). Pozostałe ustawienia są dostępne w formularzu schema. Nie wpisuj indeksów lub identyfikatorów bloków na sztywno: runtime udostępnia field_path i settings_path.

Integracje wspólne:

data-text-field: zaznaczenie, bogaty tekst i jego zapis;
data-canvas-card: edycja powierzchni karty;
<gs-icon name="shield" field="items.0.icon"></gs-icon>: istniejący katalog ikon i ich edycja;
<gs-image field="image_url"></gs-image>: istniejące pole obrazu wraz z kadrowaniem;
<gs-canvas></gs-canvas>: elementy dodane na płótnie;
<gs-slot>: punkt integracji z funkcjami aplikacji, używany przez adaptery wbudowanych szablonów.

gs-image odczytuje adres i sąsiednie image_alt / image_frame z treści sekcji. Formularze, aktywne wtyczki, zgody i funkcje systemowe pozostają kontrolowane przez GrowSite.

Linki i formularze

html

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

Adres może mieć postać mailto:hello@example.com, tel:+31201234567, https://wa.me/31201234567, /#contact albo HTTPS. Nie dołączaj zdarzeń JavaScript. Zwykły link Loom nie uruchamia automatycznie wszystkich zachowań starszego edytora przycisków.

Formularze, subskrypcje, zgody i akcje pluginów wymagają integracji platformy. Snippet nie tworzy endpointu backendu. Dla własnego pola image_picker można wyświetlić adres przez zwykłe img, lecz to samo w sobie nie podłącza kadrowania i biblioteki mediów.

Test edycji

Sprawdź najechanie, kliknięcie, wartości domyślne, zapis, odświeżenie i wersję publiczną. Przy zmianie tekstu przez schema stary rich text nie powinien zasłaniać nowej wartości. Przesuń okno edycji i zmień wymiar elementu — okno powinno zachować pozycję. Takie zachowania są częścią wspólnego kreatora, nie kodu szablonu.

Wygląd elementów na podglądzie

Przyciski, karty i sekcje korzystają z data-canvas-surface="loom-surfaces.staly-klucz". Zachowuj ten klucz przy aktualizacji szablonu. Kliknięcie wolnego miejsca otwiera tło, kolor, obramowanie, zaokrąglenie i odstępy; tekst wewnątrz zachowuje własną edycję. Powiązanie adresu przycisku deklaruje data-loom-link-field="loom.settings.url_1", a etykiety data-text-field="loom.settings.text_8". Ikony używają data-element-icon; ich oryginalny wygląd pozostaje do czasu wybrania zamiennika. Obrazy używają data-loom-image-field oraz opcjonalnego data-loom-alt-field. Wygląd i kadrowanie zapisują się w content.canvas.elements, poza ustawieniami schematu szablonu. Używaj unikalnych kluczy dla powtarzanych elementów. Edycja zmienia szkic, publikacja jest osobną czynnością.

Własna grafika zamiast ikony

W ustawieniach ikony wybierz „Wybierz lub wgraj własną ikonę”. Otworzy się biblioteka plików tej strony z opcją uploadu; obowiązują jej standardowe limity i dozwolone formaty obrazów. Grafika jest wyświetlana jako obraz z zachowaniem proporcji. Możesz zmienić rozmiar, tło, odstępy i zaokrąglenie; kolor nie przemalowuje pikseli zdjęcia. Wybranie symbolu z listy zastępuje własną grafikę, „Bez ikony” ją ukrywa, a „Domyślne” przywraca ikonę szablonu. Zapis używa istniejącego pola icon w elemencie lub węźle canvas: image:/adres/pliku.png albo image:https://…. Renderer traktuje plik jako obraz, nie jako kod HTML.