itmar-block-packages 1.7.0 → 1.8.0

package/package.json

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

package/src/BlockPlace.js

@@ -11,6 +11,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
   RangeControl,
+  TextControl,
   RadioControl,
   ToggleControl,
   Modal,
@@ -59,6 +60,8 @@ export default function BlockPlace(props) {
   const center_cross =
     sel_pos.direction === "vertical" ? justifyCenter : middle;
   const end_cross = sel_pos.direction === "vertical" ? justifyRight : lower;
+  const stretch =
+    sel_pos.direction === "vertical" ? justifyStretch : vert_between;
   const between_icon =
     sel_pos.direction === "vertical" ? vert_between : justifyStretch;
   const around_icon =
@@ -82,12 +85,14 @@ export default function BlockPlace(props) {
       : __("lower alignment", "block-collections");
 
   const [isContainer, setIsContainer] = useState(false);
+  const [isFlexItem, setIsFlexItem] = useState(false);
   const [direction, setDirection] = useState("row");
   useEffect(() => {
     if (blockRef.current) {
       const element = blockRef.current;
       const parentElement = element.parentElement;
       const grandparentElement = parentElement?.parentElement;
+
       const computedStyle = getComputedStyle(grandparentElement);
       //親要素がFlex又はGridコンテナか
       if (
@@ -103,6 +108,7 @@ export default function BlockPlace(props) {
         computedStyle.display === "flex" ||
         computedStyle.display === "inline-flex"
       ) {
+        setIsFlexItem(true);
         if (
           computedStyle.flexDirection === "row" ||
           computedStyle.flexDirection === "row-reverse"
@@ -270,7 +276,7 @@ export default function BlockPlace(props) {
                       props.onFlexChange("space-between", "inner_align")
                     } //親コンポーネントに通知
                     icon={between_icon}
-                    label={__("beteen stretch", "block-collections")}
+                    label={__("stretch", "block-collections")}
                   />
                 )}
               </ToolbarItem>
@@ -335,6 +341,17 @@ export default function BlockPlace(props) {
                 />
               )}
             </ToolbarItem>
+            <ToolbarItem>
+              {(itemProps) => (
+                <Button
+                  {...itemProps}
+                  isPressed={sel_pos.inner_items === "stretch"}
+                  onClick={() => props.onFlexChange("stretch", "inner_items")} //親コンポーネントに通知
+                  icon={stretch}
+                  label={__("beteen stretch", "block-collections")}
+                />
+              )}
+            </ToolbarItem>
           </ToolbarGroup>
         )}
         {isContainer && (
@@ -413,6 +430,21 @@ export default function BlockPlace(props) {
                   />
                 )}
               </ToolbarItem>
+              <ToolbarItem>
+                {(itemProps) => (
+                  <Button
+                    {...itemProps}
+                    isPressed={sel_pos.outer_vertical === "stretch"}
+                    onClick={
+                      direction === "row"
+                        ? () => props.onVerticalChange("stretch")
+                        : () => props.onAlignChange("stretch")
+                    }
+                    icon={direction === "row" ? vert_between : justifyStretch}
+                    label={__("stretch", "block-collections")}
+                  />
+                )}
+              </ToolbarItem>
             </ToolbarGroup>
           </>
         )}
@@ -427,6 +459,50 @@ export default function BlockPlace(props) {
           }
         />
 
+        {isFlexItem && (
+          <PanelRow className="position_row">
+            <TextControl
+              label={__("grow", "block-collections")}
+              labelPosition="left"
+              value={sel_pos.flex?.grow}
+              onChange={(newValue) => {
+                const flexObj = {
+                  grow: newValue,
+                  shrink: sel_pos.flex?.shrink,
+                  basis: sel_pos.flex?.basis,
+                };
+                props.onFlexItemChange(flexObj);
+              }}
+            />
+            <TextControl
+              label={__("shrink", "block-collections")}
+              labelPosition="left"
+              value={sel_pos.flex?.shrink}
+              onChange={(newValue) => {
+                const flexObj = {
+                  grow: sel_pos.flex?.grow,
+                  shrink: newValue,
+                  basis: sel_pos.flex?.basis,
+                };
+                props.onFlexItemChange(flexObj);
+              }}
+            />
+            <TextControl
+              label={__("basis", "block-collections")}
+              labelPosition="left"
+              value={sel_pos.flex?.basis}
+              onChange={(newValue) => {
+                const flexObj = {
+                  grow: sel_pos.flex?.grow,
+                  shrink: sel_pos.flex?.shrink,
+                  basis: newValue,
+                };
+                props.onFlexItemChange(flexObj);
+              }}
+            />
+          </PanelRow>
+        )}
+
         <BlockHeight
           attributes={attributes}
           isMobile={isMobile}
@@ -603,7 +679,7 @@ export default function BlockPlace(props) {
 }
 
 export function BlockWidth(props) {
-  const { attributes, isMobile, isSubmenu } = props;
+  const { attributes, isMobile, flexDirection, isSubmenu } = props;
   const { default_val, mobile_val } = attributes;
 
   //モバイルかデスクトップか
@@ -805,6 +881,16 @@ export function BlockHeight(props) {
             />
           )}
         </ToolbarItem>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.height_val === "auto"}
+              onClick={() => props.onHeightChange("auto")}
+              text="auto"
+            />
+          )}
+        </ToolbarItem>
       </ToolbarGroup>
       {sel_pos.height_val === "free" && (
         <UnitControl

package/src/blockStore.js

@@ -1,5 +1,6 @@
 import { useSelect } from "@wordpress/data";
 import { store as blockEditorStore } from "@wordpress/block-editor";
+import { createBlock } from "@wordpress/blocks";
 
 export const useTargetBlocks = (
   clientId,
@@ -52,3 +53,23 @@ export const flattenBlocks = (blocks) => {
     return acc;
   }, []);
 };
+
+// 再帰的にブロック構造をシリアライズする関数
+export const serializeBlockTree = (block) => {
+  return {
+    blockName: block.name,
+    attributes: block.attributes,
+    innerBlocks:
+      block.innerBlocks.length > 0
+        ? block.innerBlocks.map(serializeBlockTree)
+        : [],
+  };
+};
+// シリアライズしたブロックデータをもとの階層構造に戻す関数
+export const createBlockTree = (blockData) => {
+  const inner = Array.isArray(blockData.innerBlocks)
+    ? blockData.innerBlocks.map(createBlockTree)
+    : [];
+
+  return createBlock(blockData.blockName, blockData.attributes, inner);
+};

package/src/cssPropertes.js

@@ -90,7 +90,9 @@ export const width_prm = (width, free_val) => {
       ? ` width: ${free_val}; `
       : width === "full"
       ? " width: 100%;"
-      : " width: fit-content;";
+      : width === "fit"
+      ? " width: fit-content;"
+      : " width: auto;";
   return ret_width_prm;
 };
 
@@ -98,9 +100,11 @@ export const height_prm = (height, free_val) => {
   const ret_height_prm =
     height === "fit"
       ? " height: fit-content;"
+      : height === "full"
+      ? ` height: 100%; `
       : height === "free"
       ? ` height: ${free_val}; `
-      : "height: 100%;";
+      : "height: auto;";
   return ret_height_prm;
 };
 //配置を返す

package/src/formatCreate.js

@@ -0,0 +1,179 @@
+import { __ } from "@wordpress/i18n";
+import {
+  PanelBody,
+  PanelRow,
+  RangeControl,
+  TextControl,
+  SelectControl,
+} from "@wordpress/components";
+import { format, getSettings } from "@wordpress/date";
+
+//日付のフォーマット
+const dateFormats = [
+  { label: "YYYY-MM-DD HH:mm:ss", value: "Y-m-d H:i:s" },
+  { label: "MM/DD/YYYY", value: "m/d/Y" },
+  { label: "DD/MM/YYYY", value: "d/m/Y" },
+  { label: "MMMM D, YYYY", value: "F j, Y" },
+  { label: "HH:mm:ss", value: "H:i:s" },
+  { label: "YYYY.M.D", value: "Y.n.j" },
+  { label: "Day, MMMM D, YYYY", value: "l, F j, Y" },
+  { label: "ddd, MMM D, YYYY", value: "D, M j, Y" },
+  { label: "YYYY年M月D日 (曜日)", value: "Y年n月j日 (l)" },
+];
+//プレーンのフォーマット
+const plaineFormats = [
+  {
+    key: "str_free",
+    label: __("Free String", "block-collections"),
+    value: "%s",
+  },
+  {
+    key: "num_comma",
+    label: __("Numbers (comma separated)", "block-collections"),
+    value: {
+      style: "decimal",
+      useGrouping: true, // カンマ区切り
+    },
+  },
+  {
+    key: "num_no_comma",
+    label: __("Numbers (no commas)", "block-collections"),
+    value: {
+      style: "decimal",
+      useGrouping: false,
+    },
+  },
+  {
+    key: "num_amount",
+    label: __("Amount", "block-collections"),
+    value: {
+      style: "currency",
+      currency: "JPY",
+    },
+  },
+];
+
+export const FormatSelectControl = ({
+  titleType,
+  userFormat,
+  freeStrFormat,
+  decimal,
+  onFormatChange,
+}) => {
+  const isPlaine = titleType === "plaine";
+  const isDate = titleType === "date";
+  const isUser = titleType === "user";
+
+  //SelectControlのオプションを生成
+  const options = isDate
+    ? dateFormats
+    : plaineFormats.map((f) => ({ label: f.label, value: f.key }));
+
+  return (
+    <PanelBody title={__("Display Format Setting", "block-collections")}>
+      {(isPlaine || isDate) && (
+        <>
+          <SelectControl
+            label={__("Select Format", "block-collections")}
+            value={userFormat}
+            options={options}
+            onChange={(newFormat) =>
+              onFormatChange({
+                userFormat: newFormat,
+                freeStrFormat,
+                decimal,
+              })
+            }
+          />
+
+          {userFormat?.startsWith("str_") && (
+            <TextControl
+              label={__("String Format", "block-collections")}
+              value={freeStrFormat}
+              onChange={(newFormat) =>
+                onFormatChange({
+                  userFormat,
+                  freeStrFormat: newFormat,
+                  decimal,
+                })
+              }
+            />
+          )}
+          {userFormat?.startsWith("num_") && (
+            <PanelRow className="itmar_post_blocks_pannel">
+              <RangeControl
+                value={decimal}
+                label={__("Decimal Num", "query-blocks")}
+                max={5}
+                min={0}
+                onChange={(val) =>
+                  onFormatChange({
+                    userFormat,
+                    freeStrFormat,
+                    decimal: val,
+                  })
+                }
+              />
+            </PanelRow>
+          )}
+        </>
+      )}
+
+      {isUser && (
+        <TextControl
+          label={__("User Format", "block-collections")}
+          value={freeStrFormat}
+          onChange={(newFormat) =>
+            onFormatChange({
+              userFormat: "str_free",
+              freeStrFormat: newFormat,
+              decimal,
+            })
+          }
+        />
+      )}
+    </PanelBody>
+  );
+};
+
+export const displayFormated = (
+  content,
+  userFormat,
+  freeStrFormat,
+  decimal
+) => {
+  // 内部で使用するロケール
+  const locale = getSettings().l10n?.locale || "en";
+
+  //日付にフォーマットがあれば、それで書式設定してリターン
+  const isDateFormat = dateFormats.find((f) => f.value === userFormat);
+  if (isDateFormat) {
+    const ret_val = format(userFormat, content, getSettings());
+    return ret_val;
+  }
+  //数値や文字列のフォーマット
+  const selectedFormat = plaineFormats.find((f) => f.key === userFormat)?.value;
+  if (typeof selectedFormat === "object") {
+    // Intl.NumberFormat オプション
+    try {
+      const numeric = parseFloat(content);
+      // `selectedFormat` を元に新しいフォーマット設定を生成（mutateしない）
+      const options = { ...selectedFormat };
+
+      if (typeof decimal === "number" && decimal > 0) {
+        options.minimumFractionDigits = decimal;
+        options.maximumFractionDigits = decimal;
+      }
+
+      const formatter = new Intl.NumberFormat(locale, options);
+      return formatter.format(numeric);
+    } catch (e) {
+      console.warn("Number format failed:", e);
+      return content;
+    }
+  } else if (typeof selectedFormat === "string") {
+    return freeStrFormat.replace("%s", content);
+  }
+  //フォーマットが見つからないときはそのまま返す
+  return content;
+};

package/src/index.js

@@ -48,7 +48,13 @@ export { default as ShadowStyle, ShadowElm } from "./ShadowStyle";
 export { default as PseudoElm, Arrow } from "./PseudoElm";
 
 //メディアライブラリから複数の画像を選択するコントロール
-export { SingleImageSelect, MultiImageSelect } from "./mediaUpload";
+export {
+  SingleImageSelect,
+  MultiImageSelect,
+  getMediaType,
+  getImageAspectRatio,
+  getVideoAspectRatio,
+} from "./mediaUpload";
 
 //ブロックのドラッガブルを設定するコントロール
 export { default as DraggableBox, useDraggingMove } from "./DraggableBox";
@@ -89,7 +95,12 @@ export {
 } from "./DateElm";
 
 //インナーブロック関連の関数
-export { flattenBlocks, useTargetBlocks } from "./blockStore";
+export {
+  flattenBlocks,
+  useTargetBlocks,
+  serializeBlockTree,
+  createBlockTree,
+} from "./blockStore";
 
 //バリデーションチェック関連の関数
 export { isValidUrlWithUrlApi } from "./validationCheck";
@@ -99,3 +110,6 @@ export { default as UpdateAllPostsBlockAttributes } from "./UpdateAllPostsBlockA
 
 //住所変換関連の関数
 export { fetchZipToAddress } from "./ZipAddress";
+
+//書式設定用のコンポーネント
+export { FormatSelectControl, displayFormated } from "./formatCreate";

package/src/mediaUpload.js

@@ -113,3 +113,66 @@ export function MultiImageSelect(props) {
     </PanelBody>
   );
 }
