Web Design Leaves

% npx @wordpress/create-block@latest my-category-posts --template @wordpress/create-block-interactive-template --namespace my-theme

% cd my-category-posts && npm start

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-theme/my-category-posts",
  "version": "0.1.0",
  "title": "My Category Posts",
  "category": "widgets",
  "icon": "media-interactive",
  "description": "An interactive block with the Interactivity API.",
  "example": {},
  "supports": {
    "interactivity": true
  },
  "attributes": {
    "initialCategories": {
      "type": "array",
      "default": []
    },
    "categories": {
      "type": "array",
      "default": []
    },
    "showLabelForAll": {
      "type": "boolean",
      "default": true
    },
    "postsPerPage": {
      "type": "number",
      "default": 10
    },
    "fields": {
      "type": "array",
      "default": ["link", "date", "excerpt"]
    }
  },
  "textdomain": "my-category-posts",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "render": "file:./render.php",
  "viewScriptModule": "file:./view.js"
}

import { useBlockProps, InspectorControls } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
import { useEffect } from '@wordpress/element';
import { PanelBody, SelectControl, CheckboxControl, RangeControl, } from "@wordpress/components";

export default function Edit({ attributes, setAttributes }) {
  // 属性を分割代入で取得して変数に代入
  const { categories, initialCategories, showLabelForAll, postsPerPage, fields,} = attributes;

  // すべてのカテゴリーを取得
  const allCategories = useSelect(
    (select) => {
      return select("core").getEntityRecords("taxonomy", "category", {
        per_page: -1, // すべてのカテゴリー
        hide_empty: true, //投稿がないカテゴリーも取得する場合は false を指定
      });
    },
    []
  );

  // 初期化処理：全カテゴリーを選択状態にする
  useEffect(() => {
    if (allCategories && allCategories.length > 0) {
      const allIds = allCategories.map((cat) => cat.id);
      if (!initialCategories?.length) {
        setAttributes({ initialCategories: allIds });
      }
      if (!categories?.length) {
        setAttributes({ categories: allIds });
      }
    }
  }, [allCategories]);

  // 表示項目のチェックボックスの onChange に指定する関数
  const toggleField = (field) => {
    setAttributes({
      fields: fields.includes(field)
        ? fields.filter((f) => f !== field)
        : [...fields, field],
    });
  };

  return (
    <>
      <InspectorControls>
        <PanelBody title={__("設定", "my-category-posts")}>
          <SelectControl
            multiple
            label={__("初期カテゴリー", "my-category-posts")}
            value={Array.isArray(initialCategories) ? initialCategories : []}
            options={(allCategories || []).map((cat) => ({
              label: cat.name,
              value: cat.id,
            }))}
            onChange={(newCats) =>
              setAttributes({ initialCategories: (newCats || []).map(Number) })
            }
            __next40pxDefaultSize
            __nextHasNoMarginBottom
          />
          <SelectControl
            multiple
            label={__("セレクトメニューに表示するカテゴリー", "my-category-posts")}
            value={Array.isArray(categories) ? categories : []}
            options={(allCategories || []).map((cat) => ({
              label: cat.name,
              value: cat.id,
            }))}
            onChange={(newCats) =>
              setAttributes({ categories: (newCats || []).map(Number) })
            }
            __next40pxDefaultSize
            __nextHasNoMarginBottom
          />
          <CheckboxControl
            __nextHasNoMarginBottom
            label="「すべて」を表示"
            checked={showLabelForAll}
            onChange={(checked) => {
              setAttributes({ showLabelForAll: checked });
            }}
          />
          <RangeControl
            __nextHasNoMarginBottom
            __next40pxDefaultSize
            label={__("表示件数", "my-category-posts")}
            value={postsPerPage}
            onChange={(value) => setAttributes({ postsPerPage: value })}
            min={1}
            max={20}
          />
          <p>{__("表示項目", "my-category-posts")}</p>
          <CheckboxControl
            __nextHasNoMarginBottom
            label="リンク"
            checked={fields.includes("link")}
            onChange={() => toggleField("link")}
          />
          <CheckboxControl
            __nextHasNoMarginBottom
            label="日付"
            checked={fields.includes("date")}
            onChange={() => toggleField("date")}
          />
          <CheckboxControl
            __nextHasNoMarginBottom
            label="抜粋"
            checked={fields.includes("excerpt")}
            onChange={() => toggleField("excerpt")}
          />
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        {__("カテゴリー別投稿一覧（プレビューは表示されません）", "my-category-posts")}
      </div>
    </>
  );
}

