itmar-block-packages 1.0.0

package/BlockEditWrapper.js

@@ -0,0 +1,11 @@
+import { Suspense } from '@wordpress/element';
+
+function BlockEditWrapper({ lazyComponent: LazyComponent, ...props }) {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <LazyComponent {...props} />
+    </Suspense>
+  );
+}
+
+export default BlockEditWrapper;

package/DraggableBox.js

@@ -0,0 +1,139 @@
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+import {
+  Button,
+  PanelBody,
+  PanelRow,
+  __experimentalUnitControl as UnitControl
+} from '@wordpress/components';
+
+export const useDraggingMove = (isMovable, blockRef, position, onPositionChange) => {
+  const elmposition = useRef({ x: 0, y: 0 });
+  const isDragging = useRef(false);
+  const mousePosition = useRef({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const element = blockRef.current;
+
+    if (!isMovable) {
+      if (element) {
+        element.classList.remove('itmar_isDraggable');//移動カーソル表示クラス削除
+      }
+      return; // 移動許可がある場合のみ、後続のロジックを実行
+    }
+    //positionの変化に合わせて現在位置を変更
+    const pos_value_x = position.x.match(/(-?\d+)([%a-zA-Z]+)/);
+    const pos_value_y = position.y.match(/(-?\d+)([%a-zA-Z]+)/);
+    elmposition.current = { x: parseInt(pos_value_x[1]), y: parseInt(pos_value_y[1]) }
+
+    //イベントハンドラ
+    const handleMouseDown = (event) => {
+      // 移動カーソル表示クラス名を追加します。
+      element.classList.add('itmar_isDraggable');
+      //ドラッグの開始フラグオン
+      isDragging.current = true;
+      //ドラッグ開始の絶対位置
+      mousePosition.current = { x: event.clientX, y: event.clientY };
+    };
+
+    const handleMouseMove = (event) => {
+      if (!isDragging.current) return;//ドラッグ中でなければ処理を中止
+      const dx = event.clientX - mousePosition.current.x;
+      const dy = event.clientY - mousePosition.current.y;
+      //ドラッグ後の位置を保存
+      const newPosition = {
+        x: elmposition.current.x + dx,
+        y: elmposition.current.y + dy,
+      };
+      elmposition.current = newPosition;
+      mousePosition.current = { x: event.clientX, y: event.clientY };//マウス位置の保存
+      //ドラッグによるブロックの一時的移動
+      element.style.transform = `translate(${elmposition.current.x}px, ${elmposition.current.y}px)`;
+    };
+
+    const handleMouseUp = () => {
+      isDragging.current = false;
+      element.style.transform = null;
+      //呼出しもとに要素の位置を返す
+      onPositionChange({ x: `${elmposition.current.x}px`, y: `${elmposition.current.y}px` });
+    };
+    const handleMouseLeave = () => {
+      isDragging.current = false;
+    };
+
+    if (element) {
+      // クラス名を追加します。
+      element.classList.add('itmar_isDraggable');
+    }
+    // イベントハンドラを追加します。
+    element.addEventListener('mousedown', handleMouseDown);
+    element.addEventListener('mousemove', handleMouseMove);
+    element.addEventListener('mouseup', handleMouseUp);
+    element.addEventListener('mouseleave', handleMouseLeave);
+
+    // イベントリスナーを削除するクリーンアップ関数を返します。
+    return () => {
+      element.removeEventListener('mousedown', handleMouseDown);
+      element.removeEventListener('mousemove', handleMouseMove);
+      element.removeEventListener('mouseup', handleMouseUp);
+      element.removeEventListener('mouseleave', handleMouseLeave);
+      element.style.transform = null;
+    };
+  }, [isMovable, blockRef, position, onPositionChange]); // 依存配列に isMovable を含めます
+}
+
+export default function DraggableBox(props) {
+
+  const position = props.attributes
+
+  //インスペクター内のコントロールからの移動操作
+  const chagePosition = (value, cordinate) => {
+    if (value) {
+      const newPos = { ...position, [cordinate]: value };
+      props.onPositionChange(newPos);
+    }
+  }
+
+  //リセット
+  const resetPos = () => {
+    const newPos = { "x": "0px", "y": "0px" };
+    props.onPositionChange(newPos);
+  }
+
+  return (
+    <>
+      <PanelBody
+        title={__("Position Setting", 'block-collections')}
+        initialOpen={true}
+      >
+        <PanelRow
+          className='distance_row'
+        >
+          <UnitControl
+            dragDirection="e"
+            onChange={(value) => chagePosition(value, 'x')}
+            label={__("Vertical", 'block-collections')}
+            value={position?.x || 0}
+          />
+          <UnitControl
+            dragDirection="e"
+            onChange={(value) => chagePosition(value, 'y')}
+            label={__("Horizen", 'block-collections')}
+            value={position?.y || 0}
+          />
+        </PanelRow>
+        <PanelRow
+          className='reset_row'
+        >
+          <Button
+            variant="secondary"
+            onClick={() => resetPos()}
+          >
+            {__("Reset", 'block-collections')}
+          </Button>
+        </PanelRow>
+      </PanelBody>
+    </>
+  )
+}

