itmar-block-packages 1.3.8 → 1.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itmar-block-packages",
-  "version": "1.3.8",
+  "version": "1.3.10",
   "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

@@ -615,3 +615,169 @@ export default function BlockPlace(props) {
     </>
   );
 }
+
+export function BlockWidth(props) {
+  const { attributes, isMobile, isSubmenu } = props;
+  const { default_val, mobile_val } = attributes;
+
+  //モバイルかデスクトップか
+  const sel_pos = isMobile ? mobile_val : default_val;
+
+  // 翻訳が必要な文字列を直接指定
+  const blockMaxWidthMobile = __(
+    "Block Max Width(Mobile)",
+    "block-collections"
+  );
+  const blockWidthMobile = __("Block Width(Mobile)", "block-collections");
+  const blockMaxWidthDesktop = __(
+    "Block Max Width(DeskTop)",
+    "block-collections"
+  );
+  const blockWidthDesktop = __("Block Width(DeskTop)", "block-collections");
+
+  // 条件に応じて選択
+  const blockWidthLabel = isMobile
+    ? isSubmenu
+      ? blockWidthMobile
+      : blockMaxWidthMobile
+    : isSubmenu
+    ? blockWidthDesktop
+    : blockMaxWidthDesktop;
+
+  return (
+    <>
+      <p>{blockWidthLabel}</p>
+      <ToolbarGroup>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.width_val === "full"}
+              onClick={() => props.onWidthChange("full")}
+              text="full"
+            />
+          )}
+        </ToolbarItem>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.width_val === "fit"}
+              onClick={() => props.onWidthChange("fit")}
+              text="fit"
+            />
+          )}
+        </ToolbarItem>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.width_val === "wideSize"}
+              onClick={() => props.onWidthChange("wideSize")}
+              icon={stretchWide}
+              label={__("Wide Size", "block-collections")}
+            />
+          )}
+        </ToolbarItem>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.width_val === "contentSize"}
+              onClick={() => props.onWidthChange("contentSize")}
+              icon={positionCenter}
+              label={__("Content Size", "block-collections")}
+            />
+          )}
+        </ToolbarItem>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.width_val === "free"}
+              onClick={() => props.onWidthChange("free")}
+              text="free"
+            />
+          )}
+        </ToolbarItem>
+      </ToolbarGroup>
+
+      {sel_pos.width_val === "free" && (
+        <RangeControl
+          value={sel_pos.free_width}
+          label={__("Max width", "block-collections")}
+          max={1800}
+          min={50}
+          step={10}
+          onChange={(newValue) => {
+            props.onFreeWidthChange(newValue);
+          }}
+          withInputField={true}
+        />
+      )}
+    </>
+  );
+}
+
+export function BlockHeight(props) {
+  const { attributes, isMobile } = props;
+  const { default_val, mobile_val } = attributes;
+
+  //モバイルかデスクトップか
+  const sel_pos = isMobile ? mobile_val : default_val;
+
+  return (
+    <>
+      {isMobile ? (
+        <p>{__("Block Height(Mobile)", "block-collections")}</p>
+      ) : (
+        <p>{__("Block Height(DeskTop)", "block-collections")}</p>
+      )}
+      <ToolbarGroup>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.height_val === "full"}
+              onClick={() => props.onHeightChange("full")}
+              text="full"
+            />
+          )}
+        </ToolbarItem>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.height_val === "fit"}
+              onClick={() => props.onHeightChange("fit")}
+              text="fit"
+            />
+          )}
+        </ToolbarItem>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.height_val === "free"}
+              onClick={() => props.onHeightChange("free")}
+              text="free"
+            />
+          )}
+        </ToolbarItem>
+      </ToolbarGroup>
+      {sel_pos.height_val === "free" && (
+        <RangeControl
+          value={sel_pos.free_height}
+          label={__("Height", "block-collections")}
+          max={1800}
+          min={50}
+          step={10}
+          onChange={(newValue) => {
+            props.onFreeHeightChange(newValue);
+          }}
+          withInputField={true}
+        />
+      )}
+    </>
+  );
+}

package/src/cssPropertes.js

