itmar-block-packages 1.3.16 → 1.3.18

package/package.json

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

@@ -45,10 +45,10 @@ const vert_around = <Icon icon={justifySpaceBetween} className="rotate-icon" />;
 export default function BlockPlace(props) {
   const { attributes, clientId, blockRef, isMobile, isSubmenu, isParallax } =
     props;
-  const { positionType, isPosCenter, default_pos, mobile_pos } = attributes;
+  const { positionType, isPosCenter, default_val, mobile_val } = attributes;
 
   //モバイルかデスクトップか
-  const sel_pos = isMobile ? mobile_pos : default_pos;
+  const sel_pos = isMobile ? mobile_val : default_val;
 
   //配置アイコンの選択
   const start_icon = sel_pos.direction === "vertical" ? upper : justifyLeft;
@@ -186,15 +186,23 @@ export default function BlockPlace(props) {
               />
             )}
           </ToolbarItem>
+          {(sel_pos.direction === "horizen" ||
+            sel_pos.direction === "vertical") && (
+            <PanelRow className="position_row">
+              <ToggleControl
+                label={__("reverse", "block-collections")}
+                checked={sel_pos.reverse}
+                onChange={(checked) => props.onReverseChange(checked)}
+              />
+              <ToggleControl
+                label={__("wrap", "block-collections")}
+                checked={sel_pos.wrap}
+                onChange={(checked) => props.onWrapChange(checked)}
+              />
+            </PanelRow>
+          )}
         </ToolbarGroup>