package/ShadowStyle.js

@@ -0,0 +1,520 @@
+import { __ } from "@wordpress/i18n";
+import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from "@wordpress/block-editor";
+import {
+  PanelBody,
+  PanelRow,
+  ToggleControl,
+  RangeControl,
+  RadioControl,
+} from "@wordpress/components";
+import { useState, useEffect } from "@wordpress/element";
+import { dispatch } from "@wordpress/data";
+import { hslToRgb16, HexToRGB, rgb16ToHsl } from "./hslToRgb";
+
+//方向と距離
+const dirctionDigit = (direction, distance) => {
+  let destTopLeft, destTopRight, destBottomLeft, destBottomRight;
+  switch (direction) {
+    case "top_left":
+      destTopLeft = distance;
+      destTopRight = distance;
+      destBottomLeft = distance * -1;
+      destBottomRight = distance * -1;
+      break;
+    case "top_right":
+      destTopLeft = distance * -1;
+      destTopRight = distance;
+      destBottomLeft = distance;
+      destBottomRight = distance * -1;
+      break;
+    case "bottom_left":
+      destTopLeft = distance;
+      destTopRight = distance * -1;
+      destBottomLeft = distance * -1;
+      destBottomRight = distance;
+      break;
+    case "bottom_right":
+      destTopLeft = distance * -1;
+      destTopRight = distance * -1;
+      destBottomLeft = distance;
+      destBottomRight = distance;
+      break;
+    case "right_bottom":
+      destTopLeft = distance;
+      destTopRight = distance * -1;
+      destBottomLeft = distance * -1;
+      destBottomRight = distance;
+      break;
+    case "top":
+      destTopLeft = 0;
+      destTopRight = 0;
+      destBottomLeft = distance * -1;
+      destBottomRight = distance;
+      break;
+  }
+  return {
+    topLeft: destTopLeft,
+    topRight: destTopRight,
+    bottomLeft: destBottomLeft,
+    bottmRight: destBottomRight,
+  };
+};
+
+// グラデーションの色値は通常'linear-gradient'または'radial-gradient'で始まるので、
+// これらのキーワードを探すことでグラデーションかどうかを判断します。
+function isGradient(colorValue) {
+  return (
+    colorValue.includes("linear-gradient") ||
+    colorValue.includes("radial-gradient")
+  );
+}
+
+export const ShadowElm = (shadowState) => {
+  //let baseColor;
+  const {
+    shadowType,
+    spread,
+    lateral,
+    longitude,
+    nomalBlur,
+    shadowColor,
+    blur,
+    intensity,
+    distance,
+    newDirection,
+    clayDirection,
+    embos,
+    opacity,
+    depth,
+    bdBlur,
+    expand,
+    glassblur,
+    glassopa,
+    hasOutline,
+    baseColor,
+  } = shadowState;
+
+  //ノーマル
+  if (shadowType === "nomal") {
+    //boxshadowの生成
+    const ShadowStyle =
+      embos === "dent"
+        ? {
+            style: {
+              boxShadow: `${lateral}px ${longitude}px ${nomalBlur}px ${spread}px transparent, inset ${lateral}px ${longitude}px ${nomalBlur}px ${spread}px ${shadowColor}`,
+            },
+          }
+        : {
+            style: {
+              boxShadow: `${lateral}px ${longitude}px ${nomalBlur}px ${spread}px ${shadowColor}, inset ${lateral}px ${longitude}px ${nomalBlur}px ${spread}px transparent`,
+            },
+          };
+    //Shadowのスタイルを返す
+    return ShadowStyle;
+  }
+  //ニューモフィズム
+  else if (shadowType === "newmor") {
+    //背景がグラデーションのときはセットしない
+    if (isGradient(baseColor)) {
+      dispatch("core/notices").createNotice(
+        "error",
+        __(
+          "Neumorphism cannot be set when the background color is a gradient. ",
+          "itmar_guest_contact_block"
+        ),
+        { type: "snackbar", isDismissible: true }
+      );
+      return null;
+    }
+    //ボタン背景色のHSL値
+    const hslValue = rgb16ToHsl(baseColor);
+    //影の明るさを変更
+    const lightVal =
+      hslValue.lightness + intensity < 100
+        ? hslValue.lightness + intensity
+        : 100;
+    const darkVal =
+      hslValue.lightness - intensity > 0 ? hslValue.lightness - intensity : 0;
+    const lightValue = hslToRgb16(hslValue.hue, hslValue.saturation, lightVal);
+    const darkValue = hslToRgb16(hslValue.hue, hslValue.saturation, darkVal);
+    //boxshadowの生成
+    //立体の方向
+    const dircObj = dirctionDigit(newDirection, distance);
+
+    const baseStyle = {
+      style: {
+        border: "none",
+        background: baseColor,
+      },
+    };
+
+    const newmorStyle =
+      embos === "swell"
+        ? {
+            style: {
+              ...baseStyle.style,
+              boxShadow: `${dircObj.topLeft}px ${dircObj.topRight}px ${blur}px ${darkValue}, ${dircObj.bottomLeft}px ${dircObj.bottmRight}px ${blur}px ${lightValue}, inset ${dircObj.topLeft}px ${dircObj.topRight}px ${blur}px transparent, inset ${dircObj.bottomLeft}px ${dircObj.bottmRight}px ${blur}px transparent`,
+            },
+          }
+        : {
+            style: {
+              ...baseStyle.style,
+              boxShadow: `${dircObj.topLeft}px ${dircObj.topRight}px ${blur}px transparent, ${dircObj.bottomLeft}px ${dircObj.bottmRight}px ${blur}px transparent, inset ${dircObj.topLeft}px ${dircObj.topRight}px ${blur}px ${darkValue}, inset ${dircObj.bottomLeft}px ${dircObj.bottmRight}px ${blur}px ${lightValue}`,
+            },
+          };
+
+    //Shadowのスタイルを返す
+    return newmorStyle;
+  }
+
+  //クレイモーフィズム
+  else if (shadowType === "claymor") {
+    //背景がグラデーションのときはセットしない
+    if (isGradient(baseColor)) {
+      dispatch("core/notices").createNotice(
+        "error",
+        __(
+          "claymorphism cannot be set when the background color is a gradient. ",
+          "itmar_guest_contact_block"
+        ),
+        { type: "snackbar", isDismissible: true }
+      );
+      return null;
+    }
+    const rgbValue = HexToRGB(baseColor);
+    const outsetObj = dirctionDigit(clayDirection, expand);
+    const insetObj = dirctionDigit(clayDirection, depth);
+    const baseStyle = {
+      style: {
+        background: `rgba(255, 255, 255, ${opacity})`,
+        backdropFilter: `blur(${bdBlur}px)`,
+        border: "none",
+      },
+    };
+    const claymorStyle = {
+      ...baseStyle,
+      style: {
+        ...baseStyle.style,
+        boxShadow: `${outsetObj.topLeft}px ${outsetObj.bottmRight}px ${
+          expand * 2
+        }px 0px rgba(${rgbValue.red}, ${rgbValue.green}, ${
+          rgbValue.blue
+        }, 0.5), inset ${insetObj.topRight}px ${
+          insetObj.bottomLeft
+        }px 16px 0px rgba(${rgbValue.red}, ${rgbValue.green}, ${
+          rgbValue.blue
+        }, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255)`,
+      },
+    };
+    //attributesに保存
+    return claymorStyle;
+  }
+
+  //グラスモーフィズム
+  else if (shadowType === "glassmor") {
+    const baseStyle = {
+      style: {
+        backgroundColor: `rgba(255, 255, 255, ${glassopa})`,
+        ...(hasOutline ? { border: `1px solid rgba(255, 255, 255, 0.4)` } : {}),
+        borderRightColor: `rgba(255, 255, 255, 0.2)`,
+        borderBottomColor: `rgba(255, 255, 255, 0.2)`,
+        backdropFilter: `blur( ${glassblur}px )`,
+      },
+    };
+    const glassmorStyle =
+      embos === "swell"
+        ? {
+            ...baseStyle,
+            style: {
+              ...baseStyle.style,
+              boxShadow: `0 8px 12px 0 rgba( 31, 38, 135, 0.37 ), inset 0 8px 12px 0 transparent`,
+            },
+          }
+        : {
+            ...baseStyle,
+            style: {
+              ...baseStyle.style,
+              boxShadow: `0 8px 12px 0 transparent, inset 0 8px 12px 0 rgba( 31, 38, 135, 0.37 )`,
+            },
+          };
+
+    //attributesに保存
+    return glassmorStyle;
+  }
+};
+
+const ShadowStyle = ({ shadowStyle, onChange }) => {
+  const [shadowState, setShadowState] = useState(shadowStyle);
+
+  const {
+    shadowType,
+    spread,
+    lateral,
+    longitude,
+    nomalBlur,
+    shadowColor,
+    blur,
+    intensity,
+    distance,
+    newDirection,
+    clayDirection,
+    embos,
+    opacity,
+    depth,
+    bdBlur,
+    expand,
+    glassblur,
+    glassopa,
+    hasOutline,
+  } = shadowState;
+
+  //シャドーのスタイル変更と背景色変更に伴う親コンポーネントの変更
+  useEffect(() => {
+    const shadowElm = ShadowElm(shadowState);
+    if (shadowElm) onChange(shadowElm, shadowState);
+  }, [shadowState]);
+
+  return (
+    <>
+      <PanelBody
+        title={__("Shadow Type", "block-collections")}
+        initialOpen={true}
+      >
+        <div className="itmar_shadow_type">
+          <RadioControl
+            selected={shadowType}
+            options={[
+              { label: __("Nomal", "block-collections"), value: "nomal" },
+              {
+                label: __("Neumorphism", "block-collections"),
+                value: "newmor",
+              },
+              {
+                label: __("Claymorphism", "block-collections"),
+                value: "claymor",
+              },
+              {
+                label: __("Grassmophism", "block-collections"),
+                value: "glassmor",
+              },
+            ]}
+            onChange={(changeOption) =>
+              setShadowState({ ...shadowState, shadowType: changeOption })
+            }
+          />
+        </div>
+        {shadowType !== "claymor" && (
+          <div className="embos">
+            <RadioControl
+              label={__("unevenness", "block-collections")}
+              selected={embos}
+              options={[{ value: "swell" }, { value: "dent" }]}
+              onChange={(changeOption) =>
+                setShadowState({ ...shadowState, embos: changeOption })
+              }
+            />
+          </div>
+        )}
+      </PanelBody>
+
+      {shadowType === "nomal" && (
+        <PanelBody
+          title={__("Nomal settings", "block-collections")}
+          initialOpen={false}
+        >
+          <RangeControl
+            value={spread}
+            label={__("Spread", "block-collections")}
+            max={50}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, spread: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={lateral}
+            label={__("Lateral direction", "block-collections")}
+            max={50}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, lateral: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={longitude}
+            label={__("Longitudinal direction", "block-collections")}
+            max={50}
+            min={0}
+            onChange={(val) =>
+              setShadowState({ ...shadowState, longitude: val })
+            }
+            withInputField={false}
+          />
+          <RangeControl
+            value={nomalBlur}
+            label={__("Blur", "block-collections")}
+            max={20}
+            min={0}
+            onChange={(val) =>
+              setShadowState({ ...shadowState, nomalBlur: val })
+            }
+            withInputField={false}
+          />
+          <PanelColorGradientSettings
+            title={__("Shadow Color Setting", "block-collections")}
+            settings={[
+              {
+                colorValue: shadowColor,
+                label: __("Choose Shadow color", "block-collections"),
+                onColorChange: (newValue) =>
+                  setShadowState({ ...shadowState, shadowColor: newValue }),
+              },
+            ]}
+          />
+        </PanelBody>
+      )}
+
+      {shadowType === "newmor" && (
+        <PanelBody
+          title={__("Neumorphism settings", "block-collections")}
+          initialOpen={false}
+        >
+          <RangeControl
+            value={distance}
+            label={__("Distance", "block-collections")}
+            max={50}
+            min={0}
+            onChange={(val) =>
+              setShadowState({ ...shadowState, distance: val })
+            }
+            withInputField={false}
+          />
+          <RangeControl
+            value={intensity}
+            label={__("Intensity", "block-collections")}
+            max={100}
+            min={0}
+            onChange={(val) =>
+              setShadowState({ ...shadowState, intensity: val })
+            }
+            withInputField={false}
+          />
+          <RangeControl
+            value={blur}
+            label={__("Blur", "block-collections")}
+            max={20}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, blur: val })}
+            withInputField={false}
+          />
+          <PanelRow>
+            <div className="light_direction">
+              <RadioControl
+                selected={newDirection}
+                options={[
+                  { value: "top_left" },
+                  { value: "top_right" },
+                  { value: "bottom_left" },
+                  { value: "bottom_right" },
+                ]}
+                onChange={(changeOption) =>
+                  setShadowState({ ...shadowState, newDirection: changeOption })
+                }
+              />
+            </div>
+          </PanelRow>
+        </PanelBody>
+      )}
+      {shadowType === "claymor" && (
+        <PanelBody
+          title={__("Claymorphism settings", "block-collections")}
+          initialOpen={false}
+        >
+          <RangeControl
+            value={opacity}
+            label={__("Opacity", "block-collections")}
+            max={1}
+            min={0}
+            step={0.1}
+            onChange={(val) => setShadowState({ ...shadowState, opacity: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={depth}
+            label="Depth"
+            max={20}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, depth: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={expand}
+            label="Expand"
+            max={50}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, expand: val })}
+            withInputField={false}
+          />
+          <RangeControl
+            value={bdBlur}
+            label="Background Blur"
+            max={10}
+            min={0}
+            onChange={(val) => setShadowState({ ...shadowState, bdBlur: val })}
+            withInputField={false}
+          />
+          <div className="light_direction claymor">
+            <RadioControl
+              selected={clayDirection}
+              options={[
+                { value: "right_bottom" },
+                { value: "top_right" },
+                { value: "top" },
+              ]}
+              onChange={(changeOption) =>
+                setShadowState({ ...shadowState, clayDirection: changeOption })
+              }
+            />
+          </div>
+        </PanelBody>
+      )}
+
+      {shadowType === "glassmor" && (
+        <PanelBody
+          title={__("Grassmophism settings", "block-collections")}
+          initialOpen={false}
+        >
+          <RangeControl
+            value={glassblur}
+            label={__("Glass blur", "block-collections")}
+            max={20}
+            min={0}
+            onChange={(val) =>
+              setShadowState({ ...shadowState, glassblur: val })
+            }
+            withInputField={false}
+          />
+          <RangeControl
+            value={glassopa}
+            label={__("Glass Opacity", "block-collections")}
+            max={1}
+            min={0}
+            step={0.1}
+            onChange={(val) =>
+              setShadowState({ ...shadowState, glassopa: val })
+            }
+            withInputField={false}
+          />
+          <fieldset>
+            <ToggleControl
+              label={__("Show outline", "block-collections")}
+              checked={hasOutline}
+              onChange={() =>
+                setShadowState({ ...shadowState, hasOutline: !hasOutline })
+              }
+            />
+          </fieldset>
+        </PanelBody>
+      )}
+    </>
+  );
+};
+export default ShadowStyle;

