itmar-block-packages 1.0.1 → 1.2.0

package/src/cssPropertes.js

@@ -1,4 +1,7 @@
-import { css } from "styled-components";
+// sideの最初の文字を大文字にする関数
+const capitalizeFirstLetter = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
 
 //角丸のパラメータを返す
 export const radius_prm = (radius) => {
@@ -19,15 +22,40 @@ export const space_prm = (space) => {
     : "";
   return ret_space_prm;
 };
+//positionのオブジェクトを返します
+export const position_prm = (pos, type) => {
+  if (pos) {
+    const resetVertBase = pos.vertBase === "top" ? "bottom" : "top";
+    const resetHorBase = pos.horBase === "left" ? "right" : "left";
+    const ret_pos_prm =
+      pos && (type === "absolute" || type === "fixed" || type === "sticky")
+        ? `
+    ${pos.vertBase}: ${pos.vertValue}; 
+    ${pos.horBase}: ${pos.horValue};
+    ${resetVertBase}: auto;
+    ${resetHorBase}: auto;
+    ${
+      type === "fixed" || type === "sticky"
+        ? "margin-block-start:0;z-index: 50;"
+        : "z-index: auto;"
+    }
+  `
+        : "";
+    return ret_pos_prm;
+  }
+  return null;
+};
 //ブロック幅を返す
 export const max_width_prm = (width, free_val) => {
   const ret_width_prm =
     width === "wideSize"
-      ? " width: 100%; max-width: var(--wp--style--global--wide-size);"
+      ? "width: 100%; max-width: var(--wp--style--global--wide-size);"
       : width === "contentSize"
-      ? " width: 100%; max-width: var(--wp--style--global--content-size);"
+      ? "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}px;`
+      : width === "full"
+      ? "width: 100%; max-width: 100%;"
       : " width: fit-content;";
   return ret_width_prm;
 };
@@ -43,6 +71,12 @@ export const width_prm = (width, free_val) => {
       : " width: fit-content;";
   return ret_width_prm;
 };
+
+export const height_prm = (height) => {
+  const ret_height_prm =
+    height === "fit" ? " height: fit-content;" : "height: 100%;";
+  return ret_height_prm;
+};
 //配置を返す
 export const align_prm = (align) => {
   const ret_align_prm =
@@ -70,13 +104,12 @@ export const convertToScss = (styleObject) => {
 export const borderProperty = (borderObj) => {
   if (borderObj) {
     //borderObjがundefinedでない
-
     let keys = ["top", "bottom", "left", "right"];
     let ret_prop = null;
     let doesKeyExist = keys.some((key) => key in borderObj);
     if (doesKeyExist) {
       //'top', 'bottom', 'left', 'right'が別設定
-      let cssString = "";
+      let cssObj = {};
       for (let side in borderObj) {
         const sideData = borderObj[side];
         const startsWithZero = String(sideData.width || "").match(/^0/);
@@ -85,29 +118,57 @@ export const borderProperty = (borderObj) => {
           continue;
         }
         const border_style = sideData.style || "solid";
-        cssString += `border-${side}: ${sideData.width} ${border_style} ${sideData.color};\n`;
+        let camelCaseSide = `border${capitalizeFirstLetter(side)}`;
+        cssObj[
+          camelCaseSide
+        ] = `${sideData.width} ${border_style} ${sideData.color}`;
       }
-      ret_prop = css`
-        ${cssString}
-      `;
+      ret_prop = cssObj;
       return ret_prop;
     } else {
       //同一のボーダー
       const startsWithZero = String(borderObj.width || "").match(/^0/);
-
       if (startsWithZero) {
-        //widthが０ならnoneを返す
-        return css`
-          border: none;
-        `;
+        //widthが０ならnullを返す
+        return null;
       }
       const border_style = borderObj.style || "solid";
-      ret_prop = css`
-        border: ${borderObj.width} ${border_style} ${borderObj.color};
-      `;
+      ret_prop = {
+        border: `${borderObj.width} ${border_style} ${borderObj.color}`,
+      };
+
       return ret_prop;
     }
   } else {
     return null;
   }
 };
+
+//角丸の設定
+export const radiusProperty = (radiusObj) => {
+  const ret_prop =
+    radiusObj && Object.keys(radiusObj).length === 1
+      ? radiusObj.value
+      : `${(radiusObj && radiusObj.topLeft) || ""} ${
+          (radiusObj && radiusObj.topRight) || ""
+        } ${(radiusObj && radiusObj.bottomRight) || ""} ${
+          (radiusObj && radiusObj.bottomLeft) || ""
+        }`;
+  const ret_val = { borderRadius: ret_prop };
+  return ret_val;
+};
+
+//マージンの設定
+export const marginProperty = (marginObj) => {
+  const ret_prop = `${marginObj.top} ${marginObj.right} ${marginObj.bottom} ${marginObj.left}`;
+
+  const ret_val = { margin: ret_prop };
+  return ret_val;
+};
+//パディングの設定
+export function paddingProperty(paddingObj) {
+  const ret_prop = `${paddingObj.top} ${paddingObj.right} ${paddingObj.bottom} ${paddingObj.left}`;
+
+  const ret_val = { padding: ret_prop };
+  return ret_val;
+}

package/src/index.js

@@ -8,31 +8,60 @@ export {
   useFontawesomeIframe,
 } from "./customFooks";
 
+//WordPressデータを取得するためのRestAPI
+export {
+  fetchPagesOptions,
+  fetchArchiveOptions,
+  PageSelectControl,
+  ArchiveSelectControl,
+} from "./wordpressApi";
+
+//styled-componet用のcssプロパティ生成関数
+export {
+  space_prm,
+  max_width_prm,
+  width_prm,
+  height_prm,
+  align_prm,
+  position_prm,
+  radius_prm,
+  convertToScss,
+  borderProperty,
+  radiusProperty,
+  marginProperty,
+  paddingProperty,
+} from "./cssPropertes";
+
 //ボックスシャドーを設定するコントロール
-export { ShadowElm } from "./ShadowElm";
-export { default as ShadowCtrl } from "./ShadowCtrl";
+export { default as ShadowStyle, ShadowElm } from "./ShadowStyle";
 
 //疑似要素を設定するコントロール
-export { Arrow } from "./Arrow";
-export { default as PseudoElm } from "./PseudoElm";
+export { default as PseudoElm, Arrow } from "./PseudoElm";
 
 //メディアライブラリから複数の画像を選択するコントロール
-export { MultiImageSelect } from "./mediaUpload";
+export { SingleImageSelect, MultiImageSelect } from "./mediaUpload";
 
 //ブロックのドラッガブルを設定するコントロール
-export { default as DraggableBox } from "./DraggableBox";
-export { useDraggingMove } from "./draggingFook";
+export { default as DraggableBox, useDraggingMove } from "./DraggableBox";
+
+//アニメーションを設定するコントロール
+export { default as AnimationBlock, anime_comp } from "./AnimationBlock";
+
+//ブロックの配置を設定するコントロール
+export { default as BlockPlace } from "./BlockPlace";
+export { default as GridControls } from "./GridControls";
+
+//DOM要素の表示を反転させるコントロール
+export { default as ToggleElement } from "./ToggleElement";
+
+//タイポグラフィーの設定をするコントロール
+export { default as TypographyControls } from "./TypographyControls";
+
+//アイコンの表示を設定するコントロール
+export { default as IconSelectControl } from "./IconSelectControl";
 
 //ブロックをlazy Loadさせるためのラッパーモジュール
 export { default as BlockEditWrapper } from "./BlockEditWrapper";
 
-//styled-componet用のcssプロパティ生成関数
-export {
-  radius_prm,
-  space_prm,
-  max_width_prm,
-  width_prm,
-  align_prm,
-  convertToScss,
-  borderProperty,
-} from "./cssPropertes";
+//色コードの変換関数
+export { hslToRgb16, rgb16ToHsl, HexToRGB } from "./hslToRgb";

package/src/mediaUpload.js

@@ -2,6 +2,51 @@ import { MediaUpload, MediaUploadCheck } from "@wordpress/block-editor";
 import { __ } from "@wordpress/i18n";
 import { Button, PanelBody } from "@wordpress/components";
 
+export function SingleImageSelect(props) {
+  const { attributes } = props;
+  const { mediaID, media } = attributes;
+
+  //URL の配列から画像を生成
+  const getImage = (image) => {
+    //メディアオブジェクトの配列をループ処理
+    return (
+      <figure>
+        <img src={image.url} className="image" alt="アップロード画像" />
+      </figure>
+    );
+  };
+
+  //メディアライブラリを開くボタンをレンダリングする関数
+  const getImageButton = (open) => {
+    if (media) {
+      return (
+        <div onClick={open} className="block-container">
+          {getImage(media)}
+        </div>
+      );
+    } else {
+      return (
+        <div className="button-container">
+          <Button onClick={open} className="button button-large">
+            {__("Sel", "itmar_mv_blocks")}
+          </Button>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <MediaUploadCheck>
+      <MediaUpload
+        onSelect={(media) => props.onSelectChange(media)}
+        allowedTypes={["image"]}
+        value={mediaID}
+        render={({ open }) => getImageButton(open)}
+      />
+    </MediaUploadCheck>
+  );
+}
+
 export function MultiImageSelect(props) {
   const { attributes, label } = props;
   const { mediaID, media } = attributes;

package/src/wordpressApi.js

@@ -0,0 +1,73 @@
+import { useState, useEffect } from '@wordpress/element';
+import { ComboboxControl } from '@wordpress/components';
+import apiFetch from '@wordpress/api-fetch';
+
+//コントロールのレンダリング関数
+const SelectControl = ({ setAttributes, attributes, label, homeUrl, fetchOptions }) => {
+  const { selectedPageId } = attributes;
+  const [options, setOptions] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const fetchedOptions = await fetchOptions(homeUrl);
+        setOptions(fetchedOptions);
+      } catch (error) {
+        console.error('Error fetching data:', error.message);
+      }
+    };
+
+    fetchData();
+  }, [fetchOptions]);
+
+  const handleChange = (selectedId) => {
+    const selectedPage = options.find(page => page.value === selectedId);
+    setAttributes({
+      selectedPageId: selectedId,
+      selectedPageUrl: selectedPage ? selectedPage.link : homeUrl
+    });
+  };
+
+  return (
+    <ComboboxControl
+      label={label}
+      options={options}
+      value={selectedPageId}
+      onChange={handleChange}
+    />
+  );
+};
+
+export const fetchPagesOptions = async (home_url) => {
+  const pages = await apiFetch({ path: '/wp/v2/pages' });
+  if (pages && !pages.some(page => page.id === -1)) {
+    pages.unshift({ id: -1, title: { rendered: 'ホーム' }, link: home_url });
+  }
+  return pages ? pages.map(page => ({
+    value: page.id,
+    label: page.title.rendered,
+    link: page.link
+  })) : [];
+};
+
+export const fetchArchiveOptions = async (home_url) => {
+  const response = await apiFetch({ path: '/wp/v2/types' });
+  let idCounter = 0;
+  return Object.keys(response).reduce((acc, key) => {
+    const postType = response[key];
+    if (postType.has_archive === true) {
+      acc.push({ value: idCounter++, link: `${home_url}/${postType.slug}`, label: postType.name });
+    } else if (typeof postType.has_archive === 'string') {
+      acc.push({ value: idCounter++, link: `${home_url}/${postType.has_archive}`, label: postType.name });
+    }
+    return acc;
+  }, []);
+};
+
+export const PageSelectControl = (props) => (
+  <SelectControl {...props} fetchOptions={fetchPagesOptions} />
+);
+
+export const ArchiveSelectControl = (props) => (
+  <SelectControl {...props} fetchOptions={fetchArchiveOptions} />
+);

package/webpack.config.js

@@ -1,28 +1,10 @@
 const defaultConfig = require("@wordpress/scripts/config/webpack.config");
 
-// オリジナルのoptimizationをカスタマイズ
+// オリジナルをカスタマイズ
 module.exports = {
   ...defaultConfig,
   output: {
     ...defaultConfig.output,
-    //libraryTarget: "commonjs2",
     libraryTarget: "umd",
-    //globalObject: "this",
-  },
-  module: {
-    ...defaultConfig.module,
-    rules: [
-      ...defaultConfig.module.rules,
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        use: {
-          loader: "babel-loader",
-          options: {
-            presets: ["@babel/preset-react"],
-          },
-        },
-      },
-    ],
   },
 };

package/babel.config.js

@@ -1,16 +0,0 @@
-module.exports = {
-  presets: [
-    // 他のプリセットがあればここに追加
-    "@wordpress/default", // WordPressのデフォルトプリセットを追加
-  ],
-  plugins: [
-    [
-      "@babel/plugin-transform-modules-commonjs",
-      {
-        allowTopLevelThis: true,
-        strict: false,
-        strictMode: false,
-      },
-    ],
-  ],
-};

package/src/Arrow.js

@@ -1,35 +0,0 @@
-import { __ } from "@wordpress/i18n";
-import { css } from "styled-components";
-import { RadioControl } from "@wordpress/components";
-
-// 矢印の向きに応じたスタイルを生成するヘルパー関数
-const arrowDirectionStyles = (direction) => {
-  switch (direction) {
-    case "left":
-      return "transform: translate(-50%, -50%) rotate(-135deg);";
-    case "right":
-      return "transform: translate(-50%, -50%) rotate(45deg);";
-    case "upper":
-      return "transform: translate(-50%, -50%) rotate(-45deg);";
-    case "under":
-      return "transform: translate(-50%, -50%) rotate(135deg);";
-    default:
-      return "transform: translate(-50%, -50%) rotate(45deg);"; // default to 'down'
-  }
-};
-
-// 矢印のスタイルを適用するコンポーネント
-export const Arrow = ({ direction = "down" }) => css`
-  &::after {
-    content: "";
-    position: absolute;
-    display: block;
-    width: 15%;
-    height: 15%;
-    border-top: 3px solid var(--wp--preset--color--accent-2);
-    border-right: 3px solid var(--wp--preset--color--accent-2);
-    top: 50%;
-    left: 50%;
-    ${arrowDirectionStyles(direction)}
-  }
-`;