itmar-block-packages 1.3.0 → 1.3.3

package/src/index.js

@@ -1,6 +1,3 @@
-import "./editor.scss";
-import "./style.scss";
-
 //カスタムフック（一般）
 export {
   useIsIframeMobile,
@@ -20,7 +17,7 @@ export {
   PageSelectControl,
   ArchiveSelectControl,
   TermChoiceControl,
-  //FieldChoiceControl,
+  FieldChoiceControl,
 } from "./wordpressApi";
 
 //styled-componet用のcssプロパティ生成関数

package/src/wordpressApi.js

@@ -1,7 +1,13 @@
 import { useState, useEffect } from "@wordpress/element";
-import { ComboboxControl, CheckboxControl } from "@wordpress/components";
+import {
+  ComboboxControl,
+  CheckboxControl,
+  ToggleControl,
+} from "@wordpress/components";
 import apiFetch from "@wordpress/api-fetch";
 
+//const _ = require("lodash");
+
 export const fetchData = async (rest_api) => {
   try {
     const ret_data = await rest_api();
@@ -44,12 +50,12 @@ const SelectControl = (props) => {
   );
 };
 
-//タームの選択コントロールのレンダリング関数
+//選択コントロールのレンダリング関数
 const ChoiceControl = (props) => {
-  const { selectedSlug, choiceTerms, type, label, fetchFunction } = props;
+  const { selectedSlug, choiceItems, type, fetchFunction } = props;
   const [choices, setChoices] = useState([]);
-
   useEffect(() => {
+    if (!selectedSlug) return; //ポストタイプのスラッグが選択されていないときは処理終了
     const fetchData = async () => {
       try {
         const fetchChoices = await fetchFunction(selectedSlug);
@@ -61,29 +67,55 @@ const ChoiceControl = (props) => {
     fetchData();
   }, [selectedSlug, fetchFunction]);
 
-  const handleTermChange = (checked, target) => {
+  //選択肢が変わったときに選択されている項目の配列内容を更新するハンドラ
+  const handleChoiceChange = (checked, target) => {
     if (checked) {
       // targetが重複していない場合のみ追加
-      if (
-        !choiceTerms.some(
-          (term) =>
-            term.taxonomy === target.taxonomy && term.term === target.term
-        )
-      ) {
-        return [...choiceTerms, target];
+      if (!choiceItems.some((item) => _.isEqual(item, target))) {
+        return [...choiceItems, target];
       }
     } else {
       // targetを配列から削除
-      return choiceTerms.filter(
-        (term) => term.taxonomy !== target.taxonomy || term.term !== target.term
-      );
+      return choiceItems.filter((item) => !_.isEqual(item, target));
     }
-    return choiceTerms;
+    return choiceItems;
   };
 
+  //階層化されたカスタムフィールドのフィールド名を表示する関数
+  const dispCustumFields = (obj, prefix = "", onChange) => {
+    return Object.entries(obj).map(([key, value]) => {
+      const fieldName = prefix ? `${prefix}.${key}` : key;
+      const fieldLabel = key;
+      if (typeof value === "object" && value !== null) {
+        return (
+          <div className="group_area">
+            <div className="group_label">{fieldLabel}</div>
+            <div key={fieldName} className="field_group">
+              {dispCustumFields(value, fieldName, onChange)}
+            </div>
+          </div>
+        );
+      } else {
+        if (key === "_acf_changed") return; //_acf_changedは対象外
+        return (
+          <ToggleControl
+            key={fieldName}
+            className="field_choice"
+            label={fieldLabel}
+            checked={choiceItems.some(
+              (choiceField) => choiceField === fieldName
+            )}
+            onChange={(checked) => {
+              const newChoiceFields = handleChoiceChange(checked, fieldName);
+              props.onChange(newChoiceFields);
+            }}
+          />
+        );
+      }
+    });
+  };
   return (
-    <div className="tax_section">
-      <div>{label}</div>
+    <div className={`${type}_section`}>
       {type === "taxonomy" &&
         choices.map((choice, index) => {
           return (
@@ -95,14 +127,21 @@ const ChoiceControl = (props) => {
                     className="term_check"
                     key={index}
                     label={term.name}
-                    checked={choiceTerms.some(
-                      (choiceTerm) =>
+                    checked={choiceItems.some((choiceTerm) => {
+                      return (
                         choiceTerm.taxonomy === choice.slug &&
-                        choiceTerm.term === term.slug
-                    )}
+                        choiceTerm.term.id === term.id
+                      );
+                    })}
                     onChange={(checked) => {
-                      const target = { taxonomy: choice.slug, term: term.slug };
-                      const newChoiceTerms = handleTermChange(checked, target);
+                      const target = {
+                        taxonomy: choice.slug,
+                        term: { id: term.id, slug: term.slug },
+                      };
+                      const newChoiceTerms = handleChoiceChange(
+                        checked,
+                        target
+                      );
                       props.onChange(newChoiceTerms);
                     }}
                   />
@@ -111,6 +150,83 @@ const ChoiceControl = (props) => {
             </div>
           );
         })}
+      {type === "field" &&
+        choices.map((choice, index) => {
+          return (
+            <div key={index} className="field_section">
+              {choice.title && (
+                <ToggleControl
+                  className="field_choice"
+                  label="タイトル"
+                  checked={choiceItems.some(
+                    (choiceField) => choiceField === "title"
+                  )}
+                  onChange={(checked) => {
+                    const newChoiceFields = handleChoiceChange(
+                      checked,
+                      "title"
+                    );
+                    props.onChange(newChoiceFields);
+                  }}
+                />
+              )}
+              {choice.date && (
+                <ToggleControl
+                  className="field_choice"
+                  label="日付"
+                  checked={choiceItems.some(
+                    (choiceField) => choiceField === "date"
+                  )}
+                  onChange={(checked) => {
+                    const newChoiceFields = handleChoiceChange(checked, "date");
+                    props.onChange(newChoiceFields);
+                  }}
+                />
+              )}
+              {choice.excerpt && (
+                <ToggleControl
+                  className="field_choice"
+                  label="抜粋"
+                  checked={choiceItems.some(
+                    (choiceField) => choiceField === "excerpt"
+                  )}
+                  onChange={(checked) => {
+                    const newChoiceFields = handleChoiceChange(
+                      checked,
+                      "excerpt"
+                    );
+                    props.onChange(newChoiceFields);
+                  }}
+                />
+              )}
+              {choice.featured_media && (
+                <ToggleControl
+                  className="field_choice"
+                  label="アイキャッチ画像"
+                  checked={choiceItems.some(
+                    (choiceField) => choiceField === "featured_media"
+                  )}
+                  onChange={(checked) => {
+                    const newChoiceFields = handleChoiceChange(
+                      checked,
+                      "featured_media"
+                    );
+                    props.onChange(newChoiceFields);
+                  }}
+                />
+              )}
+              {(choice.meta || choice.acf.length > 0) && (
+                <>
+                  <div className="custom_field_label">カスタムフィールド</div>
+                  <div className="custom_field_area">
+                    {choice.meta && dispCustumFields(choice.meta)}
+                    {choice.acf && dispCustumFields(choice.acf)}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
     </div>
   );
 };
@@ -151,6 +267,7 @@ export const fetchArchiveOptions = async (home_url) => {
       acc.push({
         value: idCounter++,
         slug: postType.slug,
+        rest_base: postType.rest_base,
         link: `${home_url}/${postType.slug}`,
         label: postType.name,
       });
@@ -159,6 +276,7 @@ export const fetchArchiveOptions = async (home_url) => {
       acc.push({
         value: idCounter++,
         slug: postType.slug,
+        rest_base: postType.rest_base,
         link: `${home_url}/${postType.has_archive}`,
         label: postType.name,
       });
@@ -169,6 +287,8 @@ export const fetchArchiveOptions = async (home_url) => {
 
 //タクソノミー取得RestAPI関数
 export const restTaxonomies = async (post_type) => {
+  if (!post_type) return;
+
   const response = await apiFetch({
     path: `/wp/v2/types/${post_type}?context=edit`,
   });
@@ -196,12 +316,24 @@ export const restTaxonomies = async (post_type) => {
 };
 
 //フィールド情報取得RestAPI関数
-// export const restFieldes = async (post_type) => {
-//   const response = await apiFetch({
-//     path: `/wp/v2/types/${post_type}?context=edit`,
-//   });
-//   return response;
-// };
+export const restFieldes = async (rest_base) => {
+  //投稿データに以下のフィールドが含まれているかを調べる
+  const selectedFields = [
+    "title",
+    "date",
+    "excerpt",
+    "featured_media",
+    "meta",
+    "acf",
+  ];
+  const fieldsParam = selectedFields.join(",");
+  //最新の投稿データから１件分のデータを抽出
+  const response = await apiFetch({
+    path: `/wp/v2/${rest_base}?_fields=${fieldsParam}&per_page=1&order=desc`,
+  });
+
+  return response;
+};
 
 export const PageSelectControl = (props) => (
   <SelectControl {...props} fetchOptions={fetchPagesOptions} />
@@ -215,6 +347,6 @@ export const TermChoiceControl = (props) => (
   <ChoiceControl {...props} fetchFunction={restTaxonomies} />
 );
 
-// export const FieldChoiceControl = (props) => (
-//   <ChoiceControl {...props} fetchFunction={restFieldes} />
-// );
+export const FieldChoiceControl = (props) => (
+  <ChoiceControl {...props} fetchFunction={restFieldes} />
+);

package/build/index.css

@@ -1 +0,0 @@
-.block-editor-block-inspector .tax_section{margin:10px 0 20px}.block-editor-block-inspector .term_section{margin-top:20px}.block-editor-block-inspector .term_section:nth-child(2){margin-top:10px}.block-editor-block-inspector .tax_label{border-bottom:1px solid #000;border-top:1px solid #000;padding:2px 0}.block-editor-block-inspector .term_check{margin-bottom:5px}

package/build/style-index.css

@@ -1 +0,0 @@
-

package/src/editor.scss

@@ -1,25 +0,0 @@
-/**
- * The following styles get applied inside the editor only.
- *
- * Replace them with your own styles or remove the file completely.
- */
-//TermChoiceControlのスタイリング
-.block-editor-block-inspector{
-	.tax_section{
-		margin: 10px 0 20px;
-	}
-	.term_section{
-		margin-top: 20px;
-		&:nth-child(2) {
-			margin-top: 10px;
-		}
-	}
-	.tax_label{
-		padding: 2px 0;
-		border-top: 1px solid #000;
-		border-bottom: 1px solid #000;
-	}
-	.term_check{
-		margin-bottom: 5px;
-	}
-}