コンテンツへスキップ
新規Blockstudio 7.7

WordPress向け
ブロック基盤

通常のファイルからカスタムブロックを作成。JSONでフィールドを定義し、PHP、Twig、またはBladeでテンプレートを記述できます。ビルド工程は不要です。

ターミナル
composer require blockstudio/blockstudio
はじめる
v7.7.12をダウンロード (新しいタブで開きます)

ブロック

JSONとPHP、Twig、Bladeのテンプレートで独自ブロックを作成。27種類のフィールドに対応し、ビルド工程は不要。

ページ

完全なWordPressページをテンプレートファイルとして記述し、1つのコマンドで標準ブロックに同期。

パターン

再利用可能なブロックパターンをテンプレートファイルで定義すると、インサーターに自動登録されます。

拡張機能

1つのJSONファイルで、コア、サードパーティ、自作を問わずあらゆるブロックに独自のフィールドを追加できます。

フィールドタイプ

リピーター、カラーピッカー、コードエディター、メディアなどの組み込み型が27種類。登録したフィールド型も利用可能。

アセット処理

SCSSのコンパイル、ESモジュール、スコープ付きスタイル、任意の圧縮を命名規則だけで実現。

JSON Schema

ブロック、拡張機能、設定の構成で、IDEによる完全な自動補完と検証に対応。

テンプレート作成

PHP、Twig、Bladeで、スコープ付きアセット、入れ子のInnerBlocks、テンプレート変数を使ってテンプレートを作成。

Blockstudioは、ブロック構築の基本的な仕組みを大幅に拡張します。JSON定義、PHPテンプレート、スコープ付きアセット。必要なのはファイルだけ。これからの開発を担うエージェントにも対応します。

3ファイルで独自ブロックを作成

block.jsonでフィールドを定義し、テンプレートで表示。CSSまたはSCSSでスタイルを設定。JavaScriptもビルド工程も定型コードも不要。

使い始める
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;
  }
}

Reactの機能、PHPテンプレート

RichTextやInnerBlocksなどの標準WordPressエディターコンポーネントを、PHPテンプレートから直接利用できます。JavaScriptもビルド工程も不要。

すべてが同じファイル内に

ブロックエディターでのインライン編集には<RichText />、フロントエンドの静的HTMLには<InnerBlocks />を使用します。useBlockPropsは入れ子の子ブロックを扱い、ブロックラッパーを指定します。

Blockstudioがエディターとの連携を自動処理します。エディターでは本物のReactコンポーネントとして表示され、フロントエンドではサーバーサイドのHTMLとしてレンダリングされます。

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>

PHP、Twig、Bladeでテンプレートを作成

使い慣れたテンプレート言語を使用できます。3つとも同じ変数、コンポーネント、機能を利用でき、JavaScriptは不要です。

どの言語でも同じ変数

$aで属性、$bでブロックデータ、$cで親コンテキストにアクセスできます。$isEditorなどのフラグで環境に合わせた出力が可能です。

<InnerBlocks />、<RichText />、<MediaPlaceholder />をテンプレートで直接使えるため、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>

コードで定義する完全なページ

テンプレートファイルから完全なWordPressページを作成。HTMLはコアブロックに対応し、1つのコマンドでエディターに同期できます。

HTMLを書いてブロックを作成

<h1>、<p>、<ul>などの標準要素はコアブロックに自動対応します。それ以外は<block>を使います。

コードベースで完全なレイアウトを定義します。wp bs pages syncを実行すると、Blockstudioがテンプレートを実際のブロックを含むWordPressページに変換し、ブロックエディターで完全に編集できるようにします。

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>

明示的な同期

wp bs pages syncを実行してテンプレートの変更を反映します。変更のないページへの書き込みは発生しません。

テンプレートのロック

クライアントがコンテンツを編集できる状態で構造をロック。ランディングページやマーケティングサイトに最適です。

キー付きブロック

キーを割り当てると、テンプレート更新後もユーザーの編集内容が保持されます。構造を同期し、コンテンツは維持します。

バージョン管理に対応

ページはファイルとして保存されます。Gitで変更を追跡し、環境にデプロイして、PRでレビューできます。

