文章が入ります。
``` この ``` ``` ようなコメントを含むコードが、WordPress のブロックマークアップです。 開始コメントと終了コメントによって、WordPress は「この HTML は段落ブロックである」と判断します。 単純なブロックであれば手作業でも記述できますが、属性が増えてくると、コメント内の JSON と実際の HTML を正しく対応させなければなりません。記述を間違えると、ブロックエディターで「このブロックには、想定されていないか無効なコンテンツが含まれています」と表示される可能性もあります。 OD HTML Toolkit では、WordPress の `createBlock()` と `serialize()` を使ってマークアップを生成します。独自の文字列として組み立てるのではなく、WordPress の Block API を通して生成するのがポイントです。 ## WordPress 標準の編集画面をそのまま使う  このプラグインを作る途中では、ツールバーへボタンを置く方法や、プラグイン独自の編集モーダルを表示する方法も試しました。 しかし最終的には、WordPress 標準のカスタム HTML ブロックと編集モーダルをそのまま残す形にしています。 個人的には、WordPress がすでに用意している使い方を大きく変えず、必要な機能だけを足す方が扱いやすいと考えています。独自の編集画面へ置き換えてしまうと、WordPress 標準の操作に慣れている人ほど戸惑ってしまうかもしれません。 OD HTML Toolkit を有効化すると、標準モーダルの下部に次のボタンが追加されます。 - 「Insert Block Markup」 - 「Format Code」 カスタム HTML ブロックそのものの表示や、「Edit HTML」「Update」「Cancel」といった標準操作は変わりません。 ## Insert Block Markup でできること 「Insert Block Markup」を押すと、挿入するブロックと属性を選択できます。 バージョン `0.1.0` では、次のコアブロックに対応しています。 | ブロック | 指定できる項目 | | --- | --- | | 段落 | ID／アンカー、class | | 見出し | ID／アンカー、class | | グループ | ID／アンカー、class、HTML 要素 | | ボタン群 | ID／アンカー、class | | ボタン | ID／アンカー、class | | 画像 | ID／アンカー、class | | スペーサー | ID／アンカー、class | グループブロックでは、次の HTML 要素を選択できます。 - `div` - `section` - `article` - `main` - `aside` - `header` - `footer` 入力した class に余分な空白が含まれている場合は整理されます。また、ID／アンカーに空白が含まれている場合は、そのまま挿入できないようにしています。 ## ブロックマークアップを挿入する手順 プラグインを有効化したら、次の手順で利用できます。 1. 投稿または固定ページで「カスタム HTML」ブロックを挿入する 2. ブロック内の「Edit HTML」を押す 3. モーダル下部の「Insert Block Markup」を押す 4. 挿入したいブロックを選ぶ 5. 必要に応じて ID／アンカー、class、HTML 要素を入力する 6. 「Insert」を押す 7. 生成されたコードを確認する 8. WordPress 標準の「Update」を押す CSS または JavaScript タブを開いている状態で「Insert Block Markup」を押した場合は、自動的に HTML タブへ移動します。 生成したマークアップは、HTML タブの末尾へ追加されます。ただし、「Insert」を押した段階ではカスタム HTML ブロックへ確定されていません。内容を確認してから、標準モーダルの「Update」を押してください。 「Close」はマークアップ生成フォームだけを閉じます。「Cancel」を押した場合は、モーダル内で行った変更が破棄されます。 ## Format Code でコードを整形する 「Format Code」では、現在開いているタブのコードを整形できます。 - HTML タブでは HTML を整形 - CSS タブでは CSS を整形 - JavaScript タブでは JavaScript を整形 コード整形には Prettier を使用しています。Prettier は、インデントや改行といったコードの見た目を、一定のルールに合わせて整理するツールです。 HTML タブを整形する場合は、処理の前後で WordPress のブロックコメントが維持されているかも確認します。整形によってブロックコメントが欠けたり変わったりした場合は、整形結果を適用せず、元のコードを維持します。 ただし、整形できたからといって、コードの内容や動作まで正しいことが保証されるわけではありません。特に JavaScript は、意図した処理になっているか、実際の表示画面でも確認しておきたいところです。 ## インストール方法 通常の WordPress サイトへインストールする場合は、GitHub の Release に添付されている `od-html-toolkit.zip` を利用します。 1. [OD HTML Toolkit v0.1.0](https://github.com/Olein-jp/od-html-toolkit/releases/tag/v0.1.0)を開く 2. Assets から `od-html-toolkit.zip` をダウンロードする 3. WordPress 管理画面の「プラグイン」→「プラグインを追加」を開く 4. 「プラグインのアップロード」を押す 5. ダウンロードした ZIP ファイルを選択してインストールする 6. インストール後にプラグインを有効化する GitHub が自動生成する「Source code」の ZIP には、実行に必要な Composer パッケージが含まれていません。必ず Release の Assets にある `od-html-toolkit.zip` を利用してください。 ## GitHub Releases から更新できる OD HTML Toolkit には、[`inc2734/wp-github-plugin-updater`](https://github.com/inc2734/wp-github-plugin-updater)を組み込んでいます。 新しいバージョンが GitHub Releases に公開されると、WordPress 管理画面から更新できる構成です。WordPress.org で配布していないプラグインでも、通常のプラグインに近い流れで更新できます。 ただし、更新前にはバックアップを取り、検証環境で動作を確認することをおすすめします。これは OD HTML Toolkit に限った話ではありませんが、カスタム HTML や JavaScript を扱うサイトでは、コードの変更が表示や動作へ直接影響する場合があります。 ## 利用前に確認しておきたいこと ### WordPress 7.1以降が必要 OD HTML Toolkit `0.1.0` では、WordPress 7.1以降、PHP 7.4以降を動作条件として設定しています。 カスタム HTML ブロックの HTML、CSS、JavaScript を分けた編集画面自体は、WordPress 7.0から導入されています。ただし、現在のプラグインは WordPress 7.1を前提として開発・配布しています。 [埋め込みコンテンツ](https://wordpress.org/documentation/article/custom-html/) ### CSS と JavaScript タブには権限が必要 WordPress 標準の CSS と JavaScript タブは、`unfiltered_html` 権限を持つユーザーにのみ表示されます。 たとえば、寄稿者など権限が制限されたユーザーでは、CSS と JavaScript タブが表示されません。また、許可されていない `