Web Design Leaves

import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import "./editor.scss";

export default function Edit() {
  const posts = useSelect(
    (select) =>
      select("core").getEntityRecords("postType", "post", { per_page: 5 }),
    [],
  );

  const pre = 'wp-block-wdl-block-my-dynamic-block__';

  // HTML からテキストを取得する関数を定義
  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  return (
    <div {...useBlockProps()}>
      <div className={`${pre}post-items`}>
        {posts &&
          posts.map((post) => (
            <div key={post.id} className={`${pre}post-item`}>
              {post.title?.rendered && (
                <h3 className={`${pre}post-title`}>
                  <a href={post.link}>{getTextContent(post.title.rendered)}</a>
                </h3>
              )}
              {post.excerpt?.rendered && (
                <p className={`${pre}post-excerpt`}>
                  {getTextContent(post.excerpt.rendered)}
                </p>
              )}
            </div>
          ))}
      </div>
    </div>
  );
}

import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import "./editor.scss";

export default function Edit() {
  const posts = useSelect(
    (select) =>
      select("core").getEntityRecords("postType", "post", {
        per_page: 5,
        _embed: true, // データに _embedded プロパティ（埋め込みデータ）を含める
        exclude: [select("core/editor").getCurrentPostId()], // 現在の投稿を除外
      }),
    [],
  );

  const pre = 'wp-block-wdl-block-my-dynamic-block__';

  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  // アイキャッチ画像とリンクを追加（29-38）
  return (
    <div {...useBlockProps()}>
      <div className={`${pre}post-items`}>
        {posts &&
          posts.map((post) => (
            <div key={post.id} className={`${pre}post-item`}>
              {post._embedded &&
                post._embedded["wp:featuredmedia"] &&
                post._embedded["wp:featuredmedia"][0] && (
                  <div className={`${pre}featured-image`}>
                    <a href={ post.link }>
                      <img
                        src={ post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url }
                        alt={ post._embedded['wp:featuredmedia'][0].alt_text || post.title.rendered ? getTextContent(post.title.rendered): ''}
                      />
                    </a>
                  </div>
                )}
              {post.title?.rendered && (
                <h3 className={`${pre}post-title`}>
                  <a href={post.link}>{getTextContent(post.title.rendered)}</a>
                </h3>
              )}
              {post.excerpt?.rendered && (
                <p className={`${pre}post-excerpt`}>
                  {getTextContent(post.excerpt.rendered)}
                </p>
              )}
            </div>
          ))}
      </div>
    </div>
  );
}

import { dateI18n, format, getSettings } from "@wordpress/date";

<time dateTime={format("c", post.date_gmt)} >
  {dateI18n(getSettings().formats.date, post.date_gmt)}
</time>

{post.date_gmt && (
  <time dateTime={format("c", post.date_gmt)}>
    {dateI18n(getSettings().formats.date, post.date_gmt)}
  </time>
)}

import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
// @wordpress/date パッケージから日付用の関数をインポート
import { dateI18n, format, getSettings } from "@wordpress/date";
import "./editor.scss";

export default function Edit() {
  const posts = useSelect(
    (select) =>
      select("core").getEntityRecords("postType", "post", {
        per_page: 5,
        _embed: 'wp:featuredmedia',
        exclude: [select("core/editor").getCurrentPostId()],
      }),
    [],
  );

  const pre = 'wp-block-wdl-block-my-dynamic-block__';

  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  // 日付を追加（53-57）
  return (
    <div {...useBlockProps()}>
      <div className={`${pre}post-items`}>
        {posts &&
          posts.map((post) => {
            const featuredMedia =
              post._embedded?.["wp:featuredmedia"]?.[0]?.media_details?.sizes?.medium?.source_url;
            const altText =
              post._embedded?.["wp:featuredmedia"]?.[0]?.alt_text || getTextContent(post.title?.rendered);

            return (
              <div key={post.id} className={`${pre}post-item`}>
                {featuredMedia && (
                  <div className={`${pre}featured-image`}>
                    <a href={post.link}>
                      <img src={featuredMedia} alt={altText} />
                    </a>
                  </div>
                )}
                {post.title?.rendered && (
                  <h3 className={`${pre}post-title`}>
                    <a href={post.link}>{getTextContent(post.title.rendered)}</a>
                  </h3>
                )}
                {post.date_gmt && (
                  <time dateTime={format("c", post.date_gmt)} className={`${pre}post-date`}>
                    {dateI18n(getSettings().formats.date, post.date_gmt)}
                  </time>
                )}
                {post.excerpt?.rendered && (
                  <p className={`${pre}post-excerpt`}>
                    {getTextContent(post.excerpt.rendered)}
                  </p>
                )}
              </div>
            );
          })}
      </div>
    </div>
  );
}

import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import { dateI18n, format, getSettings } from "@wordpress/date";
// Disabled コンポーネントをインポート
import { Disabled } from "@wordpress/components";
import "./editor.scss";

export default function Edit() {
  const posts = useSelect(
    (select) =>
      select("core").getEntityRecords("postType", "post", {
        per_page: 5,
        _embed: 'wp:featuredmedia',
        exclude: [select("core/editor").getCurrentPostId()],
      }),
    [],
  );

  const pre = 'wp-block-wdl-block-my-dynamic-block__';

  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  // Disabled コンポーネントで投稿のレンダリング部分をラップ
  return (
    <div {...useBlockProps()}>
      <Disabled>
        <div className={`${pre}post-items`}>
          {posts &&
            posts.map((post) => {
              const featuredMedia =
                post._embedded?.["wp:featuredmedia"]?.[0]?.media_details?.sizes?.medium?.source_url;
              const altText =
                post._embedded?.["wp:featuredmedia"]?.[0]?.alt_text || getTextContent(post.title?.rendered);

              return (
                <div key={post.id} className={`${pre}post-item`}>
                  {featuredMedia && (
                    <div className={`${pre}featured-image`}>
                      <a href={post.link}>
                        <img src={featuredMedia} alt={altText} />
                      </a>
                    </div>
                  )}
                  {post.title?.rendered && (
                    <h3 className={`${pre}post-title`}>
                      <a href={post.link}>{getTextContent(post.title.rendered)}</a>
                    </h3>
                  )}
                  {post.date_gmt && (
                    <time dateTime={format("c", post.date_gmt)} className={`${pre}post-date`}>
                      {dateI18n(getSettings().formats.date, post.date_gmt)}
                    </time>
                  )}
                  {post.excerpt?.rendered && (
                    <p className={`${pre}post-excerpt`}>
                      {getTextContent(post.excerpt.rendered)}
                    </p>
                  )}
                </div>
              );
            })}
        </div>
      </Disabled>
    </div>
  );
}

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "wdl-block/my-dynamic-block",
  "version": "0.1.0",
  "title": "My Dynamic Block",
  "category": "widgets",
  "icon": "smiley",
  "description": "Example block scaffolded with Create Block tool.",
  "example": {},
  "supports": {
    "html": false
  },
  "attributes": {
    "displayHeading": {
      "type": "boolean",
      "default": true
    },
    "headingTag": {
      "type": "string",
      "default": "h2"
    },
    "headingText": {
      "type": "string",
      "default": ""
    }
  },
  "textdomain": "my-dynamic-block",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "render": "file:./render.php",
  "viewScript": "file:./view.js"
}

import { __ } from "@wordpress/i18n";
// RichText のインポートを追加
import { useBlockProps, RichText } from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import { dateI18n, format, getSettings } from "@wordpress/date";
import { Disabled } from "@wordpress/components";
import "./editor.scss";

// Edit 関数のパラメータに attributes と属性を更新する関数 setAttributes を分割代入で受け取る
export default function Edit({ attributes, setAttributes }) {
  // attributes から属性を分割代入で変数に代入
  const { displayHeading, headingTag, headingText } = attributes;
  const posts = useSelect(
    (select) =>
      select("core").getEntityRecords("postType", "post", {
        per_page: 5,
        _embed: 'wp:featuredmedia',
        exclude: [select("core/editor").getCurrentPostId()],
      }),
    [],
  );

  const pre = 'wp-block-wdl-block-my-dynamic-block__';

  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  // RichText コンポーネントで見出しを追加
  return (
    <div {...useBlockProps()}>
      {displayHeading && (
        <RichText
          tagName={headingTag}
          onChange={(value) => setAttributes({ headingText: value })}
          value={headingText}
          className={ `${pre}heading` }
          placeholder={__("Enter heading text", "my-dynamic-block")}
        />
      )}
      <Disabled>
        <div className={`${pre}post-items`}>
          {posts &&
            posts.map((post) => {
              const featuredMedia =
                post._embedded?.["wp:featuredmedia"]?.[0]?.media_details?.sizes?.medium?.source_url;
              const altText =
                post._embedded?.["wp:featuredmedia"]?.[0]?.alt_text || getTextContent(post.title?.rendered);

              return (
                <div key={post.id} className={`${pre}post-item`}>
                  {featuredMedia && (
                    <div className={`${pre}featured-image`}>
                      <a href={post.link}>
                        <img src={featuredMedia} alt={altText} />
                      </a>
                    </div>
                  )}
                  {post.title?.rendered && (
                    <h3 className={`${pre}post-title`}>
                      <a href={post.link}>{getTextContent(post.title.rendered)}</a>
                    </h3>
                  )}
                  {post.date_gmt && (
                    <time dateTime={format("c", post.date_gmt)} className={`${pre}post-date`}>
                      {dateI18n(getSettings().formats.date, post.date_gmt)}
                    </time>
                  )}
                  {post.excerpt?.rendered && (
                    <p className={`${pre}post-excerpt`}>
                      {getTextContent(post.excerpt.rendered)}
                    </p>
                  )}
                </div>
              );
            })}
        </div>
      </Disabled>
    </div>
  );
}

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "wdl-block/my-dynamic-block",
  "version": "0.1.0",
  "title": "My Dynamic Block",
  "category": "widgets",
  "icon": "smiley",
  "description": "Example block scaffolded with Create Block tool.",
  "example": {},
  "supports": {
    "html": false
  },
  "attributes": {
    "displayHeading": {
      "type": "boolean",
      "default": true
    },
    "headingTag": {
      "type": "string",
      "default": "h2"
    },
    "headingText": {
      "type": "string",
      "default": ""
    },
    "numberOfItems": {
      "type": "number",
      "default": 5
    },
    "excludeCurrentPost": {
      "type": "boolean",
      "default": true
    },
    "displayDate": {
      "type": "boolean",
      "default": true
    },
    "displayExcerpt": {
      "type": "boolean",
      "default": true
    },
    "excerptLength": {
      "type": "number",
      "default": 55
    },
    "displayFeaturedImage": {
      "type": "boolean",
      "default": true
    },
    "titleTag": {
      "type": "string",
      "default": "h3"
    },
    "order": {
      "type": "string",
      "default": "desc"
    },
    "orderBy": {
      "type": "string",
      "default": "date"
    }
  },
  "textdomain": "my-dynamic-block",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "render": "file:./render.php",
  "viewScript": "file:./view.js"
}