-        {(sel_pos.direction === "horizen" ||
-          sel_pos.direction === "vertical") && (
-          <ToggleControl
-            label={__("reverse", "block-collections")}
-            checked={sel_pos.reverse}
-            onChange={(checked) => props.onReverseChange(checked)}
-          />
-        )}
+
         {sel_pos.direction !== "block" && sel_pos.direction !== "grid" && (
           <>
             {isMobile ? (
@@ -262,15 +270,14 @@ export default function BlockPlace(props) {
           </>
         )}
 
-        {!isContainer &&
-          !isSubmenu &&
+        {!isSubmenu &&
           (isMobile ? (
             <p>{__("Block alignment(Mobile)", "block-collections")}</p>
           ) : (
             <p>{__("Block alignment(DeskTop)", "block-collections")}</p>
           ))}
 
-        {!isContainer && !isSubmenu && (
+        {!isSubmenu && (
           <ToolbarGroup>
             <ToolbarItem>
               {(itemProps) => (
@@ -310,9 +317,9 @@ export default function BlockPlace(props) {
         {isContainer && (
           <>
             {isMobile ? (
-              <p>{__("Block alignment(Mobile)", "block-collections")}</p>
+              <p>{__("Alignment in container(Mobile)", "block-collections")}</p>
             ) : (
-              <p>{__("Block alignment(DeskTop)", "block-collections")}</p>
+              <p>{__("Alignment in container(DeskTop)", "block-collections")}</p>
             )}
 
             <ToolbarGroup>
@@ -385,114 +392,22 @@ export default function BlockPlace(props) {
           </>
         )}
 
-        <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" && (
-          <UnitControl
-            dragDirection="e"
-            onChange={(newValue) => props.onFreeWidthChange(newValue)}
-            value={sel_pos.free_width}
-          />
-        )}
+        <BlockWidth
+          attributes={attributes}
+          isMobile={isMobile}
+          isSubmenu={isSubmenu}
+          onWidthChange={(key, widthVal) => props.onWidthChange(key, widthVal)}
+          onFreeWidthChange={(key, freeVal) =>
+            props.onFreeWidthChange(key, freeVal)
+          }
+        />
 
-        {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" && (
-          <UnitControl
-            dragDirection="e"
-            onChange={(newValue) => props.onFreeHeightChange(newValue)}
-            value={sel_pos.free_height}
-          />
-        )}
+        <BlockHeight
+          attributes={attributes}
+          isMobile={isMobile}
+          onHeightChange={(heightVal) => props.onHeightChange(heightVal)}
+          onFreeHeightChange={(freeVal) => props.onFreeHeightChange(freeVal)}
+        />
 
         {sel_pos.direction === "grid" && (
           <>
@@ -675,25 +590,19 @@ export function BlockWidth(props) {
   );
   const blockWidthDesktop = __("Block Width(DeskTop)", "block-collections");
 
-  // 条件に応じて選択
-  const blockWidthLabel = isMobile
-    ? isSubmenu
-      ? blockMaxWidthMobile
-      : blockWidthMobile
-    : isSubmenu
-    ? blockMaxWidthDesktop
-    : blockWidthDesktop;
-
+  // ラベル
+  const widthLabel = isMobile ? blockWidthMobile : blockWidthDesktop;
+  const maxWidthLabel = isMobile ? blockMaxWidthMobile : blockMaxWidthDesktop;
   return (
     <>
-      <p>{blockWidthLabel}</p>
+      <p>{widthLabel}</p>
       <ToolbarGroup>
         <ToolbarItem>
           {(itemProps) => (
             <Button
               {...itemProps}
               isPressed={sel_pos.width_val === "full"}
-              onClick={() => props.onWidthChange("full")}
+              onClick={() => props.onWidthChange("width_val", "full")}
               text="full"
             />
           )}
@@ -703,7 +612,7 @@ export function BlockWidth(props) {
             <Button
               {...itemProps}
               isPressed={sel_pos.width_val === "fit"}
-              onClick={() => props.onWidthChange("fit")}
+              onClick={() => props.onWidthChange("width_val", "fit")}
               text="fit"
             />
           )}
@@ -713,7 +622,7 @@ export function BlockWidth(props) {
             <Button
               {...itemProps}
               isPressed={sel_pos.width_val === "wideSize"}
-              onClick={() => props.onWidthChange("wideSize")}
+              onClick={() => props.onWidthChange("width_val", "wideSize")}
               icon={stretchWide}
               label={__("Wide Size", "block-collections")}
             />
@@ -724,7 +633,7 @@ export function BlockWidth(props) {
             <Button
               {...itemProps}
               isPressed={sel_pos.width_val === "contentSize"}
-              onClick={() => props.onWidthChange("contentSize")}
+              onClick={() => props.onWidthChange("width_val", "contentSize")}
               icon={positionCenter}
               label={__("Content Size", "block-collections")}
             />
@@ -735,7 +644,7 @@ export function BlockWidth(props) {
             <Button
               {...itemProps}
               isPressed={sel_pos.width_val === "free"}
-              onClick={() => props.onWidthChange("free")}
+              onClick={() => props.onWidthChange("width_val", "free")}
               text="free"
             />
           )}
@@ -745,10 +654,77 @@ export function BlockWidth(props) {
       {sel_pos.width_val === "free" && (
         <UnitControl
           dragDirection="e"
-          onChange={(newValue) => props.onFreeWidthChange(newValue)}
+          onChange={(newValue) =>
+            props.onFreeWidthChange("free_width", newValue)
+          }
           value={sel_pos.free_width}
         />
       )}
+      <p>{maxWidthLabel}</p>
+      <ToolbarGroup>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.max_width === "full"}
+              onClick={() => props.onWidthChange("max_width", "full")}
+              text="full"
+            />
+          )}
+        </ToolbarItem>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.max_width === "fit"}
+              onClick={() => props.onWidthChange("max_width", "fit")}
+              text="fit"
+            />
+          )}
+        </ToolbarItem>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.max_width === "wideSize"}
+              onClick={() => props.onWidthChange("max_width", "wideSize")}
+              icon={stretchWide}
+              label={__("Wide Size", "block-collections")}
+            />
+          )}
+        </ToolbarItem>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.max_width === "contentSize"}
+              onClick={() => props.onWidthChange("max_width", "contentSize")}
+              icon={positionCenter}
+              label={__("Content Size", "block-collections")}
+            />
+          )}
+        </ToolbarItem>
+        <ToolbarItem>
+          {(itemProps) => (
+            <Button
+              {...itemProps}
+              isPressed={sel_pos.max_width === "free"}
+              onClick={() => props.onWidthChange("max_width", "free")}
+              text="free"
+            />
+          )}
+        </ToolbarItem>
+      </ToolbarGroup>
+
+      {sel_pos.max_width === "free" && (
+        <UnitControl
+          dragDirection="e"
+          onChange={(newValue) =>
+            props.onFreeWidthChange("max_free_width", newValue)
+          }
+          value={sel_pos.max_free_width}
+        />
+      )}
     </>
   );
 }

package/src/cssPropertes.js

