Teksty i nagłówki

Co tworzysz

Edytowalny blok z nagłówkiem i opisem. Użytkownik zmieni tekst, kolor, wyrównanie oraz rozmiar nagłówka. Pełny plik blocks/text.html jest poniżej i w paczce przykładowej. Wklej go do własnej paczki, dopuść typ text w rodzicu i przebuduj katalog.

1. Zdefiniuj pola treści

W schema dodaj text dla nagłówka i textarea dla opisu. id jest kluczem zapisu, label etykietą panelu, a default rzeczywistą wartością startową. Nie traktuj placeholdera jako wartości domyślnej.

json

[
  {"type":"text","id":"title","label":"Nagłówek","default":"Poznaj nas"},
  {"type":"textarea","id":"text","label":"Opis","default":"Opowiedz swoją historię."}
]

Dla identyfikatorów title, text i label dostępna jest integracja ze wspólnym edytorem tekstu. Pole o innym ID nadal można edytować przez schema, lecz nie zakładaj automatycznej obsługi każdego ID w edytorze na podglądzie.

2. Połącz treść z HTML

html

<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>

Wyrażenie wewnątrz tagu wyświetla tekst. data-text-field określa, gdzie edytor ma go zapisać. Oba wskazują ten sam identyfikator. W sekcji używaj section.settings i section.settings_path; w bloku — block. Nie wpisuj na sztywno ID instancji, np. first.

Wybierz poziom nagłówka zgodnie ze strukturą strony: tytuł strony jako h1, sekcje jako h2, podsekcje jako h3. Rozmiar wizualny ustawiaj CSS lub kontrolką, a nie przypadkową zmianą poziomu nagłówka.

3. Dodaj wygląd

Kolor deklaruj jako color, rozmiar jako range z unit: "px", wyrównanie jako select. W przykładzie wielkość nagłówka ma zakres 20–64 px i domyślnie 32 px. Wartość jest liczbą; dopiero w stylu dodajesz px.

html

<h2 style="font-size:[[ block.settings.heading_size ]]px;color:[[ block.settings.color ]]" data-text-field="[[ block.settings_path ]].title" gs-text="block.settings.title"></h2>

Opis wielowierszowy korzysta z .launch-copy-body { white-space: pre-line; }. Dzięki temu zwykłe znaki nowej linii pozostają widoczne. Edytor bogatego tekstu zapisuje dodatkowy dokument formatowania w content.canvas.fields; nie zapisuj ręcznie HTML do pola tekstowego.

4. Udostępnij blok

Rodzic musi mieć "blocks":[{"type":"text"}] albo odpowiedni wpis obok innych typów. Blok potrzebuje presetu oraz tagu <template gs-slot="blocks"></template> w rodzicu. Po imporcie dodaj go z kreatora. Sam plik bez targetingu nie pojawi się na liście.

Tekst stały i dynamiczny

Niezmienne etykiety interfejsu strony umieszczaj w słownikach i renderuj filtrem t. Treści klienta deklaruj jako ustawienia. Nazwę witryny można pobrać bezpośrednio przez site.name albo podłączyć jako źródło dynamiczne pola tekstowego.

Pusty tekst jest prawidłową zapisaną wartością. Nie stosuj dodatkowego filtra default do edytowalnego tekstu, jeśli miałby przywracać usunięty przez klienta nagłówek. HTML w zwykłym tekście jest escapowany.

Bloki kodu i kod w tekście

Motyw musi stylować kod w bogatym tekście tak samo jak nagłówki i akapity. Renderer używa .rich-text pre dla bloku kodu oraz .rich-text code dla kodu, także wewnątrz zdania. Dodaj reguły do pliku assets/*.css w paczce motywu. Użyj czcionki monospace, zachowaj podział na wiersze i przewijaj długie linie wewnątrz bloku zamiast rozszerzać stronę.

Przykład używa wrappera .sk-page oraz zmiennych kolorów --sk-* z GrowSite Skeleton. Przy przenoszeniu do innego motywu zastąp je własnym wrapperem i zmiennymi:

css

.sk-page .rich-text pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 24px;
  border: 1px solid var(--sk-border);
  border-top: 3px solid var(--sk-accent);
  border-radius: 16px;
  background: var(--sk-surface);
  color: var(--sk-text);
  font: 14px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
  overflow-wrap: normal;
}
.sk-page .rich-text code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--sk-surface);
  color: var(--sk-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.sk-page .rich-text pre code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

GrowSite Skeleton zawiera te style w assets/blog.css, obok stylów Bloga i Komentarzy. Selektory obejmują również bogaty tekst poza blogiem, jeśli jest renderowany wewnątrz .sk-page. Pełną implementację znajdziesz w paczce Skeleton.

Sprawdź kod w zdaniu, bloki wielowierszowe, długie linie i widok mobilny. Kod zagnieżdżony w pre nie powinien otrzymywać drugiego tła ani paddingu. Te reguły odpowiadają za prezentację kodu; nie dodają kolorowania składni ani nie wykonują kodu.

Sprawdź gotowy element

Kliknij tekst na podglądzie, zmień go i zapisz. Następnie zmień go przez schema, aby upewnić się, że starsze formatowanie nie zasłania wartości. Przetestuj pusty tekst, polskie znaki, długie słowo, kilka akapitów, 20/64 px i mobile. Odśwież kreator oraz publiczny widok.

Kompletny plik bloku

blocks/text.html

html

<div class="launch-copy" style="color:[[ block.settings.color ]];text-align:[[ block.settings.alignment ]]">
  <h2 data-text-field="[[ block.settings_path ]].title" style="font-size:[[ block.settings.heading_size ]]px" gs-text="block.settings.title"></h2>
  <p class="launch-copy-body" data-text-field="[[ block.settings_path ]].text" gs-text="block.settings.text"></p>
</div>