テンプレートファイルから再利用可能なパターンを作成

テンプレートファイルでブロックパターンを定義します。ページと同じHTML構文を使い、ブロックインサーターに自動登録されます。

テンプレートファイルでパターンを登録

pattern.jsonを含むフォルダーとテンプレートファイルを作成します。Blockstudioがパターンを自動登録するため、register_block_pattern()の定型コードは不要です。

パターンは、編集可能な通常のブロックとして挿入されます。ユーザーはカスタマイズできるレイアウトを使い、あなたはテンプレートをバージョン管理できます。

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>

ページと同じ構文

標準のHTMLはコアブロックに対応し、それ以外はブロックタグで処理します。

自動登録

テンプレートを配置してpattern.json。Blockstudioが自動登録します。

完全に編集可能

パターンは編集可能なブロックコンテンツとして挿入され、各インスタンスでカスタマイズできます。

分類と検索に対応

カテゴリーとキーワードを使って、インサーターからパターンを簡単に見つけられます。

カスタマイズ可能な要素マッピング

HTML要素のマッピング先となるブロックを変更できます。h1、p、imgなどの標準タグを独自のブロックタイプに割り当てられます。

HTMLをカスタムブロックにマッピング

標準では、HTMLはコアのWordPressブロックにマッピングされます。element_mappingフィルターを使うと、任意の要素を別のブロックタイプに割り当てられます。すべての<h1>で、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;
  }
);

あらゆるブロックにフィールドを追加

コア、サードパーティ製、自作のブロックをカスタムフィールドで拡張できます。純粋なJSONで、テンプレートもコードも不要です。

カスタムフィールド、テンプレート不要

JSONファイルを作成し、nameでブロックを指定してフィールドを定義します。setプロパティを使うと、フィールドの値をクラス、スタイル、data属性などに直接マッピングできます。

テンプレートもレンダリングコールバックも不要です。BlockstudioがWordPressHTMLTag Processorを使って出力を自動処理します。

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}"
        }]
      }
    ]
  }
}

任意のブロックを対象に

