[Nowe Blockstudio 7.7](https://blockstudio.dev/pl/blog/blockstudio-7-7/)

# Framework bloków dla WordPress

Niestandardowe bloki ze zwykłych plików. Zdefiniuj pola w JSON, twórz szablony w PHP, Twig lub Blade. Nie jest wymagany etap kompilacji.

Terminal

```
composer require blockstudio/blockstudio
```

[Rozpocznij](https://blockstudio.dev/pl/docs/)

[Pobierz v7.7.12](https://github.com/inline0/blockstudio/releases)

## [Bloki](https://blockstudio.dev/pl/features/blocks/)

Twórz własne bloki za pomocą szablonów JSON, PHP, Twig lub Blade. 27 typów pól, bez etapu budowania.

## [Strony](https://blockstudio.dev/pl/features/pages/)

Pisz kompletne strony WordPress jako pliki szablonów i synchronizuj je z natywnymi blokami jednym poleceniem.

## [Wzorce](https://blockstudio.dev/pl/features/patterns/)

Definiuj wielokrotnego użytku wzorce bloków jako pliki szablonów; zostaną automatycznie zarejestrowane w narzędziu wstawiania.

## [Rozszerzenia](https://blockstudio.dev/pl/features/extensions/)

Dodawaj własne pola do dowolnego bloku — wbudowanego, zewnętrznego lub własnego — za pomocą jednego pliku JSON.

## [Typy pól](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/)

27 wbudowanych typów, w tym pola powtarzalne, selektory kolorów, edytory kodu i multimedia, a także rejestrowane przez Ciebie typy pól.

## [Przetwarzanie zasobów](https://blockstudio.dev/pl/docs/blocks/assets/)

Kompilacja SCSS, moduły ES, style z określonym zakresem i opcjonalna minifikacja — wszystko zgodnie z konwencją nazewnictwa.

## [JSON Schema](https://blockstudio.dev/pl/docs/blocks/schema/)

Pełne uzupełnianie kodu i walidacja w IDE dla konfiguracji bloków, rozszerzeń i ustawień.

## [Szablony](https://blockstudio.dev/pl/docs/blocks/registration/#template)

Pisz szablony w PHP, Twig lub Blade z zasobami o określonym zakresie, zagnieżdżonymi InnerBlocks i zmiennymi szablonów.

Blockstudio znacznie rozszerza podstawowy sposób tworzenia bloków. Definicje JSON, szablony PHP, style o ograniczonym zakresie. Nic poza plikami, gotowe dla agentów, którzy stworzą to, co będzie dalej.

## Własne bloki w 3 plikach

Definiuj pola w block.json, renderuj je w szablonie, a styl nadaj za pomocą CSS lub SCSS. Bez JavaScript, etapu budowania i zbędnego kodu.

[Rozpocznij](https://blockstudio.dev/pl/docs/general/getting-started/)

block.json

```
{
  "name": "starter/hero",
  "title": "Hero",
  "blockstudio": {
    "attributes": [
      { "id": "heading", "type": "text" },
      { "id": "showCta", "type": "toggle" },
      { "id": "background", "type": "color" }
    ]
  }
}
```

index.php

```
<section useBlockProps class="hero"
  style="background: <?= esc_attr($a['background']['value'] ?? '') ?>">
  <h1><?= esc_html($a['heading']) ?></h1>

  <?php if ($a['showCta']): ?>
    <a href="/contact">Get Started</a>
  <?php endif; ?>

  <InnerBlocks />
</section>
```

style.scss

```
.hero {
  padding: 4rem 2rem;

  h1 {
    font-size: 3rem;
    font-weight: 700;
  }

  a {
    padding: 0.75rem 1.5rem;
    color: #fff;
    background: #18181b;
  }
}
```

## Funkcje React, szablony PHP

Natywne komponenty edytora WordPress, takie jak RichText i InnerBlocks, dostępne bezpośrednio w szablonach PHP. Bez JavaScript i etapu budowania.

### Wszystko w tym samym pliku

Użyj `<RichText />` do edycji inline w edytorze bloków, a statycznego HTML w frontendzie. `<InnerBlocks />` obsługuje zagnieżdżone bloki potomne, a `useBlockProps` oznacza kontener bloku.

Blockstudio automatycznie obsługuje integrację z edytorem. W edytorze stają się one prawdziwymi komponentami React. W frontendzie są renderowane jako zwykłe HTML po stronie serwera.

[Poznaj komponenty](https://blockstudio.dev/pl/docs/blocks/react-components/)

index.php

```
<div useBlockProps class="container">
  <RichText
    class="text-xl font-semibold"
    tag="h1"
    attribute="headline"
    placeholder="Enter headline"
  />

  <?php if ($a['showCta']): ?>
    <a href="<?= esc_url($a['ctaUrl']) ?>">
      <?= esc_html($a['ctaLabel']) ?>
    </a>
  <?php endif; ?>

  <InnerBlocks class="mt-4 p-4 border" />
</div>
```

## Pisz szablony w PHP, Twig lub Blade

Używaj znanego Ci języka szablonów. Wszystkie trzy mają te same zmienne, komponenty i funkcje. Nie jest wymagane JavaScript.

### Te same zmienne w każdym języku

Uzyskuj dostęp do atrybutów przez `$a`, danych bloku przez `$b`, a kontekstu rodzica przez `$c`. Używaj flag, takich jak `$isEditor`, aby dostosować wynik do środowiska.

Używaj bezpośrednio w szablonach `<InnerBlocks />`, `<RichText />` i `<MediaPlaceholder />` bez pisania JavaScript.

[Dowiedz się więcej o szablonach](https://blockstudio.dev/pl/docs/blocks/registration/#template)

PHP

```
<section class="hero">
  <h1><?= esc_html($a['heading']) ?></h1>
  <p><?= esc_html($a['description']) ?></p>
  <?php if ($a['showCta']): ?>
    <a href="<?= esc_url($a['ctaUrl']) ?>">
      <?= esc_html($a['ctaLabel']) ?>
    </a>
  <?php endif; ?>
  <InnerBlocks />
</section>
```

## Pełne strony zdefiniowane w kodzie

Twórz kompletne strony WordPress z plików szablonów. HTML mapuje elementy na bloki podstawowe, a jedno polecenie synchronizuje je z edytorem.

### Pisz HTML, otrzymuj bloki

Standardowe elementy, takie jak `<h1>`, `<p>` i `<ul>`, są automatycznie mapowane na bloki podstawowe. Do wszystkich pozostałych użyj `<block>`.

Definiuj kompletne układy w swoim kodzie. Po uruchomieniu `wp bs pages sync` Blockstudio przekształca szablony w rzeczywiste strony WordPress z prawdziwymi blokami, które można w pełni edytować w edytorze bloków.

[Dowiedz się więcej o stronach](https://blockstudio.dev/pl/docs/pages-and-patterns/pages/)

index.php

```
<div>
  <h1 blockEditingMode="contentOnly">About Us</h1>
  <p>We build tools for WordPress developers.</p>
  <img src="/team.jpg" alt="Our team" />
</div>

<block name="core/columns">
  <block name="core/column">
    <h2>Our Mission</h2>
    <p>Making block development fast and simple.</p>
  </block>
  <block name="core/column">
    <block name="core/group" layout='{"type":"grid"}'>
      <h2>Our Stack</h2>
    </block>
  </block>
</block>
```

## Jawna synchronizacja

Uruchom wp bs pages sync, aby zastosować zmiany szablonu. Niezmienione strony nie wymagają zapisu.

## Blokowanie szablonu

Zablokuj strukturę, a klienci będą mogli edytować treść. Idealne dla stron docelowych i marketingowych.

## Bloki z kluczami

Przypisz klucze, aby zmiany użytkowników zachowywały się po aktualizacji szablonu. Synchronizuj strukturę, zachowując treść.

## Pod kontrolą wersji

Strony są przechowywane w plikach. Śledź zmiany w Git, wdrażaj środowiska i przeglądaj je w PR-ach.

## Wielokrotnego użytku wzorce z plików szablonów

Definiuj wzorce bloków jako pliki szablonów. Ta sama składnia HTML co w stronach; automatyczna rejestracja we wstawiaczu bloków.

### Pliki szablonów zamiast kodu rejestrującego

Utwórz folder z `pattern.json` i plikiem szablonu. Blockstudio automatycznie zarejestruje wzorzec, bez zbędnego kodu `register_block_pattern()`.

Wzorce są wstawiane jako prawdziwe, edytowalne bloki. Użytkownicy otrzymują układ początkowy, który mogą dostosować, a Ty zarządzasz szablonami w kontroli wersji.

[Dowiedz się więcej o wzorcach](https://blockstudio.dev/pl/docs/pages-and-patterns/patterns/)

index.php

```
<div>
  <h2>Pricing</h2>
  <p>Simple, transparent pricing.</p>
  <block name="core/columns">
    <block name="core/column">
      <h3>Starter</h3>
      <p>For small teams getting started.</p>
    </block>
    <block name="core/column">
      <h3>Pro</h3>
      <ul><li>Priority support</li><li>Custom integrations</li></ul>
    </block>
  </block>
</div>
```

## Ta sama składnia co w stronach

Standardowe HTML są mapowane na bloki podstawowe; tag bloku obsługuje całą resztę.

## Rejestrowane automatycznie

Dodaj szablon i pattern.json. Blockstudio zarejestruje go automatycznie.

## W pełni edytowalne

Wzorce są wstawiane jako edytowalna zawartość bloków i dostosowywane dla każdej instancji.

## Kategorie i wyszukiwanie

Kategorie i słowa kluczowe ułatwiają znajdowanie wzorców we wstawiaczu.

## Konfigurowalne mapowanie elementów

Zmień blok, na który mapowany jest dowolny element HTML. Przypisz standardowe tagi, takie jak h1, p i img, do własnych typów bloków.

### Mapuj HTML na własne bloki

Domyślnie standardowe HTML są mapowane na bloki podstawowe WordPress. Użyj filtra `element_mapping`, aby przypisać dowolny element do innego typu bloku. Każdy `<h1>` może utworzyć własny blok zamiast `core/heading`.

[Dowiedz się więcej o mapowaniu elementów](https://blockstudio.dev/pl/docs/pages-and-patterns/#element-mapping)

functions.php

```
add_filter(
  'blockstudio/parser/element_mapping',
  function ($mapping) {
    $mapping['h1']  = 'custom/heading';
    $mapping['h2']  = 'custom/heading';
    $mapping['p']   = 'custom/paragraph';
    $mapping['img'] = 'custom/image';
    return $mapping;
  }
);
```

## Dodaj pola do dowolnego bloku

Rozszerz bloki podstawowe, zewnętrzne lub własne o niestandardowe pola. Czyste JSON, bez szablonów i kodu.

### Własne pola, zero szablonów

Utwórz plik JSON, wskaż blok za pomocą `name` i zdefiniuj pola. Właściwość `set` mapuje wartości pól bezpośrednio na klasy, style, atrybuty danych lub cokolwiek innego.

Bez szablonów i funkcji renderujących. Blockstudio automatycznie obsługuje generowanie treści za pomocą Tag Processora WordPress HTML.

[Dowiedz się więcej o rozszerzeniach](https://blockstudio.dev/pl/docs/extensions/)

extend-animation.json

```
{
  "name": "core/*",
  "blockstudio": {
    "extend": { "priority": 10 },
    "attributes": [
      {
        "id": "animation",
        "type": "select",
        "allowNull": "None",
        "options": [
          { "value": "fade", "label": "Fade" },
          { "value": "slide", "label": "Slide" }
        ],
        "set": [{
          "attribute": "class",
          "value": "animate-{attributes.animation}"
        }]
      }
    ]
  }
}
```

## Dowolny blok docelowy

Rozszerz jeden blok, listę lub całą przestrzeń nazw za pomocą symboli wieloznacznych, takich jak core/*.

## Właściwość set

Mapuj wartości pól bezpośrednio na klasy, style, atrybuty danych lub dowolny atrybut HTML.

## Pola warunkowe

Pokazuj i ukrywaj pola na podstawie innych wartości, używając tych samych operatorów co bloki.

## Pełen zestaw funkcji

Wszystkie typy pól, logika warunkowa, źródła danych i wielokrotnego użytku właściwości.

## Do dyspozycji masz 27 typów pól

Od podstawowych pól tekstowych po repeatery i karty, a także pola ukierunkowane na DOM, takie jak klasy i atrybuty danych. Możesz też rejestrować własne typy.

[Poznaj typy pól](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/)

[attributes](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [block](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [checkbox](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [classes](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [code](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [color](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [date](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [datetime](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [files](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [gradient](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [group](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [html-tag](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [icon](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [link](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [message](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [number](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [radio](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [range](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [select](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [tabs](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [text](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [textarea](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [toggle](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [repeater](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [richtext](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [unit](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/) [wysiwyg](https://blockstudio.dev/pl/docs/blocks/attributes/field-types/)

## Potok zasobów bez konfiguracji

Kompilacja SCSS, importy modułów ES i opcjonalna minifikacja — wszystko według konwencji nazewnictwa. Bez webpacka i Vite.

### Nazwij pliki, a Blockstudio zajmie się resztą

Umieść `style.scss` obok bloku, a zostanie automatycznie skompilowany i dodany do kolejki. To samo dotyczy `script.js`, z obsługą modułów ES i bezpośrednich importów npm. Minifikację włączysz jedną opcją.

Zasoby są przypisane do bloków i ładowane tylko w razie potrzeby. Użyj `editor.*` dla zasobów tylko w edytorze lub `*.inline.*`, aby osadzić je na stronie.

[Dowiedz się więcej o zasobach](https://blockstudio.dev/pl/docs/blocks/assets/)

SCSS

```
$accent: var(--wp--preset--color--primary);

.hero {
  padding: 4rem 2rem;
  h1 { color: $accent; font-size: clamp(2rem, 5vw, 4rem); }
  &--dark { background: #0a0a0a; }
}
```

## Kompilacja SCSS

Pisz zagnieżdżenia, zmienne i miksy. Blockstudio zajmie się kompilacją.

## Importy modułów ES

Importuj pakiety npm bezpośrednio. Blockstudio pobiera je i udostępnia lokalnie.

## Konwencja nazewnictwa

style.scss, script.js, editor.css. Wystarczy nazwać plik.

## Ograniczone zakresem i osadzone

Zasoby są ładowane tylko wtedy, gdy blok jest obecny; osadzaj je, używając konwencji nazw plików.

## Tailwind v4, kompilowane w PHP

Pisz klasy narzędziowe w szablonach. Blockstudio kompiluje je po stronie serwera za pomocą TailwindPHP i automatycznie buforuje pliki.

### Jedna opcja, zero narzędzi

Ustaw `tailwind.enabled` na `true` w `blockstudio.json` i pisz klasy narzędziowe. Blockstudio kompiluje CSS po stronie serwera, buforuje je i wstawia bez Node.js.

Użyj `blockstudio/tailwind/css` do definiowania motywów, klas narzędziowych i wariantów za pomocą składni w stylu Tailwind v4 CSS. Pole klas udostępnia autouzupełnianie w edytorze.

[Dowiedz się więcej o Tailwind](https://blockstudio.dev/pl/docs/tailwind/)

functions.php

```
add_filter('blockstudio/tailwind/css', function ($css) {
  return $css . '
    @theme { --color-accent: #4f46e5; }
    @utility container-narrow {
      max-width: 48rem;
      margin-inline: auto;
    }
  ';
});
```

## Kompilacja po stronie serwera

TailwindPHP kompiluje klasy używane na każdej stronie. Bez Node i etapu budowania.

## Automatyczne buforowanie

Skompilowane CSS jest buforowane na dysku według zestawu klas, co przyspiesza kolejne żądania.

## Konfiguracja z priorytetem CSS

Definiuj motywy, klasy narzędziowe i warianty bezpośrednio za pomocą Tailwind v4 CSS.

## Podgląd na żywo w edytorze

Natychmiastowy podgląd w edytorze, podczas gdy frontend korzysta ze skompilowanego po stronie serwera CSS.

## Dostępne komponenty

W pakiecie Blockstudio znajduje się 59 komponentów UI, gotowych do wykorzystania w szablonach.

### Interaktywne elementy jako tagi bloków

Włącz `ui.enabled`, a Blockstudio zarejestruje 59 komponentów bez interfejsu pod przestrzenią nazw `bsui`: okna dialogowe, menu, karty, pola combobox, pola daty i plików, powiadomienia toast i inne. Obsługuje je WordPress Interactivity API.

Zapisuj je jako tagi bloków w dowolnym szablonie, stronie lub wzorcu, renderuj je z PHP albo zezwól na używanie ich w treści wpisów przez `bsui/*` w `blockTags`. Każdy z nich jest zwykłym blokiem z własnym `block.json`, działającym zarówno na kanwie edytora, jak i na stronie, a strona ładuje CSS i JS tylko renderowanych przez nią komponentów.

Przypisz kontrolce formularza `name`, a wyrenderuje ukryte pole, dzięki czemu otaczający ją formularz wyśle zwykłe wartości bez konieczności tworzenia własnego JavaScript. Selektory, menu i okna dialogowe korzystają z właściwych wzorców ARIA, z obsługą klawiszy strzałek, wpisywania tekstu w celu szybkiego wyboru oraz fokusem pozostającym wewnątrz otwartego okna modalnego.

Stylowanie korzysta ze zmiennych `--bs-ui-*`, a kompletny ciemny schemat jest dostępny za klasą `.dark`. Wszystko znajduje się w warstwie kaskady `bsui`, dzięki czemu zwykły CSS motywu ma pierwszeństwo bez flag important ani sztuczek ze specyficznością. Dodaj własny wariant komponentu za pomocą filtra i zapoznaj się z dołączonymi aplikacjami demo `app/*`, aby zobaczyć, jak komponenty łączą się w większe interfejsy.

[Przeglądaj komponenty](https://blockstudio.dev/pl/ui/)

index.php

```
<bs:bsui-dialog>
  <bs:bsui-dialog-trigger trigger_label="Edit profile" trigger_variant="outline" />
  <bs:bsui-dialog-backdrop />
  <bs:bsui-dialog-popup>
    <bs:bsui-dialog-header>
      <bs:bsui-dialog-title content="Edit profile" />
      <bs:bsui-dialog-description content="Make changes to your profile here, then save when you are done." />
    </bs:bsui-dialog-header>
    <bs:bsui-dialog-content>
      <bs:bsui-field>
        <bs:bsui-field-label text="Name" />
        <bs:bsui-input defaultValue="Pedro Duarte" />
      </bs:bsui-field>
    </bs:bsui-dialog-content>
    <bs:bsui-dialog-footer>
      <bs:bsui-dialog-close label="Cancel" variant="outline" />
      <bs:bsui-dialog-close label="Save changes" variant="default" />
    </bs:bsui-dialog-footer>
  </bs:bsui-dialog-popup>
</bs:bsui-dialog>
```

## Stworzone z myślą o programistach

Funkcje, dzięki którym tworzenie i utrzymywanie złożonych bloków staje się proste.

## [Elastyczne przechowywanie danych](https://blockstudio.dev/pl/docs/blocks/storage/)

Przechowuj wartości w metadanych wpisów, opcjach lub w obu miejscach. Twórz zapytania o bloki na podstawie metadanych i udostępniaj dane przez REST.

## [Logika warunkowa](https://blockstudio.dev/pl/docs/blocks/attributes/conditional-logic/)

Pokazuj pola na podstawie wartości, używając operatorów porównania, zagnieżdżonych warunków i reguł globalnych.

## [Ponad 130 PHP i hooków JS](https://blockstudio.dev/pl/docs/blocks/hooks/php/)

Filtry i akcje do rejestracji, pól, zasobów, ustawień i generowania treści.

## [JSON Schema](https://blockstudio.dev/pl/docs/blocks/schema/)

Autouzupełnianie, dokumentacja w tekście i walidacja w VS Code oraz JetBrains.

## [Kontekst API](https://blockstudio.dev/pl/docs/blocks/context/)

Udostępniaj zadeklarowane dane między blokiem nadrzędnym a zagnieżdżonymi blokami podrzędnymi.

## [Integracja AI](https://blockstudio.dev/pl/docs/dev/ai/)

Indeks dokumentacji dla agentów kodujących oraz wygenerowany AGENTS.md dla Twojego projektu.

## [Integracja z SEO](https://blockstudio.dev/pl/docs/blocks/seo/)

Automatyczne wstrzykiwanie treści dla Yoast, Rank Math i SEOPress.

## [Renderowanie programowe](https://blockstudio.dev/pl/docs/blocks/rendering/)

Renderuj bloki z PHP i używaj ich jako komponentów poza edytorem.

## [Pola niestandardowe](https://blockstudio.dev/pl/docs/blocks/attributes/custom-fields/)

Zdefiniuj zestawy pól wielokrotnego użytku raz i odwołuj się do nich w różnych blokach.

## [Przekształcenia bloków](https://blockstudio.dev/pl/docs/blocks/transforms/)

Przekształcaj bloki i dodawaj skróty wstawiania po naciśnięciu Enter lub prefiksu.

## [Opcje dynamiczne](https://blockstudio.dev/pl/docs/blocks/attributes/populating-options/)

Wypełniaj listy wyboru danymi z wpisów, taksonomii, użytkowników, funkcji lub interfejsów API.

## [Narzędzia HTML](https://blockstudio.dev/pl/docs/blocks/attributes/html-utilities/)

Renderuj atrybuty danych lub zmienne CSS na opakowaniu bloku.

## [Wtyczka, wtyczka MU lub Composer](https://blockstudio.dev/pl/docs/dev/composer/)

Zainstaluj archiwum ZIP wtyczki, załaduj ją jako wtyczkę must-use albo dołącz ją za pomocą Composer w motywie lub wtyczce. Bedrock może dołączyć ją na wczesnym etapie, a BLOCKSTUDIO_URL obsługuje niestandardowe adresy URL pakietów.

## [Aktualizacje bez konfliktów](https://blockstudio.dev/pl/docs/general/getting-started/)

Dołączone biblioteki, takie jak TailwindPHP, ScssPhp i Minify, to prywatne kopie z własnymi przestrzeniami nazw, więc nigdy nie zastępują wersji używanych przez inne wtyczki. Instalacje z archiwum ZIP aktualizują się z wydań GitHub; można też podać token dostępu.

## [Aktualizacja z v6 do v7](https://blockstudio.dev/pl/docs/dev/migration/v7/)

Bloki napisane dla v6 nadal działają: obsługiwane są stary prefiks importu blockstudio/, nazwy hooków w camelCase i przyrostki dash w zasobach. W przewodniku migracji opisano wprowadzone zmiany.

## Narzędzia dla programistów

Wbudowane narzędzia do inspekcji, debugowania i pracy z AI.

### [Canvas](https://blockstudio.dev/pl/docs/dev/canvas/)

Przegląd wszystkich zarządzanych stron przypominający Figma. Przesuwaj, powiększaj i przeglądaj witrynę w jednym widoku.

`admin.php?page=blockstudio-canvas`

### [Element Grabber](https://blockstudio.dev/pl/docs/dev/grab/)

Przytrzymaj Cmd+C na dowolnym elemencie, aby skopiować jego znaczniki i ścieżkę do szablonu bloku. Wklej ten kontekst do edytora AI.

`?blockstudio-devtools`

## Stworzone dla agentów

Dokumentacja, którą agent może indeksować, kontrakt dla Twojego projektu oraz analiza odrzucająca to, co do niego nie pasuje.

### Indeks, kontrakt i bramka

Blockstudio dostarcza `blockstudio-llm.txt` — indeks wszystkich dokumentów wraz z ich ścieżkami, przeznaczeniem i identyfikatorami, za które odpowiadają — a także `blockstudio-llm-full.txt` z pełnym tekstem. Agent odczytuje indeks, a następnie otwiera tylko potrzebną stronę.

W Twoim projekcie `blockstudio-agents` tworzy `AGENTS.md` na podstawie własnych plików i ustawień, a `blockstudio-phpstan` uruchamia wybrany przez Ciebie preset, opcjonalnie z poziomu zarządzanego hooka commit.

[Twórz z AI](https://blockstudio.dev/pl/ai/)

blockstudio-llm.txt

```
## Docs / Blocks / Attributes

### Registering Attributes
route: /docs/blocks/attributes/registering
file: docs/docs/blocks/attributes/registering.md
purpose: Learn how to register custom attributes for your blocks.
php: $a

### Field Types
route: /docs/blocks/attributes/field-types
file: docs/docs/blocks/attributes/field-types.md
purpose: All available field types and their properties in Blockstudio.
hooks: blockstudio/field_types
```

## Najpierw indeks

Każdy dokument wraz ze ścieżką, przeznaczeniem i identyfikatorami — około 11k tokenów.

## Pełny tekst na żądanie

Cała dokumentacja i schematy JSON w jednym pliku, około 164k tokenów.

## Wygenerowany AGENTS.md

blockstudio-agents opisuje, co autorzy projektu tworzą, co umożliwiają i czego zabraniają.

## Profile analizy

Pliki base, theme i extreme-theme zawierają szablony do block.json i więcej.

## Bloki pełnego stosu

Twórz kompletne aplikacje w folderze bloku. Baza danych, logika serwerowa, zaplanowane zadania i CLI — wszystko z plików.

### Dodaj plik, otrzymaj API

Dodaj `db.php`, aby zdefiniować model danych. Blockstudio tworzy punkty końcowe REST, waliduje dane wejściowe, zarządza przechowywaniem oraz udostępnia interfejsy API JavaScript i PHP.

Dodaj `rpc.php` dla funkcji serwerowych i `cron.php` dla zaplanowanych zadań. Każdy plik odpowiada za jedną rzecz, bez kontrolerów i narzędzi do budowania.

[Przewodnik po blokach Full-Stack](https://blockstudio.dev/pl/guides/full-stack-blocks/)

db.php

```
<?php
return [
  'storage'    => 'sqlite',
  'userScoped' => true,
  'capability' => [
    'create' => true,
    'read'   => true,
    'update' => true,
    'delete' => true,
  ],
  'fields' => [
    'text' => ['type' => 'string', 'required' => true],
    'done' => ['type' => 'boolean', 'default' => false],
  ],
];
```

### Funkcje serwerowe w jednej linijce

Definiuj funkcje PHP w `rpc.php` i wywołuj je za pomocą `bs.fn()`. Blockstudio obsługuje routing, uwierzytelnianie, ochronę CSRF i serializację JSON.

rpc.php

```
<?php
use Blockstudio\Db;

return [
  'toggle' => function (array $params): array {
    $db   = Db::get('my-theme/todo');
    $id   = (int) ($params['id'] ?? 0);
    $todo = $db->get_record($id);
    if ($todo) {
      $db->update($id, ['done' => !$todo['done']]);
    }
    return ['success' => (bool) $todo];
  },
];
```

## [Baza danych](https://blockstudio.dev/pl/docs/blocks/block-api/database/#storage-modes)

CRUD definiowany przez schemat w 6 trybach przechowywania: table, sqlite, jsonc, storh, meta, post_type.

## [RPC](https://blockstudio.dev/pl/docs/blocks/block-api/rpc/)

Funkcje serwerowe wywoływane z frontendu za pomocą bs.fn().

## [Cron](https://blockstudio.dev/pl/docs/blocks/block-api/cron/)

Zaplanowane zadania w cron.php, rejestrowane za pomocą WP-Cron.

## [CLI](https://blockstudio.dev/pl/docs/dev/cli/)

Zarządzaj blokami, stronami, rekordami, RPC, zadaniami cron i ustawieniami za pomocą wp bs.

## [Ochrona CSRF](https://blockstudio.dev/pl/docs/blocks/block-api/database/#csrf-protection)

Publiczne punkty końcowe są automatycznie chronione, a tryb jawnego otwarcia jest dostępny na żądanie.

## [Zakres danych użytkownika](https://blockstudio.dev/pl/docs/blocks/block-api/database/#user-scoped-data)

Automatycznie izoluj dane każdego użytkownika bez ręcznego filtrowania według właściciela.

## [Przenośność](https://blockstudio.dev/pl/guides/full-stack-blocks/)

W SQLite lub JSONC kod i dane znajdują się razem w jednym folderze.

## [Komponenty](https://blockstudio.dev/pl/docs/blocks/components/)

Komponenty UI tworzone programowo korzystają z pełnego potoku Blockstudio.

## Statycznie, gdy to możliwe

Włącz wstępne renderowanie statyczne, a anonimowi użytkownicy otrzymają zapisane HTML, podczas gdy wszystkie dane osobiste pozostaną aktualne.

[Wstępne renderowanie statyczne](https://blockstudio.dev/pl/features/production/)

## Nieaktywne do momentu włączenia

performance.staticPrerender w blockstudio.json włącza tę funkcję.

## Przed uruchomieniem WordPress

Gdy earlyServe jest włączone, plik drop-in wysyła zapisane strony, zanim załaduje się WordPress.

## Aktualizacja po zapisaniu

Zapisanie wpisu usuwa z pamięci podręcznej lub renderuje ponownie jego zapisaną stronę i stronę główną.

## Działa tam, gdzie trzeba

Żądania zalogowanych użytkowników, wyszukiwanie i dynamicPaths domyślnie są renderowane na żywo.

## Pytania i odpowiedzi

Wszystko, co musisz wiedzieć o Blockstudio. Nie ma odpowiedzi? Zapytaj na GitHub.

[Zgłoś problem](https://github.com/inline0/blockstudio/issues)

### Czym jest Blockstudio?

Wtyczka WordPress, która pozwala tworzyć niestandardowe bloki za pomocą JSON i pliku szablonu. Definiuj pola i pisz znaczniki bez narzędzi React.

### Czy muszę znać JavaScript?

Nie. Jeśli potrafisz pisać HTML i podstawowy PHP, możesz tworzyć bloki. Blockstudio zajmuje się szczegółami edytora.

### Czy działa z moim motywem?

Tak. Bloki korzystają z natywnego WordPress bloku API i działają z każdym motywem zgodnym z blokami.

### Czym różni się od bloków ACF?

ACF PRO również rejestruje bloki przez block.json i renderuje szablony PHP z InnerBlocks, a od czasu ACF PRO 6.8.1 może też deklarować w nich pola bloku. Blockstudio wykrywa foldery bloków bez wywołania register_block_type(), renderuje PHP, Twig lub Blade, kompiluje style i skrypty każdego bloku, dodaje RichText w szablonach, stronach opartych na plikach, wzorcach i rozszerzeniach oraz jest dostępne bezpłatnie na licencji GPL, zamiast stanowić część płatnej licencji.

### Jakie języki szablonów są obsługiwane?

PHP działa od razu po instalacji, Twig uruchamia się po zainstalowaniu timber/timber, a Blade działa przez illuminate/view od 8 do 12 i krótki filtr renderowania wywołujący Blockstudio\Blade_Renderer. Wszystkie trzy otrzymują te same zmienne i komponenty, a Blade może też renderować strony, wzorce i szablony edytora witryny.

### Czy mogę rozszerzać istniejące bloki?

Tak. Rozszerzenia dodają pola do bloków podstawowych, firm zewnętrznych lub niestandardowych, w tym do całych przestrzeni nazw za pomocą symboli wieloznacznych.

### Jak działa potok zasobów?

Stosuj konwencje nazewnictwa, takie jak style.scss, script.js i editor.css. Blockstudio kompiluje, ogranicza zakres i dodaje je do kolejki, a także minifikuje je po włączeniu minifikacji.

### Czy obsługuje IDE?

Tak. JSON Schema zapewnia autouzupełnianie, dokumentację w tekście i walidację w zgodnych edytorach.

### Jakie są wymagania?

WordPress 6.7 lub nowszy oraz PHP 8.2 lub nowszy.

### Czy Blockstudio jest bezpłatne?

Tak. Blockstudio jest bezpłatne i ma otwarty kod źródłowy; obejmuje rozszerzenia, wszystkie typy pól, zasoby, strony i wzorce.

Plus

## Oficjalny zestaw rozszerzeń

Wysokiej jakości szablony witryn, systemowe instrukcje AI i prywatna społeczność Discord. Jednorazowy zakup, dożywotnie aktualizacje.

- 500+ szablonów stron
- Instrukcje systemowe AI
- Dożywotnie aktualizacje
- Prywatna społeczność Discord

[Uzyskaj Plus](https://blockstudio.dev/pl/plus/)