itmar-block-packages 1.9.0 → 1.10.1

package/src/wordpressApi.js

@@ -6,6 +6,7 @@ import {
   ToggleControl,
 } from "@wordpress/components";
 import apiFetch from "@wordpress/api-fetch";
+import { addQueryArgs } from "@wordpress/url";
 
 //const _ = require("lodash");
 
@@ -68,8 +69,9 @@ const ChoiceControl = (props) => {
     const fetchData = async () => {
       try {
         const fetchChoices = await fetchFunction(selectedSlug);
-
         setChoices(fetchChoices);
+        //指定の投稿タイプに含まれないフィールドを削除する
+        pruneChoiceItemsByObjectKeys(fetchChoices[0], choiceItems);
       } catch (error) {
         console.error("Error fetching data:", error.message);
       }
@@ -90,22 +92,78 @@ const ChoiceControl = (props) => {
     }
     return setItems;
   };
+  /**
+   * dataObj のキー一覧を「choiceItems と比較する形」に変換して Set で返す
+   * - 通常キー: そのまま
+   * - acf / meta: 子キーに `${parent}_` を付けたもの（例: acf_relate_url, meta_footnotes）
+   */
+  function buildComparableKeySet(dataObj) {
+    const keySet = new Set();
+
+    if (!dataObj || typeof dataObj !== "object") return keySet;
+
+    for (const [key, val] of Object.entries(dataObj)) {
+      if (
+        (key === "acf" || key === "meta") &&
+        val &&
+        typeof val === "object" &&
+        !Array.isArray(val)
+      ) {
+        for (const childKey of Object.keys(val)) {
+          keySet.add(`${key}_${childKey}`);
+        }
+        continue;
+      }
+
+      keySet.add(key);
+    }
+
+    return keySet;
+  }
+
+  /**
+   * choiceItems を dataObj のキーに合わせて削除する
+   * - choiceItems が string 配列でも、{value: "..."} の配列でも動くようにしてあります
+   */
+  function pruneChoiceItemsByObjectKeys(dataObj, choiceItems) {
+    const validKeys = buildComparableKeySet(dataObj);
+
+    const getItemKey = (item) => {
+      if (typeof item === "string") return item;
+      if (item && typeof item === "object")
+        return item.value ?? item.key ?? item.name ?? "";
+      return "";
+    };
+
+    const next = (choiceItems ?? []).filter((item) =>
+      validKeys.has(getItemKey(item))
+    );
+
+    // ★ 配列の参照はそのまま、中身だけ置き換える
+    choiceItems.splice(0, choiceItems.length, ...next);
+
+    return choiceItems; // 必要なら返す
+  }
 
   //階層化されたカスタムフィールドのフィールド名を表示する関数
   let groupLabel = "";
-  const dispCustumFields = (obj, prefix = "", onChange) => {
+  const dispCustumFields = (obj, prefix = "", isImage = false, onChange) => {
     return Object.entries(obj).map(([key, value]) => {
       const fieldName = prefix ? `${prefix}.${key}` : key; //prefixはグループ名
 
       const fieldLabel = key.replace(/^(meta_|acf_)/, "");
-
-      if (typeof value === "object" && value !== null) {
+      //オブジェクトであって配列でないものがグループと考える
+      if (
+        typeof value === "object" &&
+        !Array.isArray(value) &&
+        value !== null
+      ) {
         groupLabel = `${fieldLabel}.`;
         return (
           <div className="group_area">
             <div className="group_label">{fieldLabel}</div>
             <div key={fieldName} className="field_group">
-              {dispCustumFields(value, fieldName, onChange)}
+              {dispCustumFields(value, fieldName, isImage, onChange)}
             </div>
           </div>
         );
@@ -117,6 +175,7 @@ const ChoiceControl = (props) => {
           { value: "itmar/design-title", label: "itmar/design-title" },
           { value: "core/paragraph", label: "core/paragraph" },
           { value: "core/image", label: "core/image" },
+          { value: "itmar/slide-mv", label: "itmar/slide-mv" },
         ];
         return (
           <div className="itmar_custom_field_set">
@@ -136,20 +195,23 @@ const ChoiceControl = (props) => {
                 props.onChange(newChoiceFields);
               }}
             />
-            <ComboboxControl
-              options={options}
-              value={
-                blockMap[`${prefix ? groupLabel : ""}${fieldLabel}`] ||
-                "itmar/design-title"
-              }
-              onChange={(newValue) => {
-                const fieldKey = prefix
-                  ? `${groupLabel}${fieldLabel}`
-                  : `${fieldLabel}`;
-                const newBlockMap = { ...blockMap, [fieldKey]: newValue };
-                props.onBlockMapChange(newBlockMap);
-              }}
-            />
+            {!isImage && (
+              <ComboboxControl
+                options={options}
+                value={
+                  //blockMap[`${prefix ? groupLabel : ""}${key}`] || "itmar/design-title"
+                  blockMap[`${prefix ? prefix + "." : ""}${key}`] ||
+                  "itmar/design-title"
+                }
+                onChange={(newValue) => {
+                  //const fieldKey = prefix ? `${groupLabel}${key}` : `${key}`;
+                  const fieldKey = prefix ? `${prefix}.${key}` : `${key}`;
+
+                  const newBlockMap = { ...blockMap, [fieldKey]: newValue };
+                  props.onBlockMapChange(newBlockMap);
+                }}
+              />
+            )}
           </div>
         );
       }
@@ -240,6 +302,23 @@ const ChoiceControl = (props) => {
                   }}
                 />
               )}
+              {choice.content && (
+                <ToggleControl
+                  className="field_choice"
+                  label={__("Content", "block-collections")}
+                  checked={choiceItems.some(
+                    (choiceField) => choiceField === "content"
+                  )}
+                  onChange={(checked) => {
+                    const newChoiceFields = handleChoiceChange(
+                      checked,
+                      "content",
+                      choiceItems
+                    );
+                    props.onChange(newChoiceFields);
+                  }}
+                />
+              )}
               {choice.date && (
                 <ToggleControl
                   className="field_choice"
@@ -343,6 +422,7 @@ const ChoiceControl = (props) => {
                   </div>
                   <div className="custom_field_area">
                     {dispCustumFields({
+                      // meta はそのまま
                       ...Object.entries(choice.meta).reduce(
                         (acc, [key, value]) => ({
                           ...acc,
@@ -350,13 +430,16 @@ const ChoiceControl = (props) => {
                         }),
                         {}
                       ),
-                      ...Object.entries(choice.acf).reduce(
-                        (acc, [key, value]) => ({
-                          ...acc,
-                          [`acf_${key}`]: value,
-                        }),
-                        {}
-                      ),
+                      // acf は「同名で _source があるもののベース側を除く」
+                      ...Object.entries(choice.acf)
+                        .filter(([key]) => !key.endsWith("_source"))
+                        .reduce(
+                          (acc, [key, value]) => ({
+                            ...acc,
+                            [`acf_${key}`]: value,
+                          }),
+                          {}
+                        ),
                     })}
                   </div>
                 </>
@@ -364,16 +447,124 @@ const ChoiceControl = (props) => {
             </div>
           );
         })}
+      {type === "imgField" &&
+        choices.map((choice, index) => {
+          //metaの対象カスタムフィールドが含まれるかのフラグ
+          const metaFlg =
+            choice.meta &&
+            !Object.keys(choice.meta).every(
+              (key) => key === "_acf_changed" || key === "footnotes"
+            );
+          //acfの対象カスタムフィールドが含まれるかのフラグ
+          const acfFlg =
+            choice.acf &&
+            typeof choice.acf === "object" &&
+            !Array.isArray(choice.acf);
+
+          return (
+            <div key={index} className="field_section">
+              {choice.content && (
+                <ToggleControl
+                  className="field_choice"
+                  label={__("Content", "block-collections")}
+                  checked={choiceItems.some(
+                    (choiceField) => choiceField === "content"
+                  )}
+                  onChange={(checked) => {
+                    const newChoiceFields = handleChoiceChange(
+                      checked,
+                      "content",
+                      choiceItems
+                    );
+                    props.onChange(newChoiceFields);
+                  }}
+                />
+              )}
+              {(choice.featured_media || choice.featured_media === 0) && (
+                <ToggleControl
+                  className="field_choice"
+                  label={__("Featured Image", "block-collections")}
+                  checked={choiceItems.some(
+                    (choiceField) => choiceField === "featured_media"
+                  )}
+                  onChange={(checked) => {
+                    const newChoiceFields = handleChoiceChange(
+                      checked,
+                      "featured_media",
+                      choiceItems
+                    );
+                    props.onChange(newChoiceFields);
+                  }}
+                />
+              )}
+
+              {(metaFlg || acfFlg) && (
+                <>
+                  <div className="custom_field_label">
+                    {__("Custom Field", "block-collections")}
+                  </div>
+                  <div className="custom_field_area">
+                    {dispCustumFields(
+                      {
+                        // meta はそのまま
+                        ...Object.entries(choice.meta).reduce(
+                          (acc, [key, value]) => ({
+                            ...acc,
+                            [`meta_${key}`]: value,
+                          }),
+                          {}
+                        ),
+                        // acf は「同名で _source があるもののベース側を除く」
+                        ...Object.entries(choice.acf)
+                          .filter(([key]) => !key.endsWith("_source"))
+                          .reduce(
+                            (acc, [key, value]) => ({
+                              ...acc,
+                              [`acf_${key}`]: value,
+                            }),
+                            {}
+                          ),
+                      },
+                      "",
+                      true
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
     </div>
   );
 };
 
 //固定ページ取得RestAPI関数
 export const fetchPagesOptions = async (home_url) => {
-  const pages = await apiFetch({ path: "/wp/v2/pages" });
-  //ページIDが-1である要素をホーム要素として作成
-  if (pages && !pages.some((page) => page.id === -1)) {
-    pages.unshift({
+  const allPages = [];
+  let page = 1;
+
+  while (true) {
+    const items = await apiFetch({
+      path: addQueryArgs("/wp/v2/pages", {
+        status: "publish", // 公開のみ
+        per_page: 100, // 最大100
+        page,
+        // orderby: "title",
+        // order: "asc",
+      }),
+    });
+
+    allPages.push(...items);
+
+    // 100件未満ならこれが最後
+    if (!items || items.length < 100) break;
+
+    page++;
+  }
+
+  // ページIDが-1である要素をホーム要素として作成
+  if (!allPages.some((p) => p.id === -1)) {
+    allPages.unshift({
       id: -1,
       title: { rendered: "ホーム" },
       link: home_url,
@@ -381,14 +572,13 @@ export const fetchPagesOptions = async (home_url) => {
     });
   }
 
-  const ret_pages = pages
-    ? pages.map((page) => ({
-        value: page.id,
-        slug: page.slug,
-        label: page.title.rendered,
-        link: `${home_url}/${page.slug}`,
-      }))
-    : [];
+  const ret_pages = allPages.map((p) => ({
+    value: p.id,
+    slug: p.slug,
+    label: p.title?.rendered ?? "",
+    // 階層ページでも正しいURLになるようにRESTのlinkを優先
+    link: p.link || (p.slug ? `${home_url}/${p.slug}` : home_url),
+  }));
 
   return ret_pages;
 };
@@ -483,6 +673,7 @@ export const restFieldes = async (rest_base) => {
   //投稿データに以下のフィールドが含まれているかを調べる
   const selectedFields = [
     "title",
+    "content",
     "date",
     "excerpt",
     "featured_media",
@@ -495,6 +686,7 @@ export const restFieldes = async (rest_base) => {
   const response = await apiFetch({
     path: `/wp/v2/${rest_base}?_fields=${fieldsParam}&per_page=1&order=desc`,
   });
+
   return response;
 };