itmar-block-packages 1.3.10 → 1.3.12

package/package.json

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

@@ -44,7 +44,7 @@ const vert_around = <Icon icon={justifySpaceBetween} className="rotate-icon" />;
 
 export default function BlockPlace(props) {
   const { attributes, clientId, blockRef, isMobile, isSubmenu } = props;
-  const { positionType, default_pos, mobile_pos } = attributes;
+  const { positionType, isPosCenter, default_pos, mobile_pos } = attributes;
 
   //モバイルかデスクトップか
   const sel_pos = isMobile ? mobile_pos : default_pos;
@@ -441,16 +441,10 @@ export default function BlockPlace(props) {
         </ToolbarGroup>
 
         {sel_pos.width_val === "free" && (
-          <RangeControl
+          <UnitControl
+            dragDirection="e"
+            onChange={(newValue) => props.onFreeWidthChange(newValue)}
             value={sel_pos.free_width}
-            label={__("Max width", "block-collections")}
-            max={1800}
-            min={300}
-            step={10}
-            onChange={(newValue) => {
-              props.onFreeWidthChange(newValue);
-            }}
-            withInputField={true}
           />
         )}
 
@@ -492,16 +486,10 @@ export default function BlockPlace(props) {
           </ToolbarItem>
         </ToolbarGroup>
         {sel_pos.height_val === "free" && (
-          <RangeControl
+          <UnitControl
+            dragDirection="e"
+            onChange={(newValue) => props.onFreeHeightChange(newValue)}
             value={sel_pos.free_height}
-            label={__("Height", "block-collections")}
-            max={1800}
-            min={300}
-            step={10}
-            onChange={(newValue) => {
-              props.onFreeHeightChange(newValue);
-            }}
-            withInputField={true}
           />
         )}
 
@@ -544,7 +532,19 @@ export default function BlockPlace(props) {
             }}
           />
         </div>
-        {(positionType === "absolute" ||
+        {positionType === "absolute" && (
+          <ToggleControl
+            label={__(
+              "Center Vertically and Horizontally",
+              "block-collections"
+            )}
+            checked={isPosCenter}
+            onChange={(newVal) => {
+              props.onIsPosCenterChange(newVal);
+            }}
+          />
+        )}
+        {((positionType === "absolute" && !isPosCenter) ||
           positionType === "fixed" ||
           positionType === "sticky") && (
           <>
@@ -553,62 +553,97 @@ export default function BlockPlace(props) {
             ) : (
               <p>{__("Block Position(DeskTop)", "block-collections")}</p>
             )}
-            <PanelRow className="position_row">
-              <ComboboxControl
-                label={__("Vertical", "block-collections")}
-                options={[
-                  { value: "top", label: "Top" },
-                  { value: "bottom", label: "Bottom" },
-                ]}
-                value={sel_pos.posValue?.vertBase || "top"}
-                onChange={(newValue) => {
-                  const newValObj = {
-                    ...(sel_pos.posValue || {}),
-                    vertBase: newValue,
-                  };
-                  props.onPosValueChange(newValObj);
-                }}
-              />
-              <UnitControl
-                dragDirection="e"
-                onChange={(newValue) => {
-                  const newValObj = {
-                    ...(sel_pos.posValue || {}),
-                    vertValue: newValue,
-                  };
-                  props.onPosValueChange(newValObj);
-                }}
-                value={sel_pos.posValue?.vertValue || "3em"}
-              />
-            </PanelRow>
-            <PanelRow className="position_row">
-              <ComboboxControl
-                label={__("Horizon", "block-collections")}
-                options={[
-                  { value: "left", label: "Left" },
-                  { value: "right", label: "Right" },
-                ]}
-                value={sel_pos.posValue?.horBase || "left"}
+            <PanelBody
+              title={__("Vertical", "block-collections")}
+              initialOpen={true}
+            >
+              {!sel_pos.posValue?.isVertCenter && (
+                <PanelRow className="position_row">
+                  <ComboboxControl
+                    options={[
+                      { value: "top", label: "Top" },
+                      { value: "bottom", label: "Bottom" },
+                    ]}
+                    value={sel_pos.posValue?.vertBase || "top"}
+                    onChange={(newValue) => {
+                      const newValObj = {
+                        ...(sel_pos.posValue || {}),
+                        vertBase: newValue,
+                      };
+                      props.onPosValueChange(newValObj);
+                    }}
+                  />
+                  <UnitControl
+                    dragDirection="e"
+                    onChange={(newValue) => {
+                      const newValObj = {
+                        ...(sel_pos.posValue || {}),
+                        vertValue: newValue,
+                      };
+                      props.onPosValueChange(newValObj);
+                    }}
+                    value={sel_pos.posValue?.vertValue || "3em"}
+                  />
+                </PanelRow>
+              )}
+              <ToggleControl
+                label={__("Is Center", "block-collections")}
+                checked={sel_pos.posValue?.isVertCenter}
                 onChange={(newValue) => {
                   const newValObj = {
                     ...(sel_pos.posValue || {}),
-                    horBase: newValue,
+                    isVertCenter: newValue,
                   };
                   props.onPosValueChange(newValObj);
                 }}
               />
-              <UnitControl
-                dragDirection="e"
+            </PanelBody>
+
+            <PanelBody
+              title={__("Horizon", "block-collections")}
+              initialOpen={true}
+            >
+              {!sel_pos.posValue?.isHorCenter && (
+                <PanelRow className="position_row">
+                  <ComboboxControl
+                    options={[
+                      { value: "left", label: "Left" },
+                      { value: "right", label: "Right" },
+                    ]}
+                    value={sel_pos.posValue?.horBase || "left"}
+                    onChange={(newValue) => {
+                      const newValObj = {
+                        ...(sel_pos.posValue || {}),
+                        horBase: newValue,
+                      };
+                      props.onPosValueChange(newValObj);
+                    }}
+                  />
+                  <UnitControl
+                    dragDirection="e"
+                    onChange={(newValue) => {
+                      const newValObj = {
+                        ...(sel_pos.posValue || {}),
+                        horValue: newValue,
+                      };
+                      props.onPosValueChange(newValObj);
+                    }}
+                    value={sel_pos.posValue?.horValue || "3em"}
+                  />
+                </PanelRow>
+              )}
+              <ToggleControl
+                label={__("Is Center", "block-collections")}
+                checked={sel_pos.posValue?.isHorCenter}
                 onChange={(newValue) => {
                   const newValObj = {
                     ...(sel_pos.posValue || {}),
-                    horValue: newValue,
+                    isHorCenter: newValue,
                   };
                   props.onPosValueChange(newValObj);
                 }}
-                value={sel_pos.posValue?.horValue || "3em"}
               />
-            </PanelRow>
+            </PanelBody>
           </>
         )}
       </PanelBody>
@@ -703,16 +738,10 @@ export function BlockWidth(props) {
       </ToolbarGroup>
 
       {sel_pos.width_val === "free" && (
-        <RangeControl
+        <UnitControl
+          dragDirection="e"
+          onChange={(newValue) => props.onFreeWidthChange(newValue)}
           value={sel_pos.free_width}
-          label={__("Max width", "block-collections")}
-          max={1800}
-          min={50}
-          step={10}
-          onChange={(newValue) => {
-            props.onFreeWidthChange(newValue);
-          }}
-          withInputField={true}
         />
       )}
     </>
@@ -766,16 +795,10 @@ export function BlockHeight(props) {
         </ToolbarItem>
       </ToolbarGroup>
       {sel_pos.height_val === "free" && (
-        <RangeControl
+        <UnitControl
+          dragDirection="e"
+          onChange={(newValue) => props.onFreeHeightChange(newValue)}
           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

@@ -2,6 +2,10 @@
 const capitalizeFirstLetter = (string) => {
   return string.charAt(0).toUpperCase() + string.slice(1);
 };
+// objectかどうか判定する関数
+const isObject = (value) => {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+};
 
 //角丸のパラメータを返す
 export const radius_prm = (radius) => {
@@ -24,14 +28,26 @@ export const space_prm = (space) => {
 };
 //positionのオブジェクトを返します
 export const position_prm = (pos, type) => {
-  if (pos) {
+  //値でポジションを設定
+  if (isObject(pos)) {
     const resetVertBase = pos.vertBase === "top" ? "bottom" : "top";
     const resetHorBase = pos.horBase === "left" ? "right" : "left";
+    const centerVert = "50%";
+    const centerHor = "50%";
+    const centerTrans =
+      pos.isVertCenter && pos.isHorCenter
+        ? "transform: translate(-50%, -50%);"
+        : pos.isVertCenter
+        ? "transform: translateY(-50%);"
+        : pos.isHorCenter
+        ? "transform: translateX(-50%);"
+        : null;
     const ret_pos_prm =
       pos && (type === "absolute" || type === "fixed" || type === "sticky")
         ? `
-    ${pos.vertBase}: ${pos.vertValue}; 
-    ${pos.horBase}: ${pos.horValue};
+    ${pos.vertBase}: ${pos.isVertCenter ? centerVert : pos.vertValue}; 
+    ${pos.horBase}: ${pos.isHorCenter ? centerHor : pos.horValue};
+    ${centerTrans}
     ${resetVertBase}: auto;
     ${resetHorBase}: auto;
     ${
@@ -42,6 +58,10 @@ export const position_prm = (pos, type) => {
   `
         : "";
     return ret_pos_prm;
+    //縦横中央揃え
+  } else if (pos) {
+    const ret_pos_prm = "top:50%;left: 50%;transform: translate(-50%, -50%);";
+    return ret_pos_prm;
   }
   return null;
 };
@@ -53,7 +73,7 @@ export const max_width_prm = (width, free_val) => {
       : width === "contentSize"
       ? "width: 100%; max-width: var(--wp--style--global--content-size);"
       : width === "free"
-      ? `width: 100%; max-width: ${free_val}px;`
+      ? `width: 100%; max-width: ${free_val};`
       : width === "full"
       ? "width: fit-content; max-width: 100%;"
       : " width: fit-content;";
@@ -67,7 +87,7 @@ export const width_prm = (width, free_val) => {
       : width === "contentSize"
       ? " width: var(--wp--style--global--content-size);"
       : width === "free"
-      ? ` width: ${free_val}px; `
+      ? ` width: ${free_val}; `
       : width === "full"
       ? " width: 100%;"
       : " width: fit-content;";
@@ -79,7 +99,7 @@ export const height_prm = (height, free_val) => {
     height === "fit"
       ? " height: fit-content;"
       : height === "free"
-      ? ` height: ${free_val}px; `
+      ? ` height: ${free_val}; `
       : "height: 100%;";
   return ret_height_prm;
 };