itmar-block-packages 1.3.7 → 1.3.8

package/src/customFooks.js

@@ -1,4 +1,5 @@
 import { useRef, useEffect, useState } from "@wordpress/element";
+import { useSelect, useDispatch } from "@wordpress/data";
 import isEqual from "lodash/isEqual";
 
 //useRefで参照したDOM要素の大きさを取得するカスタムフック
@@ -141,3 +142,110 @@ export function useFontawesomeIframe() {
     }
   }, []);
 }
+
+//ネストしたブロックを平坦化
+const getFlattenBlocks = (blocks) => {
+  return blocks.reduce((acc, block) => {
+    acc.push(block);
+    if (block.innerBlocks && block.innerBlocks.length > 0) {
+      acc.push(...getFlattenBlocks(block.innerBlocks));
+    }
+    return acc;
+  }, []);
+};
+
+//指定されたブロック名とクラス名を含むブロックの属性が更新されたときその更新内容をかえすフック
+export function useBlockAttributeChanges(
+  clientId,
+  blockName,
+  className,
+  modFlg = false,
+  excludeAttributes = {}
+) {
+  const [latestAttributes, setLatestAttributes] = useState(null);
+  //const [idleFlg, setIdleFlg] = useState(null);
+  const prevBlocksRef = useRef({});
+
+  //属性変更関数を取得
+  const { updateBlockAttributes } = useDispatch("core/block-editor");
+  //インナーブロックを平坦化する関数
+  const flattenedBlocks = useSelect(
+    (select) => {
+      const { getBlock } = select("core/block-editor");
+      const rootBlock = getBlock(clientId);
+      return rootBlock ? getFlattenBlocks([rootBlock]) : [];
+    },
+    [clientId]
+  );
+
+  const targetBlocks = flattenedBlocks.filter(
+    (block) =>
+      block.name === blockName &&
+      block.attributes.className?.includes(className)
+  );
+
+  useEffect(() => {
+    //平坦化されたブロックを調査
+    for (const block of targetBlocks) {
+      const prevAttributes =
+        prevBlocksRef.current[block.clientId]?.attributes || {};
+      //既に先に記録された属性があることをチェック
+      if (Object.keys(prevAttributes).length > 0) {
+        // 除外する属性を取り除いた属性オブジェクトを作成
+        const filteredCurrentAttributes = Object.keys(block.attributes).reduce(
+          (acc, key) => {
+            if (!excludeAttributes.hasOwnProperty(key)) {
+              acc[key] = block.attributes[key];
+            }
+            return acc;
+          },
+          {}
+        );
+
+        const filteredPrevAttributes = Object.keys(prevAttributes).reduce(
+          (acc, key) => {
+            if (!excludeAttributes.hasOwnProperty(key)) {
+              acc[key] = prevAttributes[key];
+            }
+            return acc;
+          },
+          {}
+        );
+
+        //属性の変化を比較
+        if (
+          JSON.stringify(filteredCurrentAttributes) !==
+          JSON.stringify(filteredPrevAttributes)
+        ) {
+          //確認ダイアログが出ている状態か否かで状態変数を変化させる
+          // if (block.attributes.isIdle) {
+          //   setIdleFlg(true);
+          // } else {
+          //   setIdleFlg(false);
+          // }
+          //呼び出し元に返すための更新後の属性オブジェクトを格納
+          setLatestAttributes(JSON.stringify(filteredCurrentAttributes));
+        }
+      }
+      // 現在のブロック状態を保存（除外属性も含めて保存）
+      prevBlocksRef.current[block.clientId] = { ...block };
+    }
+  }, [targetBlocks, blockName, className]);
+
+  //innerFlattenedBlocks内の同一種のブロックに対して属性をセットする;
+  useEffect(() => {
+    //確認ダイアログが処理されたことを確認してからこちらの処理を進める
+    if (latestAttributes && modFlg) {
+      // const latestAttrObj = JSON.parse(latestAttributes);
+      // const setObj = {
+      //   ...latestAttrObj,
+      //   className: `auto_attr_change ${latestAttrObj.className}`,
+      // };
+      targetBlocks.forEach((block) => {
+        updateBlockAttributes(block.clientId, JSON.parse(latestAttributes));
+      });
+    }
+  }, [latestAttributes]);
+
+  return JSON.parse(latestAttributes);
+}

package/src/index.js

@@ -6,6 +6,7 @@ export {
   useIsMobile,
   useDeepCompareEffect,
   useFontawesomeIframe,
+  useBlockAttributeChanges,
 } from "./customFooks";
 
 //WordPressデータを取得するためのRestAPI