core/*のようなワイルドカードを使って、1つのブロック、リスト、または名前空間全体を拡張できます。

setプロパティ

フィールドの値をクラス、スタイル、data属性、または任意のHTML属性に直接マッピングできます。

条件付きフィールド

ブロックで使われるものと同じ演算子を使い、他の値に応じてフィールドを表示または非表示にできます。

すべての機能を搭載

すべてのフィールドタイプ、条件分岐、値の自動入力元、再利用可能なプロパティを利用できます。

27種類のフィールドタイプを利用可能

基本的なテキストフィールドからリピーターやタブまで、クラスやdata属性などDOM向けのフィールドも揃っています。独自のタイプも登録できます。

フィールドタイプを見る
attributesblockcheckboxclassescodecolordatedatetimefilesgradientgrouphtml-tagiconlinkmessagenumberradiorangeselecttabstexttextareatogglerepeaterrichtextunitwysiwyg
colordatedatetimefilesgradientgrouphtml-tagiconlinkmessagenumberradiorangeselecttabstexttextareatogglerepeaterrichtextunitwysiwygattributesblockcheckboxclassescode
grouphtml-tagiconlinkmessagenumberradiorangeselecttabstexttextareatogglerepeaterrichtextunitwysiwygattributesblockcheckboxclassescodecolordatedatetimefilesgradient

設定不要のアセットパイプライン

SCSSのコンパイル、ESモジュールのインポート、任意の圧縮をすべてファイル名の規則で実現。webpackもViteも不要です。

ファイル名を付ければ、あとはBlockstudioにお任せ

style.scssをブロックの隣に置くだけで、自動的にコンパイルされて読み込まれます。script.jsも同様で、ESモジュールに対応し、npmを直接インポートできます。設定ひとつで圧縮も可能です。

アセットはブロックごとに管理され、必要な場合のみ読み込まれます。エディター専用アセットにはeditor.*を、ページ内にインライン化するには*.inline.*を使います。

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

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

SCSSのコンパイル

ネスト、変数、ミックスインを記述すれば、Blockstudioがコンパイルします。

ESモジュールのインポート

npmパッケージを直接インポートできます。Blockstudioがダウンロードしてローカルで提供します。

命名規則

style.scss、script.js、editor.css。ファイル名を付ければ完了です。

ブロックごとに適用、インライン化にも対応

アセットはブロックがある場合にのみ読み込まれます。ファイル名の規則を使ってインライン化できます。

PHPでコンパイルするTailwind v4

テンプレートにユーティリティクラスを記述すると、BlockstudioがTailwindPHP経由でサーバー側コンパイルします。ファイルへの自動キャッシュにも対応しています。

設定ひとつでツール不要

blockstudio.jsonでtailwind.enabledをtrueに設定し、ユーティリティクラスを記述します。BlockstudioがCSSをサーバー側でコンパイルしてキャッシュし、Node.jsなしで挿入します。

blockstudio/tailwind/cssを使って、Tailwind v4のCSS優先構文でテーマ、ユーティリティ、バリアントを定義できます。classesフィールドではエディターの自動補完を利用できます。

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

サーバー側でコンパイル

TailwindPHPが各ページで使用するクラスをコンパイルします。Nodeもビルド工程も不要です。

キャッシュの自動管理

コンパイル済みのCSSはクラスセットごとにディスクへキャッシュされるため、繰り返しのリクエストを高速に処理できます。

CSSを優先する設定

Tailwind v4のCSSで、テーマ、ユーティリティ、バリアントを直接定義できます。

エディターでライブプレビュー

エディターで即時にプレビューしながら、フロントエンドではサーバー側でコンパイルされたCSSを使用します。

収録コンポーネント

59個のUIコンポーネントがBlockstudioに含まれており、テンプレート内で組み合わせて使えます。

インタラクティブな機能をブロックタグで利用

ui.enabledを有効にすると、Blockstudioがbsui名前空間に59個のヘッドレスコンポーネントを登録します。ダイアログ、メニュー、タブ、コンボボックス、日付・ファイル入力、トーストなどをWordPressInteractivityAPIで動作させます。

任意のテンプレート、ページ、パターンでブロックタグとして記述し、PHPからレンダリングするか、blockTags内のbsui/*を許可して投稿コンテンツで使えるようにします。それぞれが独自のblock.jsonを持つ通常のブロックで、エディターキャンバスとページの両方で動作します。また、ページはレンダリングするコンポーネントのCSSとJSだけを読み込みます。

フォームコントロールにnameを指定すると、hidden inputがレンダリングされ、周囲のフォームは独自のJavaScriptなしで通常の値を送信できます。セレクト、メニュー、ダイアログは適切なARIAパターンに従い、矢印キー、タイプ入力による検索、開いているモーダル内に留まるフォーカスに対応しています。

スタイリングには--bs-ui-*トークンを使い、.darkクラスの背後に完全なダークスキームを用意しています。すべてbsuiカスケードレイヤー内にあるため、importantフラグや詳細度の調整をしなくても、通常のテーマCSSが優先されます。フィルターを使ってコンポーネントに独自のバリアントを追加し、同梱のapp/*デモアプリでコンポーネントを組み合わせた大規模なインターフェースを確認できます。

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>

開発者のための機能

複雑なブロックの構築と保守をシンプルにする強力な機能。

柔軟なストレージ

値は投稿メタ、オプション、または両方に保存できます。メタでブロックをクエリし、REST経由でデータを公開できます。

条件付きロジック

比較演算子、ネストした条件、グローバルルールを使い、値に応じてフィールドを表示できます。

130以上のPHPとJSフック

登録、フィールド、アセット、設定、出力に使えるフィルターとアクションを用意しています。

JSON Schema

VS CodeとJetBrainsで、自動補完、インラインドキュメント、検証を利用できます。

コンテキストAPI

親ブロックとネストした子ブロックの間で、宣言済みデータを共有できます。

AI連携

コーディングエージェント向けのドキュメント索引と、プロジェクト用に生成されたAGENTS.md。

SEO連携

Yoast、Rank Math、SEOPress向けにコンテンツを自動挿入します。

プログラムによるレンダリング

PHPからブロックをレンダリングし、エディター外でもコンポーネントとして使えます。

カスタムフィールド

再利用可能なフィールドセットを一度定義すれば、複数のブロックから参照できます。

ブロック変換

ブロックを変換し、Enterキーまたは接頭辞による挿入ショートカットを追加できます。

動的オプション

投稿、ターム、ユーザー、関数、APIから選択肢を取得できます。

HTMLユーティリティ

ブロックのラッパーにdata属性またはCSS変数を出力できます。

プラグイン、MUプラグイン、またはComposer

プラグインのzipをインストールするか、must-useプラグインとして読み込むか、テーマまたはプラグイン内でComposerを使って読み込みます。Bedrockで早い段階で組み込め、BLOCKSTUDIO_URLでカスタムパッケージURLに対応できます。

競合のないアップデート

TailwindPHP、ScssPhp、Minifyなどの同梱ライブラリは、名前空間を分けた非公開コピーなので、他のプラグインのバージョンを置き換えることはありません。zipからインストールした場合は、任意のアクセストークンを使ってGitHubのリリースから更新できます。

v6からv7へのアップグレード

v6向けに作成されたブロックは引き続き動作します。従来のblockstudio/インポートプレフィックス、camelCaseのフック名、ダッシュ付きのアセットサフィックスも引き続きサポートされます。変更点については移行ガイドをご覧ください。

開発ツール

AIを活用した調査、デバッグ、開発のためのツールを内蔵。

Canvas

管理対象の全ページを俯瞰できる、Figmaのような画面。パンやズームを使って、サイト全体を1つのビューで確認できます。

admin.php?page=blockstudio-canvas

Element Grabber

任意の要素上でCmd+Cを長押しすると、マークアップとブロックテンプレートのパスをコピーできます。そのコンテキストをAIエディターに貼り付けてください。

?blockstudio-devtools

エージェント向けに開発

エージェントが索引化できるドキュメント、プロジェクトの契約、そして要件に合わないものを却下する分析機能を提供します。

索引、契約、ゲート

Blockstudioにはblockstudio-llm.txtが含まれます。各ドキュメントのルート、目的、管理する識別子を記した索引に加え、全文を収録したblockstudio-llm-full.txtも提供します。エージェントはまず索引を読み、必要なページだけを開きます。

プロジェクトでは、blockstudio-agentsが独自のファイルと設定からAGENTS.mdを作成します。blockstudio-phpstanは選択したプリセットを実行し、必要に応じて管理対象のコミットフックから実行できます。

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

まず索引を用意

すべてのドキュメントを、ルート、目的、識別子とともに約11kトークンで確認できます。

全文は必要なときに

すべてのドキュメントとJSONスキーマを1つのファイルにまとめ、約164kトークンで提供します。

生成されるAGENTS.md

blockstudio-agentsには、プロジェクトで作成できるもの、有効にできるもの、拒否されるものが記載されています。

分析プリセット

base、theme、extreme-themeには、block.jsonなどのテンプレートが含まれています。

フルスタックブロック

ブロックフォルダー内で、データベース、サーバーロジック、スケジュールタスク、CLIを備えたアプリケーション全体をファイルから構築できます。

ファイルを置くだけでAPIを利用

db.phpを追加してデータモデルを定義します。BlockstudioがRESTエンドポイントを作成し、入力を検証してストレージを管理し、JavaScriptAPIとPHPAPIを提供します。

サーバー関数にはrpc.php、スケジュールタスクにはcron.phpを追加します。各ファイルは1つの役割を担い、コントローラーやビルドツールは不要です。

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],
  ],
];

1行で定義できるサーバー関数

rpc.phpでPHP関数を定義し、bs.fn()で呼び出します。Blockstudioがルーティング、認証、CSRF保護、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];
  },
];

データベース

6種類のストレージモードで、スキーマ定義のCRUDを利用できます: table, sqlite, jsonc, storh, meta, post_type。

RPC

フロントエンドからbs.fn()で呼び出せるサーバー関数。

Cron

cron.phpでスケジュールタスクを定義し、WP-Cronに登録できます。

CLI

wp bsでブロック、ページ、レコード、RPC、cronジョブ、設定を管理できます。

CSRF保護

公開エンドポイントは、明示的にオープンモードを指定した場合を除き、自動的に保護されます。

ユーザーごとのデータ分離

所有者フィルターを手動で設定しなくても、ユーザーごとにデータを自動分離できます。

移植性

SQLiteまたはJSONCを使えば、コードとデータを1つのフォルダーにまとめて管理できます。

コンポーネント

プログラムで作成するUIコンポーネントも、Blockstudioパイプライン全体を利用できます。

可能な場合は静的に

静的プリレンダリングを有効にすると、匿名ユーザーには保存済みのHTMLが表示され、個人向けの内容はすべて動的に表示されます。

静的プリレンダリング

有効にするまでオフ

blockstudio.jsonでperformance.staticPrerenderを設定すると有効になります。

WordPressの起動前

earlyServeを有効にすると、ドロップインがWordPressの読み込み前に保存済みページを返します。

保存時に最新状態へ

投稿を保存すると、保存済みのページとフロントページが消去または再レンダリングされます。

必要な場所では動的に

ログイン中のリクエスト、検索、dynamicPathsは、デフォルトで動的にレンダリングされます。

よくある質問

Blockstudioについて知っておきたいことをまとめました。回答が見つからない場合は、GitHubで質問してください。

課題を報告

Blockstudioとは？

JSONとテンプレートファイルを使ってカスタムブロックを作成できるWordPressプラグインです。フィールドを定義し、Reactツールを使わずにマークアップを書けます。

JavaScriptの知識は必要ですか？

いいえ。HTMLと基本的なPHPを書ければ、ブロックを作成できます。Blockstudioがエディター内部の処理を担います。

自分のテーマでも使えますか？

はい。ブロックにはネイティブのWordPressブロックAPIを使用しているため、ブロック対応のテーマならどれでも使えます。

ACFブロックとはどう違いますか？

ACF PROもblock.jsonを通じてブロックを登録し、InnerBlocksを使ったPHPテンプレートを描画します。また、ACF PRO 6.8.1以降では、そこでブロックのフィールドも宣言できます。Blockstudioはregister_block_type()呼び出しなしでブロックフォルダーを検出し、PHP、Twig、またはBladeを描画します。各ブロックのスタイルとスクリプトをコンパイルし、テンプレート、ファイルベースのページ、パターン、拡張機能にRichTextを追加します。有料ライセンスの一部ではなく、GPLで無料提供されています。

どのテンプレート言語に対応していますか？

標準でPHP、timber/timberのインストール後はTwig、そしてilluminate/view 8から12では、Blockstudio\Blade_Rendererを呼び出す短いレンダーフィルターを通じてBladeを使えます。3つとも同じ変数とコンポーネントを利用でき、Bladeではページ、パターン、サイトエディターテンプレートもレンダリングできます。

既存のブロックを拡張できますか？

はい。拡張機能を使うと、コア、サードパーティ製、またはカスタムブロックにフィールドを追加できます。ワイルドカードを使って名前空間全体を対象にすることもできます。

アセットパイプラインの仕組みを教えてください。

style.scss、script.js、editor.cssなどの命名規則を使います。Blockstudioがそれらをコンパイルしてスコープを設定し、キューに登録します。圧縮を有効にすると、さらに圧縮されます。

IDEに対応していますか？

はい。JSON Schemaは、対応エディターで自動補完、インラインドキュメント、検証を提供します。

必要な環境を教えてください。

WordPress 6.7以降、PHP 8.2以降が必要です。

Blockstudioは無料ですか？

はい。Blockstudioは無料のオープンソースで、拡張機能、すべてのフィールドタイプ、アセット、ページ、パターンが含まれます。

Plus

公式拡張キット

プレミアムサイトテンプレート、AIシステム指示、会員限定Discordコミュニティ。買い切りで、アップデートは生涯無料です。

  • 500+のサイトテンプレート
  • AIシステム向け指示
  • 無期限アップデート
  • 非公開Discordコミュニティ
Plusを入手