@@ -69,14 +69,14 @@ export const position_prm = (pos, type) => {
 export const max_width_prm = (width, free_val) => {
   const ret_width_prm =
     width === "wideSize"
-      ? "width: 100%; max-width: var(--wp--style--global--wide-size);"
+      ? "max-width: var(--wp--style--global--wide-size);"
       : width === "contentSize"
-      ? "width: 100%; max-width: var(--wp--style--global--content-size);"
+      ? "max-width: var(--wp--style--global--content-size);"
       : width === "free"
-      ? `width: 100%; max-width: ${free_val};`
+      ? `max-width: ${free_val};`
       : width === "full"
-      ? "width: fit-content; max-width: 100%;"
-      : " width: fit-content;";
+      ? "max-width: 100%;"
+      : "max-width: fit-content;";
   return ret_width_prm;
 };
 
@@ -110,8 +110,8 @@ export const align_prm = (align, camelFLg = false) => {
     align === "center"
       ? "margin-left: auto; margin-right: auto;"
       : align === "right"
-      ? "margin-left: auto; margin-right: 0"
-      : "margin-right: auto; margin-left: 0";
+      ? "margin-left: auto; margin-right: 0;"
+      : "margin-right: auto; margin-left: 0;";
   //インナースタイル用
   const camel_align_prm =
     align === "center"

package/src/customFooks.js

@@ -109,6 +109,30 @@ export function useElementBackgroundColor(blockRef, style) {
   return baseColor;
 }
 
+//ブロックのスタイルを取得し、コールバック関数を返すカスタムフック
+export function useElementStyleObject(blockRef, style) {
+  const [styleObject, setStyleObject] = useState("");
+
+  useEffect(() => {
+    if (blockRef.current && style) {
+      //レンダリング結果に基づくスタイルの取得
+      const computedStyles = getComputedStyle(blockRef.current);
+      // styleオブジェクトのキーに基づいてnewStyleObjectを生成
+      const newStyleObject = Object.keys(style).reduce((acc, key) => {
+        if (computedStyles[key]) {
+          // computedStylesにキーが存在するか確認
+          acc[key] = computedStyles[key];
+        }
+        return acc;
+      }, {});
+
+      setStyleObject(JSON.stringify(newStyleObject));
+    }
+  }, [blockRef, style]);
+  // styleObjectをオブジェクトとして返す
+  return styleObject;
+}
+
 //たくさんの要素をもつオブジェクトや配列の内容の変化で発火するuseEffect
 export function useDeepCompareEffect(callback, dependencies) {
   const dependenciesRef = useRef();

package/src/index.js

@@ -2,6 +2,7 @@
 export {
   useIsIframeMobile,
   useElementBackgroundColor,
+  useElementStyleObject,
   useElementWidth,
   useIsMobile,
   useDeepCompareEffect,
@@ -14,8 +15,10 @@ export {
 export {
   fetchPagesOptions,
   fetchArchiveOptions,
+  restFetchData,
   restTaxonomies,
-  //restFieldes,
+  restFieldes,
+  termToDispObj,
   PageSelectControl,
   ArchiveSelectControl,
   TermChoiceControl,

package/src/wordpressApi.js

@@ -9,9 +9,9 @@ import apiFetch from "@wordpress/api-fetch";
 
 //const _ = require("lodash");
 
-export const fetchData = async (rest_api) => {
+export const restFetchData = async (path) => {
   try {
-    const ret_data = await rest_api();
+    const ret_data = await apiFetch({ path: path });
     return ret_data;
   } catch (error) {
     console.error("Error fetching data:", error.message);
@@ -149,6 +149,7 @@ const ChoiceControl = (props) => {
       }
     });
   };
+
   return (
     <div className={`${type}_section`}>
       {type === "taxonomy" &&
@@ -171,7 +172,7 @@ const ChoiceControl = (props) => {
                     onChange={(checked) => {
                       const target = {
                         taxonomy: choice.slug,
-                        term: { id: term.id, slug: term.slug },
+                        term: { id: term.id, slug: term.slug, name: term.name },
                       };
                       const newChoiceTerms = handleChoiceChange(
                         checked,
@@ -187,6 +188,18 @@ const ChoiceControl = (props) => {
         })}
       {type === "field" &&
         choices.map((choice, index) => {
+          //metaの対象カスタムフィールドが含まれるかのフラグ
+          const metaFlg =
+            choice.meta &&
+            !Object.keys(choice.meta).every(
+              (key) => key === "_acf_changed" || key === "footnotes"
+            );
+          //acfの対象カスタムフィールドが含まれるかのフラグ
+          const acfFlg =
+            choice.acf &&
+            typeof choice.acf === "object" &&
+            !Array.isArray(choice.acf);
+
           return (
             <div key={index} className="field_section">
               {choice.title && (
@@ -250,7 +263,7 @@ const ChoiceControl = (props) => {
                   }}
                 />
               )}
-              {(choice.meta || choice.acf.length > 0) && (
+              {(metaFlg || acfFlg) && (
                 <>
                   <div className="custom_field_label">
                     {__("Custom Field", "block-collections")}
@@ -368,6 +381,32 @@ export const restTaxonomies = async (post_type) => {
   return taxonomyObjects;
 };
 
+//タームの文字列化
+export const termToDispObj = (terms, connectString) => {
+  // taxonomyごとにterm.nameをまとめる
+  const result = terms.reduce((acc, item) => {
+    const taxonomy = item.taxonomy;
+    const termName = item.term.name;
+
+    // taxonomyがまだ存在しない場合は初期化
+    if (!acc[taxonomy]) {
+      acc[taxonomy] = [];
+    }
+
+    // term.nameを配列に追加
+    acc[taxonomy].push(termName);
+
+    return acc;
+  }, {});
+
+  // 各taxonomyの配列を connectString でつなげて文字列化
+  for (const taxonomy in result) {
+    result[taxonomy] = result[taxonomy].join(connectString);
+  }
+
+  return result;
+};
+
 //フィールド情報取得RestAPI関数
 export const restFieldes = async (rest_base) => {
   //投稿データに以下のフィールドが含まれているかを調べる