itmar-block-packages 1.10.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (157) hide show
  1. package/README.md +78 -2
  2. package/build/cjs/AnimationBlock.js +107 -0
  3. package/build/cjs/AnimationBlock.js.map +1 -0
  4. package/build/cjs/BlockEditWrapper.js +20 -0
  5. package/build/cjs/BlockEditWrapper.js.map +1 -0
  6. package/build/cjs/BlockPlace.js +509 -0
  7. package/build/cjs/BlockPlace.js.map +1 -0
  8. package/build/cjs/BrockInserter.js +204 -0
  9. package/build/cjs/BrockInserter.js.map +1 -0
  10. package/build/cjs/DateElm.js +321 -0
  11. package/build/cjs/DateElm.js.map +1 -0
  12. package/build/cjs/DraggableBox.js +143 -0
  13. package/build/cjs/DraggableBox.js.map +1 -0
  14. package/build/cjs/GridControls.js +421 -0
  15. package/build/cjs/GridControls.js.map +1 -0
  16. package/build/cjs/IconSelectControl.js +167 -0
  17. package/build/cjs/IconSelectControl.js.map +1 -0
  18. package/build/cjs/JapaneseHolidays.js +99 -0
  19. package/build/cjs/JapaneseHolidays.js.map +1 -0
  20. package/build/cjs/MasonryControl.js +124 -0
  21. package/build/cjs/MasonryControl.js.map +1 -0
  22. package/build/cjs/PseudoElm.js +66 -0
  23. package/build/cjs/PseudoElm.js.map +1 -0
  24. package/build/cjs/ShadowStyle.js +453 -0
  25. package/build/cjs/ShadowStyle.js.map +1 -0
  26. package/build/cjs/SwiperControl.js +267 -0
  27. package/build/cjs/SwiperControl.js.map +1 -0
  28. package/build/cjs/ToggleElement.js +17 -0
  29. package/build/cjs/ToggleElement.js.map +1 -0
  30. package/build/cjs/TypographyControls.js +151 -0
  31. package/build/cjs/TypographyControls.js.map +1 -0
  32. package/build/cjs/UpdateAllPostsBlockAttributes.js +137 -0
  33. package/build/cjs/UpdateAllPostsBlockAttributes.js.map +1 -0
  34. package/build/cjs/ZipAddress.js +34 -0
  35. package/build/cjs/ZipAddress.js.map +1 -0
  36. package/build/cjs/_virtual/_rollupPluginBabelHelpers.js +117 -0
  37. package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map +1 -0
  38. package/build/cjs/blockStore.js +65 -0
  39. package/build/cjs/blockStore.js.map +1 -0
  40. package/build/cjs/cssPropertes.js +157 -0
  41. package/build/cjs/cssPropertes.js.map +1 -0
  42. package/build/cjs/customFooks.js +300 -0
  43. package/build/cjs/customFooks.js.map +1 -0
  44. package/build/cjs/formatCreate.js +160 -0
  45. package/build/cjs/formatCreate.js.map +1 -0
  46. package/build/cjs/hslToRgb.js +133 -0
  47. package/build/cjs/hslToRgb.js.map +1 -0
  48. package/build/cjs/index.js +115 -0
  49. package/build/cjs/index.js.map +1 -0
  50. package/build/cjs/mediaUpload.js +182 -0
  51. package/build/cjs/mediaUpload.js.map +1 -0
  52. package/build/cjs/node_modules/nanoid/index.js +30 -0
  53. package/build/cjs/node_modules/nanoid/index.js.map +1 -0
  54. package/build/cjs/node_modules/nanoid/url-alphabet/index.js +7 -0
  55. package/build/cjs/node_modules/nanoid/url-alphabet/index.js.map +1 -0
  56. package/build/cjs/shopfiApi.js +188 -0
  57. package/build/cjs/shopfiApi.js.map +1 -0
  58. package/build/cjs/validationCheck.js +15 -0
  59. package/build/cjs/validationCheck.js.map +1 -0
  60. package/build/cjs/wordpressApi.js +631 -0
  61. package/build/cjs/wordpressApi.js.map +1 -0
  62. package/build/esm/AnimationBlock.js +102 -0
  63. package/build/esm/AnimationBlock.js.map +1 -0
  64. package/build/esm/BlockEditWrapper.js +16 -0
  65. package/build/esm/BlockEditWrapper.js.map +1 -0
  66. package/build/esm/BlockPlace.js +503 -0
  67. package/build/esm/BlockPlace.js.map +1 -0
  68. package/build/esm/BrockInserter.js +202 -0
  69. package/build/esm/BrockInserter.js.map +1 -0
  70. package/build/esm/DateElm.js +309 -0
  71. package/build/esm/DateElm.js.map +1 -0
  72. package/build/esm/DraggableBox.js +138 -0
  73. package/build/esm/DraggableBox.js.map +1 -0
  74. package/build/esm/GridControls.js +417 -0
  75. package/build/esm/GridControls.js.map +1 -0
  76. package/build/esm/IconSelectControl.js +163 -0
  77. package/build/esm/IconSelectControl.js.map +1 -0
  78. package/build/esm/JapaneseHolidays.js +97 -0
  79. package/build/esm/JapaneseHolidays.js.map +1 -0
  80. package/{src → build/esm}/MasonryControl.js +108 -113
  81. package/build/esm/MasonryControl.js.map +1 -0
  82. package/build/esm/PseudoElm.js +61 -0
  83. package/build/esm/PseudoElm.js.map +1 -0
  84. package/build/esm/ShadowStyle.js +448 -0
  85. package/build/esm/ShadowStyle.js.map +1 -0
  86. package/{src → build/esm}/SwiperControl.js +265 -265
  87. package/build/esm/SwiperControl.js.map +1 -0
  88. package/build/esm/ToggleElement.js +13 -0
  89. package/build/esm/ToggleElement.js.map +1 -0
  90. package/build/esm/TypographyControls.js +147 -0
  91. package/build/esm/TypographyControls.js.map +1 -0
  92. package/build/esm/UpdateAllPostsBlockAttributes.js +133 -0
  93. package/build/esm/UpdateAllPostsBlockAttributes.js.map +1 -0
  94. package/build/esm/ZipAddress.js +32 -0
  95. package/build/esm/ZipAddress.js.map +1 -0
  96. package/build/esm/_virtual/_rollupPluginBabelHelpers.js +107 -0
  97. package/build/esm/_virtual/_rollupPluginBabelHelpers.js.map +1 -0
  98. package/build/esm/blockStore.js +60 -0
  99. package/build/esm/blockStore.js.map +1 -0
  100. package/build/esm/cssPropertes.js +144 -0
  101. package/build/esm/cssPropertes.js.map +1 -0
  102. package/{src → build/esm}/customFooks.js +290 -337
  103. package/build/esm/customFooks.js.map +1 -0
  104. package/build/esm/formatCreate.js +157 -0
  105. package/build/esm/formatCreate.js.map +1 -0
  106. package/build/esm/hslToRgb.js +129 -0
  107. package/build/esm/hslToRgb.js.map +1 -0
  108. package/build/esm/index.js +27 -0
  109. package/build/esm/index.js.map +1 -0
  110. package/build/esm/mediaUpload.js +176 -0
  111. package/build/esm/mediaUpload.js.map +1 -0
  112. package/build/esm/node_modules/nanoid/index.js +27 -0
  113. package/build/esm/node_modules/nanoid/index.js.map +1 -0
  114. package/build/esm/node_modules/nanoid/url-alphabet/index.js +5 -0
  115. package/build/esm/node_modules/nanoid/url-alphabet/index.js.map +1 -0
  116. package/build/esm/shopfiApi.js +184 -0
  117. package/build/esm/shopfiApi.js.map +1 -0
  118. package/build/esm/validationCheck.js +13 -0
  119. package/build/esm/validationCheck.js.map +1 -0
  120. package/build/esm/wordpressApi.js +618 -0
  121. package/build/esm/wordpressApi.js.map +1 -0
  122. package/package.json +22 -6
  123. package/build/index.asset.php +0 -1
  124. package/build/index.js +0 -25
  125. package/css/editor.css +0 -23
  126. package/css/editor.css.map +0 -1
  127. package/img/animation.png +0 -0
  128. package/img/blockplace.png +0 -0
  129. package/img/grid.png +0 -0
  130. package/img/iconControl.png +0 -0
  131. package/img/pseudo.png +0 -0
  132. package/img/shadow.png +0 -0
  133. package/img/typography.png +0 -0
  134. package/src/AnimationBlock.js +0 -112
  135. package/src/BlockEditWrapper.js +0 -11
  136. package/src/BlockPlace.js +0 -904
  137. package/src/BrockInserter.js +0 -247
  138. package/src/DateElm.js +0 -354
  139. package/src/DraggableBox.js +0 -143
  140. package/src/GridControls.js +0 -462
  141. package/src/IconSelectControl.js +0 -186
  142. package/src/PseudoElm.js +0 -54
  143. package/src/ShadowStyle.js +0 -520
  144. package/src/ToggleElement.js +0 -18
  145. package/src/TypographyControls.js +0 -145
  146. package/src/UpdateAllPostsBlockAttributes.js +0 -127
  147. package/src/ZipAddress.js +0 -35
  148. package/src/blockStore.js +0 -75
  149. package/src/cssPropertes.js +0 -212
  150. package/src/formatCreate.js +0 -179
  151. package/src/hslToRgb.js +0 -162
  152. package/src/index.js +0 -131
  153. package/src/mediaUpload.js +0 -178
  154. package/src/shopfiApi.js +0 -187
  155. package/src/validationCheck.js +0 -10
  156. package/src/wordpressApi.js +0 -707
  157. package/webpack.config.js +0 -10