@@ -69,3 +70,19 @@ export { default as BlockEditWrapper } from "./BlockEditWrapper";
 
 //色コードの変換関数
 export { hslToRgb16, rgb16ToHsl, HexToRGB } from "./hslToRgb";
+
+//日付関連の関数、コントロール
+export {
+  generateDateArray,
+  generateMonthCalendar,
+  PeriodCtrl,
+  getPeriodQuery,
+  getTodayYearMonth,
+  getTodayYear,
+  getTodayMonth,
+  generateGridAreas,
+  JapaneseHolidays,
+} from "./DateElm";
+
+//インナーブロック関連の関数
+export { flattenBlocks } from "./blockStore";

package/src/wordpressApi.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
 import {
   ComboboxControl,
   CheckboxControl,
@@ -52,7 +53,14 @@ const SelectControl = (props) => {
 
 //選択コントロールのレンダリング関数
 const ChoiceControl = (props) => {
-  const { selectedSlug, choiceItems, type, fetchFunction } = props;
+  const {
+    selectedSlug,
+    choiceItems,
+    type,
+    blockMap,
+    textDomain,
+    fetchFunction,
+  } = props;
   const [choices, setChoices] = useState([]);
   useEffect(() => {
     if (!selectedSlug) return; //ポストタイプのスラッグが選択されていないときは処理終了
@@ -82,11 +90,15 @@ const ChoiceControl = (props) => {
   };
 
   //階層化されたカスタムフィールドのフィールド名を表示する関数
+  let groupLabel = "";
   const dispCustumFields = (obj, prefix = "", onChange) => {
     return Object.entries(obj).map(([key, value]) => {
-      const fieldName = prefix ? `${prefix}.${key}` : key;
-      const fieldLabel = key;
+      const fieldName = prefix ? `${prefix}.${key}` : key; //prefixはグループ名
+
+      const fieldLabel = key.replace(/^(meta_|acf_)/, "");
+
       if (typeof value === "object" && value !== null) {
+        groupLabel = `${fieldLabel}.`;
         return (
           <div className="group_area">
             <div className="group_label">{fieldLabel}</div>
@@ -96,20 +108,43 @@ const ChoiceControl = (props) => {
           </div>
         );
       } else {
-        if (key === "_acf_changed") return; //_acf_changedは対象外
+        if (key === "meta__acf_changed" || key === "meta_footnotes") return; //_acf_changedは対象外
+
+        //フィールドを表示するブロックの選択肢
+        const options = [
+          { value: "itmar/design-title", label: "itmar/design-title" },
+          { value: "core/paragraph", label: "core/paragraph" },
+          { value: "core/image", label: "core/image" },
+        ];
         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);
-            }}
-          />
+          <div className="itmar_custom_field_set">
+            <ToggleControl
+              key={fieldName}
+              className="field_choice"
+              label={fieldLabel}
+              checked={choiceItems.some(
+                (choiceField) => choiceField === fieldName
+              )}
+              onChange={(checked) => {
+                const newChoiceFields = handleChoiceChange(checked, fieldName);
+                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);
+              }}
+            />
+          </div>
         );
       }
     });
@@ -157,7 +192,7 @@ const ChoiceControl = (props) => {
               {choice.title && (
                 <ToggleControl
                   className="field_choice"
-                  label="タイトル"
+                  label={__("Title", textDomain)}
                   checked={choiceItems.some(
                     (choiceField) => choiceField === "title"
                   )}
@@ -217,10 +252,28 @@ const ChoiceControl = (props) => {
               )}
               {(choice.meta || choice.acf.length > 0) && (
                 <>
-                  <div className="custom_field_label">カスタムフィールド</div>
+                  <div className="custom_field_label">
+                    {__("Custom Field", textDomain)}
+                  </div>
                   <div className="custom_field_area">
-                    {choice.meta && dispCustumFields(choice.meta)}
-                    {choice.acf && dispCustumFields(choice.acf)}
+                    <div className="custom_field_area">
+                      {dispCustumFields({
+                        ...Object.entries(choice.meta).reduce(
+                          (acc, [key, value]) => ({
+                            ...acc,
+                            [`meta_${key}`]: value,
+                          }),
+                          {}
+                        ),
+                        ...Object.entries(choice.acf).reduce(
+                          (acc, [key, value]) => ({
+                            ...acc,
+                            [`acf_${key}`]: value,
+                          }),
+                          {}
+                        ),
+                      })}
+                    </div>
                   </div>
                 </>
               )}