<?php

// 初期表示用に取得するカテゴリーIDの配列を決定
// ブロック属性 "initialCategories" に値があればその配列を使用、なければ空配列
$categories_for_query = !empty($attributes['initialCategories']) ? $attributes['initialCategories'] : [];

// 1ページあたりの表示件数（安全策として、$attributes 未定義時は10件をデフォルト値に）
$posts_per_page = isset($attributes['postsPerPage']) ? (int) $attributes['postsPerPage'] : 10;

// 投稿取得用のクエリパラメータを設定
// numberposts: 表示件数（デフォルト10件）
// category__in: 初期表示カテゴリーID配列
// post_status: 公開済み投稿のみ
$args = [
  'numberposts' => $posts_per_page,
  'category__in'  => $categories_for_query,
  'post_status' => 'publish',
];

// 投稿データを取得（配列形式で返される）
$posts = get_posts($args);

// カテゴリー取得用のクエリパラメータを設定
// hide_empty: 投稿がないカテゴリーは含めない
// include: 指定がある場合、そのカテゴリーIDのみ取得
$cat_args = ['hide_empty' => true];
if (!empty($attributes['categories'])) {
  $cat_args['include'] = $attributes['categories'];
}

// カテゴリーデータを取得
$categories = get_categories($cat_args);

// Interactivity API用のコンテキストデータを生成
// JavaScript側からアクセスできる初期状態や設定を含める
$my_context = wp_interactivity_data_wp_context([
  // 投稿リスト（必要な情報のみ整形）
  "posts" => array_map(function ($p) {
    return [
      "id"      => $p->ID,  // 投稿ID
      "link"    => get_permalink($p),  // リンク, タイトル, 投稿日, 抜粋
      "title"   => get_the_title($p),  // タイトル
      "date"    => get_the_date('', $p),  // 投稿日
      "datetime" => get_the_date('c', $p),  // 投稿日（datetime 属性用 ISO 8601 機械可読用）
      "excerpt" => get_the_excerpt($p),  // 抜粋
    ];
  }, $posts),

  // 「すべて」オプションを表示するか
  "showLabelForAll" => (bool) ($attributes["showLabelForAll"] ?? true),

  // 選択中カテゴリー（初期値は0＝未選択）
  "selectedCategory" => 0,

  // 1ページあたりの表示件数
  "postsPerPage" => $posts_per_page,

  // 表示項目（リンク・日付・抜粋など）
  "fields" => $attributes["fields"] ?? ["link", "date", "excerpt"],

  // ローディング状態（初期はfalse）
  "loading" => false,

  // エラーメッセージ（初期はnull）
  "error" => null,

  // REST APIのルートURL（サブディレクトリ対応のため）
  'restRoot' => rest_url(),
]);
?>

