Ogrodje blokov
za WordPress
Bloki po meri iz navadnih datotek. Polja določite v JSON, predloge napišite v PHP, Twig ali Blade. Korak gradnje ni potreben.
composer require blockstudio/blockstudioBloki
Z JSON ustvarite bloke po meri s predlogami PHP, Twig ali Blade. 27 vrst polj, brez koraka gradnje.
Strani
Zapišite celotne strani WordPress kot datoteke predlog in jih z enim ukazom sinhronizirajte v izvorne bloke.
Vzorci
Ponovno uporabne vzorce blokov določite kot datoteke predlog; v vstavljalniku se registrirajo samodejno.
Razširitve
Dodajte polja po meri kateremu koli bloku, osnovnemu, drugega ponudnika ali svojemu, z eno datoteko JSON.
Vrste polj
27 vgrajenih vrst, vključno s ponavljalniki, izbirniki barv, urejevalniki kode in predstavnostjo, ter vrste polj, ki jih registrirate sami.
Obdelava sredstev
Prevajanje SCSS, moduli ES, slogi z omejenim obsegom in izbirna pomanjšava – vse na podlagi poimenovanja.
JSON Schema
Popolno samodejno dopolnjevanje in preverjanje v IDE za konfiguracije blokov, razširitev in nastavitev.
Predloge
Predloge pišite v PHP, Twig ali Blade z omejenim obsegom sredstev, ugnezdenimi InnerBlocks in spremenljivkami predlog.
Blockstudio temeljito razširja osnovni način gradnje blokov. Definicije JSON, predloge PHP, omejena sredstva. Nič drugega kot datoteke, pripravljene za agente, ki bodo zgradili naslednje.
Bloki po meri v 3 datotekah
Polja določite v block.json, izrišite jih v predlogi in jih oblikujte z CSS ali SCSS. Brez JavaScript, koraka gradnje ali odvečne kode.
{
"name": "starter/hero",
"title": "Hero",
"blockstudio": {
"attributes": [
{ "id": "heading", "type": "text" },
{ "id": "showCta", "type": "toggle" },
{ "id": "background", "type": "color" }
]
}
}<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>.hero {
padding: 4rem 2rem;
h1 {
font-size: 3rem;
font-weight: 700;
}
a {
padding: 0.75rem 1.5rem;
color: #fff;
background: #18181b;
}
}Funkcije React, predloge PHP
Izvorne komponente urejevalnika WordPress, kot sta RichText in InnerBlocks, so neposredno dostopne v predlogah PHP. Brez JavaScript in koraka gradnje.
Vse v isti datoteki
Za urejanje v vrstici v urejevalniku blokov uporabite <RichText />, na vmesniku pa statični HTML. <InnerBlocks /> upravlja ugnezdene podrejene bloke, useBlockProps pa označuje ovoj bloka.
Blockstudio samodejno poskrbi za integracijo urejevalnika. V urejevalniku postanejo prave komponente React. Na vmesniku se izrišejo kot navaden strežniški HTML.
<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>Predloge pišite v PHP, Twig ali Blade
Uporabite jezik za predloge, ki ga že poznate. Vsi trije uporabljajo iste spremenljivke, komponente in funkcije. JavaScript ni potreben.
Iste spremenljivke v vsakem jeziku
Do atributov dostopajte prek $a, do podatkov bloka prek $b in do konteksta nadrejenega bloka prek $c. Zastavice, kot je $isEditor, uporabite za prilagoditev izhoda posameznemu okolju.
V predlogah neposredno uporabite <InnerBlocks />, <RichText /> in <MediaPlaceholder />, ne da bi pisali JavaScript.
<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><section class="hero">
<h1>{{ a.heading|esc_html }}</h1>
<p>{{ a.description|esc_html }}</p>
{% if a.showCta %}
<a href="{{ a.ctaUrl|esc_url }}">
{{ a.ctaLabel|esc_html }}
</a>
{% endif %}
<InnerBlocks />
</section><section class="hero">
<h1>{{ $a['heading'] }}</h1>
<p>{{ $a['description'] }}</p>
@if($a['showCta'])
<a href="{{ esc_url($a['ctaUrl']) }}">
{{ $a['ctaLabel'] }}
</a>
@endif
<InnerBlocks />
</section>Celotne strani, določene v kodi
Iz datotek predlog ustvarite celotne strani WordPress. HTML preslika v osnovne bloke, en ukaz pa jih sinhronizira z urejevalnikom.
Pišite HTML, ustvarite bloke
Standardni elementi, kot so <h1>, <p> in <ul>, se samodejno preslikajo v osnovne bloke. Za vse drugo uporabite <block>.
V svoji kodni zbirki določite celotne postavitve. Ko zaženete wp bs pages sync, Blockstudio razčleni predloge v prave strani WordPress z resničnimi bloki, ki jih je mogoče v celoti urejati v urejevalniku blokov.
<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>Izrecna sinhronizacija
Za uveljavitev sprememb predlog zaženite wp bs pages sync. Nespremenjene strani ne zahtevajo nobenega zapisovanja.
Zaklepanje predlog
Zaklenite strukturo, medtem ko stranke urejajo vsebino. Idealno za pristajalne strani in trženjska spletna mesta.
Bloki s ključi
Dodelite ključe, da se uporabniške spremembe ohranijo tudi po posodobitvah predlog. Sinhronizirajte strukturo, ohranite vsebino.
Pod nadzorom različic
Strani so shranjene v datotekah. Sledite spremembam v Git, uvedite okolja in jih pregledujte v zahtevkih za združitev.
Ponovno uporabni vzorci iz datotek predlog
Vzorce blokov določite kot datoteke predlog. Enaka sintaksa HTML kot pri straneh, samodejna registracija v vstavljalniku blokov.
Datoteke predlog namesto registracijske kode
Ustvarite mapo z pattern.json in datoteko predloge. Blockstudio samodejno registrira vzorec, brez osnovne kode register_block_pattern().
Vzorci se vstavijo kot pravi bloki, ki jih je mogoče urejati. Uporabniki dobijo začetno postavitev, ki jo lahko prilagodijo, vi pa predloge vzdržujete v sistemu za nadzor različic.
<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>Enaka sintaksa kot pri straneh
Standardni HTML se preslika v osnovne bloke; oznaka bloka poskrbi za vse drugo.
Samodejno registrirano
Dodajte predlogo in pattern.json. Blockstudio jo samodejno registrira.
Popolnoma prilagodljivo
Vzorci se vstavijo kot urejevalna vsebina blokov in jih je mogoče prilagoditi za vsak primerek.
Razvrščeno po kategorijah in iskano
Kategorije in ključne besede olajšajo iskanje vzorcev v vstavljalniku.
Prilagodljiva preslikava elementov
Določite, v kateri blok se preslika kateri koli element HTML. Standardne oznake, kot so h1, p in img, usmerite v lastne vrste blokov.
Preslikajte HTML v bloke po meri
Standardni HTML se privzeto preslika v osnovne bloke WordPress. S filtrom element_mapping lahko kateri koli element usmerite v drugo vrsto bloka. Vsak <h1> lahko namesto core/heading ustvari vaš blok po meri.
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;
}
);Dodajte polja kateremu koli bloku
Razširite osnovne bloke, bloke drugih ponudnikov ali lastne bloke s polji po meri. Samo JSON, brez predlog in kode.
Polja po meri, nič predlog
Ustvarite datoteko JSON, ciljajte blok z name in določite polja. Lastnost set preslika vrednosti polj neposredno v razrede, sloge, podatkovne atribute ali kar koli drugega.
Brez predlog in povratnih klicev za upodabljanje. Blockstudio samodejno poskrbi za izhod z uporabo procesorja oznak WordPress HTML.
{
"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}"
}]
}
]
}
}Ciljajte kateri koli blok
Razširite en blok, seznam ali celoten imenski prostor z nadomestnimi znaki, kot je core/*.
Lastnost set
Vrednosti polj preslikajte neposredno v razrede, sloge, podatkovne atribute ali kateri koli atribut HTML.
Pogojna polja
Prikažite in skrijte polja glede na druge vrednosti z enakimi operatorji, kot jih uporabljajo bloki.
Celoten nabor funkcij
Vse vrste polj, pogojna logika, vnaprej izpolnjeni viri in lastnosti za ponovno uporabo.
Na voljo imate 27 vrst polj
Od osnovnih besedilnih polj do ponavljalnikov in zavihkov, pa tudi polja, usmerjena v DOM, kot so razredi in podatkovni atributi. Dodajte še svoje vrste.
Cevovod za sredstva brez konfiguracije
Prevajanje SCSS, uvozi modulov ES in neobvezno zmanjšanje velikosti, vse po dogovoru o poimenovanju. Brez webpacka in brez Vite.
Poimenujte datoteke, Blockstudio poskrbi za vse drugo
Datoteko style.scss dodajte poleg bloka; samodejno se prevede in doda v čakalno vrsto. Enako velja za script.js, ki podpira module ES in neposredne uvoze npm. Zmanjšanje velikosti je oddaljeno le eno nastavitev.
Sredstva imajo obseg posameznega bloka in se naložijo samo, ko so potrebna. Za sredstva, namenjena samo urejevalniku, uporabite editor.*, za neposredno vstavljanje na stran pa *.inline.*.
$accent: var(--wp--preset--color--primary);
.hero {
padding: 4rem 2rem;
h1 { color: $accent; font-size: clamp(2rem, 5vw, 4rem); }
&--dark { background: #0a0a0a; }
}import gsap from "npm:gsap@3.12.5";
if (!matchMedia("(prefers-reduced-motion: reduce)").matches) {
for (const hero of document.querySelectorAll(".hero")) {
gsap.from(hero.querySelector("h1"), { opacity: 0, y: 20 });
gsap.from(hero.querySelectorAll(".card"), { opacity: 0, stagger: 0.1 });
}
}Prevajanje SCSS
Pišite vgnezdeno kodo, spremenljivke in mešanice. Blockstudio jo prevede namesto vas.
Uvozi modulov ES
Neposredno uvozite pakete npm. Blockstudio jih prenese in ponudi lokalno.
Pravilo poimenovanja
style.scss, script.js, editor.css. Poimenujte datoteko in končano.
Omejeno na obseg in vstavljeno neposredno
Sredstva se naložijo samo, ko je blok prisoten; z dogovorom o poimenovanju datotek jih lahko vstavite neposredno.
Tailwind v4, prevedeno v PHP
V predloge pišite razrede pripomočkov. Blockstudio jih prevede na strežniku prek TailwindPHP in jih samodejno predpomni v datoteke.
Ena nastavitev, brez orodij
V blockstudio.json nastavite tailwind.enabled na true in pišite razrede pripomočkov. Blockstudio prevede CSS na strežniku, ga predpomni in vstavi brez Node.js.
Uporabite blockstudio/tailwind/css za določanje tem, pripomočkov in različic s sintakso, ki najprej uporablja Tailwind v4 CSS. Polje classes omogoča samodokončanje v urejevalniku.
add_filter('blockstudio/tailwind/css', function ($css) {
return $css . '
@theme { --color-accent: #4f46e5; }
@utility container-narrow {
max-width: 48rem;
margin-inline: auto;
}
';
});<section class="bg-accent px-6 py-20">
<div class="container-narrow">
<h2 class="text-4xl font-bold text-white">
<?= esc_html($a['heading']) ?>
</h2>
<p class="mt-4 text-lg text-white/80">
<?= esc_html($a['description']) ?>
</p>
</div>
</section>Prevajanje na strani strežnika
TailwindPHP prevede razrede, ki jih uporablja vsaka stran. Brez Node.js ali koraka gradnje.
Samodejno predpomnjenje
Prevedeni CSS se predpomni na disk glede na nabor razredov, da so ponovne zahteve hitre.
Konfiguracija z CSS na prvem mestu
Teme, pripomočke in različice določite neposredno s Tailwind v4 CSS.
Predogled v urejevalniku v živo
Takojšnji predogled v urejevalniku, medtem ko frontend uporablja strežniško prevedeni CSS.
Vključene komponente
Paket Blockstudio vključuje 59 komponent UI, pripravljenih za sestavljanje v vaših predlogah.
Interaktivni elementi kot oznake blokov
Z vklopom ui.enabled in Blockstudio se pod imenskim prostorom bsui registrira 59 brezglavih komponent: pogovorna okna, meniji, zavihki, kombinirana polja, vnosi datuma in datotek, obvestila in še več; poganja jih WordPress Interactivity API.
Zapišite jih kot oznake blokov v kateri koli predlogi, na strani ali v vzorcu, izrišite jih iz PHP ali dovolite, da jih bsui/* pod blockTags uporabi v vsebini objave. Vsaka od njih je običajen blok z lastnim block.json, ki deluje tako na platnu urejevalnika kot na strani, stran pa naloži CSS in JS samo tistih komponent, ki jih izriše.
Kontrolniku obrazca določite name in izriše skriti vnos, tako da okoliški obrazec pošlje preproste vrednosti brez lastnega JavaScript. Izbirniki, meniji in pogovorna okna uporabljajo prave vzorce ARIA, s puščičnimi tipkami, sprotnim iskanjem po vnosu in ostrenjem, ki ostane znotraj odprtega modalnega okna.
Oblikovanje uporablja žetone --bs-ui-*, za razredom .dark pa je na voljo popolna temna barvna shema; vse je znotraj kaskadnega sloja bsui, zato imajo navadna pravila teme CSS prednost brez oznak important ali zapletanja s specifičnostjo. S filtrom komponenti dodajte lastno različico, v priloženih predstavitvenih aplikacijah app/* pa si oglejte, kako so komponente sestavljene v večje vmesnike.
<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>{
"ui": {
"enabled": true
},
"blockTags": {
"enabled": true,
"allow": ["bsui/*"]
}
}body {
--bs-ui-primary: oklch(0.45 0.18 260);
--bs-ui-primary-foreground: oklch(0.985 0 0);
--bs-ui-ring: oklch(0.45 0.18 260);
--bs-ui-radius: 0.75rem;
}
[data-bsui-button][data-variant="default"] {
border-radius: 0;
}add_filter('blockstudio/blocks/attributes', function ($attribute, $block) {
if (($block['name'] ?? '') === 'bsui/button' && ($attribute['id'] ?? '') === 'variant') {
$attribute['options'][] = ['label' => 'Brand', 'value' => 'brand'];
}
return $attribute;
}, 10, 2);
add_filter('blockstudio/ui/button/variants-style', function ($css) {
return $css . '
[data-bsui-button][data-variant="brand"] {
background: var(--brand-primary);
color: white;
}';
});Ustvarjeno za razvijalce
Zmogljive funkcije, s katerimi je gradnja in vzdrževanje zapletenih blokov preprosto.
Prilagodljivo shranjevanje
Vrednosti shranjujte v metapodatke objave, možnosti ali oboje. Bloke poizvedujte po metapodatkih in podatke izpostavite prek REST.
Pogojna logika
Prikazujte polja glede na vrednosti z operatorji za primerjavo, vgnezdenimi pogoji in globalnimi pravili.
Več kot 130 kavljev PHP in JS
Filtri in dejanja za registracijo, polja, sredstva, nastavitve in izhod.
JSON Schema
Samodejno dopolnjevanje, vgrajena dokumentacija in preverjanje v VS Code in JetBrains.
Kontekst API
Delite deklarirane podatke med nadrejenimi in vgnezdenimi podrejenimi bloki.
Integracija umetne inteligence
Kazalo dokumentacije za kodirne agente in ustvarjeni AGENTS.md za vaš projekt.
Integracija SEO
Samodejno vstavljanje vsebine za Yoast, Rank Math in SEOPress.
Programski izris
Upodobite bloke iz PHP in jih uporabite kot komponente zunaj urejevalnika.
Polja po meri
Enkrat določite nabore polj za ponovno uporabo in se nanje sklicujte v različnih blokih.
Pretvorbe blokov
Pretvarjajte bloke ter dodajte bližnjice za vstavljanje ob pritisku tipke Enter ali s predpono.
Dinamične možnosti
Možnosti pridobite iz objav, izrazov, uporabnikov, funkcij ali API-jev.
Pripomočki HTML
Podatkovne atribute ali spremenljivke CSS upodobite v ovoju bloka.
Vtičnik, MU-vtičnik ali Composer
Namestite datoteko ZIP vtičnika, naložite ga kot obvezni vtičnik ali ga vključite z Composer v temo ali vtičnik. Bedrock ga lahko vključuje zgodaj, BLOCKSTUDIO_URL pa podpira URL-je paketov po meri.
Posodobitve brez sporov
Priložene knjižnice, kot so TailwindPHP, ScssPhp in Minify, so zasebne kopije z lastnim imenskim prostorom, zato nikoli ne zamenjajo različic drugih vtičnikov. Namestitve iz datotek ZIP se posodabljajo iz izdaj GitHub, po želji tudi z žetonom za dostop.
Nadgradnja z v6 na v7
Bloki, napisani za v6, še naprej delujejo: stara uvozna predpona blockstudio/, imena kavljev v camelCase in pripone sredstev z vezajem so še vedno podprti. Vodnik za selitev opisuje spremembe.
Orodja za razvoj
Vgrajena orodja za pregledovanje, odpravljanje napak in razvoj z UI.
Canvas
Pregled vseh upravljanih strani v slogu Figma. Premikajte se, povečujte in pregledujte spletno mesto v enem pogledu.
admin.php?page=blockstudio-canvasElement Grabber
Na katerem koli elementu pridržite Cmd+C, da kopirate njegovo označevalno kodo in pot do predloge bloka. Ta kontekst prilepite v urejevalnik z UI.
?blockstudio-devtoolsUstvarjeno za agente
Dokumentacija, ki jo agent lahko indeksira, pogodba za vaš projekt in analiza, ki zavrne neustrezno vsebino.
Kazalo, pogodba in nadzor
Blockstudio vključuje blockstudio-llm.txt, kazalo vsakega dokumenta z njegovo potjo, namenom in identifikatorji, za katere je odgovoren, ter blockstudio-llm-full.txt s celotnim besedilom. Agent prebere kazalo in nato odpre samo stran, ki jo potrebuje.
V vašem projektu blockstudio-agents iz vaših datotek in nastavitev ustvari AGENTS.md, blockstudio-phpstan pa zažene izbrano prednastavitev, po želji tudi iz upravljanega kavlja za potrjevanje objave.
## 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# Write AGENTS.md from this project's files and settings
vendor/bin/blockstudio-agents
# Analyse with the preset set in blockstudio.json
vendor/bin/blockstudio-phpstan -- --no-progress
# Install the managed pre-commit hook
vendor/bin/blockstudio-githooks syncNajprej kazalo
Vsak dokument z njegovo potjo, namenom in identifikatorji, v približno 11k žetonih.
Celotno besedilo na zahtevo
Vsa dokumentacija in sheme JSON v eni datoteki, približno 164k žetonov.
Ustvarjeni AGENTS.md
blockstudio-agents opisuje, kaj avtorji vašega projekta ustvarijo, omogočijo in zavrnejo.
Prednastavitve analize
base, theme in extreme-theme vsebujejo predloge za block.json in drugo.
Bloki za celoten sklad
Celotne aplikacije gradite v mapi bloka. Baza podatkov, strežniška logika, načrtovana opravila in CLI, vse iz datotek.
Dodajte datoteko in pridobite API
Dodajte db.php, da določite podatkovni model. Blockstudio ustvari končne točke REST, preverja vhodne podatke, upravlja shranjevanje ter ponuja API-ja JavaScript in PHP.
Dodajte rpc.php za strežniške funkcije in cron.php za načrtovana opravila. Vsaka datoteka opravlja eno nalogo, brez krmilnikov ali orodij za gradnjo.
<?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],
],
];Strežniške funkcije v eni vrstici
Določite funkcije PHP v rpc.php in jih pokličite z bs.fn(). Blockstudio poskrbi za usmerjanje, preverjanje pristnosti, zaščito CSRF in serializacijo JSON.
<?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];
},
];Podatkovna zbirka
CRUD, določen s shemo, v 6 načinih shranjevanja: table, sqlite, jsonc, storh, meta, post_type.
RPC
Strežniške funkcije, ki jih je mogoče poklicati iz frontenda z bs.fn().
Cron
Načrtovana opravila v cron.php, registrirana z WP-Cron.
CLI
Upravljajte bloke, strani, zapise, RPC, opravila cron in nastavitve z wp bs.
Zaščita CSRF
Javne končne točke so samodejno zaščitene, način odprtega dostopa pa je treba izrecno omogočiti.
Omejevanje na uporabnika
Samodejno ločite podatke posameznih uporabnikov brez ročnih filtrov za lastništvo.
Prenosljivost
Z SQLite ali JSONC potujejo koda in podatki skupaj v eni mapi.
Komponente
Programske komponente UI uporabljajo celoten cevovod Blockstudio.
Statično, kadar je mogoče
Vklopite statično predhodno upodabljanje, da anonimni obiskovalci prejmejo shranjene strani HTML, medtem ko vse osebno ostane v živo.
Izklopljeno, dokler ne omogočite
performance.staticPrerender v blockstudio.json to vklopi.
Preden se zažene WordPress
Ko je earlyServe vklopljen, dodatna komponenta pošlje shranjene strani, še preden se naloži WordPress.
Sveže po shranjevanju
Ob shranjevanju objave se njena shranjena stran in naslovna stran odstranita iz predpomnilnika ali znova upodobita.
V živo tam, kjer je treba
Zahteve prijavljenih uporabnikov, iskanje in dynamicPaths se privzeto upodabljajo sproti.
Vprašanja in odgovori
Vse, kar morate vedeti o Blockstudio. Ne najdete odgovora? Vprašajte na GitHub.
Kaj je Blockstudio?
Vtičnik WordPress, ki omogoča gradnjo blokov po meri z JSON in datoteko predloge. Določite polja in napišite označevalno kodo brez orodij React.
Ali moram poznati JavaScript?
Ne. Če znate pisati HTML in obvladate osnove PHP, lahko gradite bloke. Blockstudio poskrbi za notranjost urejevalnika.
Ali deluje z mojo temo?
Da. Bloki uporabljajo izvorni blok WordPress API in delujejo s katero koli temo, združljivo z bloki.
V čem se to razlikuje od blokov ACF?
ACF PRO prav tako registrira bloke prek block.json in izrisuje predloge PHP z InnerBlocks, od ACF PRO 6.8.1 pa lahko tam določi tudi polja bloka. Blockstudio samodejno najde mape blokov brez klica register_block_type(), izrisuje PHP, Twig ali Blade, prevede sloge in skripte vsakega bloka, v predloge doda RichText, podpira strani, vzorce in razširitve na osnovi datotek ter je brezplačen po licenci GPL, namesto da bi bil del plačljive licence.
Kateri jeziki za predloge so podprti?
PHP deluje takoj, Twig, ko namestite timber/timber, Blade pa prek illuminate/view 8 do 12 in kratkega filtra za izris, ki pokliče Blockstudio\Blade_Renderer. Vsi trije dobijo enake spremenljivke in komponente, Blade pa lahko izriše tudi strani, vzorce in predloge urejevalnika spletnega mesta.
Ali lahko razširim obstoječe bloke?
Da. Razširitve dodajo polja jedrnim blokom, blokom drugih ponudnikov ali blokom po meri, tudi celotnim imenskim prostorom prek nadomestnih znakov.
Kako deluje cevovod sredstev?
Uporabite dogovore o poimenovanju, kot so style.scss, script.js in editor.css. Blockstudio jih prevede, omeji in doda v čakalno vrsto; pomanjša pa jih, ko vklopite pomanjševanje.
Ali je na voljo podpora za IDE?
Da. JSON Schema v združljivih urejevalnikih omogoča samodokončanje, dokumentacijo v vrstici in preverjanje veljavnosti.
Kakšne so zahteve?
WordPress 6.7 ali novejši in PHP 8.2 ali novejši.
Ali je Blockstudio brezplačen?
Da. Blockstudio je brezplačen in odprtokoden; vključuje razširitve, vse vrste polj, sredstva, strani in vzorce.
Uradni komplet razširitev
Vrhunske predloge spletnih mest, sistemska navodila za UI in zasebna skupnost Discord. Enkratni nakup, posodobitve za vedno.
- Več kot 500+ predlog spletnih mest
- Sistemska navodila za UI
- Doživljenjske posodobitve
- Zasebna skupnost Discord