package/cssPropertes.js

@@ -0,0 +1,113 @@
+import { css } from "styled-components";
+
+//角丸のパラメータを返す
+export const radius_prm = (radius) => {
+  const ret_radius_prm =
+    radius && Object.keys(radius).length === 1
+      ? radius.value
+      : `${(radius && radius.topLeft) || ""} ${
+          (radius && radius.topRight) || ""
+        } ${(radius && radius.bottomRight) || ""} ${
+          (radius && radius.bottomLeft) || ""
+        }`;
+  return ret_radius_prm;
+};
+//スペースのパラメータを返す
+export const space_prm = (space) => {
+  const ret_space_prm = space
+    ? `${space.top} ${space.right} ${space.bottom} ${space.left}`
+    : "";
+  return ret_space_prm;
+};
+//ブロック幅を返す
+export const max_width_prm = (width, free_val) => {
+  const ret_width_prm =
+    width === "wideSize"
+      ? " width: 100%; max-width: var(--wp--style--global--wide-size);"
+      : width === "contentSize"
+      ? " width: 100%; max-width: var(--wp--style--global--content-size);"
+      : width === "free"
+      ? ` width: 100%; max-width: ${free_val}px; `
+      : " width: fit-content;";
+  return ret_width_prm;
+};
+
+export const width_prm = (width, free_val) => {
+  const ret_width_prm =
+    width === "wideSize"
+      ? " width: var(--wp--style--global--wide-size);"
+      : width === "contentSize"
+      ? " width: var(--wp--style--global--content-size);"
+      : width === "free"
+      ? ` width: ${free_val}px; `
+      : " width: fit-content;";
+  return ret_width_prm;
+};
+//配置を返す
+export const align_prm = (align) => {
+  const ret_align_prm =
+    align === "center"
+      ? "margin-left: auto; margin-right: auto;"
+      : align === "right"
+      ? "margin-left: auto; margin-right: 0"
+      : "margin-right: auto; margin-left: 0";
+
+  return ret_align_prm;
+};
+
+//スタイルオブジェクト変換関数
+export const convertToScss = (styleObject) => {
+  let scss = "";
+  for (const prop in styleObject) {
+    if (styleObject.hasOwnProperty(prop)) {
+      const scssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+      scss += `${scssProp}: ${styleObject[prop]};\n`;
+    }
+  }
+  return scss;
+};
+
+export const borderProperty = (borderObj) => {
+  if (borderObj) {
+    //borderObjがundefinedでない
+
+    let keys = ["top", "bottom", "left", "right"];
+    let ret_prop = null;
+    let doesKeyExist = keys.some((key) => key in borderObj);
+    if (doesKeyExist) {
+      //'top', 'bottom', 'left', 'right'が別設定
+      let cssString = "";
+      for (let side in borderObj) {
+        const sideData = borderObj[side];
+        const startsWithZero = String(sideData.width || "").match(/^0/);
+        if (startsWithZero) {
+          //widthが０ならCSS設定しない
+          continue;
+        }
+        const border_style = sideData.style || "solid";
+        cssString += `border-${side}: ${sideData.width} ${border_style} ${sideData.color};\n`;
+      }
+      ret_prop = css`
+        ${cssString}
+      `;
+      return ret_prop;
+    } else {
+      //同一のボーダー
+      const startsWithZero = String(borderObj.width || "").match(/^0/);
+
+      if (startsWithZero) {
+        //widthが０ならnoneを返す
+        return css`
+          border: none;
+        `;
+      }
+      const border_style = borderObj.style || "solid";
+      ret_prop = css`
+        border: ${borderObj.width} ${border_style} ${borderObj.color};
+      `;
+      return ret_prop;
+    }
+  } else {
+    return null;
+  }
+};