<div
  data-wp-interactive="my-theme"
  <?php echo $my_context; ?>>

  <!-- カテゴリー選択ドロップダウン -->
  <select data-wp-on--change="actions.changeCategory">
    <!-- 初期表示用の案内文 -->
    <option value="" disabled selected>
      <?php esc_html_e('カテゴリーを選択', 'my-category-posts'); ?>
    </option>

    <!-- 「すべて」オプション（showLabelForAll が true の場合のみ） -->
    <?php if ($attributes['showLabelForAll']) : ?>
      <option value="0"><?php esc_html_e('すべて', 'my-category-posts'); ?></option>
    <?php endif; ?>

    <!-- カテゴリー一覧をループして選択肢に追加 -->
    <?php foreach ($categories as $cat): ?>
      <option value="<?php echo esc_attr($cat->term_id); ?>">
        <?php echo esc_html($cat->name); ?>
      </option>
    <?php endforeach; ?>
  </select>

  <!-- ローディング表示（context.loading が true の場合のみ表示） -->
  <div data-wp-bind--hidden="!context.loading" class="my-theme-loading-spinner" aria-live="polite" role="status">
    <span class="spinner"></span> <?php esc_html_e('読み込み中...', 'my-category-posts'); ?>
  </div>

  <!-- エラー表示（context.error がセットされている場合のみ） -->
  <div data-wp-bind--hidden="!context.error" style="color: red;">
    <span data-wp-text="context.error"></span>
  </div>

  <!-- 投稿リスト -->
  <ul>
    <!-- context.posts の配列をループ表示 -->
    <template data-wp-each="context.posts">
      <li>
        <h3>
          <!-- リンク表示（state.linkSelected が true の場合のみ） -->
          <a
            data-wp-bind--hidden="!state.linkSelected"
            data-wp-bind--href="context.item.link"
            data-wp-text="context.item.title"></a>

          <!-- リンク非表示時はタイトルをテキストとして表示 -->
          <span
            data-wp-bind--hidden="state.linkSelected"
            data-wp-text="context.item.title"></span>
        </h3>

        <!-- 日付表示（state.dateSelected が true の場合のみ） -->
        <time
          data-wp-bind--hidden="!state.dateSelected"
          data-wp-bind--datetime="context.item.datetime"
          data-wp-text="context.item.date"
          ></time>

        <!-- 抜粋表示（state.excerptSelected が true の場合のみ） -->
        <p data-wp-bind--hidden="!state.excerptSelected" data-wp-text="context.item.excerpt"></p>
      </li>
    </template>
  </ul>
</div>

// WordPress Interactivity API から必要な関数をインポート
import { store, getContext } from "@wordpress/interactivity";

/**
 * 日付フォーマッター
 * REST API から取得した日付 (ISO8601形式) を日本語の年月日形式に変換する
 * 例: 2025-08-13T12:00:00 → 2025年8月13日
 */
const dateFormatter = new Intl.DateTimeFormat("ja-JP", {
  year: "numeric",
  month: "long",
  day: "numeric",
});

/**
 * store() 関数で名前空間「my-theme」のストアを作成
 * state（派生ステート）と actions（ユーザー操作時の処理）を定義
 */
store("my-theme", {
  /**
   * state: UI の表示切り替えに利用する計算用の状態（getter で派生ステートを定義）
   * 実際のデータは context から取得し、その結果を返すだけの役割
   */
  state: {
    // 投稿リンクを表示するかどうか
    get linkSelected() {
      const context = getContext();
      return context.fields.includes("link");
    },
    // 投稿日時を表示するかどうか
    get dateSelected() {
      const context = getContext();
      return context.fields.includes("date");
    },
    // 抜粋を表示するかどうか
    get excerptSelected() {
      const context = getContext();
      return context.fields.includes("excerpt");
    },
  },

  /**
   * actions: ユーザー操作（イベント）に応じてデータや状態を変更する処理
   */
  actions: {
    /**
     * カテゴリー選択変更時の処理
     * - 選択カテゴリーIDを context に保存
     * - REST API を呼び出して該当する投稿一覧を取得
     * - エラーやローディング状態も context に反映
     *
     * ジェネレーター関数（function*）を使用し、非同期処理を yield で記述
     */
    *changeCategory(event) {
      const context = getContext();

      try {
        // 選択されたカテゴリーIDを取得
        const value = event.target.value;
        const categoryId = value === "" ? 0 : parseInt(value, 10);

        // 状態を更新
        context.selectedCategory = categoryId; // 現在選択中のカテゴリ
        context.error = null; // エラー初期化
        context.loading = true; // ローディング開始

        // REST API のベースURL（context.restRoot が未定義なら現在サイト直下の /wp-json/ を使用）
        const restRoot = context.restRoot || `${window.location.origin}/wp-json/`;
        const url = new URL("wp/v2/posts", restRoot);

        // カテゴリーIDと取得件数をクエリパラメータに設定
        if (categoryId) {
          url.searchParams.set("categories", categoryId);
        }
        url.searchParams.set("per_page", context.postsPerPage);

        // REST API 呼び出し（ジェネレーター関数なので async/await ではなく yield を使用）
        // yield を使うことで Interactivity API のランタイムが処理の進行と状態更新を管理できる
        const res = yield fetch(url);  // ← async/await の代わりに yield
        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);

        // JSONデータを取得
        const data = yield res.json();  // ← async/await の代わりに yield

        // 投稿データを整形して context にセット
        context.posts = data.map((post) => ({
          id: post.id,
          link: post.link,
          title: post.title.rendered,
          date: dateFormatter.format(new Date(post.date)), // 日付フォーマット適用
          datetime: new Date(post.date).toISOString(),  // datetime 属性用
          excerpt: post.excerpt.rendered.replace(/<[^>]+>/g, ""), // HTMLタグ除去
        }));
      } catch (err) {
        // エラー時の処理
        console.error("Failed to change category:", err);
        context.error = "投稿の取得に失敗しました。";
        context.posts = []; // エラー時は空配列に
      } finally {
        // ローディング終了
        context.loading = false;
      }
    },
  },
});

