itmar-block-packages 1.7.0 → 1.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itmar-block-packages",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "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/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";

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));
+    };
+  });
+}