itmar-block-packages 1.3.17 → 1.3.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itmar-block-packages",
-  "version": "1.3.17",
+  "version": "1.3.19",
   "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,15 +45,20 @@ 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;
   const center_icon = sel_pos.direction === "vertical" ? middle : justifyCenter;
   const end_icon = sel_pos.direction === "vertical" ? lower : justifyRight;
+  const start_cross = sel_pos.direction === "vertical" ? justifyLeft : upper;
+  const center_cross =
+    sel_pos.direction === "vertical" ? justifyCenter : middle;
+  const end_cross = sel_pos.direction === "vertical" ? justifyRight : lower;
   const between_icon =
     sel_pos.direction === "vertical" ? vert_between : justifyStretch;
   const around_icon =
@@ -67,6 +72,14 @@ export default function BlockPlace(props) {
     sel_pos.direction === "vertical"
       ? __("lower alignment", "block-collections")
       : __("right alignment", "block-collections");
+  const cross_start_tip =
+    sel_pos.direction === "vertical"
+      ? __("left alignment", "block-collections")
+      : __("upper alignment", "block-collections");
+  const cross_end_tip =
+    sel_pos.direction === "vertical"
+      ? __("right alignment", "block-collections")
+      : __("lower alignment", "block-collections");
 
   const [isContainer, setIsContainer] = useState(false);
   const [direction, setDirection] = useState("row");
@@ -186,21 +199,29 @@ 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 ? (
-              <p>{__("InnerBlock alignment(Mobile)", "block-collections")}</p>
+              <p>{__("InnerBlock Main Axis(Mobile)", "block-collections")}</p>
             ) : (
-              <p>{__("InnerBlock alignment(DeskTop)", "block-collections")}</p>
+              <p>{__("InnerBlock Main Axis(DeskTop)", "block-collections")}</p>
             )}
             <ToolbarGroup>
               <ToolbarItem>
@@ -208,7 +229,9 @@ export default function BlockPlace(props) {
                   <Button
                     {...itemProps}
                     isPressed={sel_pos.inner_align === "flex-start"}
-                    onClick={() => props.onFlexChange("flex-start")} //親コンポーネントに通知
+                    onClick={() =>
+                      props.onFlexChange("flex-start", "inner_align")
+                    } //親コンポーネントに通知
                     icon={start_icon}
                     label={start_tip}
                   />
@@ -219,7 +242,7 @@ export default function BlockPlace(props) {
                   <Button
                     {...itemProps}
                     isPressed={sel_pos.inner_align === "center"}
-                    onClick={() => props.onFlexChange("center")} //親コンポーネントに通知
+                    onClick={() => props.onFlexChange("center", "inner_align")} //親コンポーネントに通知
                     icon={center_icon}
                     label={__("center alignment", "block-collections")}
                   />
@@ -230,7 +253,9 @@ export default function BlockPlace(props) {
                   <Button
                     {...itemProps}
                     isPressed={sel_pos.inner_align === "flex-end"}
-                    onClick={() => props.onFlexChange("flex-end")} //親コンポーネントに通知
+                    onClick={() =>
+                      props.onFlexChange("flex-end", "inner_align")
+                    } //親コンポーネントに通知
                     icon={end_icon}
                     label={end_tip}
                   />
@@ -241,7 +266,9 @@ export default function BlockPlace(props) {
                   <Button
                     {...itemProps}
                     isPressed={sel_pos.inner_align === "space-between"}
-                    onClick={() => props.onFlexChange("space-between")} //親コンポーネントに通知
+                    onClick={() =>
+                      props.onFlexChange("space-between", "inner_align")
+                    } //親コンポーネントに通知
                     icon={between_icon}
                     label={__("beteen stretch", "block-collections")}
                   />
@@ -252,7 +279,9 @@ export default function BlockPlace(props) {
                   <Button
                     {...itemProps}
                     isPressed={sel_pos.inner_align === "space-around"}
-                    onClick={() => props.onFlexChange("space-around")} //親コンポーネントに通知
+                    onClick={() =>
+                      props.onFlexChange("space-around", "inner_align")
+                    } //親コンポーネントに通知
                     icon={around_icon}
                     label={__("around stretch", "block-collections")}
                   />
@@ -262,24 +291,25 @@ export default function BlockPlace(props) {
           </>
         )}
 
-        {!isContainer &&
-          !isSubmenu &&
+        {!isSubmenu &&
           (isMobile ? (
-            <p>{__("Block alignment(Mobile)", "block-collections")}</p>
+            <p>{__("InnerBlock Cross Axis(Mobile)", "block-collections")}</p>
           ) : (
-            <p>{__("Block alignment(DeskTop)", "block-collections")}</p>
+            <p>{__("InnerBlock Cross Axis(DeskTop)", "block-collections")}</p>
           ))}
 
-        {!isContainer && !isSubmenu && (
+        {!isSubmenu && (
           <ToolbarGroup>
             <ToolbarItem>
               {(itemProps) => (
                 <Button
                   {...itemProps}
-                  isPressed={sel_pos.outer_align === "left"}
-                  onClick={() => props.onAlignChange("left")}
-                  icon={justifyLeft}
-                  label={__("left alignment", "block-collections")}
+                  isPressed={sel_pos.inner_items === "flex-start"}
+                  onClick={() =>
+                    props.onFlexChange("flex-start", "inner_items")
+                  } //親コンポーネントに通知
+                  icon={start_cross}
+                  label={cross_start_tip}
                 />
               )}
             </ToolbarItem>
@@ -287,9 +317,9 @@ export default function BlockPlace(props) {
               {(itemProps) => (
                 <Button
                   {...itemProps}
-                  isPressed={sel_pos.outer_align === "center"}
-                  onClick={() => props.onAlignChange("center")}
-                  icon={justifyCenter}
+                  isPressed={sel_pos.inner_items === "center"}
+                  onClick={() => props.onFlexChange("center", "inner_items")} //親コンポーネントに通知
+                  icon={center_cross}
                   label={__("center alignment", "block-collections")}
                 />
               )}
@@ -298,10 +328,10 @@ export default function BlockPlace(props) {
               {(itemProps) => (
                 <Button
                   {...itemProps}
-                  isPressed={sel_pos.outer_align === "right"}
-                  onClick={() => props.onAlignChange("right")}
-                  icon={justifyRight}
-                  label={__("right alignment", "block-collections")}
+                  isPressed={sel_pos.inner_items === "flex-end"}
+                  onClick={() => props.onFlexChange("flex-end", "inner_items")} //親コンポーネントに通知
+                  icon={end_cross}
+                  label={cross_end_tip}
                 />
               )}
             </ToolbarItem>
@@ -310,9 +340,11 @@ 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 +417,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 +615,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 +637,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 +647,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 +658,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 +669,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 +679,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,
+  termToDispObj,
   PageSelectControl,
   ArchiveSelectControl,
   TermChoiceControl,