package/customFooks.js

@@ -0,0 +1,143 @@
+import { useRef, useEffect, useState } from "@wordpress/element";
+import isEqual from "lodash/isEqual";
+
+//useRefで参照したDOM要素の大きさを取得するカスタムフック
+export function useElementWidth() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        setWidth(entry.contentRect.width);
+      }
+    });
+
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return [ref, width];
+}
+
+//ViewPortの大きさでモバイルを判断(767px以下がモバイル)するカスタムフック
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const handleResize = () => {
+        setIsMobile(window.innerWidth <= 767);
+      };
+
+      window.addEventListener("resize", handleResize);
+
+      return () => {
+        window.removeEventListener("resize", handleResize);
+      };
+    }
+  }, []);
+
+  return isMobile;
+}
+
+//モバイル表示か否かを判定するフック
+export function useIsIframeMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    // iframeのcontentWindowを監視する関数
+    const checkIframeSize = () => {
+      const iframeInstance = document.getElementsByName("editor-canvas")[0];
+      if (iframeInstance && iframeInstance.contentWindow) {
+        setIsMobile(iframeInstance.contentWindow.innerWidth <= 767);
+      }
+    };
+
+    // iframeのcontentWindowのリサイズイベントにリスナーを追加
+    const iframeInstance = document.getElementsByName("editor-canvas")[0];
+    if (iframeInstance && iframeInstance.contentWindow) {
+      iframeInstance.contentWindow.addEventListener("resize", checkIframeSize);
+    }
+
+    // 初期チェックを実行
+    checkIframeSize();
+
+    // クリーンアップ関数
+    return () => {
+      if (iframeInstance && iframeInstance.contentWindow) {
+        iframeInstance.contentWindow.removeEventListener(
+          "resize",
+          checkIframeSize
+        );
+      }
+    };
+  }, []);
+
+  return isMobile;
+}
+
+//ブロックの背景色を取得するカスタムフック
+export function useElementBackgroundColor(blockRef, style) {
+  const [baseColor, setBaseColor] = useState("");
+
+  useEffect(() => {
+    if (blockRef.current && style) {
+      if (
+        style.backgroundColor &&
+        !style.backgroundColor.startsWith("var(--wp")
+      ) {
+        //backgroundColorが設定されており、それがカスタムプロパティでない
+        setBaseColor(style.backgroundColor);
+      } else {
+        //レンダリング結果から背景色を取得
+        if (blockRef.current) {
+          const computedStyles = getComputedStyle(blockRef.current);
+          setBaseColor(computedStyles.backgroundColor);
+        }
+      }
+    }
+  }, [style, blockRef]);
+
+  return baseColor;
+}
+
+//たくさんの要素をもつオブジェクトや配列の内容の変化で発火するuseEffect
+export function useDeepCompareEffect(callback, dependencies) {
+  const dependenciesRef = useRef();
+
+  if (!isEqual(dependencies, dependenciesRef.current)) {
+    dependenciesRef.current = dependencies;
+  }
+
+  useEffect(() => {
+    return callback();
+  }, [dependenciesRef.current]);
+}
+
+export function useFontawesomeIframe() {
+  //iframeにfontawesomeを読み込む
+  useEffect(() => {
+    const iframeInstance = document.getElementsByName("editor-canvas")[0];
+
+    if (iframeInstance) {
+      const iframeDocument =
+        iframeInstance.contentDocument || iframeInstance.contentWindow.document;
+      const scriptElement = iframeDocument.createElement("script");
+      scriptElement.setAttribute("src", "../../../assets/fontawesome.js");
+      //scriptElement.setAttribute("crossorigin", "anonymous");
+
+      iframeDocument.body.appendChild(scriptElement);
+
+      // Return a cleanup function to remove the script tag
+      return () => {
+        iframeDocument.body?.removeChild(scriptElement);
+      };
+    }
+  }, []);
+}

