itmar-block-packages 1.10.0 → 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.
- package/README.md +81 -2
- package/build/cjs/AnimationBlock.js +107 -0
- package/build/cjs/AnimationBlock.js.map +1 -0
- package/build/cjs/BlockEditWrapper.js +20 -0
- package/build/cjs/BlockEditWrapper.js.map +1 -0
- package/build/cjs/BlockPlace.js +509 -0
- package/build/cjs/BlockPlace.js.map +1 -0
- package/build/cjs/BrockInserter.js +204 -0
- package/build/cjs/BrockInserter.js.map +1 -0
- package/build/cjs/DateElm.js +321 -0
- package/build/cjs/DateElm.js.map +1 -0
- package/build/cjs/DraggableBox.js +143 -0
- package/build/cjs/DraggableBox.js.map +1 -0
- package/build/cjs/GridControls.js +421 -0
- package/build/cjs/GridControls.js.map +1 -0
- package/build/cjs/IconSelectControl.js +167 -0
- package/build/cjs/IconSelectControl.js.map +1 -0
- package/build/cjs/JapaneseHolidays.js +99 -0
- package/build/cjs/JapaneseHolidays.js.map +1 -0
- package/build/cjs/MasonryControl.js +124 -0
- package/build/cjs/MasonryControl.js.map +1 -0
- package/build/cjs/PseudoElm.js +66 -0
- package/build/cjs/PseudoElm.js.map +1 -0
- package/build/cjs/ShadowStyle.js +453 -0
- package/build/cjs/ShadowStyle.js.map +1 -0
- package/build/cjs/SwiperControl.js +267 -0
- package/build/cjs/SwiperControl.js.map +1 -0
- package/build/cjs/ToggleElement.js +17 -0
- package/build/cjs/ToggleElement.js.map +1 -0
- package/build/cjs/TypographyControls.js +151 -0
- package/build/cjs/TypographyControls.js.map +1 -0
- package/build/cjs/UpdateAllPostsBlockAttributes.js +137 -0
- package/build/cjs/UpdateAllPostsBlockAttributes.js.map +1 -0
- package/build/cjs/ZipAddress.js +34 -0
- package/build/cjs/ZipAddress.js.map +1 -0
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js +117 -0
- package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map +1 -0
- package/build/cjs/blockStore.js +65 -0
- package/build/cjs/blockStore.js.map +1 -0
- package/build/cjs/cssPropertes.js +157 -0
- package/build/cjs/cssPropertes.js.map +1 -0
- package/build/cjs/customFooks.js +300 -0
- package/build/cjs/customFooks.js.map +1 -0
- package/build/cjs/formatCreate.js +160 -0
- package/build/cjs/formatCreate.js.map +1 -0
- package/build/cjs/hslToRgb.js +133 -0
- package/build/cjs/hslToRgb.js.map +1 -0
- package/build/cjs/index.js +115 -0
- package/build/cjs/index.js.map +1 -0
- package/build/cjs/mediaUpload.js +182 -0
- package/build/cjs/mediaUpload.js.map +1 -0
- package/build/cjs/node_modules/nanoid/index.js +30 -0
- package/build/cjs/node_modules/nanoid/index.js.map +1 -0
- package/build/cjs/node_modules/nanoid/url-alphabet/index.js +7 -0
- package/build/cjs/node_modules/nanoid/url-alphabet/index.js.map +1 -0
- package/build/cjs/shopfiApi.js +188 -0
- package/build/cjs/shopfiApi.js.map +1 -0
- package/build/cjs/validationCheck.js +15 -0
- package/build/cjs/validationCheck.js.map +1 -0
- package/build/cjs/wordpressApi.js +631 -0
- package/build/cjs/wordpressApi.js.map +1 -0
- package/build/esm/AnimationBlock.js +102 -0
- package/build/esm/AnimationBlock.js.map +1 -0
- package/build/esm/BlockEditWrapper.js +16 -0
- package/build/esm/BlockEditWrapper.js.map +1 -0
- package/build/esm/BlockPlace.js +503 -0
- package/build/esm/BlockPlace.js.map +1 -0
- package/build/esm/BrockInserter.js +202 -0
- package/build/esm/BrockInserter.js.map +1 -0
- package/build/esm/DateElm.js +309 -0
- package/build/esm/DateElm.js.map +1 -0
- package/build/esm/DraggableBox.js +138 -0
- package/build/esm/DraggableBox.js.map +1 -0
- package/build/esm/GridControls.js +417 -0
- package/build/esm/GridControls.js.map +1 -0
- package/build/esm/IconSelectControl.js +163 -0
- package/build/esm/IconSelectControl.js.map +1 -0
- package/build/esm/JapaneseHolidays.js +97 -0
- package/build/esm/JapaneseHolidays.js.map +1 -0
- package/{src → build/esm}/MasonryControl.js +108 -113
- package/build/esm/MasonryControl.js.map +1 -0
- package/build/esm/PseudoElm.js +61 -0
- package/build/esm/PseudoElm.js.map +1 -0
- package/build/esm/ShadowStyle.js +448 -0
- package/build/esm/ShadowStyle.js.map +1 -0
- package/{src → build/esm}/SwiperControl.js +265 -265
- package/build/esm/SwiperControl.js.map +1 -0
- package/build/esm/ToggleElement.js +13 -0
- package/build/esm/ToggleElement.js.map +1 -0
- package/build/esm/TypographyControls.js +147 -0
- package/build/esm/TypographyControls.js.map +1 -0
- package/build/esm/UpdateAllPostsBlockAttributes.js +133 -0
- package/build/esm/UpdateAllPostsBlockAttributes.js.map +1 -0
- package/build/esm/ZipAddress.js +32 -0
- package/build/esm/ZipAddress.js.map +1 -0
- package/build/esm/_virtual/_rollupPluginBabelHelpers.js +107 -0
- package/build/esm/_virtual/_rollupPluginBabelHelpers.js.map +1 -0
- package/build/esm/blockStore.js +60 -0
- package/build/esm/blockStore.js.map +1 -0
- package/build/esm/cssPropertes.js +144 -0
- package/build/esm/cssPropertes.js.map +1 -0
- package/{src → build/esm}/customFooks.js +290 -337
- package/build/esm/customFooks.js.map +1 -0
- package/build/esm/formatCreate.js +157 -0
- package/build/esm/formatCreate.js.map +1 -0
- package/build/esm/hslToRgb.js +129 -0
- package/build/esm/hslToRgb.js.map +1 -0
- package/build/esm/index.js +27 -0
- package/build/esm/index.js.map +1 -0
- package/build/esm/mediaUpload.js +176 -0
- package/build/esm/mediaUpload.js.map +1 -0
- package/build/esm/node_modules/nanoid/index.js +27 -0
- package/build/esm/node_modules/nanoid/index.js.map +1 -0
- package/build/esm/node_modules/nanoid/url-alphabet/index.js +5 -0
- package/build/esm/node_modules/nanoid/url-alphabet/index.js.map +1 -0
- package/build/esm/shopfiApi.js +184 -0
- package/build/esm/shopfiApi.js.map +1 -0
- package/build/esm/validationCheck.js +13 -0
- package/build/esm/validationCheck.js.map +1 -0
- package/build/esm/wordpressApi.js +618 -0
- package/build/esm/wordpressApi.js.map +1 -0
- package/package.json +22 -6
- package/build/index.asset.php +0 -1
- package/build/index.js +0 -25
- package/css/editor.css +0 -23
- package/css/editor.css.map +0 -1
- package/img/animation.png +0 -0
- package/img/blockplace.png +0 -0
- package/img/grid.png +0 -0
- package/img/iconControl.png +0 -0
- package/img/pseudo.png +0 -0
- package/img/shadow.png +0 -0
- package/img/typography.png +0 -0
- package/src/AnimationBlock.js +0 -112
- package/src/BlockEditWrapper.js +0 -11
- package/src/BlockPlace.js +0 -904
- package/src/BrockInserter.js +0 -247
- package/src/DateElm.js +0 -354
- package/src/DraggableBox.js +0 -143
- package/src/GridControls.js +0 -462
- package/src/IconSelectControl.js +0 -186
- package/src/PseudoElm.js +0 -54
- package/src/ShadowStyle.js +0 -520
- package/src/ToggleElement.js +0 -18
- package/src/TypographyControls.js +0 -145
- package/src/UpdateAllPostsBlockAttributes.js +0 -127
- package/src/ZipAddress.js +0 -35
- package/src/blockStore.js +0 -75
- package/src/cssPropertes.js +0 -212
- package/src/formatCreate.js +0 -179
- package/src/hslToRgb.js +0 -162
- package/src/index.js +0 -131
- package/src/mediaUpload.js +0 -178
- package/src/shopfiApi.js +0 -187
- package/src/validationCheck.js +0 -10
- package/src/wordpressApi.js +0 -686
- 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
|
-
};
|
package/src/cssPropertes.js
DELETED
|
@@ -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
|
-
}
|
package/src/formatCreate.js
DELETED
|
@@ -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
|
-
};
|