@@ -1,127 +0,0 @@
1
- import { useState, useRef } from "@wordpress/element";
2
- import { __ } from "@wordpress/i18n";
3
- import { ProgressBar, Button } from "@wordpress/components";
4
- import { parse, serialize } from "@wordpress/blocks";
5
- import apiFetch from "@wordpress/api-fetch";
6
-
7
- //特定の投稿タイプの投稿に含まれる本ブロックの属性を書き換える
8
-
9
- export default function UpdateAllPostsBlockAttributes({
10
- postType,
11
- blockName,
12
- newAttributes,
13
- onProcessStart,
14
- onProcessEnd,
15
- onProcessCancel,
16
- }) {
17
- const [progress, setProgress] = useState(0);
18
- // stateではなくrefを使用してキャンセル状態を管理する
19
- const cancelRef = useRef(false);
20
- const updatePostBlockAttributes = async () => {
21
- try {
22
- const allPosts = [];
23
- let page = 1;
24
- let hasMore = true;
25
- while (hasMore) {
26
- // REST APIを使ってすべての投稿を取得(投稿タイプを指定)
27
- const path = `/wp/v2/${postType}?per_page=100&page=${page}&context=edit`;
28
- const posts = await apiFetch({ path });
29
- allPosts.push(...posts);
30
- // 投稿が100件未満の場合、次のページは存在しない
31
- if (posts.length < 100) {
32
- hasMore = false;
33
- } else {
34
- page += 1; // 次のページに進む
35
- }
36
- }
37
- let allCount = allPosts.length;
38
- let processCount = 0;
39
- // キャンセルフラグをリセット
40
- cancelRef.current = false;
41
-
42
- for (const post of allPosts) {
43
- if (!post.content || !post.content.raw) {
44
- console.warn(`Post ID ${post.id} does not contain raw content.`);
45
- continue;
46
- }
47
- // ループの各回でキャンセルがリクエストされているかチェック
48
- if (cancelRef.current) {
49
- console.log("処理がキャンセルされました。");
50
- return;
51
- }
52
-
53
- const content = post.content.raw;
54
- const blocks = parse(content);
55
- // 特定のブロックの属性を更新
56
- const updatedBlocks = blocks.map((block) => {
57
- if (block.name === blockName) {
58
- // 属性をマージして更新
59
- block.attributes = {
60
- ...block.attributes,
61
- ...newAttributes,
62
- };
63
- }
64
- return block;
65
- });
66
-
67
- // 更新後のブロックをシリアライズ
68
- const updatedContent = serialize(updatedBlocks);
69
-
70
- // REST APIを使って投稿を更新
71
- try {
72
- await apiFetch({
73
- path: `/wp/v2/${postType}/${post.id}`,
74
- method: "POST",
75
- data: { content: updatedContent },
76
- });
77
- } catch (error) {
78
- console.error(`Failed to update post ID ${post.id}:`, error.message);
79
- if (error.data) {
80
- console.error("Error details:", error.data);
81
- }
82
- }
83
- //カウンターセットとプログレスバーの処理
84
- processCount++;
85
- setProgress(Math.round((processCount / allCount) * 100));
86
- }
87
-
88
- //終了処理
89
- onProcessEnd();
90
- } catch (error) {
91
- console.error("Error updating block attributes:", error);
92
- }
93
- };
94
- return (
95
- <>
96
- <ProgressBar value={progress} className="markdown_copy_progress" />
97
- <p>{progress}%</p>
98
- <div style={{ width: "fit-content", margin: "20px auto 0" }}>
99
- <Button
100
- variant="primary"
101
- onClick={() => {
102
- onProcessStart(); //親コンポーネントでスタート処理
103
- updatePostBlockAttributes();
104
- }}
105
- disabled={progress > 0 && progress < 100}
106
- >
107
- {__("Start Process", "markdown-block")}
108
- </Button>
109
- <Button
110
- variant="secondary"
111
- onClick={() => {
112
- if (progress === 0 || cancelRef.current) {
113
- onProcessEnd(); // 処理が始まる前ならすぐに終了処理を実行
114
- } else {
115
- // キャンセルフラグを更新(refならすぐに反映される)
116
- cancelRef.current = true;
117
- onProcessCancel(); //親コンポーネントでキャンセル処理
118
- }
119
- }}
120
- style={{ marginLeft: "10px" }}
121
- >
122
- {__("Cancel", "markdown-block")}
123
- </Button>
124
- </div>
125
- </>
126
- );
127
- }
package/src/ZipAddress.js DELETED
@@ -1,35 +0,0 @@
1
- import { __ } from "@wordpress/i18n";
2
-
3
- //郵便番号検索のデータと関数
4
- export const fetchZipToAddress = async (zipNum) => {
5
- if (!/^\d{7}$/.test(zipNum)) {
6
- alert(
7
- __(
8
- "Please enter your postal code as 7 digits without hyphens.",
9
- "block-collections"
10
- )
11
- );
12
- return null;
13
- }
14
-
15
- try {
16
- const response = await fetch(
17
- `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipNum.replace(
18
- "-",
19
- ""
20
- )}`
21
- );
22
- const data = await response.json();
23
-
24
- if (data.results && data.results.length > 0) {
25
- const result = data.results[0];
26
- return result;
27
- } else {
28
- alert(__("No matching address found", "block-collections"));
29
- return null;
30
- }
31
- } catch (error) {
32
- alert(__("Communication failed", "block-collections"));
33
- return null;
34
- }
35
- };
package/src/blockStore.js DELETED
@@ -1,75 +0,0 @@
1
- import { useSelect } from "@wordpress/data";
2
- import { store as blockEditorStore } from "@wordpress/block-editor";
3
- import { createBlock } from "@wordpress/blocks";
4
-
5
- export const useTargetBlocks = (
6
- clientId,
7
- blockName,
8
- attributeFilter = null,
9
- includeNested = false
10
- ) => {
11
- const targetblocks = useSelect(
12
- (select) => {
13
- const { getBlockRootClientId, getBlock } = select(blockEditorStore);
14
-
15
- const parentId = getBlockRootClientId(clientId); // 自分の親の clientId を取得
16
- if (!parentId) return attributeFilter ? null : [];
17
-
18
- const parentBlock = getBlock(parentId);
19
- if (!parentBlock) return attributeFilter ? null : [];
20
-
21
- const siblingBlocks = includeNested
22
- ? flattenBlocks(parentBlock.innerBlocks || []) //ネストされたブロックも含んで検索
23
- : parentBlock.innerBlocks || []; //兄弟ブロックのみ
24
-
25
- const filtered = siblingBlocks.filter(
26
- (block) => block.name === blockName && block.clientId !== clientId
27
- );
28
-
29
- if (attributeFilter) {
30
- return (
31
- filtered.find((block) => {
32
- return Object.entries(attributeFilter).every(
33
- ([key, value]) => block.attributes[key] === value
34
- );
35
- }) || null
36
- );
37
- }
38
-
39
- return filtered;
40
- },
41
- [clientId, blockName, JSON.stringify(attributeFilter), includeNested]
42
- );
43
- return targetblocks;
44
- };
45
-
46
- //ネストしたブロックを平坦化
47
- export const flattenBlocks = (blocks) => {
48
- return blocks.reduce((acc, block) => {
49
- acc.push(block);
50
- if (block.innerBlocks && block.innerBlocks.length > 0) {
51
- acc.push(...flattenBlocks(block.innerBlocks));
52
- }
53
- return acc;
54
- }, []);
55
- };
56
-
57
- // 再帰的にブロック構造をシリアライズする関数
58
- export const serializeBlockTree = (block) => {
59
- return {
60
- blockName: block.name,
61
- attributes: block.attributes,
62
- innerBlocks:
63
- block.innerBlocks.length > 0
64
- ? block.innerBlocks.map(serializeBlockTree)
65
- : [],
66
- };
67
- };
68
- // シリアライズしたブロックデータをもとの階層構造に戻す関数
69
- export const createBlockTree = (blockData) => {
70
- const inner = Array.isArray(blockData.innerBlocks)
71
- ? blockData.innerBlocks.map(createBlockTree)
72
- : [];
73
-
74
- return createBlock(blockData.blockName, blockData.attributes, inner);
75
- };
@@ -1,212 +0,0 @@
1
- // sideの最初の文字を大文字にする関数
2
- const capitalizeFirstLetter = (string) => {
3
- return string.charAt(0).toUpperCase() + string.slice(1);
4
- };
5
- // objectかどうか判定する関数
6
- const isObject = (value) => {
7
- return value !== null && typeof value === "object" && !Array.isArray(value);
8
- };
9
-
10
- //角丸のパラメータを返す
11
- export const radius_prm = (radius) => {
12
- const ret_radius_prm =
13
- radius && Object.keys(radius).length === 1
14
- ? radius.value
15
- : `${(radius && radius.topLeft) || ""} ${
16
- (radius && radius.topRight) || ""
17
- } ${(radius && radius.bottomRight) || ""} ${
18
- (radius && radius.bottomLeft) || ""
19
- }`;
20
- return ret_radius_prm;
21
- };
22
- //スペースのパラメータを返す
23
- export const space_prm = (space) => {
24
- const ret_space_prm = space
25
- ? `${space.top} ${space.right} ${space.bottom} ${space.left}`
26
- : "";
27
- return ret_space_prm;
28
- };
29
- //positionのオブジェクトを返します
30
- export const position_prm = (pos, type) => {
31
- //値でポジションを設定
32
- if (isObject(pos)) {
33
- const resetVertBase = pos.vertBase === "top" ? "bottom" : "top";
34
- const resetHorBase = pos.horBase === "left" ? "right" : "left";
35
- const centerVert = "50%";
36
- const centerHor = "50%";
37
- const centerTrans =
38
- pos.isVertCenter && pos.isHorCenter
39
- ? "transform: translate(-50%, -50%);"
40
- : pos.isVertCenter
41
- ? "transform: translateY(-50%);"
42
- : pos.isHorCenter
43
- ? "transform: translateX(-50%);"
44
- : "";
45
- const ret_pos_prm =
46
- pos && (type === "absolute" || type === "fixed" || type === "sticky")
47
- ? `
48
- ${pos.vertBase}: ${pos.isVertCenter ? centerVert : pos.vertValue};
49
- ${pos.horBase}: ${pos.isHorCenter ? centerHor : pos.horValue};
50
- ${centerTrans}
51
- ${resetVertBase}: auto;
52
- ${resetHorBase}: auto;
53
- ${
54
- type === "fixed" || type === "sticky"
55
- ? "margin-block-start:0;z-index: 50;"
56
- : "z-index: auto;"
57
- }
58
- `
59
- : "";
60
- return ret_pos_prm;
61
- //縦横中央揃え
62
- } else if (pos) {
63
- const ret_pos_prm = "top:50%;left: 50%;transform: translate(-50%, -50%);";
64
- return ret_pos_prm;
65
- }
66
- return null;
67
- };
68
- //ブロック幅を返す
69
- export const max_width_prm = (width, free_val) => {
70
- const ret_width_prm =
71
- width === "wideSize"
72
- ? "max-width: var(--wp--style--global--wide-size);"
73
- : width === "contentSize"
74
- ? "max-width: var(--wp--style--global--content-size);"
75
- : width === "free"
76
- ? `max-width: ${free_val};`
77
- : width === "full"
78
- ? "max-width: 100%;"
79
- : "max-width: fit-content;";
80
- return ret_width_prm;
81
- };
82
-
83
- export const width_prm = (width, free_val) => {
84
- const ret_width_prm =
85
- width === "wideSize"
86
- ? " width: var(--wp--style--global--wide-size);"
87
- : width === "contentSize"
88
- ? " width: var(--wp--style--global--content-size);"
89
- : width === "free"
90
- ? ` width: ${free_val}; `
91
- : width === "full"
92
- ? " width: 100%;"
93
- : width === "fit"
94
- ? " width: fit-content;"
95
- : " width: auto;";
96
- return ret_width_prm;
97
- };
98
-
99
- export const height_prm = (height, free_val) => {
100
- const ret_height_prm =
101
- height === "fit"
102
- ? " height: fit-content;"
103
- : height === "full"
104
- ? ` height: 100%; `
105
- : height === "free"
106
- ? ` height: ${free_val}; `
107
- : "height: auto;";
108
- return ret_height_prm;
109
- };
110
- //配置を返す
111
- export const align_prm = (align, camelFLg = false) => {
112
- //css用
113
- const ret_align_prm =
114
- align === "center"
115
- ? "margin-left: auto; margin-right: auto;"
116
- : align === "right"
117
- ? "margin-left: auto; margin-right: 0;"
118
- : "margin-right: auto; margin-left: 0;";
119
- //インナースタイル用
120
- const camel_align_prm =
121
- align === "center"
122
- ? { marginLeft: "auto", marginRight: "auto" }
123
- : align === "right"
124
- ? { marginLeft: "auto" }
125
- : {};
126
-
127
- return camelFLg ? camel_align_prm : ret_align_prm;
128
- };
129
-
130
- //スタイルオブジェクト変換関数
131
- export const convertToScss = (styleObject) => {
132
- let scss = "";
133
- for (const prop in styleObject) {
134
- if (styleObject.hasOwnProperty(prop)) {
135
- const scssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
136
- scss += `${scssProp}: ${styleObject[prop]};\n`;
137
- }
138
- }
139
- return scss;
140
- };
141
-
142
- export const borderProperty = (borderObj) => {
143
- if (borderObj) {
144
- //borderObjがundefinedでない
145
- let keys = ["top", "bottom", "left", "right"];
146
- let ret_prop = null;
147
- let doesKeyExist = keys.some((key) => key in borderObj);
148
- if (doesKeyExist) {
149
- //'top', 'bottom', 'left', 'right'が別設定
150
- let cssObj = {};
151
- for (let side in borderObj) {
152
- const sideData = borderObj[side];
153
- const startsWithZero = String(sideData.width || "").match(/^0/);
154
- if (startsWithZero) {
155
- //widthが0ならCSS設定しない
156
- continue;
157
- }
158
- const border_style = sideData.style || "solid";
159
- let camelCaseSide = `border${capitalizeFirstLetter(side)}`;
160
- cssObj[
161
- camelCaseSide
162
- ] = `${sideData.width} ${border_style} ${sideData.color}`;
163
- }
164
- ret_prop = cssObj;
165
- return ret_prop;
166
- } else {
167
- //同一のボーダー
168
- const startsWithZero = String(borderObj.width || "").match(/^0/);
169
- if (startsWithZero) {
170
- //widthが0ならnullを返す
171
- return null;
172
- }
173
- const border_style = borderObj.style || "solid";
174
- ret_prop = {
175
- border: `${borderObj.width} ${border_style} ${borderObj.color}`,
176
- };
177
-
178
- return ret_prop;
179
- }
180
- } else {
181
- return null;
182
- }
183
- };
184
-
185
- //角丸の設定
186
- export const radiusProperty = (radiusObj) => {
187
- const ret_prop =
188
- radiusObj && Object.keys(radiusObj).length === 1
189
- ? radiusObj.value
190
- : `${(radiusObj && radiusObj.topLeft) || ""} ${
191
- (radiusObj && radiusObj.topRight) || ""
192
- } ${(radiusObj && radiusObj.bottomRight) || ""} ${
193
- (radiusObj && radiusObj.bottomLeft) || ""
194
- }`;
195
- const ret_val = { borderRadius: ret_prop };
196
- return ret_val;
197
- };
198
-
199
- //マージンの設定
200
- export const marginProperty = (marginObj) => {
201
- const ret_prop = `${marginObj.top} ${marginObj.right} ${marginObj.bottom} ${marginObj.left}`;
202
-
203
- const ret_val = { margin: ret_prop };
204
- return ret_val;
205
- };
206
- //パディングの設定
207
- export function paddingProperty(paddingObj) {
208
- const ret_prop = `${paddingObj.top} ${paddingObj.right} ${paddingObj.bottom} ${paddingObj.left}`;
209
-
210
- const ret_val = { padding: ret_prop };
211
- return ret_val;
212
- }
@@ -1,179 +0,0 @@
1
- import { __ } from "@wordpress/i18n";
2
- import {
3
- PanelBody,
4
- PanelRow,
5
- RangeControl,
6
- TextControl,
7
- SelectControl,
8
- } from "@wordpress/components";
9
- import { format, getSettings } from "@wordpress/date";
10
-
11
- //日付のフォーマット
12
- const dateFormats = [
13
- { label: "YYYY-MM-DD HH:mm:ss", value: "Y-m-d H:i:s" },
14
- { label: "MM/DD/YYYY", value: "m/d/Y" },
15
- { label: "DD/MM/YYYY", value: "d/m/Y" },
16
- { label: "MMMM D, YYYY", value: "F j, Y" },
17
- { label: "HH:mm:ss", value: "H:i:s" },
18
- { label: "YYYY.M.D", value: "Y.n.j" },
19
- { label: "Day, MMMM D, YYYY", value: "l, F j, Y" },
20
- { label: "ddd, MMM D, YYYY", value: "D, M j, Y" },
21
- { label: "YYYY年M月D日 (曜日)", value: "Y年n月j日 (l)" },
22
- ];
23
- //プレーンのフォーマット
24
- const plaineFormats = [
25
- {
26
- key: "str_free",
27
- label: __("Free String", "block-collections"),
28
- value: "%s",
29
- },
30
- {
31
- key: "num_comma",
32
- label: __("Numbers (comma separated)", "block-collections"),
33
- value: {
34
- style: "decimal",
35
- useGrouping: true, // カンマ区切り
36
- },
37
- },
38
- {
39
- key: "num_no_comma",
40
- label: __("Numbers (no commas)", "block-collections"),
41
- value: {
42
- style: "decimal",
43
- useGrouping: false,
44
- },
45
- },
46
- {
47
- key: "num_amount",
48
- label: __("Amount", "block-collections"),
49
- value: {
50
- style: "currency",
51
- currency: "JPY",
52
- },
53
- },
54
- ];
55
-
56
- export const FormatSelectControl = ({
57
- titleType,
58
- userFormat,
59
- freeStrFormat,
60
- decimal,
61
- onFormatChange,
62
- }) => {
63
- const isPlaine = titleType === "plaine";
64
- const isDate = titleType === "date";
65
- const isUser = titleType === "user";
66
-
67
- //SelectControlのオプションを生成
68
- const options = isDate
69
- ? dateFormats
70
- : plaineFormats.map((f) => ({ label: f.label, value: f.key }));
71
-
72
- return (
73
- <PanelBody title={__("Display Format Setting", "block-collections")}>
74
- {(isPlaine || isDate) && (
75
- <>
76
- <SelectControl
77
- label={__("Select Format", "block-collections")}
78
- value={userFormat}
79
- options={options}
80
- onChange={(newFormat) =>
81
- onFormatChange({
82
- userFormat: newFormat,
83
- freeStrFormat,
84
- decimal,
85
- })
86
- }
87
- />
88
-
89
- {userFormat?.startsWith("str_") && (
90
- <TextControl
91
- label={__("String Format", "block-collections")}
92
- value={freeStrFormat}
93
- onChange={(newFormat) =>
94
- onFormatChange({
95
- userFormat,
96
- freeStrFormat: newFormat,
97
- decimal,
98
- })
99
- }
100
- />
101
- )}
102
- {userFormat?.startsWith("num_") && (
103
- <PanelRow className="itmar_post_blocks_pannel">
104
- <RangeControl
105
- value={decimal}
106
- label={__("Decimal Num", "query-blocks")}
107
- max={5}
108
- min={0}
109
- onChange={(val) =>
110
- onFormatChange({
111
- userFormat,
112
- freeStrFormat,
113
- decimal: val,
114
- })
115
- }
116
- />
117
- </PanelRow>
118
- )}
119
- </>
120
- )}
121
-
122
- {isUser && (
123
- <TextControl
124
- label={__("User Format", "block-collections")}
125
- value={freeStrFormat}
126
- onChange={(newFormat) =>
127
- onFormatChange({
128
- userFormat: "str_free",
129
- freeStrFormat: newFormat,
130
- decimal,
131
- })
132
- }
133
- />
134
- )}
135
- </PanelBody>
136
- );
137
- };
138
-
139
- export const displayFormated = (
140
- content,
141
- userFormat,
142
- freeStrFormat,
143
- decimal
144
- ) => {
145
- // 内部で使用するロケール
146
- const locale = getSettings().l10n?.locale || "en";
147
-
148
- //日付にフォーマットがあれば、それで書式設定してリターン
149
- const isDateFormat = dateFormats.find((f) => f.value === userFormat);
150
- if (isDateFormat) {
151
- const ret_val = format(userFormat, content, getSettings());
152
- return ret_val;
153
- }
154
- //数値や文字列のフォーマット
155
- const selectedFormat = plaineFormats.find((f) => f.key === userFormat)?.value;
156
- if (typeof selectedFormat === "object") {
157
- // Intl.NumberFormat オプション
158
- try {
159
- const numeric = parseFloat(content);
160
- // `selectedFormat` を元に新しいフォーマット設定を生成(mutateしない)
161
- const options = { ...selectedFormat };
162
-
163
- if (typeof decimal === "number" && decimal > 0) {
164
- options.minimumFractionDigits = decimal;
165
- options.maximumFractionDigits = decimal;
166
- }
167
-
168
- const formatter = new Intl.NumberFormat(locale, options);
169
- return formatter.format(numeric);
170
- } catch (e) {
171
- console.warn("Number format failed:", e);
172
- return content;
173
- }
174
- } else if (typeof selectedFormat === "string") {
175
- return freeStrFormat.replace("%s", content);
176
- }
177
- //フォーマットが見つからないときはそのまま返す
178
- return content;
179
- };