package/hslToRgb.js

@@ -0,0 +1,162 @@
+const createRGB = (inputStr) => {
+	//１６進数変換の関数
+	function componentToHex(c) {
+		const hex = parseInt(c, 10).toString(16);
+		return hex.length === 1 ? "0" + hex : hex;
+	}
+
+	let resultStr;
+	let rgb = [];
+
+	// #000000 形式の場合
+	if (/^#[0-9a-fA-F]{6}$/.test(inputStr)) {
+		rgb = [
+			inputStr.slice(1, 3),
+			inputStr.slice(3, 5),
+			inputStr.slice(5, 7)
+		];
+	}
+	// rgb(0,0,0) 形式の場合
+	else if ((resultStr = inputStr.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/))) {
+		rgb = [
+			componentToHex(resultStr[1]),
+			componentToHex(resultStr[2]),
+			componentToHex(resultStr[3])
+		];
+	} else {
+		// サポートされていない形式の場合はデフォルトの値を設定する
+		rgb = ["ff", "ff", "ff"];
+	}
+	return rgb;
+}
+
+export function hslToRgb16(hue, saturation, lightness) {
+	var result = false;
+
+	if (((hue || hue === 0) && hue <= 360) && ((saturation || saturation === 0) && saturation <= 100) && ((lightness || lightness === 0) && lightness <= 100)) {
+		var red = 0,
+			green = 0,
+			blue = 0,
+			q = 0,
+			p = 0,
+			hueToRgb;
+
+		hue = Number(hue) / 360;
+		saturation = Number(saturation) / 100;
+		lightness = Number(lightness) / 100;
+
+		if (saturation === 0) {
+			red = lightness;
+			green = lightness;
+			blue = lightness;
+		} else {
+			hueToRgb = function (p, q, t) {
+				if (t < 0) t += 1;
+				if (t > 1) t -= 1;
+
+				if (t < 1 / 6) {
+					p += (q - p) * 6 * t;
+				} else if (t < 1 / 2) {
+					p = q;
+				} else if (t < 2 / 3) {
+					p += (q - p) * (2 / 3 - t) * 6;
+				}
+
+				return p;
+			};
+
+			if (lightness < 0.5) {
+				q = lightness * (1 + saturation);
+			} else {
+				q = lightness + saturation - lightness * saturation;
+			}
+			p = 2 * lightness - q;
+
+			red = hueToRgb(p, q, hue + 1 / 3);
+			green = hueToRgb(p, q, hue);
+			blue = hueToRgb(p, q, hue - 1 / 3);
+		}
+
+		result = `#${Math.round(red * 255).toString(16).padStart(2, '0')}${Math.round(green * 255).toString(16).padStart(2, '0')}${Math.round(blue * 255).toString(16).padStart(2, '0')}`;
+
+	}
+
+	return result;
+};
+
+export function rgb16ToHsl(strRgb16) {
+	let rgb = createRGB(strRgb16);
+	let red = rgb[0];
+	let green = rgb[1];
+	let blue = rgb[2];
+	let result = false;
+
+	if (((red || red === 0) && String(red).match(/^[0-9a-f]{2}$/i)) && ((green || green === 0) && String(green).match(/^[0-9a-f]{2}$/i)) && ((blue || blue === 0) && String(blue).match(/^[0-9a-f]{2}$/i))) {
+		let hue = 0,
+			saturation = 0,
+			lightness = 0,
+			max = 0,
+			min = 0,
+			diff = 0;
+
+		red = parseInt(red, 16) / 255;
+		green = parseInt(green, 16) / 255;
+		blue = parseInt(blue, 16) / 255;
+		max = Math.max(red, green, blue);
+		min = Math.min(red, green, blue);
+		lightness = (max + min) / 2;
+
+		if (max !== min) {
+			diff = max - min;
+
+			if (lightness > 0.5) {
+				saturation = diff / (2 - max - min);
+			} else {
+				saturation = diff / (max + min);
+			}
+
+			if (max === red) {
+				hue = (green - blue) / diff;
+			} else if (max === green) {
+				hue = 2 + (blue - red) / diff;
+			} else {
+				hue = 4 + (red - green) / diff;
+			}
+
+			hue /= 6;
+		}
+
+		result = {
+			hue: Math.round(hue * 360),
+			saturation: Math.round(saturation * 100),
+			lightness: Math.round(lightness * 100)
+		};
+	}
+
+	return result;
+};
+
+export function HexToRGB(strRgb16) {
+	let rgb = createRGB(strRgb16);
+	let red = rgb[0];
+	let green = rgb[1];
+	let blue = rgb[2];
+	let result = false;
+
+	if (((red || red === 0) && String(red).match(/^[0-9a-f]{2}$/i)) && ((green || green === 0) && String(green).match(/^[0-9a-f]{2}$/i)) && ((blue || blue === 0) && String(blue).match(/^[0-9a-f]{2}$/i))) {
+
+
+		red = parseInt(red, 16);
+		green = parseInt(green, 16);
+		blue = parseInt(blue, 16);
+
+
+		result = {
+			red: Math.round(red),
+			green: Math.round(green),
+			blue: Math.round(blue)
+		};
+	}
+
+	return result;
+};

