itmar-block-packages 1.3.11 → 1.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itmar-block-packages",
-  "version": "1.3.11",
+  "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;
@@ -532,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") && (
           <>
@@ -541,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>

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