itmar-block-packages 1.9.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itmar-block-packages",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "We have put together a package of common React components used for WordPress custom blocks.",
   "main": "build/index.js",
   "scripts": {

package/src/BrockInserter.js

@@ -0,0 +1,247 @@
+import {
+  serializeBlockTree,
+  createBlockTree,
+  flattenBlocks,
+} from "./blockStore";
+import { createBlock, getBlockType } from "@wordpress/blocks";
+import { useEffect } from "@wordpress/element";
+import { useSelect, useDispatch } from "@wordpress/data";
+
+//フィールド生成用関数
+const createBlockAttr = (selectedField) => {
+  let blockAttributes = {};
+
+  switch (selectedField.block) {
+    case "itmar/design-title":
+      const block_class = selectedField.key.startsWith("tax_")
+        ? selectedField.key
+        : `sp_field_${selectedField.key}`;
+      blockAttributes = {
+        className: block_class,
+        headingContent: `[${selectedField.label}]`,
+      };
+
+      break;
+    case "core/paragraph":
+      blockAttributes = {
+        className: `itmar_ex_block sp_field_${selectedField.key}`,
+        content: `[${selectedField.label}]`,
+      };
+      break;
+    case "core/image":
+      blockAttributes = {
+        className: `itmar_ex_block sp_field_${selectedField.key}`,
+        url: `${ec_relate_blocks.plugin_url}/assets/image/main_sample.png`,
+      };
+      break;
+    case "itmar/slide-mv":
+      const spaceAttributes = {
+        margin_val: {
+          type: "object",
+          default: {
+            top: "0em",
+            left: "0em",
+            bottom: "0em",
+            right: "0em",
+          },
+        },
+        padding_val: {
+          type: "object",
+          default: {
+            top: "0em",
+            left: "0em",
+            bottom: "0em",
+            right: "0em",
+          },
+        },
+      };
+
+      const imageBlock = createBlock("core/image", {
+        className: "itmar_ex_block",
+        url: `${ec_relate_blocks.plugin_url}/assets/image/slide_sample.png`,
+        ...spaceAttributes,
+      });
+      //Design Blockの初期設定を取得
+      const blockType = getBlockType("itmar/design-group");
+      const defaultValBase = blockType?.attributes?.default_val?.default ?? {};
+      const mobileValBase = blockType?.attributes?.mobile_val?.default ?? {};
+      const slideBlock = createBlock(
+        "itmar/design-group",
+        {
+          default_val: {
+            ...defaultValBase,
+            width_val: "fit",
+          },
+          mobile_val: {
+            ...mobileValBase,
+            width_val: "fit",
+          },
+        },
+        [imageBlock]
+      );
+      //slideBlock をシリアライズ
+      const serializedSlide = serializeBlockTree(slideBlock);
+      // 同じスライドブロックを5つ複製（独立したブロックとして）
+      const slideBlocks = Array.from({ length: 5 }, () =>
+        createBlockTree(serializedSlide)
+      );
+      //子ブロック付きで返す
+      blockAttributes = {
+        attributes: { className: `sp_field_${selectedField.key}` },
+        slideBlocks: slideBlocks,
+      };
+      break;
+    default:
+      blockAttributes = {
+        className: `sp_field_${selectedField.key}`,
+        headingContent: `[${selectedField.label}]`,
+      };
+  }
+  return blockAttributes;
+};
+
+//表示フィールド変更によるインナーブロックの再構成
+export const useRebuildChangeField = (
+  dispAttributeArray,
+  selectedFields,
+  pickupType,
+  dispTaxonomies,
+  sectionCount,
+  domType,
+  clientId,
+  insertId
+) => {
+  // dispatch関数を取得
+  const { replaceInnerBlocks } = useDispatch("core/block-editor");
+  const pickupBlock = useSelect(
+    (select) => select("core/block-editor").getBlock(clientId),
+    [clientId]
+  );
+
+  useEffect(() => {
+    //dispAttributeArray の個数調整
+    const blocksLength = dispAttributeArray.length;
+
+    if (blocksLength < sectionCount) {
+      // dispAttributeArrayの長さが短い場合、{}を追加する
+      const diff = sectionCount - blocksLength;
+      for (let i = 0; i < diff; i++) {
+        dispAttributeArray.push({});
+      }
+    } else {
+      // dispAttributeArrayの長さが長い場合、余分な要素を削除する
+      dispAttributeArray.splice(sectionCount);
+    }
+
+    // インナーブロックに差し込むブロック配列を生成
+    const blocksArray = dispAttributeArray.map((dispAttribute, unit_index) => {
+      // blocksAttributesArray属性で登録されたブロックのclassName一覧（sp_field_xxx を拾う）
+      const allBlocks = Array.isArray(dispAttribute.innerBlocks)
+        ? flattenBlocks(dispAttribute.innerBlocks) //階層になったブロックを平坦化
+        : [];
+
+      const existingKeys = allBlocks
+        .map((block) => block.attributes?.className)
+        .filter(Boolean)
+        .map((cls) => {
+          // sp_field_◯◯ か tax_◯◯ のどちらかにマッチ
+          const match = cls.match(/sp_field_([\w-]+)|(tax_[\w-]+)/);
+          if (!match) return null;
+
+          // match[1] があれば sp_field_ のほう → プレフィックス除去
+          // match[2] があれば tax_ のほう → そのまま返す
+          return match[1] ?? match[2];
+        })
+        .filter(Boolean);
+
+      // dispTaxonomies からオブジェクトを作って selectedFieldsに加えてnewSelectedFieldsを生成
+      const newSelectedFields = [
+        ...selectedFields,
+        ...dispTaxonomies.map((tax) => ({
+          key: `tax_${tax}`, // 例: "tax_category"
+          label: tax, // 例: "category"
+          block: "itmar/design-title",
+        })),
+      ];
+
+      //  newSelectedFieldsのうち未挿入のものだけ追加
+      const autoGeneratedBlocks = newSelectedFields
+        .filter((field) => !existingKeys.includes(field.key))
+        .map((field) => {
+          const attr = createBlockAttr(field);
+          const blockName = field.block;
+          const blockAttributes = attr?.attributes ?? attr;
+          const innerBlocks = Array.isArray(attr?.slideBlocks)
+            ? attr.slideBlocks
+            : [];
+
+          return createBlock(blockName, blockAttributes, innerBlocks);
+        });
+      // blocksAttributesArray属性で登録されたブロックの再構築
+      const selectedKeys = selectedFields.map((f) => f.key);
+
+      const filterBlocksRecursively = (blocks) => {
+        return blocks
+          .map((block) => {
+            const className = block.attributes?.className || "";
+            // 1. まず sp_field_ のパターンを探す
+            let match = className.match(/sp_field_([a-zA-Z0-9_]+)/);
+            // 2. 見つからなければ tax_○○ をチェック
+            if (className.startsWith("tax_")) {
+              const name = className.slice("tax_".length); // "tax_category" → "category"
+
+              // dispTaxonomies に含まれないものだけ有効とする
+              if (!dispTaxonomies.includes(name)) {
+                // 正規表現の match 結果っぽい形の配列を自分で作る
+                // [0] に全体一致, [1] にグループ1 というイメージ
+                match = [`tax_${name}`, name];
+              }
+            }
+
+            // 再帰的に innerBlocks をフィルタ
+            const filteredInner = block.innerBlocks
+              ? filterBlocksRecursively(block.innerBlocks)
+              : [];
+
+            const isAutoGenerated = !!match;
+            const keep = !isAutoGenerated || selectedKeys.includes(match[1]);
+
+            if (!keep) return null;
+
+            // 構造を復元して返す
+            return {
+              ...block,
+              innerBlocks: filteredInner,
+            };
+          })
+          .filter(Boolean); // null を除去
+      };
+
+      const userBlocks = Array.isArray(dispAttribute.innerBlocks)
+        ? filterBlocksRecursively(dispAttribute.innerBlocks).map(
+            createBlockTree
+          )
+        : [];
+
+      // autoGenerated（selectedFields） + userBlocks を合成
+      const innerBlocks = [...userBlocks, ...autoGeneratedBlocks];
+
+      const ret = createBlock(
+        "itmar/design-group",
+        {
+          ...dispAttribute.attributes,
+          className: `unit_design_${unit_index}`,
+          domType: domType,
+        },
+        innerBlocks
+      );
+      return ret;
+    });
+    //挿入するブロックと自身のブロックが異なる場合（slide-mvにデータを入れる場合）
+    if (insertId !== clientId) {
+      blocksArray.push(pickupBlock);
+    }
+    // 既存のインナーブロックを一括置換
+    replaceInnerBlocks(insertId, blocksArray, false);
+  }, [selectedFields, pickupType, dispTaxonomies]);
+};

package/src/MasonryControl.js

@@ -0,0 +1,125 @@
+/**
+ * Masonry グリッドを初期化する共通関数
+ *
+ * @param {HTMLElement} gridEl - `.itmar-masonry-grid` のコンテナ要素
+ * @param {Array<{ url: string, alt?: string }>} images - 描画する画像リスト
+ * @param {Object} options
+ * @param {number} options.columns - カラム数
+ * @param {boolean} [options.renderItems=true]
+ *   true: この関数内で gridEl をクリアして <figure><img> を追加する
+ *   false: 既にある .itmar-masonry-item をそのまま使い、幅だけ更新する
+ *
+ * @returns {any|null} Masonry インスタンス（なければ null）
+ */
+
+export default function MasonryControl(
+  gridEl,
+  images = [],
+  { columns = 1, renderItems = true } = {}
+) {
+  if (!gridEl) return null;
+  const columnWidthPercent = 100 / (columns || 1);
+
+  // 既存インスタンスがあれば破棄（再初期化に対応）
+  if (gridEl.__masonryInstance) {
+    try {
+      gridEl.__masonryInstance.destroy();
+    } catch (e) {
+      console.warn("Failed to destroy previous Masonry instance", e);
+    }
+    gridEl.__masonryInstance = null;
+  }
+
+  // ---------------------------
+  // 1) アイテムの DOM を構築 or 更新
+  // ---------------------------
+  if (renderItems) {
+    // ★ コンテナ全部は消さない。マソンリー用の要素だけを削除する
+    gridEl
+      .querySelectorAll(".itmar-masonry-sizer, .itmar-masonry-item")
+      .forEach((node) => node.remove());
+
+    // sizer 追加
+    const sizer = document.createElement("div");
+    sizer.className = "itmar-masonry-sizer";
+    sizer.style.width = `${columnWidthPercent}%`;
+    gridEl.appendChild(sizer);
+
+    // 画像アイテム追加
+    images.forEach((item, index) => {
+      const fig = document.createElement("figure");
+      fig.className = "itmar-masonry-item";
+      fig.style.width = `${columnWidthPercent}%`;
+
+      // クリック検知用の a タグ
+      const link = document.createElement("a");
+      link.href = "#";
+      link.className = "itmar-masonry-link";
+      link.dataset.masonryIndex = String(index);
+      //img要素
+      const img = document.createElement("img");
+      img.src = item.url;
+      img.alt = item.alt || "";
+      img.style.display = "block";
+      img.style.width = "100%";
+      img.style.height = "auto";
+
+      link.appendChild(img);
+      fig.appendChild(link);
+      gridEl.appendChild(fig);
+    });
+  } else {
+    // React 側（edit.js）みたいに、すでに <figure> が描画されている場合
+    // sizer がなければ作る
+    let sizer = gridEl.querySelector(".itmar-masonry-sizer");
+    if (!sizer) {
+      sizer = document.createElement("div");
+      sizer.className = "itmar-masonry-sizer";
+      gridEl.insertBefore(sizer, gridEl.firstChild || null);
+    }
+    sizer.style.width = `${columnWidthPercent}%`;
+
+    // 既存 item の幅だけ更新
+    gridEl.querySelectorAll(".itmar-masonry-item").forEach((fig) => {
+      fig.style.width = `${columnWidthPercent}%`;
+    });
+  }
+
+  // ---------------------------
+  // 2) Masonry / imagesLoaded を iframe-aware に取得
+  // ---------------------------
+  let win = null;
+
+  if (gridEl.ownerDocument && gridEl.ownerDocument.defaultView) {
+    // サイトエディタ・ブロックエディタの iframe 内ならこっち
+    win = gridEl.ownerDocument.defaultView;
+  } else if (typeof window !== "undefined") {
+    // フロントなら普通に window
+    win = window;
+  }
+
+  if (!win || !win.Masonry || !win.imagesLoaded) {
+    // ライブラリが読み込まれていない場合は、
+    // DOM だけ作って終了（レイアウトはブラウザ任せ）
+    return null;
+  }
+
+  const MasonryCtor = win.Masonry;
+  const imagesLoadedFn = win.imagesLoaded;
+
+  const msnry = new MasonryCtor(gridEl, {
+    itemSelector: ".itmar-masonry-item",
+    columnWidth: ".itmar-masonry-sizer",
+    percentPosition: true,
+  });
+
+  const imgLoad = imagesLoadedFn(gridEl);
+  imgLoad.on("progress", () => {
+    msnry.layout();
+  });
+
+  // 後から破棄できるように要素に紐付けておく
+  gridEl.__masonryInstance = msnry;
+
+  return msnry;
+}

package/src/SwiperControl.js

@@ -0,0 +1,265 @@
+//Swiper初期化関数
+// jQueryの $.data() 相当をざっくり再現（文字列→boolean/number/JSON を変換）
+function coerceDataValue(val) {
+  if (val == null) return null;
+  if (typeof val !== "string") return val;
+
+  const t = val.trim();
+  if (t === "") return "";
+
+  if (t === "true") return true;
+  if (t === "false") return false;
+  if (t === "null") return null;
+
+  // JSONっぽければJSONとして読む（swiper-info など）
+  const looksJson =
+    (t.startsWith("{") && t.endsWith("}")) ||
+    (t.startsWith("[") && t.endsWith("]"));
+  if (looksJson) {
+    try {
+      return JSON.parse(t);
+    } catch {
+      // JSONとして壊れてたら文字列のまま
+      return val;
+    }
+  }
+
+  // 数値
+  const n = Number(t);
+  if (!Number.isNaN(n) && t !== "") return n;
+
+  return val;
+}
+
+function toDatasetKey(key) {
+  // "swiper-id" -> "swiperId" のように変換
+  return key.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+function getData(el, key) {
+  const dsKey = toDatasetKey(key);
+
+  // dataset優先
+  if (el?.dataset && Object.prototype.hasOwnProperty.call(el.dataset, dsKey)) {
+    return coerceDataValue(el.dataset[dsKey]);
+  }
+
+  // 念のため attribute も見ておく
+  const attr = el.getAttribute?.(`data-${key}`);
+  if (attr != null) return coerceDataValue(attr);
+
+  return null;
+}
+
+// （任意）複数回呼ばれても関連付けできるように、モジュール内で保持
+const swiperRegistry = new Map();
+// 二重にイベントを張らないための印
+const linkedPairs = new Set();
+
+function linkSwipers(a, b) {
+  if (!a || !b) return;
+
+  const pairKey = `${a.swiper_id}__${b.swiper_id}`;
+  if (linkedPairs.has(pairKey)) return;
+  linkedPairs.add(pairKey);
+
+  // bがサムネならthumbs連携
+  if (b.is_thumbnail) {
+    a.instance.thumbs.swiper = b.instance;
+    a.instance.thumbs.init();
+    a.instance.thumbs.update(true);
+    return;
+  }
+
+  // どちらもサムネじゃなければ相互同期
+  if (!a.is_thumbnail) {
+    a.instance.on("slideChangeTransitionStart", (slider) => {
+      b.instance.slideToLoop(slider.realIndex, undefined, false);
+    });
+    b.instance.on("slideChangeTransitionStart", (slider) => {
+      a.instance.slideToLoop(slider.realIndex, undefined, false);
+    });
+  }
+}
+
+function tryLink(swiperObj) {
+  // 自分が relate_id を持っていて、相手が既にいればリンク
+  if (swiperObj.relate_id && swiperRegistry.has(swiperObj.relate_id)) {
+    linkSwipers(swiperObj, swiperRegistry.get(swiperObj.relate_id));
+  }
+
+  // 逆に「相手が自分を relate_id に指定していた」ケースも拾う
+  for (const other of swiperRegistry.values()) {
+    if (other.relate_id === swiperObj.swiper_id) {
+      linkSwipers(other, swiperObj);
+    }
+  }
+}
+
+export function slideBlockSwiperInit(swiperElement) {
+  // 文字列セレクタでも渡せるようにしておく（好みで削除OK）
+  const el =
+    typeof swiperElement === "string"
+      ? document.querySelector(swiperElement)
+      : swiperElement;
+
+  if (!el) return null;
+
+  const swiper_id = getData(el, "swiper-id");
+  const relate_id = getData(el, "relate-id");
+  const is_thumbnail = !!getData(el, "thumb-flg");
+  const swiper_info = getData(el, "swiper-info");
+  const parallax_obj = getData(el, "parallax-option");
+
+  if (!swiper_info || typeof swiper_info !== "object") {
+    throw new Error(
+      "data-swiper-info が見つからないか、JSONとして解釈できません。"
+    );
+  }
+
+  const parallax_option = parallax_obj != null ? { parallax: true } : {};
+
+  const autoplayOption = swiper_info.is_autoplay
+    ? {
+        freeMode: { enabled: true, momentum: false },
+        autoplay: {
+          delay: swiper_info.autoplay,
+          stopOnLastSlide: false,
+          disableOnInteraction: false,
+        },
+      }
+    : {};
+
+  const effectOption = {
+    none: {
+      centeredSlides: swiper_info.isActiveCenter,
+      direction: swiper_info.singleDirection,
+      speed: swiper_info.slideSpeed,
+      slidesPerView: swiper_info.mobilePerView,
+      spaceBetween: swiper_info.mobileBetween,
+      breakpoints: {
+        768: {
+          slidesPerView: swiper_info.defaultPerView,
+          spaceBetween: swiper_info.defaultBetween,
+        },
+      },
+    },
+    slide_single_view: {
+      direction: swiper_info.singleDirection,
+      loopAdditionalSlides: 1,
+      speed: swiper_info.slideSpeed,
+      allowTouchMove: false,
+      ...parallax_option,
+    },
+    fade_single_view: {
+      speed: swiper_info.slideSpeed,
+      effect: "fade",
+      fadeEffect: { crossFade: true },
+      ...parallax_option,
+    },
+    coverflow: {
+      centeredSlides: true,
+      slidesPerView: 3,
+      spaceBetween: swiper_info.mobileBetween,
+      effect: "coverflow",
+      coverflowEffect: {
+        rotate: 50,
+        depth: 100,
+        stretch: 0,
+        modifier: 1,
+        scale: 0.9,
+        slideShadows: true,
+      },
+      breakpoints: {
+        768: {
+          spaceBetween: swiper_info.defaultBetween,
+          coverflowEffect: { stretch: 0 },
+        },
+      },
+    },
+    coverflow_2: {
+      centeredSlides: true,
+      slidesPerView: "auto",
+      effect: "coverflow",
+      coverflowEffect: { rotate: 0, slideShadows: false, stretch: 100 },
+      breakpoints: { 768: { coverflowEffect: { stretch: 100 } } },
+    },
+    cube: {
+      speed: 800,
+      effect: "cube",
+      cubeEffect: {
+        slideShadows: true,
+        shadow: true,
+        shadowOffset: 40,
+        shadowScale: 0.94,
+      },
+      on: {
+        slideChangeTransitionStart: function () {
+          this.el.classList.remove("scale-in");
+          this.el.classList.add("scale-out");
+        },
+        slideChangeTransitionEnd: function () {
+          this.el.classList.remove("scale-out");
+          this.el.classList.add("scale-in");
+        },
+      },
+    },
+    flip: {
+      effect: "flip",
+      flipEffect: { limitRotation: true, slideShadows: true },
+    },
+    cards: {
+      effect: "cards",
+      cardsEffect: {
+        perSlideOffset: 8,
+        perSlideRotate: 2,
+        rotate: true,
+        slideShadows: true,
+      },
+    },
+  };
+
+  let swiperOptions = {
+    loop: swiper_info.loop,
+    ...autoplayOption,
+  };
+
+  if (is_thumbnail) {
+    swiperOptions = {
+      ...swiperOptions,
+      watchSlidesProgress: true,
+      watchSlidesVisibility: true,
+      freeMode: true,
+      slideToClickedSlide: true,
+    };
+  }
+
+  if (swiper_info.navigation?.disp) {
+    swiperOptions.navigation = {
+      nextEl: `.${swiper_id}-next`,
+      prevEl: `.${swiper_id}-prev`,
+    };
+  }
+
+  if (swiper_info.pagination?.disp) {
+    swiperOptions.pagination = { el: `.${swiper_id}-pagination` };
+  }
+
+  if (swiper_info.scrollbar?.disp) {
+    swiperOptions.scrollbar = { el: `.${swiper_id}-scrollbar` };
+  }
+
+  if (swiper_info.effect && effectOption[swiper_info.effect]) {
+    swiperOptions = { ...swiperOptions, ...effectOption[swiper_info.effect] };
+  }
+
+  // ここが $swiperElement[0] -> el に変わる
+  const instance = new Swiper(el, swiperOptions);
+
+  const swiperObj = { instance, swiper_id, relate_id, is_thumbnail };
+  if (swiper_id) swiperRegistry.set(swiper_id, swiperObj);
+
+  tryLink(swiperObj);
+
+  return swiperObj;
+}

package/src/customFooks.js

@@ -249,6 +249,7 @@ export function useBlockAttributeChanges(
           //   setIdleFlg(false);
           // }
           //呼び出し元に返すための更新後の属性オブジェクトを格納
+
           setLatestAttributes(JSON.stringify(filteredCurrentAttributes));
         }
       }

package/src/index.js

@@ -120,3 +120,12 @@ export {
   redirectCustomerAuthorize,
   sendRegistrationRequest,
 } from "./shopfiApi";
+
+//インナーブロック挿入のカスタムフック
+export { useRebuildChangeField } from "./BrockInserter";
+
+//Masonry グリッドを初期化する共通関数
+export { default as MasonryControl } from "./MasonryControl";
+
+//インナーブロック挿入のカスタムフック
+export { slideBlockSwiperInit } from "./SwiperControl";