package/index.js

@@ -0,0 +1,35 @@
+//カスタムフック（一般）
+export {
+  useIsIframeMobile,
+  useElementBackgroundColor,
+  useElementWidth,
+  useIsMobile,
+  useDeepCompareEffect,
+  useFontawesomeIframe,
+} from "./customFooks";
+
+//styled-componet用のcssプロパティ生成関数
+export {
+  radius_prm,
+  space_prm,
+  max_width_prm,
+  width_prm,
+  align_prm,
+  convertToScss,
+  borderProperty,
+} from "./cssPropertes";
+
+//疑似要素を設定するコントロール
+export { default as PseudoElm, Arrow } from "./pseudo";
+
+//メディアライブラリから複数の画像を選択するコントロール
+export { MultiImageSelect } from "./mediaUpload";
+
+//ボックスシャドーを設定するコントロール
+export { default as ShadowStyle, ShadowElm } from "./ShadowStyle";
+
+//ブロックのドラッガブルを設定するコントロール
+export { default as DraggableBox, useDraggingMove } from "./DraggableBox";
+
+//ブロックをlazy Loadさせるためのラッパーモジュール
+export { default as BlockEditWrapper } from "./BlockEditWrapper";

package/mediaUpload.js

@@ -0,0 +1,90 @@
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import {
+  Button,
+  PanelBody,
+} from '@wordpress/components';
+
+export function MultiImageSelect(props) {
+  const {
+    attributes,
+    label
+  } = props;
+  const {
+    mediaID,
+    media
+  } = attributes;
+
+  //URL の配列から画像を生成
+  const getImages = (media) => {
+    //メディアオブジェクトの配列をループ処理
+    let imagesArray = media.map((image) => {
+      return (
+        <figure>
+          <img
+            src={image.url}
+            className="image"
+            alt="アップロード画像"
+          />
+          <figcaption className="block-image-caption">
+            {image.caption ? image.caption : ''}
+          </figcaption>
+        </figure>
+      );
+    });
+    return imagesArray;
+  }
+
+  //メディアライブラリを開くボタンをレンダリングする関数
+  const getImageButton = (open) => {
+    if (media.length > 0) {
+      return (
+        <div onClick={open} className="block-container">
+          {getImages(media)}
+        </div>
+      )
+    }
+    else {
+      return (
+        <div className="button-container">
+          <Button
+            onClick={open}
+            className="button button-large"
+          >
+            {__("Image Upload", 'slide-blocks')}
+          </Button>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <PanelBody
+      title={label}
+      initialOpen={true}
+      className='itmar_image_display'
+    >
+      <MediaUploadCheck>
+        <MediaUpload
+          multiple={true}
+          gallery={true}  //追加
+          onSelect={(media) => props.onSelectChange(media)}
+          allowedTypes={['image']}
+          value={mediaID}
+          render={({ open }) => getImageButton(open)}
+        />
+      </MediaUploadCheck>
+      {media.length != 0 && //メディアオブジェクト（配列の長さ）で判定
+        <MediaUploadCheck>
+          <Button
+            onClick={() => props.onAllDelete()}
+            variant="secondary"
+            isDestructive
+            className="removeImage">
+            {__("Delete All", 'slide-blocks')}
+          </Button>
+        </MediaUploadCheck>
+      }
+    </PanelBody>
+  );
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "itmar-block-packages",
+  "version": "1.0.0",
+  "description": "We have put together a package of common React components used for WordPress custom blocks.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Web Creator ITmaroon",
+  "license": "ISC",
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "styled-components": "^6.1.8"
+  }
+}

package/pseudo.js

@@ -0,0 +1,55 @@
+import { __ } from '@wordpress/i18n';
+import { css } from 'styled-components';
+import {
+  RadioControl
+} from '@wordpress/components';
+
+// 矢印の向きに応じたスタイルを生成するヘルパー関数
+const arrowDirectionStyles = (direction) => {
+  switch (direction) {
+    case 'left':
+      return 'transform: translate(-50%, -50%) rotate(-135deg);';
+    case 'right':
+      return 'transform: translate(-50%, -50%) rotate(45deg);';
+    case 'upper':
+      return 'transform: translate(-50%, -50%) rotate(-45deg);';
+    case 'under':
+      return 'transform: translate(-50%, -50%) rotate(135deg);';
+    default:
+      return 'transform: translate(-50%, -50%) rotate(45deg);'; // default to 'down'
+  }
+};
+
+// 矢印のスタイルを適用するコンポーネント
+export const Arrow = ({ direction = 'down' }) => css`
+  &::after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 15%;
+    height: 15%;
+    border-top: 3px solid var(--wp--preset--color--accent-2);
+    border-right: 3px solid var(--wp--preset--color--accent-2);
+    top: 50%;
+    left: 50%;
+    ${arrowDirectionStyles(direction)}
+  }
+`;
+
+//擬似要素の出力を選択させるインスペクターコントロール
+const PseudoElm = ({ direction, onChange }) => {
+  return (
+    <RadioControl
+      selected={direction}
+      options={[
+        { label: __("Upper", 'itmar_block_collections'), value: 'upper' },
+        { label: __("Left", 'itmar_block_collections'), value: 'left' },
+        { label: __("Right", 'itmar_block_collections'), value: 'right' },
+        { label: __("Under", 'itmar_block_collections'), value: 'under' },
+      ]}
+      onChange={(changeOption) => { onChange(changeOption) }
+      }
+    />
+  )
+}
+export default PseudoElm;