import { __ } from "@wordpress/i18n";
// InspectorControls のインポートを追加
import {
  useBlockProps,
  RichText,
  InspectorControls,
} from "@wordpress/block-editor";
// パネルやコントロールのコンポーネントをインポート
import {
  PanelBody,
  PanelRow,
  QueryControls,
  SelectControl,
  ToggleControl,
  RangeControl,
} from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { dateI18n, format, getSettings } from "@wordpress/date";
import { Disabled } from "@wordpress/components";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
  // attributes から追加した属性を分割代入で変数に代入
  const {
    displayHeading,
    headingTag,
    headingText,
    numberOfItems,
    excludeCurrentPost,
    displayDate,
    displayExcerpt,
    excerptLength,
    displayFeaturedImage,
    titleTag,
    order,
    orderBy,
  } = attributes;

  const posts = useSelect(
    (select) => {
      // 現在の投稿IDを取得（クエリの exclude に指定）
      const postId = select("core/editor")?.getCurrentPostId();
      return select("core").getEntityRecords("postType", "post", {
        per_page: numberOfItems, // 表示件数
        _embed: 'wp:featuredmedia',
        order, // 並び順 （order: order, と同じこと）
        orderby: orderBy, // 並び替え基準 （キーと値で b の小文字大文字が異なります）
        exclude: excludeCurrentPost && postId ? [postId] : [], // 除外する投稿
      });
    },
    // 依存配列に抽出条件の属性を追加
    [numberOfItems, excludeCurrentPost, order, orderBy],
  );

  const pre = "wp-block-wdl-block-my-dynamic-block__";

  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  // 見出しタグのオプションのリストを作成
  const headingTagOptions = Array.from({ length: 6 }, (_, i) => ({
    label: `H${i + 1}`,
    value: `h${i + 1}`,
  }));

  // 投稿タイトルのタグを動的に生成コンポーネント
  const TitleTag = ({ tagName = "h3", children, ...props }) => {
    return React.createElement(tagName, { ...props }, children);
  };

  // インスペクターパネルにコントロールを追加
  return (
    <>
      <InspectorControls>
        <PanelBody title={__("Heading Settings", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display Heading", "my-dynamic-block")}
            checked={displayHeading}
            onChange={() => setAttributes({ displayHeading: !displayHeading })}
          />
          {displayHeading && (
            <SelectControl
              label={__("Heading Tag", "my-dynamic-block")}
              onChange={(value) => setAttributes({ headingTag: value })}
              value={headingTag}
              options={headingTagOptions}
            />
          )}
        </PanelBody>
        <PanelBody title={__("Content Settings", "my-dynamic-block")}>
          <QueryControls
            numberOfItems={numberOfItems}
            onNumberOfItemsChange={(value) =>
              setAttributes({ numberOfItems: value })
            }
            minItems={1}
            maxItems={10}
            {...{ order, orderBy }}
            onOrderChange={(value) => setAttributes({ order: value })}
            onOrderByChange={(value) => setAttributes({ orderBy: value })}
          />
          <PanelRow>
            <ToggleControl
              label={__("Display featured image", "my-dynamic-block")}
              checked={displayFeaturedImage}
              onChange={() =>
                setAttributes({ displayFeaturedImage: !displayFeaturedImage })
              }
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label={__("Display Date", "my-dynamic-block")}
              checked={displayDate}
              onChange={() => setAttributes({ displayDate: !displayDate })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label={__("Display Excerpt", "my-dynamic-block")}
              checked={displayExcerpt}
              onChange={() =>
                setAttributes({ displayExcerpt: !displayExcerpt })
              }
            />
          </PanelRow>
          {displayExcerpt && (
            <RangeControl
              label={__("Max number of words", "my-dynamic-block")}
              value={excerptLength}
              onChange={(value) => setAttributes({ excerptLength: value })}
              min={10}
              max={100}
            />
          )}
          <PanelRow>
            <ToggleControl
              label={__("Exclude Current Post", "my-dynamic-block")}
              checked={excludeCurrentPost}
              onChange={() =>
                setAttributes({ excludeCurrentPost: !excludeCurrentPost })
              }
            />
          </PanelRow>
          <SelectControl
            label={__("Title Tag", "my-dynamic-block")}
            onChange={(value) => setAttributes({ titleTag: value })}
            value={titleTag}
            options={headingTagOptions}
          />
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        {displayHeading && (
          <RichText
            tagName={headingTag}
            onChange={(value) => setAttributes({ headingText: value })}
            value={headingText}
            className={`${pre}heading`}
            placeholder={__("Enter heading text", "my-dynamic-block")}
          />
        )}
        <Disabled>
          <div className={`${pre}post-items`}>
            {posts &&
              posts.map((post) => {
                const title = getTextContent(post.title?.rendered);
                const excerpt = getTextContent(post.excerpt?.rendered)?.slice(0, excerptLength) + "...";
                const featuredMedia = post._embedded?.["wp:featuredmedia"]?.[0]?.media_details?.sizes?.medium?.source_url;
                const altText = post._embedded?.["wp:featuredmedia"]?.[0]?.alt_text || title;
                return (
                  <div key={post.id} className={`${pre}post-item`}>
                    {displayFeaturedImage && featuredMedia && (
                      <div className={`${pre}featured-image`}>
                        <a href={post.link}>
                          <img src={featuredMedia} alt={altText} />
                        </a>
                      </div>
                    )}
                    {title && (
                      <TitleTag tagName={titleTag} className={`${pre}post-title`}>
                        <a href={post.link}>{title}</a>
                      </TitleTag>
                    )}
                    {displayDate && post.date_gmt && (
                      <time dateTime={format("c", post.date_gmt)} className={`${pre}post-date`}>
                        {dateI18n(getSettings().formats.date, post.date_gmt)}
                      </time>
                    )}
                    {displayExcerpt && post.excerpt?.rendered && (
                      <p className={`${pre}post-excerpt`}>{excerpt}</p>
                    )}
                  </div>
                );
              })}
          </div>
        </Disabled>
      </div>
    </>
  );
}

const TitleTag = ({ tagName = "h3", children, ...props }) => {
  return React.createElement(tagName, { ...props }, children);
}

const TitleTag = ({ tagName = "h3", children, ...props }) => {
  const Tag = tagName; // タグ名を変数として使用
  return <Tag {...props}>{children}</Tag>;
};

// クラスは className、スタイルは {{}} で囲み、カンマ区切り、キャメルケースで指定
<TitleTag tagName="div" className="bar" style={{ color:"red", backgroundColor:"yellow"}}>
  <p>Hello World!</p>
</TitleTag>

<div class="bar" style="color: red; background-color: yellow;">
  <p>Hello World!</p>
</div>

<TitleTag tagName={titleTag}>
  <a href={post.link}>{post.title.rendered}</a>
</TitleTag>

React.createElement(
  'h2',
  { className: 'title-class', id: 'title-id' },
  'Hello!'
)

,
"categories": {
  "type": "array",
  "default": []
},
"allCategories": {
  "type": "boolean",
  "default": true
}

export default function Edit({ attributes, setAttributes }) {
  const {
    displayHeading,
    headingTag,
    headingText,
    numberOfItems,
    excludeCurrentPost,
    displayDate,
    displayExcerpt,
    excerptLength,
    displayFeaturedImage,
    titleTag,
    order,
    orderBy,
    categories,  // 追加
    allCategories,  // 追加
  } = attributes;

  // 投稿データに加えてカテゴリーのデータも取得
  const { categoriesData, posts } = useSelect(
    (select) => {
      const postId = select("core/editor")?.getCurrentPostId();
      // getEntityRecords を core ストアから取得
      const { getEntityRecords } = select("core");

      return {
        // カテゴリーのデータ
        categoriesData: getEntityRecords("taxonomy", "category", {
          per_page: -1,
          hide_empty: true //投稿がないカテゴリーも取得する場合は false を指定
        }) || [],
        // 投稿のデータ
        posts: getEntityRecords("postType", "post", {
          per_page: numberOfItems,
          _embed: 'wp:featuredmedia',
          order,
          orderby: orderBy,
          exclude: excludeCurrentPost && postId ? [postId] : [],
          // query にカテゴリーを追加
          categories: allCategories ? undefined : (categories.length > 0 ? categories : undefined),
        }),
      };
    },
    // 依存配列に categories と allCategories を追加
    [numberOfItems, excludeCurrentPost, order, orderBy, categories, allCategories],
  );

  // SelectControl コンポーネントの options に指定するカテゴリーのリスト
  let categoryOptions = [];
  if (categoriesData) {
    categoryOptions = categoriesData.map((cat) => {
      return { label: __(cat.name, "my-dynamic-block"), value: cat.id };
    });
  }
  //・・・以下省略・・・
}

[
  {
    "label": "General",
    "value": 1
  },
  {
    "label": "News",
    "value": 13
  },
  {
    "label": "WordPress",
    "value": 14
  }
]

<PanelBody title={__("Category Selection", "my-dynamic-block")}>
  <ToggleControl
    label={__("All Categories", "my-dynamic-block")}
    checked={allCategories}
    onChange={() => setAttributes({ allCategories: !allCategories })}
  />
  {!allCategories && (
    <SelectControl
      multiple
      label={__("Select Categories", "my-dynamic-block")}
      onChange={(value) => setAttributes({ categories: (value || []).map(Number) })}
      value={Array.isArray(categories) ? categories : []}
      options={categoryOptions}
    />
  )}
</PanelBody>

{!allCategories && (
    <SelectControl
    label={__("Select Categories", "my-dynamic-block")}
    onChange={(value) => setAttributes({ categories: value ? [value] : []})}
    value={Array.isArray(categories) ? categories : []}
    options={categoryOptions}
  />;
)}

{Array.isArray(posts) && posts.length === 0 && (
  <p>No post for the selected category.</p>
)}

import { __ } from "@wordpress/i18n";
import {
  useBlockProps,
  RichText,
  InspectorControls,
} from "@wordpress/block-editor";
import {
  PanelBody,
  PanelRow,
  QueryControls,
  SelectControl,
  ToggleControl,
  RangeControl,
} from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { dateI18n, format, getSettings } from "@wordpress/date";
import { Disabled } from "@wordpress/components";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
  const {
    displayHeading,
    headingTag,
    headingText,
    numberOfItems,
    excludeCurrentPost,
    displayDate,
    displayExcerpt,
    excerptLength,
    displayFeaturedImage,
    titleTag,
    order,
    orderBy,
    categories,  // 追加
    allCategories,  // 追加
  } = attributes;

  // 投稿データに加えてカテゴリーのデータも取得
  const { categoriesData, posts } = useSelect(
    (select) => {
      const postId = select("core/editor")?.getCurrentPostId();
      // getEntityRecords を core ストアから取得
      const { getEntityRecords } = select("core");

      return {
        // カテゴリーのデータ
        categoriesData: getEntityRecords("taxonomy", "category", {
          per_page: -1,
          hide_empty: true //投稿がないカテゴリーも取得する場合は false を指定
        }) || [],
        // 投稿のデータ
        posts: getEntityRecords("postType", "post", {
          per_page: numberOfItems,
          _embed: 'wp:featuredmedia',
          order,
          orderby: orderBy,
          exclude: excludeCurrentPost && postId ? [postId] : [],
          // query にカテゴリーを追加
          categories: allCategories ? undefined : (categories.length > 0 ? categories : undefined),
        }),
      };
    },
    // 依存配列に categories と allCategories を追加
    [numberOfItems, excludeCurrentPost, order, orderBy, categories, allCategories],
  );

  // SelectControl コンポーネントの options に指定するカテゴリーのリスト
  let categoryOptions = [];
  if (categoriesData) {
    categoryOptions = categoriesData.map((cat) => {
      return { label: __(cat.name, "my-dynamic-block"), value: cat.id };
    });
  }

  const pre = "wp-block-wdl-block-my-dynamic-block__";

  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  const headingTagOptions = Array.from({ length: 6 }, (_, i) => ({
    label: `H${i + 1}`,
    value: `h${i + 1}`,
  }));

  const TitleTag = ({ tagName = "h3", children, ...props }) => {
    return React.createElement(tagName, { ...props }, children);
  };

  // インスペクターパネルにコントロールを追加
  return (
    <>
      <InspectorControls>
        <PanelBody title={__("Heading Settings", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display Heading", "my-dynamic-block")}
            checked={displayHeading}
            onChange={() => setAttributes({ displayHeading: !displayHeading })}
          />
          {displayHeading && (
            <SelectControl
              label={__("Heading Tag", "my-dynamic-block")}
              onChange={(value) => setAttributes({ headingTag: value })}
              value={headingTag}
              options={headingTagOptions}
            />
          )}
        </PanelBody>
        <PanelBody title={__("Content Settings", "my-dynamic-block")}>
          <QueryControls
            numberOfItems={numberOfItems}
            onNumberOfItemsChange={(value) =>
              setAttributes({ numberOfItems: value })
            }
            minItems={1}
            maxItems={10}
            {...{ order, orderBy }}
            onOrderChange={(value) => setAttributes({ order: value })}
            onOrderByChange={(value) => setAttributes({ orderBy: value })}
          />
          <PanelRow>
            <ToggleControl
              label={__("Display featured image", "my-dynamic-block")}
              checked={displayFeaturedImage}
              onChange={() =>
                setAttributes({ displayFeaturedImage: !displayFeaturedImage })
              }
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label={__("Display Date", "my-dynamic-block")}
              checked={displayDate}
              onChange={() => setAttributes({ displayDate: !displayDate })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label={__("Display Excerpt", "my-dynamic-block")}
              checked={displayExcerpt}
              onChange={() =>
                setAttributes({ displayExcerpt: !displayExcerpt })
              }
            />
          </PanelRow>
          {displayExcerpt && (
            <RangeControl
              label={__("Max number of words", "my-dynamic-block")}
              value={excerptLength}
              onChange={(value) => setAttributes({ excerptLength: value })}
              min={10}
              max={100}
            />
          )}
          <PanelRow>
            <ToggleControl
              label={__("Exclude Current Post", "my-dynamic-block")}
              checked={excludeCurrentPost}
              onChange={() =>
                setAttributes({ excludeCurrentPost: !excludeCurrentPost })
              }
            />
          </PanelRow>
          <SelectControl
            label={__("Title Tag", "my-dynamic-block")}
            onChange={(value) => setAttributes({ titleTag: value })}
            value={titleTag}
            options={headingTagOptions}
          />
        </PanelBody>
        <PanelBody title={__("Category Selection", "my-dynamic-block")}>
          <ToggleControl
            label={__("All Categories", "my-dynamic-block")}
            checked={allCategories}
            onChange={() => setAttributes({ allCategories: !allCategories })}
          />
          {!allCategories && (
            <SelectControl
              multiple
              label={__("Select Categories", "my-dynamic-block")}
              onChange={(value) => setAttributes({ categories: (value || []).map(Number) })}
              value={Array.isArray(categories) ? categories : []}
              options={categoryOptions}
            />
          )}
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        {displayHeading && (
          <RichText
            tagName={headingTag}
            onChange={(value) => setAttributes({ headingText: value })}
            value={headingText}
            className={`${pre}heading`}
            placeholder={__("Enter heading text", "my-dynamic-block")}
          />
        )}
        <Disabled>
          {Array.isArray(posts) && posts.length === 0 && (
            <p>No post for the selected category.</p>
          )}
          <div className={`${pre}post-items`}>
            {posts &&
              posts.map((post) => {
                const title = getTextContent(post.title?.rendered);
                const excerpt = getTextContent(post.excerpt?.rendered)?.slice(0, excerptLength) + "...";
                const featuredMedia = post._embedded?.["wp:featuredmedia"]?.[0]?.media_details?.sizes?.medium?.source_url;
                const altText = post._embedded?.["wp:featuredmedia"]?.[0]?.alt_text || title;
                return (
                  <div key={post.id} className={`${pre}post-item`}>
                    {displayFeaturedImage && featuredMedia && (
                      <div className={`${pre}featured-image`}>
                        <a href={post.link}>
                          <img src={featuredMedia} alt={altText} />
                        </a>
                      </div>
                    )}
                    {title && (
                      <TitleTag tagName={titleTag} className={`${pre}post-title`}>
                        <a href={post.link}>{title}</a>
                      </TitleTag>
                    )}
                    {displayDate && post.date_gmt && (
                      <time dateTime={format("c", post.date_gmt)} className={`${pre}post-date`}>
                        {dateI18n(getSettings().formats.date, post.date_gmt)}
                      </time>
                    )}
                    {displayExcerpt && post.excerpt?.rendered && (
                      <p className={`${pre}post-excerpt`}>{excerpt}</p>
                    )}
                  </div>
                );
              })}
          </div>
        </Disabled>
      </div>
    </>
  );
}

,
"featuredImageSizeSlug": {
  "type": "string",
  "default": "medium"
},
"addLinkToFeaturedImage": {
  "type": "boolean",
  "default": true
}

import { __ } from "@wordpress/i18n";
import {
  useBlockProps,
  RichText,
  InspectorControls,
} from "@wordpress/block-editor";
import {
  PanelBody,
  PanelRow,
  QueryControls,
  SelectControl,
  ToggleControl,
  RangeControl,
} from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { dateI18n, format, getSettings } from "@wordpress/date";
import { Disabled } from "@wordpress/components";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
  const {
    displayHeading,
    headingTag,
    headingText,
    numberOfItems,
    excludeCurrentPost,
    displayDate,
    displayExcerpt,
    excerptLength,
    displayFeaturedImage,
    featuredImageSizeSlug,  // 追加
    addLinkToFeaturedImage,  // 追加
    titleTag,
    order,
    orderBy,
    categories,
    allCategories,
  } = attributes;

  // 追加で imageSizes を core/block-editor ストアから取得
  const { imageSizes, categoriesData, posts, } = useSelect(
    (select) => {
      const postId = select("core/editor")?.getCurrentPostId();
      const { getEntityRecords } = select("core");

      // 設定関連のオブジェクトを取得
      const settings = select("core/block-editor").getSettings();

      return {
        categoriesData: getEntityRecords("taxonomy", "category", {
          per_page: -1,
          hide_empty: true
        }) || [],
        posts: getEntityRecords("postType", "post", {
          per_page: numberOfItems,
          _embed: 'wp:featuredmedia',
          order,
          orderby: orderBy,
          exclude: excludeCurrentPost && postId ? [postId] : [],
          categories: allCategories ? undefined : (categories.length > 0 ? categories : undefined),
        }),
        // 設定のイメージサイズ情報
        imageSizes: settings.imageSizes,
      };
    },

    [ numberOfItems, excludeCurrentPost, order, orderBy, categories, allCategories ],
  );

  let categoryOptions = [];
  if (categoriesData) {
    categoryOptions = categoriesData.map((cat) => {
      return { label: __(cat.name, "my-dynamic-block"), value: cat.id };
    });
  }

  const pre = "wp-block-wdl-block-my-dynamic-block__";

  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  const headingTagOptions = Array.from({ length: 6 }, (_, i) => ({
    label: `H${i + 1}`,
    value: `h${i + 1}`,
  }));

  const TitleTag = ({ tagName = "h3", children, ...props }) => {
    return React.createElement(tagName, { ...props }, children);
  };

  // アイキャッチ画像の URL と代替テキストを返す関数
  function getFeaturedImageDetails( post, size ) {
    const image = post._embedded?.['wp:featuredmedia']?.[0];
    return {
      url:
        image?.media_details?.sizes?.[ size ]?.source_url ?? image?.source_url,
      alt: image?.alt_text || (post.title?.rendered ? getTextContent(post.title.rendered) : ""),
    };
  }

  // アイキャッチ画像サイズのオプションのリスト
  const imageSizeOptions = imageSizes
    .filter( ( { slug } ) => slug !== 'full' )
    .map( ( { name, slug } ) => ( {
      value: slug,
      label: name,
    } ) );

  return (
    <>
      <InspectorControls>
        <PanelBody title={__("Heading Settings", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display Heading", "my-dynamic-block")}
            checked={displayHeading}
            onChange={() => setAttributes({ displayHeading: !displayHeading })}
          />
          {displayHeading && (
            <SelectControl
              label={__("Heading Tag", "my-dynamic-block")}
              onChange={(value) => setAttributes({ headingTag: value })}
              value={headingTag}
              options={headingTagOptions}
            />
          )}
        </PanelBody>
        <PanelBody title={__("Sorting and filtering", "my-dynamic-block")}>
          <QueryControls
            numberOfItems={numberOfItems}
            onNumberOfItemsChange={(value) =>
              setAttributes({ numberOfItems: value })
            }
            minItems={1}
            maxItems={10}
            {...{ order, orderBy }}
            onOrderChange={(value) => setAttributes({ order: value })}
            onOrderByChange={(value) => setAttributes({ orderBy: value })}
          />
        </PanelBody>
        <PanelBody title={__("Featured image", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display featured image", "my-dynamic-block")}
            checked={displayFeaturedImage}
            onChange={() =>
              setAttributes({ displayFeaturedImage: !displayFeaturedImage })
            }
          />
          {displayFeaturedImage && (
            <>
              <SelectControl
                label={__("Resolution", "my-dynamic-block")}
                onChange={(value) => setAttributes({ featuredImageSizeSlug: value })}
                value={featuredImageSizeSlug}
                options={imageSizeOptions}
              />
              <ToggleControl
                label={ __( 'Add link to featured image', "my-dynamic-block") }
                checked={ addLinkToFeaturedImage }
                onChange={ ( value ) =>
                  setAttributes( { addLinkToFeaturedImage: value } )
                }
              />
            </>
          )}
        </PanelBody>
        <PanelBody title={__("Content Settings", "my-dynamic-block")}>
          <PanelRow>
            <ToggleControl
              label={__("Display Date", "my-dynamic-block")}
              checked={displayDate}
              onChange={() => setAttributes({ displayDate: !displayDate })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label={__("Display Excerpt", "my-dynamic-block")}
              checked={displayExcerpt}
              onChange={() =>
                setAttributes({ displayExcerpt: !displayExcerpt })
              }
            />
          </PanelRow>
          {displayExcerpt && (
            <RangeControl
              label={__("Max number of words", "my-dynamic-block")}
              value={excerptLength}
              onChange={(value) => setAttributes({ excerptLength: value })}
              min={10}
              max={100}
            />
          )}
          <PanelRow>
            <ToggleControl
              label={__("Exclude Current Post", "my-dynamic-block")}
              checked={excludeCurrentPost}
              onChange={() =>
                setAttributes({ excludeCurrentPost: !excludeCurrentPost })
              }
            />
          </PanelRow>
          <SelectControl
            label={__("Title Tag", "my-dynamic-block")}
            onChange={(value) => setAttributes({ titleTag: value })}
            value={titleTag}
            options={headingTagOptions}
          />
        </PanelBody>
        <PanelBody title={__("Category Selection", "my-dynamic-block")}>
          <ToggleControl
            label={__("All Categories", "my-dynamic-block")}
            checked={allCategories}
            onChange={() => setAttributes({ allCategories: !allCategories })}
          />
          {!allCategories && (
            <SelectControl
              multiple
              label={__("Select Categories", "my-dynamic-block")}
              onChange={(value) => setAttributes({ categories: (value || []).map(Number) })}
              value={Array.isArray(categories) ? categories : []}
              options={categoryOptions}
            />
          )}
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        {displayHeading && (
          <RichText
            tagName={headingTag}
            onChange={(value) => setAttributes({ headingText: value })}
            value={headingText}
            className={`${pre}heading`}
            placeholder={__("Enter heading text", "my-dynamic-block")}
          />
        )}
        <Disabled>
          {Array.isArray(posts) && posts.length === 0 && (
            <p>No post for the selected category.</p>
          )}
          <div className={`${pre}post-items`}>
            {posts &&
              posts.map((post) => {
                const title = getTextContent(post.title?.rendered);
                const excerpt = getTextContent(post.excerpt?.rendered)?.slice(0, excerptLength) + "...";
                const { url: featuredMedia, alt: altText } = getFeaturedImageDetails( post, featuredImageSizeSlug );
                const renderFeaturedImage = displayFeaturedImage && featuredMedia;
                const featuredImage = renderFeaturedImage && (
                  <img src={ featuredMedia } alt={ altText } />
                );

                return (
                  <div key={post.id} className={`${pre}post-item`}>
                    {renderFeaturedImage && (
                      <div className={`${pre}featured-image`}>
                        { addLinkToFeaturedImage ? (
                          <a href={post.link}>
                            { featuredImage }
                          </a>
                        ) :  (
                          featuredImage
                        )  }
                      </div>
                    )}
                    {title && (
                      <TitleTag tagName={titleTag} className={`${pre}post-title`}>
                        <a href={post.link}>{title}</a>
                      </TitleTag>
                    )}
                    {displayDate && post.date_gmt && (
                      <time dateTime={format("c", post.date_gmt)} className={`${pre}post-date`}>
                        {dateI18n(getSettings().formats.date, post.date_gmt)}
                      </time>
                    )}
                    {displayExcerpt && post.excerpt?.rendered && (
                      <p className={`${pre}post-excerpt`}>{excerpt}</p>
                    )}
                  </div>
                );
              })}
          </div>
        </Disabled>
      </div>
    </>
  );
}

// アイキャッチ画像の URL と代替テキストを返す関数
function getFeaturedImageDetails( post, size ) {
  const image = post._embedded?.['wp:featuredmedia']?.[0];
  return {
    url:
      image?.media_details?.sizes?.[ size ]?.source_url ?? image?.source_url,
    alt: image?.alt_text || (post.title?.rendered ? getTextContent(post.title.rendered) : ""),
  };
}

// アイキャッチ画像サイズのオプションのリスト
const imageSizeOptions = imageSizes
  .filter( ( { slug } ) => slug !== 'full' )
  .map( ( { name, slug } ) => ( {
    value: slug,
    label: name,
  } ) );

[
  {slug: 'thumbnail', name: 'サムネイル'},
  {slug: 'medium', name: '中'},
  {slug: 'large', name: '大'},
  {slug: 'full', name: 'フルサイズ'}
]

[
  {value: 'thumbnail', label: 'サムネイル'},
  {value: 'medium', label: '中'},
  {value: 'large', label: '大'}
]

<PanelBody title={__("Featured image", "my-dynamic-block")}>
  <ToggleControl
    label={__("Display featured image", "my-dynamic-block")}
    checked={displayFeaturedImage}
    onChange={() =>
      setAttributes({ displayFeaturedImage: !displayFeaturedImage })
    }
  />
  {displayFeaturedImage && (
    <>
      <SelectControl
        label={__("Resolution", "my-dynamic-block")}
        onChange={(value) => setAttributes({ featuredImageSizeSlug: value })}
        value={featuredImageSizeSlug}
        options={imageSizeOptions}
      />
      <ToggleControl
        label={ __( 'Add link to featured image', "my-dynamic-block") }
        checked={ addLinkToFeaturedImage }
        onChange={ ( value ) =>
          setAttributes( { addLinkToFeaturedImage: value } )
        }
      />
    </>
  )}
</PanelBody>

{posts &&
  posts.map((post) => {
    const title = getTextContent(post.title?.rendered);
    const excerpt = getTextContent(post.excerpt?.rendered)?.slice(0, excerptLength) + "...";
    const { url: featuredMedia, alt: altText } = getFeaturedImageDetails( post, featuredImageSizeSlug );
    const renderFeaturedImage = displayFeaturedImage && featuredMedia;
    const featuredImage = renderFeaturedImage && (
      <img src={ featuredMedia } alt={ altText } />
    );
    return (
      <div key={post.id} className={`${pre}post-item`}>
        {renderFeaturedImage && (
          <div className={`${pre}featured-image`}>
            { addLinkToFeaturedImage ? (
              <a href={post.link}>
                { featuredImage }
              </a>
            ) :  (
              featuredImage
            )  }
          </div>
        )}
    ...
    )
  })
}

const preventRedirect = (e) => {
  e.preventDefault();
}

import { __ } from "@wordpress/i18n";
import {
  useBlockProps,
  RichText,
  InspectorControls,
} from "@wordpress/block-editor";
import {
  PanelBody,
  PanelRow,
  QueryControls,
  SelectControl,
  ToggleControl,
  RangeControl,
} from "@wordpress/components";
// useDispatch をインポート
import { useSelect, useDispatch } from '@wordpress/data';
import { dateI18n, format, getSettings } from "@wordpress/date";
// Disabled のインポートを削除
// import { Disabled } from "@wordpress/components";
import "./editor.scss";

// core/notices ストアの createWarningNotice アクションを取得
const { createWarningNotice } = useDispatch( 'core/notices' );

// リンクがクリックされた際のイベントハンドラーを定義
const showRedirectionPreventedNotice = ( event ) => {
  // リンクのデフォルトの動作（リダイレクトなど）を防止
  event.preventDefault();
  // 警告を snackbar タイプの通知として表示
  createWarningNotice( __( "Links are disabled in the editor.", "my-dynamic-block" ), {
    type: 'snackbar',
  } );
};

return (
  <div key={post.id} className={`${pre}post-item`}>
  {renderFeaturedImage && (
    <div className={`${pre}featured-image`}>
      { addLinkToFeaturedImage ? (
        <a href={post.link} onClick={ showRedirectionPreventedNotice}>
          { featuredImage }
        </a>
      ) :  (
        featuredImage
      )  }
    </div>
  )}
  {title && (
    <TitleTag tagName={titleTag} className={`${pre}post-title`}>
      <a href={post.link} onClick={ showRedirectionPreventedNotice}>
        {title}
      </a>
    </TitleTag>
  )}
  ...
)

"supports": {
  "html": false,
  "align": true,
  "color": {
    "gradients": true,
    "link": true
  },
  "spacing": {
    "margin": true,
    "padding": true
  },
  "typography": {
    "fontSize": true,
    "lineHeight": true
  }
},

<?php

global $post; // 現在の投稿情報を取得

// クエリの引数を設定
$args = array(
  'posts_per_page'      => $attributes['numberOfItems'], // 表示する投稿数
  'post_status'         => 'publish', // 公開済みの投稿のみ取得
  'order'               => $attributes['order'], // 並び順（昇順・降順）
  'orderby'             => $attributes['orderBy'], // 並び替えの基準（例: 日付, タイトル）
  'ignore_sticky_posts' => true, // スティッキーポスト（先頭に固定表示された投稿）を無視
  'no_found_rows'       => true, // クエリの総投稿数を取得しない（パフォーマンス向上）
);

// allCategories と categories の設定からカテゴリーの絞り込み
if (empty($attributes['allCategories']) && !empty($attributes['categories']) && is_array($attributes['categories'])) {
  $args['category__in'] = array_map('intval', $attributes['categories']);  // カテゴリーIDを整数に変換
}

// 現在の投稿 ID を取得
$current_post_id = get_the_ID();

// excludeCurrentPost の値により現在の投稿を除外
if (isset($attributes['excludeCurrentPost']) && $attributes['excludeCurrentPost'] && $current_post_id) {
  $args['post__not_in'] = [(int) $current_post_id];
}

// WP_Query で投稿を取得
$query = new WP_Query($args);

// アイキャッチ画像のキャッシュを有効化（パフォーマンス向上）
if (isset($attributes['displayFeaturedImage']) && $attributes['displayFeaturedImage'] && $query->have_posts()) {
  update_post_thumbnail_cache($query);
}

// CSS クラスのプレフィックスを設定
$pre = 'wp-block-wdl-block-my-dynamic-block__';

// 投稿リストのHTMLを格納する変数
$post_items_markup = '';

// displayHeading の値により見出しを表示する場合
if (!empty($attributes['displayHeading']) && !empty($attributes['headingText']) && !empty($attributes['headingTag'])) {
  $post_items_markup .= sprintf(
    '<%1$s class="%2$sheading">%3$s</%1$s>',
    esc_attr($attributes['headingTag']), // 指定された見出しタグ（例: h2, h3）
    esc_attr($pre), // クラス名のプレフィックス
    esc_html($attributes['headingText']) // 見出しのテキスト
  );
}

// 投稿リストのコンテナを作成
$post_items_markup .= sprintf(
  '<div class="%1$spost-items">',
  esc_attr($pre)
);

// 投稿が存在すれば
if ($query->have_posts()) {
  // 投稿のループ処理
  while ($query->have_posts()) {
    $query->the_post();
    $post_link = esc_url(get_permalink());  // 投稿のURL
    $title     = wp_strip_all_tags(get_the_title());  // 投稿のタイトル（HTMLタグを除去）

    // 投稿アイテムのコンテナを作成
    $post_items_markup .= sprintf(
      '<div class="%1$spost-item">',
      esc_attr($pre)
    );

    // アイキャッチ画像を表示する場合
    if (isset($attributes['displayFeaturedImage']) && $attributes['displayFeaturedImage'] && has_post_thumbnail()) {

      $thumbnail_alt_value = get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true);

      // alt属性が空の場合、投稿タイトルを代わりに設定
      if (!$thumbnail_alt_value) {
        $thumbnail_alt_value = $title;
      }

      // アイキャッチ画像のHTMLを取得
      $featured_image = get_the_post_thumbnail(
        get_the_ID(),
        $attributes['featuredImageSizeSlug'],  // 画像サイズ
        array(
          'alt'   => esc_attr($thumbnail_alt_value),  // alt属性の設定
        )
      );

      // アイキャッチ画像にリンクを追加する場合
      if (!empty($attributes['addLinkToFeaturedImage'])) {
        $featured_image = sprintf(
          '<a href="%1$s" aria-label="%2$s">%3$s</a>',
          esc_url($post_link),
          esc_attr($title), // アクセシビリティのためのラベル
          $featured_image
        );
      }

      // 画像のHTMLを追加
      $post_items_markup .= sprintf(
        '<div class="%1$sfeatured-image">%2$s</div>',
        esc_attr($pre),
        $featured_image
      );
    }

    // 投稿タイトルのHTMLを追加
    $post_items_markup .= sprintf(
      '<%1$s class="%2$spost-title"><a href="%3$s">%4$s</a></%1$s>',
      $attributes['titleTag'],  // 指定されたタイトルタグ（例: h2, h3）
      esc_attr($pre),
      esc_url($post_link),
      $title
    );

    // 投稿日を表示する場合
    if (isset($attributes['displayDate']) && $attributes['displayDate']) {
      $post_items_markup .= sprintf(
        '<time datetime="%1$s" class="%2$spost-date">%3$s</time>',
        esc_attr(get_the_date('c')),  // ISOフォーマットの日付
        esc_attr($pre),
        esc_html(get_the_date()) // フォーマット済みの日付
      );
    }

    // 抜粋を表示する場合
    if (isset($attributes['displayExcerpt']) && $attributes['displayExcerpt'] && isset($attributes['excerptLength']) && $attributes['excerptLength']) {
      $post_items_markup .= sprintf(
        '<p class="%1$spost-excerpt">%2$s</p>',
        esc_attr($pre),
        // 抜粋の長さを制限（コンテンツからは wp_strip_all_tags でタグを除去）
        wp_trim_words(wp_strip_all_tags(get_the_excerpt()), (int) $attributes['excerptLength'], '...')
      );
    }
    // 投稿アイテムの終了タグ
    $post_items_markup .= "</div>\n";
  }
} else {
  // 投稿がない場合のメッセージ
  $post_items_markup .= '<p>' . esc_html__('No posts to display.', 'my-dynamic-block') . '</p>';
}

// 投稿リストの終了タグ
$post_items_markup .= "</div>\n";

// 投稿データをリセット
wp_reset_postdata();

// ブロックのラッパー属性を取得
$wrapper_attributes = get_block_wrapper_attributes();

// wp_kses() に指定するデフォルトの許可タグを取得
$allowed_tags = wp_kses_allowed_html('post');
// 許可タグのリストに img の srcset 属性を追加
$allowed_tags['img']['srcset'] = true;
// 許可タグのリストに img の sizes 属性を追加
$allowed_tags['img']['sizes'] = true;

// 最終的なHTMLを出力
printf(
  '<div %1$s>%2$s</div>',
  $wrapper_attributes,
  // セキュリティ対策としてHTMLのコンテンツをサニタイズ（無害化）
  wp_kses($post_items_markup, $allowed_tags)
);

,
"columns": {
  "type": "number",
  "default": 1
}

import { __ } from "@wordpress/i18n";
import {
  useBlockProps,
  RichText,
  InspectorControls,
} from "@wordpress/block-editor";
import {
  PanelBody,
  PanelRow,
  QueryControls,
  SelectControl,
  ToggleControl,
  RangeControl,
} from "@wordpress/components";
import { useSelect, useDispatch } from "@wordpress/data";
import { dateI18n, format, getSettings } from "@wordpress/date";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
  const {
    displayHeading,
    headingTag,
    headingText,
    numberOfItems,
    excludeCurrentPost,
    displayDate,
    displayExcerpt,
    excerptLength,
    displayFeaturedImage,
    featuredImageSizeSlug,
    addLinkToFeaturedImage,
    titleTag,
    order,
    orderBy,
    categories,
    allCategories,
    columns,  // 追加
  } = attributes;

  const { imageSizes, categoriesData, posts, } = useSelect(
    (select) => {
      const postId = select("core/editor")?.getCurrentPostId();
      const { getEntityRecords } = select("core");
      const settings = select("core/block-editor").getSettings();
      return {
        categoriesData: getEntityRecords("taxonomy", "category", {
          per_page: -1,
          hide_empty: true
        }) || [],
        posts: getEntityRecords("postType", "post", {
          per_page: numberOfItems,
          _embed: 'wp:featuredmedia',
          order,
          orderby: orderBy,
          exclude: excludeCurrentPost && postId ? [postId] : [],
          categories: allCategories ? undefined : (categories.length > 0 ? categories : undefined),
        }),
        imageSizes: settings.imageSizes,
      };
    },
    [ numberOfItems, excludeCurrentPost, order, orderBy, categories, allCategories ],
  );

  let categoryOptions = [];
  if (categoriesData) {
    categoryOptions = categoriesData.map((cat) => {
      return { label: __(cat.name, "my-dynamic-block"), value: cat.id };
    });
  }

  const pre = "wp-block-wdl-block-my-dynamic-block__";

  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  const headingTagOptions = Array.from({ length: 6 }, (_, i) => ({
    label: `H${i + 1}`,
    value: `h${i + 1}`,
  }));

  const TitleTag = ({ tagName = "h3", children, ...props }) => {
    return React.createElement(tagName, { ...props }, children);
  };

  function getFeaturedImageDetails( post, size ) {
    const image = post._embedded?.['wp:featuredmedia']?.[0];
    return {
      url:
        image?.media_details?.sizes?.[ size ]?.source_url ?? image?.source_url,
      alt: image?.alt_text || (post.title?.rendered ? getTextContent(post.title.rendered) : ""),
    };
  }

  const imageSizeOptions = imageSizes
    .filter( ( { slug } ) => slug !== 'full' )
    .map( ( { name, slug } ) => ( {
      value: slug,
      label: name,
    } ) );

  const { createWarningNotice } = useDispatch( 'core/notices' );

  const showRedirectionPreventedNotice = ( event ) => {
    event.preventDefault();
    createWarningNotice( __( "Links are disabled in the editor.", "my-dynamic-block" ), {
      type: 'snackbar',
    } );
  };

  return (
    <>
      <InspectorControls>
        <PanelBody title={__("Heading Settings", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display Heading", "my-dynamic-block")}
            checked={displayHeading}
            onChange={() => setAttributes({ displayHeading: !displayHeading })}
          />
          {displayHeading && (
            <SelectControl
              label={__("Heading Tag", "my-dynamic-block")}
              onChange={(value) => setAttributes({ headingTag: value })}
              value={headingTag}
              options={headingTagOptions}
            />
          )}
        </PanelBody>
        <PanelBody title={__("Sorting and filtering", "my-dynamic-block")}>
          <QueryControls
            numberOfItems={numberOfItems}
            onNumberOfItemsChange={(value) =>
              setAttributes({ numberOfItems: value })
            }
            minItems={1}
            maxItems={10}
            {...{ order, orderBy }}
            onOrderChange={(value) => setAttributes({ order: value })}
            onOrderByChange={(value) => setAttributes({ orderBy: value })}
          />
        </PanelBody>
        <PanelBody title={__("Featured image", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display featured image", "my-dynamic-block")}
            checked={displayFeaturedImage}
            onChange={() =>
              setAttributes({ displayFeaturedImage: !displayFeaturedImage })
            }
          />
          {displayFeaturedImage && (
            <>
              <SelectControl
                label={__("Resolution", "my-dynamic-block")}
                onChange={(value) => setAttributes({ featuredImageSizeSlug: value })}
                value={featuredImageSizeSlug}
                options={imageSizeOptions}
              />
              <ToggleControl
                label={ __( 'Add link to featured image', "my-dynamic-block") }
                checked={ addLinkToFeaturedImage }
                onChange={ ( value ) =>
                  setAttributes( { addLinkToFeaturedImage: value } )
                }
              />
            </>
          )}
        </PanelBody>
        <PanelBody title={__("Content Settings", "my-dynamic-block")}>
          <RangeControl
            label={__("Number of columns", "my-dynamic-block")}
            value={columns}
            onChange={(value) => setAttributes({ columns: value })}
            min={1}
            max={5}
          />
          <PanelRow>
            <ToggleControl
              label={__("Display Date", "my-dynamic-block")}
              checked={displayDate}
              onChange={() => setAttributes({ displayDate: !displayDate })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label={__("Display Excerpt", "my-dynamic-block")}
              checked={displayExcerpt}
              onChange={() =>
                setAttributes({ displayExcerpt: !displayExcerpt })
              }
            />
          </PanelRow>
          {displayExcerpt && (
            <RangeControl
              label={__("Max number of words", "my-dynamic-block")}
              value={excerptLength}
              onChange={(value) => setAttributes({ excerptLength: value })}
              min={10}
              max={100}
            />
          )}
          <PanelRow>
            <ToggleControl
              label={__("Exclude Current Post", "my-dynamic-block")}
              checked={excludeCurrentPost}
              onChange={() =>
                setAttributes({ excludeCurrentPost: !excludeCurrentPost })
              }
            />
          </PanelRow>
          <SelectControl
            label={__("Title Tag", "my-dynamic-block")}
            onChange={(value) => setAttributes({ titleTag: value })}
            value={titleTag}
            options={headingTagOptions}
          />
        </PanelBody>
        <PanelBody title={__("Category Selection", "my-dynamic-block")}>
          <ToggleControl
            label={__("All Categories", "my-dynamic-block")}
            checked={allCategories}
            onChange={() => setAttributes({ allCategories: !allCategories })}
          />
          {!allCategories && (
            <SelectControl
              multiple
              label={__("Select Categories", "my-dynamic-block")}
              onChange={(value) => setAttributes({ categories: (value || []).map(Number) })}
              value={Array.isArray(categories) ? categories : []}
              options={categoryOptions}
            />
          )}
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        {displayHeading && (
          <RichText
            tagName={headingTag}
            onChange={(value) => setAttributes({ headingText: value })}
            value={headingText}
            className={`${pre}heading`}
            placeholder={__("Enter heading text", "my-dynamic-block")}
          />
        )}
        {Array.isArray(posts) && posts.length === 0 && (
          <p>No post for the selected category.</p>
        )}

        <div className={`${pre}post-items columns-${columns > 0 ? columns : 1}`}>
          {posts &&
            posts.map((post) => {
              const title = getTextContent(post.title?.rendered);
              const excerpt = getTextContent(post.excerpt?.rendered)?.slice(0, excerptLength) + "...";
              const { url: featuredMedia, alt: altText } = getFeaturedImageDetails( post, featuredImageSizeSlug );
              const renderFeaturedImage = displayFeaturedImage && featuredMedia;
              const featuredImage = renderFeaturedImage && (
                <img src={ featuredMedia } alt={ altText } />
              );
              return (
                <div key={post.id} className={`${pre}post-item`}>
                  {renderFeaturedImage && (
                    <div className={`${pre}featured-image`}>
                      { addLinkToFeaturedImage ? (
                        <a href={post.link} onClick={ showRedirectionPreventedNotice}>
                          { featuredImage }
                        </a>
                      ) :  (
                        featuredImage
                      )  }
                    </div>
                  )}
                  {title && (
                    <TitleTag tagName={titleTag} className={`${pre}post-title`}>
                      <a href={post.link} onClick={ showRedirectionPreventedNotice}>
                        {title}
                      </a>
                    </TitleTag>
                  )}
                  {displayDate && post.date_gmt && (
                    <time dateTime={format("c", post.date_gmt)} className={`${pre}post-date`}>
                      {dateI18n(getSettings().formats.date, post.date_gmt)}
                    </time>
                  )}
                  {displayExcerpt && post.excerpt?.rendered && (
                    <p className={`${pre}post-excerpt`}>{excerpt}</p>
                  )}
                </div>
              );
            })}
        </div>
      </div>
    </>
  );
}

// $attributes['columns'] のバリデーション
$columns = isset($attributes['columns']) && is_numeric($attributes['columns']) ? (int) $attributes['columns'] : 1;

// $columns の値を使ってクラスを追加
$post_items_markup .= sprintf(
  '<div class="%1$spost-items columns-%2$d">',
  esc_attr($pre),
  esc_attr($columns)
);

<?php

global $post;

$args = array(
  'posts_per_page'      => $attributes['numberOfItems'],
  'post_status'         => 'publish',
  'order'               => $attributes['order'],
  'orderby'             => $attributes['orderBy'],
  'ignore_sticky_posts' => true,
  'no_found_rows'       => true,
);

if (empty($attributes['allCategories']) && !empty($attributes['categories']) && is_array($attributes['categories'])) {
  $args['category__in'] = array_map('intval', $attributes['categories']);
}

$current_post_id = get_the_ID();

if (isset($attributes['excludeCurrentPost']) && $attributes['excludeCurrentPost'] && $current_post_id) {
  $args['post__not_in'] = [(int) $current_post_id];
}

$query = new WP_Query($args);

if (isset($attributes['displayFeaturedImage']) && $attributes['displayFeaturedImage'] && $query->have_posts()) {
  update_post_thumbnail_cache($query);
}

$pre = 'wp-block-wdl-block-my-dynamic-block__';

$post_items_markup = '';

if (!empty($attributes['displayHeading']) && !empty($attributes['headingText']) && !empty($attributes['headingTag'])) {
  $post_items_markup .= sprintf(
    '<%1$s class="%2$sheading">%3$s</%1$s>',
    esc_attr($attributes['headingTag']),
    esc_attr($pre),
    esc_html($attributes['headingText'])
  );
}

// $attributes['columns'] のバリデーション
$columns = isset($attributes['columns']) && is_numeric($attributes['columns']) ? (int) $attributes['columns'] : 1;
// $columns の値を使ってクラスを追加
$post_items_markup .= sprintf(
  '<div class="%1$spost-items columns-%2$d">',
  esc_attr($pre),
  esc_attr($columns)
);

if ($query->have_posts()) {
  while ($query->have_posts()) {
    $query->the_post();
    $post_link = esc_url(get_permalink());
    $title     = wp_strip_all_tags(get_the_title());

    $post_items_markup .= sprintf(
      '<div class="%1$spost-item">',
      esc_attr($pre)
    );

    if (isset($attributes['displayFeaturedImage']) && $attributes['displayFeaturedImage'] && has_post_thumbnail()) {

      $thumbnail_alt_value = get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true);

      if (!$thumbnail_alt_value) {
        $thumbnail_alt_value = $title;
      }

      $featured_image = get_the_post_thumbnail(
        get_the_ID(),
        $attributes['featuredImageSizeSlug'],
        array(
          'alt'   => esc_attr($thumbnail_alt_value),
        )
      );

      if (!empty($attributes['addLinkToFeaturedImage'])) {
        $featured_image = sprintf(
          '<a href="%1$s" aria-label="%2$s">%3$s</a>',
          esc_url($post_link),
          esc_attr($title),
          $featured_image
        );
      }

      $post_items_markup .= sprintf(
        '<div class="%1$sfeatured-image">%2$s</div>',
        esc_attr($pre),
        $featured_image
      );
    }

    $post_items_markup .= sprintf(
      '<%1$s class="%2$spost-title"><a href="%3$s">%4$s</a></%1$s>',
      $attributes['titleTag'],
      esc_attr($pre),
      esc_url($post_link),
      $title
    );

    if (isset($attributes['displayDate']) && $attributes['displayDate']) {
      $post_items_markup .= sprintf(
        '<time datetime="%1$s" class="%2$spost-date">%3$s</time>',
        esc_attr(get_the_date('c')),
        esc_attr($pre),
        esc_html(get_the_date())
      );
    }

    if (isset($attributes['displayExcerpt']) && $attributes['displayExcerpt'] && isset($attributes['excerptLength']) && $attributes['excerptLength']) {
      $post_items_markup .= sprintf(
        '<p class="%1$spost-excerpt">%2$s</p>',
        esc_attr($pre),
        wp_trim_words(wp_strip_all_tags(get_the_excerpt()), (int) $attributes['excerptLength'], '...')
      );
    }
    $post_items_markup .= "</div>\n";
  }
} else {
  $post_items_markup .= '<p>' . esc_html__('No posts to display.', 'my-dynamic-block') . '</p>';
}

$post_items_markup .= "</div>\n";

wp_reset_postdata();

$wrapper_attributes = get_block_wrapper_attributes();

$allowed_tags = wp_kses_allowed_html('post');
$allowed_tags['img']['srcset'] = true;
$allowed_tags['img']['sizes'] = true;

printf(
  '<div %1$s>%2$s</div>',
  $wrapper_attributes,
  wp_kses($post_items_markup, $allowed_tags)
);

 .wp-block-wdl-block-my-dynamic-block {
  background-color: #21759b;
  color: #fff;
  padding: 2px;
  box-sizing: border-box;

  .wp-block-wdl-block-my-dynamic-block__post-items {
    display: grid;
    gap: 1rem;

    // columns-1 は常に 1 カラム
    &.columns-1 {
      grid-template-columns: repeat(1, 1fr);
    }

    // ブレークポイント設定のマップ（キー：ブレークポイント、値：カラム数）
    $grid-breakpoints: (
      576px: 2,
      768px: 3,
      992px: 4,
      1200px: 5
    );

    // 2〜5カラムのデフォルトを 1カラムに
    @for $i from 2 through 5 {
      &.columns-#{$i} {
        grid-template-columns: repeat(1, 1fr);
      }
    }

    // メディアクエリでカラム数を調整
    @each $bp, $cols in $grid-breakpoints {
      @media (min-width: $bp) {
        @for $i from $cols through 5 {
          &.columns-#{$i} {
            grid-template-columns: repeat($cols, 1fr);
          }
        }
      }
    }

    // 小さい画面では gap を小さく
    @media (max-width: 768px) {
      gap: 0.5rem;
    }

    // 2カラム以上の共通画像スタイル
    &.columns-2,
    &.columns-3,
    &.columns-4,
    &.columns-5 {
      .wp-block-wdl-block-my-dynamic-block__featured-image img {
        object-fit: cover;
        aspect-ratio: 16 / 10;
        width: 100%;
      }
    }

    // 画像のデフォルトスタイル
    .wp-block-wdl-block-my-dynamic-block__featured-image img {
      max-width: 100%;
      height: auto;
    }
  }
}

@each $変数 in リスト {
  // 繰り返したい処理
}

@each $キー, $値 in マップ {
  // 繰り返したい処理
}

@each $bp, $cols in $grid-breakpoints {
  @media (min-width: $bp) {
    @for $i from $cols through 5 {
      &.columns-#{$i} {
        grid-template-columns: repeat($cols, 1fr);
      }
    }
  }
}

/* 576px以上で 2カラム適用 （$bp が 576px、$cols が 2） */
@media (min-width: 576px) {
  .columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .columns-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .columns-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 768px以上で 3カラム適用 （$bp が 768px、$cols が 3） */
@media (min-width: 768px) {
  .columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .columns-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .columns-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 992px以上で 4カラム適用 （$bp が 992px、$cols が 4）*/
@media (min-width: 992px) {
  .columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .columns-5 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 1200px以上で 5カラム適用 （$bp が 1200px、$cols が 5） */
@media (min-width: 1200px) {
  .columns-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

,
"featuredImageSizeWidth": {
  "type": "number",
  "default": null
},
"featuredImageSizeHeight": {
  "type": "number",
  "default": null
},
"featuredImageMaxStyleAdded": {
  "type": "boolean",
  "default": false
},

import { __ } from "@wordpress/i18n";
import {
  useBlockProps,
  RichText,
  InspectorControls,
  // __experimentalImageSizeControl を ImageSizeControl という名前でインポート
  __experimentalImageSizeControl as ImageSizeControl,
} from "@wordpress/block-editor";
import {
  PanelBody,
  PanelRow,
  QueryControls,
  SelectControl,
  ToggleControl,
  RangeControl,
} from "@wordpress/components";
import { useSelect, useDispatch } from "@wordpress/data";
import { dateI18n, format, getSettings } from "@wordpress/date";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
  const {
    displayHeading,
    headingTag,
    headingText,
    numberOfItems,
    excludeCurrentPost,
    displayDate,
    displayExcerpt,
    excerptLength,
    displayFeaturedImage,
    featuredImageSizeSlug,
    featuredImageSizeWidth, // 追加
    featuredImageSizeHeight, // 追加
    featuredImageMaxStyleAdded, // 追加
    addLinkToFeaturedImage,
    titleTag,
    order,
    orderBy,
    categories,
    allCategories,
    columns,
  } = attributes;

  // 追加で defaultImageWidth と defaultImageHeight（アイキャッチ画像のデフォルトの幅と高さ）を取得
  const {
    imageSizes,
    categoriesData,
    posts,
    defaultImageWidth,  // 追加
    defaultImageHeight,  // 追加
  } = useSelect(
    (select) => {
      const postId = select("core/editor")?.getCurrentPostId();
      const { getEntityRecords } = select("core");
      const settings = select("core/block-editor").getSettings();
      return {
        categoriesData: getEntityRecords("taxonomy", "category", {
          per_page: -1,
          hide_empty: true
        }) || [],
        posts: getEntityRecords("postType", "post", {
          per_page: numberOfItems,
          _embed: 'wp:featuredmedia',
          order,
          orderby: orderBy,
          exclude: excludeCurrentPost && postId ? [postId] : [],
          categories: allCategories ? undefined : (categories.length > 0 ? categories : undefined),
        }),
        imageSizes: settings.imageSizes,
        // アイキャッチ画像のデフォルトの幅と高さを settings から取得
        defaultImageWidth: settings.imageDimensions?.[ featuredImageSizeSlug ]?.width ?? 0,
        defaultImageHeight: settings.imageDimensions?.[ featuredImageSizeSlug ]?.height ?? 0,
      };
    },
    // featuredImageSizeSlug を依存配列に追加
    [ numberOfItems, excludeCurrentPost, order, orderBy, categories, allCategories, featuredImageSizeSlug ],
  );

  let categoryOptions = [];
  if (categoriesData) {
    categoryOptions = categoriesData.map((cat) => {
      return { label: __(cat.name, "my-dynamic-block"), value: cat.id };
    });
  }

  const pre = "wp-block-wdl-block-my-dynamic-block__";

  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  const headingTagOptions = Array.from({ length: 6 }, (_, i) => ({
    label: `H${i + 1}`,
    value: `h${i + 1}`,
  }));

  const TitleTag = ({ tagName = "h3", children, ...props }) => {
    return React.createElement(tagName, { ...props }, children);
  };

  function getFeaturedImageDetails( post, size ) {
    const image = post._embedded?.['wp:featuredmedia']?.[0];
    return {
      url:
        image?.media_details?.sizes?.[ size ]?.source_url ?? image?.source_url,
      alt: image?.alt_text || (post.title?.rendered ? getTextContent(post.title.rendered) : ""),
    };
  }

  const imageSizeOptions = imageSizes
    .filter( ( { slug } ) => slug !== 'full' )
    .map( ( { name, slug } ) => ( {
      value: slug,
      label: name,
    } ) );

  const { createWarningNotice } = useDispatch( 'core/notices' );

  const showRedirectionPreventedNotice = ( event ) => {
    event.preventDefault();
    createWarningNotice( __( "Links are disabled in the editor.", "my-dynamic-block" ), {
      type: 'snackbar',
    } );
  };

  return (
    <>
      <InspectorControls>
        <PanelBody title={__("Heading Settings", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display Heading", "my-dynamic-block")}
            checked={displayHeading}
            onChange={() => setAttributes({ displayHeading: !displayHeading })}
          />
          {displayHeading && (
            <SelectControl
              label={__("Heading Tag", "my-dynamic-block")}
              onChange={(value) => setAttributes({ headingTag: value })}
              value={headingTag}
              options={headingTagOptions}
            />
          )}
        </PanelBody>
        <PanelBody title={__("Sorting and filtering", "my-dynamic-block")}>
          <QueryControls
            numberOfItems={numberOfItems}
            onNumberOfItemsChange={(value) =>
              setAttributes({ numberOfItems: value })
            }
            minItems={1}
            maxItems={10}
            {...{ order, orderBy }}
            onOrderChange={(value) => setAttributes({ order: value })}
            onOrderByChange={(value) => setAttributes({ orderBy: value })}
          />
        </PanelBody>
        <PanelBody title={__("Featured image", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display featured image", "my-dynamic-block")}
            checked={displayFeaturedImage}
            onChange={() =>
              setAttributes({ displayFeaturedImage: !displayFeaturedImage })
            }
          />
          {displayFeaturedImage && (
            <>
              <ImageSizeControl
                onChange={ ( value ) => {
                  const newAttrs = {};
                  if ( value.hasOwnProperty( 'width' ) ) {
                    newAttrs.featuredImageSizeWidth = value.width;
                  }
                  if ( value.hasOwnProperty( 'height' ) ) {
                    newAttrs.featuredImageSizeHeight = value.height;
                  }
                  newAttrs.featuredImageMaxStyleAdded = !!(value.width || value.height);
                  setAttributes( newAttrs );
                } }
                slug={ featuredImageSizeSlug }
                width={ featuredImageSizeWidth }
                height={ featuredImageSizeHeight }
                imageWidth={ defaultImageWidth }
                imageHeight={ defaultImageHeight }
                imageSizeOptions={ imageSizeOptions }
                imageSizeHelp={ __(
                  'Select the size of the source image.'
                ) }
                onChangeImage={ ( value ) => {
                  setAttributes( {
                    featuredImageSizeSlug: value,
                    featuredImageSizeWidth: undefined,
                    featuredImageSizeHeight: undefined,
                    featuredImageMaxStyleAdded: false
                  } );
                }}
              />
              <ToggleControl
                label={ __( 'Add link to featured image', "my-dynamic-block") }
                checked={ addLinkToFeaturedImage }
                onChange={ ( value ) =>
                  setAttributes( { addLinkToFeaturedImage: value } )
                }
              />
            </>
          )}
        </PanelBody>
        <PanelBody title={__("Content Settings", "my-dynamic-block")}>
          <RangeControl
            label={__("Number of columns", "my-dynamic-block")}
            value={columns}
            onChange={(value) => setAttributes({ columns: value })}
            min={1}
            max={5}
          />
          <PanelRow>
            <ToggleControl
              label={__("Display Date", "my-dynamic-block")}
              checked={displayDate}
              onChange={() => setAttributes({ displayDate: !displayDate })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label={__("Display Excerpt", "my-dynamic-block")}
              checked={displayExcerpt}
              onChange={() =>
                setAttributes({ displayExcerpt: !displayExcerpt })
              }
            />
          </PanelRow>
          {displayExcerpt && (
            <RangeControl
              label={__("Max number of words", "my-dynamic-block")}
              value={excerptLength}
              onChange={(value) => setAttributes({ excerptLength: value })}
              min={10}
              max={100}
            />
          )}
          <PanelRow>
            <ToggleControl
              label={__("Exclude Current Post", "my-dynamic-block")}
              checked={excludeCurrentPost}
              onChange={() =>
                setAttributes({ excludeCurrentPost: !excludeCurrentPost })
              }
            />
          </PanelRow>
          <SelectControl
            label={__("Title Tag", "my-dynamic-block")}
            onChange={(value) => setAttributes({ titleTag: value })}
            value={titleTag}
            options={headingTagOptions}
          />
        </PanelBody>
        <PanelBody title={__("Category Selection", "my-dynamic-block")}>
          <ToggleControl
            label={__("All Categories", "my-dynamic-block")}
            checked={allCategories}
            onChange={() => setAttributes({ allCategories: !allCategories })}
          />
          {!allCategories && (
            <SelectControl
              multiple
              label={__("Select Categories", "my-dynamic-block")}
              onChange={(value) => setAttributes({ categories: (value || []).map(Number) })}
              value={Array.isArray(categories) ? categories : []}
              options={categoryOptions}
            />
          )}
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        {displayHeading && (
          <RichText
            tagName={headingTag}
            onChange={(value) => setAttributes({ headingText: value })}
            value={headingText}
            className={`${pre}heading`}
            placeholder={__("Enter heading text", "my-dynamic-block")}
          />
        )}
        {Array.isArray(posts) && posts.length === 0 && (
          <p>No post for the selected category.</p>
        )}

        <div className={`${pre}post-items columns-${columns > 0 ? columns : 1}`}>
          {posts &&
            posts.map((post) => {
              const title = getTextContent(post.title?.rendered);
              const excerpt = getTextContent(post.excerpt?.rendered)?.slice(0, excerptLength) + "...";
              const { url: featuredMedia, alt: altText } = getFeaturedImageDetails( post, featuredImageSizeSlug );
              const renderFeaturedImage = displayFeaturedImage && featuredMedia;
              const featuredImage = renderFeaturedImage && (
                <img
                  src={ featuredMedia }
                  alt={ altText }
                  style={ {
                    maxWidth: featuredImageSizeWidth ? featuredImageSizeWidth : null,
                    maxHeight: featuredImageSizeHeight ? featuredImageSizeHeight : null,
                  } }
                  className={ featuredImageMaxStyleAdded ? "max-style-added" : null}
                />
              );
              return (
                <div key={post.id} className={`${pre}post-item`}>
                  {renderFeaturedImage && (
                    <div className={`${pre}featured-image`}>
                      { addLinkToFeaturedImage ? (
                        <a href={post.link} onClick={ showRedirectionPreventedNotice}>
                          { featuredImage }
                        </a>
                      ) :  (
                        featuredImage
                      )  }
                    </div>
                  )}
                  {title && (
                    <TitleTag tagName={titleTag} className={`${pre}post-title`}>
                      <a href={post.link} onClick={ showRedirectionPreventedNotice}>
                        {title}
                      </a>
                    </TitleTag>
                  )}
                  {displayDate && post.date_gmt && (
                    <time dateTime={format("c", post.date_gmt)} className={`${pre}post-date`}>
                      {dateI18n(getSettings().formats.date, post.date_gmt)}
                    </time>
                  )}
                  {displayExcerpt && post.excerpt?.rendered && (
                    <p className={`${pre}post-excerpt`}>{excerpt}</p>
                  )}
                </div>
              );
            })}
        </div>
      </div>
    </>
  );
}

<ImageSizeControl
  onChange={ ( value ) => {
    // newAttrs という setAttributes に渡すための新しいオブジェクトを作成
    const newAttrs = {};
    // value オブジェクトに width プロパティが存在する場合
    if ( value.hasOwnProperty( 'width' ) ) {
      // newAttrs に featuredImageSizeWidth というプロパティを追加し、その値を value.width に設定
      newAttrs.featuredImageSizeWidth = value.width;
    }
    // value オブジェクトに height プロパティが存在する場合
    if ( value.hasOwnProperty( 'height' ) ) {
      // newAttrs に featuredImageSizeHeight というプロパティを追加し、その値を value.height に設定
      newAttrs.featuredImageSizeHeight = value.height;
    }
    // newAttrs に featuredImageMaxStyleAdded というプロパティを追加し、その値を設定
    newAttrs.featuredImageMaxStyleAdded = !!(value.width || value.height);
    // setAttributes を使って newAttrs の値を更新
    setAttributes( newAttrs );
  } }
  slug={ featuredImageSizeSlug }
  width={ featuredImageSizeWidth }
  height={ featuredImageSizeHeight }
  imageWidth={ defaultImageWidth }
  imageHeight={ defaultImageHeight }
  // 別途定義してあるアイキャッチ画像サイズのオプションのリストを指定
  imageSizeOptions={ imageSizeOptions }
  imageSizeHelp={ __(
    'Select the size of the source image.'
  ) }
  onChangeImage={ ( value ) => {
    setAttributes( {
      // 属性 featuredImageSizeSlug を選択された解像度のスラッグで更新
      featuredImageSizeSlug: value,
      featuredImageSizeWidth: undefined,
      featuredImageSizeHeight: undefined,
      // 解像度が変更されたら、featuredImageMaxStyleAdded を false に
      featuredImageMaxStyleAdded: false
    } );
  }}
/>

onChangeImage={ ( value ) => {
  setAttributes( { featuredImageSizeSlug: value } );
  // 現在のサイズがデフォルトサイズと異なる場合はリセットしない
  if (
    featuredImageSizeWidth !== defaultImageWidth ||
    featuredImageSizeHeight !== defaultImageHeight
  ) {
    return;
  }
  setAttributes({
    featuredImageSizeWidth: undefined,
    featuredImageSizeHeight: undefined,
    featuredImageMaxStyleAdded: false
  });
}}

.wp-block-wdl-block-my-dynamic-block {
  background-color: #21759b;
  color: #fff;
  padding: 2px;
  box-sizing: border-box;

  .wp-block-wdl-block-my-dynamic-block__post-items {
    display: grid;
    gap: 1rem;
    &.columns-1 {
      grid-template-columns: repeat(1, 1fr);
    }
    $grid-breakpoints: (
      576px: 2,
      768px: 3,
      992px: 4,
      1200px: 5,
    );
    @for $i from 2 through 5 {
      &.columns-#{$i} {
        grid-template-columns: repeat(1, 1fr);
      }
    }
    @each $bp, $cols in $grid-breakpoints {
      @media (min-width: $bp) {
        @for $i from $cols through 5 {
          &.columns-#{$i} {
            grid-template-columns: repeat($cols, 1fr);
          }
        }
      }
    }
    @media (max-width: 768px) {
      gap: 0.5rem;
    }
    &.columns-2,
    &.columns-3,
    &.columns-4,
    &.columns-5 {
      .wp-block-wdl-block-my-dynamic-block__featured-image img {
        object-fit: cover;
        aspect-ratio: 16 / 10;
        width: 100%;
      }
    }
    .wp-block-wdl-block-my-dynamic-block__featured-image img {
      max-width: 100%;
      height: auto;
      &.max-style-added {
        width: 100%;
      }
    }
  }
}

// featuredImageSizeWidth と featuredImageSizeHeight から style 属性を作成
$image_style = '';
if (isset($attributes['featuredImageSizeWidth'])) {
  $image_style .= sprintf('max-width:%spx;', $attributes['featuredImageSizeWidth']);
}
if (isset($attributes['featuredImageSizeHeight'])) {
  $image_style .= sprintf('max-height:%spx;', $attributes['featuredImageSizeHeight']);
}

// featuredImageMaxStyleAdded が true の場合に img 要素に追加するクラス属性を作成
$image_class = !empty($attributes['featuredImageMaxStyleAdded']) ? 'max-style-added' : '';

// 第3引数の配列に style 属性と class 属性を追加
$featured_image = get_the_post_thumbnail(
  get_the_ID(),
  $attributes['featuredImageSizeSlug'],
  array(
    'style' => esc_attr($image_style),
    'class' => esc_attr($image_class),
    'alt'   => esc_attr($thumbnail_alt_value),
  )
);

<?php

global $post;

$args = array(
  'posts_per_page'      => $attributes['numberOfItems'],
  'post_status'         => 'publish',
  'order'               => $attributes['order'],
  'orderby'             => $attributes['orderBy'],
  'ignore_sticky_posts' => true,
  'no_found_rows'       => true,
);

if (empty($attributes['allCategories']) && !empty($attributes['categories']) && is_array($attributes['categories'])) {
  $args['category__in'] = array_map('intval', $attributes['categories']);
}

$current_post_id = get_the_ID();

if (isset($attributes['excludeCurrentPost']) && $attributes['excludeCurrentPost'] && $current_post_id) {
  $args['post__not_in'] = [(int) $current_post_id];
}

$query = new WP_Query($args);

if (isset($attributes['displayFeaturedImage']) && $attributes['displayFeaturedImage'] && $query->have_posts()) {
  update_post_thumbnail_cache($query);
}

$pre = 'wp-block-wdl-block-my-dynamic-block__';

$post_items_markup = '';

if (!empty($attributes['displayHeading']) && !empty($attributes['headingText']) && !empty($attributes['headingTag'])) {
  $post_items_markup .= sprintf(
    '<%1$s class="%2$sheading">%3$s</%1$s>',
    esc_attr($attributes['headingTag']),
    esc_attr($pre),
    esc_html($attributes['headingText'])
  );
}

$columns = isset($attributes['columns']) && is_numeric($attributes['columns']) ? (int) $attributes['columns'] : 1;
$post_items_markup .= sprintf(
  '<div class="%1$spost-items columns-%2$d">',
  esc_attr($pre),
  esc_attr($columns)
);

if ($query->have_posts()) {
  while ($query->have_posts()) {
    $query->the_post();
    $post_link = esc_url(get_permalink());
    $title     = wp_strip_all_tags(get_the_title());

    $post_items_markup .= sprintf(
      '<div class="%1$spost-item">',
      esc_attr($pre)
    );

    if (isset($attributes['displayFeaturedImage']) && $attributes['displayFeaturedImage'] && has_post_thumbnail()) {

      // featuredImageSizeWidth と featuredImageSizeHeight から style 属性を作成
      $image_style = '';
      if (isset($attributes['featuredImageSizeWidth'])) {
        $image_style .= sprintf('max-width:%spx;', $attributes['featuredImageSizeWidth']);
      }
      if (isset($attributes['featuredImageSizeHeight'])) {
        $image_style .= sprintf('max-height:%spx;', $attributes['featuredImageSizeHeight']);
      }

      // featuredImageMaxStyleAdded が true の場合に img 要素に追加するクラス属性を作成
      $image_class = !empty($attributes['featuredImageMaxStyleAdded']) ? 'max-style-added' : '';

      $thumbnail_alt_value = get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true);

      if (!$thumbnail_alt_value) {
        $thumbnail_alt_value = $title;
      }

      // 第3引数の配列に style 属性と class 属性を追加
      $featured_image = get_the_post_thumbnail(
        get_the_ID(),
        $attributes['featuredImageSizeSlug'],
        array(
          'style' => esc_attr($image_style),
          'class' => esc_attr($image_class),
          'alt'   => esc_attr($thumbnail_alt_value),
        )
      );

      if (!empty($attributes['addLinkToFeaturedImage'])) {
        $featured_image = sprintf(
          '<a href="%1$s" aria-label="%2$s">%3$s</a>',
          esc_url($post_link),
          esc_attr($title),
          $featured_image
        );
      }

      $post_items_markup .= sprintf(
        '<div class="%1$sfeatured-image">%2$s</div>',
        esc_attr($pre),
        $featured_image
      );
    }

    $post_items_markup .= sprintf(
      '<%1$s class="%2$spost-title"><a href="%3$s">%4$s</a></%1$s>',
      $attributes['titleTag'],
      esc_attr($pre),
      esc_url($post_link),
      $title
    );

    if (isset($attributes['displayDate']) && $attributes['displayDate']) {
      $post_items_markup .= sprintf(
        '<time datetime="%1$s" class="%2$spost-date">%3$s</time>',
        esc_attr(get_the_date('c')),
        esc_attr($pre),
        esc_html(get_the_date())
      );
    }

    if (isset($attributes['displayExcerpt']) && $attributes['displayExcerpt'] && isset($attributes['excerptLength']) && $attributes['excerptLength']) {
      $post_items_markup .= sprintf(
        '<p class="%1$spost-excerpt">%2$s</p>',
        esc_attr($pre),
        wp_trim_words(wp_strip_all_tags(get_the_excerpt()), (int) $attributes['excerptLength'], '...')
      );
    }
    $post_items_markup .= "</div>\n";
  }
} else {
  $post_items_markup .= '<p>' . esc_html__('No posts to display.', 'my-dynamic-block') . '</p>';
}

$post_items_markup .= "</div>\n";

wp_reset_postdata();

$wrapper_attributes = get_block_wrapper_attributes();

$allowed_tags = wp_kses_allowed_html('post');
$allowed_tags['img']['srcset'] = true;
$allowed_tags['img']['sizes'] = true;

printf(
  '<div %1$s>%2$s</div>',
  $wrapper_attributes,
  wp_kses($post_items_markup, $allowed_tags)
);

// allCategories を削除し、categories を以下に変更
"categories": {
  "type": "array",
  "items": {
    "type": "object"
  }
},

import { __ } from "@wordpress/i18n";
import {
  useBlockProps,
  RichText,
  InspectorControls,
  __experimentalImageSizeControl as ImageSizeControl,
} from "@wordpress/block-editor";
import {
  PanelBody,
  PanelRow,
  QueryControls,
  SelectControl,
  ToggleControl,
  RangeControl,
} from "@wordpress/components";
import { useSelect, useDispatch } from "@wordpress/data";
import { dateI18n, format, getSettings } from "@wordpress/date";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
  const {
    displayHeading,
    headingTag,
    headingText,
    numberOfItems,
    excludeCurrentPost,
    displayDate,
    displayExcerpt,
    excerptLength,
    displayFeaturedImage,
    featuredImageSizeSlug,
    featuredImageSizeWidth,
    featuredImageSizeHeight,
    featuredImageMaxStyleAdded,
    addLinkToFeaturedImage,
    titleTag,
    order,
    orderBy,
    categories,
    columns,
  } = attributes;

  const {
    imageSizes,
    categoriesData,
    posts,
    defaultImageWidth,
    defaultImageHeight,
  } = useSelect(
    (select) => {
      const postId = select("core/editor")?.getCurrentPostId();
      const { getEntityRecords } = select("core");
      const settings = select("core/block-editor").getSettings();

      // カテゴリーIDの配列を作成（categories は現在選択中のカテゴリーオブジェクトの配列）
      const catIds =
        categories && categories.length > 0
          ? categories.map( ( cat ) => cat.id )
          : [];

      return {
        categoriesData: getEntityRecords("taxonomy", "category", {
          per_page: -1,
          hide_empty: true
        }) || [],
        posts: getEntityRecords("postType", "post", {
          per_page: numberOfItems,
          _embed: 'wp:featuredmedia',
          order,
          orderby: orderBy,
          exclude: excludeCurrentPost && postId ? [postId] : [],
          categories: catIds, // 選択されたカテゴリーに属する投稿を取得
        }),
        imageSizes: settings.imageSizes,
        defaultImageWidth: settings.imageDimensions?.[ featuredImageSizeSlug ]?.width ?? 0,
        defaultImageHeight: settings.imageDimensions?.[ featuredImageSizeSlug ]?.height ?? 0,
      };
    },
    [ numberOfItems, excludeCurrentPost, order, orderBy, categories, featuredImageSizeSlug ],
  );

  const pre = "wp-block-wdl-block-my-dynamic-block__";

  const getTextContent = (htmlRendered) => {
    if (!htmlRendered) return "";
    const elem = document.createElement("div");
    elem.innerHTML = htmlRendered;
    return elem.textContent || elem.innerText || "";
  };

  const headingTagOptions = Array.from({ length: 6 }, (_, i) => ({
    label: `H${i + 1}`,
    value: `h${i + 1}`,
  }));

  const TitleTag = ({ tagName = "h3", children, ...props }) => {
    return React.createElement(tagName, { ...props }, children);
  };

  function getFeaturedImageDetails( post, size ) {
    const image = post._embedded?.['wp:featuredmedia']?.[0];
    return {
      url:
        image?.media_details?.sizes?.[ size ]?.source_url ?? image?.source_url,
      alt: image?.alt_text || (post.title?.rendered ? getTextContent(post.title.rendered) : ""),
    };
  }

  const imageSizeOptions = imageSizes
    .filter( ( { slug } ) => slug !== 'full' )
    .map( ( { name, slug } ) => ( {
      value: slug,
      label: name,
    } ) );

  const { createWarningNotice } = useDispatch( 'core/notices' );

  const showRedirectionPreventedNotice = ( event ) => {
    event.preventDefault();
    createWarningNotice( __( "Links are disabled in the editor.", "my-dynamic-block" ), {
      type: 'snackbar',
    } );
  };

  // categoriesData（カテゴリーのデータ）からカテゴリー名をキーとするオブジェクトを作成
  const categorySuggestions =
    categoriesData?.reduce(
      (accumulator, category) => ({
        ...accumulator,
        [category.name]: category,
      }),
      {},
    ) ?? {};

    // カテゴリーが変更された際に呼び出されるコールバック関数
  const selectCategories = (tokens) => {
    const hasNoSuggestion = tokens.some(
      (token) => typeof token === "string" && !categorySuggestions[token],
    );
    if (hasNoSuggestion) {
      return;
    }
    const selectedAllCategories = tokens.map((token) => {
      return typeof token === "string" ? categorySuggestions[token] : token;
    });
    if (selectedAllCategories.includes(null)) {
      return false;
    }
    setAttributes({ categories: selectedAllCategories });
  };

  return (
    <>
      <InspectorControls>
        <PanelBody title={__("Heading Settings", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display Heading", "my-dynamic-block")}
            checked={displayHeading}
            onChange={() => setAttributes({ displayHeading: !displayHeading })}
          />
          {displayHeading && (
            <SelectControl
              label={__("Heading Tag", "my-dynamic-block")}
              onChange={(value) => setAttributes({ headingTag: value })}
              value={headingTag}
              options={headingTagOptions}
            />
          )}
        </PanelBody>
        <PanelBody title={__("Sorting and filtering", "my-dynamic-block")}>
          <QueryControls
            numberOfItems={numberOfItems}
            onNumberOfItemsChange={(value) =>
              setAttributes({ numberOfItems: value })
            }
            minItems={1}
            maxItems={10}
            {...{ order, orderBy }}
            onOrderChange={(value) => setAttributes({ order: value })}
            onOrderByChange={(value) => setAttributes({ orderBy: value })}
            // カテゴリーを選択するためプロパティを追加
            categorySuggestions={categorySuggestions}
            onCategoryChange={selectCategories}
            selectedCategories={categories}
          />
        </PanelBody>
        <PanelBody title={__("Featured image", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display featured image", "my-dynamic-block")}
            checked={displayFeaturedImage}
            onChange={() =>
              setAttributes({ displayFeaturedImage: !displayFeaturedImage })
            }
          />
          {displayFeaturedImage && (
            <>
              <ImageSizeControl
                onChange={ ( value ) => {
                  const newAttrs = {};
                  if ( value.hasOwnProperty( 'width' ) ) {
                    newAttrs.featuredImageSizeWidth = value.width;
                  }
                  if ( value.hasOwnProperty( 'height' ) ) {
                    newAttrs.featuredImageSizeHeight = value.height;
                  }
                  newAttrs.featuredImageMaxStyleAdded = !!(value.width || value.height);
                  setAttributes( newAttrs );
                } }
                slug={ featuredImageSizeSlug }
                width={ featuredImageSizeWidth }
                height={ featuredImageSizeHeight }
                imageWidth={ defaultImageWidth }
                imageHeight={ defaultImageHeight }
                imageSizeOptions={ imageSizeOptions }
                imageSizeHelp={ __(
                  'Select the size of the source image.'
                ) }
                onChangeImage={ ( value ) => {
                  console.log(value)
                  setAttributes( {
                    featuredImageSizeSlug: value,
                    featuredImageSizeWidth: undefined,
                    featuredImageSizeHeight: undefined,
                    featuredImageMaxStyleAdded: false
                  } );
                }}
              />
              <ToggleControl
                label={ __( 'Add link to featured image', "my-dynamic-block") }
                checked={ addLinkToFeaturedImage }
                onChange={ ( value ) =>
                  setAttributes( { addLinkToFeaturedImage: value } )
                }
              />
            </>
          )}
        </PanelBody>
        <PanelBody title={__("Content Settings", "my-dynamic-block")}>
          <RangeControl
            label={__("Number of columns", "my-dynamic-block")}
            value={columns}
            onChange={(value) => setAttributes({ columns: value })}
            min={1}
            max={5}
          />
          <PanelRow>
            <ToggleControl
              label={__("Display Date", "my-dynamic-block")}
              checked={displayDate}
              onChange={() => setAttributes({ displayDate: !displayDate })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label={__("Display Excerpt", "my-dynamic-block")}
              checked={displayExcerpt}
              onChange={() =>
                setAttributes({ displayExcerpt: !displayExcerpt })
              }
            />
          </PanelRow>
          {displayExcerpt && (
            <RangeControl
              label={__("Max number of words", "my-dynamic-block")}
              value={excerptLength}
              onChange={(value) => setAttributes({ excerptLength: value })}
              min={10}
              max={100}
            />
          )}
          <PanelRow>
            <ToggleControl
              label={__("Exclude Current Post", "my-dynamic-block")}
              checked={excludeCurrentPost}
              onChange={() =>
                setAttributes({ excludeCurrentPost: !excludeCurrentPost })
              }
            />
          </PanelRow>
          <SelectControl
            label={__("Title Tag", "my-dynamic-block")}
            onChange={(value) => setAttributes({ titleTag: value })}
            value={titleTag}
            options={headingTagOptions}
          />
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        {displayHeading && (
          <RichText
            tagName={headingTag}
            onChange={(value) => setAttributes({ headingText: value })}
            value={headingText}
            className={`${pre}heading`}
            placeholder={__("Enter heading text", "my-dynamic-block")}
          />
        )}
        {Array.isArray(posts) && posts.length === 0 && (
          <p>No post for the selected category.</p>
        )}

        <div className={`${pre}post-items columns-${columns > 0 ? columns : 1}`}>
          {posts &&
            posts.map((post) => {
              const title = getTextContent(post.title?.rendered);
              const excerpt = getTextContent(post.excerpt?.rendered)?.slice(0, excerptLength) + "...";
              const { url: featuredMedia, alt: altText } = getFeaturedImageDetails( post, featuredImageSizeSlug );
              const renderFeaturedImage = displayFeaturedImage && featuredMedia;
              const featuredImage = renderFeaturedImage && (
                <img
                  src={ featuredMedia }
                  alt={ altText }
                  style={ {
                    maxWidth: featuredImageSizeWidth ? featuredImageSizeWidth : null,
                    maxHeight: featuredImageSizeHeight ? featuredImageSizeHeight : null,
                  } }
                  className={ featuredImageMaxStyleAdded ? "max-style-added" : null}
                />
              );
              return (
                <div key={post.id} className={`${pre}post-item`}>
                  {renderFeaturedImage && (
                    <div className={`${pre}featured-image`}>
                      { addLinkToFeaturedImage ? (
                        <a href={post.link} onClick={ showRedirectionPreventedNotice}>
                          { featuredImage }
                        </a>
                      ) :  (
                        featuredImage
                      )  }
                    </div>
                  )}
                  {title && (
                    <TitleTag tagName={titleTag} className={`${pre}post-title`}>
                      <a href={post.link} onClick={ showRedirectionPreventedNotice}>
                        {title}
                      </a>
                    </TitleTag>
                  )}
                  {displayDate && post.date_gmt && (
                    <time dateTime={format("c", post.date_gmt)} className={`${pre}post-date`}>
                      {dateI18n(getSettings().formats.date, post.date_gmt)}
                    </time>
                  )}
                  {displayExcerpt && post.excerpt?.rendered && (
                    <p className={`${pre}post-excerpt`}>{excerpt}</p>
                  )}
                </div>
              );
            })}
        </div>
      </div>
    </>
  );
}

const catIds =
  categories && categories.length > 0
    ? categories.map( ( cat ) => cat.id )
    : [];

const categorySuggestions =
  categoriesData?.reduce(
    (accumulator, category) => ({
      ...accumulator,
      [category.name]: category, // カテゴリー名: カテゴリーオブジェクト
    }),
    {},
  ) ?? {}; // ?? {} は categoriesData が null や undefined の場合に、categorySuggestions を空のオブジェクト {} にします

const categoriesData = [
  { id: 1, name: "News", ...  },
  { id: 2, name: "Tech", ...  },
  { id: 3, name: "Sports", ...  },
];

{
  "News": { id: 1, name: "News", ... },
  "Tech": { id: 2, name: "Tech", ... },
  "Sports": { id: 3, name: "Sports", ... }
}

// カテゴリーが変更された際に呼び出されるコールバック関数
const selectCategories = (tokens) => {
  // tokens の中に categorySuggestions に存在しない文字列が含まれていたら処理を中断
  const hasNoSuggestion = tokens.some(
    (token) => typeof token === "string" && !categorySuggestions[token],
  );
  if (hasNoSuggestion) {
    return;
  }

  // 選択されたカテゴリーをオブジェクトの配列に変換
  const selectedAllCategories = tokens.map((token) => {
    return typeof token === "string" ? categorySuggestions[token] : token;
  });

  // 無効なカテゴリーが含まれていないかチェック
  if (selectedAllCategories.includes(null)) {
    // もし null が含まれていたら（無効なカテゴリーが選択されていたら）、処理を中断
    return false;
  }

  // カテゴリーを保存（更新）
  setAttributes({ categories: selectedAllCategories });
};

<QueryControls
  numberOfItems={numberOfItems}
  onNumberOfItemsChange={(value) =>
  setAttributes({ numberOfItems: value })
  }
  minItems={1}
  maxItems={10}
  {...{ order, orderBy }}
  onOrderChange={(value) => setAttributes({ order: value })}
  onOrderByChange={(value) => setAttributes({ orderBy: value })}
  categorySuggestions={categorySuggestions}
  onCategoryChange={selectCategories}
  selectedCategories={categories}
/>

// categories が空でなく配列であれば、categories から id の値の配列を取得して category__in に設定
if (!empty($attributes['categories']) && is_array($attributes['categories'])) {
  $args['category__in'] = array_map('intval', array_column($attributes['categories'], 'id'));
}

<?php

global $post;

$args = array(
  'posts_per_page'      => $attributes['numberOfItems'],
  'post_status'         => 'publish',
  'order'               => $attributes['order'],
  'orderby'             => $attributes['orderBy'],
  'ignore_sticky_posts' => true,
  'no_found_rows'       => true,
);

// categories が空でなく配列であれば、categories（オブジェクトの配列）から id の値を取得して category__in に設定
if (!empty($attributes['categories']) && is_array($attributes['categories'])) {
  $args['category__in'] = array_map('intval', array_column($attributes['categories'], 'id'));
}

$current_post_id = get_the_ID();

if (isset($attributes['excludeCurrentPost']) && $attributes['excludeCurrentPost'] && $current_post_id) {
  $args['post__not_in'] = [(int) $current_post_id];
}

$query = new WP_Query($args);

if (isset($attributes['displayFeaturedImage']) && $attributes['displayFeaturedImage'] && $query->have_posts()) {
  update_post_thumbnail_cache($query);
}

$pre = 'wp-block-wdl-block-my-dynamic-block__';

$post_items_markup = '';

if (!empty($attributes['displayHeading']) && !empty($attributes['headingText']) && !empty($attributes['headingTag'])) {
  $post_items_markup .= sprintf(
    '<%1$s class="%2$sheading">%3$s</%1$s>',
    esc_attr($attributes['headingTag']),
    esc_attr($pre),
    esc_html($attributes['headingText'])
  );
}

$columns = isset($attributes['columns']) && is_numeric($attributes['columns']) ? (int) $attributes['columns'] : 1;
$post_items_markup .= sprintf(
  '<div class="%1$spost-items columns-%2$d">',
  esc_attr($pre),
  esc_attr($columns)
);

if ($query->have_posts()) {
  while ($query->have_posts()) {
    $query->the_post();
    $post_link = esc_url(get_permalink());
    $title     = wp_strip_all_tags(get_the_title());

    $post_items_markup .= sprintf(
      '<div class="%1$spost-item">',
      esc_attr($pre)
    );

    if (isset($attributes['displayFeaturedImage']) && $attributes['displayFeaturedImage'] && has_post_thumbnail()) {

      $image_style = '';
      if (isset($attributes['featuredImageSizeWidth'])) {
        $image_style .= sprintf('max-width:%spx;', $attributes['featuredImageSizeWidth']);
      }
      if (isset($attributes['featuredImageSizeHeight'])) {
        $image_style .= sprintf('max-height:%spx;', $attributes['featuredImageSizeHeight']);
      }

      $image_class = !empty($attributes['featuredImageMaxStyleAdded']) ? 'max-style-added' : '';

      $thumbnail_alt_value = get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true);

      if (!$thumbnail_alt_value) {
        $thumbnail_alt_value = $title;
      }

      $featured_image = get_the_post_thumbnail(
        get_the_ID(),
        $attributes['featuredImageSizeSlug'],
        array(
          'style' => esc_attr($image_style),
          'class' => esc_attr($image_class),
          'alt'   => esc_attr($thumbnail_alt_value),
        )
      );

      if (!empty($attributes['addLinkToFeaturedImage'])) {
        $featured_image = sprintf(
          '<a href="%1$s" aria-label="%2$s">%3$s</a>',
          esc_url($post_link),
          esc_attr($title),
          $featured_image
        );
      }

      $post_items_markup .= sprintf(
        '<div class="%1$sfeatured-image">%2$s</div>',
        esc_attr($pre),
        $featured_image
      );
    }

    $post_items_markup .= sprintf(
      '<%1$s class="%2$spost-title"><a href="%3$s">%4$s</a></%1$s>',
      $attributes['titleTag'],
      esc_attr($pre),
      esc_url($post_link),
      $title
    );

    if (isset($attributes['displayDate']) && $attributes['displayDate']) {
      $post_items_markup .= sprintf(
        '<time datetime="%1$s" class="%2$spost-date">%3$s</time>',
        esc_attr(get_the_date('c')),
        esc_attr($pre),
        esc_html(get_the_date())
      );
    }

    if (isset($attributes['displayExcerpt']) && $attributes['displayExcerpt'] && isset($attributes['excerptLength']) && $attributes['excerptLength']) {
      $post_items_markup .= sprintf(
        '<p class="%1$spost-excerpt">%2$s</p>',
        esc_attr($pre),
        wp_trim_words(wp_strip_all_tags(get_the_excerpt()), (int) $attributes['excerptLength'], '...')
      );
    }
    $post_items_markup .= "</div>\n";
  }
} else {
  $post_items_markup .= '<p>' . esc_html__('No posts to display.', 'my-dynamic-block') . '</p>';
}

$post_items_markup .= "</div>\n";

wp_reset_postdata();

$wrapper_attributes = get_block_wrapper_attributes();

$allowed_tags = wp_kses_allowed_html('post');
$allowed_tags['img']['srcset'] = true;
$allowed_tags['img']['sizes'] = true;

printf(
  '<div %1$s>%2$s</div>',
  $wrapper_attributes,
  wp_kses($post_items_markup, $allowed_tags)
);

"featuredImageSizeWidth": {
  "type": "number",
  "default": null
},
"featuredImageSizeHeight": {
  "type": "number",
  "default": null
},

...

"categories": {
  "type": "array",
  "items": {
    "type": "object"
  }
}

"featuredImageSizeWidth": {
  "type": "number",
  "default": 0
},
"featuredImageSizeHeight": {
  "type": "number",
  "default": 0
},

...

"categories": {
  "type": "array",
  "items": {
    "type": "object"
  },
  "default": {}
}

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

export default function Edit({ attributes, setAttributes }) {
  return (
    <>
      <InspectorControls>
          ...
      </InspectorControls>
      <div {...useBlockProps()}>
        <ServerSideRender
          block="wdl-block/my-dynamic-block" // ブロック名
          attributes={attributes} // PHP に渡す属性→ Edit() で分割代入して取得した attributes
        />
      </div>
    </>
  );
}

// 分割代入で name プロパティを取得
export default function Edit({ attributes, setAttributes, name }) {
  return (
    <>
      <InspectorControls>
          ...
      </InspectorControls>
      <div {...useBlockProps()}>
        <ServerSideRender
          block={name}
          attributes={attributes}
        />
      </div>
    </>
  );
}
            

import { __ } from "@wordpress/i18n";
import {
  useBlockProps,
  InspectorControls,
  __experimentalImageSizeControl as ImageSizeControl,
} from "@wordpress/block-editor";
import {
  PanelBody,
  PanelRow,
  QueryControls,
  SelectControl,
  ToggleControl,
  RangeControl,
  TextControl, // 追加
} from "@wordpress/components";
// ServerSideRender コンポーネントをインポート
import ServerSideRender from "@wordpress/server-side-render";
import { useSelect } from "@wordpress/data";
// Disabled コンポーネントをインポート
import { Disabled } from "@wordpress/components";
import "./editor.scss";

// name を分割代入で取得
export default function Edit({ attributes, setAttributes, name }) {
  const {
    displayHeading,
    headingTag,
    headingText,
    numberOfItems,
    excludeCurrentPost,
    displayDate,
    displayExcerpt,
    excerptLength,
    displayFeaturedImage,
    featuredImageSizeSlug,
    featuredImageSizeWidth,
    featuredImageSizeHeight,
    addLinkToFeaturedImage,
    titleTag,
    order,
    orderBy,
    categories,
    columns,
  } = attributes;

  const {
    imageSizes,
    categoriesData,
    defaultImageWidth,
    defaultImageHeight,
  } = useSelect(
    (select) => {
      const { getEntityRecords } = select("core");
      const settings = select("core/block-editor").getSettings();

      return {
        categoriesData: getEntityRecords("taxonomy", "category", {
          per_page: -1,
          hide_empty: true
        }) || [],
        imageSizes: settings.imageSizes,
        defaultImageWidth: settings.imageDimensions?.[ featuredImageSizeSlug ]?.width ?? 0,
        defaultImageHeight: settings.imageDimensions?.[ featuredImageSizeSlug ]?.height ?? 0,
      };
    },
    [ numberOfItems, excludeCurrentPost, order, orderBy, categories, featuredImageSizeSlug ],
  );

  const headingTagOptions = Array.from({ length: 6 }, (_, i) => ({
    label: `H${i + 1}`,
    value: `h${i + 1}`,
  }));

  const imageSizeOptions = imageSizes
    .filter( ( { slug } ) => slug !== 'full' )
    .map( ( { name, slug } ) => ( {
      value: slug,
      label: name,
    } ) );

  const categorySuggestions =
    categoriesData?.reduce(
      (accumulator, category) => ({
        ...accumulator,
        [category.name]: category,
      }),
      {},
    ) ?? {};

  const selectCategories = (tokens) => {
    const hasNoSuggestion = tokens.some(
      (token) => typeof token === "string" && !categorySuggestions[token],
    );
    if (hasNoSuggestion) {
      return;
    }
    const selectedAllCategories = tokens.map((token) => {
      return typeof token === "string" ? categorySuggestions[token] : token;
    });
    if (selectedAllCategories.includes(null)) {
      return false;
    }
    setAttributes({ categories: selectedAllCategories });
  };

  return (
    <>
      <InspectorControls>
        <PanelBody title={__("Heading Settings", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display Heading", "my-dynamic-block")}
            checked={displayHeading}
            onChange={() => setAttributes({ displayHeading: !displayHeading })}
          />
          {displayHeading && (
            <>
              <TextControl
                label={ __( 'Heading Text', 'my-dynamic-block' ) }
                value={ headingText }
                onChange={(value) => setAttributes({ headingText: value})}
                help={ __(
                  'Text to display above the posts',
                  'my-dynamic-block'
                ) }
              />
              <SelectControl
                label={__("Heading Tag", "my-dynamic-block")}
                onChange={(value) => setAttributes({ headingTag: value })}
                value={headingTag}
                options={headingTagOptions}
              />
            </>
          )}

        </PanelBody>
        <PanelBody title={__("Sorting and filtering", "my-dynamic-block")}>
          <QueryControls
            numberOfItems={numberOfItems}
            onNumberOfItemsChange={(value) =>
              setAttributes({ numberOfItems: value })
            }
            minItems={1}
            maxItems={10}
            {...{ order, orderBy }}
            onOrderChange={(value) => setAttributes({ order: value })}
            onOrderByChange={(value) => setAttributes({ orderBy: value })}
            categorySuggestions={categorySuggestions}
            onCategoryChange={selectCategories}
            selectedCategories={categories}
          />
        </PanelBody>
        <PanelBody title={__("Featured image", "my-dynamic-block")}>
          <ToggleControl
            label={__("Display featured image", "my-dynamic-block")}
            checked={displayFeaturedImage}
            onChange={() =>
              setAttributes({ displayFeaturedImage: !displayFeaturedImage })
            }
          />
          {displayFeaturedImage && (
            <>
              <ImageSizeControl
                onChange={ ( value ) => {
                  const newAttrs = {};
                  if ( value.hasOwnProperty( 'width' ) ) {
                    newAttrs.featuredImageSizeWidth = value.width;
                  }
                  if ( value.hasOwnProperty( 'height' ) ) {
                    newAttrs.featuredImageSizeHeight = value.height;
                  }
                  newAttrs.featuredImageMaxStyleAdded = !!(value.width || value.height);
                  setAttributes( newAttrs );
                } }
                slug={ featuredImageSizeSlug }
                width={ featuredImageSizeWidth }
                height={ featuredImageSizeHeight }
                imageWidth={ defaultImageWidth }
                imageHeight={ defaultImageHeight }
                imageSizeOptions={ imageSizeOptions }
                imageSizeHelp={ __(
                  'Select the size of the source image.'
                ) }
                onChangeImage={ ( value ) => {
                  console.log(value)
                  setAttributes( {
                    featuredImageSizeSlug: value,
                    featuredImageSizeWidth: undefined,
                    featuredImageSizeHeight: undefined,
                    featuredImageMaxStyleAdded: false
                  } );
                }}
              />
              <ToggleControl
                label={ __( 'Add link to featured image', "my-dynamic-block") }
                checked={ addLinkToFeaturedImage }
                onChange={ ( value ) =>
                  setAttributes( { addLinkToFeaturedImage: value } )
                }
              />
            </>
          )}
        </PanelBody>
        <PanelBody title={__("Content Settings", "my-dynamic-block")}>
          <RangeControl
            label={__("Number of columns", "my-dynamic-block")}
            value={columns}
            onChange={(value) => setAttributes({ columns: value })}
            min={1}
            max={5}
          />
          <PanelRow>
            <ToggleControl
              label={__("Display Date", "my-dynamic-block")}
              checked={displayDate}
              onChange={() => setAttributes({ displayDate: !displayDate })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label={__("Display Excerpt", "my-dynamic-block")}
              checked={displayExcerpt}
              onChange={() =>
                setAttributes({ displayExcerpt: !displayExcerpt })
              }
            />
          </PanelRow>
          {displayExcerpt && (
            <RangeControl
              label={__("Max number of words", "my-dynamic-block")}
              value={excerptLength}
              onChange={(value) => setAttributes({ excerptLength: value })}
              min={10}
              max={100}
            />
          )}
          <PanelRow>
            <ToggleControl
              label={__("Exclude Current Post", "my-dynamic-block")}
              checked={excludeCurrentPost}
              onChange={() =>
                setAttributes({ excludeCurrentPost: !excludeCurrentPost })
              }
            />
          </PanelRow>
          <SelectControl
            label={__("Title Tag", "my-dynamic-block")}
            onChange={(value) => setAttributes({ titleTag: value })}
            value={titleTag}
            options={headingTagOptions}
          />
        </PanelBody>
      </InspectorControls>
      <div {...useBlockProps()}>
        <Disabled>
          <ServerSideRender
            block={name}
            attributes={attributes}
          />
        </Disabled>
      </div>
    </>
  );
}

<?php

global $post;

$args = array(
  'posts_per_page'      => $attributes['numberOfItems'],
  'post_status'         => 'publish',
  'order'               => $attributes['order'],
  'orderby'             => $attributes['orderBy'],
  'ignore_sticky_posts' => true,
  'no_found_rows'       => true,
);

if (!empty($attributes['categories']) && is_array($attributes['categories'])) {
  $args['category__in'] = array_map('intval', array_column($attributes['categories'], 'id'));
}

$current_post_id = get_the_ID();

if (isset($attributes['excludeCurrentPost']) && $attributes['excludeCurrentPost'] && $current_post_id) {
  $args['post__not_in'] = [(int) $current_post_id];
}

$query = new WP_Query($args);

if (isset($attributes['displayFeaturedImage']) && $attributes['displayFeaturedImage'] && $query->have_posts()) {
  update_post_thumbnail_cache($query);
}

$pre = 'wp-block-wdl-block-my-dynamic-block__';

$post_items_markup = '';

if (!empty($attributes['displayHeading']) && !empty($attributes['headingText']) && !empty($attributes['headingTag'])) {
  $post_items_markup .= sprintf(
    '<%1$s class="%2$sheading">%3$s</%1$s>',
    esc_attr($attributes['headingTag']),
    esc_attr($pre),
    esc_html($attributes['headingText'])
  );
}

$columns = isset($attributes['columns']) && is_numeric($attributes['columns']) ? (int) $attributes['columns'] : 1;
$post_items_markup .= sprintf(
  '<div class="%1$spost-items columns-%2$d">',
  esc_attr($pre),
  esc_attr($columns)
);

if ($query->have_posts()) {
  while ($query->have_posts()) {
    $query->the_post();
    $post_link = esc_url(get_permalink());
    $title     = wp_strip_all_tags(get_the_title());

    $post_items_markup .= sprintf(
      '<div class="%1$spost-item">',
      esc_attr($pre)
    );

    if (isset($attributes['displayFeaturedImage']) && $attributes['displayFeaturedImage'] && has_post_thumbnail()) {

      // && $attributes['featuredImageSizeWidth'] を追加
      $image_style = '';
      if (isset($attributes['featuredImageSizeWidth']) && $attributes['featuredImageSizeWidth']) {
        $image_style .= sprintf('max-width:%spx;', $attributes['featuredImageSizeWidth']);
      }
      // && $attributes['featuredImageSizeHeight'] を追加
      if (isset($attributes['featuredImageSizeHeight']) && $attributes['featuredImageSizeHeight']) {
        $image_style .= sprintf('max-height:%spx;', $attributes['featuredImageSizeHeight']);
      }

      $image_class = !empty($attributes['featuredImageMaxStyleAdded']) ? 'max-style-added' : '';

      $thumbnail_alt_value = get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true);

      if (!$thumbnail_alt_value) {
        $thumbnail_alt_value = $title;
      }

      $featured_image = get_the_post_thumbnail(
        get_the_ID(),
        $attributes['featuredImageSizeSlug'],
        array(
          'style' => esc_attr($image_style),
          'class' => esc_attr($image_class),
          'alt'   => esc_attr($thumbnail_alt_value),
        )
      );

      if (!empty($attributes['addLinkToFeaturedImage'])) {
        $featured_image = sprintf(
          '<a href="%1$s" aria-label="%2$s">%3$s</a>',
          esc_url($post_link),
          esc_attr($title),
          $featured_image
        );
      }

      $post_items_markup .= sprintf(
        '<div class="%1$sfeatured-image">%2$s</div>',
        esc_attr($pre),
        $featured_image
      );
    }

    $post_items_markup .= sprintf(
      '<%1$s class="%2$spost-title"><a href="%3$s">%4$s</a></%1$s>',
      $attributes['titleTag'],
      esc_attr($pre),
      esc_url($post_link),
      $title
    );

    if (isset($attributes['displayDate']) && $attributes['displayDate']) {
      $post_items_markup .= sprintf(
        '<time datetime="%1$s" class="%2$spost-date">%3$s</time>',
        esc_attr(get_the_date('c')),
        esc_attr($pre),
        esc_html(get_the_date())
      );
    }

    if (isset($attributes['displayExcerpt']) && $attributes['displayExcerpt'] && isset($attributes['excerptLength']) && $attributes['excerptLength']) {
      $post_items_markup .= sprintf(
        '<p class="%1$spost-excerpt">%2$s</p>',
        esc_attr($pre),
        wp_trim_words(wp_strip_all_tags(get_the_excerpt()), (int) $attributes['excerptLength'], '...')
      );
    }
    $post_items_markup .= "</div>\n";
  }
} else {
  $post_items_markup .= '<p>' . esc_html__('No posts to display.', 'my-dynamic-block') . '</p>';
}

$post_items_markup .= "</div>\n";

wp_reset_postdata();

$wrapper_attributes = get_block_wrapper_attributes();

$allowed_tags = wp_kses_allowed_html('post');
$allowed_tags['img']['srcset'] = true;
$allowed_tags['img']['sizes'] = true;

printf(
  '<div %1$s>%2$s</div>',
  $wrapper_attributes,
  wp_kses($post_items_markup, $allowed_tags)
);