+
+//静止画か動画かを判定する関数
+export function getMediaType(url) {
+  const imageExtensions = [
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".gif",
+    ".webp",
+    ".bmp",
+    ".svg",
+  ];
+  const videoExtensions = [".mp4", ".webm", ".ogg", ".mov", ".m4v"];
+
+  // クエリストリング（?以降）を除去
+  const cleanUrl = url.split("?")[0].toLowerCase();
+
+  const isImage = imageExtensions.some((ext) => cleanUrl.endsWith(ext));
+  const isVideo = videoExtensions.some((ext) => cleanUrl.endsWith(ext));
+
+  if (isImage) {
+    return "image";
+  } else if (isVideo) {
+    return "video";
+  } else {
+    // 拡張子で判別できない → HEADリクエストでContent-Type判定 or fallback
+    return undefined;
+  }
+}
+//静止画のアスペクト比を返す関数
+export function getImageAspectRatio(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = function () {
+      const aspectRatio = img.naturalWidth / img.naturalHeight;
+      resolve(aspectRatio);
+    };
+    img.onerror = function () {
+      reject(new Error("画像の読み込みに失敗しました: " + url));
+    };
+    img.src = url;
+  });
+}
+//動画のアスペクト比を返す関数
+export function getVideoAspectRatio(url) {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+
+    video.preload = "metadata";
+    video.src = url;
+    video.muted = true; // 一部のブラウザで安全に動作させるため
+    video.playsInline = true;
+
+    video.onloadedmetadata = function () {
+      const aspectRatio = video.videoWidth / video.videoHeight;
+      resolve(aspectRatio);
+    };
+
+    video.onerror = function () {
+      reject(new Error("動画の読み込みに失敗しました: " + url));
+    };
+  });
+}