# 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](/downloads/launch-theme.zip). 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](/pl/dynamic-sources/) 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](/pl/blog/). Selektory obejmują również bogaty tekst poza blogiem, jeśli jest renderowany wewnątrz `.sk-page`. Pełną implementację znajdziesz w [paczce Skeleton](/downloads/growsite-skeleton.zip).

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