Przejdź do treści
NoweBlockstudio 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
Pobierz v7.7.12 (otwiera się w nowej karcie)

Bloki

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

Strony

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

Wzorce

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

Rozszerzenia

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

Typy pól

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

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

JSON Schema

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

Szablony

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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

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

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

JSON Schema

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

Kontekst API

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

Integracja AI

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

Integracja z SEO

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

Renderowanie programowe

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

Pola niestandardowe

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

Przekształcenia bloków

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

Opcje dynamiczne

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

Narzędzia HTML

Renderuj atrybuty danych lub zmienne CSS na opakowaniu bloku.

Wtyczka, wtyczka MU lub 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

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

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

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

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.

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.

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

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

RPC

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

Cron

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

CLI

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

Ochrona CSRF

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

Zakres danych użytkownika

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

Przenośność

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

Komponenty

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

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

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