フロントマター機能と i18n 多言語対応の実装

WordPress プラグイン「Markdown Renderer for GitHub」に YAML フロントマター機能を追加する際、フロントマターのパース・表示、日本語ロケールでの多言語対応（i18n）、デフォルト値の変更とグローバル設定の追加、という3つの課題に同時に取り組みました。 ## 要件 - YAML フロントマター（title, date, author, tags）のパース・表示 - ブロック属性 `showFrontmatter`（デフォルト: false） - プラグイン設定画面でデフォルト動作を制御 - すべての UI 文字列の日本語翻訳 - 既存ブロックへの影響なし（新規ブロックのみ設定を反映） ## 実装方針 ### 1. フロントマター機能 追加ファイル: - `includes/class-gfmr-frontmatter-parser.php` — PHP パーサー - `blocks/markdown/frontmatter-parser.js` — JavaScript パーサー - `assets/css/gfmr-frontmatter.css` — 表示スタイル ブロック属性の追加: ```json // blocks/markdown/block.json "showFrontmatter": { "type": "boolean", "default": false } ``` 新規ブロックへのグローバル設定の適用: ```javascript // blocks/markdown/edit.js useEffect(() => { if (!content && showFrontmatter === false) { const globalShowHeader = window.wpGfmConfig?.frontmatter?.showHeader ?? false; if (globalShowHeader) { setAttributes({ showFrontmatter: true }); } } }, []); ``` ### 2. 設定画面の追加 ```php // includes/class-gfmr-settings.php // デフォルト値 'show_frontmatter_header' => false, // サニタイズ $sanitized['show_frontmatter_header'] = !empty($input['show_frontmatter_header']); // フィールド登録 add_settings_field( 'show_frontmatter_header', __('Show Frontmatter Header', 'markdown-renderer-for-github'), array($this, 'render_show_frontmatter_field'), self::SETTINGS_SLUG, 'gfmr_general_section' ); ``` `wp_localize_script` で PHP 設定を JavaScript に渡します。 ```php // includes/class-gfmr-block-registry.php wp_localize_script( 'gfmr-renderer-editor', 'wpGfmConfig', array( 'frontmatter' => array( 'showHeader' => $settings->get('show_frontmatter_header', false), ), ) ); ``` ### 3. i18n 多言語対応 翻訳の追加（.po/.mo）: ```po #: includes/class-gfmr-settings.php:113 msgid "Auto-apply Frontmatter Title" msgstr "フロントマタータイトルを自動適用" #: includes/class-gfmr-settings.php:121 msgid "Show Frontmatter Header" msgstr "フロントマターヘッダーを表示" #: blocks/markdown/edit.js:905 msgid "Frontmatter Settings" msgstr "フロントマター設定" ``` PO ファイルを編集したら、必ず MO ファイルをコンパイルします。 ```bash npm run i18n:compile ``` ## ポイント ### 既存ブロックへの影響回避 `useEffect` の条件で新規ブロックのみを判定します。 - `!content` — コンテンツが空（新規作成） - `showFrontmatter === false` — デフォルト値のまま 既存ブロックは `content` が存在するため、グローバル設定は適用されません。 ### MO ファイルのコンパイル WordPress は MO ファイル（バイナリ）を読み込むため、PO ファイルだけでは翻訳が反映されません。PO 編集後は `npm run i18n:compile` を忘れないようにします。 ### Mermaid gitGraph の大文字小文字 Mermaid v10+ では `gitGraph`（camelCase）が必須で、`gitgraph`（小文字）はエラーになります。 ## 学び 1. **WordPress の i18n フロー**: PO ファイル編集 → MO コンパイル →（ブロック用）JSON 生成。`esc_html_e()` や `__()` といった翻訳関数を使い分ける。 2. **React useEffect の依存配列**: 空配列 `[]` でマウント時のみ実行。新規ブロック判定には `!content` が有効。 3. **WordPress 設定 API**: `register_setting` → `add_settings_field` → `render_*_field`。`wp_localize_script` で PHP 設定を JavaScript に渡す。 4. **機能・翻訳・テストを1コミットに**: 機能実装、翻訳、テスト更新をまとめてコミットし、lint-staged で自動チェックする。 ## 確認手順 1. 設定 > Markdown Renderer for GitHub で「フロントマタータイトルを自動適用」「フロントマターヘッダーを表示」が日本語表示されること 2. 新規投稿で Markdown ブロックを追加し、サイドバーの「フロントマター設定」が日本語表示されること 3. フロントマター付きコンテンツでヘッダーが表示されること 4. `npm run test:quick` でテストが通ること ## 参考リンク - [WordPress i18n Documentation](https://developer.wordpress.org/apis/handbook/internationalization/) - [WordPress Settings API](https://developer.wordpress.org/plugins/settings/settings-api/) - [Mermaid.js gitGraph](https://mermaid.js.org/syntax/gitgraph.html) --- これは [Markdown Renderer for GitHub](/markdown-renderer-for-github/) に実装されています。

// blocks/markdown/block.json
"showFrontmatter": {
  "type": "boolean",
  "default": false
}

// blocks/markdown/edit.js
useEffect(() => {
  if (!content && showFrontmatter === false) {
    const globalShowHeader = window.wpGfmConfig?.frontmatter?.showHeader ?? false;
    if (globalShowHeader) {
      setAttributes({ showFrontmatter: true });
    }
  }
}, []);

// includes/class-gfmr-settings.php

// デフォルト値
'show_frontmatter_header' => false,

// サニタイズ
$sanitized['show_frontmatter_header'] = !empty($input['show_frontmatter_header']);

// フィールド登録
add_settings_field(
    'show_frontmatter_header',
    __('Show Frontmatter Header', 'markdown-renderer-for-github'),
    array($this, 'render_show_frontmatter_field'),
    self::SETTINGS_SLUG,
    'gfmr_general_section'
);

// includes/class-gfmr-block-registry.php
wp_localize_script(
    'gfmr-renderer-editor',
    'wpGfmConfig',
    array(
        'frontmatter' => array(
            'showHeader' => $settings->get('show_frontmatter_header', false),
        ),
    )
);

#: includes/class-gfmr-settings.php:113
msgid "Auto-apply Frontmatter Title"
msgstr "フロントマタータイトルを自動適用"

#: includes/class-gfmr-settings.php:121
msgid "Show Frontmatter Header"
msgstr "フロントマターヘッダーを表示"

#: blocks/markdown/edit.js:905
msgid "Frontmatter Settings"
msgstr "フロントマター設定"

npm run i18n:compile