// ServerSideRender コンポーネントをインポート
import ServerSideRender from '@wordpress/server-side-render';

<div {...useBlockProps()}>
  <ServerSideRender
    block="my-theme/my-category-posts" // ブロック名
    attributes={attributes} // PHP に渡す属性→ Edit() で分割代入して取得した attributes
  />
</div>

import { useBlockProps, InspectorControls } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
// useState を追加
import { useEffect, useState } from "@wordpress/element";
import { PanelBody, SelectControl, CheckboxControl, RangeControl, } from "@wordpress/components";
// 日付の管理やフォーマットのための関数
import { dateI18n, format, getSettings } from "@wordpress/date";

export default function Edit({ attributes, setAttributes }) {
  const { categories, initialCategories, showLabelForAll, postsPerPage, fields,} = attributes;

  const allCategories = useSelect((select) => {
    return select("core").getEntityRecords("taxonomy", "category", {
      per_page: -1,
      hide_empty: true,
    });
  }, []);

  useEffect(() => {
    if (allCategories && allCategories.length > 0) {
      const allIds = allCategories.map((cat) => cat.id);
      if (!initialCategories?.length) {
        setAttributes({ initialCategories: allIds });
      }
      if (!categories?.length) {
        setAttributes({ categories: allIds });
      }
    }
  }, [allCategories]);

  const toggleField = (field) => {
    setAttributes({
      fields: fields.includes(field)
        ? fields.filter((f) => f !== field)
        : [...fields, field],
    });
  };

  // プレビュー用セレクトメニューに表示するためのカテゴリー一覧（ユーザーがインスペクターで指定したものだけを抽出）
  const [selectedCategories, setSelectedCategories] = useState(null);

  useEffect(() => {
    if (allCategories && allCategories.length > 0) {
      // すべてのカテゴリーの中から、属性 categories に含まれるものだけを抽出
      const selectedCats = allCategories.filter((cat) =>
        categories.includes(cat.id)
      );
      setSelectedCategories(selectedCats);
    }
  }, [allCategories, categories]);

  // プレビュー用セレクトメニューで現在選択されているカテゴリーの ID（単一選択用、0=すべて、null=未選択）
  const [categoryId, setCategoryId] = useState(null);

  // 投稿リストのプレビュー用データを取得
  const posts = useSelect(
    (select) => {
      const query = {
        per_page: postsPerPage,
      };
      // セレクトメニューでカテゴリーを選択した場合
      // 0 の場合は「すべて」として categories を指定しない
      if (categoryId !== null && categoryId !== 0) {
        query.categories = [categoryId] ;
      } else if (categoryId === null && initialCategories?.length) {
        // 初期状態（セレクトメニュー未選択時）は initialCategories を使用
        query.categories = initialCategories;
      }
      return select("core").getEntityRecords("postType", "post", query);
    },
    [categoryId, postsPerPage]
  );

  // HTML 文字列からプレーンテキストを取り出すユーティリティ関数
  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  return (
    <>
      <InspectorControls>
        <PanelBody title={__("設定", "my-category-posts")}>
          <SelectControl
            multiple
            label={__("初期カテゴリー", "my-category-posts")}
            value={Array.isArray(initialCategories) ? initialCategories : []}
            options={(allCategories || []).map((cat) => ({
              label: cat.name,
              value: cat.id,
            }))}
            onChange={(newCats) =>
              setAttributes({ initialCategories: (newCats || []).map(Number) })
            }
            __next40pxDefaultSize
            __nextHasNoMarginBottom
          />
          <SelectControl
            multiple
            label={__(
              "セレクトメニューに表示するカテゴリー",
              "my-category-posts"
            )}
            value={Array.isArray(categories) ? categories : []}
            options={(allCategories || []).map((cat) => ({
              label: cat.name,
              value: cat.id,
            }))}
            onChange={(newCats) =>
              setAttributes({ categories: (newCats || []).map(Number) })
            }
            __next40pxDefaultSize
            __nextHasNoMarginBottom
          />
          <CheckboxControl
            __nextHasNoMarginBottom
            label="「すべて」を表示"
            checked={showLabelForAll}
            onChange={(checked) => {
              setAttributes({ showLabelForAll: checked });
            }}
          />
          <RangeControl
            __nextHasNoMarginBottom
            __next40pxDefaultSize
            label={__("表示件数", "my-category-posts")}
            value={postsPerPage}
            onChange={(value) => setAttributes({ postsPerPage: value })}
            min={1}
            max={20}
          />
          <p>{__("表示項目", "my-category-posts")}</p>
          <CheckboxControl
            __nextHasNoMarginBottom
            label="リンク"
            checked={fields.includes("link")}
            onChange={() => toggleField("link")}
          />
          <CheckboxControl
            __nextHasNoMarginBottom
            label="日付"
            checked={fields.includes("date")}
            onChange={() => toggleField("date")}
          />
          <CheckboxControl
            __nextHasNoMarginBottom
            label="抜粋"
            checked={fields.includes("excerpt")}
            onChange={() => toggleField("excerpt")}
          />
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        <select
          value={categoryId || ""}
          onChange={(e) =>
            setCategoryId(e.target.value ? Number(e.target.value) : null)
          }
        >
          <option value="" disabled>
            {__("カテゴリーを選択", "my-category-posts")}
          </option>
          {showLabelForAll && (
            <option value="0">{__("すべて", "my-category-posts")}</option>
          )}
          {selectedCategories &&
            selectedCategories.map((cat) => (
              <option key={cat.id} value={cat.id}>
                {cat.name}
              </option>
            ))}
        </select>
        <ul>
          {posts &&
            posts.map((post) => (
              <li key={post.id}>
                {fields.includes("link") ? (
                  <h3>
                    <a href={post.link}>
                      {getTextContent(post.title.rendered)}
                    </a>
                  </h3>
                ) : (
                  <h3>{getTextContent(post.title.rendered)}</h3>
                )}
                {fields.includes("date") && post.date_gmt && (
                  <time dateTime={format("c", post.date_gmt)}>
                    {dateI18n(getSettings().formats.date, post.date_gmt)}
                  </time>
                )}
                {fields.includes("excerpt") && post.excerpt?.rendered && (
                  <p>{getTextContent(post.excerpt.rendered)}</p>
                )}
              </li>
            ))}
        </ul>
      </div>
    </>
  );
}

<select
  value={categoryId || ""}
  onChange={(e) =>
    setCategoryId(e.target.value ? Number(e.target.value) : null)
  }
>
  <option value="" disabled>
    {__("カテゴリーを選択", "my-category-posts")}
  </option>
  {showLabelForAll && (
    <option value="0">{__("すべて", "my-category-posts")}</option>
  )}
  {selectedCategories &&
    selectedCategories.map((cat) => (
      <option key={cat.id} value={cat.id}>
        {cat.name}
      </option>
    ))}
</select>

<ul>
  {posts &&
    posts.map((post) => (
      <li key={post.id}>
        {fields.includes("link") ? (
          <h3>
            <a href={post.link}>
              {getTextContent(post.title.rendered)}
            </a>
          </h3>
        ) : (
          <h3>{getTextContent(post.title.rendered)}</h3>
        )}
        {fields.includes("date") && post.date_gmt && (
          <time dateTime={format("c", post.date_gmt)}>
            {dateI18n(getSettings().formats.date, post.date_gmt)}
          </time>
        )}
        {fields.includes("excerpt") && post.excerpt?.rendered && (
          <p>{getTextContent(post.excerpt.rendered)}</p>
        )}
      </li>
    ))}
</ul>