@@ -55,7 +55,7 @@ export const max_width_prm = (width, free_val) => {
       : width === "free"
       ? `width: 100%; max-width: ${free_val}px;`
       : width === "full"
-      ? "width: 100%; max-width: 100%;"
+      ? "width: fit-content; max-width: 100%;"
       : " width: fit-content;";
   return ret_width_prm;
 };
@@ -68,6 +68,8 @@ export const width_prm = (width, free_val) => {
       ? " width: var(--wp--style--global--content-size);"
       : width === "free"
       ? ` width: ${free_val}px; `
+      : width === "full"
+      ? " width: 100%;"
       : " width: fit-content;";
   return ret_width_prm;
 };

package/src/customFooks.js

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useState } from "@wordpress/element";
 import { useSelect, useDispatch } from "@wordpress/data";
 import isEqual from "lodash/isEqual";
+import { __ } from "@wordpress/i18n";
 
 //useRefで参照したDOM要素の大きさを取得するカスタムフック
 export function useElementWidth() {
@@ -249,3 +250,63 @@ export function useBlockAttributeChanges(
 
   return JSON.parse(latestAttributes);
 }
+
+//インナーブロックが挿入されたとき、指定されたブロック名が存在れば、挿入されたブロックを削除するフック
+export function useDuplicateBlockRemove(clientId, blockNames) {
+  const { removeBlock } = useDispatch("core/block-editor");
+  const { createNotice } = useDispatch("core/notices");
+
+  // clientIdに対応するインナーブロックを取得
+  const innerBlocks = useSelect(
+    (select) => select("core/block-editor").getBlocks(clientId),
+    [clientId]
+  );
+
+  // 前回の innerBlocks を保存するための ref
+  const prevInnerBlocksRef = useRef(innerBlocks);
+
+  useEffect(() => {
+    const prevInnerBlocks = prevInnerBlocksRef.current;
+    //先に保存したインナーブロックの中に対象となるブロックが存在しなければ何もしない
+    const result = prevInnerBlocks.some((block) =>
+      blockNames.includes(block.name)
+    );
+
+    if (result) {
+      // ブロックが挿入されているか確認（前回と比較）
+      if (innerBlocks.length > prevInnerBlocks.length) {
+        // 新しく挿入されたブロックを特定
+        const newlyInsertedBlock = innerBlocks.find(
+          (block) =>
+            !prevInnerBlocks.some(
+              (prevBlock) => prevBlock.clientId === block.clientId
+            )
+        );
+
+        // 新しいブロックが blockNames に含まれている場合、削除
+        if (
+          newlyInsertedBlock &&
+          blockNames.includes(newlyInsertedBlock.name)
+        ) {
+          removeBlock(newlyInsertedBlock.clientId);
+
+          // 通知を作成
+          createNotice(
+            "error", // 通知のタイプ（エラー）
+            __(
+              "A new block cannot be inserted because a block has already been placed.",
+              "block-collections"
+            ), // メッセージ
+            {
+              type: "snackbar", // 通知のスタイル
+              isDismissible: true, // 通知を閉じることができるか
+            }
+          );
+        }
+      }
+    }
+
+    // 現在の innerBlocks を次回用に保存
+    prevInnerBlocksRef.current = innerBlocks;
+  }, [innerBlocks, blockNames, removeBlock, createNotice]);
+}

package/src/index.js

@@ -7,6 +7,7 @@ export {
   useDeepCompareEffect,
   useFontawesomeIframe,
   useBlockAttributeChanges,
+  useDuplicateBlockRemove,
 } from "./customFooks";
 
 //WordPressデータを取得するためのRestAPI
@@ -53,7 +54,7 @@ export { default as DraggableBox, useDraggingMove } from "./DraggableBox";
 export { default as AnimationBlock, anime_comp } from "./AnimationBlock";
 
 //ブロックの配置を設定するコントロール
-export { default as BlockPlace } from "./BlockPlace";
+export { default as BlockPlace, BlockWidth, BlockHeight } from "./BlockPlace";
 export { default as GridControls } from "./GridControls";
 
 //DOM要素の表示を反転させるコントロール