VK Blocks - Version 1.39.2.1

Version Description

Download this release

Release Info

Developer vektor-inc
Plugin Icon 128x128 VK Blocks
Version 1.39.2.1
Comparing to
See all releases

Code changes from version 1.37.0.0 to 1.39.2.1

Files changed (332) hide show
  1. build/block-build.css +2 -2
  2. build/extensions/core/table/style.css +1 -1
  3. build/utils/common.css +1 -1
  4. inc/vk-blocks/admin/admin.php +9 -0
  5. inc/vk-blocks/build/admin-build.asset.php +1 -0
  6. inc/vk-blocks/build/admin-build.js +1 -0
  7. inc/vk-blocks/build/block-build.asset.php +1 -1
  8. inc/vk-blocks/class-vk-blocks-options.php +241 -0
  9. inc/vk-blocks/languages/vk-blocks.pot +57 -273
  10. inc/vk-blocks/view/class-vk-blocks-postlist.php +10 -1
  11. inc/vk-blocks/vk-blocks-functions.php +2 -0
  12. inc/vk-components/package/class-vk-component-mini-contents.php +7 -5
  13. inc/vk-components/package/class-vk-component-posts.php +22 -9
  14. options-css/_admin-balloon.scss +0 -63
  15. options-css/_admin-margin.scss +0 -4
  16. options-css/admin-merge.scss +0 -5
  17. readme.txt +19 -3
  18. src/blocks/alert/block.json +0 -22
  19. src/blocks/alert/deprecated/0.0.0/save.js +0 -10
  20. src/blocks/alert/deprecated/index.js +0 -21
  21. src/blocks/alert/edit.js +0 -50
  22. src/blocks/alert/icon.svg +0 -1
  23. src/blocks/alert/index.js +0 -27
  24. src/blocks/alert/index.php +0 -34
  25. src/blocks/alert/save.js +0 -11
  26. src/blocks/alert/style.scss +0 -42
  27. src/blocks/balloon/block.json +0 -59
  28. src/blocks/balloon/deprecated/0.0.0/save.js +0 -43
  29. src/blocks/balloon/deprecated/0.0.1/save.js +0 -44
  30. src/blocks/balloon/deprecated/0.0.2/save.js +0 -54
  31. src/blocks/balloon/deprecated/0.0.3/save.js +0 -53
  32. src/blocks/balloon/deprecated/0.0.4/save.js +0 -95
  33. src/blocks/balloon/deprecated/0.37.1/save.js +0 -44
  34. src/blocks/balloon/deprecated/0.58.6/save.js +0 -95
  35. src/blocks/balloon/deprecated/0.58.7/save.js +0 -95
  36. src/blocks/balloon/deprecated/1.20.5/save.js +0 -97
  37. src/blocks/balloon/deprecated/1.20.7/save.js +0 -279
  38. src/blocks/balloon/deprecated/index.js +0 -145
  39. src/blocks/balloon/edit.js +0 -628
  40. src/blocks/balloon/icon.svg +0 -1
  41. src/blocks/balloon/index.js +0 -40
  42. src/blocks/balloon/index.php +0 -33
  43. src/blocks/balloon/save.js +0 -296
  44. src/blocks/balloon/style.scss +0 -491
  45. src/blocks/border-box/block.json +0 -35
  46. src/blocks/border-box/deprecated/0.0.0/save.js +0 -58
  47. src/blocks/border-box/deprecated/0.0.1/save.js +0 -67
  48. src/blocks/border-box/deprecated/1.21.0/save.js +0 -44
  49. src/blocks/border-box/deprecated/1.29.2/save.js +0 -130
  50. src/blocks/border-box/deprecated/index.js +0 -62
  51. src/blocks/border-box/edit.js +0 -262
  52. src/blocks/border-box/icon.svg +0 -1
  53. src/blocks/border-box/index.js +0 -65
  54. src/blocks/border-box/index.php +0 -33
  55. src/blocks/border-box/save.js +0 -135
  56. src/blocks/border-box/style.scss +0 -425
  57. src/blocks/bundle.js +0 -126
  58. src/blocks/button/block.json +0 -83
  59. src/blocks/button/component.js +0 -125
  60. src/blocks/button/deprecated/hooks/1.16.2/index.js +0 -3
  61. src/blocks/button/deprecated/hooks/1.16.4/index.js +0 -57
  62. src/blocks/button/deprecated/hooks/1.18.1/index.js +0 -55
  63. src/blocks/button/deprecated/hooks/1.29.2/index.js +0 -64
  64. src/blocks/button/deprecated/hooks/index.js +0 -27
  65. src/blocks/button/deprecated/save/0.0.0/component.js +0 -87
  66. src/blocks/button/deprecated/save/0.0.0/save.js +0 -48
  67. src/blocks/button/deprecated/save/0.0.1/component.js +0 -88
  68. src/blocks/button/deprecated/save/0.0.1/save.js +0 -48
  69. src/blocks/button/deprecated/save/0.0.2/component.js +0 -94
  70. src/blocks/button/deprecated/save/0.0.2/save.js +0 -50
  71. src/blocks/button/deprecated/save/0.0.3/component.js +0 -93
  72. src/blocks/button/deprecated/save/0.0.3/save.js +0 -50
  73. src/blocks/button/deprecated/save/0.0.4/component.js +0 -93
  74. src/blocks/button/deprecated/save/0.0.4/save.js +0 -53
  75. src/blocks/button/deprecated/save/0.0.5/component.js +0 -126
  76. src/blocks/button/deprecated/save/0.0.5/save.js +0 -53
  77. src/blocks/button/deprecated/save/0.0.6/component.js +0 -138
  78. src/blocks/button/deprecated/save/0.0.6/save.js +0 -53
  79. src/blocks/button/deprecated/save/0.41.0/component.js +0 -143
  80. src/blocks/button/deprecated/save/0.41.0/save.js +0 -53
  81. src/blocks/button/deprecated/save/0.59.0/component.js +0 -142
  82. src/blocks/button/deprecated/save/0.59.0/save.js +0 -53
  83. src/blocks/button/deprecated/save/0.59.1/component.js +0 -141
  84. src/blocks/button/deprecated/save/0.59.1/save.js +0 -53
  85. src/blocks/button/deprecated/save/0.60.0/component.js +0 -131
  86. src/blocks/button/deprecated/save/0.60.0/save.js +0 -58
  87. src/blocks/button/deprecated/save/0.60.1/component.js +0 -143
  88. src/blocks/button/deprecated/save/0.60.1/save.js +0 -53
  89. src/blocks/button/deprecated/save/1.16.2/component.js +0 -143
  90. src/blocks/button/deprecated/save/1.16.2/save.js +0 -53
  91. src/blocks/button/deprecated/save/1.16.4/component.js +0 -137
  92. src/blocks/button/deprecated/save/1.16.4/save.js +0 -57
  93. src/blocks/button/deprecated/save/1.18.1/component.js +0 -121
  94. src/blocks/button/deprecated/save/1.18.1/save.js +0 -57
  95. src/blocks/button/deprecated/save/1.18.6/component.js +0 -121
  96. src/blocks/button/deprecated/save/1.18.6/save.js +0 -57
  97. src/blocks/button/deprecated/save/1.29.2/component.js +0 -134
  98. src/blocks/button/deprecated/save/1.29.2/save.js +0 -63
  99. src/blocks/button/deprecated/save/1.31.0/component.js +0 -134
  100. src/blocks/button/deprecated/save/1.31.0/save.js +0 -71
  101. src/blocks/button/deprecated/save/1.35.0/component.js +0 -125
  102. src/blocks/button/deprecated/save/1.35.0/save.js +0 -81
  103. src/blocks/button/deprecated/save/index.js +0 -272
  104. src/blocks/button/edit.js +0 -760
  105. src/blocks/button/icon.svg +0 -1
  106. src/blocks/button/index.js +0 -196
  107. src/blocks/button/index.php +0 -33
  108. src/blocks/button/save.js +0 -81
  109. src/blocks/button/style.scss +0 -392
  110. src/blocks/button/transforms.js +0 -41
  111. src/blocks/faq/block.json +0 -18
  112. src/blocks/faq/deprecated/0.0.0/save.js +0 -20
  113. src/blocks/faq/deprecated/0.0.1/save.js +0 -20
  114. src/blocks/faq/deprecated/0.0.2/save.js +0 -17
  115. src/blocks/faq/deprecated/0.58.6/save.js +0 -17
  116. src/blocks/faq/deprecated/index.js +0 -41
  117. src/blocks/faq/edit.js +0 -52
  118. src/blocks/faq/icon.svg +0 -1
  119. src/blocks/faq/index.js +0 -70
  120. src/blocks/faq/index.php +0 -68
  121. src/blocks/faq/save.js +0 -21
  122. src/blocks/faq/style.scss +0 -212
  123. src/blocks/faq2-a/block.json +0 -15
  124. src/blocks/faq2-a/deprecated/0.58.7/save.js +0 -9
  125. src/blocks/faq2-a/deprecated/index.js +0 -11
  126. src/blocks/faq2-a/edit.js +0 -12
  127. src/blocks/faq2-a/icon.svg +0 -1
  128. src/blocks/faq2-a/index.js +0 -30
  129. src/blocks/faq2-a/index.php +0 -22
  130. src/blocks/faq2-a/save.js +0 -13
  131. src/blocks/faq2-q/block.json +0 -16
  132. src/blocks/faq2-q/deprecated/0.58.7/save.js +0 -9
  133. src/blocks/faq2-q/deprecated/index.js +0 -11
  134. src/blocks/faq2-q/edit.js +0 -12
  135. src/blocks/faq2-q/icon.svg +0 -1
  136. src/blocks/faq2-q/index.js +0 -30
  137. src/blocks/faq2-q/index.php +0 -23
  138. src/blocks/faq2-q/save.js +0 -13
  139. src/blocks/faq2/block.json +0 -12
  140. src/blocks/faq2/deprecated/0.0.0/save.js +0 -9
  141. src/blocks/faq2/deprecated/1.3.9/save.js +0 -13
  142. src/blocks/faq2/deprecated/index.js +0 -24
  143. src/blocks/faq2/edit.js +0 -52
  144. src/blocks/faq2/icon.svg +0 -1
  145. src/blocks/faq2/index.js +0 -78
  146. src/blocks/faq2/index.php +0 -68
  147. src/blocks/faq2/save.js +0 -16
  148. src/blocks/faq2/view.js +0 -45
  149. src/blocks/flow/block.json +0 -35
  150. src/blocks/flow/deprecated/0.0.0/save.js +0 -31
  151. src/blocks/flow/deprecated/1.8.0/save.js +0 -29
  152. src/blocks/flow/deprecated/index.js +0 -36
  153. src/blocks/flow/edit.js +0 -100
  154. src/blocks/flow/icon.svg +0 -1
  155. src/blocks/flow/index.js +0 -29
  156. src/blocks/flow/index.php +0 -34
  157. src/blocks/flow/save.js +0 -30
  158. src/blocks/flow/style.scss +0 -96
  159. src/blocks/heading/block.json +0 -78
  160. src/blocks/heading/deprecated/0.24.1/component.js +0 -130
  161. src/blocks/heading/deprecated/0.24.1/save.js +0 -9
  162. src/blocks/heading/deprecated/0.24.2/save.js +0 -93
  163. src/blocks/heading/deprecated/0.24.3/save.js +0 -57
  164. src/blocks/heading/deprecated/0.24.4/component.js +0 -92
  165. src/blocks/heading/deprecated/0.24.4/save.js +0 -7
  166. src/blocks/heading/deprecated/0.24.5/component.js +0 -130
  167. src/blocks/heading/deprecated/0.24.5/save.js +0 -9
  168. src/blocks/heading/deprecated/0.24.6/component.js +0 -130
  169. src/blocks/heading/deprecated/0.24.6/save.js +0 -12
  170. src/blocks/heading/deprecated/0.24.7/component.js +0 -130
  171. src/blocks/heading/deprecated/0.24.7/save.js +0 -10
  172. src/blocks/heading/deprecated/0.37.1/component.js +0 -159
  173. src/blocks/heading/deprecated/0.37.1/save.js +0 -9
  174. src/blocks/heading/deprecated/0.39.5/component.js +0 -190
  175. src/blocks/heading/deprecated/0.39.5/save.js +0 -10
  176. src/blocks/heading/deprecated/0.40.0/component.js +0 -190
  177. src/blocks/heading/deprecated/0.40.0/save.js +0 -10
  178. src/blocks/heading/deprecated/0.40.1/component.js +0 -190
  179. src/blocks/heading/deprecated/0.40.1/save.js +0 -13
  180. src/blocks/heading/deprecated/0.60.1/component.js +0 -190
  181. src/blocks/heading/deprecated/0.60.1/save.js +0 -9
  182. src/blocks/heading/deprecated/1.20.5/save.js +0 -155
  183. src/blocks/heading/deprecated/1.20.5a/save.js +0 -211
  184. src/blocks/heading/deprecated/1.21.0/save.js +0 -211
  185. src/blocks/heading/deprecated/1.3.2/save.js +0 -158
  186. src/blocks/heading/deprecated/1.7.0/save.js +0 -164
  187. src/blocks/heading/deprecated/1.9.1/save.js +0 -155
  188. src/blocks/heading/deprecated/heading-toolbar.js +0 -34
  189. src/blocks/heading/deprecated/index.js +0 -259
  190. src/blocks/heading/edit.js +0 -405
  191. src/blocks/heading/heading-level-dropdown.js +0 -51
  192. src/blocks/heading/heading-level-icon.js +0 -44
  193. src/blocks/heading/icon.svg +0 -1
  194. src/blocks/heading/index.js +0 -45
  195. src/blocks/heading/index.php +0 -34
  196. src/blocks/heading/save.js +0 -211
  197. src/blocks/heading/style.scss +0 -44
  198. src/blocks/heading/transforms.js +0 -21
  199. src/blocks/icon-outer/block.json +0 -41
  200. src/blocks/icon-outer/edit.js +0 -239
  201. src/blocks/icon-outer/icon.svg +0 -1
  202. src/blocks/icon-outer/index.js +0 -29
  203. src/blocks/icon-outer/index.php +0 -33
  204. src/blocks/icon-outer/save.js +0 -20
  205. src/blocks/icon-outer/style.scss +0 -42
  206. src/blocks/icon/block.json +0 -56
  207. src/blocks/icon/component.js +0 -154
  208. src/blocks/icon/deprecated/1.13.2/component.js +0 -135
  209. src/blocks/icon/deprecated/1.13.2/save.js +0 -44
  210. src/blocks/icon/deprecated/1.16.1/component.js +0 -152
  211. src/blocks/icon/deprecated/1.16.1/save.js +0 -44
  212. src/blocks/icon/deprecated/index.js +0 -70
  213. src/blocks/icon/edit.js +0 -282
  214. src/blocks/icon/icon.svg +0 -5
  215. src/blocks/icon/index.js +0 -36
  216. src/blocks/icon/index.php +0 -33
  217. src/blocks/icon/save.js +0 -44
  218. src/blocks/icon/style.scss +0 -106
  219. src/blocks/index.js +0 -2
  220. src/blocks/page-content/block.json +0 -17
  221. src/blocks/page-content/edit.js +0 -79
  222. src/blocks/page-content/icon.svg +0 -5
  223. src/blocks/page-content/index.js +0 -13
  224. src/blocks/page-content/index.php +0 -150
  225. src/blocks/pr-blocks/block.json +0 -145
  226. src/blocks/pr-blocks/deprecated/0.0.0/save.js +0 -247
  227. src/blocks/pr-blocks/deprecated/0.0.0/schema.js +0 -42
  228. src/blocks/pr-blocks/deprecated/0.0.1/component.js +0 -193
  229. src/blocks/pr-blocks/deprecated/0.0.1/save.js +0 -23
  230. src/blocks/pr-blocks/deprecated/0.0.1/schema.js +0 -42
  231. src/blocks/pr-blocks/deprecated/0.0.2/component.js +0 -233
  232. src/blocks/pr-blocks/deprecated/0.0.2/save.js +0 -30
  233. src/blocks/pr-blocks/deprecated/0.0.2/schema.js +0 -42
  234. src/blocks/pr-blocks/deprecated/0.59.0/component.js +0 -248
  235. src/blocks/pr-blocks/deprecated/0.59.0/save.js +0 -31
  236. src/blocks/pr-blocks/deprecated/0.59.0/schema.js +0 -42
  237. src/blocks/pr-blocks/deprecated/1.0.7/save.js +0 -188
  238. src/blocks/pr-blocks/deprecated/1.0.7/schema.js +0 -42
  239. src/blocks/pr-blocks/deprecated/1.20.2/save.js +0 -198
  240. src/blocks/pr-blocks/deprecated/1.20.2/schema.js +0 -42
  241. src/blocks/pr-blocks/deprecated/index.js +0 -39
  242. src/blocks/pr-blocks/edit.js +0 -556
  243. src/blocks/pr-blocks/icon.svg +0 -1
  244. src/blocks/pr-blocks/index.js +0 -53
  245. src/blocks/pr-blocks/index.php +0 -33
  246. src/blocks/pr-blocks/save.js +0 -216
  247. src/blocks/pr-blocks/style.scss +0 -100
  248. src/blocks/pr-content/block.json +0 -74
  249. src/blocks/pr-content/deprecated/0.0.0/save.js +0 -229
  250. src/blocks/pr-content/deprecated/0.0.1/save.js +0 -205
  251. src/blocks/pr-content/deprecated/0.0.2/save.js +0 -328
  252. src/blocks/pr-content/deprecated/0.0.3/component-fontawesome.js +0 -34
  253. src/blocks/pr-content/deprecated/0.0.3/component.js +0 -287
  254. src/blocks/pr-content/deprecated/0.0.3/save.js +0 -14
  255. src/blocks/pr-content/deprecated/0.43.0/save.js +0 -299
  256. src/blocks/pr-content/deprecated/0.5.1/save.js +0 -215
  257. src/blocks/pr-content/deprecated/0.56.3/component.js +0 -249
  258. src/blocks/pr-content/deprecated/0.56.3/save.js +0 -11
  259. src/blocks/pr-content/deprecated/0.58.7/component.js +0 -281
  260. src/blocks/pr-content/deprecated/0.58.7/save.js +0 -15
  261. src/blocks/pr-content/deprecated/0.58.9/component.js +0 -280
  262. src/blocks/pr-content/deprecated/0.58.9/save.js +0 -14
  263. src/blocks/pr-content/deprecated/1.7.1/mediaUpload.js +0 -146
  264. src/blocks/pr-content/deprecated/1.7.1/save.js +0 -83
  265. src/blocks/pr-content/deprecated/1.7.1/utils.js +0 -77
  266. src/blocks/pr-content/deprecated/component-fontawesome-deprecated.js +0 -37
  267. src/blocks/pr-content/deprecated/component-fontawesome.js +0 -48
  268. src/blocks/pr-content/deprecated/index.js +0 -165
  269. src/blocks/pr-content/edit.js +0 -294
  270. src/blocks/pr-content/icon.svg +0 -1
  271. src/blocks/pr-content/index.js +0 -48
  272. src/blocks/pr-content/index.php +0 -34
  273. src/blocks/pr-content/mediaUpload.js +0 -146
  274. src/blocks/pr-content/save.js +0 -89
  275. src/blocks/pr-content/style.scss +0 -88
  276. src/blocks/pr-content/utils.js +0 -76
  277. src/blocks/spacer/advanced-spacer-control.js +0 -30
  278. src/blocks/spacer/block.json +0 -41
  279. src/blocks/spacer/deprecated/0.0.0/component.js +0 -21
  280. src/blocks/spacer/deprecated/0.0.0/save.js +0 -7
  281. src/blocks/spacer/deprecated/0.0.1/component.js +0 -22
  282. src/blocks/spacer/deprecated/0.0.1/save.js +0 -7
  283. src/blocks/spacer/deprecated/0.0.2/component.js +0 -24
  284. src/blocks/spacer/deprecated/0.0.2/save.js +0 -7
  285. src/blocks/spacer/deprecated/0.57.4/component.js +0 -34
  286. src/blocks/spacer/deprecated/0.57.4/save.js +0 -7
  287. src/blocks/spacer/deprecated/0.57.4/schema.js +0 -35
  288. src/blocks/spacer/deprecated/1.13.2/save.js +0 -35
  289. src/blocks/spacer/deprecated/1.13.2/spacers.js +0 -47
  290. src/blocks/spacer/deprecated/1.25.1/save.js +0 -36
  291. src/blocks/spacer/deprecated/1.25.1/spacers.js +0 -47
  292. src/blocks/spacer/deprecated/1.3.2/save.js +0 -34
  293. src/blocks/spacer/deprecated/1.3.2/spacers.js +0 -35
  294. src/blocks/spacer/deprecated/index.js +0 -91
  295. src/blocks/spacer/edit.js +0 -145
  296. src/blocks/spacer/icon.svg +0 -1
  297. src/blocks/spacer/index.js +0 -32
  298. src/blocks/spacer/index.php +0 -171
  299. src/blocks/spacer/save.js +0 -36
  300. src/blocks/spacer/spacers.js +0 -83
  301. src/blocks/spacer/style.scss +0 -44
  302. src/blocks/staff/block.json +0 -73
  303. src/blocks/staff/deprecated/0.58/component.js +0 -153
  304. src/blocks/staff/deprecated/0.58/save.js +0 -12
  305. src/blocks/staff/deprecated/1.20.2/save.js +0 -98
  306. src/blocks/staff/deprecated/1.3.1/save.js +0 -85
  307. src/blocks/staff/deprecated/index.js +0 -92
  308. src/blocks/staff/edit.js +0 -374
  309. src/blocks/staff/icon.svg +0 -1
  310. src/blocks/staff/index.js +0 -49
  311. src/blocks/staff/index.php +0 -40
  312. src/blocks/staff/save.js +0 -167
  313. src/blocks/staff/style.scss +0 -209
  314. src/components/advanced-checkbox-control/index.js +0 -36
  315. src/components/advanced-color-palette/index.js +0 -36
  316. src/components/advanced-media-upload/index.js +0 -55
  317. src/components/advanced-popover-control/index.js +0 -63
  318. src/components/advanced-toggle-control/index.js +0 -20
  319. src/components/advanced-unit-control/index.js +0 -37
  320. src/components/advanced-viewport-control/index.js +0 -49
  321. src/components/align-control/index.js +0 -36
  322. src/components/card-align-control/index.js +0 -37
  323. src/components/column-layout-control/index.js +0 -90
  324. src/components/column-layout/index.js +0 -133
  325. src/components/display-items-control/index.js +0 -138
  326. src/components/link-control/index.js +0 -52
  327. src/extensions/common/hidden-extension/index.js +0 -330
  328. src/extensions/common/hidden-extension/style.scss +0 -67
  329. src/extensions/common/highlighter/icon.svg +0 -7
  330. src/extensions/common/highlighter/index.js +0 -156
  331. src/extensions/common/inline-font-size/icon.svg +0 -1
  332. src/extensions/common/inline-font-size/index.js +0 -195
build/block-build.css CHANGED
@@ -1,4 +1,4 @@
1
- :root{--vk-margin-elem:2rem}.text-nowrap{white-space:nowrap}:root{--vk-margin-sm: 1.5rem;--vk-margin-md: 2.4rem;--vk-margin-lg: 4rem}.vk_block-margin-0--margin-top{margin-top:0 !important}.vk_block-margin-0--margin-bottom{margin-bottom:0 !important}.vk_block-margin-0--margin-bottom>table{margin-bottom:0}.vk_block-margin-sm{margin-top:var(--vk-margin-sm)}.vk_block-margin-sm--margin-top{margin-top:var(--vk-margin-sm) !important}.vk_block-margin-sm--margin-bottom{margin-bottom:var(--vk-margin-sm) !important}.vk_block-margin-sm--margin-bottom>table{margin-bottom:var(--vk-margin-sm)}.vk_block-margin-sm--height{height:var(--vk-margin-sm)}.vk_block-margin-md{margin-top:var(--vk-margin-md)}.vk_block-margin-md--margin-top{margin-top:var(--vk-margin-md) !important}.vk_block-margin-md--margin-bottom{margin-bottom:var(--vk-margin-md) !important}.vk_block-margin-md--margin-bottom>table{margin-bottom:var(--vk-margin-md)}.vk_block-margin-md--height{height:var(--vk-margin-md)}.vk_block-margin-lg{margin-top:var(--vk-margin-lg)}.vk_block-margin-lg--margin-top{margin-top:var(--vk-margin-lg) !important}.vk_block-margin-lg--margin-bottom{margin-bottom:var(--vk-margin-lg) !important}.vk_block-margin-lg--margin-bottom>table{margin-bottom:var(--vk-margin-lg)}.vk_block-margin-lg--height{height:var(--vk-margin-lg)}ul.is-style-vk-arrow-mark,ul.is-style-vk-triangle-mark,ul.is-style-vk-check-mark,ul.is-style-vk-check-circle-mark,ul.is-style-vk-check-square-mark,ul.is-style-vk-handpoint-mark,ul.is-style-vk-pencil-mark,ul.is-style-vk-smile-mark,ul.is-style-vk-frown-mark,ul.is-style-vk-numbered-circle-mark,ul.is-style-vk-numbered-square-mark,ol.is-style-vk-arrow-mark,ol.is-style-vk-triangle-mark,ol.is-style-vk-check-mark,ol.is-style-vk-check-circle-mark,ol.is-style-vk-check-square-mark,ol.is-style-vk-handpoint-mark,ol.is-style-vk-pencil-mark,ol.is-style-vk-smile-mark,ol.is-style-vk-frown-mark,ol.is-style-vk-numbered-circle-mark,ol.is-style-vk-numbered-square-mark{-webkit-padding-start:2em;padding-inline-start:2em}ul.is-style-vk-arrow-mark li,ul.is-style-vk-triangle-mark li,ul.is-style-vk-check-mark li,ul.is-style-vk-check-circle-mark li,ul.is-style-vk-check-square-mark li,ul.is-style-vk-handpoint-mark li,ul.is-style-vk-pencil-mark li,ul.is-style-vk-smile-mark li,ul.is-style-vk-frown-mark li,ul.is-style-vk-numbered-circle-mark li,ul.is-style-vk-numbered-square-mark li,ol.is-style-vk-arrow-mark li,ol.is-style-vk-triangle-mark li,ol.is-style-vk-check-mark li,ol.is-style-vk-check-circle-mark li,ol.is-style-vk-check-square-mark li,ol.is-style-vk-handpoint-mark li,ol.is-style-vk-pencil-mark li,ol.is-style-vk-smile-mark li,ol.is-style-vk-frown-mark li,ol.is-style-vk-numbered-circle-mark li,ol.is-style-vk-numbered-square-mark li{list-style:none;position:relative;margin-top:0;margin-left:0;margin:calc( var(--vk-size-text) * 0.8 ) 0;line-height:calc( var(--vk-size-text) * 1.65 )}ul.is-style-vk-numbered-circle-mark,ol.is-style-vk-numbered-circle-mark{counter-reset:number;list-style-type:none}ul.is-style-vk-numbered-circle-mark li,ol.is-style-vk-numbered-circle-mark li{position:relative;list-style:none;padding-left:.5em}ul.is-style-vk-numbered-circle-mark li:before,ol.is-style-vk-numbered-circle-mark li:before{position:absolute;left:0;counter-increment:number;content:counter(number);margin-left:-1.8em;background:#222;color:#fff;text-indent:0;display:inline-block;font-weight:bold;border-radius:50%;font-size:calc( var(--vk-size-text) * 1 );line-height:calc( var(--vk-size-text) * 1.8 );width:26px;height:26px;text-align:center}ul.is-style-vk-numbered-circle-mark li ul,ul.is-style-vk-numbered-circle-mark li ol,ol.is-style-vk-numbered-circle-mark li ul,ol.is-style-vk-numbered-circle-mark li ol{counter-reset:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-circle-mark li ul li:before,ul.is-style-vk-numbered-circle-mark li ol li:before,ol.is-style-vk-numbered-circle-mark li ul li:before,ol.is-style-vk-numbered-circle-mark li ol li:before{counter-increment:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-square-mark,ol.is-style-vk-numbered-square-mark{counter-reset:number;list-style-type:none}ul.is-style-vk-numbered-square-mark li,ol.is-style-vk-numbered-square-mark li{position:relative;list-style:none;padding-left:.5em}ul.is-style-vk-numbered-square-mark li:before,ol.is-style-vk-numbered-square-mark li:before{position:absolute;left:-0.3em;counter-increment:number;content:counter(number);margin-left:-25px;background:#222;color:#fff;text-indent:0;display:inline-block;font-weight:bold;font-size:calc( var(--vk-size-text) * 1 );line-height:calc( var(--vk-size-text) * 1.8 );width:26px;height:26px;text-align:center;border-radius:2px}ul.is-style-vk-numbered-square-mark li ul,ul.is-style-vk-numbered-square-mark li ol,ol.is-style-vk-numbered-square-mark li ul,ol.is-style-vk-numbered-square-mark li ol{counter-reset:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-square-mark li ul li:before,ul.is-style-vk-numbered-square-mark li ol li:before,ol.is-style-vk-numbered-square-mark li ul li:before,ol.is-style-vk-numbered-square-mark li ol li:before{counter-increment:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-circle-mark.fa-lg li::before,ul.is-style-vk-numbered-square-mark.fa-lg li::before,ol.is-style-vk-numbered-circle-mark.fa-lg li::before,ol.is-style-vk-numbered-square-mark.fa-lg li::before{left:-0.8em}ul.is-style-vk-numbered-circle-mark.fa-2x li,ul.is-style-vk-numbered-square-mark.fa-2x li,ol.is-style-vk-numbered-circle-mark.fa-2x li,ol.is-style-vk-numbered-square-mark.fa-2x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-2x li::before,ul.is-style-vk-numbered-square-mark.fa-2x li::before,ol.is-style-vk-numbered-circle-mark.fa-2x li::before,ol.is-style-vk-numbered-square-mark.fa-2x li::before{left:-1.1em}ul.is-style-vk-numbered-circle-mark.fa-3x li,ul.is-style-vk-numbered-square-mark.fa-3x li,ol.is-style-vk-numbered-circle-mark.fa-3x li,ol.is-style-vk-numbered-square-mark.fa-3x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-3x li::before,ul.is-style-vk-numbered-square-mark.fa-3x li::before,ol.is-style-vk-numbered-circle-mark.fa-3x li::before,ol.is-style-vk-numbered-square-mark.fa-3x li::before{left:-1.4em}ul.is-style-vk-numbered-circle-mark.fa-4x li,ul.is-style-vk-numbered-square-mark.fa-4x li,ol.is-style-vk-numbered-circle-mark.fa-4x li,ol.is-style-vk-numbered-square-mark.fa-4x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-4x li::before,ul.is-style-vk-numbered-square-mark.fa-4x li::before,ol.is-style-vk-numbered-circle-mark.fa-4x li::before,ol.is-style-vk-numbered-square-mark.fa-4x li::before{left:-1.5em}ul.is-style-vk-numbered-circle-mark.fa-5x li,ul.is-style-vk-numbered-square-mark.fa-5x li,ol.is-style-vk-numbered-circle-mark.fa-5x li,ol.is-style-vk-numbered-square-mark.fa-5x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-5x li::before,ul.is-style-vk-numbered-square-mark.fa-5x li::before,ol.is-style-vk-numbered-circle-mark.fa-5x li::before,ol.is-style-vk-numbered-square-mark.fa-5x li::before{left:-1.6em}ul.is-style-vk-arrow-mark li::before,ol.is-style-vk-arrow-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-triangle-mark li::before,ol.is-style-vk-triangle-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-mark li::before,ol.is-style-vk-check-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-circle-mark li::before,ol.is-style-vk-check-circle-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-square-mark li::before,ol.is-style-vk-check-square-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-handpoint-mark li::before,ol.is-style-vk-handpoint-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-pencil-mark li::before,ol.is-style-vk-pencil-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-smile-mark li::before,ol.is-style-vk-smile-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-frown-mark li::before,ol.is-style-vk-frown-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.vk-has-pale-pink-color li::marker,ol.vk-has-pale-pink-color li::marker{color:#f78da7}ul.vk-has-pale-pink-color li::before,ol.vk-has-pale-pink-color li::before{color:#f78da7}ul.is-style-vk-numbered-circle-mark.vk-has-pale-pink-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-pale-pink-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-pale-pink-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-pale-pink-color li::before{color:#fff;background-color:#f78da7}ul.vk-has-vivid-red-color li::marker,ol.vk-has-vivid-red-color li::marker{color:#cf2e2e}ul.vk-has-vivid-red-color li::before,ol.vk-has-vivid-red-color li::before{color:#cf2e2e}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-red-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-red-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-red-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-red-color li::before{color:#fff;background-color:#cf2e2e}ul.vk-has-luminous-vivid-orange-color li::marker,ol.vk-has-luminous-vivid-orange-color li::marker{color:#ff6900}ul.vk-has-luminous-vivid-orange-color li::before,ol.vk-has-luminous-vivid-orange-color li::before{color:#ff6900}ul.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-orange-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-orange-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-orange-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-orange-color li::before{color:#fff;background-color:#ff6900}ul.vk-has-luminous-vivid-amber-color li::marker,ol.vk-has-luminous-vivid-amber-color li::marker{color:#fcb900}ul.vk-has-luminous-vivid-amber-color li::before,ol.vk-has-luminous-vivid-amber-color li::before{color:#fcb900}ul.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-amber-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-amber-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-amber-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-amber-color li::before{color:#fff;background-color:#fcb900}ul.vk-has-light-green-cyan-color li::marker,ol.vk-has-light-green-cyan-color li::marker{color:#7bdcb5}ul.vk-has-light-green-cyan-color li::before,ol.vk-has-light-green-cyan-color li::before{color:#7bdcb5}ul.is-style-vk-numbered-circle-mark.vk-has-light-green-cyan-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-light-green-cyan-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-light-green-cyan-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-light-green-cyan-color li::before{color:#fff;background-color:#7bdcb5}ul.vk-has-vivid-green-cyan-color li::marker,ol.vk-has-vivid-green-cyan-color li::marker{color:#00d084}ul.vk-has-vivid-green-cyan-color li::before,ol.vk-has-vivid-green-cyan-color li::before{color:#00d084}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-green-cyan-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-green-cyan-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-green-cyan-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-green-cyan-color li::before{color:#fff;background-color:#00d084}ul.vk-has-pale-cyan-blue-color li::marker,ol.vk-has-pale-cyan-blue-color li::marker{color:#8ed1fc}ul.vk-has-pale-cyan-blue-color li::before,ol.vk-has-pale-cyan-blue-color li::before{color:#8ed1fc}ul.is-style-vk-numbered-circle-mark.vk-has-pale-cyan-blue-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-pale-cyan-blue-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-pale-cyan-blue-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-pale-cyan-blue-color li::before{color:#fff;background-color:#8ed1fc}ul.vk-has-vivid-cyan-blue-color li::marker,ol.vk-has-vivid-cyan-blue-color li::marker{color:#0693e3}ul.vk-has-vivid-cyan-blue-color li::before,ol.vk-has-vivid-cyan-blue-color li::before{color:#0693e3}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-cyan-blue-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-cyan-blue-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-cyan-blue-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-cyan-blue-color li::before{color:#fff;background-color:#0693e3}ul.vk-has-vivid-purple-color li::marker,ol.vk-has-vivid-purple-color li::marker{color:#9b51e0}ul.vk-has-vivid-purple-color li::before,ol.vk-has-vivid-purple-color li::before{color:#9b51e0}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-purple-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-purple-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-purple-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-purple-color li::before{color:#fff;background-color:#9b51e0}ul.vk-has-very-light-gray-color li::marker,ol.vk-has-very-light-gray-color li::marker{color:#eee}ul.vk-has-very-light-gray-color li::before,ol.vk-has-very-light-gray-color li::before{color:#eee}ul.is-style-vk-numbered-circle-mark.vk-has-very-light-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-very-light-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-very-light-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-very-light-gray-color li::before{color:#fff;background-color:#eee}ul.vk-has-cyan-bluish-gray-color li::marker,ol.vk-has-cyan-bluish-gray-color li::marker{color:#abb8c3}ul.vk-has-cyan-bluish-gray-color li::before,ol.vk-has-cyan-bluish-gray-color li::before{color:#abb8c3}ul.is-style-vk-numbered-circle-mark.vk-has-cyan-bluish-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-cyan-bluish-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-cyan-bluish-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-cyan-bluish-gray-color li::before{color:#fff;background-color:#abb8c3}ul.vk-has-very-dark-gray-color li::marker,ol.vk-has-very-dark-gray-color li::marker{color:#313131}ul.vk-has-very-dark-gray-color li::before,ol.vk-has-very-dark-gray-color li::before{color:#313131}ul.is-style-vk-numbered-circle-mark.vk-has-very-dark-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-very-dark-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-very-dark-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-very-dark-gray-color li::before{color:#fff;background-color:#313131}ul.vk-has-white-color li::marker,ol.vk-has-white-color li::marker{color:#fff}ul.vk-has-white-color li::before,ol.vk-has-white-color li::before{color:#fff}ul.is-style-vk-numbered-circle-mark.vk-has-white-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-white-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-white-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-white-color li::before{color:#fff;background-color:#fff}ul.vk-has-vk-color-primary-color li::marker,ol.vk-has-vk-color-primary-color li::marker{color:var(--vk-color-primary)}ul.vk-has-vk-color-primary-color li::before,ol.vk-has-vk-color-primary-color li::before{color:var(--vk-color-primary)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-color li::before{color:#fff;background-color:var(--vk-color-primary)}ul.vk-has-vk-color-primary-dark-color li::marker,ol.vk-has-vk-color-primary-dark-color li::marker{color:var(--vk-color-primary-dark)}ul.vk-has-vk-color-primary-dark-color li::before,ol.vk-has-vk-color-primary-dark-color li::before{color:var(--vk-color-primary-dark)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-dark-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-dark-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-dark-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-dark-color li::before{color:#fff;background-color:var(--vk-color-primary-dark)}ul.vk-has-vk-color-primary-vivid-color li::marker,ol.vk-has-vk-color-primary-vivid-color li::marker{color:var(--vk-color-primary-vivid)}ul.vk-has-vk-color-primary-vivid-color li::before,ol.vk-has-vk-color-primary-vivid-color li::before{color:var(--vk-color-primary-vivid)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-vivid-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-vivid-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-vivid-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-vivid-color li::before{color:#fff;background-color:var(--vk-color-primary-vivid)}ul.vk-has-vk-color-custom-1-color li::marker,ol.vk-has-vk-color-custom-1-color li::marker{color:var(--vk-color-custom-1)}ul.vk-has-vk-color-custom-1-color li::before,ol.vk-has-vk-color-custom-1-color li::before{color:var(--vk-color-custom-1)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-1-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-1-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-1-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-1-color li::before{color:#fff;background-color:var(--vk-color-custom-1)}ul.vk-has-vk-color-custom-2-color li::marker,ol.vk-has-vk-color-custom-2-color li::marker{color:var(--vk-color-custom-2)}ul.vk-has-vk-color-custom-2-color li::before,ol.vk-has-vk-color-custom-2-color li::before{color:var(--vk-color-custom-2)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-2-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-2-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-2-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-2-color li::before{color:#fff;background-color:var(--vk-color-custom-2)}ul.vk-has-vk-color-custom-3-color li::marker,ol.vk-has-vk-color-custom-3-color li::marker{color:var(--vk-color-custom-3)}ul.vk-has-vk-color-custom-3-color li::before,ol.vk-has-vk-color-custom-3-color li::before{color:var(--vk-color-custom-3)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-3-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-3-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-3-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-3-color li::before{color:#fff;background-color:var(--vk-color-custom-3)}ul.vk-has-vk-color-custom-4-color li::marker,ol.vk-has-vk-color-custom-4-color li::marker{color:var(--vk-color-custom-4)}ul.vk-has-vk-color-custom-4-color li::before,ol.vk-has-vk-color-custom-4-color li::before{color:var(--vk-color-custom-4)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-4-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-4-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-4-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-4-color li::before{color:#fff;background-color:var(--vk-color-custom-4)}ul.vk-has-vk-color-custom-5-color li::marker,ol.vk-has-vk-color-custom-5-color li::marker{color:var(--vk-color-custom-5)}ul.vk-has-vk-color-custom-5-color li::before,ol.vk-has-vk-color-custom-5-color li::before{color:var(--vk-color-custom-5)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-5-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-5-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-5-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-5-color li::before{color:#fff;background-color:var(--vk-color-custom-5)}.wp-block-group h3:first-child,.wp-block-group h4:first-child{margin-top:0}.wp-block-group p:last-child,.wp-block-group ul:last-child,.wp-block-group ol:last-child,.wp-block-group dl:last-child,.wp-block-group table:last-child,.wp-block-group .wp-block-columns:last-child{margin-bottom:0}.wp-block-group.vk-has-pale-pink-color{border-color:#f78da7}.wp-block-group.vk-has-pale-pink-color .wp-block-group__inner-container{border-color:#f78da7}.wp-block-group.vk-has-vivid-red-color{border-color:#cf2e2e}.wp-block-group.vk-has-vivid-red-color .wp-block-group__inner-container{border-color:#cf2e2e}.wp-block-group.vk-has-luminous-vivid-orange-color{border-color:#ff6900}.wp-block-group.vk-has-luminous-vivid-orange-color .wp-block-group__inner-container{border-color:#ff6900}.wp-block-group.vk-has-luminous-vivid-amber-color{border-color:#fcb900}.wp-block-group.vk-has-luminous-vivid-amber-color .wp-block-group__inner-container{border-color:#fcb900}.wp-block-group.vk-has-light-green-cyan-color{border-color:#7bdcb5}.wp-block-group.vk-has-light-green-cyan-color .wp-block-group__inner-container{border-color:#7bdcb5}.wp-block-group.vk-has-vivid-green-cyan-color{border-color:#00d084}.wp-block-group.vk-has-vivid-green-cyan-color .wp-block-group__inner-container{border-color:#00d084}.wp-block-group.vk-has-pale-cyan-blue-color{border-color:#8ed1fc}.wp-block-group.vk-has-pale-cyan-blue-color .wp-block-group__inner-container{border-color:#8ed1fc}.wp-block-group.vk-has-vivid-cyan-blue-color{border-color:#0693e3}.wp-block-group.vk-has-vivid-cyan-blue-color .wp-block-group__inner-container{border-color:#0693e3}.wp-block-group.vk-has-vivid-purple-color{border-color:#9b51e0}.wp-block-group.vk-has-vivid-purple-color .wp-block-group__inner-container{border-color:#9b51e0}.wp-block-group.vk-has-very-light-gray-color{border-color:#eee}.wp-block-group.vk-has-very-light-gray-color .wp-block-group__inner-container{border-color:#eee}.wp-block-group.vk-has-cyan-bluish-gray-color{border-color:#abb8c3}.wp-block-group.vk-has-cyan-bluish-gray-color .wp-block-group__inner-container{border-color:#abb8c3}.wp-block-group.vk-has-very-dark-gray-color{border-color:#313131}.wp-block-group.vk-has-very-dark-gray-color .wp-block-group__inner-container{border-color:#313131}.wp-block-group.vk-has-white-color{border-color:#fff}.wp-block-group.vk-has-white-color .wp-block-group__inner-container{border-color:#fff}.wp-block-group.vk-has-vk-color-primary-color{border-color:var(--vk-color-primary)}.wp-block-group.vk-has-vk-color-primary-color .wp-block-group__inner-container{border-color:var(--vk-color-primary)}.wp-block-group.vk-has-vk-color-primary-dark-color{border-color:var(--vk-color-primary-dark)}.wp-block-group.vk-has-vk-color-primary-dark-color .wp-block-group__inner-container{border-color:var(--vk-color-primary-dark)}.wp-block-group.vk-has-vk-color-primary-vivid-color{border-color:var(--vk-color-primary-vivid)}.wp-block-group.vk-has-vk-color-primary-vivid-color .wp-block-group__inner-container{border-color:var(--vk-color-primary-vivid)}.wp-block-group.vk-has-vk-color-custom-1-color{border-color:var(--vk-color-custom-1)}.wp-block-group.vk-has-vk-color-custom-1-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-1)}.wp-block-group.vk-has-vk-color-custom-2-color{border-color:var(--vk-color-custom-2)}.wp-block-group.vk-has-vk-color-custom-2-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-2)}.wp-block-group.vk-has-vk-color-custom-3-color{border-color:var(--vk-color-custom-3)}.wp-block-group.vk-has-vk-color-custom-3-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-3)}.wp-block-group.vk-has-vk-color-custom-4-color{border-color:var(--vk-color-custom-4)}.wp-block-group.vk-has-vk-color-custom-4-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-4)}.wp-block-group.vk-has-vk-color-custom-5-color{border-color:var(--vk-color-custom-5)}.wp-block-group.vk-has-vk-color-custom-5-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-5)}.is-style-vk-group-solid{border:solid 3px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-solid h2,.is-style-vk-group-solid h3,.is-style-vk-group-solid h4,.is-style-vk-group-solid h5,.is-style-vk-group-solid h6{margin-bottom:1rem}.is-style-vk-group-solid ul,.is-style-vk-group-solid ol{margin-top:0}.is-style-vk-group-solid ul li:last-child,.is-style-vk-group-solid ol li:last-child{margin-bottom:0}.is-style-vk-group-solid-roundcorner{border:solid 3px;border-radius:8px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-solid-roundcorner h2,.is-style-vk-group-solid-roundcorner h3,.is-style-vk-group-solid-roundcorner h4,.is-style-vk-group-solid-roundcorner h5,.is-style-vk-group-solid-roundcorner h6{margin-bottom:1rem}.is-style-vk-group-solid-roundcorner ul,.is-style-vk-group-solid-roundcorner ol{margin-top:0}.is-style-vk-group-solid-roundcorner ul li:last-child,.is-style-vk-group-solid-roundcorner ol li:last-child{margin-bottom:0}.is-style-vk-group-dotted{border:dotted 1px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-dotted h2,.is-style-vk-group-dotted h3,.is-style-vk-group-dotted h4,.is-style-vk-group-dotted h5,.is-style-vk-group-dotted h6{margin-bottom:1rem}.is-style-vk-group-dotted ul,.is-style-vk-group-dotted ol{margin-top:0}.is-style-vk-group-dotted ul li:last-child,.is-style-vk-group-dotted ol li:last-child{margin-bottom:0}.is-style-vk-group-dashed{border:dashed 2px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-dashed h2,.is-style-vk-group-dashed h3,.is-style-vk-group-dashed h4,.is-style-vk-group-dashed h5,.is-style-vk-group-dashed h6{margin-bottom:1rem}.is-style-vk-group-dashed ul,.is-style-vk-group-dashed ol{margin-top:0}.is-style-vk-group-dashed ul li:last-child,.is-style-vk-group-dashed ol li:last-child{margin-bottom:0}.is-style-vk-group-double{border:double 5px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-double h2,.is-style-vk-group-double h3,.is-style-vk-group-double h4,.is-style-vk-group-double h5,.is-style-vk-group-double h6{margin-bottom:1rem}.is-style-vk-group-double ul,.is-style-vk-group-double ol{margin-top:0}.is-style-vk-group-double ul li:last-child,.is-style-vk-group-double ol li:last-child{margin-bottom:0}.is-style-vk-group-stitch{margin:1em auto;padding:.5em;border-radius:8px}.is-style-vk-group-stitch h2,.is-style-vk-group-stitch h3,.is-style-vk-group-stitch h4,.is-style-vk-group-stitch h5,.is-style-vk-group-stitch h6{margin-bottom:1rem}.is-style-vk-group-stitch ul,.is-style-vk-group-stitch ol{margin-top:0}.is-style-vk-group-stitch ul li:last-child,.is-style-vk-group-stitch ol li:last-child{margin-bottom:0}.is-style-vk-group-stitch .wp-block-group__inner-container{border:dashed 2px;border-radius:8px;padding:1.8em}.is-style-vk-group-top-bottom-border{border-top:solid 1px;border-bottom:solid 1px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem);padding-left:0;padding-right:0}.is-style-vk-group-top-bottom-border h2,.is-style-vk-group-top-bottom-border h3,.is-style-vk-group-top-bottom-border h4,.is-style-vk-group-top-bottom-border h5,.is-style-vk-group-top-bottom-border h6{margin-bottom:1rem}.is-style-vk-group-top-bottom-border ul,.is-style-vk-group-top-bottom-border ol{margin-top:0}.is-style-vk-group-top-bottom-border ul li:last-child,.is-style-vk-group-top-bottom-border ol li:last-child{margin-bottom:0}.is-style-vk-group-shadow{-webkit-box-shadow:0px 0px 5px rgba(0,0,0,.2);box-shadow:0px 0px 5px rgba(0,0,0,.2);padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-shadow h2,.is-style-vk-group-shadow h3,.is-style-vk-group-shadow h4,.is-style-vk-group-shadow h5,.is-style-vk-group-shadow h6{margin-bottom:1rem}.is-style-vk-group-shadow ul,.is-style-vk-group-shadow ol{margin-top:0}.is-style-vk-group-shadow ul li:last-child,.is-style-vk-group-shadow ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-info{background-color:#d9edf7;color:#31708f;border-radius:3px;border:1px solid #bce8f1;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-info h2,.is-style-vk-group-alert-info h3,.is-style-vk-group-alert-info h4,.is-style-vk-group-alert-info h5,.is-style-vk-group-alert-info h6{margin-bottom:1rem}.is-style-vk-group-alert-info ul,.is-style-vk-group-alert-info ol{margin-top:0}.is-style-vk-group-alert-info ul li:last-child,.is-style-vk-group-alert-info ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-success{background-color:#dff0d8;color:#3c763d;border-radius:3px;border:1px solid #d6e9c6;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-success h2,.is-style-vk-group-alert-success h3,.is-style-vk-group-alert-success h4,.is-style-vk-group-alert-success h5,.is-style-vk-group-alert-success h6{margin-bottom:1rem}.is-style-vk-group-alert-success ul,.is-style-vk-group-alert-success ol{margin-top:0}.is-style-vk-group-alert-success ul li:last-child,.is-style-vk-group-alert-success ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-warning{background-color:#fcf8e3;color:#8a6d3b;border-radius:3px;border:1px solid #faebcc;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-warning h2,.is-style-vk-group-alert-warning h3,.is-style-vk-group-alert-warning h4,.is-style-vk-group-alert-warning h5,.is-style-vk-group-alert-warning h6{margin-bottom:1rem}.is-style-vk-group-alert-warning ul,.is-style-vk-group-alert-warning ol{margin-top:0}.is-style-vk-group-alert-warning ul li:last-child,.is-style-vk-group-alert-warning ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-danger{background-color:#f2dede;color:#a94442;border-radius:3px;border:1px solid #ebccd1;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-danger h2,.is-style-vk-group-alert-danger h3,.is-style-vk-group-alert-danger h4,.is-style-vk-group-alert-danger h5,.is-style-vk-group-alert-danger h6{margin-bottom:1rem}.is-style-vk-group-alert-danger ul,.is-style-vk-group-alert-danger ol{margin-top:0}.is-style-vk-group-alert-danger ul li:last-child,.is-style-vk-group-alert-danger ol li:last-child{margin-bottom:0}.wp-block-embed-youtube iframe{width:100%}.has-text-align-right{text-align:right}.has-text-align-left{text-align:left}.has-text-align-center{text-align:center}.wp-block-social-links{-ms-flex-wrap:wrap;flex-wrap:wrap}@media(min-width: 1400px){.col-xxl-2{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;max-width:16.66667%}.col-xxl-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xxl-4{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.col-xxl-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xxl-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}
2
  .alert{padding:1em;margin:1em auto;border-radius:3px}.alert p{margin:0}.alert+.alert{margin-top:2em}.alert a{-webkit-transition:color .3s linear,opacity .3s linear;transition:color .3s linear,opacity .3s linear}.alert a:link,.alert a:visited{opacity:.8;text-decoration:underline}.alert a:hover,.alert a:visited{opacity:1;text-decoration:none}.alert-success{background-color:#dff0d8;color:#3c763d;border-color:#d6e9c6}.alert-info{background-color:#d9edf7;color:#31708f;border-color:#bce8f1}.alert-warning{background-color:#fcf8e3;color:#8a6d3b;border-color:#faebcc}.alert-danger{background-color:#f2dede;color:#a94442;border-color:#ebccd1}
3
  .vk_balloon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal;margin-bottom:2.2em}.vk_balloon figure{margin:0}.vk_balloon p{color:initial;word-break:break-all}.vk_balloon p:first-of-type{margin-top:0}.vk_balloon p:last-of-type{margin-bottom:0}.vk_balloon_icon{-ms-flex-preferred-size:80px;flex-basis:80px;-ms-flex-negative:0;flex-shrink:0;text-align:center}.vk_balloon_icon_image:not(.has-text-color){color:#ccc}.vk_balloon_icon_image{vertical-align:bottom;width:64px;height:64px;-o-object-fit:cover;object-fit:cover;display:inline-block}.vk_balloon_icon_image-type-rounded{border-radius:4px}.vk_balloon_icon_image-type-circle{border-radius:50%}.vk_balloon_icon_name{display:block;text-align:center;font-size:.7rem;margin-top:.3rem}.vk_balloon_content_outer{width:100%}.vk_balloon_content{max-width:calc(100% - 6.2em);position:relative;text-align:left}.vk_balloon-position-left .vk_balloon_content{float:left}.vk_balloon-position-right .vk_balloon_content{float:right}.vk_balloon_content.editor-rich-text__tinymce[data-is-placeholder-visible=true]{position:absolute}.vk_balloon_content{background:#f5f5f5;padding:calc(var(--vk-size-text) * 1 ) calc(var(--vk-size-text) * 1.2)}.vk_balloon_content_before,.vk_balloon_content_after{position:absolute;top:0;display:block;width:0;height:0;border-style:solid}.vk_balloon-type-speech .vk_balloon_content{border-radius:.4em}.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{top:15px}.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{z-index:1;border-right-color:inherit}.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before{z-index:2}.vk_balloon-type-think .vk_balloon_content{border-radius:1rem}.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before,.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{position:absolute;content:"";border-radius:50%;background:inherit}.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before{width:14px;height:14px}.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{width:10px;height:10px}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_icon{margin-right:calc( var(--vk-size-text) * 1.2 )}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{left:-10px;border-width:10px 12px 10px 0}.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_icon{margin-right:calc( var(--vk-size-text) * 1.2 )}.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before{left:-18px;top:7px}.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{left:-25px;top:20px}.vk_balloon-position-right{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_icon{margin-left:calc( var(--vk-size-text) * 1.2 )}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{right:-10px;border-width:10px 0 10px 12px}.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_icon{margin-left:calc( var(--vk-size-text) * 1.2 )}.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before{right:-18px;top:7px}.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{right:-25px;top:20px}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before:not(.has-text-color),.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after:not(.has-text-color){border-color:transparent #f5f5f5 transparent transparent}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{border-color:transparent currentColor transparent transparent}.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before:not(.has-text-color),.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after:not(.has-text-color){border-color:transparent}.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{border-color:transparent currentColor transparent transparent}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before:not(.has-text-color),.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after:not(.has-text-color){border-color:transparent transparent transparent #f5f5f5}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{border-color:transparent transparent transparent currentColor}.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before:not(.has-text-color),.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after:not(.has-text-color){border-color:transparent}.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{border-color:transparent currentColor transparent transparent}.vk_balloon_content-border-true,.vk_balloon_icon_image-border-true{border-width:var(--vk-balloon-border-width, 1px);border-style:solid}.vk_balloon_content-border-true:not(.has-text-color){color:#ccc}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content-border-true .vk_balloon_content_before{left:-10px}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content-border-true .vk_balloon_content_after{left:var(--vk-balloon-speech-offset, -12px);border-right-color:inherit !important}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content-border-true{border-color:currentColor}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content-border-true .vk_balloon_content_before{right:-10px}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content-border-true .vk_balloon_content_after{right:var(--vk-balloon-speech-offset, -12px);border-left-color:inherit !important}.vk_balloon-type-think .vk_balloon_content-border-true .vk_balloon_content_before,.vk_balloon-type-think .vk_balloon_content-border-true .vk_balloon_content_after{border-width:var(--vk-balloon-border-width, 1px);border-style:solid;border-color:inherit !important}.vk_balloon-animation-trembling{-webkit-animation:trembling .1s infinite;animation:trembling .1s infinite}@-webkit-keyframes trembling{0%{-webkit-transform:rotate(-0.5deg);transform:rotate(-0.5deg)}50%{-webkit-transform:rotate(0.5deg);transform:rotate(0.5deg)}}@keyframes trembling{0%{-webkit-transform:rotate(-0.5deg);transform:rotate(-0.5deg)}50%{-webkit-transform:rotate(0.5deg);transform:rotate(0.5deg)}}.vk_balloon-animation-trembling-x{-webkit-animation:trembling-x .1s infinite;animation:trembling-x .1s infinite}@-webkit-keyframes trembling-x{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}50%{-webkit-transform:scale(0.99, 0.96);transform:scale(0.99, 0.96)}}@keyframes trembling-x{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}50%{-webkit-transform:scale(0.99, 0.96);transform:scale(0.99, 0.96)}}.vk_balloon-animation-pounding{-webkit-animation:pounding 1.5s infinite;animation:pounding 1.5s infinite}@-webkit-keyframes pounding{0%{-webkit-transform:scale(1.05);transform:scale(1.05)}5%{-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(1.05);transform:scale(1.05)}}@keyframes pounding{0%{-webkit-transform:scale(1.05);transform:scale(1.05)}5%{-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(1.05);transform:scale(1.05)}}.vk_balloon-animation-shaking{-webkit-animation:shaking .4s infinite;animation:shaking .4s infinite}@-webkit-keyframes shaking{0%{-webkit-transform:translate(1px, 1px);transform:translate(1px, 1px)}25%{-webkit-transform:translate(1px, -1px);transform:translate(1px, -1px)}50%{-webkit-transform:translate(-1px, -1px);transform:translate(-1px, -1px)}75%{-webkit-transform:translate(-1px, 1px);transform:translate(-1px, 1px)}100%{-webkit-transform:translate(1px, 1px);transform:translate(1px, 1px)}}@keyframes shaking{0%{-webkit-transform:translate(1px, 1px);transform:translate(1px, 1px)}25%{-webkit-transform:translate(1px, -1px);transform:translate(1px, -1px)}50%{-webkit-transform:translate(-1px, -1px);transform:translate(-1px, -1px)}75%{-webkit-transform:translate(-1px, 1px);transform:translate(-1px, 1px)}100%{-webkit-transform:translate(1px, 1px);transform:translate(1px, 1px)}}.vk_balloon.animation-vibration .vk_balloon_content{display:inline-block;-webkit-animation:vibration .1s infinite;animation:vibration .1s infinite}@-webkit-keyframes vibration{0%{-webkit-transform:translate(0px, 0px) rotateZ(0deg);transform:translate(0px, 0px) rotateZ(0deg)}25%{-webkit-transform:translate(2px, 2px) rotateZ(1deg);transform:translate(2px, 2px) rotateZ(1deg)}50%{-webkit-transform:translate(0px, 2px) rotateZ(0deg);transform:translate(0px, 2px) rotateZ(0deg)}75%{-webkit-transform:translate(2px, 0px) rotateZ(-1deg);transform:translate(2px, 0px) rotateZ(-1deg)}100%{-webkit-transform:translate(0px, 0px) rotateZ(0deg);transform:translate(0px, 0px) rotateZ(0deg)}}@keyframes vibration{0%{-webkit-transform:translate(0px, 0px) rotateZ(0deg);transform:translate(0px, 0px) rotateZ(0deg)}25%{-webkit-transform:translate(2px, 2px) rotateZ(1deg);transform:translate(2px, 2px) rotateZ(1deg)}50%{-webkit-transform:translate(0px, 2px) rotateZ(0deg);transform:translate(0px, 2px) rotateZ(0deg)}75%{-webkit-transform:translate(2px, 0px) rotateZ(-1deg);transform:translate(2px, 0px) rotateZ(-1deg)}100%{-webkit-transform:translate(0px, 0px) rotateZ(0deg);transform:translate(0px, 0px) rotateZ(0deg)}}.icon-image-list-note:hover{cursor:pointer}@media only screen and (max-width: 480px){.vk_balloon_content{max-width:calc(100% - 2em);font-size:.9em;padding:1em}.vk_balloon-type-think .vk_balloon_content::after{border:5px solid transparent}.vk_balloon{-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal}.vk_balloon.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_icon{margin-right:1.5rem}.vk_balloon.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content{display:inline-block}.vk_balloon.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_icon{margin-right:2rem}.vk_balloon.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content{display:inline-block}.vk_balloon.vk_balloon-position-right{text-align:right}.vk_balloon.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_icon{margin-left:1.5rem;margin-right:0}.vk_balloon.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content{display:inline-block}.vk_balloon.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_icon{margin-left:2rem;margin-right:0}.vk_balloon.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content{display:inline-block}.vk_balloon_icon{max-width:64px}}
4
  :root{--vk-color-border-red: #dc3545;--vk-color-background-red: #dc3545;--vk-color-border-orange: #ffa536;--vk-color-background-orange: #ffa536;--vk-color-border-blue: #4267b2;--vk-color-background-blue: #4267b2;--vk-color-border-green: #28a745;--vk-color-background-green: #28a745;--vk-color-border-black: #222;--vk-color-background-black: #222}.vk_borderBox-color-red{border-color:var(--vk-color-border-red);background-color:var(--vk-color-background-red)}.vk_borderBox-color-orange{border-color:var(--vk-color-border-orange);background-color:var(--vk-color-background-orange)}.vk_borderBox-color-blue{border-color:var(--vk-color-border-blue);background-color:var(--vk-color-background-blue)}.vk_borderBox-color-green{border-color:var(--vk-color-border-green);background-color:var(--vk-color-background-green)}.vk_borderBox-color-black{border-color:var(--vk-color-border-black);background-color:var(--vk-color-background-black)}.vk_borderBox-background-transparent .vk_borderBox_body{background-color:transparent}.vk_borderBox-background-transparent.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox{background-color:transparent}.vk_borderBox-background-transparent.is-style-vk_borderBox-style-solid-kado-tit-onborder>.vk_borderBox_title_container,.vk_borderBox-background-transparent.is-style-vk_borderBox-style-solid-kado-tit-inner>.vk_borderBox_title_container,.vk_borderBox-background-transparent.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container{background-color:transparent}.vk_borderBox-background-white .vk_borderBox_body{background-color:#fff}.vk_borderBox-background-white.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox{background-color:#fff}.vk_borderBox-background-white.is-style-vk_borderBox-style-solid-kado-tit-onborder>.vk_borderBox_title_container,.vk_borderBox-background-white.is-style-vk_borderBox-style-solid-kado-tit-inner>.vk_borderBox_title_container,.vk_borderBox-background-white.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container{background-color:#fff}.vk_borderBox{margin:0 auto 2em;position:relative}.vk_borderBox .vk_borderBox_title_container{margin:0;font-size:1em;line-height:1.4;padding:.5em 1.5em .4em;font-weight:bold}.vk_borderBox .vk_borderBox_title_container i:first-child,.vk_borderBox .vk_borderBox_title_container .svg-inline--fa{margin-right:5px}.vk_borderBox .vk_borderBox_title_container .vk_borderBox_title{display:inline;font-weight:bold;font-size:1em;color:inherit;background:none;padding:0;border:none;outline:none}.vk_borderBox .vk_borderBox_title_container .vk_borderBox_title::before{content:none}.vk_borderBox .vk_borderBox_title_container .vk_borderBox_title::after{content:none}.vk_borderBox .vk_borderBox_body{padding:1.5em;border-width:2px;border-style:solid}@media(min-width: 992px){.vk_borderBox .vk_borderBox_body{padding:1.5em 2em 1.5em}}.vk_borderBox .vk_borderBox_body>*:not(.has-text-color){color:initial}.vk_borderBox .vk_borderBox_body>*:first-child{margin-top:0}.vk_borderBox .vk_borderBox_body>*:last-child{margin-bottom:0}.vk_borderBox:not([class*=vk_borderBox-color]).is-style-vk_borderBox-style-solid-kado-tit-tab>.vk_borderBox_title_container:not(.has-background),.vk_borderBox:not([class*=vk_borderBox-color]).is-style-vk_borderBox-style-solid-round-tit-tab>.vk_borderBox_title_container:not(.has-background),.vk_borderBox:not([class*=vk_borderBox-color]).is-style-vk_borderBox-style-solid-kado-tit-banner>.vk_borderBox_title_container:not(.has-background){background-color:#337ab7}.vk_borderBox:not([class*=vk_borderBox-color]):not(.has-text-color){color:#337ab7}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-tab>.vk_borderBox_title_container,.vk_borderBox.is-style-vk_borderBox-style-solid-round-tit-tab>.vk_borderBox_title_container{display:inline-block}.vk_borderBox.is-style-vk_borderBox-style-solid-round-tit-tab>.vk_borderBox_title_container{border-radius:8px 8px 0 0}.vk_borderBox.is-style-vk_borderBox-style-solid-round-tit-tab>.vk_borderBox_body{border-radius:0 8px 8px 8px}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-inner,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-onborder,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature{background-color:transparent;border-width:2px;border-style:solid}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-inner>.vk_borderBox_title_container,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-onborder>.vk_borderBox_title_container,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container{padding:1.5em 1.5em 1em}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-inner>.vk_borderBox_body,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-onborder>.vk_borderBox_body,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_body{border:none;padding-top:0}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container::after,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container::after,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container::after,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container::after,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container::after{content:"";position:absolute;top:-32%;left:1.5em;padding:1.4em;border-radius:50%;border:solid 2px #fff}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.svg-inline--fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.fab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.fas,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.far,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.fal,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.fad,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.svg-inline--fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.fab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.fas,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.far,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.fal,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.fad,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.svg-inline--fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.fab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.fas,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.far,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.fal,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.fad,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.svg-inline--fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.fab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.fas,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.far,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.fal,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.fad,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.svg-inline--fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.fab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.fas,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.far,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.fal,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.fad{position:absolute;font-size:1.3em;margin-right:0;z-index:100;top:0%;left:2.3em;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);color:#fff}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container{position:relative;padding-top:2.2em}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container>.vk_borderBox_icon_border{position:absolute;margin-right:0;top:0;left:3em;padding:1.4em;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);border-radius:50%;border:solid 2px #fff}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container>.vk_borderBox_icon_border>i{position:absolute;font-size:1.3em;top:50%;left:50%;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);color:#fff}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container>.vk_borderBox_icon_border:not(.has-background){background-color:#337ab7}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-onborder>.vk_borderBox_title_container{position:relative;top:-1.2em;left:1em;z-index:1;display:inline-block;padding:.5em .5em;background:#fff}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-tab,.vk_borderBox.is-style-vk_borderBox-style-solid-round-tit-tab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-banner{border:none;background-color:transparent}.is-style-vk_borderBox-style-solid-kado-tit-tab>.vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner>.vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab>.vk_borderBox_title_container{color:#fff}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-red .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-red .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-red .vk_borderBox_title_container{background-color:var(--vk-color-background-red)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-red .vk_borderBox_body,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-red .vk_borderBox_body,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-red .vk_borderBox_body{border-color:var(--vk-color-border-red)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-orange .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-orange .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-orange .vk_borderBox_title_container{background-color:var(--vk-color-background-orange)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-orange .vk_borderBox_body,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-orange .vk_borderBox_body,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-orange .vk_borderBox_body{border-color:var(--vk-color-border-orange)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-blue .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-blue .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-blue .vk_borderBox_title_container{background-color:var(--vk-color-background-blue)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-blue .vk_borderBox_body,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-blue .vk_borderBox_body,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-blue .vk_borderBox_body{border-color:var(--vk-color-border-blue)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-green .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-green .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-green .vk_borderBox_title_container{background-color:var(--vk-color-background-green)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-green .vk_borderBox_body,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-green .vk_borderBox_body,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-green .vk_borderBox_body{border-color:var(--vk-color-border-green)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-black .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-black .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-black .vk_borderBox_title_container{background-color:var(--vk-color-background-black)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-black .vk_borderBox_body,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-black .vk_borderBox_body,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-black .vk_borderBox_body{border-color:var(--vk-color-border-black)}.is-style-vk_borderBox-style-solid-kado-tit-inner.vk_borderBox-color-red .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox-color-red .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container{color:var(--vk-color-background-red)}.is-style-vk_borderBox-style-solid-kado-tit-inner.vk_borderBox-color-orange .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox-color-orange .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container{color:var(--vk-color-background-orange)}.is-style-vk_borderBox-style-solid-kado-tit-inner.vk_borderBox-color-blue .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox-color-blue .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container{color:var(--vk-color-background-blue)}.is-style-vk_borderBox-style-solid-kado-tit-inner.vk_borderBox-color-green .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox-color-green .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container{color:var(--vk-color-background-green)}.is-style-vk_borderBox-style-solid-kado-tit-inner.vk_borderBox-color-black .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox-color-black .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container{color:var(--vk-color-background-black)}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container .svg-inline--fa,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container .fas{color:#fff}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container::after{background-color:var(--vk-color-background-red)}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container .svg-inline--fa,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container .fas{background-color:var(--vk-color-background-orange);color:#fff}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container::after{background-color:var(--vk-color-background-orange)}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container .svg-inline--fa,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container .fas{background-color:var(--vk-color-background-blue);color:#fff}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container::after{background-color:var(--vk-color-background-blue)}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container .svg-inline--fa,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container .fas{background-color:var(--vk-color-background-green);color:#fff}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container::after{background-color:var(--vk-color-background-green)}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container .svg-inline--fa,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container .fas{background-color:var(--vk-color-background-black);color:#fff}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container::after{background-color:var(--vk-color-background-black)}.vk_borderBox_body-align-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.vk_borderBox_body-align-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vk_borderBox_body-align-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:right;-ms-flex-pack:right;justify-content:right}
@@ -16,4 +16,4 @@
16
  .vk_responsive-br{display:none}@media(max-width: 575.98px){.vk_responsive-br-xs{display:block}}@media(min-width: 576px)and (max-width: 767.98px){.vk_responsive-br-sm{display:block}}@media(min-width: 768px)and (max-width: 991.98px){.vk_responsive-br-md{display:block}}@media(min-width: 992px)and (max-width: 1199.98px){.vk_responsive-br-lg{display:block}}@media(min-width: 1200px)and (max-width: 1399.98px){.vk_responsive-br-xl{display:block}}@media(min-width: 1400px){.vk_responsive-br-xxl{display:block}}
17
  :root{--vk-heading-has-background-padding: 0.6em 0.7em 0.5em}.is-style-vk-heading h3.is-style-vk-heading:after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading h3.is-style-vk-heading:after{border-bottom:none !important}.is-style-vk-heading-plain:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-background_fill_lightgray:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-double_black:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-double_bottomborder_black:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-solid_black:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-solid_bottomborder_black:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-dotted_bottomborder_black:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-plain:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-background_fill_lightgray:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_black:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_bottomborder_black:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_black:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_bottomborder_black:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-dotted_bottomborder_black:not(.has-text-align-center,.has-text-align-right){text-align:left}.is-style-vk-heading-plain,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-plain{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:unset;display:block}.is-style-vk-heading-plain::before,.is-style-vk-heading-plain::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-plain::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-plain::after{content:none}.is-style-vk-heading-plain[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-plain[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-background_fill_lightgray,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-background_fill_lightgray{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;border:none;background-color:#efefef;padding:.6em .7em .5em;margin-bottom:1.2em;border-radius:4px}.is-style-vk-heading-background_fill_lightgray::before,.is-style-vk-heading-background_fill_lightgray::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-background_fill_lightgray::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-background_fill_lightgray::after{content:none}.is-style-vk-heading-background_fill_lightgray[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-background_fill_lightgray[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-double_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:.6em 0 .5em;margin-bottom:1.2em;border-top:double 3px #333;border-bottom:double 3px #333}.is-style-vk-heading-double_black::before,.is-style-vk-heading-double_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_black::after{content:none}.is-style-vk-heading-double_black[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_black[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-double_bottomborder_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_bottomborder_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:.6em 0 .5em;margin-bottom:1.2em;border-bottom:double 3px #333}.is-style-vk-heading-double_bottomborder_black::before,.is-style-vk-heading-double_bottomborder_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_bottomborder_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_bottomborder_black::after{content:none}.is-style-vk-heading-double_bottomborder_black[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_bottomborder_black[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-solid_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:.6em 0 .5em;margin-bottom:1.2em;border-top:solid 1px #333;border-bottom:solid 1px #333}.is-style-vk-heading-solid_black::before,.is-style-vk-heading-solid_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_black::after{content:none}.is-style-vk-heading-solid_black[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_black[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-solid_bottomborder_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_bottomborder_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:.6em 0 .5em;margin-bottom:1.2em;border-bottom:solid 1px #333}.is-style-vk-heading-solid_bottomborder_black::before,.is-style-vk-heading-solid_bottomborder_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_bottomborder_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_bottomborder_black::after{content:none}.is-style-vk-heading-solid_bottomborder_black[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_bottomborder_black[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-dotted_bottomborder_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-dotted_bottomborder_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:.6em 0 .5em;margin-bottom:1.2em;border-bottom:1px dotted #111}.is-style-vk-heading-dotted_bottomborder_black::before,.is-style-vk-heading-dotted_bottomborder_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-dotted_bottomborder_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-dotted_bottomborder_black::after{content:none}.is-style-vk-heading-dotted_bottomborder_black[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-dotted_bottomborder_black[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-both_ends,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-both_ends{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;margin-bottom:1.2em;padding:0}.is-style-vk-heading-both_ends::before,.is-style-vk-heading-both_ends::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-both_ends::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-both_ends::after{content:"";-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-bottom:1px solid #333;position:unset;width:unset;border-left:unset;border-right:unset;border-top:none;background:unset}.is-style-vk-heading-both_ends::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-both_ends::before{margin-right:1em;top:unset}.is-style-vk-heading-both_ends::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-both_ends::after{margin-left:1em;bottom:unset}.is-style-vk-heading-brackets_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-brackets_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;border:none;background-color:transparent !important;padding:.7em;margin-bottom:1.2em;text-align:center;border-bottom:unset !important}.is-style-vk-heading-brackets_black::before,.is-style-vk-heading-brackets_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-brackets_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-brackets_black::after{content:"";position:absolute;top:0;width:12px;height:100%;display:inline-block;margin-left:0;border-top:solid 1px #333;border-bottom:solid 1px #333;background:unset}.is-style-vk-heading-brackets_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-brackets_black::before{border-left:solid 1px #333;left:0}.is-style-vk-heading-brackets_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-brackets_black::after{border-right:solid 1px #333 !important;right:0;left:auto}
18
  .wp-block-image figcaption{text-align:center;font-size:calc(var(--vk-size-text)* 0.75 )}figure.wp-block-image.is-style-vk-image-rounded img{border-radius:.5rem}figure.wp-block-image.is-style-vk-image-border img{border:1px solid #e5e5e5}figure.wp-block-image.is-style-vk-image-photoFrame{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}figure.wp-block-image.is-style-vk-image-photoFrame.alignleft{margin:0 1em .5em 0}figure.wp-block-image.is-style-vk-image-photoFrame.alignright{margin:0 0 .5em 1em}figure.wp-block-image.is-style-vk-image-photoFrame.alignwide,figure.wp-block-image.is-style-vk-image-photoFrame.alignfull{width:auto}figure.wp-block-image.is-style-vk-image-photoFrame figcaption{display:block;margin:8px 0 0}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;transform:rotate(-2deg);-moz-transform:rotate(-2deg);-webkit-transform:rotate(-2deg)}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft{margin:0 1em .5em 0}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright{margin:0 0 .5em 1em}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignwide,figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignfull{width:auto}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right figcaption{display:block;margin:8px 0 0}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;transform:rotate(2deg);-moz-transform:rotate(2deg);-webkit-transform:rotate(2deg)}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft{margin:0 1em .5em 0}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright{margin:0 0 .5em 1em}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignwide,figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignfull{width:auto}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left figcaption{display:block;margin:8px 0 0}figure.wp-block-image.is-style-vk-image-shadow{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.15);box-shadow:0 5px 10px rgba(0,0,0,.15);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}figure.wp-block-image.is-style-vk-image-shadow figcaption{display:block}figure.wp-block-image.is-style-vk-image-shadow.alignwide{width:unset}figure.wp-block-image.is-style-vk-image-wave01 img{-webkit-mask-image:var(--vk_image-mask-wave01);mask-image:var(--vk_image-mask-wave01);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}figure.wp-block-image.is-style-vk-image-wave02 img{-webkit-mask-image:var(--vk_image-mask-wave02);mask-image:var(--vk_image-mask-wave02);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}figure.wp-block-image.is-style-vk-image-wave03 img{-webkit-mask-image:var(--vk_image-mask-wave03);mask-image:var(--vk_image-mask-wave03);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}figure.wp-block-image.is-style-vk-image-wave04 img{-webkit-mask-image:var(--vk_image-mask-wave04);mask-image:var(--vk_image-mask-wave04);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}.wp-block-image.is-style-vk-image-rounded figure.alignleft img,.wp-block-image.is-style-vk-image-rounded figure.alignright img,.wp-block-image.is-style-vk-image-rounded figure.aligncenter img{border-radius:.5rem}.wp-block-image.is-style-vk-image-border figure.alignleft img,.wp-block-image.is-style-vk-image-border figure.alignright img,.wp-block-image.is-style-vk-image-border figure.aligncenter img{border:1px solid #e5e5e5}.wp-block-image.is-style-vk-image-photoFrame figure.alignleft,.wp-block-image.is-style-vk-image-photoFrame figure.alignright,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.wp-block-image.is-style-vk-image-photoFrame figure.alignleft.alignleft,.wp-block-image.is-style-vk-image-photoFrame figure.alignright.alignleft,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter.alignleft{margin:0 1em .5em 0}.wp-block-image.is-style-vk-image-photoFrame figure.alignleft.alignright,.wp-block-image.is-style-vk-image-photoFrame figure.alignright.alignright,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter.alignright{margin:0 0 .5em 1em}.wp-block-image.is-style-vk-image-photoFrame figure.alignleft.alignwide,.wp-block-image.is-style-vk-image-photoFrame figure.alignleft.alignfull,.wp-block-image.is-style-vk-image-photoFrame figure.alignright.alignwide,.wp-block-image.is-style-vk-image-photoFrame figure.alignright.alignfull,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter.alignwide,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter.alignfull{width:auto}.wp-block-image.is-style-vk-image-photoFrame figure.alignleft figcaption,.wp-block-image.is-style-vk-image-photoFrame figure.alignright figcaption,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter figcaption{display:block;margin:8px 0 0}.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;transform:rotate(-2deg);-moz-transform:rotate(-2deg);-webkit-transform:rotate(-2deg)}.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter.alignleft{margin:0 1em .5em 0}.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter.alignright{margin:0 0 .5em 1em}.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter.alignfull{width:auto}.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter figcaption{display:block;margin:8px 0 0}.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;transform:rotate(2deg);-moz-transform:rotate(2deg);-webkit-transform:rotate(2deg)}.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter.alignleft{margin:0 1em .5em 0}.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter.alignright{margin:0 0 .5em 1em}.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter.alignfull{width:auto}.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter figcaption{display:block;margin:8px 0 0}.wp-block-image.is-style-vk-image-shadow figure.alignleft,.wp-block-image.is-style-vk-image-shadow figure.alignright,.wp-block-image.is-style-vk-image-shadow figure.aligncenter{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.15);box-shadow:0 5px 10px rgba(0,0,0,.15);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.wp-block-image.is-style-vk-image-shadow figure.alignleft figcaption,.wp-block-image.is-style-vk-image-shadow figure.alignright figcaption,.wp-block-image.is-style-vk-image-shadow figure.aligncenter figcaption{display:block}.wp-block-image.is-style-vk-image-shadow figure.alignleft.alignwide,.wp-block-image.is-style-vk-image-shadow figure.alignright.alignwide,.wp-block-image.is-style-vk-image-shadow figure.aligncenter.alignwide{width:unset}.wp-block-image.is-style-vk-image-wave01 figure.alignleft img,.wp-block-image.is-style-vk-image-wave01 figure.alignright img,.wp-block-image.is-style-vk-image-wave01 figure.aligncenter img{-webkit-mask-image:var(--vk_image-mask-wave01);mask-image:var(--vk_image-mask-wave01);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}.wp-block-image.is-style-vk-image-wave02 figure.alignleft img,.wp-block-image.is-style-vk-image-wave02 figure.alignright img,.wp-block-image.is-style-vk-image-wave02 figure.aligncenter img{-webkit-mask-image:var(--vk_image-mask-wave02);mask-image:var(--vk_image-mask-wave02);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}.wp-block-image.is-style-vk-image-wave03 figure.alignleft img,.wp-block-image.is-style-vk-image-wave03 figure.alignright img,.wp-block-image.is-style-vk-image-wave03 figure.aligncenter img{-webkit-mask-image:var(--vk_image-mask-wave03);mask-image:var(--vk_image-mask-wave03);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}.wp-block-image.is-style-vk-image-wave04 figure.alignleft img,.wp-block-image.is-style-vk-image-wave04 figure.alignright img,.wp-block-image.is-style-vk-image-wave04 figure.aligncenter img{-webkit-mask-image:var(--vk_image-mask-wave04);mask-image:var(--vk_image-mask-wave04);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}
19
- .wp-block-table thead th,.wp-block-table tfoot td{font-weight:bold}.wp-block-table.is-style-vk-table-border-top-bottom th,.wp-block-table.is-style-vk-table-border-top-bottom td{border-top:none;border-left:none;border-right:none;border-bottom:1px solid var(--vk-color-border-hr)}.wp-block-table.is-style-vk-table-border th,.wp-block-table.is-style-vk-table-border td{border:1px solid var(--vk-color-border-hr)}.wp-block-table.is-style-vk-table-border-stripes tbody tr:nth-child(2n+1){background-color:#f0f0f0}.wp-block-table.is-style-vk-table-border-stripes th,.wp-block-table.is-style-vk-table-border-stripes td{border:1px solid var(--vk-color-border-hr)}.editor-styles-wrapper .wp-block-table.is-style-regular th,.editor-styles-wrapper .wp-block-table.is-style-regular td{border-color:var(--vk-color-border-hr)}
1
+ :root{--vk-margin-elem:2rem}.text-nowrap{white-space:nowrap}:root{--vk-margin-sm: 1.5rem;--vk-margin-md: 2.4rem;--vk-margin-lg: 4rem}.vk_block-margin-0--margin-top{margin-top:0 !important}.vk_block-margin-0--margin-top>table{margin-top:0}.vk_block-margin-0--margin-bottom{margin-bottom:0 !important}.vk_block-margin-0--margin-bottom>table{margin-bottom:0}.vk_block-margin-sm{margin-top:var(--vk-margin-sm)}.vk_block-margin-sm--margin-top{margin-top:var(--vk-margin-sm) !important}.vk_block-margin-sm--margin-bottom{margin-bottom:var(--vk-margin-sm) !important}.vk_block-margin-sm--height{height:var(--vk-margin-sm)}.vk_block-margin-md{margin-top:var(--vk-margin-md)}.vk_block-margin-md--margin-top{margin-top:var(--vk-margin-md) !important}.vk_block-margin-md--margin-bottom{margin-bottom:var(--vk-margin-md) !important}.vk_block-margin-md--height{height:var(--vk-margin-md)}.vk_block-margin-lg{margin-top:var(--vk-margin-lg)}.vk_block-margin-lg--margin-top{margin-top:var(--vk-margin-lg) !important}.vk_block-margin-lg--margin-bottom{margin-bottom:var(--vk-margin-lg) !important}.vk_block-margin-lg--height{height:var(--vk-margin-lg)}ul.is-style-vk-arrow-mark,ul.is-style-vk-triangle-mark,ul.is-style-vk-check-mark,ul.is-style-vk-check-circle-mark,ul.is-style-vk-check-square-mark,ul.is-style-vk-handpoint-mark,ul.is-style-vk-pencil-mark,ul.is-style-vk-smile-mark,ul.is-style-vk-frown-mark,ul.is-style-vk-numbered-circle-mark,ul.is-style-vk-numbered-square-mark,ol.is-style-vk-arrow-mark,ol.is-style-vk-triangle-mark,ol.is-style-vk-check-mark,ol.is-style-vk-check-circle-mark,ol.is-style-vk-check-square-mark,ol.is-style-vk-handpoint-mark,ol.is-style-vk-pencil-mark,ol.is-style-vk-smile-mark,ol.is-style-vk-frown-mark,ol.is-style-vk-numbered-circle-mark,ol.is-style-vk-numbered-square-mark{-webkit-padding-start:2em;padding-inline-start:2em}ul.is-style-vk-arrow-mark li,ul.is-style-vk-triangle-mark li,ul.is-style-vk-check-mark li,ul.is-style-vk-check-circle-mark li,ul.is-style-vk-check-square-mark li,ul.is-style-vk-handpoint-mark li,ul.is-style-vk-pencil-mark li,ul.is-style-vk-smile-mark li,ul.is-style-vk-frown-mark li,ul.is-style-vk-numbered-circle-mark li,ul.is-style-vk-numbered-square-mark li,ol.is-style-vk-arrow-mark li,ol.is-style-vk-triangle-mark li,ol.is-style-vk-check-mark li,ol.is-style-vk-check-circle-mark li,ol.is-style-vk-check-square-mark li,ol.is-style-vk-handpoint-mark li,ol.is-style-vk-pencil-mark li,ol.is-style-vk-smile-mark li,ol.is-style-vk-frown-mark li,ol.is-style-vk-numbered-circle-mark li,ol.is-style-vk-numbered-square-mark li{list-style:none;position:relative;margin-top:0;margin-left:0;margin:calc( var(--vk-size-text) * 0.8 ) 0;line-height:calc( var(--vk-size-text) * 1.65 )}ul.is-style-vk-numbered-circle-mark,ol.is-style-vk-numbered-circle-mark{counter-reset:number;list-style-type:none}ul.is-style-vk-numbered-circle-mark li,ol.is-style-vk-numbered-circle-mark li{position:relative;list-style:none;padding-left:.5em}ul.is-style-vk-numbered-circle-mark li:before,ol.is-style-vk-numbered-circle-mark li:before{position:absolute;left:0;counter-increment:number;content:counter(number);margin-left:-1.8em;background:#222;color:#fff;text-indent:0;display:inline-block;font-weight:bold;border-radius:50%;font-size:calc( var(--vk-size-text) * 1 );line-height:calc( var(--vk-size-text) * 1.8 );width:26px;height:26px;text-align:center}ul.is-style-vk-numbered-circle-mark li ul,ul.is-style-vk-numbered-circle-mark li ol,ol.is-style-vk-numbered-circle-mark li ul,ol.is-style-vk-numbered-circle-mark li ol{counter-reset:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-circle-mark li ul li:before,ul.is-style-vk-numbered-circle-mark li ol li:before,ol.is-style-vk-numbered-circle-mark li ul li:before,ol.is-style-vk-numbered-circle-mark li ol li:before{counter-increment:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-square-mark,ol.is-style-vk-numbered-square-mark{counter-reset:number;list-style-type:none}ul.is-style-vk-numbered-square-mark li,ol.is-style-vk-numbered-square-mark li{position:relative;list-style:none;padding-left:.5em}ul.is-style-vk-numbered-square-mark li:before,ol.is-style-vk-numbered-square-mark li:before{position:absolute;left:-0.3em;counter-increment:number;content:counter(number);margin-left:-25px;background:#222;color:#fff;text-indent:0;display:inline-block;font-weight:bold;font-size:calc( var(--vk-size-text) * 1 );line-height:calc( var(--vk-size-text) * 1.8 );width:26px;height:26px;text-align:center;border-radius:2px}ul.is-style-vk-numbered-square-mark li ul,ul.is-style-vk-numbered-square-mark li ol,ol.is-style-vk-numbered-square-mark li ul,ol.is-style-vk-numbered-square-mark li ol{counter-reset:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-square-mark li ul li:before,ul.is-style-vk-numbered-square-mark li ol li:before,ol.is-style-vk-numbered-square-mark li ul li:before,ol.is-style-vk-numbered-square-mark li ol li:before{counter-increment:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-circle-mark.fa-lg li::before,ul.is-style-vk-numbered-square-mark.fa-lg li::before,ol.is-style-vk-numbered-circle-mark.fa-lg li::before,ol.is-style-vk-numbered-square-mark.fa-lg li::before{left:-0.8em}ul.is-style-vk-numbered-circle-mark.fa-2x li,ul.is-style-vk-numbered-square-mark.fa-2x li,ol.is-style-vk-numbered-circle-mark.fa-2x li,ol.is-style-vk-numbered-square-mark.fa-2x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-2x li::before,ul.is-style-vk-numbered-square-mark.fa-2x li::before,ol.is-style-vk-numbered-circle-mark.fa-2x li::before,ol.is-style-vk-numbered-square-mark.fa-2x li::before{left:-1.1em}ul.is-style-vk-numbered-circle-mark.fa-3x li,ul.is-style-vk-numbered-square-mark.fa-3x li,ol.is-style-vk-numbered-circle-mark.fa-3x li,ol.is-style-vk-numbered-square-mark.fa-3x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-3x li::before,ul.is-style-vk-numbered-square-mark.fa-3x li::before,ol.is-style-vk-numbered-circle-mark.fa-3x li::before,ol.is-style-vk-numbered-square-mark.fa-3x li::before{left:-1.4em}ul.is-style-vk-numbered-circle-mark.fa-4x li,ul.is-style-vk-numbered-square-mark.fa-4x li,ol.is-style-vk-numbered-circle-mark.fa-4x li,ol.is-style-vk-numbered-square-mark.fa-4x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-4x li::before,ul.is-style-vk-numbered-square-mark.fa-4x li::before,ol.is-style-vk-numbered-circle-mark.fa-4x li::before,ol.is-style-vk-numbered-square-mark.fa-4x li::before{left:-1.5em}ul.is-style-vk-numbered-circle-mark.fa-5x li,ul.is-style-vk-numbered-square-mark.fa-5x li,ol.is-style-vk-numbered-circle-mark.fa-5x li,ol.is-style-vk-numbered-square-mark.fa-5x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-5x li::before,ul.is-style-vk-numbered-square-mark.fa-5x li::before,ol.is-style-vk-numbered-circle-mark.fa-5x li::before,ol.is-style-vk-numbered-square-mark.fa-5x li::before{left:-1.6em}ul.is-style-vk-arrow-mark li::before,ol.is-style-vk-arrow-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-triangle-mark li::before,ol.is-style-vk-triangle-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-mark li::before,ol.is-style-vk-check-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-circle-mark li::before,ol.is-style-vk-check-circle-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-square-mark li::before,ol.is-style-vk-check-square-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-handpoint-mark li::before,ol.is-style-vk-handpoint-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-pencil-mark li::before,ol.is-style-vk-pencil-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-smile-mark li::before,ol.is-style-vk-smile-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-frown-mark li::before,ol.is-style-vk-frown-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.vk-has-pale-pink-color li::marker,ol.vk-has-pale-pink-color li::marker{color:#f78da7}ul.vk-has-pale-pink-color li::before,ol.vk-has-pale-pink-color li::before{color:#f78da7}ul.is-style-vk-numbered-circle-mark.vk-has-pale-pink-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-pale-pink-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-pale-pink-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-pale-pink-color li::before{color:#fff;background-color:#f78da7}ul.vk-has-vivid-red-color li::marker,ol.vk-has-vivid-red-color li::marker{color:#cf2e2e}ul.vk-has-vivid-red-color li::before,ol.vk-has-vivid-red-color li::before{color:#cf2e2e}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-red-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-red-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-red-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-red-color li::before{color:#fff;background-color:#cf2e2e}ul.vk-has-luminous-vivid-orange-color li::marker,ol.vk-has-luminous-vivid-orange-color li::marker{color:#ff6900}ul.vk-has-luminous-vivid-orange-color li::before,ol.vk-has-luminous-vivid-orange-color li::before{color:#ff6900}ul.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-orange-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-orange-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-orange-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-orange-color li::before{color:#fff;background-color:#ff6900}ul.vk-has-luminous-vivid-amber-color li::marker,ol.vk-has-luminous-vivid-amber-color li::marker{color:#fcb900}ul.vk-has-luminous-vivid-amber-color li::before,ol.vk-has-luminous-vivid-amber-color li::before{color:#fcb900}ul.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-amber-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-amber-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-amber-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-amber-color li::before{color:#fff;background-color:#fcb900}ul.vk-has-light-green-cyan-color li::marker,ol.vk-has-light-green-cyan-color li::marker{color:#7bdcb5}ul.vk-has-light-green-cyan-color li::before,ol.vk-has-light-green-cyan-color li::before{color:#7bdcb5}ul.is-style-vk-numbered-circle-mark.vk-has-light-green-cyan-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-light-green-cyan-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-light-green-cyan-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-light-green-cyan-color li::before{color:#fff;background-color:#7bdcb5}ul.vk-has-vivid-green-cyan-color li::marker,ol.vk-has-vivid-green-cyan-color li::marker{color:#00d084}ul.vk-has-vivid-green-cyan-color li::before,ol.vk-has-vivid-green-cyan-color li::before{color:#00d084}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-green-cyan-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-green-cyan-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-green-cyan-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-green-cyan-color li::before{color:#fff;background-color:#00d084}ul.vk-has-pale-cyan-blue-color li::marker,ol.vk-has-pale-cyan-blue-color li::marker{color:#8ed1fc}ul.vk-has-pale-cyan-blue-color li::before,ol.vk-has-pale-cyan-blue-color li::before{color:#8ed1fc}ul.is-style-vk-numbered-circle-mark.vk-has-pale-cyan-blue-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-pale-cyan-blue-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-pale-cyan-blue-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-pale-cyan-blue-color li::before{color:#fff;background-color:#8ed1fc}ul.vk-has-vivid-cyan-blue-color li::marker,ol.vk-has-vivid-cyan-blue-color li::marker{color:#0693e3}ul.vk-has-vivid-cyan-blue-color li::before,ol.vk-has-vivid-cyan-blue-color li::before{color:#0693e3}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-cyan-blue-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-cyan-blue-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-cyan-blue-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-cyan-blue-color li::before{color:#fff;background-color:#0693e3}ul.vk-has-vivid-purple-color li::marker,ol.vk-has-vivid-purple-color li::marker{color:#9b51e0}ul.vk-has-vivid-purple-color li::before,ol.vk-has-vivid-purple-color li::before{color:#9b51e0}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-purple-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-purple-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-purple-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-purple-color li::before{color:#fff;background-color:#9b51e0}ul.vk-has-very-light-gray-color li::marker,ol.vk-has-very-light-gray-color li::marker{color:#eee}ul.vk-has-very-light-gray-color li::before,ol.vk-has-very-light-gray-color li::before{color:#eee}ul.is-style-vk-numbered-circle-mark.vk-has-very-light-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-very-light-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-very-light-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-very-light-gray-color li::before{color:#fff;background-color:#eee}ul.vk-has-cyan-bluish-gray-color li::marker,ol.vk-has-cyan-bluish-gray-color li::marker{color:#abb8c3}ul.vk-has-cyan-bluish-gray-color li::before,ol.vk-has-cyan-bluish-gray-color li::before{color:#abb8c3}ul.is-style-vk-numbered-circle-mark.vk-has-cyan-bluish-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-cyan-bluish-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-cyan-bluish-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-cyan-bluish-gray-color li::before{color:#fff;background-color:#abb8c3}ul.vk-has-very-dark-gray-color li::marker,ol.vk-has-very-dark-gray-color li::marker{color:#313131}ul.vk-has-very-dark-gray-color li::before,ol.vk-has-very-dark-gray-color li::before{color:#313131}ul.is-style-vk-numbered-circle-mark.vk-has-very-dark-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-very-dark-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-very-dark-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-very-dark-gray-color li::before{color:#fff;background-color:#313131}ul.vk-has-white-color li::marker,ol.vk-has-white-color li::marker{color:#fff}ul.vk-has-white-color li::before,ol.vk-has-white-color li::before{color:#fff}ul.is-style-vk-numbered-circle-mark.vk-has-white-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-white-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-white-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-white-color li::before{color:#fff;background-color:#fff}ul.vk-has-vk-color-primary-color li::marker,ol.vk-has-vk-color-primary-color li::marker{color:var(--vk-color-primary)}ul.vk-has-vk-color-primary-color li::before,ol.vk-has-vk-color-primary-color li::before{color:var(--vk-color-primary)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-color li::before{color:#fff;background-color:var(--vk-color-primary)}ul.vk-has-vk-color-primary-dark-color li::marker,ol.vk-has-vk-color-primary-dark-color li::marker{color:var(--vk-color-primary-dark)}ul.vk-has-vk-color-primary-dark-color li::before,ol.vk-has-vk-color-primary-dark-color li::before{color:var(--vk-color-primary-dark)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-dark-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-dark-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-dark-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-dark-color li::before{color:#fff;background-color:var(--vk-color-primary-dark)}ul.vk-has-vk-color-primary-vivid-color li::marker,ol.vk-has-vk-color-primary-vivid-color li::marker{color:var(--vk-color-primary-vivid)}ul.vk-has-vk-color-primary-vivid-color li::before,ol.vk-has-vk-color-primary-vivid-color li::before{color:var(--vk-color-primary-vivid)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-vivid-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-vivid-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-vivid-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-vivid-color li::before{color:#fff;background-color:var(--vk-color-primary-vivid)}ul.vk-has-vk-color-custom-1-color li::marker,ol.vk-has-vk-color-custom-1-color li::marker{color:var(--vk-color-custom-1)}ul.vk-has-vk-color-custom-1-color li::before,ol.vk-has-vk-color-custom-1-color li::before{color:var(--vk-color-custom-1)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-1-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-1-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-1-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-1-color li::before{color:#fff;background-color:var(--vk-color-custom-1)}ul.vk-has-vk-color-custom-2-color li::marker,ol.vk-has-vk-color-custom-2-color li::marker{color:var(--vk-color-custom-2)}ul.vk-has-vk-color-custom-2-color li::before,ol.vk-has-vk-color-custom-2-color li::before{color:var(--vk-color-custom-2)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-2-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-2-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-2-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-2-color li::before{color:#fff;background-color:var(--vk-color-custom-2)}ul.vk-has-vk-color-custom-3-color li::marker,ol.vk-has-vk-color-custom-3-color li::marker{color:var(--vk-color-custom-3)}ul.vk-has-vk-color-custom-3-color li::before,ol.vk-has-vk-color-custom-3-color li::before{color:var(--vk-color-custom-3)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-3-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-3-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-3-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-3-color li::before{color:#fff;background-color:var(--vk-color-custom-3)}ul.vk-has-vk-color-custom-4-color li::marker,ol.vk-has-vk-color-custom-4-color li::marker{color:var(--vk-color-custom-4)}ul.vk-has-vk-color-custom-4-color li::before,ol.vk-has-vk-color-custom-4-color li::before{color:var(--vk-color-custom-4)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-4-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-4-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-4-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-4-color li::before{color:#fff;background-color:var(--vk-color-custom-4)}ul.vk-has-vk-color-custom-5-color li::marker,ol.vk-has-vk-color-custom-5-color li::marker{color:var(--vk-color-custom-5)}ul.vk-has-vk-color-custom-5-color li::before,ol.vk-has-vk-color-custom-5-color li::before{color:var(--vk-color-custom-5)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-5-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-5-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-5-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-5-color li::before{color:#fff;background-color:var(--vk-color-custom-5)}.wp-block-group h3:first-child,.wp-block-group h4:first-child{margin-top:0}.wp-block-group p:last-child,.wp-block-group ul:last-child,.wp-block-group ol:last-child,.wp-block-group dl:last-child,.wp-block-group table:last-child,.wp-block-group .wp-block-columns:last-child{margin-bottom:0}.wp-block-group.vk-has-pale-pink-color{border-color:#f78da7}.wp-block-group.vk-has-pale-pink-color .wp-block-group__inner-container{border-color:#f78da7}.wp-block-group.vk-has-vivid-red-color{border-color:#cf2e2e}.wp-block-group.vk-has-vivid-red-color .wp-block-group__inner-container{border-color:#cf2e2e}.wp-block-group.vk-has-luminous-vivid-orange-color{border-color:#ff6900}.wp-block-group.vk-has-luminous-vivid-orange-color .wp-block-group__inner-container{border-color:#ff6900}.wp-block-group.vk-has-luminous-vivid-amber-color{border-color:#fcb900}.wp-block-group.vk-has-luminous-vivid-amber-color .wp-block-group__inner-container{border-color:#fcb900}.wp-block-group.vk-has-light-green-cyan-color{border-color:#7bdcb5}.wp-block-group.vk-has-light-green-cyan-color .wp-block-group__inner-container{border-color:#7bdcb5}.wp-block-group.vk-has-vivid-green-cyan-color{border-color:#00d084}.wp-block-group.vk-has-vivid-green-cyan-color .wp-block-group__inner-container{border-color:#00d084}.wp-block-group.vk-has-pale-cyan-blue-color{border-color:#8ed1fc}.wp-block-group.vk-has-pale-cyan-blue-color .wp-block-group__inner-container{border-color:#8ed1fc}.wp-block-group.vk-has-vivid-cyan-blue-color{border-color:#0693e3}.wp-block-group.vk-has-vivid-cyan-blue-color .wp-block-group__inner-container{border-color:#0693e3}.wp-block-group.vk-has-vivid-purple-color{border-color:#9b51e0}.wp-block-group.vk-has-vivid-purple-color .wp-block-group__inner-container{border-color:#9b51e0}.wp-block-group.vk-has-very-light-gray-color{border-color:#eee}.wp-block-group.vk-has-very-light-gray-color .wp-block-group__inner-container{border-color:#eee}.wp-block-group.vk-has-cyan-bluish-gray-color{border-color:#abb8c3}.wp-block-group.vk-has-cyan-bluish-gray-color .wp-block-group__inner-container{border-color:#abb8c3}.wp-block-group.vk-has-very-dark-gray-color{border-color:#313131}.wp-block-group.vk-has-very-dark-gray-color .wp-block-group__inner-container{border-color:#313131}.wp-block-group.vk-has-white-color{border-color:#fff}.wp-block-group.vk-has-white-color .wp-block-group__inner-container{border-color:#fff}.wp-block-group.vk-has-vk-color-primary-color{border-color:var(--vk-color-primary)}.wp-block-group.vk-has-vk-color-primary-color .wp-block-group__inner-container{border-color:var(--vk-color-primary)}.wp-block-group.vk-has-vk-color-primary-dark-color{border-color:var(--vk-color-primary-dark)}.wp-block-group.vk-has-vk-color-primary-dark-color .wp-block-group__inner-container{border-color:var(--vk-color-primary-dark)}.wp-block-group.vk-has-vk-color-primary-vivid-color{border-color:var(--vk-color-primary-vivid)}.wp-block-group.vk-has-vk-color-primary-vivid-color .wp-block-group__inner-container{border-color:var(--vk-color-primary-vivid)}.wp-block-group.vk-has-vk-color-custom-1-color{border-color:var(--vk-color-custom-1)}.wp-block-group.vk-has-vk-color-custom-1-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-1)}.wp-block-group.vk-has-vk-color-custom-2-color{border-color:var(--vk-color-custom-2)}.wp-block-group.vk-has-vk-color-custom-2-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-2)}.wp-block-group.vk-has-vk-color-custom-3-color{border-color:var(--vk-color-custom-3)}.wp-block-group.vk-has-vk-color-custom-3-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-3)}.wp-block-group.vk-has-vk-color-custom-4-color{border-color:var(--vk-color-custom-4)}.wp-block-group.vk-has-vk-color-custom-4-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-4)}.wp-block-group.vk-has-vk-color-custom-5-color{border-color:var(--vk-color-custom-5)}.wp-block-group.vk-has-vk-color-custom-5-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-5)}.is-style-vk-group-solid{border:solid 3px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-solid h2,.is-style-vk-group-solid h3,.is-style-vk-group-solid h4,.is-style-vk-group-solid h5,.is-style-vk-group-solid h6{margin-bottom:1rem}.is-style-vk-group-solid ul,.is-style-vk-group-solid ol{margin-top:0}.is-style-vk-group-solid ul li:last-child,.is-style-vk-group-solid ol li:last-child{margin-bottom:0}.is-style-vk-group-solid-roundcorner{border:solid 3px;border-radius:8px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-solid-roundcorner h2,.is-style-vk-group-solid-roundcorner h3,.is-style-vk-group-solid-roundcorner h4,.is-style-vk-group-solid-roundcorner h5,.is-style-vk-group-solid-roundcorner h6{margin-bottom:1rem}.is-style-vk-group-solid-roundcorner ul,.is-style-vk-group-solid-roundcorner ol{margin-top:0}.is-style-vk-group-solid-roundcorner ul li:last-child,.is-style-vk-group-solid-roundcorner ol li:last-child{margin-bottom:0}.is-style-vk-group-dotted{border:dotted 1px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-dotted h2,.is-style-vk-group-dotted h3,.is-style-vk-group-dotted h4,.is-style-vk-group-dotted h5,.is-style-vk-group-dotted h6{margin-bottom:1rem}.is-style-vk-group-dotted ul,.is-style-vk-group-dotted ol{margin-top:0}.is-style-vk-group-dotted ul li:last-child,.is-style-vk-group-dotted ol li:last-child{margin-bottom:0}.is-style-vk-group-dashed{border:dashed 2px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-dashed h2,.is-style-vk-group-dashed h3,.is-style-vk-group-dashed h4,.is-style-vk-group-dashed h5,.is-style-vk-group-dashed h6{margin-bottom:1rem}.is-style-vk-group-dashed ul,.is-style-vk-group-dashed ol{margin-top:0}.is-style-vk-group-dashed ul li:last-child,.is-style-vk-group-dashed ol li:last-child{margin-bottom:0}.is-style-vk-group-double{border:double 5px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-double h2,.is-style-vk-group-double h3,.is-style-vk-group-double h4,.is-style-vk-group-double h5,.is-style-vk-group-double h6{margin-bottom:1rem}.is-style-vk-group-double ul,.is-style-vk-group-double ol{margin-top:0}.is-style-vk-group-double ul li:last-child,.is-style-vk-group-double ol li:last-child{margin-bottom:0}.is-style-vk-group-stitch{margin:1em auto;padding:.5em;border-radius:8px}.is-style-vk-group-stitch h2,.is-style-vk-group-stitch h3,.is-style-vk-group-stitch h4,.is-style-vk-group-stitch h5,.is-style-vk-group-stitch h6{margin-bottom:1rem}.is-style-vk-group-stitch ul,.is-style-vk-group-stitch ol{margin-top:0}.is-style-vk-group-stitch ul li:last-child,.is-style-vk-group-stitch ol li:last-child{margin-bottom:0}.is-style-vk-group-stitch .wp-block-group__inner-container{border:dashed 2px;border-radius:8px;padding:1.8em}.is-style-vk-group-top-bottom-border{border-top:solid 1px;border-bottom:solid 1px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem);padding-left:0;padding-right:0}.is-style-vk-group-top-bottom-border h2,.is-style-vk-group-top-bottom-border h3,.is-style-vk-group-top-bottom-border h4,.is-style-vk-group-top-bottom-border h5,.is-style-vk-group-top-bottom-border h6{margin-bottom:1rem}.is-style-vk-group-top-bottom-border ul,.is-style-vk-group-top-bottom-border ol{margin-top:0}.is-style-vk-group-top-bottom-border ul li:last-child,.is-style-vk-group-top-bottom-border ol li:last-child{margin-bottom:0}.is-style-vk-group-shadow{-webkit-box-shadow:0px 0px 5px rgba(0,0,0,.2);box-shadow:0px 0px 5px rgba(0,0,0,.2);padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-shadow h2,.is-style-vk-group-shadow h3,.is-style-vk-group-shadow h4,.is-style-vk-group-shadow h5,.is-style-vk-group-shadow h6{margin-bottom:1rem}.is-style-vk-group-shadow ul,.is-style-vk-group-shadow ol{margin-top:0}.is-style-vk-group-shadow ul li:last-child,.is-style-vk-group-shadow ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-info{background-color:#d9edf7;color:#31708f;border-radius:3px;border:1px solid #bce8f1;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-info h2,.is-style-vk-group-alert-info h3,.is-style-vk-group-alert-info h4,.is-style-vk-group-alert-info h5,.is-style-vk-group-alert-info h6{margin-bottom:1rem}.is-style-vk-group-alert-info ul,.is-style-vk-group-alert-info ol{margin-top:0}.is-style-vk-group-alert-info ul li:last-child,.is-style-vk-group-alert-info ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-success{background-color:#dff0d8;color:#3c763d;border-radius:3px;border:1px solid #d6e9c6;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-success h2,.is-style-vk-group-alert-success h3,.is-style-vk-group-alert-success h4,.is-style-vk-group-alert-success h5,.is-style-vk-group-alert-success h6{margin-bottom:1rem}.is-style-vk-group-alert-success ul,.is-style-vk-group-alert-success ol{margin-top:0}.is-style-vk-group-alert-success ul li:last-child,.is-style-vk-group-alert-success ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-warning{background-color:#fcf8e3;color:#8a6d3b;border-radius:3px;border:1px solid #faebcc;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-warning h2,.is-style-vk-group-alert-warning h3,.is-style-vk-group-alert-warning h4,.is-style-vk-group-alert-warning h5,.is-style-vk-group-alert-warning h6{margin-bottom:1rem}.is-style-vk-group-alert-warning ul,.is-style-vk-group-alert-warning ol{margin-top:0}.is-style-vk-group-alert-warning ul li:last-child,.is-style-vk-group-alert-warning ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-danger{background-color:#f2dede;color:#a94442;border-radius:3px;border:1px solid #ebccd1;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-danger h2,.is-style-vk-group-alert-danger h3,.is-style-vk-group-alert-danger h4,.is-style-vk-group-alert-danger h5,.is-style-vk-group-alert-danger h6{margin-bottom:1rem}.is-style-vk-group-alert-danger ul,.is-style-vk-group-alert-danger ol{margin-top:0}.is-style-vk-group-alert-danger ul li:last-child,.is-style-vk-group-alert-danger ol li:last-child{margin-bottom:0}.wp-block-embed-youtube iframe{width:100%}.has-text-align-right{text-align:right}.has-text-align-left{text-align:left}.has-text-align-center{text-align:center}.wp-block-social-links{-ms-flex-wrap:wrap;flex-wrap:wrap}@media(min-width: 1400px){.col-xxl-2{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;max-width:16.66667%}.col-xxl-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xxl-4{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.col-xxl-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xxl-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}
2
  .alert{padding:1em;margin:1em auto;border-radius:3px}.alert p{margin:0}.alert+.alert{margin-top:2em}.alert a{-webkit-transition:color .3s linear,opacity .3s linear;transition:color .3s linear,opacity .3s linear}.alert a:link,.alert a:visited{opacity:.8;text-decoration:underline}.alert a:hover,.alert a:visited{opacity:1;text-decoration:none}.alert-success{background-color:#dff0d8;color:#3c763d;border-color:#d6e9c6}.alert-info{background-color:#d9edf7;color:#31708f;border-color:#bce8f1}.alert-warning{background-color:#fcf8e3;color:#8a6d3b;border-color:#faebcc}.alert-danger{background-color:#f2dede;color:#a94442;border-color:#ebccd1}
3
  .vk_balloon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal;margin-bottom:2.2em}.vk_balloon figure{margin:0}.vk_balloon p{color:initial;word-break:break-all}.vk_balloon p:first-of-type{margin-top:0}.vk_balloon p:last-of-type{margin-bottom:0}.vk_balloon_icon{-ms-flex-preferred-size:80px;flex-basis:80px;-ms-flex-negative:0;flex-shrink:0;text-align:center}.vk_balloon_icon_image:not(.has-text-color){color:#ccc}.vk_balloon_icon_image{vertical-align:bottom;width:64px;height:64px;-o-object-fit:cover;object-fit:cover;display:inline-block}.vk_balloon_icon_image-type-rounded{border-radius:4px}.vk_balloon_icon_image-type-circle{border-radius:50%}.vk_balloon_icon_name{display:block;text-align:center;font-size:.7rem;margin-top:.3rem}.vk_balloon_content_outer{width:100%}.vk_balloon_content{max-width:calc(100% - 6.2em);position:relative;text-align:left}.vk_balloon-position-left .vk_balloon_content{float:left}.vk_balloon-position-right .vk_balloon_content{float:right}.vk_balloon_content.editor-rich-text__tinymce[data-is-placeholder-visible=true]{position:absolute}.vk_balloon_content{background:#f5f5f5;padding:calc(var(--vk-size-text) * 1 ) calc(var(--vk-size-text) * 1.2)}.vk_balloon_content_before,.vk_balloon_content_after{position:absolute;top:0;display:block;width:0;height:0;border-style:solid}.vk_balloon-type-speech .vk_balloon_content{border-radius:.4em}.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{top:15px}.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{z-index:1;border-right-color:inherit}.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before{z-index:2}.vk_balloon-type-think .vk_balloon_content{border-radius:1rem}.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before,.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{position:absolute;content:"";border-radius:50%;background:inherit}.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before{width:14px;height:14px}.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{width:10px;height:10px}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_icon{margin-right:calc( var(--vk-size-text) * 1.2 )}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{left:-10px;border-width:10px 12px 10px 0}.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_icon{margin-right:calc( var(--vk-size-text) * 1.2 )}.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before{left:-18px;top:7px}.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{left:-25px;top:20px}.vk_balloon-position-right{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_icon{margin-left:calc( var(--vk-size-text) * 1.2 )}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{right:-10px;border-width:10px 0 10px 12px}.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_icon{margin-left:calc( var(--vk-size-text) * 1.2 )}.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before{right:-18px;top:7px}.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{right:-25px;top:20px}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before:not(.has-text-color),.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after:not(.has-text-color){border-color:transparent #f5f5f5 transparent transparent}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{border-color:transparent currentColor transparent transparent}.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before:not(.has-text-color),.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after:not(.has-text-color){border-color:transparent}.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{border-color:transparent currentColor transparent transparent}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before:not(.has-text-color),.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after:not(.has-text-color){border-color:transparent transparent transparent #f5f5f5}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after{border-color:transparent transparent transparent currentColor}.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before:not(.has-text-color),.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after:not(.has-text-color){border-color:transparent}.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_before,.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content .vk_balloon_content_after{border-color:transparent currentColor transparent transparent}.vk_balloon_content-border-true,.vk_balloon_icon_image-border-true{border-width:var(--vk-balloon-border-width, 1px);border-style:solid}.vk_balloon_content-border-true:not(.has-text-color){color:#ccc}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content-border-true .vk_balloon_content_before{left:-10px}.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content-border-true .vk_balloon_content_after{left:var(--vk-balloon-speech-offset, -12px);border-right-color:inherit !important}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content-border-true{border-color:currentColor}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content-border-true .vk_balloon_content_before{right:-10px}.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content-border-true .vk_balloon_content_after{right:var(--vk-balloon-speech-offset, -12px);border-left-color:inherit !important}.vk_balloon-type-think .vk_balloon_content-border-true .vk_balloon_content_before,.vk_balloon-type-think .vk_balloon_content-border-true .vk_balloon_content_after{border-width:var(--vk-balloon-border-width, 1px);border-style:solid;border-color:inherit !important}.vk_balloon-animation-trembling{-webkit-animation:trembling .1s infinite;animation:trembling .1s infinite}@-webkit-keyframes trembling{0%{-webkit-transform:rotate(-0.5deg);transform:rotate(-0.5deg)}50%{-webkit-transform:rotate(0.5deg);transform:rotate(0.5deg)}}@keyframes trembling{0%{-webkit-transform:rotate(-0.5deg);transform:rotate(-0.5deg)}50%{-webkit-transform:rotate(0.5deg);transform:rotate(0.5deg)}}.vk_balloon-animation-trembling-x{-webkit-animation:trembling-x .1s infinite;animation:trembling-x .1s infinite}@-webkit-keyframes trembling-x{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}50%{-webkit-transform:scale(0.99, 0.96);transform:scale(0.99, 0.96)}}@keyframes trembling-x{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}50%{-webkit-transform:scale(0.99, 0.96);transform:scale(0.99, 0.96)}}.vk_balloon-animation-pounding{-webkit-animation:pounding 1.5s infinite;animation:pounding 1.5s infinite}@-webkit-keyframes pounding{0%{-webkit-transform:scale(1.05);transform:scale(1.05)}5%{-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(1.05);transform:scale(1.05)}}@keyframes pounding{0%{-webkit-transform:scale(1.05);transform:scale(1.05)}5%{-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(1.05);transform:scale(1.05)}}.vk_balloon-animation-shaking{-webkit-animation:shaking .4s infinite;animation:shaking .4s infinite}@-webkit-keyframes shaking{0%{-webkit-transform:translate(1px, 1px);transform:translate(1px, 1px)}25%{-webkit-transform:translate(1px, -1px);transform:translate(1px, -1px)}50%{-webkit-transform:translate(-1px, -1px);transform:translate(-1px, -1px)}75%{-webkit-transform:translate(-1px, 1px);transform:translate(-1px, 1px)}100%{-webkit-transform:translate(1px, 1px);transform:translate(1px, 1px)}}@keyframes shaking{0%{-webkit-transform:translate(1px, 1px);transform:translate(1px, 1px)}25%{-webkit-transform:translate(1px, -1px);transform:translate(1px, -1px)}50%{-webkit-transform:translate(-1px, -1px);transform:translate(-1px, -1px)}75%{-webkit-transform:translate(-1px, 1px);transform:translate(-1px, 1px)}100%{-webkit-transform:translate(1px, 1px);transform:translate(1px, 1px)}}.vk_balloon.animation-vibration .vk_balloon_content{display:inline-block;-webkit-animation:vibration .1s infinite;animation:vibration .1s infinite}@-webkit-keyframes vibration{0%{-webkit-transform:translate(0px, 0px) rotateZ(0deg);transform:translate(0px, 0px) rotateZ(0deg)}25%{-webkit-transform:translate(2px, 2px) rotateZ(1deg);transform:translate(2px, 2px) rotateZ(1deg)}50%{-webkit-transform:translate(0px, 2px) rotateZ(0deg);transform:translate(0px, 2px) rotateZ(0deg)}75%{-webkit-transform:translate(2px, 0px) rotateZ(-1deg);transform:translate(2px, 0px) rotateZ(-1deg)}100%{-webkit-transform:translate(0px, 0px) rotateZ(0deg);transform:translate(0px, 0px) rotateZ(0deg)}}@keyframes vibration{0%{-webkit-transform:translate(0px, 0px) rotateZ(0deg);transform:translate(0px, 0px) rotateZ(0deg)}25%{-webkit-transform:translate(2px, 2px) rotateZ(1deg);transform:translate(2px, 2px) rotateZ(1deg)}50%{-webkit-transform:translate(0px, 2px) rotateZ(0deg);transform:translate(0px, 2px) rotateZ(0deg)}75%{-webkit-transform:translate(2px, 0px) rotateZ(-1deg);transform:translate(2px, 0px) rotateZ(-1deg)}100%{-webkit-transform:translate(0px, 0px) rotateZ(0deg);transform:translate(0px, 0px) rotateZ(0deg)}}.icon-image-list-note:hover{cursor:pointer}@media only screen and (max-width: 480px){.vk_balloon_content{max-width:calc(100% - 2em);font-size:.9em;padding:1em}.vk_balloon-type-think .vk_balloon_content::after{border:5px solid transparent}.vk_balloon{-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal}.vk_balloon.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_icon{margin-right:1.5rem}.vk_balloon.vk_balloon-position-left.vk_balloon-type-speech .vk_balloon_content{display:inline-block}.vk_balloon.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_icon{margin-right:2rem}.vk_balloon.vk_balloon-position-left.vk_balloon-type-think .vk_balloon_content{display:inline-block}.vk_balloon.vk_balloon-position-right{text-align:right}.vk_balloon.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_icon{margin-left:1.5rem;margin-right:0}.vk_balloon.vk_balloon-position-right.vk_balloon-type-speech .vk_balloon_content{display:inline-block}.vk_balloon.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_icon{margin-left:2rem;margin-right:0}.vk_balloon.vk_balloon-position-right.vk_balloon-type-think .vk_balloon_content{display:inline-block}.vk_balloon_icon{max-width:64px}}
4
  :root{--vk-color-border-red: #dc3545;--vk-color-background-red: #dc3545;--vk-color-border-orange: #ffa536;--vk-color-background-orange: #ffa536;--vk-color-border-blue: #4267b2;--vk-color-background-blue: #4267b2;--vk-color-border-green: #28a745;--vk-color-background-green: #28a745;--vk-color-border-black: #222;--vk-color-background-black: #222}.vk_borderBox-color-red{border-color:var(--vk-color-border-red);background-color:var(--vk-color-background-red)}.vk_borderBox-color-orange{border-color:var(--vk-color-border-orange);background-color:var(--vk-color-background-orange)}.vk_borderBox-color-blue{border-color:var(--vk-color-border-blue);background-color:var(--vk-color-background-blue)}.vk_borderBox-color-green{border-color:var(--vk-color-border-green);background-color:var(--vk-color-background-green)}.vk_borderBox-color-black{border-color:var(--vk-color-border-black);background-color:var(--vk-color-background-black)}.vk_borderBox-background-transparent .vk_borderBox_body{background-color:transparent}.vk_borderBox-background-transparent.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox{background-color:transparent}.vk_borderBox-background-transparent.is-style-vk_borderBox-style-solid-kado-tit-onborder>.vk_borderBox_title_container,.vk_borderBox-background-transparent.is-style-vk_borderBox-style-solid-kado-tit-inner>.vk_borderBox_title_container,.vk_borderBox-background-transparent.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container{background-color:transparent}.vk_borderBox-background-white .vk_borderBox_body{background-color:#fff}.vk_borderBox-background-white.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox{background-color:#fff}.vk_borderBox-background-white.is-style-vk_borderBox-style-solid-kado-tit-onborder>.vk_borderBox_title_container,.vk_borderBox-background-white.is-style-vk_borderBox-style-solid-kado-tit-inner>.vk_borderBox_title_container,.vk_borderBox-background-white.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container{background-color:#fff}.vk_borderBox{margin:0 auto 2em;position:relative}.vk_borderBox .vk_borderBox_title_container{margin:0;font-size:1em;line-height:1.4;padding:.5em 1.5em .4em;font-weight:bold}.vk_borderBox .vk_borderBox_title_container i:first-child,.vk_borderBox .vk_borderBox_title_container .svg-inline--fa{margin-right:5px}.vk_borderBox .vk_borderBox_title_container .vk_borderBox_title{display:inline;font-weight:bold;font-size:1em;color:inherit;background:none;padding:0;border:none;outline:none}.vk_borderBox .vk_borderBox_title_container .vk_borderBox_title::before{content:none}.vk_borderBox .vk_borderBox_title_container .vk_borderBox_title::after{content:none}.vk_borderBox .vk_borderBox_body{padding:1.5em;border-width:2px;border-style:solid}@media(min-width: 992px){.vk_borderBox .vk_borderBox_body{padding:1.5em 2em 1.5em}}.vk_borderBox .vk_borderBox_body>*:not(.has-text-color){color:initial}.vk_borderBox .vk_borderBox_body>*:first-child{margin-top:0}.vk_borderBox .vk_borderBox_body>*:last-child{margin-bottom:0}.vk_borderBox:not([class*=vk_borderBox-color]).is-style-vk_borderBox-style-solid-kado-tit-tab>.vk_borderBox_title_container:not(.has-background),.vk_borderBox:not([class*=vk_borderBox-color]).is-style-vk_borderBox-style-solid-round-tit-tab>.vk_borderBox_title_container:not(.has-background),.vk_borderBox:not([class*=vk_borderBox-color]).is-style-vk_borderBox-style-solid-kado-tit-banner>.vk_borderBox_title_container:not(.has-background){background-color:#337ab7}.vk_borderBox:not([class*=vk_borderBox-color]):not(.has-text-color){color:#337ab7}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-tab>.vk_borderBox_title_container,.vk_borderBox.is-style-vk_borderBox-style-solid-round-tit-tab>.vk_borderBox_title_container{display:inline-block}.vk_borderBox.is-style-vk_borderBox-style-solid-round-tit-tab>.vk_borderBox_title_container{border-radius:8px 8px 0 0}.vk_borderBox.is-style-vk_borderBox-style-solid-round-tit-tab>.vk_borderBox_body{border-radius:0 8px 8px 8px}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-inner,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-onborder,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature{background-color:transparent;border-width:2px;border-style:solid}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-inner>.vk_borderBox_title_container,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-onborder>.vk_borderBox_title_container,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container{padding:1.5em 1.5em 1em}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-inner>.vk_borderBox_body,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-onborder>.vk_borderBox_body,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_body{border:none;padding-top:0}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container::after,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container::after,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container::after,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container::after,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container::after{content:"";position:absolute;top:-32%;left:1.5em;padding:1.4em;border-radius:50%;border:solid 2px #fff}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.svg-inline--fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.fab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.fas,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.far,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.fal,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container>.fad,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.svg-inline--fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.fab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.fas,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.far,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.fal,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container>.fad,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.svg-inline--fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.fab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.fas,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.far,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.fal,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container>.fad,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.svg-inline--fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.fab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.fas,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.far,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.fal,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container>.fad,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.svg-inline--fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.fa,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.fab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.fas,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.far,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.fal,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container>.fad{position:absolute;font-size:1.3em;margin-right:0;z-index:100;top:0%;left:2.3em;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);color:#fff}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container{position:relative;padding-top:2.2em}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container>.vk_borderBox_icon_border{position:absolute;margin-right:0;top:0;left:3em;padding:1.4em;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);border-radius:50%;border:solid 2px #fff}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container>.vk_borderBox_icon_border>i{position:absolute;font-size:1.3em;top:50%;left:50%;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);color:#fff}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-iconFeature>.vk_borderBox_title_container>.vk_borderBox_icon_border:not(.has-background){background-color:#337ab7}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-onborder>.vk_borderBox_title_container{position:relative;top:-1.2em;left:1em;z-index:1;display:inline-block;padding:.5em .5em;background:#fff}.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-tab,.vk_borderBox.is-style-vk_borderBox-style-solid-round-tit-tab,.vk_borderBox.is-style-vk_borderBox-style-solid-kado-tit-banner{border:none;background-color:transparent}.is-style-vk_borderBox-style-solid-kado-tit-tab>.vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner>.vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab>.vk_borderBox_title_container{color:#fff}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-red .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-red .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-red .vk_borderBox_title_container{background-color:var(--vk-color-background-red)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-red .vk_borderBox_body,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-red .vk_borderBox_body,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-red .vk_borderBox_body{border-color:var(--vk-color-border-red)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-orange .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-orange .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-orange .vk_borderBox_title_container{background-color:var(--vk-color-background-orange)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-orange .vk_borderBox_body,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-orange .vk_borderBox_body,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-orange .vk_borderBox_body{border-color:var(--vk-color-border-orange)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-blue .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-blue .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-blue .vk_borderBox_title_container{background-color:var(--vk-color-background-blue)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-blue .vk_borderBox_body,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-blue .vk_borderBox_body,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-blue .vk_borderBox_body{border-color:var(--vk-color-border-blue)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-green .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-green .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-green .vk_borderBox_title_container{background-color:var(--vk-color-background-green)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-green .vk_borderBox_body,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-green .vk_borderBox_body,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-green .vk_borderBox_body{border-color:var(--vk-color-border-green)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-black .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-black .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-black .vk_borderBox_title_container{background-color:var(--vk-color-background-black)}.is-style-vk_borderBox-style-solid-kado-tit-tab.vk_borderBox-color-black .vk_borderBox_body,.is-style-vk_borderBox-style-solid-kado-tit-banner.vk_borderBox-color-black .vk_borderBox_body,.is-style-vk_borderBox-style-solid-round-tit-tab.vk_borderBox-color-black .vk_borderBox_body{border-color:var(--vk-color-border-black)}.is-style-vk_borderBox-style-solid-kado-tit-inner.vk_borderBox-color-red .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox-color-red .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container{color:var(--vk-color-background-red)}.is-style-vk_borderBox-style-solid-kado-tit-inner.vk_borderBox-color-orange .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox-color-orange .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container{color:var(--vk-color-background-orange)}.is-style-vk_borderBox-style-solid-kado-tit-inner.vk_borderBox-color-blue .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox-color-blue .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container{color:var(--vk-color-background-blue)}.is-style-vk_borderBox-style-solid-kado-tit-inner.vk_borderBox-color-green .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox-color-green .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container{color:var(--vk-color-background-green)}.is-style-vk_borderBox-style-solid-kado-tit-inner.vk_borderBox-color-black .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox-color-black .vk_borderBox_title_container,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container{color:var(--vk-color-background-black)}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container .svg-inline--fa,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container .fas{color:#fff}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-red .vk_borderBox_title_container::after{background-color:var(--vk-color-background-red)}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container .svg-inline--fa,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container .fas{background-color:var(--vk-color-background-orange);color:#fff}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-orange .vk_borderBox_title_container::after{background-color:var(--vk-color-background-orange)}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container .svg-inline--fa,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container .fas{background-color:var(--vk-color-background-blue);color:#fff}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-blue .vk_borderBox_title_container::after{background-color:var(--vk-color-background-blue)}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container .svg-inline--fa,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container .fas{background-color:var(--vk-color-background-green);color:#fff}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-green .vk_borderBox_title_container::after{background-color:var(--vk-color-background-green)}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container .svg-inline--fa,.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container .fas{background-color:var(--vk-color-background-black);color:#fff}.is-style-vk_borderBox-style-solid-kado-iconFeature.vk_borderBox-color-black .vk_borderBox_title_container::after{background-color:var(--vk-color-background-black)}.vk_borderBox_body-align-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}.vk_borderBox_body-align-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vk_borderBox_body-align-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:right;-ms-flex-pack:right;justify-content:right}
16
  .vk_responsive-br{display:none}@media(max-width: 575.98px){.vk_responsive-br-xs{display:block}}@media(min-width: 576px)and (max-width: 767.98px){.vk_responsive-br-sm{display:block}}@media(min-width: 768px)and (max-width: 991.98px){.vk_responsive-br-md{display:block}}@media(min-width: 992px)and (max-width: 1199.98px){.vk_responsive-br-lg{display:block}}@media(min-width: 1200px)and (max-width: 1399.98px){.vk_responsive-br-xl{display:block}}@media(min-width: 1400px){.vk_responsive-br-xxl{display:block}}
17
  :root{--vk-heading-has-background-padding: 0.6em 0.7em 0.5em}.is-style-vk-heading h3.is-style-vk-heading:after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading h3.is-style-vk-heading:after{border-bottom:none !important}.is-style-vk-heading-plain:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-background_fill_lightgray:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-double_black:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-double_bottomborder_black:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-solid_black:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-solid_bottomborder_black:not(.has-text-align-center,.has-text-align-right),.is-style-vk-heading-dotted_bottomborder_black:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-plain:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-background_fill_lightgray:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_black:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_bottomborder_black:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_black:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_bottomborder_black:not(.has-text-align-center,.has-text-align-right),.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-dotted_bottomborder_black:not(.has-text-align-center,.has-text-align-right){text-align:left}.is-style-vk-heading-plain,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-plain{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:unset;display:block}.is-style-vk-heading-plain::before,.is-style-vk-heading-plain::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-plain::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-plain::after{content:none}.is-style-vk-heading-plain[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-plain[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-background_fill_lightgray,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-background_fill_lightgray{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;border:none;background-color:#efefef;padding:.6em .7em .5em;margin-bottom:1.2em;border-radius:4px}.is-style-vk-heading-background_fill_lightgray::before,.is-style-vk-heading-background_fill_lightgray::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-background_fill_lightgray::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-background_fill_lightgray::after{content:none}.is-style-vk-heading-background_fill_lightgray[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-background_fill_lightgray[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-double_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:.6em 0 .5em;margin-bottom:1.2em;border-top:double 3px #333;border-bottom:double 3px #333}.is-style-vk-heading-double_black::before,.is-style-vk-heading-double_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_black::after{content:none}.is-style-vk-heading-double_black[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_black[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-double_bottomborder_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_bottomborder_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:.6em 0 .5em;margin-bottom:1.2em;border-bottom:double 3px #333}.is-style-vk-heading-double_bottomborder_black::before,.is-style-vk-heading-double_bottomborder_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_bottomborder_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_bottomborder_black::after{content:none}.is-style-vk-heading-double_bottomborder_black[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-double_bottomborder_black[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-solid_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:.6em 0 .5em;margin-bottom:1.2em;border-top:solid 1px #333;border-bottom:solid 1px #333}.is-style-vk-heading-solid_black::before,.is-style-vk-heading-solid_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_black::after{content:none}.is-style-vk-heading-solid_black[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_black[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-solid_bottomborder_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_bottomborder_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:.6em 0 .5em;margin-bottom:1.2em;border-bottom:solid 1px #333}.is-style-vk-heading-solid_bottomborder_black::before,.is-style-vk-heading-solid_bottomborder_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_bottomborder_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_bottomborder_black::after{content:none}.is-style-vk-heading-solid_bottomborder_black[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-solid_bottomborder_black[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-dotted_bottomborder_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-dotted_bottomborder_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;padding:.6em 0 .5em;margin-bottom:1.2em;border-bottom:1px dotted #111}.is-style-vk-heading-dotted_bottomborder_black::before,.is-style-vk-heading-dotted_bottomborder_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-dotted_bottomborder_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-dotted_bottomborder_black::after{content:none}.is-style-vk-heading-dotted_bottomborder_black[class*=has-background],.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-dotted_bottomborder_black[class*=has-background]{padding:var(--vk-heading-has-background-padding)}.is-style-vk-heading-both_ends,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-both_ends{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;background-color:transparent;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;margin-bottom:1.2em;padding:0}.is-style-vk-heading-both_ends::before,.is-style-vk-heading-both_ends::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-both_ends::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-both_ends::after{content:"";-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-bottom:1px solid #333;position:unset;width:unset;border-left:unset;border-right:unset;border-top:none;background:unset}.is-style-vk-heading-both_ends::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-both_ends::before{margin-right:1em;top:unset}.is-style-vk-heading-both_ends::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-both_ends::after{margin-left:1em;bottom:unset}.is-style-vk-heading-brackets_black,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-brackets_black{position:relative;outline:unset;outline-offset:unset;-webkit-box-shadow:unset;box-shadow:unset;border-radius:unset;overflow:unset;color:inherit;border:none;background-color:transparent !important;padding:.7em;margin-bottom:1.2em;text-align:center;border-bottom:unset !important}.is-style-vk-heading-brackets_black::before,.is-style-vk-heading-brackets_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-brackets_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-brackets_black::after{content:"";position:absolute;top:0;width:12px;height:100%;display:inline-block;margin-left:0;border-top:solid 1px #333;border-bottom:solid 1px #333;background:unset}.is-style-vk-heading-brackets_black::before,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-brackets_black::before{border-left:solid 1px #333;left:0}.is-style-vk-heading-brackets_black::after,.editor-styles-wrapper .block-editor-block-list__layout .is-style-vk-heading-brackets_black::after{border-right:solid 1px #333 !important;right:0;left:auto}
18
  .wp-block-image figcaption{text-align:center;font-size:calc(var(--vk-size-text)* 0.75 )}figure.wp-block-image.is-style-vk-image-rounded img{border-radius:.5rem}figure.wp-block-image.is-style-vk-image-border img{border:1px solid #e5e5e5}figure.wp-block-image.is-style-vk-image-photoFrame{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}figure.wp-block-image.is-style-vk-image-photoFrame.alignleft{margin:0 1em .5em 0}figure.wp-block-image.is-style-vk-image-photoFrame.alignright{margin:0 0 .5em 1em}figure.wp-block-image.is-style-vk-image-photoFrame.alignwide,figure.wp-block-image.is-style-vk-image-photoFrame.alignfull{width:auto}figure.wp-block-image.is-style-vk-image-photoFrame figcaption{display:block;margin:8px 0 0}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;transform:rotate(-2deg);-moz-transform:rotate(-2deg);-webkit-transform:rotate(-2deg)}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft{margin:0 1em .5em 0}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright{margin:0 0 .5em 1em}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignwide,figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignfull{width:auto}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-right figcaption{display:block;margin:8px 0 0}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;transform:rotate(2deg);-moz-transform:rotate(2deg);-webkit-transform:rotate(2deg)}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft{margin:0 1em .5em 0}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright{margin:0 0 .5em 1em}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignwide,figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignfull{width:auto}figure.wp-block-image.is-style-vk-image-photoFrame-tilt-left figcaption{display:block;margin:8px 0 0}figure.wp-block-image.is-style-vk-image-shadow{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.15);box-shadow:0 5px 10px rgba(0,0,0,.15);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}figure.wp-block-image.is-style-vk-image-shadow figcaption{display:block}figure.wp-block-image.is-style-vk-image-shadow.alignwide{width:unset}figure.wp-block-image.is-style-vk-image-wave01 img{-webkit-mask-image:var(--vk_image-mask-wave01);mask-image:var(--vk_image-mask-wave01);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}figure.wp-block-image.is-style-vk-image-wave02 img{-webkit-mask-image:var(--vk_image-mask-wave02);mask-image:var(--vk_image-mask-wave02);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}figure.wp-block-image.is-style-vk-image-wave03 img{-webkit-mask-image:var(--vk_image-mask-wave03);mask-image:var(--vk_image-mask-wave03);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}figure.wp-block-image.is-style-vk-image-wave04 img{-webkit-mask-image:var(--vk_image-mask-wave04);mask-image:var(--vk_image-mask-wave04);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}.wp-block-image.is-style-vk-image-rounded figure.alignleft img,.wp-block-image.is-style-vk-image-rounded figure.alignright img,.wp-block-image.is-style-vk-image-rounded figure.aligncenter img{border-radius:.5rem}.wp-block-image.is-style-vk-image-border figure.alignleft img,.wp-block-image.is-style-vk-image-border figure.alignright img,.wp-block-image.is-style-vk-image-border figure.aligncenter img{border:1px solid #e5e5e5}.wp-block-image.is-style-vk-image-photoFrame figure.alignleft,.wp-block-image.is-style-vk-image-photoFrame figure.alignright,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.wp-block-image.is-style-vk-image-photoFrame figure.alignleft.alignleft,.wp-block-image.is-style-vk-image-photoFrame figure.alignright.alignleft,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter.alignleft{margin:0 1em .5em 0}.wp-block-image.is-style-vk-image-photoFrame figure.alignleft.alignright,.wp-block-image.is-style-vk-image-photoFrame figure.alignright.alignright,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter.alignright{margin:0 0 .5em 1em}.wp-block-image.is-style-vk-image-photoFrame figure.alignleft.alignwide,.wp-block-image.is-style-vk-image-photoFrame figure.alignleft.alignfull,.wp-block-image.is-style-vk-image-photoFrame figure.alignright.alignwide,.wp-block-image.is-style-vk-image-photoFrame figure.alignright.alignfull,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter.alignwide,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter.alignfull{width:auto}.wp-block-image.is-style-vk-image-photoFrame figure.alignleft figcaption,.wp-block-image.is-style-vk-image-photoFrame figure.alignright figcaption,.wp-block-image.is-style-vk-image-photoFrame figure.aligncenter figcaption{display:block;margin:8px 0 0}.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;transform:rotate(-2deg);-moz-transform:rotate(-2deg);-webkit-transform:rotate(-2deg)}.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter.alignleft{margin:0 1em .5em 0}.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter.alignright{margin:0 0 .5em 1em}.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter.alignfull{width:auto}.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignleft figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.alignright figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-right.aligncenter figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignleft figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.alignright figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-right figure.aligncenter figcaption{display:block;margin:8px 0 0}.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter{background-color:#fff;padding:10px;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.2);box-shadow:1px 1px 4px rgba(0,0,0,.2);zoom:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;transform:rotate(2deg);-moz-transform:rotate(2deg);-webkit-transform:rotate(2deg)}.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright.alignleft,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter.alignleft{margin:0 1em .5em 0}.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright.alignright,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter.alignright{margin:0 0 .5em 1em}.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright.alignfull,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter.alignwide,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter.alignfull{width:auto}.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignleft figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.alignright figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-left.aligncenter figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignleft figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.alignright figcaption,.wp-block-image.is-style-vk-image-photoFrame-tilt-left figure.aligncenter figcaption{display:block;margin:8px 0 0}.wp-block-image.is-style-vk-image-shadow figure.alignleft,.wp-block-image.is-style-vk-image-shadow figure.alignright,.wp-block-image.is-style-vk-image-shadow figure.aligncenter{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.15);box-shadow:0 5px 10px rgba(0,0,0,.15);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.wp-block-image.is-style-vk-image-shadow figure.alignleft figcaption,.wp-block-image.is-style-vk-image-shadow figure.alignright figcaption,.wp-block-image.is-style-vk-image-shadow figure.aligncenter figcaption{display:block}.wp-block-image.is-style-vk-image-shadow figure.alignleft.alignwide,.wp-block-image.is-style-vk-image-shadow figure.alignright.alignwide,.wp-block-image.is-style-vk-image-shadow figure.aligncenter.alignwide{width:unset}.wp-block-image.is-style-vk-image-wave01 figure.alignleft img,.wp-block-image.is-style-vk-image-wave01 figure.alignright img,.wp-block-image.is-style-vk-image-wave01 figure.aligncenter img{-webkit-mask-image:var(--vk_image-mask-wave01);mask-image:var(--vk_image-mask-wave01);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}.wp-block-image.is-style-vk-image-wave02 figure.alignleft img,.wp-block-image.is-style-vk-image-wave02 figure.alignright img,.wp-block-image.is-style-vk-image-wave02 figure.aligncenter img{-webkit-mask-image:var(--vk_image-mask-wave02);mask-image:var(--vk_image-mask-wave02);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}.wp-block-image.is-style-vk-image-wave03 figure.alignleft img,.wp-block-image.is-style-vk-image-wave03 figure.alignright img,.wp-block-image.is-style-vk-image-wave03 figure.aligncenter img{-webkit-mask-image:var(--vk_image-mask-wave03);mask-image:var(--vk_image-mask-wave03);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}.wp-block-image.is-style-vk-image-wave04 figure.alignleft img,.wp-block-image.is-style-vk-image-wave04 figure.alignright img,.wp-block-image.is-style-vk-image-wave04 figure.aligncenter img{-webkit-mask-image:var(--vk_image-mask-wave04);mask-image:var(--vk_image-mask-wave04);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:contain;mask-size:contain}
19
+ .wp-block-table thead th,.wp-block-table tfoot td{font-weight:bold}.wp-block-table.is-style-vk-table-border-top-bottom table,.wp-block-table.is-style-vk-table-border-top-bottom th,.wp-block-table.is-style-vk-table-border-top-bottom td{border-left:none;border-right:none}.wp-block-table.is-style-vk-table-border-top-bottom th,.wp-block-table.is-style-vk-table-border-top-bottom td{border-top:none;border-bottom:1px solid var(--vk-color-border-hr)}.wp-block-table.is-style-vk-table-border th,.wp-block-table.is-style-vk-table-border td{border:1px solid var(--vk-color-border-hr)}.wp-block-table.is-style-vk-table-border-stripes tbody tr:nth-child(2n+1){background-color:#f0f0f0}.wp-block-table.is-style-vk-table-border-stripes th,.wp-block-table.is-style-vk-table-border-stripes td{border:1px solid var(--vk-color-border-hr)}.editor-styles-wrapper .wp-block-table.is-style-regular th,.editor-styles-wrapper .wp-block-table.is-style-regular td{border-color:var(--vk-color-border-hr)}
build/extensions/core/table/style.css CHANGED
@@ -1 +1 @@
1
- .wp-block-table thead th,.wp-block-table tfoot td{font-weight:bold}.wp-block-table.is-style-vk-table-border-top-bottom th,.wp-block-table.is-style-vk-table-border-top-bottom td{border-top:none;border-left:none;border-right:none;border-bottom:1px solid var(--vk-color-border-hr)}.wp-block-table.is-style-vk-table-border th,.wp-block-table.is-style-vk-table-border td{border:1px solid var(--vk-color-border-hr)}.wp-block-table.is-style-vk-table-border-stripes tbody tr:nth-child(2n+1){background-color:#f0f0f0}.wp-block-table.is-style-vk-table-border-stripes th,.wp-block-table.is-style-vk-table-border-stripes td{border:1px solid var(--vk-color-border-hr)}.editor-styles-wrapper .wp-block-table.is-style-regular th,.editor-styles-wrapper .wp-block-table.is-style-regular td{border-color:var(--vk-color-border-hr)}
1
+ .wp-block-table thead th,.wp-block-table tfoot td{font-weight:bold}.wp-block-table.is-style-vk-table-border-top-bottom table,.wp-block-table.is-style-vk-table-border-top-bottom th,.wp-block-table.is-style-vk-table-border-top-bottom td{border-left:none;border-right:none}.wp-block-table.is-style-vk-table-border-top-bottom th,.wp-block-table.is-style-vk-table-border-top-bottom td{border-top:none;border-bottom:1px solid var(--vk-color-border-hr)}.wp-block-table.is-style-vk-table-border th,.wp-block-table.is-style-vk-table-border td{border:1px solid var(--vk-color-border-hr)}.wp-block-table.is-style-vk-table-border-stripes tbody tr:nth-child(2n+1){background-color:#f0f0f0}.wp-block-table.is-style-vk-table-border-stripes th,.wp-block-table.is-style-vk-table-border-stripes td{border:1px solid var(--vk-color-border-hr)}.editor-styles-wrapper .wp-block-table.is-style-regular th,.editor-styles-wrapper .wp-block-table.is-style-regular td{border-color:var(--vk-color-border-hr)}
build/utils/common.css CHANGED
@@ -1 +1 @@
1
- :root{--vk-margin-elem:2rem}.text-nowrap{white-space:nowrap}:root{--vk-margin-sm: 1.5rem;--vk-margin-md: 2.4rem;--vk-margin-lg: 4rem}.vk_block-margin-0--margin-top{margin-top:0 !important}.vk_block-margin-0--margin-bottom{margin-bottom:0 !important}.vk_block-margin-0--margin-bottom>table{margin-bottom:0}.vk_block-margin-sm{margin-top:var(--vk-margin-sm)}.vk_block-margin-sm--margin-top{margin-top:var(--vk-margin-sm) !important}.vk_block-margin-sm--margin-bottom{margin-bottom:var(--vk-margin-sm) !important}.vk_block-margin-sm--margin-bottom>table{margin-bottom:var(--vk-margin-sm)}.vk_block-margin-sm--height{height:var(--vk-margin-sm)}.vk_block-margin-md{margin-top:var(--vk-margin-md)}.vk_block-margin-md--margin-top{margin-top:var(--vk-margin-md) !important}.vk_block-margin-md--margin-bottom{margin-bottom:var(--vk-margin-md) !important}.vk_block-margin-md--margin-bottom>table{margin-bottom:var(--vk-margin-md)}.vk_block-margin-md--height{height:var(--vk-margin-md)}.vk_block-margin-lg{margin-top:var(--vk-margin-lg)}.vk_block-margin-lg--margin-top{margin-top:var(--vk-margin-lg) !important}.vk_block-margin-lg--margin-bottom{margin-bottom:var(--vk-margin-lg) !important}.vk_block-margin-lg--margin-bottom>table{margin-bottom:var(--vk-margin-lg)}.vk_block-margin-lg--height{height:var(--vk-margin-lg)}ul.is-style-vk-arrow-mark,ul.is-style-vk-triangle-mark,ul.is-style-vk-check-mark,ul.is-style-vk-check-circle-mark,ul.is-style-vk-check-square-mark,ul.is-style-vk-handpoint-mark,ul.is-style-vk-pencil-mark,ul.is-style-vk-smile-mark,ul.is-style-vk-frown-mark,ul.is-style-vk-numbered-circle-mark,ul.is-style-vk-numbered-square-mark,ol.is-style-vk-arrow-mark,ol.is-style-vk-triangle-mark,ol.is-style-vk-check-mark,ol.is-style-vk-check-circle-mark,ol.is-style-vk-check-square-mark,ol.is-style-vk-handpoint-mark,ol.is-style-vk-pencil-mark,ol.is-style-vk-smile-mark,ol.is-style-vk-frown-mark,ol.is-style-vk-numbered-circle-mark,ol.is-style-vk-numbered-square-mark{-webkit-padding-start:2em;padding-inline-start:2em}ul.is-style-vk-arrow-mark li,ul.is-style-vk-triangle-mark li,ul.is-style-vk-check-mark li,ul.is-style-vk-check-circle-mark li,ul.is-style-vk-check-square-mark li,ul.is-style-vk-handpoint-mark li,ul.is-style-vk-pencil-mark li,ul.is-style-vk-smile-mark li,ul.is-style-vk-frown-mark li,ul.is-style-vk-numbered-circle-mark li,ul.is-style-vk-numbered-square-mark li,ol.is-style-vk-arrow-mark li,ol.is-style-vk-triangle-mark li,ol.is-style-vk-check-mark li,ol.is-style-vk-check-circle-mark li,ol.is-style-vk-check-square-mark li,ol.is-style-vk-handpoint-mark li,ol.is-style-vk-pencil-mark li,ol.is-style-vk-smile-mark li,ol.is-style-vk-frown-mark li,ol.is-style-vk-numbered-circle-mark li,ol.is-style-vk-numbered-square-mark li{list-style:none;position:relative;margin-top:0;margin-left:0;margin:calc( var(--vk-size-text) * 0.8 ) 0;line-height:calc( var(--vk-size-text) * 1.65 )}ul.is-style-vk-numbered-circle-mark,ol.is-style-vk-numbered-circle-mark{counter-reset:number;list-style-type:none}ul.is-style-vk-numbered-circle-mark li,ol.is-style-vk-numbered-circle-mark li{position:relative;list-style:none;padding-left:.5em}ul.is-style-vk-numbered-circle-mark li:before,ol.is-style-vk-numbered-circle-mark li:before{position:absolute;left:0;counter-increment:number;content:counter(number);margin-left:-1.8em;background:#222;color:#fff;text-indent:0;display:inline-block;font-weight:bold;border-radius:50%;font-size:calc( var(--vk-size-text) * 1 );line-height:calc( var(--vk-size-text) * 1.8 );width:26px;height:26px;text-align:center}ul.is-style-vk-numbered-circle-mark li ul,ul.is-style-vk-numbered-circle-mark li ol,ol.is-style-vk-numbered-circle-mark li ul,ol.is-style-vk-numbered-circle-mark li ol{counter-reset:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-circle-mark li ul li:before,ul.is-style-vk-numbered-circle-mark li ol li:before,ol.is-style-vk-numbered-circle-mark li ul li:before,ol.is-style-vk-numbered-circle-mark li ol li:before{counter-increment:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-square-mark,ol.is-style-vk-numbered-square-mark{counter-reset:number;list-style-type:none}ul.is-style-vk-numbered-square-mark li,ol.is-style-vk-numbered-square-mark li{position:relative;list-style:none;padding-left:.5em}ul.is-style-vk-numbered-square-mark li:before,ol.is-style-vk-numbered-square-mark li:before{position:absolute;left:-0.3em;counter-increment:number;content:counter(number);margin-left:-25px;background:#222;color:#fff;text-indent:0;display:inline-block;font-weight:bold;font-size:calc( var(--vk-size-text) * 1 );line-height:calc( var(--vk-size-text) * 1.8 );width:26px;height:26px;text-align:center;border-radius:2px}ul.is-style-vk-numbered-square-mark li ul,ul.is-style-vk-numbered-square-mark li ol,ol.is-style-vk-numbered-square-mark li ul,ol.is-style-vk-numbered-square-mark li ol{counter-reset:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-square-mark li ul li:before,ul.is-style-vk-numbered-square-mark li ol li:before,ol.is-style-vk-numbered-square-mark li ul li:before,ol.is-style-vk-numbered-square-mark li ol li:before{counter-increment:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-circle-mark.fa-lg li::before,ul.is-style-vk-numbered-square-mark.fa-lg li::before,ol.is-style-vk-numbered-circle-mark.fa-lg li::before,ol.is-style-vk-numbered-square-mark.fa-lg li::before{left:-0.8em}ul.is-style-vk-numbered-circle-mark.fa-2x li,ul.is-style-vk-numbered-square-mark.fa-2x li,ol.is-style-vk-numbered-circle-mark.fa-2x li,ol.is-style-vk-numbered-square-mark.fa-2x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-2x li::before,ul.is-style-vk-numbered-square-mark.fa-2x li::before,ol.is-style-vk-numbered-circle-mark.fa-2x li::before,ol.is-style-vk-numbered-square-mark.fa-2x li::before{left:-1.1em}ul.is-style-vk-numbered-circle-mark.fa-3x li,ul.is-style-vk-numbered-square-mark.fa-3x li,ol.is-style-vk-numbered-circle-mark.fa-3x li,ol.is-style-vk-numbered-square-mark.fa-3x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-3x li::before,ul.is-style-vk-numbered-square-mark.fa-3x li::before,ol.is-style-vk-numbered-circle-mark.fa-3x li::before,ol.is-style-vk-numbered-square-mark.fa-3x li::before{left:-1.4em}ul.is-style-vk-numbered-circle-mark.fa-4x li,ul.is-style-vk-numbered-square-mark.fa-4x li,ol.is-style-vk-numbered-circle-mark.fa-4x li,ol.is-style-vk-numbered-square-mark.fa-4x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-4x li::before,ul.is-style-vk-numbered-square-mark.fa-4x li::before,ol.is-style-vk-numbered-circle-mark.fa-4x li::before,ol.is-style-vk-numbered-square-mark.fa-4x li::before{left:-1.5em}ul.is-style-vk-numbered-circle-mark.fa-5x li,ul.is-style-vk-numbered-square-mark.fa-5x li,ol.is-style-vk-numbered-circle-mark.fa-5x li,ol.is-style-vk-numbered-square-mark.fa-5x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-5x li::before,ul.is-style-vk-numbered-square-mark.fa-5x li::before,ol.is-style-vk-numbered-circle-mark.fa-5x li::before,ol.is-style-vk-numbered-square-mark.fa-5x li::before{left:-1.6em}ul.is-style-vk-arrow-mark li::before,ol.is-style-vk-arrow-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-triangle-mark li::before,ol.is-style-vk-triangle-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-mark li::before,ol.is-style-vk-check-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-circle-mark li::before,ol.is-style-vk-check-circle-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-square-mark li::before,ol.is-style-vk-check-square-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-handpoint-mark li::before,ol.is-style-vk-handpoint-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-pencil-mark li::before,ol.is-style-vk-pencil-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-smile-mark li::before,ol.is-style-vk-smile-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-frown-mark li::before,ol.is-style-vk-frown-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.vk-has-pale-pink-color li::marker,ol.vk-has-pale-pink-color li::marker{color:#f78da7}ul.vk-has-pale-pink-color li::before,ol.vk-has-pale-pink-color li::before{color:#f78da7}ul.is-style-vk-numbered-circle-mark.vk-has-pale-pink-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-pale-pink-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-pale-pink-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-pale-pink-color li::before{color:#fff;background-color:#f78da7}ul.vk-has-vivid-red-color li::marker,ol.vk-has-vivid-red-color li::marker{color:#cf2e2e}ul.vk-has-vivid-red-color li::before,ol.vk-has-vivid-red-color li::before{color:#cf2e2e}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-red-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-red-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-red-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-red-color li::before{color:#fff;background-color:#cf2e2e}ul.vk-has-luminous-vivid-orange-color li::marker,ol.vk-has-luminous-vivid-orange-color li::marker{color:#ff6900}ul.vk-has-luminous-vivid-orange-color li::before,ol.vk-has-luminous-vivid-orange-color li::before{color:#ff6900}ul.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-orange-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-orange-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-orange-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-orange-color li::before{color:#fff;background-color:#ff6900}ul.vk-has-luminous-vivid-amber-color li::marker,ol.vk-has-luminous-vivid-amber-color li::marker{color:#fcb900}ul.vk-has-luminous-vivid-amber-color li::before,ol.vk-has-luminous-vivid-amber-color li::before{color:#fcb900}ul.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-amber-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-amber-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-amber-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-amber-color li::before{color:#fff;background-color:#fcb900}ul.vk-has-light-green-cyan-color li::marker,ol.vk-has-light-green-cyan-color li::marker{color:#7bdcb5}ul.vk-has-light-green-cyan-color li::before,ol.vk-has-light-green-cyan-color li::before{color:#7bdcb5}ul.is-style-vk-numbered-circle-mark.vk-has-light-green-cyan-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-light-green-cyan-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-light-green-cyan-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-light-green-cyan-color li::before{color:#fff;background-color:#7bdcb5}ul.vk-has-vivid-green-cyan-color li::marker,ol.vk-has-vivid-green-cyan-color li::marker{color:#00d084}ul.vk-has-vivid-green-cyan-color li::before,ol.vk-has-vivid-green-cyan-color li::before{color:#00d084}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-green-cyan-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-green-cyan-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-green-cyan-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-green-cyan-color li::before{color:#fff;background-color:#00d084}ul.vk-has-pale-cyan-blue-color li::marker,ol.vk-has-pale-cyan-blue-color li::marker{color:#8ed1fc}ul.vk-has-pale-cyan-blue-color li::before,ol.vk-has-pale-cyan-blue-color li::before{color:#8ed1fc}ul.is-style-vk-numbered-circle-mark.vk-has-pale-cyan-blue-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-pale-cyan-blue-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-pale-cyan-blue-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-pale-cyan-blue-color li::before{color:#fff;background-color:#8ed1fc}ul.vk-has-vivid-cyan-blue-color li::marker,ol.vk-has-vivid-cyan-blue-color li::marker{color:#0693e3}ul.vk-has-vivid-cyan-blue-color li::before,ol.vk-has-vivid-cyan-blue-color li::before{color:#0693e3}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-cyan-blue-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-cyan-blue-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-cyan-blue-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-cyan-blue-color li::before{color:#fff;background-color:#0693e3}ul.vk-has-vivid-purple-color li::marker,ol.vk-has-vivid-purple-color li::marker{color:#9b51e0}ul.vk-has-vivid-purple-color li::before,ol.vk-has-vivid-purple-color li::before{color:#9b51e0}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-purple-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-purple-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-purple-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-purple-color li::before{color:#fff;background-color:#9b51e0}ul.vk-has-very-light-gray-color li::marker,ol.vk-has-very-light-gray-color li::marker{color:#eee}ul.vk-has-very-light-gray-color li::before,ol.vk-has-very-light-gray-color li::before{color:#eee}ul.is-style-vk-numbered-circle-mark.vk-has-very-light-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-very-light-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-very-light-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-very-light-gray-color li::before{color:#fff;background-color:#eee}ul.vk-has-cyan-bluish-gray-color li::marker,ol.vk-has-cyan-bluish-gray-color li::marker{color:#abb8c3}ul.vk-has-cyan-bluish-gray-color li::before,ol.vk-has-cyan-bluish-gray-color li::before{color:#abb8c3}ul.is-style-vk-numbered-circle-mark.vk-has-cyan-bluish-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-cyan-bluish-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-cyan-bluish-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-cyan-bluish-gray-color li::before{color:#fff;background-color:#abb8c3}ul.vk-has-very-dark-gray-color li::marker,ol.vk-has-very-dark-gray-color li::marker{color:#313131}ul.vk-has-very-dark-gray-color li::before,ol.vk-has-very-dark-gray-color li::before{color:#313131}ul.is-style-vk-numbered-circle-mark.vk-has-very-dark-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-very-dark-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-very-dark-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-very-dark-gray-color li::before{color:#fff;background-color:#313131}ul.vk-has-white-color li::marker,ol.vk-has-white-color li::marker{color:#fff}ul.vk-has-white-color li::before,ol.vk-has-white-color li::before{color:#fff}ul.is-style-vk-numbered-circle-mark.vk-has-white-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-white-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-white-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-white-color li::before{color:#fff;background-color:#fff}ul.vk-has-vk-color-primary-color li::marker,ol.vk-has-vk-color-primary-color li::marker{color:var(--vk-color-primary)}ul.vk-has-vk-color-primary-color li::before,ol.vk-has-vk-color-primary-color li::before{color:var(--vk-color-primary)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-color li::before{color:#fff;background-color:var(--vk-color-primary)}ul.vk-has-vk-color-primary-dark-color li::marker,ol.vk-has-vk-color-primary-dark-color li::marker{color:var(--vk-color-primary-dark)}ul.vk-has-vk-color-primary-dark-color li::before,ol.vk-has-vk-color-primary-dark-color li::before{color:var(--vk-color-primary-dark)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-dark-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-dark-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-dark-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-dark-color li::before{color:#fff;background-color:var(--vk-color-primary-dark)}ul.vk-has-vk-color-primary-vivid-color li::marker,ol.vk-has-vk-color-primary-vivid-color li::marker{color:var(--vk-color-primary-vivid)}ul.vk-has-vk-color-primary-vivid-color li::before,ol.vk-has-vk-color-primary-vivid-color li::before{color:var(--vk-color-primary-vivid)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-vivid-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-vivid-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-vivid-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-vivid-color li::before{color:#fff;background-color:var(--vk-color-primary-vivid)}ul.vk-has-vk-color-custom-1-color li::marker,ol.vk-has-vk-color-custom-1-color li::marker{color:var(--vk-color-custom-1)}ul.vk-has-vk-color-custom-1-color li::before,ol.vk-has-vk-color-custom-1-color li::before{color:var(--vk-color-custom-1)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-1-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-1-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-1-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-1-color li::before{color:#fff;background-color:var(--vk-color-custom-1)}ul.vk-has-vk-color-custom-2-color li::marker,ol.vk-has-vk-color-custom-2-color li::marker{color:var(--vk-color-custom-2)}ul.vk-has-vk-color-custom-2-color li::before,ol.vk-has-vk-color-custom-2-color li::before{color:var(--vk-color-custom-2)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-2-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-2-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-2-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-2-color li::before{color:#fff;background-color:var(--vk-color-custom-2)}ul.vk-has-vk-color-custom-3-color li::marker,ol.vk-has-vk-color-custom-3-color li::marker{color:var(--vk-color-custom-3)}ul.vk-has-vk-color-custom-3-color li::before,ol.vk-has-vk-color-custom-3-color li::before{color:var(--vk-color-custom-3)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-3-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-3-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-3-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-3-color li::before{color:#fff;background-color:var(--vk-color-custom-3)}ul.vk-has-vk-color-custom-4-color li::marker,ol.vk-has-vk-color-custom-4-color li::marker{color:var(--vk-color-custom-4)}ul.vk-has-vk-color-custom-4-color li::before,ol.vk-has-vk-color-custom-4-color li::before{color:var(--vk-color-custom-4)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-4-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-4-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-4-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-4-color li::before{color:#fff;background-color:var(--vk-color-custom-4)}ul.vk-has-vk-color-custom-5-color li::marker,ol.vk-has-vk-color-custom-5-color li::marker{color:var(--vk-color-custom-5)}ul.vk-has-vk-color-custom-5-color li::before,ol.vk-has-vk-color-custom-5-color li::before{color:var(--vk-color-custom-5)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-5-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-5-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-5-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-5-color li::before{color:#fff;background-color:var(--vk-color-custom-5)}.wp-block-group h3:first-child,.wp-block-group h4:first-child{margin-top:0}.wp-block-group p:last-child,.wp-block-group ul:last-child,.wp-block-group ol:last-child,.wp-block-group dl:last-child,.wp-block-group table:last-child,.wp-block-group .wp-block-columns:last-child{margin-bottom:0}.wp-block-group.vk-has-pale-pink-color{border-color:#f78da7}.wp-block-group.vk-has-pale-pink-color .wp-block-group__inner-container{border-color:#f78da7}.wp-block-group.vk-has-vivid-red-color{border-color:#cf2e2e}.wp-block-group.vk-has-vivid-red-color .wp-block-group__inner-container{border-color:#cf2e2e}.wp-block-group.vk-has-luminous-vivid-orange-color{border-color:#ff6900}.wp-block-group.vk-has-luminous-vivid-orange-color .wp-block-group__inner-container{border-color:#ff6900}.wp-block-group.vk-has-luminous-vivid-amber-color{border-color:#fcb900}.wp-block-group.vk-has-luminous-vivid-amber-color .wp-block-group__inner-container{border-color:#fcb900}.wp-block-group.vk-has-light-green-cyan-color{border-color:#7bdcb5}.wp-block-group.vk-has-light-green-cyan-color .wp-block-group__inner-container{border-color:#7bdcb5}.wp-block-group.vk-has-vivid-green-cyan-color{border-color:#00d084}.wp-block-group.vk-has-vivid-green-cyan-color .wp-block-group__inner-container{border-color:#00d084}.wp-block-group.vk-has-pale-cyan-blue-color{border-color:#8ed1fc}.wp-block-group.vk-has-pale-cyan-blue-color .wp-block-group__inner-container{border-color:#8ed1fc}.wp-block-group.vk-has-vivid-cyan-blue-color{border-color:#0693e3}.wp-block-group.vk-has-vivid-cyan-blue-color .wp-block-group__inner-container{border-color:#0693e3}.wp-block-group.vk-has-vivid-purple-color{border-color:#9b51e0}.wp-block-group.vk-has-vivid-purple-color .wp-block-group__inner-container{border-color:#9b51e0}.wp-block-group.vk-has-very-light-gray-color{border-color:#eee}.wp-block-group.vk-has-very-light-gray-color .wp-block-group__inner-container{border-color:#eee}.wp-block-group.vk-has-cyan-bluish-gray-color{border-color:#abb8c3}.wp-block-group.vk-has-cyan-bluish-gray-color .wp-block-group__inner-container{border-color:#abb8c3}.wp-block-group.vk-has-very-dark-gray-color{border-color:#313131}.wp-block-group.vk-has-very-dark-gray-color .wp-block-group__inner-container{border-color:#313131}.wp-block-group.vk-has-white-color{border-color:#fff}.wp-block-group.vk-has-white-color .wp-block-group__inner-container{border-color:#fff}.wp-block-group.vk-has-vk-color-primary-color{border-color:var(--vk-color-primary)}.wp-block-group.vk-has-vk-color-primary-color .wp-block-group__inner-container{border-color:var(--vk-color-primary)}.wp-block-group.vk-has-vk-color-primary-dark-color{border-color:var(--vk-color-primary-dark)}.wp-block-group.vk-has-vk-color-primary-dark-color .wp-block-group__inner-container{border-color:var(--vk-color-primary-dark)}.wp-block-group.vk-has-vk-color-primary-vivid-color{border-color:var(--vk-color-primary-vivid)}.wp-block-group.vk-has-vk-color-primary-vivid-color .wp-block-group__inner-container{border-color:var(--vk-color-primary-vivid)}.wp-block-group.vk-has-vk-color-custom-1-color{border-color:var(--vk-color-custom-1)}.wp-block-group.vk-has-vk-color-custom-1-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-1)}.wp-block-group.vk-has-vk-color-custom-2-color{border-color:var(--vk-color-custom-2)}.wp-block-group.vk-has-vk-color-custom-2-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-2)}.wp-block-group.vk-has-vk-color-custom-3-color{border-color:var(--vk-color-custom-3)}.wp-block-group.vk-has-vk-color-custom-3-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-3)}.wp-block-group.vk-has-vk-color-custom-4-color{border-color:var(--vk-color-custom-4)}.wp-block-group.vk-has-vk-color-custom-4-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-4)}.wp-block-group.vk-has-vk-color-custom-5-color{border-color:var(--vk-color-custom-5)}.wp-block-group.vk-has-vk-color-custom-5-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-5)}.is-style-vk-group-solid{border:solid 3px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-solid h2,.is-style-vk-group-solid h3,.is-style-vk-group-solid h4,.is-style-vk-group-solid h5,.is-style-vk-group-solid h6{margin-bottom:1rem}.is-style-vk-group-solid ul,.is-style-vk-group-solid ol{margin-top:0}.is-style-vk-group-solid ul li:last-child,.is-style-vk-group-solid ol li:last-child{margin-bottom:0}.is-style-vk-group-solid-roundcorner{border:solid 3px;border-radius:8px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-solid-roundcorner h2,.is-style-vk-group-solid-roundcorner h3,.is-style-vk-group-solid-roundcorner h4,.is-style-vk-group-solid-roundcorner h5,.is-style-vk-group-solid-roundcorner h6{margin-bottom:1rem}.is-style-vk-group-solid-roundcorner ul,.is-style-vk-group-solid-roundcorner ol{margin-top:0}.is-style-vk-group-solid-roundcorner ul li:last-child,.is-style-vk-group-solid-roundcorner ol li:last-child{margin-bottom:0}.is-style-vk-group-dotted{border:dotted 1px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-dotted h2,.is-style-vk-group-dotted h3,.is-style-vk-group-dotted h4,.is-style-vk-group-dotted h5,.is-style-vk-group-dotted h6{margin-bottom:1rem}.is-style-vk-group-dotted ul,.is-style-vk-group-dotted ol{margin-top:0}.is-style-vk-group-dotted ul li:last-child,.is-style-vk-group-dotted ol li:last-child{margin-bottom:0}.is-style-vk-group-dashed{border:dashed 2px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-dashed h2,.is-style-vk-group-dashed h3,.is-style-vk-group-dashed h4,.is-style-vk-group-dashed h5,.is-style-vk-group-dashed h6{margin-bottom:1rem}.is-style-vk-group-dashed ul,.is-style-vk-group-dashed ol{margin-top:0}.is-style-vk-group-dashed ul li:last-child,.is-style-vk-group-dashed ol li:last-child{margin-bottom:0}.is-style-vk-group-double{border:double 5px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-double h2,.is-style-vk-group-double h3,.is-style-vk-group-double h4,.is-style-vk-group-double h5,.is-style-vk-group-double h6{margin-bottom:1rem}.is-style-vk-group-double ul,.is-style-vk-group-double ol{margin-top:0}.is-style-vk-group-double ul li:last-child,.is-style-vk-group-double ol li:last-child{margin-bottom:0}.is-style-vk-group-stitch{margin:1em auto;padding:.5em;border-radius:8px}.is-style-vk-group-stitch h2,.is-style-vk-group-stitch h3,.is-style-vk-group-stitch h4,.is-style-vk-group-stitch h5,.is-style-vk-group-stitch h6{margin-bottom:1rem}.is-style-vk-group-stitch ul,.is-style-vk-group-stitch ol{margin-top:0}.is-style-vk-group-stitch ul li:last-child,.is-style-vk-group-stitch ol li:last-child{margin-bottom:0}.is-style-vk-group-stitch .wp-block-group__inner-container{border:dashed 2px;border-radius:8px;padding:1.8em}.is-style-vk-group-top-bottom-border{border-top:solid 1px;border-bottom:solid 1px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem);padding-left:0;padding-right:0}.is-style-vk-group-top-bottom-border h2,.is-style-vk-group-top-bottom-border h3,.is-style-vk-group-top-bottom-border h4,.is-style-vk-group-top-bottom-border h5,.is-style-vk-group-top-bottom-border h6{margin-bottom:1rem}.is-style-vk-group-top-bottom-border ul,.is-style-vk-group-top-bottom-border ol{margin-top:0}.is-style-vk-group-top-bottom-border ul li:last-child,.is-style-vk-group-top-bottom-border ol li:last-child{margin-bottom:0}.is-style-vk-group-shadow{-webkit-box-shadow:0px 0px 5px rgba(0,0,0,.2);box-shadow:0px 0px 5px rgba(0,0,0,.2);padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-shadow h2,.is-style-vk-group-shadow h3,.is-style-vk-group-shadow h4,.is-style-vk-group-shadow h5,.is-style-vk-group-shadow h6{margin-bottom:1rem}.is-style-vk-group-shadow ul,.is-style-vk-group-shadow ol{margin-top:0}.is-style-vk-group-shadow ul li:last-child,.is-style-vk-group-shadow ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-info{background-color:#d9edf7;color:#31708f;border-radius:3px;border:1px solid #bce8f1;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-info h2,.is-style-vk-group-alert-info h3,.is-style-vk-group-alert-info h4,.is-style-vk-group-alert-info h5,.is-style-vk-group-alert-info h6{margin-bottom:1rem}.is-style-vk-group-alert-info ul,.is-style-vk-group-alert-info ol{margin-top:0}.is-style-vk-group-alert-info ul li:last-child,.is-style-vk-group-alert-info ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-success{background-color:#dff0d8;color:#3c763d;border-radius:3px;border:1px solid #d6e9c6;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-success h2,.is-style-vk-group-alert-success h3,.is-style-vk-group-alert-success h4,.is-style-vk-group-alert-success h5,.is-style-vk-group-alert-success h6{margin-bottom:1rem}.is-style-vk-group-alert-success ul,.is-style-vk-group-alert-success ol{margin-top:0}.is-style-vk-group-alert-success ul li:last-child,.is-style-vk-group-alert-success ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-warning{background-color:#fcf8e3;color:#8a6d3b;border-radius:3px;border:1px solid #faebcc;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-warning h2,.is-style-vk-group-alert-warning h3,.is-style-vk-group-alert-warning h4,.is-style-vk-group-alert-warning h5,.is-style-vk-group-alert-warning h6{margin-bottom:1rem}.is-style-vk-group-alert-warning ul,.is-style-vk-group-alert-warning ol{margin-top:0}.is-style-vk-group-alert-warning ul li:last-child,.is-style-vk-group-alert-warning ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-danger{background-color:#f2dede;color:#a94442;border-radius:3px;border:1px solid #ebccd1;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-danger h2,.is-style-vk-group-alert-danger h3,.is-style-vk-group-alert-danger h4,.is-style-vk-group-alert-danger h5,.is-style-vk-group-alert-danger h6{margin-bottom:1rem}.is-style-vk-group-alert-danger ul,.is-style-vk-group-alert-danger ol{margin-top:0}.is-style-vk-group-alert-danger ul li:last-child,.is-style-vk-group-alert-danger ol li:last-child{margin-bottom:0}.wp-block-embed-youtube iframe{width:100%}.has-text-align-right{text-align:right}.has-text-align-left{text-align:left}.has-text-align-center{text-align:center}.wp-block-social-links{-ms-flex-wrap:wrap;flex-wrap:wrap}@media(min-width: 1400px){.col-xxl-2{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;max-width:16.66667%}.col-xxl-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xxl-4{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.col-xxl-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xxl-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}
1
+ :root{--vk-margin-elem:2rem}.text-nowrap{white-space:nowrap}:root{--vk-margin-sm: 1.5rem;--vk-margin-md: 2.4rem;--vk-margin-lg: 4rem}.vk_block-margin-0--margin-top{margin-top:0 !important}.vk_block-margin-0--margin-top>table{margin-top:0}.vk_block-margin-0--margin-bottom{margin-bottom:0 !important}.vk_block-margin-0--margin-bottom>table{margin-bottom:0}.vk_block-margin-sm{margin-top:var(--vk-margin-sm)}.vk_block-margin-sm--margin-top{margin-top:var(--vk-margin-sm) !important}.vk_block-margin-sm--margin-bottom{margin-bottom:var(--vk-margin-sm) !important}.vk_block-margin-sm--height{height:var(--vk-margin-sm)}.vk_block-margin-md{margin-top:var(--vk-margin-md)}.vk_block-margin-md--margin-top{margin-top:var(--vk-margin-md) !important}.vk_block-margin-md--margin-bottom{margin-bottom:var(--vk-margin-md) !important}.vk_block-margin-md--height{height:var(--vk-margin-md)}.vk_block-margin-lg{margin-top:var(--vk-margin-lg)}.vk_block-margin-lg--margin-top{margin-top:var(--vk-margin-lg) !important}.vk_block-margin-lg--margin-bottom{margin-bottom:var(--vk-margin-lg) !important}.vk_block-margin-lg--height{height:var(--vk-margin-lg)}ul.is-style-vk-arrow-mark,ul.is-style-vk-triangle-mark,ul.is-style-vk-check-mark,ul.is-style-vk-check-circle-mark,ul.is-style-vk-check-square-mark,ul.is-style-vk-handpoint-mark,ul.is-style-vk-pencil-mark,ul.is-style-vk-smile-mark,ul.is-style-vk-frown-mark,ul.is-style-vk-numbered-circle-mark,ul.is-style-vk-numbered-square-mark,ol.is-style-vk-arrow-mark,ol.is-style-vk-triangle-mark,ol.is-style-vk-check-mark,ol.is-style-vk-check-circle-mark,ol.is-style-vk-check-square-mark,ol.is-style-vk-handpoint-mark,ol.is-style-vk-pencil-mark,ol.is-style-vk-smile-mark,ol.is-style-vk-frown-mark,ol.is-style-vk-numbered-circle-mark,ol.is-style-vk-numbered-square-mark{-webkit-padding-start:2em;padding-inline-start:2em}ul.is-style-vk-arrow-mark li,ul.is-style-vk-triangle-mark li,ul.is-style-vk-check-mark li,ul.is-style-vk-check-circle-mark li,ul.is-style-vk-check-square-mark li,ul.is-style-vk-handpoint-mark li,ul.is-style-vk-pencil-mark li,ul.is-style-vk-smile-mark li,ul.is-style-vk-frown-mark li,ul.is-style-vk-numbered-circle-mark li,ul.is-style-vk-numbered-square-mark li,ol.is-style-vk-arrow-mark li,ol.is-style-vk-triangle-mark li,ol.is-style-vk-check-mark li,ol.is-style-vk-check-circle-mark li,ol.is-style-vk-check-square-mark li,ol.is-style-vk-handpoint-mark li,ol.is-style-vk-pencil-mark li,ol.is-style-vk-smile-mark li,ol.is-style-vk-frown-mark li,ol.is-style-vk-numbered-circle-mark li,ol.is-style-vk-numbered-square-mark li{list-style:none;position:relative;margin-top:0;margin-left:0;margin:calc( var(--vk-size-text) * 0.8 ) 0;line-height:calc( var(--vk-size-text) * 1.65 )}ul.is-style-vk-numbered-circle-mark,ol.is-style-vk-numbered-circle-mark{counter-reset:number;list-style-type:none}ul.is-style-vk-numbered-circle-mark li,ol.is-style-vk-numbered-circle-mark li{position:relative;list-style:none;padding-left:.5em}ul.is-style-vk-numbered-circle-mark li:before,ol.is-style-vk-numbered-circle-mark li:before{position:absolute;left:0;counter-increment:number;content:counter(number);margin-left:-1.8em;background:#222;color:#fff;text-indent:0;display:inline-block;font-weight:bold;border-radius:50%;font-size:calc( var(--vk-size-text) * 1 );line-height:calc( var(--vk-size-text) * 1.8 );width:26px;height:26px;text-align:center}ul.is-style-vk-numbered-circle-mark li ul,ul.is-style-vk-numbered-circle-mark li ol,ol.is-style-vk-numbered-circle-mark li ul,ol.is-style-vk-numbered-circle-mark li ol{counter-reset:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-circle-mark li ul li:before,ul.is-style-vk-numbered-circle-mark li ol li:before,ol.is-style-vk-numbered-circle-mark li ul li:before,ol.is-style-vk-numbered-circle-mark li ol li:before{counter-increment:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-square-mark,ol.is-style-vk-numbered-square-mark{counter-reset:number;list-style-type:none}ul.is-style-vk-numbered-square-mark li,ol.is-style-vk-numbered-square-mark li{position:relative;list-style:none;padding-left:.5em}ul.is-style-vk-numbered-square-mark li:before,ol.is-style-vk-numbered-square-mark li:before{position:absolute;left:-0.3em;counter-increment:number;content:counter(number);margin-left:-25px;background:#222;color:#fff;text-indent:0;display:inline-block;font-weight:bold;font-size:calc( var(--vk-size-text) * 1 );line-height:calc( var(--vk-size-text) * 1.8 );width:26px;height:26px;text-align:center;border-radius:2px}ul.is-style-vk-numbered-square-mark li ul,ul.is-style-vk-numbered-square-mark li ol,ol.is-style-vk-numbered-square-mark li ul,ol.is-style-vk-numbered-square-mark li ol{counter-reset:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-square-mark li ul li:before,ul.is-style-vk-numbered-square-mark li ol li:before,ol.is-style-vk-numbered-square-mark li ul li:before,ol.is-style-vk-numbered-square-mark li ol li:before{counter-increment:num_inner;content:counter(num_inner)}ul.is-style-vk-numbered-circle-mark.fa-lg li::before,ul.is-style-vk-numbered-square-mark.fa-lg li::before,ol.is-style-vk-numbered-circle-mark.fa-lg li::before,ol.is-style-vk-numbered-square-mark.fa-lg li::before{left:-0.8em}ul.is-style-vk-numbered-circle-mark.fa-2x li,ul.is-style-vk-numbered-square-mark.fa-2x li,ol.is-style-vk-numbered-circle-mark.fa-2x li,ol.is-style-vk-numbered-square-mark.fa-2x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-2x li::before,ul.is-style-vk-numbered-square-mark.fa-2x li::before,ol.is-style-vk-numbered-circle-mark.fa-2x li::before,ol.is-style-vk-numbered-square-mark.fa-2x li::before{left:-1.1em}ul.is-style-vk-numbered-circle-mark.fa-3x li,ul.is-style-vk-numbered-square-mark.fa-3x li,ol.is-style-vk-numbered-circle-mark.fa-3x li,ol.is-style-vk-numbered-square-mark.fa-3x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-3x li::before,ul.is-style-vk-numbered-square-mark.fa-3x li::before,ol.is-style-vk-numbered-circle-mark.fa-3x li::before,ol.is-style-vk-numbered-square-mark.fa-3x li::before{left:-1.4em}ul.is-style-vk-numbered-circle-mark.fa-4x li,ul.is-style-vk-numbered-square-mark.fa-4x li,ol.is-style-vk-numbered-circle-mark.fa-4x li,ol.is-style-vk-numbered-square-mark.fa-4x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-4x li::before,ul.is-style-vk-numbered-square-mark.fa-4x li::before,ol.is-style-vk-numbered-circle-mark.fa-4x li::before,ol.is-style-vk-numbered-square-mark.fa-4x li::before{left:-1.5em}ul.is-style-vk-numbered-circle-mark.fa-5x li,ul.is-style-vk-numbered-square-mark.fa-5x li,ol.is-style-vk-numbered-circle-mark.fa-5x li,ol.is-style-vk-numbered-square-mark.fa-5x li{line-height:1.25em}ul.is-style-vk-numbered-circle-mark.fa-5x li::before,ul.is-style-vk-numbered-square-mark.fa-5x li::before,ol.is-style-vk-numbered-circle-mark.fa-5x li::before,ol.is-style-vk-numbered-square-mark.fa-5x li::before{left:-1.6em}ul.is-style-vk-arrow-mark li::before,ol.is-style-vk-arrow-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-triangle-mark li::before,ol.is-style-vk-triangle-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-mark li::before,ol.is-style-vk-check-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-circle-mark li::before,ol.is-style-vk-check-circle-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-check-square-mark li::before,ol.is-style-vk-check-square-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-handpoint-mark li::before,ol.is-style-vk-handpoint-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-pencil-mark li::before,ol.is-style-vk-pencil-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-smile-mark li::before,ol.is-style-vk-smile-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.is-style-vk-frown-mark li::before,ol.is-style-vk-frown-mark li::before{font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;content:"";left:-1.5em}ul.is-style-vk-default li::before,ol.is-style-vk-default li::before{font-size:22px;line-height:1.1em}ul.vk-has-pale-pink-color li::marker,ol.vk-has-pale-pink-color li::marker{color:#f78da7}ul.vk-has-pale-pink-color li::before,ol.vk-has-pale-pink-color li::before{color:#f78da7}ul.is-style-vk-numbered-circle-mark.vk-has-pale-pink-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-pale-pink-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-pale-pink-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-pale-pink-color li::before{color:#fff;background-color:#f78da7}ul.vk-has-vivid-red-color li::marker,ol.vk-has-vivid-red-color li::marker{color:#cf2e2e}ul.vk-has-vivid-red-color li::before,ol.vk-has-vivid-red-color li::before{color:#cf2e2e}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-red-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-red-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-red-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-red-color li::before{color:#fff;background-color:#cf2e2e}ul.vk-has-luminous-vivid-orange-color li::marker,ol.vk-has-luminous-vivid-orange-color li::marker{color:#ff6900}ul.vk-has-luminous-vivid-orange-color li::before,ol.vk-has-luminous-vivid-orange-color li::before{color:#ff6900}ul.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-orange-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-orange-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-orange-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-orange-color li::before{color:#fff;background-color:#ff6900}ul.vk-has-luminous-vivid-amber-color li::marker,ol.vk-has-luminous-vivid-amber-color li::marker{color:#fcb900}ul.vk-has-luminous-vivid-amber-color li::before,ol.vk-has-luminous-vivid-amber-color li::before{color:#fcb900}ul.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-amber-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-amber-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-luminous-vivid-amber-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-luminous-vivid-amber-color li::before{color:#fff;background-color:#fcb900}ul.vk-has-light-green-cyan-color li::marker,ol.vk-has-light-green-cyan-color li::marker{color:#7bdcb5}ul.vk-has-light-green-cyan-color li::before,ol.vk-has-light-green-cyan-color li::before{color:#7bdcb5}ul.is-style-vk-numbered-circle-mark.vk-has-light-green-cyan-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-light-green-cyan-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-light-green-cyan-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-light-green-cyan-color li::before{color:#fff;background-color:#7bdcb5}ul.vk-has-vivid-green-cyan-color li::marker,ol.vk-has-vivid-green-cyan-color li::marker{color:#00d084}ul.vk-has-vivid-green-cyan-color li::before,ol.vk-has-vivid-green-cyan-color li::before{color:#00d084}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-green-cyan-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-green-cyan-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-green-cyan-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-green-cyan-color li::before{color:#fff;background-color:#00d084}ul.vk-has-pale-cyan-blue-color li::marker,ol.vk-has-pale-cyan-blue-color li::marker{color:#8ed1fc}ul.vk-has-pale-cyan-blue-color li::before,ol.vk-has-pale-cyan-blue-color li::before{color:#8ed1fc}ul.is-style-vk-numbered-circle-mark.vk-has-pale-cyan-blue-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-pale-cyan-blue-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-pale-cyan-blue-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-pale-cyan-blue-color li::before{color:#fff;background-color:#8ed1fc}ul.vk-has-vivid-cyan-blue-color li::marker,ol.vk-has-vivid-cyan-blue-color li::marker{color:#0693e3}ul.vk-has-vivid-cyan-blue-color li::before,ol.vk-has-vivid-cyan-blue-color li::before{color:#0693e3}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-cyan-blue-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-cyan-blue-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-cyan-blue-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-cyan-blue-color li::before{color:#fff;background-color:#0693e3}ul.vk-has-vivid-purple-color li::marker,ol.vk-has-vivid-purple-color li::marker{color:#9b51e0}ul.vk-has-vivid-purple-color li::before,ol.vk-has-vivid-purple-color li::before{color:#9b51e0}ul.is-style-vk-numbered-circle-mark.vk-has-vivid-purple-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vivid-purple-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vivid-purple-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vivid-purple-color li::before{color:#fff;background-color:#9b51e0}ul.vk-has-very-light-gray-color li::marker,ol.vk-has-very-light-gray-color li::marker{color:#eee}ul.vk-has-very-light-gray-color li::before,ol.vk-has-very-light-gray-color li::before{color:#eee}ul.is-style-vk-numbered-circle-mark.vk-has-very-light-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-very-light-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-very-light-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-very-light-gray-color li::before{color:#fff;background-color:#eee}ul.vk-has-cyan-bluish-gray-color li::marker,ol.vk-has-cyan-bluish-gray-color li::marker{color:#abb8c3}ul.vk-has-cyan-bluish-gray-color li::before,ol.vk-has-cyan-bluish-gray-color li::before{color:#abb8c3}ul.is-style-vk-numbered-circle-mark.vk-has-cyan-bluish-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-cyan-bluish-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-cyan-bluish-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-cyan-bluish-gray-color li::before{color:#fff;background-color:#abb8c3}ul.vk-has-very-dark-gray-color li::marker,ol.vk-has-very-dark-gray-color li::marker{color:#313131}ul.vk-has-very-dark-gray-color li::before,ol.vk-has-very-dark-gray-color li::before{color:#313131}ul.is-style-vk-numbered-circle-mark.vk-has-very-dark-gray-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-very-dark-gray-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-very-dark-gray-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-very-dark-gray-color li::before{color:#fff;background-color:#313131}ul.vk-has-white-color li::marker,ol.vk-has-white-color li::marker{color:#fff}ul.vk-has-white-color li::before,ol.vk-has-white-color li::before{color:#fff}ul.is-style-vk-numbered-circle-mark.vk-has-white-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-white-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-white-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-white-color li::before{color:#fff;background-color:#fff}ul.vk-has-vk-color-primary-color li::marker,ol.vk-has-vk-color-primary-color li::marker{color:var(--vk-color-primary)}ul.vk-has-vk-color-primary-color li::before,ol.vk-has-vk-color-primary-color li::before{color:var(--vk-color-primary)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-color li::before{color:#fff;background-color:var(--vk-color-primary)}ul.vk-has-vk-color-primary-dark-color li::marker,ol.vk-has-vk-color-primary-dark-color li::marker{color:var(--vk-color-primary-dark)}ul.vk-has-vk-color-primary-dark-color li::before,ol.vk-has-vk-color-primary-dark-color li::before{color:var(--vk-color-primary-dark)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-dark-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-dark-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-dark-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-dark-color li::before{color:#fff;background-color:var(--vk-color-primary-dark)}ul.vk-has-vk-color-primary-vivid-color li::marker,ol.vk-has-vk-color-primary-vivid-color li::marker{color:var(--vk-color-primary-vivid)}ul.vk-has-vk-color-primary-vivid-color li::before,ol.vk-has-vk-color-primary-vivid-color li::before{color:var(--vk-color-primary-vivid)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-vivid-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-vivid-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-primary-vivid-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-primary-vivid-color li::before{color:#fff;background-color:var(--vk-color-primary-vivid)}ul.vk-has-vk-color-custom-1-color li::marker,ol.vk-has-vk-color-custom-1-color li::marker{color:var(--vk-color-custom-1)}ul.vk-has-vk-color-custom-1-color li::before,ol.vk-has-vk-color-custom-1-color li::before{color:var(--vk-color-custom-1)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-1-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-1-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-1-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-1-color li::before{color:#fff;background-color:var(--vk-color-custom-1)}ul.vk-has-vk-color-custom-2-color li::marker,ol.vk-has-vk-color-custom-2-color li::marker{color:var(--vk-color-custom-2)}ul.vk-has-vk-color-custom-2-color li::before,ol.vk-has-vk-color-custom-2-color li::before{color:var(--vk-color-custom-2)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-2-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-2-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-2-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-2-color li::before{color:#fff;background-color:var(--vk-color-custom-2)}ul.vk-has-vk-color-custom-3-color li::marker,ol.vk-has-vk-color-custom-3-color li::marker{color:var(--vk-color-custom-3)}ul.vk-has-vk-color-custom-3-color li::before,ol.vk-has-vk-color-custom-3-color li::before{color:var(--vk-color-custom-3)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-3-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-3-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-3-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-3-color li::before{color:#fff;background-color:var(--vk-color-custom-3)}ul.vk-has-vk-color-custom-4-color li::marker,ol.vk-has-vk-color-custom-4-color li::marker{color:var(--vk-color-custom-4)}ul.vk-has-vk-color-custom-4-color li::before,ol.vk-has-vk-color-custom-4-color li::before{color:var(--vk-color-custom-4)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-4-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-4-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-4-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-4-color li::before{color:#fff;background-color:var(--vk-color-custom-4)}ul.vk-has-vk-color-custom-5-color li::marker,ol.vk-has-vk-color-custom-5-color li::marker{color:var(--vk-color-custom-5)}ul.vk-has-vk-color-custom-5-color li::before,ol.vk-has-vk-color-custom-5-color li::before{color:var(--vk-color-custom-5)}ul.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-5-color li::before,ul.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-5-color li::before,ol.is-style-vk-numbered-circle-mark.vk-has-vk-color-custom-5-color li::before,ol.is-style-vk-numbered-square-mark.vk-has-vk-color-custom-5-color li::before{color:#fff;background-color:var(--vk-color-custom-5)}.wp-block-group h3:first-child,.wp-block-group h4:first-child{margin-top:0}.wp-block-group p:last-child,.wp-block-group ul:last-child,.wp-block-group ol:last-child,.wp-block-group dl:last-child,.wp-block-group table:last-child,.wp-block-group .wp-block-columns:last-child{margin-bottom:0}.wp-block-group.vk-has-pale-pink-color{border-color:#f78da7}.wp-block-group.vk-has-pale-pink-color .wp-block-group__inner-container{border-color:#f78da7}.wp-block-group.vk-has-vivid-red-color{border-color:#cf2e2e}.wp-block-group.vk-has-vivid-red-color .wp-block-group__inner-container{border-color:#cf2e2e}.wp-block-group.vk-has-luminous-vivid-orange-color{border-color:#ff6900}.wp-block-group.vk-has-luminous-vivid-orange-color .wp-block-group__inner-container{border-color:#ff6900}.wp-block-group.vk-has-luminous-vivid-amber-color{border-color:#fcb900}.wp-block-group.vk-has-luminous-vivid-amber-color .wp-block-group__inner-container{border-color:#fcb900}.wp-block-group.vk-has-light-green-cyan-color{border-color:#7bdcb5}.wp-block-group.vk-has-light-green-cyan-color .wp-block-group__inner-container{border-color:#7bdcb5}.wp-block-group.vk-has-vivid-green-cyan-color{border-color:#00d084}.wp-block-group.vk-has-vivid-green-cyan-color .wp-block-group__inner-container{border-color:#00d084}.wp-block-group.vk-has-pale-cyan-blue-color{border-color:#8ed1fc}.wp-block-group.vk-has-pale-cyan-blue-color .wp-block-group__inner-container{border-color:#8ed1fc}.wp-block-group.vk-has-vivid-cyan-blue-color{border-color:#0693e3}.wp-block-group.vk-has-vivid-cyan-blue-color .wp-block-group__inner-container{border-color:#0693e3}.wp-block-group.vk-has-vivid-purple-color{border-color:#9b51e0}.wp-block-group.vk-has-vivid-purple-color .wp-block-group__inner-container{border-color:#9b51e0}.wp-block-group.vk-has-very-light-gray-color{border-color:#eee}.wp-block-group.vk-has-very-light-gray-color .wp-block-group__inner-container{border-color:#eee}.wp-block-group.vk-has-cyan-bluish-gray-color{border-color:#abb8c3}.wp-block-group.vk-has-cyan-bluish-gray-color .wp-block-group__inner-container{border-color:#abb8c3}.wp-block-group.vk-has-very-dark-gray-color{border-color:#313131}.wp-block-group.vk-has-very-dark-gray-color .wp-block-group__inner-container{border-color:#313131}.wp-block-group.vk-has-white-color{border-color:#fff}.wp-block-group.vk-has-white-color .wp-block-group__inner-container{border-color:#fff}.wp-block-group.vk-has-vk-color-primary-color{border-color:var(--vk-color-primary)}.wp-block-group.vk-has-vk-color-primary-color .wp-block-group__inner-container{border-color:var(--vk-color-primary)}.wp-block-group.vk-has-vk-color-primary-dark-color{border-color:var(--vk-color-primary-dark)}.wp-block-group.vk-has-vk-color-primary-dark-color .wp-block-group__inner-container{border-color:var(--vk-color-primary-dark)}.wp-block-group.vk-has-vk-color-primary-vivid-color{border-color:var(--vk-color-primary-vivid)}.wp-block-group.vk-has-vk-color-primary-vivid-color .wp-block-group__inner-container{border-color:var(--vk-color-primary-vivid)}.wp-block-group.vk-has-vk-color-custom-1-color{border-color:var(--vk-color-custom-1)}.wp-block-group.vk-has-vk-color-custom-1-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-1)}.wp-block-group.vk-has-vk-color-custom-2-color{border-color:var(--vk-color-custom-2)}.wp-block-group.vk-has-vk-color-custom-2-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-2)}.wp-block-group.vk-has-vk-color-custom-3-color{border-color:var(--vk-color-custom-3)}.wp-block-group.vk-has-vk-color-custom-3-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-3)}.wp-block-group.vk-has-vk-color-custom-4-color{border-color:var(--vk-color-custom-4)}.wp-block-group.vk-has-vk-color-custom-4-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-4)}.wp-block-group.vk-has-vk-color-custom-5-color{border-color:var(--vk-color-custom-5)}.wp-block-group.vk-has-vk-color-custom-5-color .wp-block-group__inner-container{border-color:var(--vk-color-custom-5)}.is-style-vk-group-solid{border:solid 3px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-solid h2,.is-style-vk-group-solid h3,.is-style-vk-group-solid h4,.is-style-vk-group-solid h5,.is-style-vk-group-solid h6{margin-bottom:1rem}.is-style-vk-group-solid ul,.is-style-vk-group-solid ol{margin-top:0}.is-style-vk-group-solid ul li:last-child,.is-style-vk-group-solid ol li:last-child{margin-bottom:0}.is-style-vk-group-solid-roundcorner{border:solid 3px;border-radius:8px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-solid-roundcorner h2,.is-style-vk-group-solid-roundcorner h3,.is-style-vk-group-solid-roundcorner h4,.is-style-vk-group-solid-roundcorner h5,.is-style-vk-group-solid-roundcorner h6{margin-bottom:1rem}.is-style-vk-group-solid-roundcorner ul,.is-style-vk-group-solid-roundcorner ol{margin-top:0}.is-style-vk-group-solid-roundcorner ul li:last-child,.is-style-vk-group-solid-roundcorner ol li:last-child{margin-bottom:0}.is-style-vk-group-dotted{border:dotted 1px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-dotted h2,.is-style-vk-group-dotted h3,.is-style-vk-group-dotted h4,.is-style-vk-group-dotted h5,.is-style-vk-group-dotted h6{margin-bottom:1rem}.is-style-vk-group-dotted ul,.is-style-vk-group-dotted ol{margin-top:0}.is-style-vk-group-dotted ul li:last-child,.is-style-vk-group-dotted ol li:last-child{margin-bottom:0}.is-style-vk-group-dashed{border:dashed 2px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-dashed h2,.is-style-vk-group-dashed h3,.is-style-vk-group-dashed h4,.is-style-vk-group-dashed h5,.is-style-vk-group-dashed h6{margin-bottom:1rem}.is-style-vk-group-dashed ul,.is-style-vk-group-dashed ol{margin-top:0}.is-style-vk-group-dashed ul li:last-child,.is-style-vk-group-dashed ol li:last-child{margin-bottom:0}.is-style-vk-group-double{border:double 5px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-double h2,.is-style-vk-group-double h3,.is-style-vk-group-double h4,.is-style-vk-group-double h5,.is-style-vk-group-double h6{margin-bottom:1rem}.is-style-vk-group-double ul,.is-style-vk-group-double ol{margin-top:0}.is-style-vk-group-double ul li:last-child,.is-style-vk-group-double ol li:last-child{margin-bottom:0}.is-style-vk-group-stitch{margin:1em auto;padding:.5em;border-radius:8px}.is-style-vk-group-stitch h2,.is-style-vk-group-stitch h3,.is-style-vk-group-stitch h4,.is-style-vk-group-stitch h5,.is-style-vk-group-stitch h6{margin-bottom:1rem}.is-style-vk-group-stitch ul,.is-style-vk-group-stitch ol{margin-top:0}.is-style-vk-group-stitch ul li:last-child,.is-style-vk-group-stitch ol li:last-child{margin-bottom:0}.is-style-vk-group-stitch .wp-block-group__inner-container{border:dashed 2px;border-radius:8px;padding:1.8em}.is-style-vk-group-top-bottom-border{border-top:solid 1px;border-bottom:solid 1px;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem);padding-left:0;padding-right:0}.is-style-vk-group-top-bottom-border h2,.is-style-vk-group-top-bottom-border h3,.is-style-vk-group-top-bottom-border h4,.is-style-vk-group-top-bottom-border h5,.is-style-vk-group-top-bottom-border h6{margin-bottom:1rem}.is-style-vk-group-top-bottom-border ul,.is-style-vk-group-top-bottom-border ol{margin-top:0}.is-style-vk-group-top-bottom-border ul li:last-child,.is-style-vk-group-top-bottom-border ol li:last-child{margin-bottom:0}.is-style-vk-group-shadow{-webkit-box-shadow:0px 0px 5px rgba(0,0,0,.2);box-shadow:0px 0px 5px rgba(0,0,0,.2);padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-shadow h2,.is-style-vk-group-shadow h3,.is-style-vk-group-shadow h4,.is-style-vk-group-shadow h5,.is-style-vk-group-shadow h6{margin-bottom:1rem}.is-style-vk-group-shadow ul,.is-style-vk-group-shadow ol{margin-top:0}.is-style-vk-group-shadow ul li:last-child,.is-style-vk-group-shadow ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-info{background-color:#d9edf7;color:#31708f;border-radius:3px;border:1px solid #bce8f1;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-info h2,.is-style-vk-group-alert-info h3,.is-style-vk-group-alert-info h4,.is-style-vk-group-alert-info h5,.is-style-vk-group-alert-info h6{margin-bottom:1rem}.is-style-vk-group-alert-info ul,.is-style-vk-group-alert-info ol{margin-top:0}.is-style-vk-group-alert-info ul li:last-child,.is-style-vk-group-alert-info ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-success{background-color:#dff0d8;color:#3c763d;border-radius:3px;border:1px solid #d6e9c6;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-success h2,.is-style-vk-group-alert-success h3,.is-style-vk-group-alert-success h4,.is-style-vk-group-alert-success h5,.is-style-vk-group-alert-success h6{margin-bottom:1rem}.is-style-vk-group-alert-success ul,.is-style-vk-group-alert-success ol{margin-top:0}.is-style-vk-group-alert-success ul li:last-child,.is-style-vk-group-alert-success ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-warning{background-color:#fcf8e3;color:#8a6d3b;border-radius:3px;border:1px solid #faebcc;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-warning h2,.is-style-vk-group-alert-warning h3,.is-style-vk-group-alert-warning h4,.is-style-vk-group-alert-warning h5,.is-style-vk-group-alert-warning h6{margin-bottom:1rem}.is-style-vk-group-alert-warning ul,.is-style-vk-group-alert-warning ol{margin-top:0}.is-style-vk-group-alert-warning ul li:last-child,.is-style-vk-group-alert-warning ol li:last-child{margin-bottom:0}.is-style-vk-group-alert-danger{background-color:#f2dede;color:#a94442;border-radius:3px;border:1px solid #ebccd1;padding:1.8em;margin-top:var(--vk-margin-elem);margin-bottom:var(--vk-margin-elem)}.is-style-vk-group-alert-danger h2,.is-style-vk-group-alert-danger h3,.is-style-vk-group-alert-danger h4,.is-style-vk-group-alert-danger h5,.is-style-vk-group-alert-danger h6{margin-bottom:1rem}.is-style-vk-group-alert-danger ul,.is-style-vk-group-alert-danger ol{margin-top:0}.is-style-vk-group-alert-danger ul li:last-child,.is-style-vk-group-alert-danger ol li:last-child{margin-bottom:0}.wp-block-embed-youtube iframe{width:100%}.has-text-align-right{text-align:right}.has-text-align-left{text-align:left}.has-text-align-center{text-align:center}.wp-block-social-links{-ms-flex-wrap:wrap;flex-wrap:wrap}@media(min-width: 1400px){.col-xxl-2{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;max-width:16.66667%}.col-xxl-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xxl-4{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.col-xxl-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xxl-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}
inc/vk-blocks/admin/admin.php CHANGED
@@ -161,6 +161,15 @@ function vk_blocks_options_enqueue_scripts( $hook_suffix ) {
161
  return;
162
  }
163
 
 
 
 
 
 
 
 
 
 
164
  wp_enqueue_style(
165
  'vk_blocks_options-style',
166
  VK_BLOCKS_DIR_URL . 'build/vk_blocks_options.css',
161
  return;
162
  }
163
 
164
+ $asset = include VK_BLOCKS_DIR_PATH . 'inc/vk-blocks/build/admin-build.asset.php';
165
+ wp_enqueue_script(
166
+ 'vk-blocks-admin-js',
167
+ VK_BLOCKS_DIR_URL . 'inc/vk-blocks/build/admin-build.js',
168
+ $asset['dependencies'],
169
+ $asset['version'],
170
+ true
171
+ );
172
+
173
  wp_enqueue_style(
174
  'vk_blocks_options-style',
175
  VK_BLOCKS_DIR_URL . 'build/vk_blocks_options.css',
inc/vk-blocks/build/admin-build.asset.php ADDED
@@ -0,0 +1 @@
 
1
+ <?php return array('dependencies' => array(), 'version' => '43b944a86af5deb74c7ef59e1ce862d4');
inc/vk-blocks/build/admin-build.js ADDED
@@ -0,0 +1 @@
 
1
+ !function(){var e=document.getElementById("vk-blocks-pro-license-key");e.addEventListener("blur",(function(){e.value=e.value.trim()}))}();
inc/vk-blocks/build/block-build.asset.php CHANGED
@@ -1 +1 @@
1
- <?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-rich-text', 'wp-server-side-render'), 'version' => 'c18cf72e2bbe4792674e6b4c47945402');
1
+ <?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-rich-text', 'wp-server-side-render'), 'version' => 'c12dc68520c82c23661627d88e5814be');
inc/vk-blocks/class-vk-blocks-options.php ADDED
@@ -0,0 +1,241 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * VK Blocks Options class.
4
+ *
5
+ * @package vk-blocks
6
+ */
7
+
8
+ /**
9
+ * VK_Blocks_Options
10
+ */
11
+ class VK_Blocks_Options {
12
+
13
+ /**
14
+ * Initialize
15
+ *
16
+ * @return VK_Blocks_Options
17
+ */
18
+ public static function init() {
19
+ // static 宣言しているので既に定義されている場合は $instance に null は入らずに既存のインスタンスのまま.
20
+ static $instance = null;
21
+ return $instance ? $instance : $instance = new static();
22
+ }
23
+
24
+ /**
25
+ * Constructor.
26
+ */
27
+ private function __construct() {
28
+ add_action( 'init', array( $this, 'register_setting' ) );
29
+ }
30
+
31
+ /**
32
+ * Options scheme
33
+ *
34
+ * @return number
35
+ */
36
+ public static function options_scheme() {
37
+ $default_options_schema = array(
38
+ 'balloon_border_width' => array(
39
+ 'type' => 'number',
40
+ 'default' => 1,
41
+ ),
42
+ 'margin_unit' => array(
43
+ 'type' => 'string',
44
+ 'default' => 'rem',
45
+ ),
46
+ 'margin_size' => array(
47
+ 'type' => 'object',
48
+ 'items' => array(
49
+ 'lg' => array(
50
+ 'type' => 'object',
51
+ 'items' => array(
52
+ 'mobile' => array(
53
+ 'type' => 'number',
54
+ 'default' => null,
55
+ ),
56
+ 'tablet' => array(
57
+ 'type' => 'number',
58
+ 'default' => null,
59
+ ),
60
+ 'pc' => array(
61
+ 'type' => 'number',
62
+ 'default' => null,
63
+ ),
64
+ ),
65
+ ),
66
+ 'md' => array(
67
+ 'type' => 'object',
68
+ 'items' => array(
69
+ 'mobile' => array(
70
+ 'type' => 'number',
71
+ 'default' => null,
72
+ ),
73
+ 'tablet' => array(
74
+ 'type' => 'number',
75
+ 'default' => null,
76
+ ),
77
+ 'pc' => array(
78
+ 'type' => 'number',
79
+ 'default' => null,
80
+ ),
81
+ ),
82
+ ),
83
+ 'sm' => array(
84
+ 'type' => 'object',
85
+ 'items' => array(
86
+ 'mobile' => array(
87
+ 'type' => 'number',
88
+ 'default' => null,
89
+ ),
90
+ 'tablet' => array(
91
+ 'type' => 'number',
92
+ 'default' => null,
93
+ ),
94
+ 'pc' => array(
95
+ 'type' => 'number',
96
+ 'default' => null,
97
+ ),
98
+ ),
99
+ ),
100
+ ),
101
+ ),
102
+ 'load_separate_option' => array(
103
+ 'type' => 'boolean',
104
+ 'default' => false,
105
+ ),
106
+ );
107
+ $array = array_merge( $default_options_schema, apply_filters( 'vk_blocks_default_options_scheme', array() ) );
108
+ return $array;
109
+ }
110
+
111
+ /**
112
+ * 吹き出し数
113
+ *
114
+ * @return number
115
+ */
116
+ public static function balloon_image_number() {
117
+ return apply_filters( 'vk_blocks_image_number', 15 );
118
+ }
119
+
120
+ /**
121
+ * 吹き出しschema 生成
122
+ *
123
+ * @return $balloon_meta_schema
124
+ */
125
+ public function balloon_meta_schema() {
126
+ $number = self::balloon_image_number();
127
+ $return_array = array();
128
+ $return_array['default_icons'] = array(
129
+ 'type' => 'object',
130
+ );
131
+ for ( $i = 1; $i <= $number; $i++ ) {
132
+ $return_array['default_icons']['items'][ $i ] = array(
133
+ 'type' => 'object',
134
+ 'items' => array(
135
+ 'name' => array(
136
+ 'type' => 'string',
137
+ 'default' => null,
138
+ ),
139
+ 'src' => array(
140
+ 'type' => 'string',
141
+ 'default' => null,
142
+ ),
143
+ ),
144
+ );
145
+ };
146
+ return $return_array;
147
+ }
148
+
149
+ /**
150
+ * Get Defaults
151
+ *
152
+ * @param array $schema option defaults.
153
+ *
154
+ * @return options
155
+ */
156
+ public static function get_defaults( $schema ) {
157
+ $default = array();
158
+ foreach ( $schema as $key => $value ) {
159
+ $default[ $key ] = 'object' === $value['type'] ? self::get_defaults( $value['items'] ) : $value['default'];
160
+ }
161
+ return $default;
162
+ }
163
+
164
+ /**
165
+ * Get properties
166
+ *
167
+ * @param array $schema option schema.
168
+ *
169
+ * @return options
170
+ */
171
+ public static function get_properties( $schema ) {
172
+ $properties = array();
173
+ foreach ( $schema as $key => $value ) {
174
+ $properties[ $key ] = array(
175
+ 'type' => $value['type'],
176
+ );
177
+
178
+ if ( 'object' === $value['type'] ) {
179
+ $properties[ $key ]['properties'] = self::get_properties( $value['items'] );
180
+ }
181
+ }
182
+ return $properties;
183
+ }
184
+
185
+ /**
186
+ * Get Balloon Meta Options
187
+ *
188
+ * @return options
189
+ */
190
+ public static function get_balloon_meta_options() {
191
+ $options = get_option( 'vk_blocks_balloon_meta' );
192
+ $number = self::balloon_image_number();
193
+ $defaults = array();
194
+ $defaults['default_icons'] = array();
195
+ for ( $i = 1; $i <= $number; $i++ ) {
196
+ $defaults['default_icons'][ $i ] = array(
197
+ 'name' => null,
198
+ 'src' => null,
199
+ );
200
+ };
201
+ $options = wp_parse_args( $options, $defaults );
202
+ return $options;
203
+ }
204
+
205
+ /**
206
+ * Register Setting
207
+ *
208
+ * @see https://developer.wordpress.org/reference/functions/register_setting/#comment-5289
209
+ */
210
+ public function register_setting() {
211
+ register_setting(
212
+ 'vk_blocks_setting',
213
+ 'vk_blocks_options',
214
+ array(
215
+ 'type' => 'object',
216
+ 'show_in_rest' => array(
217
+ 'schema' => array(
218
+ 'type' => 'object',
219
+ 'properties' => self::get_properties( self::options_scheme() ),
220
+ ),
221
+ ),
222
+ 'default' => self::get_defaults( self::options_scheme() ),
223
+ )
224
+ );
225
+
226
+ register_setting(
227
+ 'vk_blocks_setting',
228
+ 'vk_blocks_balloon_meta',
229
+ array(
230
+ 'type' => 'object',
231
+ 'show_in_rest' => array(
232
+ 'schema' => array(
233
+ 'type' => 'object',
234
+ 'properties' => self::get_properties( self::balloon_meta_schema() ),
235
+ ),
236
+ ),
237
+ 'default' => self::get_defaults( $this->balloon_meta_schema() ),
238
+ )
239
+ );
240
+ }
241
+ }
inc/vk-blocks/languages/vk-blocks.pot CHANGED
@@ -2,16 +2,16 @@
2
  # This file is distributed under the same license as the VK Blocks Pro plugin.
3
  msgid ""
4
  msgstr ""
5
- "Project-Id-Version: VK Blocks Pro 1.37.0.0\n"
6
  "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/vk-blocks-pro\n"
7
  "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
8
  "Language-Team: LANGUAGE <LL@li.org>\n"
9
  "MIME-Version: 1.0\n"
10
  "Content-Type: text/plain; charset=UTF-8\n"
11
  "Content-Transfer-Encoding: 8bit\n"
12
- "POT-Creation-Date: 2022-06-07T08:34:30+00:00\n"
13
  "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
14
- "X-Generator: WP-CLI 2.5.0-alpha-3f4c34b\n"
15
  "X-Domain: vk-blocks\n"
16
 
17
  #: src/blocks/_pro/accordion/index.js:22
@@ -275,19 +275,19 @@ msgid "Ignore this post"
275
  msgstr ""
276
 
277
  #: src/blocks/_pro/grid-column-item/edit.js:102
278
- #: src/blocks/_pro/gridcolcard/edit-common.js:158
279
  msgid "Color Settings"
280
  msgstr ""
281
 
282
  #: src/blocks/_pro/grid-column-item/edit.js:104
283
- #: src/blocks/_pro/gridcolcard/edit-common.js:160
284
  #: src/blocks/button/edit.js:681
285
  #: src/blocks/heading/edit.js:324
286
  msgid "Text Color"
287
  msgstr ""
288
 
289
  #: src/blocks/_pro/grid-column-item/edit.js:110
290
- #: src/blocks/_pro/gridcolcard/edit-common.js:169
291
  #: src/blocks/border-box/edit.js:216
292
  #: src/blocks/button/edit.js:664
293
  msgid "Background Color"
@@ -312,7 +312,6 @@ msgid "Padding (Bottom)"
312
  msgstr ""
313
 
314
  #: src/blocks/_pro/grid-column-item/edit.js:169
315
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:31
316
  #: inc/vk-blocks/admin/admin-margin.php:31
317
  msgid "Unit"
318
  msgstr ""
@@ -322,7 +321,6 @@ msgstr ""
322
  #: src/blocks/icon-outer/edit.js:151
323
  #: src/blocks/icon/edit.js:143
324
  #: src/components/advanced-unit-control/index.js:18
325
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:10
326
  #: inc/vk-blocks/admin/admin-margin.php:10
327
  msgid "px"
328
  msgstr ""
@@ -332,7 +330,6 @@ msgstr ""
332
  #: src/blocks/icon-outer/edit.js:155
333
  #: src/blocks/icon/edit.js:147
334
  #: src/components/advanced-unit-control/index.js:22
335
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:14
336
  #: inc/vk-blocks/admin/admin-margin.php:14
337
  msgid "em"
338
  msgstr ""
@@ -342,7 +339,6 @@ msgstr ""
342
  #: src/blocks/icon-outer/edit.js:159
343
  #: src/blocks/icon/edit.js:151
344
  #: src/components/advanced-unit-control/index.js:26
345
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:18
346
  #: inc/vk-blocks/admin/admin-margin.php:18
347
  msgid "rem"
348
  msgstr ""
@@ -371,54 +367,54 @@ msgstr ""
371
  msgid "You can create a variety of layouts with grid column card blocks."
372
  msgstr ""
373
 
374
- #: src/blocks/_pro/gridcolcard-item/edit.js:201
375
  #: src/blocks/_pro/select-post-list-item/edit.js:66
376
  #: src/blocks/button/edit.js:216
377
  msgid "Unlink"
378
  msgstr ""
379
 
380
- #: src/blocks/_pro/gridcolcard-item/edit.js:202
381
  #: src/blocks/button/edit.js:217
382
  msgid "Input Link URL"
383
  msgstr ""
384
 
385
- #: src/blocks/_pro/gridcolcard-item/edit.js:241
386
  #: src/blocks/_pro/select-post-list-item/edit.js:102
387
  #: src/blocks/button/edit.js:256
388
  msgid "Submit"
389
  msgstr ""
390
 
391
- #: src/blocks/_pro/gridcolcard-item/edit.js:255
392
  msgid "Edit mode"
393
  msgstr ""
394
 
395
- #: src/blocks/_pro/gridcolcard-item/edit.js:265
396
  msgid "All columns"
397
  msgstr ""
398
 
399
- #: src/blocks/_pro/gridcolcard-item/edit.js:273
400
  msgid "This column only"
401
  msgstr ""
402
 
403
- #: src/blocks/_pro/gridcolcard-item/edit.js:278
404
  msgid "Edit Lock"
405
  msgstr ""
406
 
407
- #: src/blocks/_pro/gridcolcard-item/edit.js:281
408
  msgid "Lock edits this block from the parent and other Grid Column Item block"
409
  msgstr ""
410
 
411
- #: src/blocks/_pro/gridcolcard-item/edit.js:292
412
  msgid "Column Setting"
413
  msgstr ""
414
 
415
- #: src/blocks/_pro/gridcolcard-item/edit.js:295
416
  #: src/blocks/_pro/icon-card-item/edit.js:120
417
  #: src/blocks/pr-blocks/edit.js:254
418
  msgid "Link URL:"
419
  msgstr ""
420
 
421
- #: src/blocks/_pro/gridcolcard-item/edit.js:301
422
  #: src/blocks/_pro/icon-card-item/edit.js:128
423
  #: src/blocks/button/edit.js:242
424
  #: src/blocks/icon/edit.js:254
@@ -427,61 +423,60 @@ msgstr ""
427
  msgid "Open link new tab."
428
  msgstr ""
429
 
430
- #: src/blocks/_pro/gridcolcard-item/edit.js:308
431
  msgid "If you set a link URL, do not place the link element (text or button) in the Grid Column Card Item. It may not be displayed correctly."
432
  msgstr ""
433
 
434
- #: src/blocks/_pro/gridcolcard-item/edit.js:312
435
  msgid "Make sure that no link is specified for the image block, etc."
436
  msgstr ""
437
 
438
- #: src/blocks/_pro/gridcolcard/edit-common.js:116
439
  msgid "Image fit to column"
440
  msgstr ""
441
 
442
- #: src/blocks/_pro/gridcolcard/edit-common.js:128
443
  msgid "Column footer button area"
444
  msgstr ""
445
 
446
- #: src/blocks/_pro/gridcolcard/edit-common.js:138
447
  #: src/blocks/heading/edit.js:370
448
  msgid "Display"
449
  msgstr ""
450
 
451
- #: src/blocks/_pro/gridcolcard/edit-common.js:146
452
  #: src/blocks/_pro/slider/edit.js:374
453
  #: src/blocks/heading/edit.js:374
454
  msgid "Hide"
455
  msgstr ""
456
 
457
- #: src/blocks/_pro/gridcolcard/edit-common.js:154
458
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:119
459
  #: inc/vk-blocks/admin/admin-balloon.php:54
460
  msgid "Delete"
461
  msgstr ""
462
 
463
- #: src/blocks/_pro/gridcolcard/edit-common.js:181
464
  msgid "Column Radius"
465
  msgstr ""
466
 
467
- #: src/blocks/_pro/gridcolcard/edit-common.js:187
468
  #: src/blocks/balloon/edit.js:319
469
  #: src/extensions/core/image/style.js:15
470
  #: src/extensions/core/table/style.js:12
471
  msgid "Border"
472
  msgstr ""
473
 
474
- #: src/blocks/_pro/gridcolcard/edit-common.js:196
475
  #: src/blocks/border-box/edit.js:207
476
  #: src/extensions/core/group/style.js:47
477
  msgid "Border Color"
478
  msgstr ""
479
 
480
- #: src/blocks/_pro/gridcolcard/edit-common.js:64
481
  msgid "Column padding"
482
  msgstr ""
483
 
484
- #: src/blocks/_pro/gridcolcard/edit-common.js:72
485
  msgid "Column header media area"
486
  msgstr ""
487
 
@@ -798,7 +793,6 @@ msgstr ""
798
  #: src/blocks/_pro/slider/edit.js:246
799
  #: src/blocks/button/edit.js:376
800
  #: src/components/advanced-viewport-control/index.js:39
801
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:62
802
  #: inc/vk-blocks/admin/admin-margin.php:55
803
  msgid "Mobile"
804
  msgstr ""
@@ -807,7 +801,6 @@ msgstr ""
807
  #: src/blocks/_pro/slider/edit.js:235
808
  #: src/blocks/button/edit.js:441
809
  #: src/components/advanced-viewport-control/index.js:31
810
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:61
811
  #: inc/vk-blocks/admin/admin-margin.php:54
812
  msgid "Tablet"
813
  msgstr ""
@@ -816,7 +809,6 @@ msgstr ""
816
  #: src/blocks/_pro/slider/edit.js:224
817
  #: src/blocks/button/edit.js:506
818
  #: src/components/advanced-viewport-control/index.js:25
819
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:60
820
  #: inc/vk-blocks/admin/admin-margin.php:53
821
  msgid "PC"
822
  msgstr ""
@@ -1035,9 +1027,6 @@ msgstr ""
1035
  #: src/blocks/button/edit.js:610
1036
  #: src/blocks/icon/edit.js:261
1037
  #: src/blocks/staff/edit.js:199
1038
- #: dist/vk-blocks-pro/inc/term-color/package/class.term-color.php:41
1039
- #: dist/vk-blocks-pro/inc/term-color/package/class.term-color.php:56
1040
- #: dist/vk-blocks-pro/inc/term-color/package/class.term-color.php:130
1041
  #: inc/term-color/package/class.term-color.php:41
1042
  #: inc/term-color/package/class.term-color.php:56
1043
  #: inc/term-color/package/class.term-color.php:130
@@ -1270,7 +1259,6 @@ msgstr ""
1270
  #: src/blocks/border-box/edit.js:192
1271
  #: src/blocks/icon-outer/edit.js:132
1272
  #: src/blocks/icon/edit.js:124
1273
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:57
1274
  #: inc/vk-blocks/admin/admin-margin.php:50
1275
  msgid "Margin"
1276
  msgstr ""
@@ -1325,7 +1313,6 @@ msgstr ""
1325
 
1326
  #: src/blocks/button/edit.js:290
1327
  #: src/blocks/spacer/edit.js:105
1328
- #: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:31
1329
  #: inc/vk-blocks/vk-blocks-functions.php:31
1330
  msgid "Large"
1331
  msgstr ""
@@ -1333,7 +1320,6 @@ msgstr ""
1333
  #: src/blocks/button/edit.js:306
1334
  #: src/blocks/spacer/edit.js:85
1335
  #: src/extensions/common/inline-font-size/index.js:84
1336
- #: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:23
1337
  #: inc/vk-blocks/vk-blocks-functions.php:23
1338
  msgid "Small"
1339
  msgstr ""
@@ -1768,7 +1754,6 @@ msgid "Spacer Settings"
1768
  msgstr ""
1769
 
1770
  #: src/blocks/spacer/edit.js:95
1771
- #: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:27
1772
  #: inc/vk-blocks/vk-blocks-functions.php:27
1773
  msgid "Medium"
1774
  msgstr ""
@@ -1843,8 +1828,7 @@ msgid "Card (Image Round)"
1843
  msgstr ""
1844
 
1845
  #: src/components/column-layout-control/index.js:26
1846
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:747
1847
- #: inc/vk-components/package/class-vk-component-posts.php:747
1848
  msgid "Card"
1849
  msgstr ""
1850
 
@@ -1861,8 +1845,7 @@ msgid "Card (Horizontal)"
1861
  msgstr ""
1862
 
1863
  #: src/components/column-layout-control/index.js:42
1864
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:763
1865
- #: inc/vk-components/package/class-vk-component-posts.php:763
1866
  msgid "Media"
1867
  msgstr ""
1868
 
@@ -2264,92 +2247,51 @@ msgstr ""
2264
  msgid "https://vektor-inc.co.jp"
2265
  msgstr ""
2266
 
2267
- #: dist/vk-blocks-pro/inc/admin-notices.php:28
2268
  #: inc/admin-notices.php:28
2269
  msgid "We've released VK Blocks Pro!"
2270
  msgstr ""
2271
 
2272
  #. translators: 1: opening a tag, 2: closing a tag
2273
- #: dist/vk-blocks-pro/inc/admin-notices.php:35
2274
  #: inc/admin-notices.php:35
2275
  msgid "Thank you for using VK Blocks. We've released VK Blocks Pro. It has more custom blocks to build web site more easily. If you are interested in VK Blocks Pro, Please read %1$s this post %2$s for more details."
2276
  msgstr ""
2277
 
2278
- #: dist/vk-blocks-pro/inc/admin-notices.php:39
2279
- #: dist/vk-blocks-pro/inc/admin-notices.php:45
2280
  #: inc/admin-notices.php:39
2281
  #: inc/admin-notices.php:45
2282
  msgid "https://www.vektor-inc.co.jp/service/wordpress-plugins/vk-blocks/"
2283
  msgstr ""
2284
 
2285
- #: dist/vk-blocks-pro/inc/admin-notices.php:46
2286
  #: inc/admin-notices.php:46
2287
  msgid "See more"
2288
  msgstr ""
2289
 
2290
- #: dist/vk-blocks-pro/inc/admin-notices.php:49
2291
  #: inc/admin-notices.php:49
2292
  msgid "Dismiss this notice"
2293
  msgstr ""
2294
 
2295
- #: dist/vk-blocks-pro/inc/font-awesome/class-vk-blocks-font-awesome-api.php:73
2296
  #: inc/font-awesome/class-vk-blocks-font-awesome-api.php:73
2297
  msgid "Setting saved."
2298
  msgstr ""
2299
 
2300
- #: dist/vk-blocks-pro/inc/plugin-update-check.php:74
2301
- #: dist/vk-blocks-pro/vk-blocks.php:229
2302
- #: vk-blocks.php:229
2303
- msgid "License Key has no registered."
2304
- msgstr ""
2305
-
2306
- #: dist/vk-blocks-pro/inc/plugin-update-check.php:79
2307
- #: dist/vk-blocks-pro/vk-blocks.php:234
2308
- #: vk-blocks.php:234
2309
- msgid "The VK Blocks Pro license is invalid."
2310
- msgstr ""
2311
-
2312
- #: dist/vk-blocks-pro/inc/plugin-update-check.php:103
2313
- #: dist/vk-blocks-pro/vk-blocks.php:258
2314
- #: vk-blocks.php:258
2315
- msgid "Enter a valid license key for any of the following products on the settings screen."
2316
- msgstr ""
2317
-
2318
- #: dist/vk-blocks-pro/inc/plugin-update-check.php:112
2319
- #: dist/vk-blocks-pro/vk-blocks.php:267
2320
- #: vk-blocks.php:267
2321
- msgid "Enter the license key"
2322
- msgstr ""
2323
-
2324
- #. translators: %s: 再読み込みURL
2325
- #: dist/vk-blocks-pro/inc/plugin-update-check.php:116
2326
- msgid "Even after valid license key registration you still seeing this message, <a href=\"%s\">please click here to reload</a>."
2327
- msgstr ""
2328
-
2329
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:72
2330
  #: inc/tgm-plugin-activation/tgm-config.php:72
2331
  msgid "Install Required Plugins"
2332
  msgstr ""
2333
 
2334
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:73
2335
  #: inc/tgm-plugin-activation/tgm-config.php:73
2336
  msgid "Install Plugins"
2337
  msgstr ""
2338
 
2339
  #. translators: %s = plugin name.
2340
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:75
2341
  #: inc/tgm-plugin-activation/tgm-config.php:75
2342
  msgid "Installing Plugin: %s"
2343
  msgstr ""
2344
 
2345
  #. translators: %s = plugin name.
2346
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:76
2347
  #: inc/tgm-plugin-activation/tgm-config.php:76
2348
  msgid "Something went wrong with the plugin API."
2349
  msgstr ""
2350
 
2351
  #. translators:
2352
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:78
2353
  #: inc/tgm-plugin-activation/tgm-config.php:78
2354
  msgid "This plugin requires the following plugin: %1$s."
2355
  msgid_plural "This plugin requires the following plugins: %1$s."
@@ -2357,7 +2299,6 @@ msgstr[0] ""
2357
  msgstr[1] ""
2358
 
2359
  #. translators: %s = plugin name.
2360
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:84
2361
  #: inc/tgm-plugin-activation/tgm-config.php:84
2362
  msgid "This plugin recommends the following plugin: %1$s.<br>Many additional functions are available for free."
2363
  msgid_plural "This plugin recommends the following plugins: %1$s.<br>Many additional functions are available for free."
@@ -2365,7 +2306,6 @@ msgstr[0] ""
2365
  msgstr[1] ""
2366
 
2367
  #. translators: %s = plugin name.
2368
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:90
2369
  #: inc/tgm-plugin-activation/tgm-config.php:90
2370
  msgid "Sorry, but you do not have the correct permissions to install the %1$s plugin."
2371
  msgid_plural "Sorry, but you do not have the correct permissions to install the %1$s plugins."
@@ -2373,7 +2313,6 @@ msgstr[0] ""
2373
  msgstr[1] ""
2374
 
2375
  #. translators: %s = plugin name.
2376
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:96
2377
  #: inc/tgm-plugin-activation/tgm-config.php:96
2378
  msgid "The following plugin needs to be updated to its latest version to ensure maximum compatibility with this plugin: %1$s."
2379
  msgid_plural "The following plugins need to be updated to their latest version to ensure maximum compatibility with this plugin: %1$s."
@@ -2381,7 +2320,6 @@ msgstr[0] ""
2381
  msgstr[1] ""
2382
 
2383
  #. translators: %s = plugin name.
2384
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:102
2385
  #: inc/tgm-plugin-activation/tgm-config.php:102
2386
  msgid "There is an update available for: %1$s."
2387
  msgid_plural "There are updates available for the following plugins: %1$s."
@@ -2389,7 +2327,6 @@ msgstr[0] ""
2389
  msgstr[1] ""
2390
 
2391
  #. translators: %s = plugin name.
2392
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:108
2393
  #: inc/tgm-plugin-activation/tgm-config.php:108
2394
  msgid "Sorry, but you do not have the correct permissions to update the %1$s plugin."
2395
  msgid_plural "Sorry, but you do not have the correct permissions to update the %1$s plugins."
@@ -2397,7 +2334,6 @@ msgstr[0] ""
2397
  msgstr[1] ""
2398
 
2399
  #. translators: %s = plugin name.
2400
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:114
2401
  #: inc/tgm-plugin-activation/tgm-config.php:114
2402
  msgid "The following required plugin is currently inactive: %1$s."
2403
  msgid_plural "The following required plugins are currently inactive: %1$s."
@@ -2405,7 +2341,6 @@ msgstr[0] ""
2405
  msgstr[1] ""
2406
 
2407
  #. translators: %s = plugin name.
2408
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:120
2409
  #: inc/tgm-plugin-activation/tgm-config.php:120
2410
  msgid "The following recommended plugin is currently inactive: %1$s."
2411
  msgid_plural "The following recommended plugins are currently inactive: %1$s."
@@ -2413,7 +2348,6 @@ msgstr[0] ""
2413
  msgstr[1] ""
2414
 
2415
  #. translators: %s = plugin name.
2416
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:126
2417
  #: inc/tgm-plugin-activation/tgm-config.php:126
2418
  msgid "Sorry, but you do not have the correct permissions to activate the %1$s plugin."
2419
  msgid_plural "Sorry, but you do not have the correct permissions to activate the %1$s plugins."
@@ -2421,1017 +2355,867 @@ msgstr[0] ""
2421
  msgstr[1] ""
2422
 
2423
  #. translators: %s = plugin name.
2424
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:132
2425
  #: inc/tgm-plugin-activation/tgm-config.php:132
2426
  msgid "Begin installing plugin"
2427
  msgid_plural "Begin installing plugins"
2428
  msgstr[0] ""
2429
  msgstr[1] ""
2430
 
2431
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:137
2432
  #: inc/tgm-plugin-activation/tgm-config.php:137
2433
  msgid "Begin updating plugin"
2434
  msgid_plural "Begin updating plugins"
2435
  msgstr[0] ""
2436
  msgstr[1] ""
2437
 
2438
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:142
2439
  #: inc/tgm-plugin-activation/tgm-config.php:142
2440
  msgid "Begin activating plugin"
2441
  msgid_plural "Begin activating plugins"
2442
  msgstr[0] ""
2443
  msgstr[1] ""
2444
 
2445
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:147
2446
  #: inc/tgm-plugin-activation/tgm-config.php:147
2447
  msgid "Return to Required Plugins Installer"
2448
  msgstr ""
2449
 
2450
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:148
2451
  #: inc/tgm-plugin-activation/tgm-config.php:148
2452
  msgid "Plugin activated successfully."
2453
  msgstr ""
2454
 
2455
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:149
2456
  #: inc/tgm-plugin-activation/tgm-config.php:149
2457
  msgid "The following plugin was activated successfully:"
2458
  msgstr ""
2459
 
2460
  #. translators: %s = plugin name.
2461
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:151
2462
  #: inc/tgm-plugin-activation/tgm-config.php:151
2463
  msgid "No action taken. Plugin %1$s was already active."
2464
  msgstr ""
2465
 
2466
  #. translators: %s = plugin name.
2467
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:153
2468
  #: inc/tgm-plugin-activation/tgm-config.php:153
2469
  msgid "Plugin not activated. A higher version of %s is needed for this theme. Please update the plugin."
2470
  msgstr ""
2471
 
2472
  #. translators: %s = plugin name.
2473
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:155
2474
  #: inc/tgm-plugin-activation/tgm-config.php:155
2475
  msgid "All plugins installed and activated successfully. %1$s"
2476
  msgstr ""
2477
 
2478
  #. translators: %s = dashboard link.
2479
- #: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:157
2480
  #: inc/tgm-plugin-activation/tgm-config.php:157
2481
  msgid "Please contact the administrator of this site for help."
2482
  msgstr ""
2483
 
2484
- #: dist/vk-blocks-pro/inc/vk-admin/package/class-vk-admin.php:316
2485
  #: inc/vk-admin/package/class-vk-admin.php:316
2486
  msgid "Sorry, there is no post"
2487
  msgstr ""
2488
 
2489
- #: dist/vk-blocks-pro/inc/vk-admin/package/class-vk-admin.php:370
2490
  #: inc/vk-admin/package/class-vk-admin.php:370
2491
  msgid "Vektor WordPress Information"
2492
  msgstr ""
2493
 
2494
- #: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:13
2495
  #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:13
2496
  msgid "Disable accordion"
2497
  msgstr ""
2498
 
2499
- #: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:17
2500
  #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:17
2501
  msgid "Enable accordion and default open "
2502
  msgstr ""
2503
 
2504
- #: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:21
2505
  #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:21
2506
  msgid "Enable accordion and default close "
2507
  msgstr ""
2508
 
2509
- #: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:29
2510
  #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:29
2511
  msgid "FAQ Block Setting"
2512
  msgstr ""
2513
 
2514
- #: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-pro.php:22
2515
  #: inc/vk-blocks-pro/admin-pro/admin-pro.php:22
2516
  msgid "FAQ Setting"
2517
  msgstr ""
2518
 
2519
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:11
2520
  #: inc/vk-blocks/admin/admin-balloon.php:11
2521
  msgid "Balloon Setting"
2522
  msgstr ""
2523
 
2524
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:12
2525
  #: inc/vk-blocks/admin/admin-balloon.php:12
2526
  msgid "Balloon Border Width Setting"
2527
  msgstr ""
2528
 
2529
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:22
2530
  #: inc/vk-blocks/admin/admin-balloon.php:22
2531
  msgid "Balloon Image Setting"
2532
  msgstr ""
2533
 
2534
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:89
2535
  #: inc/vk-blocks/admin/admin-balloon.php:24
2536
  msgid "You can register frequently used icon images for speech bubble blocks."
2537
  msgstr ""
2538
 
2539
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:90
2540
  #: inc/vk-blocks/admin/admin-balloon.php:25
2541
  msgid "If you change image or name that please click Save Changes button."
2542
  msgstr ""
2543
 
2544
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:116
2545
  #: inc/vk-blocks/admin/admin-balloon.php:51
2546
  msgid "Select"
2547
  msgstr ""
2548
 
2549
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:124
2550
  #: inc/vk-blocks/admin/admin-balloon.php:59
2551
  msgid "Balloon Image Name"
2552
  msgstr ""
2553
 
2554
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-license.php:12
2555
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-license.php:16
2556
  #: inc/vk-blocks/admin/admin-license.php:12
2557
  #: inc/vk-blocks/admin/admin-license.php:16
2558
  msgid "License key"
2559
  msgstr ""
2560
 
2561
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-license.php:13
2562
  #: inc/vk-blocks/admin/admin-license.php:13
2563
  msgid "Enter a valid Lightning G3 Pro Pack or Lightning Pro license key."
2564
  msgstr ""
2565
 
2566
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-license.php:14
2567
  #: inc/vk-blocks/admin/admin-license.php:14
2568
  msgid "Once you enter the license key you will be able to do a one click update from the administration screen."
2569
  msgstr ""
2570
 
2571
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-load-separate.php:11
2572
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:91
2573
  #: inc/vk-blocks/admin/admin-load-separate.php:11
2574
  #: inc/vk-blocks/admin/admin.php:91
2575
  msgid "Load Separete Setting"
2576
  msgstr ""
2577
 
2578
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-load-separate.php:12
2579
  #: inc/vk-blocks/admin/admin-load-separate.php:12
2580
  msgid "Note that the order in which CSS/JS are loaded will change."
2581
  msgstr ""
2582
 
2583
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-load-separate.php:21
2584
  #: inc/vk-blocks/admin/admin-load-separate.php:21
2585
  msgid "Load Separete Option on"
2586
  msgstr ""
2587
 
2588
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:27
2589
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:90
2590
  #: inc/vk-blocks/admin/admin-margin.php:27
2591
  #: inc/vk-blocks/admin/admin.php:90
2592
  msgid "Common Margin Setting"
2593
  msgstr ""
2594
 
2595
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:28
2596
  #: inc/vk-blocks/admin/admin-margin.php:28
2597
  msgid "Please specify the size of the common margin used for responsive spacers, etc."
2598
  msgstr ""
2599
 
2600
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:63
2601
  #: inc/vk-blocks/admin/admin.php:63
2602
  msgid "Blocks setting"
2603
  msgstr ""
2604
 
2605
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:64
2606
  #: inc/vk-blocks/admin/admin.php:64
2607
  msgctxt "label in admin menu"
2608
  msgid "Blocks"
2609
  msgstr ""
2610
 
2611
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:80
2612
  #: inc/vk-blocks/admin/admin.php:80
2613
  msgid "Blocks Setting"
2614
  msgstr ""
2615
 
2616
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:87
2617
  #: inc/vk-blocks/admin/admin.php:87
2618
  msgid "License Key"
2619
  msgstr ""
2620
 
2621
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:89
2622
  #: inc/vk-blocks/admin/admin.php:89
2623
  msgid "Balloon Block Setting"
2624
  msgstr ""
2625
 
2626
- #: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:146
2627
  #: inc/vk-blocks/admin/admin.php:146
2628
  msgid "Setting"
2629
  msgstr ""
2630
 
2631
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/page-content/index.php:124
2632
  #: inc/vk-blocks/build/blocks/page-content/index.php:124
2633
  #: src/blocks/page-content/index.php:124
2634
  #: test/phpunit/free/test-page-content.php:55
2635
  msgid "Edit this area"
2636
  msgstr ""
2637
 
2638
- #: dist/vk-blocks-pro/inc/vk-blocks/view/class-vk-blocks-postlist.php:237
2639
- #: inc/vk-blocks/view/class-vk-blocks-postlist.php:237
2640
  msgid "Post"
2641
  msgstr ""
2642
 
2643
  #. translators: %s: 投稿タイプ名
2644
- #: dist/vk-blocks-pro/inc/vk-blocks/view/class-vk-blocks-postlist.php:241
2645
- #: inc/vk-blocks/view/class-vk-blocks-postlist.php:241
2646
  msgid "There are no %ss."
2647
  msgstr ""
2648
 
2649
- #: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:222
2650
  #: inc/vk-blocks/vk-blocks-functions.php:222
2651
  msgid "Blocks"
2652
  msgstr ""
2653
 
2654
- #: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:235
2655
  #: inc/vk-blocks/vk-blocks-functions.php:235
2656
  msgid "Blocks Layout"
2657
  msgstr ""
2658
 
2659
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:55
2660
  #: inc/vk-components/package/class-vk-component-posts.php:55
2661
  msgid "Read more"
2662
  msgstr ""
2663
 
2664
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:57
2665
  #: inc/vk-components/package/class-vk-component-posts.php:57
2666
  msgid "New!!"
2667
  msgstr ""
2668
 
2669
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:261
2670
- #: inc/vk-components/package/class-vk-component-posts.php:261
2671
  msgid "More"
2672
  msgstr ""
2673
 
2674
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:297
2675
- #: inc/vk-components/package/class-vk-component-posts.php:297
2676
  msgid "Posts navigation"
2677
  msgstr ""
2678
 
2679
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:298
2680
- #: inc/vk-components/package/class-vk-component-posts.php:298
2681
  msgid "Posts"
2682
  msgstr ""
2683
 
2684
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:300
2685
- #: inc/vk-components/package/class-vk-component-posts.php:300
2686
  msgid "Page"
2687
  msgstr ""
2688
 
2689
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:751
2690
- #: inc/vk-components/package/class-vk-component-posts.php:751
2691
  msgid "Card Noborder"
2692
  msgstr ""
2693
 
2694
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:755
2695
- #: inc/vk-components/package/class-vk-component-posts.php:755
2696
  msgid "Card Intext"
2697
  msgstr ""
2698
 
2699
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:759
2700
- #: inc/vk-components/package/class-vk-component-posts.php:759
2701
  msgid "Card Horizontal"
2702
  msgstr ""
2703
 
2704
- #: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:767
2705
- #: inc/vk-components/package/class-vk-component-posts.php:767
2706
  msgctxt "post list type"
2707
  msgid "Text 1 Column"
2708
  msgstr ""
2709
 
2710
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:48
2711
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:48
2712
  msgid "CSS Optimize ( Speed up ) Settings"
2713
  msgstr ""
2714
 
2715
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:65
2716
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:65
2717
  msgid "Tree shaking"
2718
  msgstr ""
2719
 
2720
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:85
2721
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:85
2722
  msgid "Tree shaking activation settings"
2723
  msgstr ""
2724
 
2725
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:89
2726
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:89
2727
  msgid "Output only the main CSS of the page inline"
2728
  msgstr ""
2729
 
2730
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:91
2731
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:155
2732
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:91
2733
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:155
2734
  msgid "Nothing to do"
2735
  msgstr ""
2736
 
2737
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:92
2738
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:92
2739
  msgid "Active Tree shaking (Recomend)"
2740
  msgstr ""
2741
 
2742
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:109
2743
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:109
2744
  msgid "Exclude class of Tree shaking"
2745
  msgstr ""
2746
 
2747
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:113
2748
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:113
2749
  msgid "If you choose \"Active Tree shaking\" that delete the useless css.If you using active css class that please fill in class name. Ex) btn-active,slide-active,scrolled"
2750
  msgstr ""
2751
 
2752
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:129
2753
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:129
2754
  msgid "Preload CSS"
2755
  msgstr ""
2756
 
2757
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:149
2758
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:149
2759
  msgid "Preload CSS activation settings"
2760
  msgstr ""
2761
 
2762
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:152
2763
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:152
2764
  msgid "Preload css except for critical css"
2765
  msgstr ""
2766
 
2767
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:156
2768
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:156
2769
  msgid "Active Preload CSS (Recomend)"
2770
  msgstr ""
2771
 
2772
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:173
2773
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:173
2774
  msgid "Exclude class of Preload CSS"
2775
  msgstr ""
2776
 
2777
- #: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:177
2778
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:177
2779
  msgid "If you choose \"Active Preload CSS\" that css load timing was changed.If you have any do not want to preload css file that please fill in handle(id) name. Ex) pluginname_a-style,pluginname_b-css"
2780
  msgstr ""
2781
 
2782
- #: dist/vk-blocks-pro/vk-blocks.php:105
2783
  #: vk-blocks.php:105
2784
  msgid "Disabled Blocks module on VK All in One Expansion Unit. Because VK-Blocks Plugin running."
2785
  msgstr ""
2786
 
2787
- #: dist/vk-blocks-pro/vk-blocks.php:270
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2788
  #: vk-blocks.php:270
2789
  msgid "If this display does not disappear even after entering a valid license key, re-acquire the update."
2790
  msgstr ""
2791
 
2792
- #: dist/vk-blocks-pro/vk-blocks.php:271
2793
  #: vk-blocks.php:271
2794
  msgid "Re-acquisition of updates"
2795
  msgstr ""
2796
 
2797
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/alert/block.json
2798
  #: inc/vk-blocks/build/blocks/alert/block.json
2799
  #: src/blocks/alert/block.json
2800
  msgctxt "block title"
2801
  msgid "Alert"
2802
  msgstr ""
2803
 
2804
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/alert/block.json
2805
  #: inc/vk-blocks/build/blocks/alert/block.json
2806
  #: src/blocks/alert/block.json
2807
  msgctxt "block description"
2808
  msgid "A colored box with four statuses, including annotations and alerts."
2809
  msgstr ""
2810
 
2811
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/balloon/block.json
2812
  #: inc/vk-blocks/build/blocks/balloon/block.json
2813
  #: src/blocks/balloon/block.json
2814
  msgctxt "block title"
2815
  msgid "Ballon"
2816
  msgstr ""
2817
 
2818
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/balloon/block.json
2819
  #: inc/vk-blocks/build/blocks/balloon/block.json
2820
  #: src/blocks/balloon/block.json
2821
  msgctxt "block description"
2822
  msgid "These speech balloons are perfect for recreating conversations."
2823
  msgstr ""
2824
 
2825
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/border-box/block.json
2826
  #: inc/vk-blocks/build/blocks/border-box/block.json
2827
  #: src/blocks/border-box/block.json
2828
  msgctxt "block title"
2829
  msgid "Border Box"
2830
  msgstr ""
2831
 
2832
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/border-box/block.json
2833
  #: inc/vk-blocks/build/blocks/border-box/block.json
2834
  #: src/blocks/border-box/block.json
2835
  msgctxt "block description"
2836
  msgid "This is a border box where you can place headings to attract attention."
2837
  msgstr ""
2838
 
2839
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/button/block.json
2840
  #: inc/vk-blocks/build/blocks/button/block.json
2841
  #: src/blocks/button/block.json
2842
  msgctxt "block title"
2843
  msgid "Button"
2844
  msgstr ""
2845
 
2846
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/button/block.json
2847
  #: inc/vk-blocks/build/blocks/button/block.json
2848
  #: src/blocks/button/block.json
2849
  msgctxt "block description"
2850
  msgid "A button link that can display icons before and after."
2851
  msgstr ""
2852
 
2853
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/faq/block.json
2854
  #: inc/vk-blocks/build/blocks/faq/block.json
2855
  #: src/blocks/faq/block.json
2856
  msgctxt "block title"
2857
  msgid "Classic FAQ"
2858
  msgstr ""
2859
 
2860
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/faq/block.json
2861
  #: inc/vk-blocks/build/blocks/faq/block.json
2862
  #: src/blocks/faq/block.json
2863
  msgctxt "block description"
2864
  msgid "Displays a combination of questions and answers."
2865
  msgstr ""
2866
 
2867
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/faq2-a/block.json
2868
  #: inc/vk-blocks/build/blocks/faq2-a/block.json
2869
  #: src/blocks/faq2-a/block.json
2870
  msgctxt "block title"
2871
  msgid "FAQ Answer"
2872
  msgstr ""
2873
 
2874
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/faq2-a/block.json
2875
  #: inc/vk-blocks/build/blocks/faq2-a/block.json
2876
  #: src/blocks/faq2-a/block.json
2877
  msgctxt "block description"
2878
  msgid "Answer area where you can add blocks freely."
2879
  msgstr ""
2880
 
2881
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/faq2-q/block.json
2882
  #: inc/vk-blocks/build/blocks/faq2-q/block.json
2883
  #: src/blocks/faq2-q/block.json
2884
  msgctxt "block title"
2885
  msgid "FAQ Question"
2886
  msgstr ""
2887
 
2888
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/faq2-q/block.json
2889
  #: inc/vk-blocks/build/blocks/faq2-q/block.json
2890
  #: src/blocks/faq2-q/block.json
2891
  msgctxt "block description"
2892
  msgid "Question area where you can freely add blocks."
2893
  msgstr ""
2894
 
2895
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/faq2/block.json
2896
  #: inc/vk-blocks/build/blocks/faq2/block.json
2897
  #: src/blocks/faq2/block.json
2898
  msgctxt "block title"
2899
  msgid "New FAQ"
2900
  msgstr ""
2901
 
2902
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/faq2/block.json
2903
  #: inc/vk-blocks/build/blocks/faq2/block.json
2904
  #: src/blocks/faq2/block.json
2905
  msgctxt "block description"
2906
  msgid "It displays a combination of questions and answers. You can freely add blocks to the question area as well."
2907
  msgstr ""
2908
 
2909
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/flow/block.json
2910
  #: inc/vk-blocks/build/blocks/flow/block.json
2911
  #: src/blocks/flow/block.json
2912
  msgctxt "block title"
2913
  msgid "Flow"
2914
  msgstr ""
2915
 
2916
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/flow/block.json
2917
  #: inc/vk-blocks/build/blocks/flow/block.json
2918
  #: src/blocks/flow/block.json
2919
  msgctxt "block description"
2920
  msgid "Displays a sequential description in time series."
2921
  msgstr ""
2922
 
2923
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/heading/block.json
2924
  #: inc/vk-blocks/build/blocks/heading/block.json
2925
  #: src/blocks/heading/block.json
2926
  msgctxt "block title"
2927
  msgid "Heading"
2928
  msgstr ""
2929
 
2930
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/heading/block.json
2931
  #: inc/vk-blocks/build/blocks/heading/block.json
2932
  #: src/blocks/heading/block.json
2933
  msgctxt "block description"
2934
  msgid "This is a heading that allows you to set text size, subtext, icon, and margin."
2935
  msgstr ""
2936
 
2937
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/icon-outer/block.json
2938
  #: inc/vk-blocks/build/blocks/icon-outer/block.json
2939
  #: src/blocks/icon-outer/block.json
2940
  msgctxt "block title"
2941
  msgid "Icon Outer"
2942
  msgstr ""
2943
 
2944
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/icon-outer/block.json
2945
  #: inc/vk-blocks/build/blocks/icon-outer/block.json
2946
  #: src/blocks/icon-outer/block.json
2947
  msgctxt "block description"
2948
  msgid "Display the Font Awesome icons horizontally."
2949
  msgstr ""
2950
 
2951
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/icon/block.json
2952
  #: inc/vk-blocks/build/blocks/icon/block.json
2953
  #: src/blocks/icon/block.json
2954
  msgctxt "block title"
2955
  msgid "Icon"
2956
  msgstr ""
2957
 
2958
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/icon/block.json
2959
  #: inc/vk-blocks/build/blocks/icon/block.json
2960
  #: src/blocks/icon/block.json
2961
  msgctxt "block description"
2962
  msgid "Display icons with Font Awesome."
2963
  msgstr ""
2964
 
2965
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/page-content/block.json
2966
  #: inc/vk-blocks/build/blocks/page-content/block.json
2967
  #: src/blocks/page-content/block.json
2968
  msgctxt "block title"
2969
  msgid "Page Content"
2970
  msgstr ""
2971
 
2972
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/page-content/block.json
2973
  #: inc/vk-blocks/build/blocks/page-content/block.json
2974
  #: src/blocks/page-content/block.json
2975
  msgctxt "block description"
2976
  msgid "Displays the body content of the specified parent page."
2977
  msgstr ""
2978
 
2979
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/pr-blocks/block.json
2980
  #: inc/vk-blocks/build/blocks/pr-blocks/block.json
2981
  #: src/blocks/pr-blocks/block.json
2982
  msgctxt "block title"
2983
  msgid "PR Blocks (not recommended)"
2984
  msgstr ""
2985
 
2986
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/pr-blocks/block.json
2987
  #: inc/vk-blocks/build/blocks/pr-blocks/block.json
2988
  #: src/blocks/pr-blocks/block.json
2989
  msgctxt "block description"
2990
  msgid "This is a PR block where you can place images and icon. But currently, it is possible to create the same layout by combining Column Block and Icon Block, so this block is not recommended. Please check Columns category of Block Patterns."
2991
  msgstr ""
2992
 
2993
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/pr-content/block.json
2994
  #: inc/vk-blocks/build/blocks/pr-content/block.json
2995
  #: src/blocks/pr-content/block.json
2996
  msgctxt "block title"
2997
  msgid "PR Content"
2998
  msgstr ""
2999
 
3000
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/pr-content/block.json
3001
  #: inc/vk-blocks/build/blocks/pr-content/block.json
3002
  #: src/blocks/pr-content/block.json
3003
  msgctxt "block description"
3004
  msgid "This is PR content where you can place images, headlines, text, and buttons."
3005
  msgstr ""
3006
 
3007
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/spacer/block.json
3008
  #: inc/vk-blocks/build/blocks/spacer/block.json
3009
  #: src/blocks/spacer/block.json
3010
  msgctxt "block title"
3011
  msgid "Responsive Spacer"
3012
  msgstr ""
3013
 
3014
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/spacer/block.json
3015
  #: inc/vk-blocks/build/blocks/spacer/block.json
3016
  #: src/blocks/spacer/block.json
3017
  msgctxt "block description"
3018
  msgid "Use responsive spacers to get the margins right."
3019
  msgstr ""
3020
 
3021
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/staff/block.json
3022
  #: inc/vk-blocks/build/blocks/staff/block.json
3023
  #: src/blocks/staff/block.json
3024
  msgctxt "block title"
3025
  msgid "Staff"
3026
  msgstr ""
3027
 
3028
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/staff/block.json
3029
  #: inc/vk-blocks/build/blocks/staff/block.json
3030
  #: src/blocks/staff/block.json
3031
  msgctxt "block description"
3032
  msgid "Used for staff introduction, company introduction, school introduction, menu, etc."
3033
  msgstr ""
3034
 
3035
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/accordion-target/block.json
3036
  #: inc/vk-blocks/build/blocks/_pro/accordion-target/block.json
3037
  #: src/blocks/_pro/accordion-target/block.json
3038
  msgctxt "block title"
3039
  msgid "Accordion Target"
3040
  msgstr ""
3041
 
3042
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/accordion-target/block.json
3043
  #: inc/vk-blocks/build/blocks/_pro/accordion-target/block.json
3044
  #: src/blocks/_pro/accordion-target/block.json
3045
  msgctxt "block description"
3046
  msgid "This is the content area where you can add blocks freely."
3047
  msgstr ""
3048
 
3049
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/accordion-trigger/block.json
3050
  #: inc/vk-blocks/build/blocks/_pro/accordion-trigger/block.json
3051
  #: src/blocks/_pro/accordion-trigger/block.json
3052
  msgctxt "block title"
3053
  msgid "Accordion Trigger"
3054
  msgstr ""
3055
 
3056
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/accordion-trigger/block.json
3057
  #: inc/vk-blocks/build/blocks/_pro/accordion-trigger/block.json
3058
  #: src/blocks/_pro/accordion-trigger/block.json
3059
  msgctxt "block description"
3060
  msgid "This is the title area where you can freely add blocks."
3061
  msgstr ""
3062
 
3063
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/accordion/block.json
3064
  #: inc/vk-blocks/build/blocks/_pro/accordion/block.json
3065
  #: src/blocks/_pro/accordion/block.json
3066
  msgctxt "block title"
3067
  msgid "Accordion"
3068
  msgstr ""
3069
 
3070
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/accordion/block.json
3071
  #: inc/vk-blocks/build/blocks/_pro/accordion/block.json
3072
  #: src/blocks/_pro/accordion/block.json
3073
  msgctxt "block description"
3074
  msgid "Collapses and hides content when the content is long."
3075
  msgstr ""
3076
 
3077
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/animation/block.json
3078
  #: inc/vk-blocks/build/blocks/_pro/animation/block.json
3079
  #: src/blocks/_pro/animation/block.json
3080
  msgctxt "block title"
3081
  msgid "Animation"
3082
  msgstr ""
3083
 
3084
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/animation/block.json
3085
  #: inc/vk-blocks/build/blocks/_pro/animation/block.json
3086
  #: src/blocks/_pro/animation/block.json
3087
  msgctxt "block description"
3088
  msgid "Add animation to elements when scrolling the page."
3089
  msgstr ""
3090
 
3091
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/breadcrumb/block.json
3092
  #: inc/vk-blocks/build/blocks/_pro/breadcrumb/block.json
3093
  #: src/blocks/_pro/breadcrumb/block.json
3094
  msgctxt "block title"
3095
  msgid "Breadcrumb"
3096
  msgstr ""
3097
 
3098
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/breadcrumb/block.json
3099
  #: inc/vk-blocks/build/blocks/_pro/breadcrumb/block.json
3100
  #: src/blocks/_pro/breadcrumb/block.json
3101
  msgctxt "block description"
3102
  msgid "Displays breadcrumbs of a page's hierarchy, or a post's categories"
3103
  msgstr ""
3104
 
3105
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/button-outer/block.json
3106
  #: inc/vk-blocks/build/blocks/_pro/button-outer/block.json
3107
  #: src/blocks/_pro/button-outer/block.json
3108
  msgctxt "block title"
3109
  msgid "Button Outer"
3110
  msgstr ""
3111
 
3112
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/button-outer/block.json
3113
  #: inc/vk-blocks/build/blocks/_pro/button-outer/block.json
3114
  #: src/blocks/_pro/button-outer/block.json
3115
  msgctxt "block description"
3116
  msgid "Display the VK Button block horizontally."
3117
  msgstr ""
3118
 
3119
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/card-item/block.json
3120
  #: inc/vk-blocks/build/blocks/_pro/card-item/block.json
3121
  #: src/blocks/_pro/card-item/block.json
3122
  msgctxt "block title"
3123
  msgid "Card Item"
3124
  msgstr ""
3125
 
3126
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/card-item/block.json
3127
  #: inc/vk-blocks/build/blocks/_pro/card-item/block.json
3128
  #: src/blocks/_pro/card-item/block.json
3129
  msgctxt "block description"
3130
  msgid "A single item in a card block."
3131
  msgstr ""
3132
 
3133
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/card/block.json
3134
  #: inc/vk-blocks/build/blocks/_pro/card/block.json
3135
  #: src/blocks/_pro/card/block.json
3136
  msgctxt "block title"
3137
  msgid "Card"
3138
  msgstr ""
3139
 
3140
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/card/block.json
3141
  #: inc/vk-blocks/build/blocks/_pro/card/block.json
3142
  #: src/blocks/_pro/card/block.json
3143
  msgctxt "block description"
3144
  msgid "A card where you can place images, headings, text, and links."
3145
  msgstr ""
3146
 
3147
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/child-page/block.json
3148
  #: inc/vk-blocks/build/blocks/_pro/child-page/block.json
3149
  #: src/blocks/_pro/child-page/block.json
3150
  msgctxt "block title"
3151
  msgid "Child page list"
3152
  msgstr ""
3153
 
3154
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/child-page/block.json
3155
  #: inc/vk-blocks/build/blocks/_pro/child-page/block.json
3156
  #: src/blocks/_pro/child-page/block.json
3157
  msgctxt "block description"
3158
  msgid "When a parent page is specified, a list of its child pages will be displayed."
3159
  msgstr ""
3160
 
3161
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/grid-column-item/block.json
3162
  #: inc/vk-blocks/build/blocks/_pro/grid-column-item/block.json
3163
  #: src/blocks/_pro/grid-column-item/block.json
3164
  msgctxt "block title"
3165
  msgid "Grid Column Item"
3166
  msgstr ""
3167
 
3168
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/grid-column-item/block.json
3169
  #: inc/vk-blocks/build/blocks/_pro/grid-column-item/block.json
3170
  #: src/blocks/_pro/grid-column-item/block.json
3171
  msgctxt "block description"
3172
  msgid "One item in a grit column block."
3173
  msgstr ""
3174
 
3175
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/grid-column/block.json
3176
  #: inc/vk-blocks/build/blocks/_pro/grid-column/block.json
3177
  #: src/blocks/_pro/grid-column/block.json
3178
  msgctxt "block title"
3179
  msgid "Grid Column"
3180
  msgstr ""
3181
 
3182
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/grid-column/block.json
3183
  #: inc/vk-blocks/build/blocks/_pro/grid-column/block.json
3184
  #: src/blocks/_pro/grid-column/block.json
3185
  msgctxt "block description"
3186
  msgid "Set the number of columns to be displayed for each screen size."
3187
  msgstr ""
3188
 
3189
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/gridcolcard-item-body/block.json
3190
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-body/block.json
3191
  #: src/blocks/_pro/gridcolcard-item-body/block.json
3192
  msgctxt "block title"
3193
  msgid "Grid Column Card Item Body"
3194
  msgstr ""
3195
 
3196
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/gridcolcard-item-body/block.json
3197
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-body/block.json
3198
  #: src/blocks/_pro/gridcolcard-item-body/block.json
3199
  msgctxt "block description"
3200
  msgid "Body of Grid Column Card Block Item"
3201
  msgstr ""
3202
 
3203
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/gridcolcard-item-footer/block.json
3204
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-footer/block.json
3205
  #: src/blocks/_pro/gridcolcard-item-footer/block.json
3206
  msgctxt "block title"
3207
  msgid "Grid Column Card Item Footer"
3208
  msgstr ""
3209
 
3210
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/gridcolcard-item-footer/block.json
3211
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-footer/block.json
3212
  #: src/blocks/_pro/gridcolcard-item-footer/block.json
3213
  msgctxt "block description"
3214
  msgid "Footer button area of Grid Column Card Block Item"
3215
  msgstr ""
3216
 
3217
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/gridcolcard-item-header/block.json
3218
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-header/block.json
3219
  #: src/blocks/_pro/gridcolcard-item-header/block.json
3220
  msgctxt "block title"
3221
  msgid "Grid Column Card Item header"
3222
  msgstr ""
3223
 
3224
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/gridcolcard-item-header/block.json
3225
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-header/block.json
3226
  #: src/blocks/_pro/gridcolcard-item-header/block.json
3227
  msgctxt "block description"
3228
  msgid "Header image area of Grid Column Card Block Item"
3229
  msgstr ""
3230
 
3231
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/gridcolcard-item/block.json
3232
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item/block.json
3233
  #: src/blocks/_pro/gridcolcard-item/block.json
3234
  msgctxt "block title"
3235
  msgid "Grid Column Card Item"
3236
  msgstr ""
3237
 
3238
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/gridcolcard-item/block.json
3239
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item/block.json
3240
  #: src/blocks/_pro/gridcolcard-item/block.json
3241
  msgctxt "block description"
3242
  msgid "It is a block of single column of Grid Column Card."
3243
  msgstr ""
3244
 
3245
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/gridcolcard/block.json
3246
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard/block.json
3247
  #: src/blocks/_pro/gridcolcard/block.json
3248
  msgctxt "block title"
3249
  msgid "Grid Column Card"
3250
  msgstr ""
3251
 
3252
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/gridcolcard/block.json
3253
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard/block.json
3254
  #: src/blocks/_pro/gridcolcard/block.json
3255
  msgctxt "block description"
3256
  msgid "This block can flexible column layout"
3257
  msgstr ""
3258
 
3259
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/icon-card-item/block.json
3260
  #: inc/vk-blocks/build/blocks/_pro/icon-card-item/block.json
3261
  #: src/blocks/_pro/icon-card-item/block.json
3262
  msgctxt "block title"
3263
  msgid "Icon Card Item"
3264
  msgstr ""
3265
 
3266
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/icon-card-item/block.json
3267
  #: inc/vk-blocks/build/blocks/_pro/icon-card-item/block.json
3268
  #: src/blocks/_pro/icon-card-item/block.json
3269
  msgctxt "block description"
3270
  msgid "This is one item in an icon card."
3271
  msgstr ""
3272
 
3273
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/icon-card/block.json
3274
  #: inc/vk-blocks/build/blocks/_pro/icon-card/block.json
3275
  #: src/blocks/_pro/icon-card/block.json
3276
  msgctxt "block title"
3277
  msgid "Icon Card"
3278
  msgstr ""
3279
 
3280
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/icon-card/block.json
3281
  #: inc/vk-blocks/build/blocks/_pro/icon-card/block.json
3282
  #: src/blocks/_pro/icon-card/block.json
3283
  msgctxt "block description"
3284
  msgid "Display card with icons, headings, text, and links."
3285
  msgstr ""
3286
 
3287
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/outer/block.json
3288
  #: inc/vk-blocks/build/blocks/_pro/outer/block.json
3289
  #: src/blocks/_pro/outer/block.json
3290
  msgctxt "block title"
3291
  msgid "Outer"
3292
  msgstr ""
3293
 
3294
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/outer/block.json
3295
  #: inc/vk-blocks/build/blocks/_pro/outer/block.json
3296
  #: src/blocks/_pro/outer/block.json
3297
  msgctxt "block description"
3298
  msgid "Set the background image, color, and border to show the layout and divisions."
3299
  msgstr ""
3300
 
3301
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/post-list/block.json
3302
  #: inc/vk-blocks/build/blocks/_pro/post-list/block.json
3303
  #: src/blocks/_pro/post-list/block.json
3304
  msgctxt "block title"
3305
  msgid "Post list"
3306
  msgstr ""
3307
 
3308
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/post-list/block.json
3309
  #: inc/vk-blocks/build/blocks/_pro/post-list/block.json
3310
  #: src/blocks/_pro/post-list/block.json
3311
  msgctxt "block description"
3312
  msgid "Displays the list of posts by setting the post type, classification, and number of posts to display."
3313
  msgstr ""
3314
 
3315
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/select-post-list-item/block.json
3316
  #: inc/vk-blocks/build/blocks/_pro/select-post-list-item/block.json
3317
  #: src/blocks/_pro/select-post-list-item/block.json
3318
  msgctxt "block title"
3319
  msgid "Selected Post List Item"
3320
  msgstr ""
3321
 
3322
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/select-post-list-item/block.json
3323
  #: inc/vk-blocks/build/blocks/_pro/select-post-list-item/block.json
3324
  #: src/blocks/_pro/select-post-list-item/block.json
3325
  msgctxt "block description"
3326
  msgid "A single item in the select post list."
3327
  msgstr ""
3328
 
3329
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/select-post-list/block.json
3330
  #: inc/vk-blocks/build/blocks/_pro/select-post-list/block.json
3331
  #: src/blocks/_pro/select-post-list/block.json
3332
  msgctxt "block title"
3333
  msgid "Selected Post List"
3334
  msgstr ""
3335
 
3336
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/select-post-list/block.json
3337
  #: inc/vk-blocks/build/blocks/_pro/select-post-list/block.json
3338
  #: src/blocks/_pro/select-post-list/block.json
3339
  msgctxt "block description"
3340
  msgid "Displays an arbitrarily specified page with the layout of the posting list."
3341
  msgstr ""
3342
 
3343
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/slider-item/block.json
3344
  #: inc/vk-blocks/build/blocks/_pro/slider-item/block.json
3345
  #: src/blocks/_pro/slider-item/block.json
3346
  msgctxt "block title"
3347
  msgid "Slider Item"
3348
  msgstr ""
3349
 
3350
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/slider-item/block.json
3351
  #: inc/vk-blocks/build/blocks/_pro/slider-item/block.json
3352
  #: src/blocks/_pro/slider-item/block.json
3353
  msgctxt "block description"
3354
  msgid "This is one item in the slider."
3355
  msgstr ""
3356
 
3357
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/slider/block.json
3358
  #: inc/vk-blocks/build/blocks/_pro/slider/block.json
3359
  #: src/blocks/_pro/slider/block.json
3360
  msgctxt "block title"
3361
  msgid "Slider"
3362
  msgstr ""
3363
 
3364
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/slider/block.json
3365
  #: inc/vk-blocks/build/blocks/_pro/slider/block.json
3366
  #: src/blocks/_pro/slider/block.json
3367
  msgctxt "block description"
3368
  msgid "This slider allows you to place various items.Slider is do not move in edit screen."
3369
  msgstr ""
3370
 
3371
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/step-item/block.json
3372
  #: inc/vk-blocks/build/blocks/_pro/step-item/block.json
3373
  #: src/blocks/_pro/step-item/block.json
3374
  msgctxt "block title"
3375
  msgid "Step Item"
3376
  msgstr ""
3377
 
3378
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/step-item/block.json
3379
  #: inc/vk-blocks/build/blocks/_pro/step-item/block.json
3380
  #: src/blocks/_pro/step-item/block.json
3381
  msgctxt "block description"
3382
  msgid "This element sets the icon, color, and style of the step mark."
3383
  msgstr ""
3384
 
3385
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/step/block.json
3386
  #: inc/vk-blocks/build/blocks/_pro/step/block.json
3387
  #: src/blocks/_pro/step/block.json
3388
  msgctxt "block title"
3389
  msgid "Step"
3390
  msgstr ""
3391
 
3392
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/step/block.json
3393
  #: inc/vk-blocks/build/blocks/_pro/step/block.json
3394
  #: src/blocks/_pro/step/block.json
3395
  msgctxt "block description"
3396
  msgid "Set and display step marks, which are useful when explaining the order."
3397
  msgstr ""
3398
 
3399
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/table-of-contents-new/block.json
3400
  #: inc/vk-blocks/build/blocks/_pro/table-of-contents-new/block.json
3401
  #: src/blocks/_pro/table-of-contents-new/block.json
3402
  msgctxt "block title"
3403
  msgid "Table of Contents"
3404
  msgstr ""
3405
 
3406
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/table-of-contents-new/block.json
3407
  #: inc/vk-blocks/build/blocks/_pro/table-of-contents-new/block.json
3408
  #: src/blocks/_pro/table-of-contents-new/block.json
3409
  msgctxt "block description"
3410
  msgid "This is a table of contents that is automatically generated according to the headings when added."
3411
  msgstr ""
3412
 
3413
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/timeline-item/block.json
3414
  #: inc/vk-blocks/build/blocks/_pro/timeline-item/block.json
3415
  #: src/blocks/_pro/timeline-item/block.json
3416
  msgctxt "block title"
3417
  msgid "Timeline Item"
3418
  msgstr ""
3419
 
3420
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/timeline-item/block.json
3421
  #: inc/vk-blocks/build/blocks/_pro/timeline-item/block.json
3422
  #: src/blocks/_pro/timeline-item/block.json
3423
  msgctxt "block description"
3424
  msgid "This element sets the label, color, and style of the timeline."
3425
  msgstr ""
3426
 
3427
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/timeline/block.json
3428
  #: inc/vk-blocks/build/blocks/_pro/timeline/block.json
3429
  #: src/blocks/_pro/timeline/block.json
3430
  msgctxt "block title"
3431
  msgid "Timeline"
3432
  msgstr ""
3433
 
3434
- #: dist/vk-blocks-pro/inc/vk-blocks/build/blocks/_pro/timeline/block.json
3435
  #: inc/vk-blocks/build/blocks/_pro/timeline/block.json
3436
  #: src/blocks/_pro/timeline/block.json
3437
  msgctxt "block description"
2
  # This file is distributed under the same license as the VK Blocks Pro plugin.
3
  msgid ""
4
  msgstr ""
5
+ "Project-Id-Version: VK Blocks Pro 1.39.0.0\n"
6
  "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/vk-blocks-pro\n"
7
  "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
8
  "Language-Team: LANGUAGE <LL@li.org>\n"
9
  "MIME-Version: 1.0\n"
10
  "Content-Type: text/plain; charset=UTF-8\n"
11
  "Content-Transfer-Encoding: 8bit\n"
12
+ "POT-Creation-Date: 2022-06-30T02:59:20+00:00\n"
13
  "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
14
+ "X-Generator: WP-CLI 2.6.0\n"
15
  "X-Domain: vk-blocks\n"
16
 
17
  #: src/blocks/_pro/accordion/index.js:22
275
  msgstr ""
276
 
277
  #: src/blocks/_pro/grid-column-item/edit.js:102
278
+ #: src/blocks/_pro/gridcolcard/edit-common.js:159
279
  msgid "Color Settings"
280
  msgstr ""
281
 
282
  #: src/blocks/_pro/grid-column-item/edit.js:104
283
+ #: src/blocks/_pro/gridcolcard/edit-common.js:161
284
  #: src/blocks/button/edit.js:681
285
  #: src/blocks/heading/edit.js:324
286
  msgid "Text Color"
287
  msgstr ""
288
 
289
  #: src/blocks/_pro/grid-column-item/edit.js:110
290
+ #: src/blocks/_pro/gridcolcard/edit-common.js:167
291
  #: src/blocks/border-box/edit.js:216
292
  #: src/blocks/button/edit.js:664
293
  msgid "Background Color"
312
  msgstr ""
313
 
314
  #: src/blocks/_pro/grid-column-item/edit.js:169
 
315
  #: inc/vk-blocks/admin/admin-margin.php:31
316
  msgid "Unit"
317
  msgstr ""
321
  #: src/blocks/icon-outer/edit.js:151
322
  #: src/blocks/icon/edit.js:143
323
  #: src/components/advanced-unit-control/index.js:18
 
324
  #: inc/vk-blocks/admin/admin-margin.php:10
325
  msgid "px"
326
  msgstr ""
330
  #: src/blocks/icon-outer/edit.js:155
331
  #: src/blocks/icon/edit.js:147
332
  #: src/components/advanced-unit-control/index.js:22
 
333
  #: inc/vk-blocks/admin/admin-margin.php:14
334
  msgid "em"
335
  msgstr ""
339
  #: src/blocks/icon-outer/edit.js:159
340
  #: src/blocks/icon/edit.js:151
341
  #: src/components/advanced-unit-control/index.js:26
 
342
  #: inc/vk-blocks/admin/admin-margin.php:18
343
  msgid "rem"
344
  msgstr ""
367
  msgid "You can create a variety of layouts with grid column card blocks."
368
  msgstr ""
369
 
370
+ #: src/blocks/_pro/gridcolcard-item/edit.js:218
371
  #: src/blocks/_pro/select-post-list-item/edit.js:66
372
  #: src/blocks/button/edit.js:216
373
  msgid "Unlink"
374
  msgstr ""
375
 
376
+ #: src/blocks/_pro/gridcolcard-item/edit.js:219
377
  #: src/blocks/button/edit.js:217
378
  msgid "Input Link URL"
379
  msgstr ""
380
 
381
+ #: src/blocks/_pro/gridcolcard-item/edit.js:258
382
  #: src/blocks/_pro/select-post-list-item/edit.js:102
383
  #: src/blocks/button/edit.js:256
384
  msgid "Submit"
385
  msgstr ""
386
 
387
+ #: src/blocks/_pro/gridcolcard-item/edit.js:272
388
  msgid "Edit mode"
389
  msgstr ""
390
 
391
+ #: src/blocks/_pro/gridcolcard-item/edit.js:282
392
  msgid "All columns"
393
  msgstr ""
394
 
395
+ #: src/blocks/_pro/gridcolcard-item/edit.js:290
396
  msgid "This column only"
397
  msgstr ""
398
 
399
+ #: src/blocks/_pro/gridcolcard-item/edit.js:295
400
  msgid "Edit Lock"
401
  msgstr ""
402
 
403
+ #: src/blocks/_pro/gridcolcard-item/edit.js:298
404
  msgid "Lock edits this block from the parent and other Grid Column Item block"
405
  msgstr ""
406
 
407
+ #: src/blocks/_pro/gridcolcard-item/edit.js:309
408
  msgid "Column Setting"
409
  msgstr ""
410
 
411
+ #: src/blocks/_pro/gridcolcard-item/edit.js:312
412
  #: src/blocks/_pro/icon-card-item/edit.js:120
413
  #: src/blocks/pr-blocks/edit.js:254
414
  msgid "Link URL:"
415
  msgstr ""
416
 
417
+ #: src/blocks/_pro/gridcolcard-item/edit.js:318
418
  #: src/blocks/_pro/icon-card-item/edit.js:128
419
  #: src/blocks/button/edit.js:242
420
  #: src/blocks/icon/edit.js:254
423
  msgid "Open link new tab."
424
  msgstr ""
425
 
426
+ #: src/blocks/_pro/gridcolcard-item/edit.js:325
427
  msgid "If you set a link URL, do not place the link element (text or button) in the Grid Column Card Item. It may not be displayed correctly."
428
  msgstr ""
429
 
430
+ #: src/blocks/_pro/gridcolcard-item/edit.js:329
431
  msgid "Make sure that no link is specified for the image block, etc."
432
  msgstr ""
433
 
434
+ #: src/blocks/_pro/gridcolcard/edit-common.js:117
435
  msgid "Image fit to column"
436
  msgstr ""
437
 
438
+ #: src/blocks/_pro/gridcolcard/edit-common.js:129
439
  msgid "Column footer button area"
440
  msgstr ""
441
 
442
+ #: src/blocks/_pro/gridcolcard/edit-common.js:139
443
  #: src/blocks/heading/edit.js:370
444
  msgid "Display"
445
  msgstr ""
446
 
447
+ #: src/blocks/_pro/gridcolcard/edit-common.js:147
448
  #: src/blocks/_pro/slider/edit.js:374
449
  #: src/blocks/heading/edit.js:374
450
  msgid "Hide"
451
  msgstr ""
452
 
453
+ #: src/blocks/_pro/gridcolcard/edit-common.js:155
 
454
  #: inc/vk-blocks/admin/admin-balloon.php:54
455
  msgid "Delete"
456
  msgstr ""
457
 
458
+ #: src/blocks/_pro/gridcolcard/edit-common.js:174
459
  msgid "Column Radius"
460
  msgstr ""
461
 
462
+ #: src/blocks/_pro/gridcolcard/edit-common.js:180
463
  #: src/blocks/balloon/edit.js:319
464
  #: src/extensions/core/image/style.js:15
465
  #: src/extensions/core/table/style.js:12
466
  msgid "Border"
467
  msgstr ""
468
 
469
+ #: src/blocks/_pro/gridcolcard/edit-common.js:189
470
  #: src/blocks/border-box/edit.js:207
471
  #: src/extensions/core/group/style.js:47
472
  msgid "Border Color"
473
  msgstr ""
474
 
475
+ #: src/blocks/_pro/gridcolcard/edit-common.js:65
476
  msgid "Column padding"
477
  msgstr ""
478
 
479
+ #: src/blocks/_pro/gridcolcard/edit-common.js:73
480
  msgid "Column header media area"
481
  msgstr ""
482
 
793
  #: src/blocks/_pro/slider/edit.js:246
794
  #: src/blocks/button/edit.js:376
795
  #: src/components/advanced-viewport-control/index.js:39
 
796
  #: inc/vk-blocks/admin/admin-margin.php:55
797
  msgid "Mobile"
798
  msgstr ""
801
  #: src/blocks/_pro/slider/edit.js:235
802
  #: src/blocks/button/edit.js:441
803
  #: src/components/advanced-viewport-control/index.js:31
 
804
  #: inc/vk-blocks/admin/admin-margin.php:54
805
  msgid "Tablet"
806
  msgstr ""
809
  #: src/blocks/_pro/slider/edit.js:224
810
  #: src/blocks/button/edit.js:506
811
  #: src/components/advanced-viewport-control/index.js:25
 
812
  #: inc/vk-blocks/admin/admin-margin.php:53
813
  msgid "PC"
814
  msgstr ""
1027
  #: src/blocks/button/edit.js:610
1028
  #: src/blocks/icon/edit.js:261
1029
  #: src/blocks/staff/edit.js:199
 
 
 
1030
  #: inc/term-color/package/class.term-color.php:41
1031
  #: inc/term-color/package/class.term-color.php:56
1032
  #: inc/term-color/package/class.term-color.php:130
1259
  #: src/blocks/border-box/edit.js:192
1260
  #: src/blocks/icon-outer/edit.js:132
1261
  #: src/blocks/icon/edit.js:124
 
1262
  #: inc/vk-blocks/admin/admin-margin.php:50
1263
  msgid "Margin"
1264
  msgstr ""
1313
 
1314
  #: src/blocks/button/edit.js:290
1315
  #: src/blocks/spacer/edit.js:105
 
1316
  #: inc/vk-blocks/vk-blocks-functions.php:31
1317
  msgid "Large"
1318
  msgstr ""
1320
  #: src/blocks/button/edit.js:306
1321
  #: src/blocks/spacer/edit.js:85
1322
  #: src/extensions/common/inline-font-size/index.js:84
 
1323
  #: inc/vk-blocks/vk-blocks-functions.php:23
1324
  msgid "Small"
1325
  msgstr ""
1754
  msgstr ""
1755
 
1756
  #: src/blocks/spacer/edit.js:95
 
1757
  #: inc/vk-blocks/vk-blocks-functions.php:27
1758
  msgid "Medium"
1759
  msgstr ""
1828
  msgstr ""
1829
 
1830
  #: src/components/column-layout-control/index.js:26
1831
+ #: inc/vk-components/package/class-vk-component-posts.php:760
 
1832
  msgid "Card"
1833
  msgstr ""
1834
 
1845
  msgstr ""
1846
 
1847
  #: src/components/column-layout-control/index.js:42
1848
+ #: inc/vk-components/package/class-vk-component-posts.php:776
 
1849
  msgid "Media"
1850
  msgstr ""
1851
 
2247
  msgid "https://vektor-inc.co.jp"
2248
  msgstr ""
2249
 
 
2250
  #: inc/admin-notices.php:28
2251
  msgid "We've released VK Blocks Pro!"
2252
  msgstr ""
2253
 
2254
  #. translators: 1: opening a tag, 2: closing a tag
 
2255
  #: inc/admin-notices.php:35
2256
  msgid "Thank you for using VK Blocks. We've released VK Blocks Pro. It has more custom blocks to build web site more easily. If you are interested in VK Blocks Pro, Please read %1$s this post %2$s for more details."
2257
  msgstr ""
2258
 
 
 
2259
  #: inc/admin-notices.php:39
2260
  #: inc/admin-notices.php:45
2261
  msgid "https://www.vektor-inc.co.jp/service/wordpress-plugins/vk-blocks/"
2262
  msgstr ""
2263
 
 
2264
  #: inc/admin-notices.php:46
2265
  msgid "See more"
2266
  msgstr ""
2267
 
 
2268
  #: inc/admin-notices.php:49
2269
  msgid "Dismiss this notice"
2270
  msgstr ""
2271
 
 
2272
  #: inc/font-awesome/class-vk-blocks-font-awesome-api.php:73
2273
  msgid "Setting saved."
2274
  msgstr ""
2275
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2276
  #: inc/tgm-plugin-activation/tgm-config.php:72
2277
  msgid "Install Required Plugins"
2278
  msgstr ""
2279
 
 
2280
  #: inc/tgm-plugin-activation/tgm-config.php:73
2281
  msgid "Install Plugins"
2282
  msgstr ""
2283
 
2284
  #. translators: %s = plugin name.
 
2285
  #: inc/tgm-plugin-activation/tgm-config.php:75
2286
  msgid "Installing Plugin: %s"
2287
  msgstr ""
2288
 
2289
  #. translators: %s = plugin name.
 
2290
  #: inc/tgm-plugin-activation/tgm-config.php:76
2291
  msgid "Something went wrong with the plugin API."
2292
  msgstr ""
2293
 
2294
  #. translators:
 
2295
  #: inc/tgm-plugin-activation/tgm-config.php:78
2296
  msgid "This plugin requires the following plugin: %1$s."
2297
  msgid_plural "This plugin requires the following plugins: %1$s."
2299
  msgstr[1] ""
2300
 
2301
  #. translators: %s = plugin name.
 
2302
  #: inc/tgm-plugin-activation/tgm-config.php:84
2303
  msgid "This plugin recommends the following plugin: %1$s.<br>Many additional functions are available for free."
2304
  msgid_plural "This plugin recommends the following plugins: %1$s.<br>Many additional functions are available for free."
2306
  msgstr[1] ""
2307
 
2308
  #. translators: %s = plugin name.
 
2309
  #: inc/tgm-plugin-activation/tgm-config.php:90
2310
  msgid "Sorry, but you do not have the correct permissions to install the %1$s plugin."
2311
  msgid_plural "Sorry, but you do not have the correct permissions to install the %1$s plugins."
2313
  msgstr[1] ""
2314
 
2315
  #. translators: %s = plugin name.
 
2316
  #: inc/tgm-plugin-activation/tgm-config.php:96
2317
  msgid "The following plugin needs to be updated to its latest version to ensure maximum compatibility with this plugin: %1$s."
2318
  msgid_plural "The following plugins need to be updated to their latest version to ensure maximum compatibility with this plugin: %1$s."
2320
  msgstr[1] ""
2321
 
2322
  #. translators: %s = plugin name.
 
2323
  #: inc/tgm-plugin-activation/tgm-config.php:102
2324
  msgid "There is an update available for: %1$s."
2325
  msgid_plural "There are updates available for the following plugins: %1$s."
2327
  msgstr[1] ""
2328
 
2329
  #. translators: %s = plugin name.
 
2330
  #: inc/tgm-plugin-activation/tgm-config.php:108
2331
  msgid "Sorry, but you do not have the correct permissions to update the %1$s plugin."
2332
  msgid_plural "Sorry, but you do not have the correct permissions to update the %1$s plugins."
2334
  msgstr[1] ""
2335
 
2336
  #. translators: %s = plugin name.
 
2337
  #: inc/tgm-plugin-activation/tgm-config.php:114
2338
  msgid "The following required plugin is currently inactive: %1$s."
2339
  msgid_plural "The following required plugins are currently inactive: %1$s."
2341
  msgstr[1] ""
2342
 
2343
  #. translators: %s = plugin name.
 
2344
  #: inc/tgm-plugin-activation/tgm-config.php:120
2345
  msgid "The following recommended plugin is currently inactive: %1$s."
2346
  msgid_plural "The following recommended plugins are currently inactive: %1$s."
2348
  msgstr[1] ""
2349
 
2350
  #. translators: %s = plugin name.
 
2351
  #: inc/tgm-plugin-activation/tgm-config.php:126
2352
  msgid "Sorry, but you do not have the correct permissions to activate the %1$s plugin."
2353
  msgid_plural "Sorry, but you do not have the correct permissions to activate the %1$s plugins."
2355
  msgstr[1] ""
2356
 
2357
  #. translators: %s = plugin name.
 
2358
  #: inc/tgm-plugin-activation/tgm-config.php:132
2359
  msgid "Begin installing plugin"
2360
  msgid_plural "Begin installing plugins"
2361
  msgstr[0] ""
2362
  msgstr[1] ""
2363
 
 
2364
  #: inc/tgm-plugin-activation/tgm-config.php:137
2365
  msgid "Begin updating plugin"
2366
  msgid_plural "Begin updating plugins"
2367
  msgstr[0] ""
2368
  msgstr[1] ""
2369
 
 
2370
  #: inc/tgm-plugin-activation/tgm-config.php:142
2371
  msgid "Begin activating plugin"
2372
  msgid_plural "Begin activating plugins"
2373
  msgstr[0] ""
2374
  msgstr[1] ""
2375
 
 
2376
  #: inc/tgm-plugin-activation/tgm-config.php:147
2377
  msgid "Return to Required Plugins Installer"
2378
  msgstr ""
2379
 
 
2380
  #: inc/tgm-plugin-activation/tgm-config.php:148
2381
  msgid "Plugin activated successfully."
2382
  msgstr ""
2383
 
 
2384
  #: inc/tgm-plugin-activation/tgm-config.php:149
2385
  msgid "The following plugin was activated successfully:"
2386
  msgstr ""
2387
 
2388
  #. translators: %s = plugin name.
 
2389
  #: inc/tgm-plugin-activation/tgm-config.php:151
2390
  msgid "No action taken. Plugin %1$s was already active."
2391
  msgstr ""
2392
 
2393
  #. translators: %s = plugin name.
 
2394
  #: inc/tgm-plugin-activation/tgm-config.php:153
2395
  msgid "Plugin not activated. A higher version of %s is needed for this theme. Please update the plugin."
2396
  msgstr ""
2397
 
2398
  #. translators: %s = plugin name.
 
2399
  #: inc/tgm-plugin-activation/tgm-config.php:155
2400
  msgid "All plugins installed and activated successfully. %1$s"
2401
  msgstr ""
2402
 
2403
  #. translators: %s = dashboard link.
 
2404
  #: inc/tgm-plugin-activation/tgm-config.php:157
2405
  msgid "Please contact the administrator of this site for help."
2406
  msgstr ""
2407
 
 
2408
  #: inc/vk-admin/package/class-vk-admin.php:316
2409
  msgid "Sorry, there is no post"
2410
  msgstr ""
2411
 
 
2412
  #: inc/vk-admin/package/class-vk-admin.php:370
2413
  msgid "Vektor WordPress Information"
2414
  msgstr ""
2415
 
 
2416
  #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:13
2417
  msgid "Disable accordion"
2418
  msgstr ""
2419
 
 
2420
  #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:17
2421
  msgid "Enable accordion and default open "
2422
  msgstr ""
2423
 
 
2424
  #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:21
2425
  msgid "Enable accordion and default close "
2426
  msgstr ""
2427
 
 
2428
  #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:29
2429
  msgid "FAQ Block Setting"
2430
  msgstr ""
2431
 
 
2432
  #: inc/vk-blocks-pro/admin-pro/admin-pro.php:22
2433
  msgid "FAQ Setting"
2434
  msgstr ""
2435
 
 
2436
  #: inc/vk-blocks/admin/admin-balloon.php:11
2437
  msgid "Balloon Setting"
2438
  msgstr ""
2439
 
 
2440
  #: inc/vk-blocks/admin/admin-balloon.php:12
2441
  msgid "Balloon Border Width Setting"
2442
  msgstr ""
2443
 
 
2444
  #: inc/vk-blocks/admin/admin-balloon.php:22
2445
  msgid "Balloon Image Setting"
2446
  msgstr ""
2447
 
 
2448
  #: inc/vk-blocks/admin/admin-balloon.php:24
2449
  msgid "You can register frequently used icon images for speech bubble blocks."
2450
  msgstr ""
2451
 
 
2452
  #: inc/vk-blocks/admin/admin-balloon.php:25
2453
  msgid "If you change image or name that please click Save Changes button."
2454
  msgstr ""
2455
 
 
2456
  #: inc/vk-blocks/admin/admin-balloon.php:51
2457
  msgid "Select"
2458
  msgstr ""
2459
 
 
2460
  #: inc/vk-blocks/admin/admin-balloon.php:59
2461
  msgid "Balloon Image Name"
2462
  msgstr ""
2463
 
 
 
2464
  #: inc/vk-blocks/admin/admin-license.php:12
2465
  #: inc/vk-blocks/admin/admin-license.php:16
2466
  msgid "License key"
2467
  msgstr ""
2468
 
 
2469
  #: inc/vk-blocks/admin/admin-license.php:13
2470
  msgid "Enter a valid Lightning G3 Pro Pack or Lightning Pro license key."
2471
  msgstr ""
2472
 
 
2473
  #: inc/vk-blocks/admin/admin-license.php:14
2474
  msgid "Once you enter the license key you will be able to do a one click update from the administration screen."
2475
  msgstr ""
2476
 
 
 
2477
  #: inc/vk-blocks/admin/admin-load-separate.php:11
2478
  #: inc/vk-blocks/admin/admin.php:91
2479
  msgid "Load Separete Setting"
2480
  msgstr ""
2481
 
 
2482
  #: inc/vk-blocks/admin/admin-load-separate.php:12
2483
  msgid "Note that the order in which CSS/JS are loaded will change."
2484
  msgstr ""
2485
 
 
2486
  #: inc/vk-blocks/admin/admin-load-separate.php:21
2487
  msgid "Load Separete Option on"
2488
  msgstr ""
2489
 
 
 
2490
  #: inc/vk-blocks/admin/admin-margin.php:27
2491
  #: inc/vk-blocks/admin/admin.php:90
2492
  msgid "Common Margin Setting"
2493
  msgstr ""
2494
 
 
2495
  #: inc/vk-blocks/admin/admin-margin.php:28
2496
  msgid "Please specify the size of the common margin used for responsive spacers, etc."
2497
  msgstr ""
2498
 
 
2499
  #: inc/vk-blocks/admin/admin.php:63
2500
  msgid "Blocks setting"
2501
  msgstr ""
2502
 
 
2503
  #: inc/vk-blocks/admin/admin.php:64
2504
  msgctxt "label in admin menu"
2505
  msgid "Blocks"
2506
  msgstr ""
2507
 
 
2508
  #: inc/vk-blocks/admin/admin.php:80
2509
  msgid "Blocks Setting"
2510
  msgstr ""
2511
 
 
2512
  #: inc/vk-blocks/admin/admin.php:87
2513
  msgid "License Key"
2514
  msgstr ""
2515
 
 
2516
  #: inc/vk-blocks/admin/admin.php:89
2517
  msgid "Balloon Block Setting"
2518
  msgstr ""
2519
 
 
2520
  #: inc/vk-blocks/admin/admin.php:146
2521
  msgid "Setting"
2522
  msgstr ""
2523
 
 
2524
  #: inc/vk-blocks/build/blocks/page-content/index.php:124
2525
  #: src/blocks/page-content/index.php:124
2526
  #: test/phpunit/free/test-page-content.php:55
2527
  msgid "Edit this area"
2528
  msgstr ""
2529
 
2530
+ #: inc/vk-blocks/view/class-vk-blocks-postlist.php:246
 
2531
  msgid "Post"
2532
  msgstr ""
2533
 
2534
  #. translators: %s: 投稿タイプ名
2535
+ #: inc/vk-blocks/view/class-vk-blocks-postlist.php:250
 
2536
  msgid "There are no %ss."
2537
  msgstr ""
2538
 
 
2539
  #: inc/vk-blocks/vk-blocks-functions.php:222
2540
  msgid "Blocks"
2541
  msgstr ""
2542
 
 
2543
  #: inc/vk-blocks/vk-blocks-functions.php:235
2544
  msgid "Blocks Layout"
2545
  msgstr ""
2546
 
 
2547
  #: inc/vk-components/package/class-vk-component-posts.php:55
2548
  msgid "Read more"
2549
  msgstr ""
2550
 
 
2551
  #: inc/vk-components/package/class-vk-component-posts.php:57
2552
  msgid "New!!"
2553
  msgstr ""
2554
 
2555
+ #: inc/vk-components/package/class-vk-component-posts.php:267
 
2556
  msgid "More"
2557
  msgstr ""
2558
 
2559
+ #: inc/vk-components/package/class-vk-component-posts.php:303
 
2560
  msgid "Posts navigation"
2561
  msgstr ""
2562
 
2563
+ #: inc/vk-components/package/class-vk-component-posts.php:304
 
2564
  msgid "Posts"
2565
  msgstr ""
2566
 
2567
+ #: inc/vk-components/package/class-vk-component-posts.php:306
 
2568
  msgid "Page"
2569
  msgstr ""
2570
 
2571
+ #: inc/vk-components/package/class-vk-component-posts.php:764
 
2572
  msgid "Card Noborder"
2573
  msgstr ""
2574
 
2575
+ #: inc/vk-components/package/class-vk-component-posts.php:768
 
2576
  msgid "Card Intext"
2577
  msgstr ""
2578
 
2579
+ #: inc/vk-components/package/class-vk-component-posts.php:772
 
2580
  msgid "Card Horizontal"
2581
  msgstr ""
2582
 
2583
+ #: inc/vk-components/package/class-vk-component-posts.php:780
 
2584
  msgctxt "post list type"
2585
  msgid "Text 1 Column"
2586
  msgstr ""
2587
 
 
2588
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:48
2589
  msgid "CSS Optimize ( Speed up ) Settings"
2590
  msgstr ""
2591
 
 
2592
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:65
2593
  msgid "Tree shaking"
2594
  msgstr ""
2595
 
 
2596
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:85
2597
  msgid "Tree shaking activation settings"
2598
  msgstr ""
2599
 
 
2600
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:89
2601
  msgid "Output only the main CSS of the page inline"
2602
  msgstr ""
2603
 
 
 
2604
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:91
2605
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:155
2606
  msgid "Nothing to do"
2607
  msgstr ""
2608
 
 
2609
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:92
2610
  msgid "Active Tree shaking (Recomend)"
2611
  msgstr ""
2612
 
 
2613
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:109
2614
  msgid "Exclude class of Tree shaking"
2615
  msgstr ""
2616
 
 
2617
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:113
2618
  msgid "If you choose \"Active Tree shaking\" that delete the useless css.If you using active css class that please fill in class name. Ex) btn-active,slide-active,scrolled"
2619
  msgstr ""
2620
 
 
2621
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:129
2622
  msgid "Preload CSS"
2623
  msgstr ""
2624
 
 
2625
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:149
2626
  msgid "Preload CSS activation settings"
2627
  msgstr ""
2628
 
 
2629
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:152
2630
  msgid "Preload css except for critical css"
2631
  msgstr ""
2632
 
 
2633
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:156
2634
  msgid "Active Preload CSS (Recomend)"
2635
  msgstr ""
2636
 
 
2637
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:173
2638
  msgid "Exclude class of Preload CSS"
2639
  msgstr ""
2640
 
 
2641
  #: inc/vk-css-optimize/package/class-vk-css-optimize.php:177
2642
  msgid "If you choose \"Active Preload CSS\" that css load timing was changed.If you have any do not want to preload css file that please fill in handle(id) name. Ex) pluginname_a-style,pluginname_b-css"
2643
  msgstr ""
2644
 
 
2645
  #: vk-blocks.php:105
2646
  msgid "Disabled Blocks module on VK All in One Expansion Unit. Because VK-Blocks Plugin running."
2647
  msgstr ""
2648
 
2649
+ #: vk-blocks.php:229
2650
+ msgid "License Key has no registered."
2651
+ msgstr ""
2652
+
2653
+ #: vk-blocks.php:234
2654
+ msgid "The VK Blocks Pro license is invalid."
2655
+ msgstr ""
2656
+
2657
+ #: vk-blocks.php:258
2658
+ msgid "Enter a valid license key for any of the following products on the settings screen."
2659
+ msgstr ""
2660
+
2661
+ #: vk-blocks.php:267
2662
+ msgid "Enter the license key"
2663
+ msgstr ""
2664
+
2665
  #: vk-blocks.php:270
2666
  msgid "If this display does not disappear even after entering a valid license key, re-acquire the update."
2667
  msgstr ""
2668
 
 
2669
  #: vk-blocks.php:271
2670
  msgid "Re-acquisition of updates"
2671
  msgstr ""
2672
 
 
2673
  #: inc/vk-blocks/build/blocks/alert/block.json
2674
  #: src/blocks/alert/block.json
2675
  msgctxt "block title"
2676
  msgid "Alert"
2677
  msgstr ""
2678
 
 
2679
  #: inc/vk-blocks/build/blocks/alert/block.json
2680
  #: src/blocks/alert/block.json
2681
  msgctxt "block description"
2682
  msgid "A colored box with four statuses, including annotations and alerts."
2683
  msgstr ""
2684
 
 
2685
  #: inc/vk-blocks/build/blocks/balloon/block.json
2686
  #: src/blocks/balloon/block.json
2687
  msgctxt "block title"
2688
  msgid "Ballon"
2689
  msgstr ""
2690
 
 
2691
  #: inc/vk-blocks/build/blocks/balloon/block.json
2692
  #: src/blocks/balloon/block.json
2693
  msgctxt "block description"
2694
  msgid "These speech balloons are perfect for recreating conversations."
2695
  msgstr ""
2696
 
 
2697
  #: inc/vk-blocks/build/blocks/border-box/block.json
2698
  #: src/blocks/border-box/block.json
2699
  msgctxt "block title"
2700
  msgid "Border Box"
2701
  msgstr ""
2702
 
 
2703
  #: inc/vk-blocks/build/blocks/border-box/block.json
2704
  #: src/blocks/border-box/block.json
2705
  msgctxt "block description"
2706
  msgid "This is a border box where you can place headings to attract attention."
2707
  msgstr ""
2708
 
 
2709
  #: inc/vk-blocks/build/blocks/button/block.json
2710
  #: src/blocks/button/block.json
2711
  msgctxt "block title"
2712
  msgid "Button"
2713
  msgstr ""
2714
 
 
2715
  #: inc/vk-blocks/build/blocks/button/block.json
2716
  #: src/blocks/button/block.json
2717
  msgctxt "block description"
2718
  msgid "A button link that can display icons before and after."
2719
  msgstr ""
2720
 
 
2721
  #: inc/vk-blocks/build/blocks/faq/block.json
2722
  #: src/blocks/faq/block.json
2723
  msgctxt "block title"
2724
  msgid "Classic FAQ"
2725
  msgstr ""
2726
 
 
2727
  #: inc/vk-blocks/build/blocks/faq/block.json
2728
  #: src/blocks/faq/block.json
2729
  msgctxt "block description"
2730
  msgid "Displays a combination of questions and answers."
2731
  msgstr ""
2732
 
 
2733
  #: inc/vk-blocks/build/blocks/faq2-a/block.json
2734
  #: src/blocks/faq2-a/block.json
2735
  msgctxt "block title"
2736
  msgid "FAQ Answer"
2737
  msgstr ""
2738
 
 
2739
  #: inc/vk-blocks/build/blocks/faq2-a/block.json
2740
  #: src/blocks/faq2-a/block.json
2741
  msgctxt "block description"
2742
  msgid "Answer area where you can add blocks freely."
2743
  msgstr ""
2744
 
 
2745
  #: inc/vk-blocks/build/blocks/faq2-q/block.json
2746
  #: src/blocks/faq2-q/block.json
2747
  msgctxt "block title"
2748
  msgid "FAQ Question"
2749
  msgstr ""
2750
 
 
2751
  #: inc/vk-blocks/build/blocks/faq2-q/block.json
2752
  #: src/blocks/faq2-q/block.json
2753
  msgctxt "block description"
2754
  msgid "Question area where you can freely add blocks."
2755
  msgstr ""
2756
 
 
2757
  #: inc/vk-blocks/build/blocks/faq2/block.json
2758
  #: src/blocks/faq2/block.json
2759
  msgctxt "block title"
2760
  msgid "New FAQ"
2761
  msgstr ""
2762
 
 
2763
  #: inc/vk-blocks/build/blocks/faq2/block.json
2764
  #: src/blocks/faq2/block.json
2765
  msgctxt "block description"
2766
  msgid "It displays a combination of questions and answers. You can freely add blocks to the question area as well."
2767
  msgstr ""
2768
 
 
2769
  #: inc/vk-blocks/build/blocks/flow/block.json
2770
  #: src/blocks/flow/block.json
2771
  msgctxt "block title"
2772
  msgid "Flow"
2773
  msgstr ""
2774
 
 
2775
  #: inc/vk-blocks/build/blocks/flow/block.json
2776
  #: src/blocks/flow/block.json
2777
  msgctxt "block description"
2778
  msgid "Displays a sequential description in time series."
2779
  msgstr ""
2780
 
 
2781
  #: inc/vk-blocks/build/blocks/heading/block.json
2782
  #: src/blocks/heading/block.json
2783
  msgctxt "block title"
2784
  msgid "Heading"
2785
  msgstr ""
2786
 
 
2787
  #: inc/vk-blocks/build/blocks/heading/block.json
2788
  #: src/blocks/heading/block.json
2789
  msgctxt "block description"
2790
  msgid "This is a heading that allows you to set text size, subtext, icon, and margin."
2791
  msgstr ""
2792
 
 
2793
  #: inc/vk-blocks/build/blocks/icon-outer/block.json
2794
  #: src/blocks/icon-outer/block.json
2795
  msgctxt "block title"
2796
  msgid "Icon Outer"
2797
  msgstr ""
2798
 
 
2799
  #: inc/vk-blocks/build/blocks/icon-outer/block.json
2800
  #: src/blocks/icon-outer/block.json
2801
  msgctxt "block description"
2802
  msgid "Display the Font Awesome icons horizontally."
2803
  msgstr ""
2804
 
 
2805
  #: inc/vk-blocks/build/blocks/icon/block.json
2806
  #: src/blocks/icon/block.json
2807
  msgctxt "block title"
2808
  msgid "Icon"
2809
  msgstr ""
2810
 
 
2811
  #: inc/vk-blocks/build/blocks/icon/block.json
2812
  #: src/blocks/icon/block.json
2813
  msgctxt "block description"
2814
  msgid "Display icons with Font Awesome."
2815
  msgstr ""
2816
 
 
2817
  #: inc/vk-blocks/build/blocks/page-content/block.json
2818
  #: src/blocks/page-content/block.json
2819
  msgctxt "block title"
2820
  msgid "Page Content"
2821
  msgstr ""
2822
 
 
2823
  #: inc/vk-blocks/build/blocks/page-content/block.json
2824
  #: src/blocks/page-content/block.json
2825
  msgctxt "block description"
2826
  msgid "Displays the body content of the specified parent page."
2827
  msgstr ""
2828
 
 
2829
  #: inc/vk-blocks/build/blocks/pr-blocks/block.json
2830
  #: src/blocks/pr-blocks/block.json
2831
  msgctxt "block title"
2832
  msgid "PR Blocks (not recommended)"
2833
  msgstr ""
2834
 
 
2835
  #: inc/vk-blocks/build/blocks/pr-blocks/block.json
2836
  #: src/blocks/pr-blocks/block.json
2837
  msgctxt "block description"
2838
  msgid "This is a PR block where you can place images and icon. But currently, it is possible to create the same layout by combining Column Block and Icon Block, so this block is not recommended. Please check Columns category of Block Patterns."
2839
  msgstr ""
2840
 
 
2841
  #: inc/vk-blocks/build/blocks/pr-content/block.json
2842
  #: src/blocks/pr-content/block.json
2843
  msgctxt "block title"
2844
  msgid "PR Content"
2845
  msgstr ""
2846
 
 
2847
  #: inc/vk-blocks/build/blocks/pr-content/block.json
2848
  #: src/blocks/pr-content/block.json
2849
  msgctxt "block description"
2850
  msgid "This is PR content where you can place images, headlines, text, and buttons."
2851
  msgstr ""
2852
 
 
2853
  #: inc/vk-blocks/build/blocks/spacer/block.json
2854
  #: src/blocks/spacer/block.json
2855
  msgctxt "block title"
2856
  msgid "Responsive Spacer"
2857
  msgstr ""
2858
 
 
2859
  #: inc/vk-blocks/build/blocks/spacer/block.json
2860
  #: src/blocks/spacer/block.json
2861
  msgctxt "block description"
2862
  msgid "Use responsive spacers to get the margins right."
2863
  msgstr ""
2864
 
 
2865
  #: inc/vk-blocks/build/blocks/staff/block.json
2866
  #: src/blocks/staff/block.json
2867
  msgctxt "block title"
2868
  msgid "Staff"
2869
  msgstr ""
2870
 
 
2871
  #: inc/vk-blocks/build/blocks/staff/block.json
2872
  #: src/blocks/staff/block.json
2873
  msgctxt "block description"
2874
  msgid "Used for staff introduction, company introduction, school introduction, menu, etc."
2875
  msgstr ""
2876
 
 
2877
  #: inc/vk-blocks/build/blocks/_pro/accordion-target/block.json
2878
  #: src/blocks/_pro/accordion-target/block.json
2879
  msgctxt "block title"
2880
  msgid "Accordion Target"
2881
  msgstr ""
2882
 
 
2883
  #: inc/vk-blocks/build/blocks/_pro/accordion-target/block.json
2884
  #: src/blocks/_pro/accordion-target/block.json
2885
  msgctxt "block description"
2886
  msgid "This is the content area where you can add blocks freely."
2887
  msgstr ""
2888
 
 
2889
  #: inc/vk-blocks/build/blocks/_pro/accordion-trigger/block.json
2890
  #: src/blocks/_pro/accordion-trigger/block.json
2891
  msgctxt "block title"
2892
  msgid "Accordion Trigger"
2893
  msgstr ""
2894
 
 
2895
  #: inc/vk-blocks/build/blocks/_pro/accordion-trigger/block.json
2896
  #: src/blocks/_pro/accordion-trigger/block.json
2897
  msgctxt "block description"
2898
  msgid "This is the title area where you can freely add blocks."
2899
  msgstr ""
2900
 
 
2901
  #: inc/vk-blocks/build/blocks/_pro/accordion/block.json
2902
  #: src/blocks/_pro/accordion/block.json
2903
  msgctxt "block title"
2904
  msgid "Accordion"
2905
  msgstr ""
2906
 
 
2907
  #: inc/vk-blocks/build/blocks/_pro/accordion/block.json
2908
  #: src/blocks/_pro/accordion/block.json
2909
  msgctxt "block description"
2910
  msgid "Collapses and hides content when the content is long."
2911
  msgstr ""
2912
 
 
2913
  #: inc/vk-blocks/build/blocks/_pro/animation/block.json
2914
  #: src/blocks/_pro/animation/block.json
2915
  msgctxt "block title"
2916
  msgid "Animation"
2917
  msgstr ""
2918
 
 
2919
  #: inc/vk-blocks/build/blocks/_pro/animation/block.json
2920
  #: src/blocks/_pro/animation/block.json
2921
  msgctxt "block description"
2922
  msgid "Add animation to elements when scrolling the page."
2923
  msgstr ""
2924
 
 
2925
  #: inc/vk-blocks/build/blocks/_pro/breadcrumb/block.json
2926
  #: src/blocks/_pro/breadcrumb/block.json
2927
  msgctxt "block title"
2928
  msgid "Breadcrumb"
2929
  msgstr ""
2930
 
 
2931
  #: inc/vk-blocks/build/blocks/_pro/breadcrumb/block.json
2932
  #: src/blocks/_pro/breadcrumb/block.json
2933
  msgctxt "block description"
2934
  msgid "Displays breadcrumbs of a page's hierarchy, or a post's categories"
2935
  msgstr ""
2936
 
 
2937
  #: inc/vk-blocks/build/blocks/_pro/button-outer/block.json
2938
  #: src/blocks/_pro/button-outer/block.json
2939
  msgctxt "block title"
2940
  msgid "Button Outer"
2941
  msgstr ""
2942
 
 
2943
  #: inc/vk-blocks/build/blocks/_pro/button-outer/block.json
2944
  #: src/blocks/_pro/button-outer/block.json
2945
  msgctxt "block description"
2946
  msgid "Display the VK Button block horizontally."
2947
  msgstr ""
2948
 
 
2949
  #: inc/vk-blocks/build/blocks/_pro/card-item/block.json
2950
  #: src/blocks/_pro/card-item/block.json
2951
  msgctxt "block title"
2952
  msgid "Card Item"
2953
  msgstr ""
2954
 
 
2955
  #: inc/vk-blocks/build/blocks/_pro/card-item/block.json
2956
  #: src/blocks/_pro/card-item/block.json
2957
  msgctxt "block description"
2958
  msgid "A single item in a card block."
2959
  msgstr ""
2960
 
 
2961
  #: inc/vk-blocks/build/blocks/_pro/card/block.json
2962
  #: src/blocks/_pro/card/block.json
2963
  msgctxt "block title"
2964
  msgid "Card"
2965
  msgstr ""
2966
 
 
2967
  #: inc/vk-blocks/build/blocks/_pro/card/block.json
2968
  #: src/blocks/_pro/card/block.json
2969
  msgctxt "block description"
2970
  msgid "A card where you can place images, headings, text, and links."
2971
  msgstr ""
2972
 
 
2973
  #: inc/vk-blocks/build/blocks/_pro/child-page/block.json
2974
  #: src/blocks/_pro/child-page/block.json
2975
  msgctxt "block title"
2976
  msgid "Child page list"
2977
  msgstr ""
2978
 
 
2979
  #: inc/vk-blocks/build/blocks/_pro/child-page/block.json
2980
  #: src/blocks/_pro/child-page/block.json
2981
  msgctxt "block description"
2982
  msgid "When a parent page is specified, a list of its child pages will be displayed."
2983
  msgstr ""
2984
 
 
2985
  #: inc/vk-blocks/build/blocks/_pro/grid-column-item/block.json
2986
  #: src/blocks/_pro/grid-column-item/block.json
2987
  msgctxt "block title"
2988
  msgid "Grid Column Item"
2989
  msgstr ""
2990
 
 
2991
  #: inc/vk-blocks/build/blocks/_pro/grid-column-item/block.json
2992
  #: src/blocks/_pro/grid-column-item/block.json
2993
  msgctxt "block description"
2994
  msgid "One item in a grit column block."
2995
  msgstr ""
2996
 
 
2997
  #: inc/vk-blocks/build/blocks/_pro/grid-column/block.json
2998
  #: src/blocks/_pro/grid-column/block.json
2999
  msgctxt "block title"
3000
  msgid "Grid Column"
3001
  msgstr ""
3002
 
 
3003
  #: inc/vk-blocks/build/blocks/_pro/grid-column/block.json
3004
  #: src/blocks/_pro/grid-column/block.json
3005
  msgctxt "block description"
3006
  msgid "Set the number of columns to be displayed for each screen size."
3007
  msgstr ""
3008
 
 
3009
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-body/block.json
3010
  #: src/blocks/_pro/gridcolcard-item-body/block.json
3011
  msgctxt "block title"
3012
  msgid "Grid Column Card Item Body"
3013
  msgstr ""
3014
 
 
3015
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-body/block.json
3016
  #: src/blocks/_pro/gridcolcard-item-body/block.json
3017
  msgctxt "block description"
3018
  msgid "Body of Grid Column Card Block Item"
3019
  msgstr ""
3020
 
 
3021
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-footer/block.json
3022
  #: src/blocks/_pro/gridcolcard-item-footer/block.json
3023
  msgctxt "block title"
3024
  msgid "Grid Column Card Item Footer"
3025
  msgstr ""
3026
 
 
3027
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-footer/block.json
3028
  #: src/blocks/_pro/gridcolcard-item-footer/block.json
3029
  msgctxt "block description"
3030
  msgid "Footer button area of Grid Column Card Block Item"
3031
  msgstr ""
3032
 
 
3033
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-header/block.json
3034
  #: src/blocks/_pro/gridcolcard-item-header/block.json
3035
  msgctxt "block title"
3036
  msgid "Grid Column Card Item header"
3037
  msgstr ""
3038
 
 
3039
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item-header/block.json
3040
  #: src/blocks/_pro/gridcolcard-item-header/block.json
3041
  msgctxt "block description"
3042
  msgid "Header image area of Grid Column Card Block Item"
3043
  msgstr ""
3044
 
 
3045
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item/block.json
3046
  #: src/blocks/_pro/gridcolcard-item/block.json
3047
  msgctxt "block title"
3048
  msgid "Grid Column Card Item"
3049
  msgstr ""
3050
 
 
3051
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard-item/block.json
3052
  #: src/blocks/_pro/gridcolcard-item/block.json
3053
  msgctxt "block description"
3054
  msgid "It is a block of single column of Grid Column Card."
3055
  msgstr ""
3056
 
 
3057
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard/block.json
3058
  #: src/blocks/_pro/gridcolcard/block.json
3059
  msgctxt "block title"
3060
  msgid "Grid Column Card"
3061
  msgstr ""
3062
 
 
3063
  #: inc/vk-blocks/build/blocks/_pro/gridcolcard/block.json
3064
  #: src/blocks/_pro/gridcolcard/block.json
3065
  msgctxt "block description"
3066
  msgid "This block can flexible column layout"
3067
  msgstr ""
3068
 
 
3069
  #: inc/vk-blocks/build/blocks/_pro/icon-card-item/block.json
3070
  #: src/blocks/_pro/icon-card-item/block.json
3071
  msgctxt "block title"
3072
  msgid "Icon Card Item"
3073
  msgstr ""
3074
 
 
3075
  #: inc/vk-blocks/build/blocks/_pro/icon-card-item/block.json
3076
  #: src/blocks/_pro/icon-card-item/block.json
3077
  msgctxt "block description"
3078
  msgid "This is one item in an icon card."
3079
  msgstr ""
3080
 
 
3081
  #: inc/vk-blocks/build/blocks/_pro/icon-card/block.json
3082
  #: src/blocks/_pro/icon-card/block.json
3083
  msgctxt "block title"
3084
  msgid "Icon Card"
3085
  msgstr ""
3086
 
 
3087
  #: inc/vk-blocks/build/blocks/_pro/icon-card/block.json
3088
  #: src/blocks/_pro/icon-card/block.json
3089
  msgctxt "block description"
3090
  msgid "Display card with icons, headings, text, and links."
3091
  msgstr ""
3092
 
 
3093
  #: inc/vk-blocks/build/blocks/_pro/outer/block.json
3094
  #: src/blocks/_pro/outer/block.json
3095
  msgctxt "block title"
3096
  msgid "Outer"
3097
  msgstr ""
3098
 
 
3099
  #: inc/vk-blocks/build/blocks/_pro/outer/block.json
3100
  #: src/blocks/_pro/outer/block.json
3101
  msgctxt "block description"
3102
  msgid "Set the background image, color, and border to show the layout and divisions."
3103
  msgstr ""
3104
 
 
3105
  #: inc/vk-blocks/build/blocks/_pro/post-list/block.json
3106
  #: src/blocks/_pro/post-list/block.json
3107
  msgctxt "block title"
3108
  msgid "Post list"
3109
  msgstr ""
3110
 
 
3111
  #: inc/vk-blocks/build/blocks/_pro/post-list/block.json
3112
  #: src/blocks/_pro/post-list/block.json
3113
  msgctxt "block description"
3114
  msgid "Displays the list of posts by setting the post type, classification, and number of posts to display."
3115
  msgstr ""
3116
 
 
3117
  #: inc/vk-blocks/build/blocks/_pro/select-post-list-item/block.json
3118
  #: src/blocks/_pro/select-post-list-item/block.json
3119
  msgctxt "block title"
3120
  msgid "Selected Post List Item"
3121
  msgstr ""
3122
 
 
3123
  #: inc/vk-blocks/build/blocks/_pro/select-post-list-item/block.json
3124
  #: src/blocks/_pro/select-post-list-item/block.json
3125
  msgctxt "block description"
3126
  msgid "A single item in the select post list."
3127
  msgstr ""
3128
 
 
3129
  #: inc/vk-blocks/build/blocks/_pro/select-post-list/block.json
3130
  #: src/blocks/_pro/select-post-list/block.json
3131
  msgctxt "block title"
3132
  msgid "Selected Post List"
3133
  msgstr ""
3134
 
 
3135
  #: inc/vk-blocks/build/blocks/_pro/select-post-list/block.json
3136
  #: src/blocks/_pro/select-post-list/block.json
3137
  msgctxt "block description"
3138
  msgid "Displays an arbitrarily specified page with the layout of the posting list."
3139
  msgstr ""
3140
 
 
3141
  #: inc/vk-blocks/build/blocks/_pro/slider-item/block.json
3142
  #: src/blocks/_pro/slider-item/block.json
3143
  msgctxt "block title"
3144
  msgid "Slider Item"
3145
  msgstr ""
3146
 
 
3147
  #: inc/vk-blocks/build/blocks/_pro/slider-item/block.json
3148
  #: src/blocks/_pro/slider-item/block.json
3149
  msgctxt "block description"
3150
  msgid "This is one item in the slider."
3151
  msgstr ""
3152
 
 
3153
  #: inc/vk-blocks/build/blocks/_pro/slider/block.json
3154
  #: src/blocks/_pro/slider/block.json
3155
  msgctxt "block title"
3156
  msgid "Slider"
3157
  msgstr ""
3158
 
 
3159
  #: inc/vk-blocks/build/blocks/_pro/slider/block.json
3160
  #: src/blocks/_pro/slider/block.json
3161
  msgctxt "block description"
3162
  msgid "This slider allows you to place various items.Slider is do not move in edit screen."
3163
  msgstr ""
3164
 
 
3165
  #: inc/vk-blocks/build/blocks/_pro/step-item/block.json
3166
  #: src/blocks/_pro/step-item/block.json
3167
  msgctxt "block title"
3168
  msgid "Step Item"
3169
  msgstr ""
3170
 
 
3171
  #: inc/vk-blocks/build/blocks/_pro/step-item/block.json
3172
  #: src/blocks/_pro/step-item/block.json
3173
  msgctxt "block description"
3174
  msgid "This element sets the icon, color, and style of the step mark."
3175
  msgstr ""
3176
 
 
3177
  #: inc/vk-blocks/build/blocks/_pro/step/block.json
3178
  #: src/blocks/_pro/step/block.json
3179
  msgctxt "block title"
3180
  msgid "Step"
3181
  msgstr ""
3182
 
 
3183
  #: inc/vk-blocks/build/blocks/_pro/step/block.json
3184
  #: src/blocks/_pro/step/block.json
3185
  msgctxt "block description"
3186
  msgid "Set and display step marks, which are useful when explaining the order."
3187
  msgstr ""
3188
 
 
3189
  #: inc/vk-blocks/build/blocks/_pro/table-of-contents-new/block.json
3190
  #: src/blocks/_pro/table-of-contents-new/block.json
3191
  msgctxt "block title"
3192
  msgid "Table of Contents"
3193
  msgstr ""
3194
 
 
3195
  #: inc/vk-blocks/build/blocks/_pro/table-of-contents-new/block.json
3196
  #: src/blocks/_pro/table-of-contents-new/block.json
3197
  msgctxt "block description"
3198
  msgid "This is a table of contents that is automatically generated according to the headings when added."
3199
  msgstr ""
3200
 
 
3201
  #: inc/vk-blocks/build/blocks/_pro/timeline-item/block.json
3202
  #: src/blocks/_pro/timeline-item/block.json
3203
  msgctxt "block title"
3204
  msgid "Timeline Item"
3205
  msgstr ""
3206
 
 
3207
  #: inc/vk-blocks/build/blocks/_pro/timeline-item/block.json
3208
  #: src/blocks/_pro/timeline-item/block.json
3209
  msgctxt "block description"
3210
  msgid "This element sets the label, color, and style of the timeline."
3211
  msgstr ""
3212
 
 
3213
  #: inc/vk-blocks/build/blocks/_pro/timeline/block.json
3214
  #: src/blocks/_pro/timeline/block.json
3215
  msgctxt "block title"
3216
  msgid "Timeline"
3217
  msgstr ""
3218
 
 
3219
  #: inc/vk-blocks/build/blocks/_pro/timeline/block.json
3220
  #: src/blocks/_pro/timeline/block.json
3221
  msgctxt "block description"
inc/vk-blocks/view/class-vk-blocks-postlist.php CHANGED
@@ -158,10 +158,19 @@ class Vk_Blocks_PostList {
158
  }
159
  }
160
 
 
 
 
 
 
 
 
 
 
161
  $args = array(
162
  'post_type' => $is_checked_post_type,
163
  'tax_query' => self::format_terms( $is_checked_terms ),
164
- 'paged' => 1,
165
  // 0で全件取得
166
  'posts_per_page' => intval( $attributes['numberPosts'] ),
167
  'order' => $attributes['order'],
158
  }
159
  }
160
 
161
+ global $wp_query;
162
+ // とりあえず１を入れつつ2ページ目の情報があったら上書き
163
+ $paged = 1;
164
+ if ( is_singular() && isset( $wp_query->query_vars['page'] ) ) {
165
+ $paged = $wp_query->query_vars['page'];
166
+ } elseif ( isset( $wp_query->query_vars['paged'] ) ) {
167
+ $paged = $wp_query->query_vars['paged'];
168
+ }
169
+
170
  $args = array(
171
  'post_type' => $is_checked_post_type,
172
  'tax_query' => self::format_terms( $is_checked_terms ),
173
+ 'paged' => $paged,
174
  // 0で全件取得
175
  'posts_per_page' => intval( $attributes['numberPosts'] ),
176
  'order' => $attributes['order'],
inc/vk-blocks/vk-blocks-functions.php CHANGED
@@ -13,6 +13,8 @@ require_once dirname( __FILE__ ) . '/view/responsive-br.php';
13
  require_once dirname( __FILE__ ) . '/style/balloon.php';
14
  require_once dirname( __FILE__ ) . '/style/hidden-extension.php';
15
  require_once dirname( __FILE__ ) . '/class-vk-blocks-print-css-variables.php';
 
 
16
 
17
  /**
18
  * スペーサーのサイズの配列
13
  require_once dirname( __FILE__ ) . '/style/balloon.php';
14
  require_once dirname( __FILE__ ) . '/style/hidden-extension.php';
15
  require_once dirname( __FILE__ ) . '/class-vk-blocks-print-css-variables.php';
16
+ require_once dirname( __FILE__ ) . '/class-vk-blocks-options.php';
17
+ VK_Blocks_Options::init();
18
 
19
  /**
20
  * スペーサーのサイズの配列
inc/vk-components/package/class-vk-component-mini-contents.php CHANGED
@@ -41,13 +41,15 @@ if ( ! class_exists( 'VK_Component_Mini_Contents' ) ) {
41
  $html = '';
42
  $style = '';
43
 
 
 
44
  if ( $options['text_align'] ) {
45
- $style = ' style="text-align:' . esc_attr( $options['text_align'] ) . '"';
 
46
  }
47
 
48
- $html .= '<div class="' . esc_attr( $options['outer_class'] ) . '"' . $style . '>';
49
 
50
- $font_style = '';
51
  if ( $options['text_color'] ) {
52
  $font_style .= 'color:' . $options['text_color'] . ';';
53
  }
@@ -63,7 +65,7 @@ if ( ! class_exists( 'VK_Component_Mini_Contents' ) ) {
63
  $font_style = ' style="' . esc_attr( $font_style ) . '"';
64
  }
65
 
66
- // If Text Title exist
67
  if ( $options['title_text'] ) {
68
  if ( $options['title_class'] ) {
69
  $title_class = ' class="' . esc_attr( $options['title_class'] ) . '"';
@@ -73,7 +75,7 @@ if ( ! class_exists( 'VK_Component_Mini_Contents' ) ) {
73
  $html .= '</' . esc_html( $options['title_tag'] ) . '>';
74
  }
75
 
76
- // If Text caption exist
77
  if ( $options['caption_text'] ) {
78
  if ( $options['caption_class'] ) {
79
  $caption_class = ' class="' . esc_attr( $options['caption_class'] ) . '"';
41
  $html = '';
42
  $style = '';
43
 
44
+ $font_style = '';
45
+ $mini_content_style = '';
46
  if ( $options['text_align'] ) {
47
+ $mini_content_style = ' style="text-align:' . esc_attr( $options['text_align'] ) . '"';
48
+ $font_style .= 'text-align:' . esc_attr( $options['text_align'] ) . ';';
49
  }
50
 
51
+ $html .= '<div class="' . esc_attr( $options['outer_class'] ) . '"' . $mini_content_style . '>';
52
 
 
53
  if ( $options['text_color'] ) {
54
  $font_style .= 'color:' . $options['text_color'] . ';';
55
  }
65
  $font_style = ' style="' . esc_attr( $font_style ) . '"';
66
  }
67
 
68
+ // If Text Title exist.
69
  if ( $options['title_text'] ) {
70
  if ( $options['title_class'] ) {
71
  $title_class = ' class="' . esc_attr( $options['title_class'] ) . '"';
75
  $html .= '</' . esc_html( $options['title_tag'] ) . '>';
76
  }
77
 
78
+ // If Text caption exist.
79
  if ( $options['caption_text'] ) {
80
  if ( $options['caption_class'] ) {
81
  $caption_class = ' class="' . esc_attr( $options['caption_class'] ) . '"';
inc/vk-components/package/class-vk-component-posts.php CHANGED
@@ -76,6 +76,7 @@ if ( ! class_exists( 'VK_Component_Posts' ) ) {
76
  public static function get_loop_options( $loop_options, $wp_query ) {
77
  $default = array(
78
  'pagination_display' => false,
 
79
  'archive_link_display' => false,
80
  'class_loop_outer' => null,
81
  );
@@ -128,6 +129,7 @@ if ( ! class_exists( 'VK_Component_Posts' ) ) {
128
  */
129
  public static function get_loop( $wp_query, $options, $loop_options = array() ) {
130
  // Outer Post Type classes.
 
131
  $patterns = self::get_patterns();
132
  $loop_outer_class_post_types = array();
133
  if ( ! isset( $wp_query->query['post_type'] ) ) {
@@ -219,7 +221,11 @@ if ( ! class_exists( 'VK_Component_Posts' ) ) {
219
  }
220
 
221
  if ( ! empty( $loop_options['pagination_display'] ) ) {
222
- $loop .= self::get_pagenation( $wp_query );
 
 
 
 
223
  }
224
 
225
  endif;
@@ -291,7 +297,7 @@ if ( ! class_exists( 'VK_Component_Posts' ) ) {
291
  $args = wp_parse_args(
292
  $args,
293
  array(
294
- 'mid_size' => 1,
295
  'prev_text' => '&laquo;',
296
  'next_text' => '&raquo;',
297
  'screen_reader_text' => __( 'Posts navigation', 'vk-blocks' ),
@@ -304,8 +310,18 @@ if ( ! class_exists( 'VK_Component_Posts' ) ) {
304
 
305
  $html = '';
306
 
307
- global $paged;
308
- $current_page = $paged;
 
 
 
 
 
 
 
 
 
 
309
 
310
  // 最後のページ.
311
  $max_num_pages = intval( $wp_query->max_num_pages );
@@ -318,12 +334,8 @@ if ( ! class_exists( 'VK_Component_Posts' ) ) {
318
  $html .= '<h4 class="screen-reader-text">' . $args['screen_reader_text'] . '</h4>';
319
  $html .= '<div class="nav-links"><ul class="page-numbers">';
320
 
321
- if ( 0 === $paged ) {
322
- $current_page = 1;
323
- }
324
-
325
  // [ << ]
326
- // 現在のページが２ページ目以降の場合.
327
  if ( $current_page > 1 ) {
328
  $html .= '<li><a class="prev page-numbers" href="' . get_pagenum_link( $paged - 1 ) . '">' . $args['prev_text'] . '</a></li>';
329
  }
@@ -385,6 +397,7 @@ if ( ! class_exists( 'VK_Component_Posts' ) ) {
385
  }
386
 
387
  // [ >> ]
 
388
  if ( $current_page < $max_num_pages ) {
389
  $html .= '<li><a class="next page-numbers" href="' . get_pagenum_link( $current_page + 1 ) . '">' . $args['next_text'] . '</a></li>';
390
  }
76
  public static function get_loop_options( $loop_options, $wp_query ) {
77
  $default = array(
78
  'pagination_display' => false,
79
+ 'pagination_mid_size' => 1,
80
  'archive_link_display' => false,
81
  'class_loop_outer' => null,
82
  );
129
  */
130
  public static function get_loop( $wp_query, $options, $loop_options = array() ) {
131
  // Outer Post Type classes.
132
+
133
  $patterns = self::get_patterns();
134
  $loop_outer_class_post_types = array();
135
  if ( ! isset( $wp_query->query['post_type'] ) ) {
221
  }
222
 
223
  if ( ! empty( $loop_options['pagination_display'] ) ) {
224
+ $pagenation_args = array();
225
+ if ( isset( $loop_options['pagination_mid_size'] ) && is_int( $loop_options['pagination_mid_size'] ) ) {
226
+ $pagenation_args['mid_size'] = $loop_options['pagination_mid_size'];
227
+ }
228
+ $loop .= self::get_pagenation( $wp_query, $pagenation_args );
229
  }
230
 
231
  endif;
297
  $args = wp_parse_args(
298
  $args,
299
  array(
300
+ 'mid_size' => 1, // get_loop では loop_options のデフォルト値で上書きされる.
301
  'prev_text' => '&laquo;',
302
  'next_text' => '&raquo;',
303
  'screen_reader_text' => __( 'Posts navigation', 'vk-blocks' ),
310
 
311
  $html = '';
312
 
313
+ $paged = 0;
314
+ if ( is_singular() && isset( $wp_query->query_vars['page'] ) ) {
315
+ $paged = $wp_query->query_vars['page'];
316
+ } elseif ( isset( $wp_query->query_vars['paged'] ) ) {
317
+ $paged = $wp_query->query_vars['paged'];
318
+ }
319
+ // 1 ページ目は paged が 0 で返ってくるので 1 にする
320
+ if ( 0 === $paged ) {
321
+ $current_page = 1;
322
+ } else {
323
+ $current_page = $paged;
324
+ }
325
 
326
  // 最後のページ.
327
  $max_num_pages = intval( $wp_query->max_num_pages );
334
  $html .= '<h4 class="screen-reader-text">' . $args['screen_reader_text'] . '</h4>';
335
  $html .= '<div class="nav-links"><ul class="page-numbers">';
336
 
 
 
 
 
337
  // [ << ]
338
+ // 現在のページが２ページ目以降の場合 << を表示.
339
  if ( $current_page > 1 ) {
340
  $html .= '<li><a class="prev page-numbers" href="' . get_pagenum_link( $paged - 1 ) . '">' . $args['prev_text'] . '</a></li>';
341
  }
397
  }
398
 
399
  // [ >> ]
400
+ // paged が 最後のページより小さい場合に >> を表示.
401
  if ( $current_page < $max_num_pages ) {
402
  $html .= '<li><a class="next page-numbers" href="' . get_pagenum_link( $current_page + 1 ) . '">' . $args['next_text'] . '</a></li>';
403
  }
options-css/_admin-balloon.scss DELETED
@@ -1,63 +0,0 @@
1
- .vk_admin_page .adminMain_main .balloonIconList {
2
- margin-left:0;
3
- }
4
- .vk_admin_page .adminMain_main .balloonIconList li {
5
- list-style:none;
6
- }
7
- .balloonIconList {
8
- width:100%;
9
- display:flex;
10
- flex-wrap: wrap;
11
- }
12
- .balloonIconList li {
13
- box-sizing:border-box;
14
- width:29.5%;
15
- padding:20px 15px 15px;
16
- margin:10px;
17
- border:1px solid #ccc;
18
- border-radius:5px;
19
- background-color:rgba(255,255,255,0.9);
20
- box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,1);
21
- }
22
- .balloonIconList_iconFrame {
23
- width:100px;
24
- margin:0 auto 0.5rem;
25
- }
26
- .balloonIconList_iconFrame_src {
27
- width:100px;
28
- height:100px;
29
- object-fit:cover;
30
- border-radius:50%;
31
- border:1px solid #e5e5e5;
32
- }
33
- .balloonIconList li img {
34
-
35
- }
36
- .balloonIconList li .button {
37
- width:49%;
38
- margin-top:5px;
39
- box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.7);
40
- }
41
- .balloonIconList li .button.button-set {
42
- color:#464646;
43
- border-color:#999;
44
- float:left;
45
- }
46
- .balloonIconList li .button.button-delete {
47
- color:#c00;
48
- border-color:#c00;
49
- float:right;
50
- }
51
- input.balloonIconList_name_input[type=text] {
52
- display:block;
53
- width:100%;
54
- text-align:center;
55
- border-color:#ccc;
56
- box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,0.1);
57
- }
58
- .balloonIconList_nameLabel {
59
- clear:both;
60
- display:block; overflow:hidden;
61
- padding-top:0.5rem;
62
- padding-bottom:0.3rem;
63
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
options-css/_admin-margin.scss DELETED
@@ -1,4 +0,0 @@
1
- .spacer-input input[type="number"]{
2
- width: 5em;
3
- text-align: center;
4
- }
 
 
 
 
options-css/admin-merge.scss DELETED
@@ -1,5 +0,0 @@
1
- // margin
2
- @import "./admin-margin";
3
-
4
- // balloon
5
- @import "./admin-balloon";
 
 
 
 
 
readme.txt CHANGED
@@ -4,7 +4,7 @@ Donate link:
4
  Tags: Gutenberg,FAQ,alert
5
  Requires at least: 5.8
6
  Tested up to: 6.0.0
7
- Stable tag: 1.36.2.0
8
  Requires PHP: 7.2
9
  License: GPLv2 or later
10
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -64,9 +64,25 @@ e.g.
64
 
65
  == Changelog ==
66
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  = 1.37.0 =
68
- [ Specification Change ][ Step Item ] Change padding-bottom to margin-bottom
69
- [ Specification Change ][ Timeline Item ] Change padding-bottom to margin-bottom
70
  [ Specification Change ][ Timeline ] If no label, the outer html will not be displayed.
71
  [ Specification Change ][ Outer ] Move width control to block toolbar.
72
  [ Specification Change ] Change the style loaded on the options page to a css file.
4
  Tags: Gutenberg,FAQ,alert
5
  Requires at least: 5.8
6
  Tested up to: 6.0.0
7
+ Stable tag: 1.39.2.1
8
  Requires PHP: 7.2
9
  License: GPLv2 or later
10
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
64
 
65
  == Changelog ==
66
 
67
+ = 1.39.2 =
68
+ [ Bug Fix ][ Breadcrumb ] Fix in case of filter search result category & keyword
69
+ [ Bug Fix ][ Table style ] Delete border left and right specified vk-table-border-top-bottom
70
+
71
+ = 1.39.1 =
72
+ [ Bug Fix ][ Grid Column Card ] fix bug when aspect retio is empty.
73
+ [ Other ] Change the script loaded on the options page to a script file.
74
+
75
+ = 1.39.0 =
76
+ [ Improvement ] License key remove space.
77
+ [ Bug Fix ][ Common mergin ] cope with table margin bottom 0,margin top 0
78
+ [ Bug fix ][ GridColCard ( Pro ) ] cope with custom color palette
79
+ [ Other ] VK Compo ( mini-content ) Update ( Fix slider align )
80
+
81
+ = 1.38.0 =
82
+ [ Bug fix ][ Post List (Pro) ] cope with pagenation hook
83
+
84
  = 1.37.0 =
85
+ [ Specification Change ][ Step Item(Pro) / Timeline Item()Pro ] Change padding-bottom to inner-item last-child margin-bottom
 
86
  [ Specification Change ][ Timeline ] If no label, the outer html will not be displayed.
87
  [ Specification Change ][ Outer ] Move width control to block toolbar.
88
  [ Specification Change ] Change the style loaded on the options page to a css file.
src/blocks/alert/block.json DELETED
@@ -1,22 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/alert",
4
- "category": "vk-blocks-cat",
5
- "title": "Alert",
6
- "description": "A colored box with four statuses, including annotations and alerts.",
7
- "textdomain": "vk-blocks",
8
- "attributes": {
9
- "style": {
10
- "type": "string",
11
- "default": "info"
12
- },
13
- "content": {
14
- "type": "string",
15
- "source": "html",
16
- "selector": "p"
17
- }
18
- },
19
- "supports": {
20
- "className": true
21
- }
22
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/alert/deprecated/0.0.0/save.js DELETED
@@ -1,10 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const { style, content } = attributes;
5
- return (
6
- <div className={`alert alert-${style}`}>
7
- <RichText.Content tagName={'p'} value={content} />
8
- </div>
9
- );
10
- }
 
 
 
 
 
 
 
 
 
 
src/blocks/alert/deprecated/index.js DELETED
@@ -1,21 +0,0 @@
1
- import save000 from './0.0.0/save';
2
-
3
- const blockAttributes = {
4
- style: {
5
- type: 'string',
6
- default: 'info',
7
- },
8
- content: {
9
- type: 'string',
10
- source: 'html',
11
- selector: 'p',
12
- },
13
- };
14
-
15
- const deprecated = [
16
- {
17
- attributes: blockAttributes,
18
- save: save000,
19
- },
20
- ];
21
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/alert/edit.js DELETED
@@ -1,50 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { PanelBody, SelectControl } from '@wordpress/components';
3
- import {
4
- InspectorControls,
5
- RichText,
6
- useBlockProps,
7
- } from '@wordpress/block-editor';
8
-
9
- export default function AlertEdit({ attributes, setAttributes }) {
10
- const { style, content } = attributes;
11
-
12
- const blockProps = useBlockProps({
13
- className: `alert alert-${style}`,
14
- });
15
-
16
- return (
17
- <>
18
- <InspectorControls>
19
- <PanelBody title={__('Style Settings', 'vk-blocks')}>
20
- <SelectControl
21
- value={style}
22
- onChange={(value) => setAttributes({ style: value })}
23
- options={[
24
- {
25
- label: __('Success', 'vk-blocks'),
26
- value: 'success',
27
- },
28
- { label: __('Info', 'vk-blocks'), value: 'info' },
29
- {
30
- label: __('Warning', 'vk-blocks'),
31
- value: 'warning',
32
- },
33
- {
34
- label: __('Danger', 'vk-blocks'),
35
- value: 'danger',
36
- },
37
- ]}
38
- />
39
- </PanelBody>
40
- </InspectorControls>
41
- <div {...blockProps}>
42
- <RichText
43
- tagName="p"
44
- onChange={(value) => setAttributes({ content: value })}
45
- value={content}
46
- />
47
- </div>
48
- </>
49
- );
50
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/alert/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 8.5a8.5 8.5 0 01-12.12 7.7l.18-.2a1.61 1.61 0 00-1.17-2.72H8.62c.06-.67-.3-1.43-1.04-1.69A8.5 8.5 0 1124 8.5zm-7.86.7H14.9L14 6.27V4H17v2.28l-.86 2.91zm.86 1.29V13h-3v-2.51h3z" fill="#000"/></svg>
 
src/blocks/alert/index.js DELETED
@@ -1,27 +0,0 @@
1
- /**
2
- * Alert block type
3
- *
4
- */
5
- import { content } from '@vkblocks/utils/example-data';
6
- import { ReactComponent as Icon } from './icon.svg';
7
- import deprecated from './deprecated/index';
8
- import edit from './edit';
9
- import metadata from './block.json';
10
- import save from './save';
11
-
12
- const { name } = metadata;
13
-
14
- export { metadata, name };
15
-
16
- export const settings = {
17
- icon: <Icon />,
18
- example: {
19
- attributes: {
20
- style: 'info',
21
- content,
22
- },
23
- },
24
- save,
25
- edit,
26
- deprecated,
27
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/alert/index.php DELETED
@@ -1,34 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/alert` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register Alert block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_alert() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/alert',
18
- VK_BLOCKS_DIR_URL . 'build/alert/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- register_block_type(
25
- __DIR__,
26
- array(
27
- 'style' => 'vk-blocks/alert',
28
- 'editor_style' => 'vk-blocks-build-editor-css',
29
- 'editor_script' => 'vk-blocks-build-js',
30
- )
31
- );
32
- }
33
- add_action( 'init', 'vk_blocks_register_block_alert', 99 );
34
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/alert/save.js DELETED
@@ -1,11 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const { style, content } = attributes;
5
-
6
- return (
7
- <div {...useBlockProps.save({ className: `alert alert-${style}` })}>
8
- <RichText.Content tagName={'p'} value={content} />
9
- </div>
10
- );
11
- }
 
 
 
 
 
 
 
 
 
 
 
src/blocks/alert/style.scss DELETED
@@ -1,42 +0,0 @@
1
- .alert{
2
-
3
- padding: 1em;
4
- margin: 1em auto;
5
- border-radius: 3px;
6
- p {
7
- margin:0;
8
- }
9
-
10
- & + &{
11
- margin-top: 2em;
12
- }
13
-
14
- a{
15
- transition: color .3s linear, opacity .3s linear;
16
- &:link, &:visited{
17
- opacity: .8;
18
- text-decoration: underline;
19
- }
20
- &:hover, &:visited{
21
- opacity: 1;
22
- text-decoration: none;
23
- }
24
- }
25
-
26
- @each $var in (
27
- (success, #dff0d8,#3c763d,#d6e9c6),
28
- (info, #d9edf7,#31708f,#bce8f1),
29
- (warning, #fcf8e3,#8a6d3b,#faebcc),
30
- (danger, #f2dede,#a94442,#ebccd1),
31
- ){
32
- $class-name: nth($var, 1);
33
- $color-bg: nth($var, 2);
34
- $color: nth($var, 3);
35
- $color-border :nth($var, 4);
36
- &-#{$class-name}{
37
- background-color: $color-bg;
38
- color:$color;
39
- border-color:$color-border;
40
- }
41
- }
42
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/block.json DELETED
@@ -1,59 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/balloon",
4
- "title": "Ballon",
5
- "description": "These speech balloons are perfect for recreating conversations.",
6
- "category": "vk-blocks-cat",
7
- "attributes": {
8
- "content": {
9
- "source": "html",
10
- "selector": "p"
11
- },
12
- "balloonName": {
13
- "source": "html",
14
- "selector": "figcaption"
15
- },
16
- "balloonType": {
17
- "type": "string",
18
- "default": "type-speech"
19
- },
20
- "balloonBorder": {
21
- "type": "boolean",
22
- "default": false
23
- },
24
- "balloonImageBorder": {
25
- "type": "boolean",
26
- "default": false
27
- },
28
- "balloonBorderWidth": {
29
- "type": "string",
30
- "default": "thin"
31
- },
32
- "balloonBorderColor": {
33
- "type": "string"
34
- },
35
- "balloonBgColor": {
36
- "type": "string"
37
- },
38
- "balloonAlign": {
39
- "type": "string",
40
- "default": "position-left"
41
- },
42
- "IconImage": {
43
- "type": "string",
44
- "defaul": null
45
- },
46
- "balloonImageType": {
47
- "type": "string",
48
- "default": "normal"
49
- },
50
- "balloonAnimation": {
51
- "type": "string",
52
- "default": "none"
53
- }
54
- },
55
- "textdomain": "vk-blocks",
56
- "supports": {
57
- "className": true
58
- }
59
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/deprecated/0.0.0/save.js DELETED
@@ -1,43 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const {
5
- content,
6
- balloonName,
7
- balloonType,
8
- balloonBgColor,
9
- balloonAlign,
10
- IconImage,
11
- } = attributes;
12
-
13
- return (
14
- <div
15
- className={`vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType}`}
16
- >
17
- <div className={`vk_balloon_icon`}>
18
- {IconImage ? (
19
- <figure>
20
- <img
21
- className={'vk_balloon_icon_image'}
22
- src={IconImage}
23
- alt=""
24
- />
25
- <RichText.Content
26
- tagName="figcaption"
27
- className={'vk_balloon_icon_name'}
28
- value={balloonName}
29
- />
30
- </figure>
31
- ) : (
32
- ''
33
- )}
34
- </div>
35
- <RichText.Content
36
- className={'vk_balloon_content'}
37
- style={{ background: balloonBgColor, border: balloonBgColor }}
38
- tagName="p"
39
- value={content}
40
- />
41
- </div>
42
- );
43
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/deprecated/0.0.1/save.js DELETED
@@ -1,44 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const {
5
- content,
6
- balloonName,
7
- balloonType,
8
- balloonBgColor,
9
- balloonAlign,
10
- IconImage,
11
- balloonImageType,
12
- } = attributes;
13
-
14
- return (
15
- <div
16
- className={`vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType}`}
17
- >
18
- <div className={`vk_balloon_icon`}>
19
- {IconImage ? (
20
- <figure>
21
- <img
22
- className={`vk_balloon_icon_image vk_balloon-image-${balloonImageType}`}
23
- src={IconImage}
24
- alt=""
25
- />
26
- <RichText.Content
27
- tagName="figcaption"
28
- className={'vk_balloon_icon_name'}
29
- value={balloonName}
30
- />
31
- </figure>
32
- ) : (
33
- ''
34
- )}
35
- </div>
36
- <RichText.Content
37
- className={'vk_balloon_content'}
38
- style={{ background: balloonBgColor, border: balloonBgColor }}
39
- tagName="p"
40
- value={content}
41
- />
42
- </div>
43
- );
44
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/deprecated/0.0.2/save.js DELETED
@@ -1,54 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- let {
5
- content,
6
- balloonName,
7
- balloonType,
8
- balloonBgColor,
9
- balloonAlign,
10
- IconImage,
11
- balloonImageType,
12
- balloonAnimation,
13
- } = attributes;
14
-
15
- //For recovering
16
- balloonImageType = balloonImageType ? balloonImageType : 'normal';
17
- balloonAnimation = balloonAnimation ? balloonAnimation : 'none';
18
-
19
- return (
20
- <div
21
- className={`vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType} vk_balloon-animation-${balloonAnimation}`}
22
- >
23
- <div className={`vk_balloon_icon`}>
24
- {IconImage ? (
25
- <figure>
26
- <img
27
- className={`vk_balloon_icon_image vk_balloon-image-${balloonImageType}`}
28
- src={IconImage}
29
- alt=""
30
- />
31
- <RichText.Content
32
- tagName="figcaption"
33
- className={'vk_balloon_icon_name'}
34
- value={balloonName}
35
- />
36
- </figure>
37
- ) : (
38
- ''
39
- )}
40
- </div>
41
- <div className={`vk_balloon_content_outer`}>
42
- <RichText.Content
43
- className={'vk_balloon_content'}
44
- style={{
45
- background: balloonBgColor,
46
- border: balloonBgColor,
47
- }}
48
- tagName="p"
49
- value={content}
50
- />
51
- </div>
52
- </div>
53
- );
54
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/deprecated/0.0.3/save.js DELETED
@@ -1,53 +0,0 @@
1
- import { RichText, InnerBlocks } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- let {
5
- balloonName,
6
- balloonType,
7
- balloonBgColor,
8
- balloonAlign,
9
- IconImage,
10
- balloonImageType,
11
- balloonAnimation,
12
- } = attributes;
13
-
14
- //For recovering
15
- balloonImageType = balloonImageType ? balloonImageType : 'normal';
16
- balloonAnimation = balloonAnimation ? balloonAnimation : 'none';
17
-
18
- return (
19
- <div
20
- className={`vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType} vk_balloon-animation-${balloonAnimation}`}
21
- >
22
- <div className={`vk_balloon_icon`}>
23
- {IconImage ? (
24
- <figure>
25
- <img
26
- className={`vk_balloon_icon_image vk_balloon-image-${balloonImageType}`}
27
- src={IconImage}
28
- alt=""
29
- />
30
- <RichText.Content
31
- tagName="figcaption"
32
- className={'vk_balloon_icon_name'}
33
- value={balloonName}
34
- />
35
- </figure>
36
- ) : (
37
- ''
38
- )}
39
- </div>
40
- <div className={`vk_balloon_content_outer`}>
41
- <div
42
- className={'vk_balloon_content'}
43
- style={{
44
- background: balloonBgColor,
45
- border: balloonBgColor,
46
- }}
47
- >
48
- <InnerBlocks.Content />
49
- </div>
50
- </div>
51
- </div>
52
- );
53
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/deprecated/0.0.4/save.js DELETED
@@ -1,95 +0,0 @@
1
- import { RichText, InnerBlocks } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const {
5
- balloonName,
6
- balloonType,
7
- balloonBorder,
8
- balloonImageBorder,
9
- balloonBorderColor,
10
- balloonBgColor,
11
- balloonAlign,
12
- IconImage,
13
- balloonImageType,
14
- balloonAnimation,
15
- } = attributes;
16
-
17
- let classContentBorder;
18
- let classIconImageBorder;
19
- let borderColorStyle;
20
- let backgroundColorStyle;
21
-
22
- if (balloonBorder === true) {
23
- classContentBorder = 'vk_balloon_content-border-true';
24
-
25
- if (balloonImageBorder === true) {
26
- classIconImageBorder = 'vk_balloon-image-border';
27
- } else {
28
- classIconImageBorder = '';
29
- }
30
-
31
- borderColorStyle = balloonBorderColor;
32
- backgroundColorStyle = balloonBgColor;
33
- } else {
34
- classContentBorder = '';
35
- classIconImageBorder = '';
36
- borderColorStyle = balloonBgColor;
37
- backgroundColorStyle = balloonBgColor;
38
- }
39
-
40
- let triangleBorderColorStyle;
41
- if (balloonAlign === 'position-right') {
42
- triangleBorderColorStyle = `transparent transparent transparent ${backgroundColorStyle}`;
43
- } else {
44
- triangleBorderColorStyle = `transparent ${backgroundColorStyle} transparent transparent`;
45
- }
46
-
47
- return (
48
- <div
49
- className={`vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType} vk_balloon-animation-${balloonAnimation}`}
50
- >
51
- <div className={`vk_balloon_icon`}>
52
- {IconImage ? (
53
- <figure>
54
- <img
55
- className={`vk_balloon_icon_image vk_balloon-image-${balloonImageType} ${classIconImageBorder}`}
56
- style={{ borderColor: borderColorStyle }}
57
- src={IconImage}
58
- alt=""
59
- />
60
- <RichText.Content
61
- tagName="figcaption"
62
- className={'vk_balloon_icon_name'}
63
- value={balloonName}
64
- />
65
- </figure>
66
- ) : (
67
- ''
68
- )}
69
- </div>
70
- <div className={`vk_balloon_content_outer`}>
71
- <div
72
- className={`vk_balloon_content ${classContentBorder}`}
73
- style={{
74
- backgroundColor: backgroundColorStyle,
75
- borderColor: borderColorStyle,
76
- }}
77
- >
78
- <span
79
- className={`vk_balloon_content_before`}
80
- style={{
81
- borderColor: triangleBorderColorStyle,
82
- }}
83
- ></span>
84
- <span
85
- className={`vk_balloon_content_after`}
86
- style={{
87
- borderColor: triangleBorderColorStyle,
88
- }}
89
- ></span>
90
- <InnerBlocks.Content />
91
- </div>
92
- </div>
93
- </div>
94
- );
95
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/deprecated/0.37.1/save.js DELETED
@@ -1,44 +0,0 @@
1
- import { RichText, InnerBlocks } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
-
5
- let {
6
- content,
7
- balloonName,
8
- balloonType,
9
- balloonBgColor,
10
- balloonAlign,
11
- IconImage,
12
- balloonImageType
13
- } = attributes;
14
-
15
- //For recovering
16
- balloonImageType = balloonImageType ? balloonImageType : "normal"
17
-
18
- return (
19
- <div
20
- className={`vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType}`}
21
- >
22
- <div className={ `vk_balloon_icon` }>
23
- {IconImage ? (
24
- <figure>
25
- <img className={`vk_balloon_icon_image vk_balloon-image-${balloonImageType}`} src={IconImage} alt="" />
26
- <RichText.Content
27
- tagName="figcaption"
28
- className={"vk_balloon_icon_name"}
29
- value={balloonName}
30
- />
31
- </figure>
32
- ) : (
33
- ""
34
- )}
35
- </div>
36
- <RichText.Content
37
- className={"vk_balloon_content"}
38
- style={{ background: balloonBgColor, border: balloonBgColor }}
39
- tagName="p"
40
- value={content}
41
- />
42
- </div>
43
- );
44
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/deprecated/0.58.6/save.js DELETED
@@ -1,95 +0,0 @@
1
- import { RichText, InnerBlocks } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const {
5
- balloonName,
6
- balloonType,
7
- balloonBorder,
8
- balloonImageBorder,
9
- balloonBorderColor,
10
- balloonBgColor,
11
- balloonAlign,
12
- IconImage,
13
- balloonImageType,
14
- balloonAnimation,
15
- } = attributes;
16
-
17
- let classContentBorder;
18
- let classIconImageBorder;
19
- let borderColorStyle;
20
- let backgroundColorStyle;
21
-
22
- if (balloonBorder === true) {
23
- classContentBorder = 'vk_balloon_content-border-true';
24
-
25
- if (balloonImageBorder === true) {
26
- classIconImageBorder = 'vk_balloon_icon_image-border-true';
27
- } else {
28
- classIconImageBorder = '';
29
- }
30
-
31
- borderColorStyle = balloonBorderColor;
32
- backgroundColorStyle = balloonBgColor;
33
- } else {
34
- classContentBorder = '';
35
- classIconImageBorder = '';
36
- borderColorStyle = balloonBgColor;
37
- backgroundColorStyle = balloonBgColor;
38
- }
39
-
40
- let triangleBorderColorStyle;
41
- if (balloonAlign === 'position-right') {
42
- triangleBorderColorStyle = `transparent transparent transparent ${backgroundColorStyle}`;
43
- } else {
44
- triangleBorderColorStyle = `transparent ${backgroundColorStyle} transparent transparent`;
45
- }
46
-
47
- return (
48
- <div
49
- className={`vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType} vk_balloon-animation-${balloonAnimation}`}
50
- >
51
- <div className={`vk_balloon_icon`}>
52
- {IconImage ? (
53
- <figure>
54
- <img
55
- className={`vk_balloon_icon_image vk_balloon_icon_image-type-${balloonImageType} ${classIconImageBorder}`}
56
- style={{ borderColor: borderColorStyle }}
57
- src={IconImage}
58
- alt=""
59
- />
60
- <RichText.Content
61
- tagName="figcaption"
62
- className={'vk_balloon_icon_name'}
63
- value={balloonName}
64
- />
65
- </figure>
66
- ) : (
67
- ''
68
- )}
69
- </div>
70
- <div className={`vk_balloon_content_outer`}>
71
- <div
72
- className={`vk_balloon_content ${classContentBorder}`}
73
- style={{
74
- backgroundColor: backgroundColorStyle,
75
- borderColor: borderColorStyle,
76
- }}
77
- >
78
- <span
79
- className={`vk_balloon_content_before`}
80
- style={{
81
- borderColor: triangleBorderColorStyle,
82
- }}
83
- ></span>
84
- <span
85
- className={`vk_balloon_content_after`}
86
- style={{
87
- borderColor: triangleBorderColorStyle,
88
- }}
89
- ></span>
90
- <InnerBlocks.Content />
91
- </div>
92
- </div>
93
- </div>
94
- );
95
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/deprecated/0.58.7/save.js DELETED
@@ -1,95 +0,0 @@
1
- import { RichText, InnerBlocks } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const {
5
- balloonName,
6
- balloonType,
7
- balloonBorder,
8
- balloonImageBorder,
9
- balloonBorderColor,
10
- balloonBgColor,
11
- balloonAlign,
12
- IconImage,
13
- balloonImageType,
14
- balloonAnimation,
15
- } = attributes;
16
-
17
- let contentBorderClass;
18
- let iconImageBorderClass;
19
- let borderColorStyle;
20
- let backgroundColorStyle;
21
-
22
- if (balloonBorder === true) {
23
- contentBorderClass = 'vk_balloon_content-border-true';
24
-
25
- if (balloonImageBorder === true) {
26
- iconImageBorderClass = 'vk_balloon_icon_image-border-true';
27
- } else {
28
- iconImageBorderClass = '';
29
- }
30
-
31
- borderColorStyle = balloonBorderColor;
32
- backgroundColorStyle = balloonBgColor;
33
- } else {
34
- contentBorderClass = '';
35
- iconImageBorderClass = '';
36
- borderColorStyle = balloonBgColor;
37
- backgroundColorStyle = balloonBgColor;
38
- }
39
-
40
- let triangleBorderColorStyle;
41
- if (balloonAlign === 'position-right') {
42
- triangleBorderColorStyle = `transparent transparent transparent ${backgroundColorStyle}`;
43
- } else {
44
- triangleBorderColorStyle = `transparent ${backgroundColorStyle} transparent transparent`;
45
- }
46
-
47
- return (
48
- <div
49
- className={`vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType} vk_balloon-animation-${balloonAnimation}`}
50
- >
51
- <div className={`vk_balloon_icon`}>
52
- {IconImage ? (
53
- <figure>
54
- <img
55
- className={`vk_balloon_icon_image vk_balloon_icon_image-type-${balloonImageType} ${iconImageBorderClass}`}
56
- style={{ borderColor: borderColorStyle }}
57
- src={IconImage}
58
- alt=""
59
- />
60
- <RichText.Content
61
- tagName="figcaption"
62
- className={'vk_balloon_icon_name'}
63
- value={balloonName}
64
- />
65
- </figure>
66
- ) : (
67
- ''
68
- )}
69
- </div>
70
- <div className={`vk_balloon_content_outer`}>
71
- <div
72
- className={`vk_balloon_content ${contentBorderClass}`}
73
- style={{
74
- backgroundColor: backgroundColorStyle,
75
- borderColor: borderColorStyle,
76
- }}
77
- >
78
- <span
79
- className={`vk_balloon_content_before`}
80
- style={{
81
- borderColor: triangleBorderColorStyle,
82
- }}
83
- ></span>
84
- <span
85
- className={`vk_balloon_content_after`}
86
- style={{
87
- borderColor: triangleBorderColorStyle,
88
- }}
89
- ></span>
90
- <InnerBlocks.Content />
91
- </div>
92
- </div>
93
- </div>
94
- );
95
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/deprecated/1.20.5/save.js DELETED
@@ -1,97 +0,0 @@
1
- import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const {
5
- balloonName,
6
- balloonType,
7
- balloonBorder,
8
- balloonImageBorder,
9
- balloonBorderColor,
10
- balloonBgColor,
11
- balloonAlign,
12
- IconImage,
13
- balloonImageType,
14
- balloonAnimation,
15
- } = attributes;
16
-
17
- let contentBorderClass;
18
- let iconImageBorderClass;
19
- let borderColorStyle;
20
- let backgroundColorStyle;
21
-
22
- if (balloonBorder === true) {
23
- contentBorderClass = 'vk_balloon_content-border-true';
24
-
25
- if (balloonImageBorder === true) {
26
- iconImageBorderClass = 'vk_balloon_icon_image-border-true';
27
- } else {
28
- iconImageBorderClass = '';
29
- }
30
-
31
- borderColorStyle = balloonBorderColor;
32
- backgroundColorStyle = balloonBgColor;
33
- } else {
34
- contentBorderClass = '';
35
- iconImageBorderClass = '';
36
- borderColorStyle = balloonBgColor;
37
- backgroundColorStyle = balloonBgColor;
38
- }
39
-
40
- let triangleBorderColorStyle;
41
- if (balloonAlign === 'position-right') {
42
- triangleBorderColorStyle = `transparent transparent transparent ${backgroundColorStyle}`;
43
- } else {
44
- triangleBorderColorStyle = `transparent ${backgroundColorStyle} transparent transparent`;
45
- }
46
-
47
- return (
48
- <div
49
- {...useBlockProps.save({
50
- className: `vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType} vk_balloon-animation-${balloonAnimation}`,
51
- })}
52
- >
53
- <div className={`vk_balloon_icon`}>
54
- {IconImage ? (
55
- <figure>
56
- <img
57
- className={`vk_balloon_icon_image vk_balloon_icon_image-type-${balloonImageType} ${iconImageBorderClass}`}
58
- style={{ borderColor: borderColorStyle }}
59
- src={IconImage}
60
- alt=""
61
- />
62
- <RichText.Content
63
- tagName="figcaption"
64
- className={'vk_balloon_icon_name'}
65
- value={balloonName}
66
- />
67
- </figure>
68
- ) : (
69
- ''
70
- )}
71
- </div>
72
- <div className={`vk_balloon_content_outer`}>
73
- <div
74
- className={`vk_balloon_content ${contentBorderClass}`}
75
- style={{
76
- backgroundColor: backgroundColorStyle,
77
- borderColor: borderColorStyle,
78
- }}
79
- >
80
- <span
81
- className={`vk_balloon_content_before`}
82
- style={{
83
- borderColor: triangleBorderColorStyle,
84
- }}
85
- ></span>
86
- <span
87
- className={`vk_balloon_content_after`}
88
- style={{
89
- borderColor: triangleBorderColorStyle,
90
- }}
91
- ></span>
92
- <InnerBlocks.Content />
93
- </div>
94
- </div>
95
- </div>
96
- );
97
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/deprecated/1.20.7/save.js DELETED
@@ -1,279 +0,0 @@
1
- import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';
2
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
3
-
4
- export default function save({ attributes }) {
5
- const {
6
- balloonName,
7
- balloonType,
8
- balloonBorder,
9
- balloonImageBorder,
10
- balloonBorderColor,
11
- balloonBgColor,
12
- balloonAlign,
13
- IconImage,
14
- balloonImageType,
15
- balloonAnimation,
16
- } = attributes;
17
-
18
- let contentBorderClass = '';
19
- let iconImageBorderClass = '';
20
- let contentBackgroundClass = '';
21
- let colorStyle = {};
22
- let triangleBorderColorBeforeClass = '';
23
- let triangleBorderColorAfterClass = '';
24
- let triangleBorderColorBeforeStyle = {};
25
- let triangleBorderColorAfterStyle = {};
26
-
27
- //吹き出しに枠線を追加オン
28
- if (balloonBorder === true) {
29
- contentBorderClass += 'vk_balloon_content-border-true';
30
-
31
- if (balloonImageBorder === true) {
32
- iconImageBorderClass += 'vk_balloon_icon_image-border-true';
33
- } else {
34
- iconImageBorderClass = '';
35
- }
36
-
37
- //iconImageBorderClass
38
- //contentBorderClass
39
- if (balloonBorderColor !== undefined) {
40
- iconImageBorderClass += ` has-text-color`;
41
- contentBorderClass += ` has-text-color`;
42
- //カラーパレットの時
43
- if (!isHexColor(balloonBorderColor)) {
44
- iconImageBorderClass += ` has-${balloonBorderColor}-color`;
45
- contentBorderClass += ` has-${balloonBorderColor}-color`;
46
- }
47
- }
48
-
49
- //colorStyle
50
- //カスタム*パレット
51
- if (isHexColor(balloonBorderColor) && !isHexColor(balloonBgColor)) {
52
- colorStyle = {
53
- borderColor: `${balloonBorderColor}`,
54
- };
55
- //パレット*カスタム
56
- } else if (
57
- !isHexColor(balloonBorderColor) &&
58
- isHexColor(balloonBgColor)
59
- ) {
60
- colorStyle = {
61
- background: `${balloonBgColor}`,
62
- };
63
- //カスタム*カスタム
64
- } else if (
65
- isHexColor(balloonBorderColor) &&
66
- isHexColor(balloonBgColor)
67
- ) {
68
- colorStyle = {
69
- borderColor: `${balloonBorderColor}`,
70
- background: `${balloonBgColor}`,
71
- };
72
- }
73
-
74
- // 吹き出しの配置 左
75
- if (balloonAlign === 'position-left') {
76
- // 吹き出しの矢印 Class
77
- // カラーパレットの時
78
- // 吹き出しの時
79
- if ('type-speech' === balloonType) {
80
- if (balloonBgColor !== undefined) {
81
- triangleBorderColorBeforeClass += ` has-text-color`;
82
- if (!isHexColor(balloonBgColor)) {
83
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
84
- }
85
- }
86
- if (balloonBorderColor !== undefined) {
87
- triangleBorderColorAfterClass += ` has-text-color`;
88
- if (!isHexColor(balloonBorderColor)) {
89
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
90
- }
91
- }
92
- //もくもくの時
93
- } else if ('type-think' === balloonType) {
94
- if (balloonBorderColor !== undefined) {
95
- triangleBorderColorBeforeClass += ` has-text-color`;
96
- if (!isHexColor(balloonBorderColor)) {
97
- triangleBorderColorBeforeClass += ` has-${balloonBorderColor}-color`;
98
- }
99
- }
100
- if (balloonBorderColor !== undefined) {
101
- triangleBorderColorAfterClass += ` has-text-color`;
102
- if (!isHexColor(balloonBorderColor)) {
103
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
104
- }
105
- }
106
- }
107
-
108
- //吹き出しの矢印 Style
109
- //カスタムカラーの時
110
- if (isHexColor(balloonBorderColor)) {
111
- triangleBorderColorAfterStyle = {
112
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
113
- };
114
- }
115
- if (isHexColor(balloonBgColor)) {
116
- triangleBorderColorBeforeStyle = {
117
- borderColor: `transparent ${balloonBgColor} transparent transparent`,
118
- };
119
- }
120
-
121
- // 吹き出しの配置 右
122
- } else if (balloonAlign === 'position-right') {
123
- // 吹き出しの時
124
- // カラーパレットの時
125
- if ('type-speech' === balloonType) {
126
- if (balloonBgColor !== undefined) {
127
- triangleBorderColorBeforeClass += ` has-text-color`;
128
- if (!isHexColor(balloonBgColor)) {
129
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
130
- }
131
- }
132
- if (balloonBorderColor !== undefined) {
133
- triangleBorderColorAfterClass += ` has-text-color`;
134
- if (!isHexColor(balloonBorderColor)) {
135
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
136
- }
137
- }
138
- // もくもくの時
139
- // カラーパレットの時
140
- } else if ('type-think' === balloonType) {
141
- if (balloonBorderColor !== undefined) {
142
- triangleBorderColorBeforeClass += ` has-text-color`;
143
- triangleBorderColorAfterClass += ` has-text-color`;
144
- if (!isHexColor(balloonBorderColor)) {
145
- triangleBorderColorBeforeClass += ` has-${balloonBorderColor}-color`;
146
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
147
- }
148
- }
149
- }
150
-
151
- //吹き出しの矢印 Style
152
- //カスタムカラーの時
153
- if (isHexColor(balloonBorderColor)) {
154
- triangleBorderColorAfterStyle = {
155
- borderColor: `transparent ${balloonBorderColor} transparent transparent`,
156
- };
157
- }
158
- if (isHexColor(balloonBgColor)) {
159
- triangleBorderColorBeforeStyle = {
160
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
161
- };
162
- }
163
- }
164
-
165
- //吹き出しに枠線を追加オフ
166
- } else if (balloonBgColor !== undefined) {
167
- iconImageBorderClass = '';
168
-
169
- // 吹き出しの背景色 Style
170
- if (balloonBgColor !== undefined) {
171
- //カスタムカラーの時
172
- if (isHexColor(balloonBgColor)) {
173
- colorStyle = {
174
- background: `${balloonBgColor}`,
175
- };
176
- }
177
- }
178
-
179
- if (balloonAlign === 'position-left') {
180
- // 吹き出しの矢印 Class
181
- // カラーパレットの時
182
- // 吹き出しの時
183
- if ('type-speech' === balloonType) {
184
- if (balloonBgColor !== undefined) {
185
- triangleBorderColorBeforeClass += ` has-text-color`;
186
- if (!isHexColor(balloonBgColor)) {
187
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
188
- }
189
- }
190
- }
191
-
192
- //吹き出しの矢印 Style
193
- //カスタムカラーの時
194
- if (isHexColor(balloonBorderColor)) {
195
- triangleBorderColorAfterStyle = {
196
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
197
- };
198
- }
199
- if (isHexColor(balloonBgColor)) {
200
- triangleBorderColorBeforeStyle = {
201
- borderColor: `transparent ${balloonBgColor} transparent transparent`,
202
- };
203
- }
204
- } else if (balloonAlign === 'position-right') {
205
- // 吹き出しの矢印 Class
206
- // カラーパレットの時
207
- // 吹き出しの時
208
- if ('type-speech' === balloonType) {
209
- if (balloonBgColor !== undefined) {
210
- triangleBorderColorBeforeClass += ` has-text-color`;
211
- if (!isHexColor(balloonBgColor)) {
212
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
213
- }
214
- }
215
- }
216
-
217
- //吹き出しの矢印 Style
218
- //カスタムカラーの時
219
- if (isHexColor(balloonBgColor)) {
220
- triangleBorderColorBeforeStyle = {
221
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
222
- };
223
- }
224
- }
225
- }
226
-
227
- // 吹き出しの背景色 Class
228
- if (balloonBgColor !== undefined) {
229
- contentBackgroundClass += ` has-background-color`;
230
- //カラーパレットの時
231
- if (!isHexColor(balloonBgColor)) {
232
- contentBackgroundClass += ` has-${balloonBgColor}-background-color`;
233
- }
234
- }
235
-
236
- const blockProps = useBlockProps.save({
237
- className: `vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType} vk_balloon-animation-${balloonAnimation}`,
238
- });
239
-
240
- return (
241
- <div {...blockProps}>
242
- <div className={`vk_balloon_icon`}>
243
- {IconImage ? (
244
- <figure>
245
- <img
246
- className={`vk_balloon_icon_image vk_balloon_icon_image-type-${balloonImageType} ${iconImageBorderClass}`}
247
- style={colorStyle}
248
- src={IconImage}
249
- alt=""
250
- />
251
- <RichText.Content
252
- tagName="figcaption"
253
- className={'vk_balloon_icon_name'}
254
- value={balloonName}
255
- />
256
- </figure>
257
- ) : (
258
- ''
259
- )}
260
- </div>
261
- <div className={`vk_balloon_content_outer`}>
262
- <div
263
- className={`vk_balloon_content ${contentBackgroundClass} ${contentBorderClass}`}
264
- style={colorStyle}
265
- >
266
- <span
267
- className={`vk_balloon_content_before ${triangleBorderColorBeforeClass}`}
268
- style={triangleBorderColorBeforeStyle}
269
- ></span>
270
- <span
271
- className={`vk_balloon_content_after ${triangleBorderColorAfterClass}`}
272
- style={triangleBorderColorAfterStyle}
273
- ></span>
274
- <InnerBlocks.Content />
275
- </div>
276
- </div>
277
- </div>
278
- );
279
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/deprecated/index.js DELETED
@@ -1,145 +0,0 @@
1
- import save000 from './0.0.0/save';
2
- import save001 from './0.0.1/save';
3
- import save002 from './0.0.2/save';
4
- import save003 from './0.0.3/save';
5
- import save004 from './0.0.4/save';
6
- import save0_37_1 from './0.37.1/save';
7
- import save0_58_6 from './0.58.6/save';
8
- import save0_58_7 from './0.58.7/save';
9
- import save1_20_5 from './1.20.5/save';
10
- import save1_20_7 from './1.20.7/save';
11
-
12
- const blockAttributes = {
13
- content: {
14
- source: 'html',
15
- selector: 'p',
16
- },
17
- balloonName: {
18
- source: 'html',
19
- selector: 'figcaption',
20
- },
21
- balloonType: {
22
- type: 'string',
23
- default: 'type-serif',
24
- },
25
- balloonBgColor: {
26
- type: 'string',
27
- },
28
- balloonAlign: {
29
- type: 'string',
30
- default: 'position-left',
31
- },
32
- IconImage: {
33
- type: 'string',
34
- default: null, // no image by default!
35
- },
36
- };
37
-
38
- const blockAttributes2 = {
39
- ...blockAttributes,
40
- balloonImageType: {
41
- type: 'string',
42
- default: 'normal',
43
- },
44
- }
45
-
46
- const blockAttributes3 = {
47
- ...blockAttributes2,
48
- balloonImageType: {
49
- type: 'string',
50
- default: 'normal', // no image by default!
51
- },
52
- balloonAnimation: {
53
- type: 'string',
54
- default: 'none', // no image by default!
55
- },
56
- }
57
-
58
- const blockAttributes4 = {
59
- ...blockAttributes3,
60
- balloonImageType: {
61
- type: 'string',
62
- default: 'normal', // no image by default!
63
- },
64
- balloonAnimation: {
65
- type: 'string',
66
- default: 'none', // no image by default!
67
- },
68
- balloonBorder: {
69
- type: 'boolean',
70
- default: false,
71
- },
72
- balloonImageBorder: {
73
- type: 'boolean',
74
- default: false,
75
- },
76
- balloonBorderWidth: {
77
- type: 'string',
78
- default: 'thin',
79
- },
80
- balloonBorderColor: {
81
- type: 'string',
82
- default: null,
83
- },
84
- // balloonTypeのdefaultがtype-serifからtype-speechにver 0.56.0で変更された調整
85
- balloonType: {
86
- type: 'string',
87
- default: 'type-speech',
88
- },
89
- }
90
-
91
- const blockAttributes5 = {
92
- ...blockAttributes4,
93
- balloonBorderColor: {
94
- type: 'string',
95
- default: "#cccccc",
96
- },
97
- balloonBgColor: {
98
- type: 'string',
99
- default: "#f5f5f5",
100
- },
101
- }
102
-
103
- const deprecated = [
104
- {
105
- attributes: blockAttributes5,
106
- save: save1_20_7,
107
- },
108
- {
109
- attributes: blockAttributes5,
110
- save: save1_20_5,
111
- },
112
- {
113
- attributes: blockAttributes4,
114
- save: save0_58_7,
115
- },
116
- {
117
- attributes: blockAttributes4,
118
- save: save0_58_6,
119
- },
120
- {
121
- attributes: blockAttributes4,
122
- save: save004,
123
- },
124
- {
125
- attributes: blockAttributes3,
126
- save: save003,
127
- },
128
- {
129
- attributes: blockAttributes3,
130
- save: save002,
131
- },
132
- {
133
- attributes: blockAttributes2,
134
- save:save0_37_1,
135
- },
136
- {
137
- attributes: blockAttributes2,
138
- save: save001,
139
- },
140
- {
141
- attributes: blockAttributes,
142
- save: save000,
143
- },
144
- ];
145
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/edit.js DELETED
@@ -1,628 +0,0 @@
1
- import {
2
- RichText,
3
- InspectorControls,
4
- MediaUpload,
5
- InnerBlocks,
6
- useBlockProps,
7
- } from '@wordpress/block-editor';
8
- import apiFetch from '@wordpress/api-fetch';
9
- import {
10
- ButtonGroup,
11
- PanelBody,
12
- Button,
13
- SelectControl,
14
- BaseControl,
15
- ToggleControl,
16
- } from '@wordpress/components';
17
- import { useState, useEffect } from '@wordpress/element';
18
- import { __ } from '@wordpress/i18n';
19
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
20
- import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette';
21
-
22
- export default function BalloonEdit(props) {
23
- const { attributes, setAttributes } = props;
24
- const {
25
- content,
26
- balloonName,
27
- balloonType,
28
- balloonBorder,
29
- balloonImageBorder,
30
- balloonBorderColor,
31
- balloonBgColor,
32
- balloonAlign,
33
- IconImage,
34
- balloonImageType,
35
- balloonAnimation,
36
- } = attributes;
37
- const [blockMeta, setBlockMeta] = useState(null);
38
-
39
- useEffect(() => {
40
- apiFetch({
41
- path: '/vk-blocks/v1/block-meta/balloon/',
42
- method: 'GET',
43
- parse: true,
44
- }).then((result) => {
45
- setBlockMeta(result);
46
- });
47
- }, []);
48
-
49
- let defautIconButtons;
50
- if (blockMeta && blockMeta.default_icons) {
51
- defautIconButtons = Object.keys(blockMeta.default_icons).map(
52
- (index) => {
53
- const defaultIcon = blockMeta.default_icons[index];
54
-
55
- let contentIcon = '';
56
-
57
- if (defaultIcon.src) {
58
- contentIcon = (
59
- <div key={index}>
60
- <Button
61
- onClick={() => {
62
- setAttributes({
63
- IconImage: defaultIcon.src,
64
- });
65
- setAttributes({
66
- balloonName: defaultIcon.name,
67
- });
68
- }}
69
- className={
70
- 'button button-large components-button'
71
- }
72
- >
73
- <img
74
- className={'icon-image'}
75
- src={defaultIcon.src}
76
- alt={defaultIcon.name}
77
- />
78
- </Button>
79
- </div>
80
- );
81
- }
82
- return contentIcon;
83
- }
84
- );
85
- }
86
-
87
- if ('type-serif' === balloonType) {
88
- setAttributes({ balloonType: 'type-speech' });
89
- }
90
-
91
- if (balloonImageType === null || balloonImageType === undefined) {
92
- setAttributes({ balloonImageType: 'normal' });
93
- }
94
-
95
- if (balloonAnimation === null || balloonAnimation === undefined) {
96
- setAttributes({ balloonAnimation: 'none' });
97
- }
98
-
99
- if (balloonBorder === null || balloonBorder === undefined) {
100
- setAttributes({ balloonBorder: false });
101
- }
102
-
103
- if (balloonImageBorder === null || balloonImageBorder === undefined) {
104
- setAttributes({ balloonImageBorder: false });
105
- }
106
-
107
- let BorderSetting;
108
- let contentBorderClass = '';
109
- let iconImageBorderClass = '';
110
- let contentBackgroundClass = '';
111
- let iconImageColorStyle = {};
112
- let contentColorStyle = {};
113
- let triangleBorderColorBeforeClass = '';
114
- let triangleBorderColorAfterClass = '';
115
- let triangleBorderColorBeforeStyle = {};
116
- let triangleBorderColorAfterStyle = {};
117
-
118
- // 後方互換 (カスタムカラー選択時 インラインcssをcontentとiconに分ける)
119
- const colorStyle = {};
120
- if (colorStyle) {
121
- contentColorStyle = colorStyle;
122
- iconImageColorStyle = colorStyle;
123
- }
124
- if ('background' in iconImageColorStyle) {
125
- delete iconImageColorStyle.background;
126
- }
127
-
128
- //吹き出しに枠線を追加オン
129
- if (balloonBorder === true) {
130
- BorderSetting = (
131
- <BaseControl>
132
- <p className={'mb-1 block-prop-title'}>
133
- {__('Border', 'vk-blocks')}{' '}
134
- </p>
135
- <ToggleControl
136
- label={__('Add border to balloon', 'vk-blocks')}
137
- checked={balloonBorder}
138
- onChange={(checked) =>
139
- setAttributes({ balloonBorder: checked })
140
- }
141
- />
142
-
143
- <p className={'mb-1 block-prop-title'}>
144
- {__(' Image Border', 'vk-blocks')}
145
- </p>
146
- <ToggleControl
147
- label={__('Add border to image', 'vk-blocks')}
148
- className={'mb-1'}
149
- checked={balloonImageBorder}
150
- onChange={(checked) =>
151
- setAttributes({ balloonImageBorder: checked })
152
- }
153
- />
154
- <p>
155
- {__(
156
- '* You can change border width on Setting > VK Blocks',
157
- 'vk-blocks'
158
- )}{' '}
159
- </p>
160
-
161
- <p className={'mb-1 block-prop-title'}>
162
- {__('Border color of speech balloon', 'vk-blocks')}
163
- </p>
164
- <AdvancedColorPalette
165
- schema={'balloonBorderColor'}
166
- {...props}
167
- />
168
- </BaseControl>
169
- );
170
-
171
- contentBorderClass += 'vk_balloon_content-border-true';
172
-
173
- if (balloonImageBorder === true) {
174
- iconImageBorderClass += 'vk_balloon_icon_image-border-true';
175
- } else {
176
- iconImageBorderClass = '';
177
- }
178
-
179
- //iconImageBorderClass
180
- //contentBorderClass
181
- if (balloonBorderColor !== undefined) {
182
- iconImageBorderClass += ` has-text-color`;
183
- contentBorderClass += ` has-text-color`;
184
- //カラーパレットの時
185
- if (!isHexColor(balloonBorderColor)) {
186
- iconImageBorderClass += ` has-${balloonBorderColor}-color`;
187
- contentBorderClass += ` has-${balloonBorderColor}-color`;
188
- }
189
- }
190
-
191
- //contentColorStyle
192
- //iconImageColorStyle
193
- //カスタム*パレット
194
- if (isHexColor(balloonBorderColor) && !isHexColor(balloonBgColor)) {
195
- contentColorStyle = {
196
- borderColor: `${balloonBorderColor}`,
197
- };
198
- iconImageColorStyle = {
199
- borderColor: `${balloonBorderColor}`,
200
- };
201
- //パレット*カスタム
202
- } else if (
203
- !isHexColor(balloonBorderColor) &&
204
- isHexColor(balloonBgColor)
205
- ) {
206
- contentColorStyle = {
207
- background: `${balloonBgColor}`,
208
- };
209
- //カスタム*カスタム
210
- } else if (
211
- isHexColor(balloonBorderColor) &&
212
- isHexColor(balloonBgColor)
213
- ) {
214
- contentColorStyle = {
215
- borderColor: `${balloonBorderColor}`,
216
- background: `${balloonBgColor}`,
217
- };
218
- iconImageColorStyle = {
219
- borderColor: `${balloonBorderColor}`,
220
- };
221
- }
222
-
223
- // 吹き出しの配置 左
224
- if (balloonAlign === 'position-left') {
225
- // 吹き出しの矢印 Class
226
- // カラーパレットの時
227
- // 吹き出しの時
228
- if ('type-speech' === balloonType) {
229
- if (balloonBgColor !== undefined) {
230
- triangleBorderColorBeforeClass += ` has-text-color`;
231
- if (!isHexColor(balloonBgColor)) {
232
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
233
- }
234
- }
235
- if (balloonBorderColor !== undefined) {
236
- triangleBorderColorAfterClass += ` has-text-color`;
237
- if (!isHexColor(balloonBorderColor)) {
238
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
239
- }
240
- }
241
- //もくもくの時
242
- } else if ('type-think' === balloonType) {
243
- if (balloonBorderColor !== undefined) {
244
- triangleBorderColorBeforeClass += ` has-text-color`;
245
- if (!isHexColor(balloonBorderColor)) {
246
- triangleBorderColorBeforeClass += ` has-${balloonBorderColor}-color`;
247
- }
248
- }
249
- if (balloonBorderColor !== undefined) {
250
- triangleBorderColorAfterClass += ` has-text-color`;
251
- if (!isHexColor(balloonBorderColor)) {
252
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
253
- }
254
- }
255
- }
256
-
257
- //吹き出しの矢印 Style
258
- //カスタムカラーの時
259
- if (isHexColor(balloonBorderColor)) {
260
- triangleBorderColorAfterStyle = {
261
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
262
- };
263
- }
264
- if (isHexColor(balloonBgColor)) {
265
- triangleBorderColorBeforeStyle = {
266
- borderColor: `transparent ${balloonBgColor} transparent transparent`,
267
- };
268
- }
269
-
270
- // 吹き出しの配置 右
271
- } else if (balloonAlign === 'position-right') {
272
- // 吹き出しの時
273
- // カラーパレットの時
274
- if ('type-speech' === balloonType) {
275
- if (balloonBgColor !== undefined) {
276
- triangleBorderColorBeforeClass += ` has-text-color`;
277
- if (!isHexColor(balloonBgColor)) {
278
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
279
- }
280
- }
281
- if (balloonBorderColor !== undefined) {
282
- triangleBorderColorAfterClass += ` has-text-color`;
283
- if (!isHexColor(balloonBorderColor)) {
284
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
285
- }
286
- }
287
- // もくもくの時
288
- // カラーパレットの時
289
- } else if ('type-think' === balloonType) {
290
- if (balloonBorderColor !== undefined) {
291
- triangleBorderColorBeforeClass += ` has-text-color`;
292
- triangleBorderColorAfterClass += ` has-text-color`;
293
- if (!isHexColor(balloonBorderColor)) {
294
- triangleBorderColorBeforeClass += ` has-${balloonBorderColor}-color`;
295
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
296
- }
297
- }
298
- }
299
-
300
- //吹き出しの矢印 Style
301
- //カスタムカラーの時
302
- if (isHexColor(balloonBorderColor)) {
303
- triangleBorderColorAfterStyle = {
304
- borderColor: `transparent ${balloonBorderColor} transparent transparent`,
305
- };
306
- }
307
- if (isHexColor(balloonBgColor)) {
308
- triangleBorderColorBeforeStyle = {
309
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
310
- };
311
- }
312
- }
313
-
314
- //吹き出しに枠線を追加オフ
315
- } else {
316
- BorderSetting = (
317
- <BaseControl>
318
- <p className={'mb-1 block-prop-title'}>
319
- {__('Border', 'vk-blocks')}
320
- </p>
321
- <ToggleControl
322
- label={__('Add border to balloon', 'vk-blocks')}
323
- checked={balloonBorder}
324
- onChange={(checked) =>
325
- setAttributes({ balloonBorder: checked })
326
- }
327
- />
328
- </BaseControl>
329
- );
330
-
331
- iconImageBorderClass = '';
332
-
333
- // 吹き出しの背景色 Style
334
- if (balloonBgColor !== undefined) {
335
- //カスタムカラーの時
336
- if (isHexColor(balloonBgColor)) {
337
- contentColorStyle = {
338
- background: `${balloonBgColor}`,
339
- };
340
- }
341
- }
342
-
343
- if (balloonAlign === 'position-left') {
344
- // 吹き出しの矢印 Class
345
- // カラーパレットの時
346
- // 吹き出しの時
347
- if ('type-speech' === balloonType) {
348
- if (balloonBgColor !== undefined) {
349
- triangleBorderColorBeforeClass += ` has-text-color`;
350
- if (!isHexColor(balloonBgColor)) {
351
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
352
- }
353
- }
354
- }
355
-
356
- //吹き出しの矢印 Style
357
- //カスタムカラーの時
358
- if (isHexColor(balloonBorderColor)) {
359
- triangleBorderColorAfterStyle = {
360
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
361
- };
362
- }
363
- if (isHexColor(balloonBgColor)) {
364
- triangleBorderColorBeforeStyle = {
365
- borderColor: `transparent ${balloonBgColor} transparent transparent`,
366
- };
367
- }
368
- } else if (balloonAlign === 'position-right') {
369
- // 吹き出しの矢印 Class
370
- // カラーパレットの時
371
- // 吹き出しの時
372
- if ('type-speech' === balloonType) {
373
- if (balloonBgColor !== undefined) {
374
- triangleBorderColorBeforeClass += ` has-text-color`;
375
- if (!isHexColor(balloonBgColor)) {
376
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
377
- }
378
- }
379
- }
380
-
381
- //吹き出しの矢印 Style
382
- //カスタムカラーの時
383
- if (isHexColor(balloonBgColor)) {
384
- triangleBorderColorBeforeStyle = {
385
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
386
- };
387
- }
388
- }
389
- }
390
-
391
- // 吹き出しの背景色 Class
392
- if (balloonBgColor !== undefined) {
393
- contentBackgroundClass += ` has-background-color`;
394
- //カラーパレットの時
395
- if (!isHexColor(balloonBgColor)) {
396
- contentBackgroundClass += ` has-${balloonBgColor}-background-color`;
397
- }
398
- }
399
-
400
- const blockProps = useBlockProps({
401
- className: `vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType} vk_balloon-animation-${balloonAnimation}`,
402
- });
403
-
404
- return (
405
- <>
406
- <InspectorControls>
407
- <PanelBody title={__('Balloon setting', 'vk-blocks')}>
408
- <p className={'mb-1 block-prop-title'}>
409
- {__('Position', 'vk-blocks')}
410
- </p>
411
- <p className={'mb-1'}>
412
- {__(
413
- 'Please specify the layout of the balloon.',
414
- 'vk-blocks'
415
- )}{' '}
416
- </p>
417
- <ButtonGroup className="mb-3">
418
- <Button
419
- isSmall
420
- isPrimary={balloonAlign === 'position-left'}
421
- isSecondary={balloonAlign !== 'position-left'}
422
- onClick={() =>
423
- setAttributes({ balloonAlign: 'position-left' })
424
- }
425
- >
426
- {__('Left', 'vk-blocks')}
427
- </Button>
428
- <Button
429
- isSmall
430
- isPrimary={balloonAlign === 'position-right'}
431
- isSecondary={balloonAlign !== 'position-right'}
432
- onClick={() =>
433
- setAttributes({
434
- balloonAlign: 'position-right',
435
- })
436
- }
437
- >
438
- {__('Right', 'vk-blocks')}
439
- </Button>
440
- </ButtonGroup>
441
-
442
- <p className={'mb-1 block-prop-title'}>
443
- {__('Type', 'vk-blocks')}
444
- </p>
445
- <p className={'mb-1'}>
446
- {__('Please select the type of balloon.', 'vk-blocks')}{' '}
447
- </p>
448
- <ButtonGroup className="mb-3">
449
- <Button
450
- isSmall
451
- isPrimary={balloonType === 'type-speech'}
452
- isSecondary={balloonType !== 'type-speech'}
453
- onClick={() =>
454
- setAttributes({ balloonType: 'type-speech' })
455
- }
456
- >
457
- {__('Speech', 'vk-blocks')}
458
- </Button>
459
- <Button
460
- isSmall
461
- isPrimary={balloonType === 'type-think'}
462
- isSecondary={balloonType !== 'type-think'}
463
- onClick={() =>
464
- setAttributes({ balloonType: 'type-think' })
465
- }
466
- >
467
- {__('Thinking', 'vk-blocks')}
468
- </Button>
469
- </ButtonGroup>
470
-
471
- <p className={'mb-1 block-prop-title'}>
472
- {__('Image Style', 'vk-blocks')}
473
- </p>
474
- <ButtonGroup className="mb-3">
475
- <Button
476
- isSmall
477
- isPrimary={balloonImageType === 'normal'}
478
- isSecondary={balloonImageType !== 'normal'}
479
- onClick={() =>
480
- setAttributes({ balloonImageType: 'normal' })
481
- }
482
- >
483
- {__('Normal', 'vk-blocks')}
484
- </Button>
485
- <Button
486
- isSmall
487
- isPrimary={balloonImageType === 'rounded'}
488
- isSecondary={balloonImageType !== 'rounded'}
489
- onClick={() =>
490
- setAttributes({ balloonImageType: 'rounded' })
491
- }
492
- >
493
- {__('Rounded', 'vk-blocks')}
494
- </Button>
495
- <Button
496
- isSmall
497
- isPrimary={balloonImageType === 'circle'}
498
- isSecondary={balloonImageType !== 'circle'}
499
- onClick={() =>
500
- setAttributes({ balloonImageType: 'circle' })
501
- }
502
- >
503
- {__('Circle', 'vk-blocks')}
504
- </Button>
505
- </ButtonGroup>
506
-
507
- {BorderSetting}
508
-
509
- <p className={'mb-1 block-prop-title'}>
510
- {__('Background color of speech balloon', 'vk-blocks')}
511
- </p>
512
- <AdvancedColorPalette
513
- schema={'balloonBgColor'}
514
- {...props}
515
- />
516
- </PanelBody>
517
- <PanelBody title={__('Default Icon Setting', 'vk-blocks')}>
518
- <div className="icon-image-list mb-2">
519
- {defautIconButtons}
520
- </div>
521
- <div>
522
- {__(
523
- 'You can register default icons from Settings > VK Blocks in Admin.',
524
- 'vk-blocks'
525
- )}
526
- </div>
527
- </PanelBody>
528
- <PanelBody title={__('Animation setting', 'vk-blocks')}>
529
- <p className={'mb-1'}>
530
- {__(
531
- 'Please select the type of animation.',
532
- 'vk-blocks'
533
- )}{' '}
534
- </p>
535
- <SelectControl
536
- value={balloonAnimation}
537
- onChange={(value) =>
538
- setAttributes({ balloonAnimation: value })
539
- }
540
- options={[
541
- {
542
- value: 'none',
543
- label: __('None', 'vk-blocks'),
544
- },
545
- {
546
- value: 'trembling',
547
- label: __('Trembling', 'vk-blocks'),
548
- },
549
- {
550
- value: 'trembling-x',
551
- label: __('Trembling X', 'vk-blocks'),
552
- },
553
- {
554
- value: 'pounding',
555
- label: __('Pounding', 'vk-blocks'),
556
- },
557
- {
558
- value: 'shaking',
559
- label: __('Shaking', 'vk-blocks'),
560
- },
561
- ]}
562
- />
563
- </PanelBody>
564
- </InspectorControls>
565
- <div {...blockProps}>
566
- <div className={`vk_balloon_icon`}>
567
- <MediaUpload
568
- onSelect={(value) =>
569
- setAttributes({ IconImage: value.sizes.full.url })
570
- }
571
- type="image"
572
- className={`vk_balloon_icon_image vk_balloon_icon_image-type-${balloonImageType} ${iconImageBorderClass}`}
573
- value={IconImage}
574
- render={({ open }) => (
575
- <Button
576
- onClick={open}
577
- className={
578
- IconImage
579
- ? 'image-button'
580
- : 'button button-large'
581
- }
582
- >
583
- {!IconImage ? (
584
- __('Select image', 'vk-blocks')
585
- ) : (
586
- <img
587
- className={`vk_balloon_icon_image vk_balloon_icon_image-type-${balloonImageType} ${iconImageBorderClass}`}
588
- style={iconImageColorStyle}
589
- src={IconImage}
590
- alt={__('Upload image', 'vk-blocks')}
591
- />
592
- )}
593
- </Button>
594
- )}
595
- />
596
- <RichText
597
- tagName="figcaption"
598
- className={'vk_balloon_icon_name'}
599
- onChange={(value) =>
600
- setAttributes({ balloonName: value })
601
- }
602
- value={balloonName}
603
- placeholder={__('Icon Name', 'vk-blocks')}
604
- />
605
- </div>
606
- <div className={`vk_balloon_content_outer`}>
607
- <div
608
- className={`vk_balloon_content ${contentBackgroundClass} ${contentBorderClass}`}
609
- style={contentColorStyle}
610
- >
611
- <span
612
- className={`vk_balloon_content_before ${triangleBorderColorBeforeClass}`}
613
- style={triangleBorderColorBeforeStyle}
614
- ></span>
615
- <span
616
- className={`vk_balloon_content_after ${triangleBorderColorAfterClass}`}
617
- style={triangleBorderColorAfterStyle}
618
- ></span>
619
- <InnerBlocks
620
- templateLock={false}
621
- template={[['core/paragraph', { content }]]}
622
- />
623
- </div>
624
- </div>
625
- </div>
626
- </>
627
- );
628
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 1.2H8.71c-.99 0-1.8.8-1.8 1.8v.27c0 .96-.62 1.8-1.53 2.1l-.93.3 1.15.48c.8.34 1.31 1.12 1.31 1.98 0 .92.75 1.67 1.67 1.67H18c1 0 1.8-.8 1.8-1.8V3c0-1-.8-1.8-1.8-1.8zM5.13 7.25c.35.15.58.5.58.88A2.87 2.87 0 008.58 11H18a3 3 0 003-3V3a3 3 0 00-3-3H8.71a3 3 0 00-3 3v.27a1 1 0 01-.7.95L1 5.5l4.13 1.75z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.89 6.1H9V4.9h.89v1.2zm2.67 0h-1.78V4.9h1.78v1.2zm2.66 0h-1.78V4.9h1.78v1.2zm1.78 0h-.89V4.9H17v1.2zM21.21 16.7c0 .3.16.58.41.75L24 19l-2.23 1.09a1 1 0 00-.56.9 3 3 0 01-3 3.01H14a3 3 0 01-3-3v-3.89l1.06-1.1c.43-.46.53-1.05.38-1.57.45-.28.99-.44 1.56-.44h4.52a2.7 2.7 0 012.7 2.7zm-3 6.1H14c-1 0-1.8-.8-1.8-1.8v-4c0-1 .8-1.8 1.8-1.8h4.52c.82 0 1.5.67 1.5 1.5 0 .7.35 1.37.95 1.75l.6.4-.32.16A2.2 2.2 0 0020 21c0 1-.8 1.81-1.8 1.81z" fill="#000"/><path d="M10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/></svg>
 
src/blocks/balloon/index.js DELETED
@@ -1,40 +0,0 @@
1
- /**
2
- * Baloon block type
3
- *
4
- */
5
-
6
- import { iconPicture, content, iconName } from '../../utils/example-data';
7
- import deprecated from './deprecated/';
8
- import { ReactComponent as Icon } from './icon.svg';
9
- import edit from './edit';
10
- import metadata from './block.json';
11
- import save from './save';
12
-
13
- const { name } = metadata;
14
-
15
- export { metadata, name };
16
-
17
- export const settings = {
18
- icon: <Icon />,
19
- example: {
20
- attributes: {
21
- balloonName: iconName,
22
- balloonType: 'type-speech',
23
- balloonBgColor: '#f5f5f5',
24
- balloonAlign: 'position-left',
25
- IconImage: iconPicture,
26
- balloonImageType: 'normal',
27
- },
28
- innerBlocks: [
29
- {
30
- name: 'core/paragraph',
31
- attributes: {
32
- content,
33
- },
34
- },
35
- ],
36
- },
37
- edit,
38
- save,
39
- deprecated,
40
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/index.php DELETED
@@ -1,33 +0,0 @@
1
- <?php
2
- /**
3
- * VK Blocks - Balloon Blocks
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register balloon block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_vk_balloon() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/balloon',
18
- VK_BLOCKS_DIR_URL . 'build/balloon/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- register_block_type(
25
- __DIR__,
26
- array(
27
- 'style' => 'vk-blocks/balloon',
28
- 'editor_style' => 'vk-blocks-build-editor-css',
29
- 'editor_script' => 'vk-blocks-build-js',
30
- )
31
- );
32
- }
33
- add_action( 'init', 'vk_blocks_register_block_vk_balloon', 99 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/save.js DELETED
@@ -1,296 +0,0 @@
1
- import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';
2
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
3
-
4
- export default function save({ attributes }) {
5
- const {
6
- balloonName,
7
- balloonType,
8
- balloonBorder,
9
- balloonImageBorder,
10
- balloonBorderColor,
11
- balloonBgColor,
12
- balloonAlign,
13
- IconImage,
14
- balloonImageType,
15
- balloonAnimation,
16
- } = attributes;
17
-
18
- let contentBorderClass = '';
19
- let iconImageBorderClass = '';
20
- let contentBackgroundClass = '';
21
- let iconImageColorStyle = {};
22
- let contentColorStyle = {};
23
- let triangleBorderColorBeforeClass = '';
24
- let triangleBorderColorAfterClass = '';
25
- let triangleBorderColorBeforeStyle = {};
26
- let triangleBorderColorAfterStyle = {};
27
-
28
- // 後方互換 (カスタムカラー選択時 インラインcssをcontentとiconに分ける)
29
- const colorStyle = {};
30
- if (colorStyle) {
31
- contentColorStyle = colorStyle;
32
- iconImageColorStyle = colorStyle;
33
- }
34
- if ('background' in iconImageColorStyle) {
35
- delete iconImageColorStyle.background;
36
- }
37
-
38
- //吹き出しに枠線を追加オン
39
- if (balloonBorder === true) {
40
- contentBorderClass += 'vk_balloon_content-border-true';
41
-
42
- if (balloonImageBorder === true) {
43
- iconImageBorderClass += 'vk_balloon_icon_image-border-true';
44
- } else {
45
- iconImageBorderClass = '';
46
- }
47
-
48
- //iconImageBorderClass
49
- //contentBorderClass
50
- if (balloonBorderColor !== undefined) {
51
- iconImageBorderClass += ` has-text-color`;
52
- contentBorderClass += ` has-text-color`;
53
- //カラーパレットの時
54
- if (!isHexColor(balloonBorderColor)) {
55
- iconImageBorderClass += ` has-${balloonBorderColor}-color`;
56
- contentBorderClass += ` has-${balloonBorderColor}-color`;
57
- }
58
- }
59
-
60
- //colorStyle
61
- //カスタム*パレット
62
- if (isHexColor(balloonBorderColor) && !isHexColor(balloonBgColor)) {
63
- contentColorStyle = {
64
- borderColor: `${balloonBorderColor}`,
65
- };
66
- iconImageColorStyle = {
67
- borderColor: `${balloonBorderColor}`,
68
- };
69
- //パレット*カスタム
70
- } else if (
71
- !isHexColor(balloonBorderColor) &&
72
- isHexColor(balloonBgColor)
73
- ) {
74
- contentColorStyle = {
75
- background: `${balloonBgColor}`,
76
- };
77
- //カスタム*カスタム
78
- } else if (
79
- isHexColor(balloonBorderColor) &&
80
- isHexColor(balloonBgColor)
81
- ) {
82
- contentColorStyle = {
83
- borderColor: `${balloonBorderColor}`,
84
- background: `${balloonBgColor}`,
85
- };
86
- iconImageColorStyle = {
87
- borderColor: `${balloonBorderColor}`,
88
- };
89
- }
90
-
91
- // 吹き出しの配置 左
92
- if (balloonAlign === 'position-left') {
93
- // 吹き出しの矢印 Class
94
- // カラーパレットの時
95
- // 吹き出しの時
96
- if ('type-speech' === balloonType) {
97
- if (balloonBgColor !== undefined) {
98
- triangleBorderColorBeforeClass += ` has-text-color`;
99
- if (!isHexColor(balloonBgColor)) {
100
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
101
- }
102
- }
103
- if (balloonBorderColor !== undefined) {
104
- triangleBorderColorAfterClass += ` has-text-color`;
105
- if (!isHexColor(balloonBorderColor)) {
106
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
107
- }
108
- }
109
- //もくもくの時
110
- } else if ('type-think' === balloonType) {
111
- if (balloonBorderColor !== undefined) {
112
- triangleBorderColorBeforeClass += ` has-text-color`;
113
- if (!isHexColor(balloonBorderColor)) {
114
- triangleBorderColorBeforeClass += ` has-${balloonBorderColor}-color`;
115
- }
116
- }
117
- if (balloonBorderColor !== undefined) {
118
- triangleBorderColorAfterClass += ` has-text-color`;
119
- if (!isHexColor(balloonBorderColor)) {
120
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
121
- }
122
- }
123
- }
124
-
125
- //吹き出しの矢印 Style
126
- //カスタムカラーの時
127
- if (isHexColor(balloonBorderColor)) {
128
- triangleBorderColorAfterStyle = {
129
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
130
- };
131
- }
132
- if (isHexColor(balloonBgColor)) {
133
- triangleBorderColorBeforeStyle = {
134
- borderColor: `transparent ${balloonBgColor} transparent transparent`,
135
- };
136
- }
137
-
138
- // 吹き出しの配置 右
139
- } else if (balloonAlign === 'position-right') {
140
- // 吹き出しの時
141
- // カラーパレットの時
142
- if ('type-speech' === balloonType) {
143
- if (balloonBgColor !== undefined) {
144
- triangleBorderColorBeforeClass += ` has-text-color`;
145
- if (!isHexColor(balloonBgColor)) {
146
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
147
- }
148
- }
149
- if (balloonBorderColor !== undefined) {
150
- triangleBorderColorAfterClass += ` has-text-color`;
151
- if (!isHexColor(balloonBorderColor)) {
152
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
153
- }
154
- }
155
- // もくもくの時
156
- // カラーパレットの時
157
- } else if ('type-think' === balloonType) {
158
- if (balloonBorderColor !== undefined) {
159
- triangleBorderColorBeforeClass += ` has-text-color`;
160
- triangleBorderColorAfterClass += ` has-text-color`;
161
- if (!isHexColor(balloonBorderColor)) {
162
- triangleBorderColorBeforeClass += ` has-${balloonBorderColor}-color`;
163
- triangleBorderColorAfterClass += ` has-${balloonBorderColor}-color`;
164
- }
165
- }
166
- }
167
-
168
- //吹き出しの矢印 Style
169
- //カスタムカラーの時
170
- if (isHexColor(balloonBorderColor)) {
171
- triangleBorderColorAfterStyle = {
172
- borderColor: `transparent ${balloonBorderColor} transparent transparent`,
173
- };
174
- }
175
- if (isHexColor(balloonBgColor)) {
176
- triangleBorderColorBeforeStyle = {
177
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
178
- };
179
- }
180
- }
181
-
182
- //吹き出しに枠線を追加オフ
183
- } else if (balloonBgColor !== undefined) {
184
- iconImageBorderClass = '';
185
-
186
- // 吹き出しの背景色 Style
187
- if (balloonBgColor !== undefined) {
188
- //カスタムカラーの時
189
- if (isHexColor(balloonBgColor)) {
190
- contentColorStyle = {
191
- background: `${balloonBgColor}`,
192
- };
193
- }
194
- }
195
-
196
- if (balloonAlign === 'position-left') {
197
- // 吹き出しの矢印 Class
198
- // カラーパレットの時
199
- // 吹き出しの時
200
- if ('type-speech' === balloonType) {
201
- if (balloonBgColor !== undefined) {
202
- triangleBorderColorBeforeClass += ` has-text-color`;
203
- if (!isHexColor(balloonBgColor)) {
204
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
205
- }
206
- }
207
- }
208
-
209
- //吹き出しの矢印 Style
210
- //カスタムカラーの時
211
- if (isHexColor(balloonBorderColor)) {
212
- triangleBorderColorAfterStyle = {
213
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
214
- };
215
- }
216
- if (isHexColor(balloonBgColor)) {
217
- triangleBorderColorBeforeStyle = {
218
- borderColor: `transparent ${balloonBgColor} transparent transparent`,
219
- };
220
- }
221
- } else if (balloonAlign === 'position-right') {
222
- // 吹き出しの矢印 Class
223
- // カラーパレットの時
224
- // 吹き出しの時
225
- if ('type-speech' === balloonType) {
226
- if (balloonBgColor !== undefined) {
227
- triangleBorderColorBeforeClass += ` has-text-color`;
228
- if (!isHexColor(balloonBgColor)) {
229
- triangleBorderColorBeforeClass += ` has-${balloonBgColor}-color`;
230
- }
231
- }
232
- }
233
-
234
- //吹き出しの矢印 Style
235
- //カスタムカラーの時
236
- if (isHexColor(balloonBgColor)) {
237
- triangleBorderColorBeforeStyle = {
238
- borderColor: `transparent transparent transparent ${balloonBgColor}`,
239
- };
240
- }
241
- }
242
- }
243
-
244
- // 吹き出しの背景色 Class
245
- if (balloonBgColor !== undefined) {
246
- contentBackgroundClass += ` has-background-color`;
247
- //カラーパレットの時
248
- if (!isHexColor(balloonBgColor)) {
249
- contentBackgroundClass += ` has-${balloonBgColor}-background-color`;
250
- }
251
- }
252
-
253
- const blockProps = useBlockProps.save({
254
- className: `vk_balloon vk_balloon-${balloonAlign} vk_balloon-${balloonType} vk_balloon-animation-${balloonAnimation}`,
255
- });
256
-
257
- return (
258
- <div {...blockProps}>
259
- <div className={`vk_balloon_icon`}>
260
- {IconImage ? (
261
- <figure>
262
- <img
263
- className={`vk_balloon_icon_image vk_balloon_icon_image-type-${balloonImageType} ${iconImageBorderClass}`}
264
- style={iconImageColorStyle}
265
- src={IconImage}
266
- alt=""
267
- />
268
- <RichText.Content
269
- tagName="figcaption"
270
- className={'vk_balloon_icon_name'}
271
- value={balloonName}
272
- />
273
- </figure>
274
- ) : (
275
- ''
276
- )}
277
- </div>
278
- <div className={`vk_balloon_content_outer`}>
279
- <div
280
- className={`vk_balloon_content ${contentBackgroundClass} ${contentBorderClass}`}
281
- style={contentColorStyle}
282
- >
283
- <span
284
- className={`vk_balloon_content_before ${triangleBorderColorBeforeClass}`}
285
- style={triangleBorderColorBeforeStyle}
286
- ></span>
287
- <span
288
- className={`vk_balloon_content_after ${triangleBorderColorAfterClass}`}
289
- style={triangleBorderColorAfterStyle}
290
- ></span>
291
- <InnerBlocks.Content />
292
- </div>
293
- </div>
294
- </div>
295
- );
296
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/balloon/style.scss DELETED
@@ -1,491 +0,0 @@
1
- .vk_balloon {
2
- display: flex;
3
- align-items: normal;
4
- margin-bottom: 2.2em;
5
-
6
- figure {
7
- margin: 0;
8
- }
9
-
10
- p {
11
- color: initial; // カラーパレットのcolorがあたってしまうので初期化する
12
- word-break: break-all;
13
- &:first-of-type{
14
- margin-top: 0;
15
- }
16
- &:last-of-type{
17
- margin-bottom: 0;
18
- }
19
- }
20
- }
21
-
22
- .vk_balloon_icon {
23
- flex-basis: 80px;
24
- flex-shrink: 0;
25
- text-align: center;
26
- &_image:not(.has-text-color) {
27
- color: #ccc;
28
- }
29
- &_image {
30
- vertical-align: bottom;
31
- width: 64px;
32
- height: 64px;
33
- object-fit: cover;
34
- display: inline-block;
35
- &-type {
36
- &-rounded {
37
- border-radius: 4px;
38
- }
39
-
40
- &-circle {
41
- border-radius: 50%;
42
- }
43
- }
44
- }
45
- &_name {
46
- display: block;
47
- text-align: center;
48
- font-size: 0.7rem;
49
- margin-top: 0.3rem;
50
- }
51
- }
52
-
53
- // .vk_balloon_content_outer は .vk_balloon_content の外側に 0.38.2 から追加
54
- // 本来 _outer をつけるような親要素のクラスの方が文字数が多くなる手法はとらないが、
55
- // 既存のクラス名を変更すると既存サイトではHTML構造がもとのままなので崩れてしまうため例外措置。
56
- .vk_balloon_content_outer{
57
- width:100%;
58
- }
59
- .vk_balloon_content {
60
- max-width: calc(100% - 6.2em);
61
- .vk_balloon-position-left & {
62
- float:left;
63
- }
64
- .vk_balloon-position-right & {
65
- float:right;
66
- }
67
- position: relative;
68
- text-align: left;
69
- &.editor-rich-text__tinymce[data-is-placeholder-visible=true] {
70
- // これがないと未入力時に吹き出しが２重になる
71
- position: absolute;
72
- }
73
- }
74
-
75
- /* type
76
- /*-------------------------------------------*/
77
- .vk_balloon_content {
78
- background: #f5f5f5;
79
- // padding: 1rem 1.2rem;
80
- padding: calc(var(--vk-size-text) * 1 ) calc(var(--vk-size-text) * 1.2);
81
- }
82
-
83
- .vk_balloon_content_before,
84
- .vk_balloon_content_after {
85
- position: absolute;
86
- top: 0;
87
- display: block;
88
- width: 0;
89
- height: 0;
90
- border-style: solid;
91
- }
92
-
93
- .vk_balloon-type-speech{
94
- .vk_balloon_content{
95
- // border-color: #f5f5f5;
96
- border-radius: .4em;
97
-
98
- .vk_balloon_content_before,
99
- .vk_balloon_content_after {
100
- top: 15px;
101
-
102
- }
103
- .vk_balloon_content_after {
104
- z-index: 1;
105
- border-right-color: inherit;
106
- }
107
- .vk_balloon_content_before{
108
- z-index: 2;
109
- }
110
- }
111
- }
112
- .vk_balloon-type-think{
113
- .vk_balloon_content{
114
- border-radius: 1rem;
115
- .vk_balloon_content_before,
116
- .vk_balloon_content_after{
117
- position: absolute;
118
- content: '';
119
- border-radius: 50%;
120
- background: inherit;
121
- }
122
- .vk_balloon_content_before{
123
- width: 14px;
124
- height: 14px;
125
- }
126
- .vk_balloon_content_after{
127
- width: 10px;
128
- height: 10px;
129
- }
130
- }
131
- }
132
-
133
- /* position
134
- /*-------------------------------------------*/
135
- .vk_balloon-position-left{
136
- &.vk_balloon-type-speech{
137
- .vk_balloon_icon{
138
- margin-right: calc( var(--vk-size-text) * 1.2 );
139
- }
140
- .vk_balloon_content{
141
- .vk_balloon_content_before,
142
- .vk_balloon_content_after{
143
- left: -10px;
144
- border-width: 10px 12px 10px 0;
145
- }
146
- }
147
- }
148
-
149
- &.vk_balloon-type-think{
150
- .vk_balloon_icon{
151
- margin-right: calc( var(--vk-size-text) * 1.2 );
152
- }
153
- .vk_balloon_content{
154
-
155
- .vk_balloon_content_before{
156
- left: -18px;
157
- top: 7px;
158
- }
159
- .vk_balloon_content_after {
160
- left: -25px;
161
- top: 20px;
162
- }
163
- }
164
- }
165
- }//.vk_balloon-position-left
166
-
167
- .vk_balloon-position-right{
168
- flex-direction: row-reverse;
169
- &.vk_balloon-type-speech{
170
- .vk_balloon_icon{
171
- margin-left: calc( var(--vk-size-text) * 1.2 );
172
- }
173
- .vk_balloon_content{
174
- .vk_balloon_content_before,
175
- .vk_balloon_content_after{
176
- right: -10px;
177
- border-width: 10px 0 10px 12px;
178
-
179
- }
180
- }
181
- }
182
-
183
- &.vk_balloon-type-think{
184
- .vk_balloon_icon{
185
- margin-left: calc( var(--vk-size-text) * 1.2 );
186
- }
187
- .vk_balloon_content{
188
- .vk_balloon_content_before{
189
- right: -18px;
190
- top: 7px;
191
- }
192
- .vk_balloon_content_after{
193
- right: -25px;
194
- top: 20px;
195
- }
196
- }
197
- }
198
- }//.vk_balloon-position-right
199
-
200
-
201
- /* Border
202
- /*-------------------------------------------*/
203
-
204
- //Border color
205
- .vk_balloon{
206
- //位置 左
207
- &-position-left{
208
- //タイプ 吹き出し
209
- &.vk_balloon-type-speech {
210
- .vk_balloon_content{
211
- //初期
212
- .vk_balloon_content_before:not(.has-text-color),
213
- .vk_balloon_content_after:not(.has-text-color){
214
- border-color: transparent #f5f5f5 transparent transparent;
215
- }
216
- //カラーパレット,カスタムカラー
217
- .vk_balloon_content_before,
218
- .vk_balloon_content_after {
219
- border-color:transparent currentColor transparent transparent;
220
- }
221
- }
222
- }
223
- //タイプ もくもく
224
- &.vk_balloon-type-think {
225
- .vk_balloon_content{
226
- //初期
227
- .vk_balloon_content_before:not(.has-text-color),
228
- .vk_balloon_content_after:not(.has-text-color){
229
- border-color: transparent;
230
- }
231
- //カラーパレット,カスタムカラー
232
- .vk_balloon_content_before,
233
- .vk_balloon_content_after {
234
- border-color:transparent currentColor transparent transparent;
235
- }
236
- }
237
- }
238
- }
239
- //位置 右
240
- &-position-right{
241
- //タイプ 吹き出し
242
- &.vk_balloon-type-speech {
243
- .vk_balloon_content{
244
- //初期
245
- .vk_balloon_content_before:not(.has-text-color),
246
- .vk_balloon_content_after:not(.has-text-color){
247
- border-color: transparent transparent transparent #f5f5f5;
248
- }
249
- //カラーパレット,カスタムカラー
250
- .vk_balloon_content_before,
251
- .vk_balloon_content_after {
252
- border-color:transparent transparent transparent currentColor;
253
- }
254
- }
255
- }
256
- //タイプ もくもく
257
- &.vk_balloon-type-think {
258
- .vk_balloon_content{
259
- //初期
260
- .vk_balloon_content_before:not(.has-text-color),
261
- .vk_balloon_content_after:not(.has-text-color){
262
- border-color: transparent;
263
- }
264
- //カラーパレット,カスタムカラー
265
- .vk_balloon_content_before,
266
- .vk_balloon_content_after {
267
- border-color:transparent currentColor transparent transparent;
268
- }
269
- }
270
- }
271
- }
272
- }
273
-
274
- .vk_balloon{
275
- &_content,
276
- &_icon_image {
277
- &-border-true {
278
- border-width: var( --vk-balloon-border-width, 1px );
279
- border-style: solid;
280
- }
281
- }
282
- // デフォルトボーダー
283
- &_content-border-true:not(.has-text-color) {
284
- color: #cccccc;
285
- }
286
- &-position {
287
- &-left{ //位置が左
288
- &.vk_balloon-type-speech {
289
- .vk_balloon_content-border-true{
290
- .vk_balloon_content_before{
291
- left:-10px;
292
- }
293
- .vk_balloon_content_after{
294
- left: var( --vk-balloon-speech-offset, -12px );
295
- border-right-color: inherit !important;
296
- }
297
- }
298
- }
299
- }
300
- &-right{ //位置が右
301
- &.vk_balloon-type-speech {
302
- .vk_balloon_content-border-true{
303
- border-color: currentColor;
304
- .vk_balloon_content_before {
305
- right:-10px;
306
- }
307
- .vk_balloon_content_after {
308
- right: var( --vk-balloon-speech-offset, -12px );
309
- border-left-color: inherit !important;
310
- }
311
- }
312
- }
313
- }
314
- }
315
-
316
- &-type-think {
317
- .vk_balloon_content-border-true{
318
- .vk_balloon_content_before,
319
- .vk_balloon_content_after{
320
- border-width: var( --vk-balloon-border-width, 1px );
321
- border-style: solid;
322
- border-color: inherit !important;
323
- }
324
- }
325
- }
326
- }
327
-
328
-
329
- /* animation
330
- /*-------------------------------------------*/
331
- .vk_balloon-animation {
332
- &-trembling {
333
- animation: trembling 0.1s infinite;
334
- }
335
- @keyframes trembling {
336
- 0% {
337
- transform: rotate(-0.5deg);
338
- }
339
- 50% {
340
- transform: rotate(0.5deg);
341
- }
342
- }
343
- &-trembling-x {
344
- animation: trembling-x 0.1s infinite;
345
- }
346
- @keyframes trembling-x {
347
- 0% {
348
- transform: scale(1, 1);
349
- }
350
- 50% {
351
- transform: scale(0.99, 0.96);
352
- }
353
- }
354
- &-pounding {
355
- animation: pounding 1.5s infinite;
356
- }
357
- @keyframes pounding {
358
- 0% {
359
- transform: scale(1.05)
360
- }
361
- 5% {
362
- transform: scale(1)
363
- }
364
- 95% {
365
- transform: scale(1)
366
- }
367
- 100% {
368
- transform: scale(1.05)
369
- }
370
- }
371
-
372
- &-shaking {
373
- animation: shaking 0.4s infinite;
374
- }
375
- @keyframes shaking {
376
- 0% {
377
- transform: translate(1px, 1px);
378
- }
379
- 25% {
380
- transform: translate(1px, -1px);
381
- }
382
- 50% {
383
- transform: translate(-1px, -1px);
384
- }
385
- 75% {
386
- transform: translate(-1px, 1px);
387
- }
388
- 100% {
389
- transform: translate(1px, 1px);
390
- }
391
- }
392
- }
393
-
394
-
395
- .vk_balloon {
396
- &.animation-vibration{
397
- .vk_balloon_content{
398
- display: inline-block;
399
- animation: vibration .1s infinite;
400
- }
401
- }
402
- }
403
-
404
- /**
405
- Animation Vibration
406
- */
407
- @keyframes vibration {
408
- 0% {transform: translate(0px, 0px) rotateZ(0deg)}
409
- 25% {transform: translate(2px, 2px) rotateZ(1deg)}
410
- 50% {transform: translate(0px, 2px) rotateZ(0deg)}
411
- 75% {transform: translate(2px, 0px) rotateZ(-1deg)}
412
- 100% {transform: translate(0px, 0px) rotateZ(0deg)}
413
- }
414
-
415
- .icon-image-list-note:hover{
416
- cursor: pointer;
417
- }
418
-
419
- /*********************
420
- * SmartPhone
421
- 0px - 480px
422
- ***********************/
423
- @media only screen and (max-width: 480px) {
424
- .vk_balloon_content{
425
- max-width: calc(100% - 2em);
426
- font-size: .9em;
427
- padding: 1em;
428
- }
429
- .vk_balloon-type-think {
430
- .vk_balloon_content{
431
- &::after {
432
- border: 5px solid transparent;
433
- }
434
- }
435
- }
436
-
437
- .vk_balloon{
438
- align-items: normal;
439
- &.vk_balloon-position-left{
440
- &.vk_balloon-type-speech{
441
- .vk_balloon_icon{
442
- margin-right: 1.5rem;
443
- }//.vk_balloon_icon
444
- .vk_balloon_content{
445
- display: inline-block;
446
- }//.vk_balloon_content
447
- }//&.vk_balloon-type-speech
448
-
449
- &.vk_balloon-type-think{
450
- .vk_balloon_icon{
451
- margin-right: 2rem;
452
-
453
- }
454
- .vk_balloon_content{
455
- display: inline-block;
456
- }
457
- }
458
- }//&.vk_balloon-position-left
459
-
460
- &.vk_balloon-position-right{
461
- text-align: right;
462
-
463
- &.vk_balloon-type-speech{
464
- .vk_balloon_icon{
465
- margin-left: 1.5rem;
466
- margin-right: 0;
467
- }
468
-
469
- .vk_balloon_content{
470
- display: inline-block;
471
-
472
- }
473
- }//&.vk_balloon-type-speech
474
-
475
- &.vk_balloon-type-think{
476
- .vk_balloon_icon{
477
- margin-left: 2rem;
478
- margin-right: 0;
479
- }
480
-
481
- .vk_balloon_content{
482
- display: inline-block;
483
- }
484
- }//&.vk_balloon-type-think
485
- }//.vk_balloon-position-right
486
- }//.vk_balloon
487
-
488
- .vk_balloon_icon{
489
- max-width:64px;
490
- }
491
- } // @media only screen and (max-width: 480px) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/border-box/block.json DELETED
@@ -1,35 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/border-box",
4
- "title": "Border Box",
5
- "category": "vk-blocks-cat",
6
- "attributes": {
7
- "heading": {
8
- "type": "string",
9
- "source": "html",
10
- "selector": "h4"
11
- },
12
- "color": {
13
- "type": "string"
14
- },
15
- "borderColor": {
16
- "type": "string"
17
- },
18
- "bgColor": {
19
- "type": "string",
20
- "default": "transparent"
21
- },
22
- "faIcon": {
23
- "type": "string",
24
- "default": ""
25
- },
26
- "bodyAlign": {
27
- "type": "string"
28
- }
29
- },
30
- "description": "This is a border box where you can place headings to attract attention.",
31
- "textdomain": "vk-blocks",
32
- "supports": {
33
- "className": true
34
- }
35
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/border-box/deprecated/0.0.0/save.js DELETED
@@ -1,58 +0,0 @@
1
- import classNames from 'classnames';
2
- import { InnerBlocks, RichText } from '@wordpress/block-editor';
3
- import { __ } from '@wordpress/i18n';
4
-
5
- export default function save( props ) {
6
- return <DepBody for_={'save'} {...props} />;
7
- }
8
-
9
- export const DepBody = (props) => {
10
- const { setAttributes, attributes, for_, className } = props;
11
- const { heading, color, faIcon } = attributes;
12
-
13
- let inner;
14
- let title;
15
- //編集画面とサイト上の切り替え
16
- if (for_ === 'edit') {
17
- inner = <InnerBlocks />;
18
- title = (
19
- <RichText
20
- tagName="h4"
21
- className={'vk_borderBox_title'}
22
- onChange={(value) => setAttributes({ heading: value })}
23
- value={heading}
24
- placeholder={__('Please enter a title.', 'vk-blocks')}
25
- />
26
- );
27
- } else if ('save') {
28
- inner = <InnerBlocks.Content />;
29
- title = (
30
- <RichText.Content
31
- tagName="h4"
32
- className={'vk_borderBox_title'}
33
- value={heading}
34
- />
35
- );
36
- }
37
-
38
- let customClass = className;
39
- //Defaultクラスを設定
40
- if (-1 === className.indexOf('is-style-')) {
41
- customClass = classNames(
42
- className,
43
- 'is-style-vk_borderBox-style-solid-kado-tit-tab'
44
- );
45
- }
46
-
47
- return (
48
- <div
49
- className={`vk_borderBox vk_borderBox-color-${color} ${customClass}`}
50
- >
51
- <div className="vk_borderBox_title_container">
52
- <i className={`${faIcon}`}></i>
53
- {title}
54
- </div>
55
- <div className="vk_borderBox_body">{inner}</div>
56
- </div>
57
- );
58
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/border-box/deprecated/0.0.1/save.js DELETED
@@ -1,67 +0,0 @@
1
- import classNames from 'classnames';
2
- import parse from 'html-react-parser';
3
- import { InnerBlocks, RichText } from '@wordpress/block-editor';
4
- import { __ } from '@wordpress/i18n';
5
-
6
- export default function save(props) {
7
- return <DepBody for_={'save'} {...props} />;
8
- }
9
-
10
- export const DepBody = (props) => {
11
- const { setAttributes, attributes, for_, className } = props;
12
- const { heading, color, faIcon, bgColor } = attributes;
13
-
14
- let inner;
15
- let title;
16
- //編集画面とサイト上の切り替え
17
- if (for_ === 'edit') {
18
- inner = <InnerBlocks />;
19
- title = (
20
- <RichText
21
- tagName="h4"
22
- className={'vk_borderBox_title'}
23
- onChange={(value) => setAttributes({ heading: value })}
24
- value={heading}
25
- placeholder={__('Please enter a title.', 'vk-blocks')}
26
- />
27
- );
28
- } else if ('save') {
29
- inner = <InnerBlocks.Content />;
30
- title = (
31
- <RichText.Content
32
- tagName="h4"
33
- className={'vk_borderBox_title'}
34
- value={heading}
35
- />
36
- );
37
- }
38
-
39
- let customClass = className;
40
- //Defaultクラスを設定
41
- if (-1 === className.indexOf('is-style-')) {
42
- customClass = classNames(
43
- className,
44
- 'is-style-vk_borderBox-style-solid-kado-tit-tab'
45
- );
46
- }
47
-
48
- //iタグでdeprecatedが効かなかったので追加。
49
- let icon;
50
- if (faIcon.indexOf('<i class="') === -1) {
51
- icon = `<i class="${faIcon}"></i>`;
52
- } else {
53
- icon = faIcon;
54
- }
55
-
56
- return (
57
- <div
58
- className={`vk_borderBox vk_borderBox-color-${color} vk_borderBox-background-${bgColor} ${customClass}`}
59
- >
60
- <div className="vk_borderBox_title_container">
61
- {parse(icon)}
62
- {title}
63
- </div>
64
- <div className={`vk_borderBox_body`}>{inner}</div>
65
- </div>
66
- );
67
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/border-box/deprecated/1.21.0/save.js DELETED
@@ -1,44 +0,0 @@
1
- import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
2
- import parse from 'html-react-parser';
3
-
4
- export default function save(props) {
5
- const { attributes } = props;
6
- const { heading, color, faIcon, bgColor } = attributes;
7
-
8
- const inner = <InnerBlocks.Content />;
9
- const title = (
10
- <RichText.Content
11
- tagName="h4"
12
- className={'vk_borderBox_title'}
13
- value={heading}
14
- />
15
- );
16
-
17
- const blockProps = useBlockProps.save({
18
- className: `vk_borderBox vk_borderBox-color-${color} vk_borderBox-background-${bgColor}`,
19
- });
20
-
21
- //Defaultクラスを設定
22
- if (-1 === blockProps.className.indexOf('is-style-')) {
23
- blockProps.className +=
24
- ' is-style-vk_borderBox-style-solid-kado-tit-tab';
25
- }
26
-
27
- //iタグでdeprecatedが効かなかったので追加。
28
- let icon;
29
- if (faIcon.indexOf('<i class="') === -1) {
30
- icon = `<i class="${faIcon}"></i>`;
31
- } else {
32
- icon = faIcon;
33
- }
34
-
35
- return (
36
- <div {...blockProps}>
37
- <div className="vk_borderBox_title_container">
38
- {parse(icon)}
39
- {title}
40
- </div>
41
- <div className={`vk_borderBox_body`}>{inner}</div>
42
- </div>
43
- );
44
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/border-box/deprecated/1.29.2/save.js DELETED
@@ -1,130 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import classnames from 'classnames';
5
-
6
- /**
7
- * WordPress dependencies
8
- */
9
- import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
10
- import parse from 'html-react-parser';
11
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
12
-
13
- export default function save(props) {
14
- const { attributes } = props;
15
- const { heading, faIcon, color, bgColor, borderColor } = attributes;
16
-
17
- const inner = <InnerBlocks.Content />;
18
- const title = (
19
- <RichText.Content
20
- tagName="h4"
21
- className={'vk_borderBox_title'}
22
- value={heading}
23
- ß
24
- />
25
- );
26
-
27
- // カラーパレットに対応
28
- const wrapperClasses = classnames('vk_borderBox', {
29
- [`vk_borderBox-color-${color}`]: !!color,
30
- [`vk_borderBox-background-${bgColor}`]: !!bgColor,
31
- [`has-text-color`]: !!borderColor,
32
- [`has-${borderColor}-color`]: !!borderColor && !isHexColor(borderColor),
33
- });
34
- let wrapperStyle = {};
35
- if (borderColor !== undefined && isHexColor(borderColor)) {
36
- // custom color
37
- wrapperStyle = {
38
- color: `${borderColor}`,
39
- };
40
- }
41
- const blockProps = useBlockProps.save({
42
- className: wrapperClasses,
43
- style: wrapperStyle,
44
- });
45
-
46
- //Defaultクラスを設定
47
- if (-1 === blockProps.className.indexOf('is-style-')) {
48
- blockProps.className +=
49
- ' is-style-vk_borderBox-style-solid-kado-tit-tab';
50
- }
51
-
52
- //枠パターン
53
- let isFill_title = false;
54
- if (
55
- -1 <
56
- blockProps.className.indexOf(
57
- 'is-style-vk_borderBox-style-solid-kado-tit-tab'
58
- ) ||
59
- -1 <
60
- blockProps.className.indexOf(
61
- 'is-style-vk_borderBox-style-solid-kado-tit-banner'
62
- ) ||
63
- -1 <
64
- blockProps.className.indexOf(
65
- 'is-style-vk_borderBox-style-solid-round-tit-tab'
66
- )
67
- ) {
68
- // タイトル背景塗り 白文字パターン
69
- isFill_title = true;
70
- }
71
-
72
- // title背景
73
- const titleClasses = classnames('vk_borderBox_title_container', {
74
- [`has-background`]: isFill_title && !!borderColor,
75
- [`has-${borderColor}-background-color`]:
76
- isFill_title && !!borderColor && !isHexColor(borderColor),
77
- });
78
- let titleStyle = {};
79
- if (isFill_title && borderColor !== undefined && isHexColor(borderColor)) {
80
- // custom color
81
- titleStyle = {
82
- backgroundColor: `${borderColor}`,
83
- };
84
- }
85
-
86
- // アイコン
87
- let icon;
88
- if (
89
- -1 <
90
- blockProps.className.indexOf(
91
- 'vk_borderBox-style-solid-kado-iconFeature'
92
- ) &&
93
- !color
94
- ) {
95
- // 直線 ピン角 アイコン
96
- let iconStyle = ``;
97
- const iconClasses = classnames('vk_borderBox_icon_border', {
98
- [`has-background`]: !!borderColor,
99
- [`has-${borderColor}-background-color`]:
100
- !!borderColor && !isHexColor(borderColor),
101
- });
102
-
103
- if (borderColor !== undefined && isHexColor(borderColor)) {
104
- // custom color
105
- iconStyle = `background-color: ${borderColor};`;
106
- }
107
-
108
- // iタグ必須
109
- icon = `<div class="${classnames(
110
- iconClasses
111
- )}" style="${iconStyle}">${faIcon}</div>`;
112
- } else if (faIcon.indexOf('<i class="') === -1) {
113
- //iタグでdeprecatedが効かなかったので追加。
114
- // アイコンなし
115
- icon = `<i class="${faIcon}"></i>`;
116
- } else {
117
- // アイコンあり
118
- icon = faIcon;
119
- }
120
-
121
- return (
122
- <div {...blockProps}>
123
- <div className={titleClasses} style={titleStyle}>
124
- {parse(icon)}
125
- {title}
126
- </div>
127
- <div className={`vk_borderBox_body`}>{inner}</div>
128
- </div>
129
- );
130
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/border-box/deprecated/index.js DELETED
@@ -1,62 +0,0 @@
1
- import save000 from './0.0.0/save';
2
- import save001 from './0.0.1/save';
3
- import save1_21_0 from './1.21.0/save';
4
- import save1_29_2 from './1.29.2/save';
5
-
6
- const blockAttributes = {
7
- heading: {
8
- type: 'string',
9
- source: 'html',
10
- selector: 'h4',
11
- },
12
- color: {
13
- type: 'string',
14
- default: 'red',
15
- },
16
- faIcon: {
17
- type: 'string',
18
- default: '',
19
- },
20
- };
21
-
22
- const blockAttributes2 = {
23
- ...blockAttributes,
24
- bgColor: {
25
- type: 'string',
26
- default: 'transparent',
27
- },
28
- };
29
-
30
- const blockAttributes3 = {
31
- ...blockAttributes2,
32
- borderColor: {
33
- type: 'string'
34
- },
35
- };
36
-
37
- const blockAttributes4 = {
38
- ...blockAttributes3,
39
- color: {
40
- type: 'string'
41
- },
42
- };
43
-
44
- const deprecated = [
45
- {
46
- attributes: blockAttributes4,
47
- save: save1_29_2,
48
- },
49
- {
50
- attributes: blockAttributes3,
51
- save: save1_21_0,
52
- },
53
- {
54
- attributes: blockAttributes2,
55
- save: save001,
56
- },
57
- {
58
- attributes: blockAttributes,
59
- save: save000,
60
- }
61
- ];
62
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/border-box/edit.js DELETED
@@ -1,262 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import classnames from 'classnames';
5
-
6
- /**
7
- * WordPress dependencies
8
- */
9
- import { __ } from '@wordpress/i18n';
10
- import { FontAwesome } from '@vkblocks/utils/font-awesome-new';
11
- import { PanelBody, BaseControl, SelectControl } from '@wordpress/components';
12
- import {
13
- InspectorControls,
14
- InnerBlocks,
15
- RichText,
16
- useBlockProps,
17
- BlockControls,
18
- BlockAlignmentControl,
19
- } from '@wordpress/block-editor';
20
- import parse from 'html-react-parser';
21
-
22
- /**
23
- * Internal dependencies
24
- */
25
- import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette';
26
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
27
-
28
- export default function BorderBoxEdit(props) {
29
- const { attributes, setAttributes } = props;
30
- const { heading, faIcon, color, bgColor, borderColor, bodyAlign } =
31
- attributes;
32
- // eslint-disable-next-line no-undef
33
- const iconFamily = vkFontAwesome.iconFamily;
34
- const inner = (
35
- <InnerBlocks templateLock={false} template={[['core/paragraph']]} />
36
- );
37
- const title = (
38
- <RichText
39
- tagName="h4"
40
- className={'vk_borderBox_title'}
41
- onChange={(value) => setAttributes({ heading: value })}
42
- value={heading}
43
- placeholder={__('Please enter a title.', 'vk-blocks')}
44
- />
45
- );
46
-
47
- // カラーパレットに対応
48
- const wrapperClasses = classnames('vk_borderBox', {
49
- [`vk_borderBox-color-${color}`]: !!color,
50
- [`vk_borderBox-background-${bgColor}`]: !!bgColor,
51
- [`has-text-color`]: !!borderColor,
52
- [`has-${borderColor}-color`]: !!borderColor && !isHexColor(borderColor),
53
- });
54
- let wrapperStyle = {};
55
- if (borderColor !== undefined && isHexColor(borderColor)) {
56
- // custom color
57
- wrapperStyle = {
58
- color: `${borderColor}`,
59
- };
60
- }
61
- const blockProps = useBlockProps({
62
- className: classnames(wrapperClasses),
63
- style: wrapperStyle,
64
- });
65
-
66
- //Defaultクラスを設定
67
- if (-1 === blockProps.className.indexOf('is-style-')) {
68
- blockProps.className +=
69
- ' is-style-vk_borderBox-style-solid-kado-tit-tab';
70
- }
71
-
72
- // 旧カラーを差し替え
73
- const pre_colors = {
74
- red: '#dc3545',
75
- orange: '#ffa536',
76
- blue: '#4267b2',
77
- green: '#28a745',
78
- black: '#222222',
79
- };
80
-
81
- if (color) {
82
- // 旧カラーで color が指定されている場合
83
- // hexカラーに置き換え
84
- setAttributes({ borderColor: pre_colors[color] });
85
- setAttributes({ color: '' });
86
- } else if (
87
- attributes.className &&
88
- attributes.className.match(/vk_borderBox-color-\w*/)
89
- ) {
90
- // 旧カラーで color がない場合(旧Default対応)
91
- // className から vk_borderBox-color- を削除
92
- // 文字列を空白文字を区切りとして配列化
93
- const palletClasses = attributes.className.split(' ');
94
-
95
- // preColorClass の値の要素を取り除き、空白文字を区切りとして join（結合）
96
- const palletClass = palletClasses.filter((className) => {
97
- return !className.match(/vk_borderBox-color-\w*/);
98
- });
99
-
100
- setAttributes({
101
- className: classnames(palletClass),
102
- });
103
-
104
- // hexカラー(赤)に置き換え
105
- setAttributes({ borderColor: pre_colors.red });
106
- }
107
-
108
- //枠パターン
109
- let isFill_title = false;
110
- if (
111
- -1 <
112
- blockProps.className.indexOf(
113
- 'is-style-vk_borderBox-style-solid-kado-tit-tab'
114
- ) ||
115
- -1 <
116
- blockProps.className.indexOf(
117
- 'is-style-vk_borderBox-style-solid-kado-tit-banner'
118
- ) ||
119
- -1 <
120
- blockProps.className.indexOf(
121
- 'is-style-vk_borderBox-style-solid-round-tit-tab'
122
- )
123
- ) {
124
- // タイトル背景塗り 白文字パターン
125
- isFill_title = true;
126
- }
127
-
128
- // title背景
129
- const titleClasses = classnames('vk_borderBox_title_container', {
130
- [`has-background`]: isFill_title && !!borderColor,
131
- [`has-${borderColor}-background-color`]:
132
- isFill_title && !!borderColor && !isHexColor(borderColor),
133
- });
134
- let titleStyle = {};
135
- if (isFill_title && borderColor !== undefined && isHexColor(borderColor)) {
136
- // custom color
137
- titleStyle = {
138
- backgroundColor: `${borderColor}`,
139
- };
140
- }
141
-
142
- // アイコン
143
- let icon;
144
- if (
145
- -1 <
146
- blockProps.className.indexOf(
147
- 'vk_borderBox-style-solid-kado-iconFeature'
148
- ) &&
149
- !color
150
- ) {
151
- // 直線 ピン角 アイコン
152
- let iconStyle = ``;
153
- const iconClasses = classnames('vk_borderBox_icon_border', {
154
- [`has-background`]: !!borderColor,
155
- [`has-${borderColor}-background-color`]:
156
- !!borderColor && !isHexColor(borderColor),
157
- });
158
-
159
- if (borderColor !== undefined && isHexColor(borderColor)) {
160
- // custom color
161
- iconStyle = `background-color: ${borderColor};`;
162
- }
163
-
164
- // iタグ必須
165
- icon = `<div class="${classnames(
166
- iconClasses
167
- )}" style="${iconStyle}">${faIcon}</div>`;
168
- } else if (faIcon.indexOf('<i class="') === -1) {
169
- //iタグでdeprecatedが効かなかったので追加。
170
- // アイコンなし
171
- icon = `<i class="${faIcon}"></i>`;
172
- } else {
173
- // アイコンあり
174
- icon = faIcon;
175
- }
176
-
177
- const bodyClasses = classnames('vk_borderBox_body', {
178
- [`vk_borderBox_body-align-${bodyAlign}`]: !!bodyAlign,
179
- });
180
-
181
- return (
182
- <>
183
- <BlockControls group="block">
184
- <BlockAlignmentControl
185
- value={bodyAlign}
186
- onChange={(value) => setAttributes({ bodyAlign: value })}
187
- controls={['left', 'center', 'right']}
188
- />
189
- </BlockControls>
190
- <InspectorControls>
191
- <PanelBody
192
- title={__('Margin', 'vk-blocks')}
193
- initialOpen={false}
194
- >
195
- <BaseControl>
196
- <p>
197
- {__(
198
- 'The margin-top of the first element and the margin-bottom of the last element in the border block will be automatically set to 0.If you want to add margins at the beginning and end, use a spacer block to specify height instead of margin.',
199
- 'vk-blocks'
200
- )}
201
- </p>
202
- </BaseControl>
203
- </PanelBody>
204
- <PanelBody title={__('Color', 'vk-blocks')}>
205
- <BaseControl
206
- id="border-color"
207
- label={__('Border Color', 'vk-blocks')}
208
- >
209
- <AdvancedColorPalette
210
- schema={'borderColor'}
211
- {...props}
212
- />
213
- </BaseControl>
214
- <BaseControl
215
- id="background-color"
216
- label={__('Background Color', 'vk-blocks')}
217
- >
218
- <SelectControl
219
- value={bgColor}
220
- onChange={(value) =>
221
- setAttributes({ bgColor: value })
222
- }
223
- options={[
224
- {
225
- value: 'transparent',
226
- label: __('Transparent', 'vk-blocks'),
227
- },
228
- {
229
- value: 'white',
230
- label: __('White', 'vk-blocks'),
231
- },
232
- ]}
233
- />
234
- </BaseControl>
235
- </PanelBody>
236
- <PanelBody title={__('Icon', 'vk-blocks')}>
237
- <BaseControl
238
- id="dot-fa"
239
- label={
240
- __('Icon', 'vk-blocks') + ' ( ' + iconFamily + ' )'
241
- }
242
- >
243
- <FontAwesome
244
- attributeName={'faIcon'}
245
- {...{
246
- attributes,
247
- setAttributes,
248
- }}
249
- />
250
- </BaseControl>
251
- </PanelBody>
252
- </InspectorControls>
253
- <div {...blockProps}>
254
- <div className={classnames(titleClasses)} style={titleStyle}>
255
- {parse(icon)}
256
- {title}
257
- </div>
258
- <div className={bodyClasses}>{inner}</div>
259
- </div>
260
- </>
261
- );
262
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/border-box/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 1a1 1 0 00-1 1v11.28h1.5V7.5h21v13H10.2l.46 1.5H23a1 1 0 001-1V7a1 1 0 00-1-1h-9V2a1 1 0 00-1-1H1zm9 3.75H4v-1.5h6v1.5z" fill="#000"/><path d="M.87 22L0 19.47V21c0 .5.38.93.87 1zM10.63 17.5H20v-1h-8.42l-.95 1zM12.45 14.5H20v-1h-8.29c.38.22.64.59.74 1zM20 11.5v-1H4v1h16zM10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/></svg>
 
src/blocks/border-box/index.js DELETED
@@ -1,65 +0,0 @@
1
- /**
2
- * Title group block type
3
- *
4
- */
5
- import { __ } from '@wordpress/i18n';
6
-
7
- import { ReactComponent as Icon } from './icon.svg';
8
- import { title, iconUser, content } from '@vkblocks/utils/example-data';
9
- import metadata from './block.json';
10
- import edit from './edit';
11
- import save from './save';
12
- import deprecated from './deprecated';
13
-
14
- const { name } = metadata;
15
-
16
- export { metadata, name };
17
-
18
- export const settings = {
19
- icon: <Icon />,
20
- category: 'vk-blocks-cat',
21
- example: {
22
- attributes: {
23
- heading: title,
24
- faIcon: iconUser,
25
- },
26
- innerBlocks: [
27
- {
28
- name: 'core/paragraph',
29
- attributes: {
30
- content,
31
- },
32
- },
33
- ],
34
- },
35
- styles: [
36
- {
37
- name: 'vk_borderBox-style-solid-kado-tit-tab',
38
- label: __('Solid Angle Tab', 'vk-blocks'),
39
- isDefault: true,
40
- },
41
- {
42
- name: 'vk_borderBox-style-solid-round-tit-tab',
43
- label: __('Solid Round Tab', 'vk-blocks'),
44
- },
45
- {
46
- name: 'vk_borderBox-style-solid-kado-tit-banner',
47
- label: __('Solid Angle Banner', 'vk-blocks'),
48
- },
49
- {
50
- name: 'vk_borderBox-style-solid-kado-tit-onborder',
51
- label: __('Solid Angle Onborder', 'vk-blocks'),
52
- },
53
- {
54
- name: 'vk_borderBox-style-solid-kado-tit-inner',
55
- label: __('Solid Angle Inner', 'vk-blocks'),
56
- },
57
- {
58
- name: 'vk_borderBox-style-solid-kado-iconFeature',
59
- label: __('Solid Angle iconFeature', 'vk-blocks'),
60
- },
61
- ],
62
- edit,
63
- save,
64
- deprecated,
65
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/border-box/index.php DELETED
@@ -1,33 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/border-box` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register Border Box block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_border_box() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/border-box',
18
- VK_BLOCKS_DIR_URL . 'build/border-box/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- register_block_type(
25
- __DIR__,
26
- array(
27
- 'style' => 'vk-blocks/border-box',
28
- 'editor_style' => 'vk-blocks-build-editor-css',
29
- 'editor_script' => 'vk-blocks-build-js',
30
- )
31
- );
32
- }
33
- add_action( 'init', 'vk_blocks_register_block_border_box', 99 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/border-box/save.js DELETED
@@ -1,135 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import classnames from 'classnames';
5
-
6
- /**
7
- * WordPress dependencies
8
- */
9
- import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
10
- import parse from 'html-react-parser';
11
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
12
-
13
- export default function save(props) {
14
- const { attributes } = props;
15
- const { heading, faIcon, color, bgColor, borderColor, bodyAlign } =
16
- attributes;
17
-
18
- const inner = <InnerBlocks.Content />;
19
- const title = (
20
- <RichText.Content
21
- tagName="h4"
22
- className={'vk_borderBox_title'}
23
- value={heading}
24
- ß
25
- />
26
- );
27
-
28
- // カラーパレットに対応
29
- const wrapperClasses = classnames('vk_borderBox', {
30
- [`vk_borderBox-color-${color}`]: !!color,
31
- [`vk_borderBox-background-${bgColor}`]: !!bgColor,
32
- [`has-text-color`]: !!borderColor,
33
- [`has-${borderColor}-color`]: !!borderColor && !isHexColor(borderColor),
34
- });
35
- let wrapperStyle = {};
36
- if (borderColor !== undefined && isHexColor(borderColor)) {
37
- // custom color
38
- wrapperStyle = {
39
- color: `${borderColor}`,
40
- };
41
- }
42
- const blockProps = useBlockProps.save({
43
- className: wrapperClasses,
44
- style: wrapperStyle,
45
- });
46
-
47
- //Defaultクラスを設定
48
- if (-1 === blockProps.className.indexOf('is-style-')) {
49
- blockProps.className +=
50
- ' is-style-vk_borderBox-style-solid-kado-tit-tab';
51
- }
52
-
53
- //枠パターン
54
- let isFill_title = false;
55
- if (
56
- -1 <
57
- blockProps.className.indexOf(
58
- 'is-style-vk_borderBox-style-solid-kado-tit-tab'
59
- ) ||
60
- -1 <
61
- blockProps.className.indexOf(
62
- 'is-style-vk_borderBox-style-solid-kado-tit-banner'
63
- ) ||
64
- -1 <
65
- blockProps.className.indexOf(
66
- 'is-style-vk_borderBox-style-solid-round-tit-tab'
67
- )
68
- ) {
69
- // タイトル背景塗り 白文字パターン
70
- isFill_title = true;
71
- }
72
-
73
- // title背景
74
- const titleClasses = classnames('vk_borderBox_title_container', {
75
- [`has-background`]: isFill_title && !!borderColor,
76
- [`has-${borderColor}-background-color`]:
77
- isFill_title && !!borderColor && !isHexColor(borderColor),
78
- });
79
- let titleStyle = {};
80
- if (isFill_title && borderColor !== undefined && isHexColor(borderColor)) {
81
- // custom color
82
- titleStyle = {
83
- backgroundColor: `${borderColor}`,
84
- };
85
- }
86
-
87
- // アイコン
88
- let icon;
89
- if (
90
- -1 <
91
- blockProps.className.indexOf(
92
- 'vk_borderBox-style-solid-kado-iconFeature'
93
- ) &&
94
- !color
95
- ) {
96
- // 直線 ピン角 アイコン
97
- let iconStyle = ``;
98
- const iconClasses = classnames('vk_borderBox_icon_border', {
99
- [`has-background`]: !!borderColor,
100
- [`has-${borderColor}-background-color`]:
101
- !!borderColor && !isHexColor(borderColor),
102
- });
103
-
104
- if (borderColor !== undefined && isHexColor(borderColor)) {
105
- // custom color
106
- iconStyle = `background-color: ${borderColor};`;
107
- }
108
-
109
- // iタグ必須
110
- icon = `<div class="${classnames(
111
- iconClasses
112
- )}" style="${iconStyle}">${faIcon}</div>`;
113
- } else if (faIcon.indexOf('<i class="') === -1) {
114
- //iタグでdeprecatedが効かなかったので追加。
115
- // アイコンなし
116
- icon = `<i class="${faIcon}"></i>`;
117
- } else {
118
- // アイコンあり
119
- icon = faIcon;
120
- }
121
-
122
- const bodyClasses = classnames('vk_borderBox_body', {
123
- [`vk_borderBox_body-align-${bodyAlign}`]: !!bodyAlign,
124
- });
125
-
126
- return (
127
- <div {...blockProps}>
128
- <div className={titleClasses} style={titleStyle}>
129
- {parse(icon)}
130
- {title}
131
- </div>
132
- <div className={bodyClasses}>{inner}</div>
133
- </div>
134
- );
135
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/border-box/style.scss DELETED
@@ -1,425 +0,0 @@
1
- :root {
2
- --vk-color-border-red: #dc3545;
3
- --vk-color-background-red: #dc3545;
4
- --vk-color-border-orange: #ffa536;
5
- --vk-color-background-orange: #ffa536;
6
- --vk-color-border-blue: #4267b2;
7
- --vk-color-background-blue: #4267b2;
8
- --vk-color-border-green: #28a745;
9
- --vk-color-background-green: #28a745;
10
- --vk-color-border-black: #222;
11
- --vk-color-background-black: #222;
12
- }
13
-
14
- /*
15
- 線色指定
16
- --------------------------------------------*/
17
- .vk_borderBox-color {
18
- &-red {
19
- border-color: var(--vk-color-border-red);
20
- background-color: var(--vk-color-background-red);
21
- }
22
- &-orange {
23
- border-color: var(--vk-color-border-orange);
24
- background-color: var(--vk-color-background-orange);
25
- }
26
- &-blue {
27
- border-color: var(--vk-color-border-blue);
28
- background-color: var(--vk-color-background-blue);
29
- }
30
- &-green {
31
- border-color: var(--vk-color-border-green);
32
- background-color: var(--vk-color-background-green);
33
- }
34
- &-black {
35
- border-color: var(--vk-color-border-black);
36
- background-color: var(--vk-color-background-black);
37
- }
38
- }
39
-
40
- // 背景色指定
41
- .vk_borderBox-background {
42
- &-transparent {
43
- & .vk_borderBox_body {
44
- background-color: transparent;
45
- }
46
- &.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox {
47
- background-color: transparent;
48
- }
49
- &.is-style-vk_borderBox-style-solid-kado-tit-onborder > .vk_borderBox_title_container,
50
- &.is-style-vk_borderBox-style-solid-kado-tit-inner > .vk_borderBox_title_container,
51
- &.is-style-vk_borderBox-style-solid-kado-iconFeature >.vk_borderBox_title_container {
52
- background-color: transparent;
53
- }
54
- }
55
- &-white {
56
- & .vk_borderBox_body {
57
- background-color: #fff;
58
- }
59
- &.is-style-vk_borderBox-style-solid-kado-tit-onborder.vk_borderBox {
60
- background-color: #fff;
61
- }
62
- &.is-style-vk_borderBox-style-solid-kado-tit-onborder > .vk_borderBox_title_container,
63
- &.is-style-vk_borderBox-style-solid-kado-tit-inner > .vk_borderBox_title_container,
64
- &.is-style-vk_borderBox-style-solid-kado-iconFeature > .vk_borderBox_title_container {
65
- background-color: #fff;
66
- }
67
- }
68
- }
69
-
70
- /*
71
- 共通指定
72
- --------------------------------------------*/
73
- .vk_borderBox {
74
- margin: 0 auto 2em;
75
- position: relative;
76
- .vk_borderBox_title_container {
77
- margin: 0;
78
- font-size: 1em;
79
- line-height: 1.4;
80
- padding: 0.5em 1.5em 0.4em;
81
- font-weight: bold;
82
- i:first-child,
83
- .svg-inline--fa {
84
- margin-right: 5px;
85
- }
86
- .vk_borderBox_title {
87
- display: inline;
88
- font-weight: bold;
89
- font-size: 1em;
90
- color: inherit; //これがないと見出しデザイン機能に負ける
91
-
92
- /* FortやJPNSTYLEなどデフォルトで装飾指定のあるものの対応 */
93
- background: none;
94
- padding: 0;
95
- border: none;
96
- outline: none; // 見出しデザインの背景塗りスティッチなど対応
97
- &::before {
98
- content: none;
99
- }
100
- &::after {
101
- content: none;
102
- }
103
- }
104
- }
105
- .vk_borderBox_body {
106
- padding: 1.5em;
107
- border-width: 2px;
108
- border-style: solid;
109
- @media (min-width: 992px) {
110
- padding: 1.5em 2em 1.5em;
111
- }
112
-
113
- & > *:not(.has-text-color) {
114
- // 枠線の色が影響しないようにする
115
- color: initial;
116
- }
117
-
118
- // ボックス内要素の最初と最後の要素のmarginを削除
119
- & > * {
120
- &:first-child {
121
- margin-top: 0;
122
- }
123
- &:last-child {
124
- margin-bottom: 0;
125
- }
126
- }
127
- }
128
-
129
- // デフォルト色
130
- &:not([class*="vk_borderBox-color"]){
131
- &.is-style-vk_borderBox-style-solid-kado-tit-tab,
132
- &.is-style-vk_borderBox-style-solid-round-tit-tab,
133
- &.is-style-vk_borderBox-style-solid-kado-tit-banner {
134
- > .vk_borderBox_title_container:not(.has-background) {
135
- background-color: #337ab7;
136
- }
137
- }
138
-
139
- &:not(.has-text-color) {
140
- color: #337ab7;
141
- }
142
- }
143
- }
144
-
145
- /*
146
- 装飾指定
147
- --------------------------------------------*/
148
- .vk_borderBox {
149
- &.is-style-vk_borderBox-style-solid-kado-tit-tab,
150
- &.is-style-vk_borderBox-style-solid-round-tit-tab {
151
- > .vk_borderBox_title_container {
152
- display: inline-block;
153
- }
154
- }
155
- &.is-style-vk_borderBox-style-solid-round-tit-tab {
156
- >.vk_borderBox_title_container {
157
- border-radius: 8px 8px 0 0;
158
- }
159
- > .vk_borderBox_body {
160
- border-radius: 0 8px 8px 8px;
161
- }
162
- }
163
- &.is-style-vk_borderBox-style-solid-kado-tit-inner,
164
- &.is-style-vk_borderBox-style-solid-kado-tit-onborder,
165
- &.is-style-vk_borderBox-style-solid-kado-iconFeature {
166
- background-color: transparent;
167
- border-width: 2px;
168
- border-style: solid;
169
-
170
- > .vk_borderBox_title_container {
171
- padding: 1.5em 1.5em 1em;
172
- }
173
- > .vk_borderBox_body {
174
- // background-color: transparent;
175
- border: none;
176
- padding-top: 0;
177
- }
178
- }
179
- &.is-style-vk_borderBox-style-solid-kado-iconFeature {
180
- &.vk_borderBox-color-red,
181
- &.vk_borderBox-color-orange,
182
- &.vk_borderBox-color-blue,
183
- &.vk_borderBox-color-green,
184
- &.vk_borderBox-color-black {
185
- .vk_borderBox_title_container {
186
- &::after {
187
- content: "";
188
- position: absolute;
189
- top: -32%;
190
- left: 1.5em;
191
- padding: 1.4em;
192
- border-radius: 50%;
193
- border: solid 2px #fff;
194
- }
195
- & > .svg-inline--fa,
196
- & > .fa,
197
- & > .fab,
198
- & > .fas,
199
- & > .far,
200
- & > .fal,
201
- & > .fad {
202
- position: absolute;
203
- font-size: 1.3em;
204
- margin-right: 0;
205
- z-index: 100;
206
- top: 0%;
207
- left: 2.3em;
208
- transform: translate(-50%, -50%);
209
- -webkit-transform: translate(-50%, -50%);
210
- -ms-transform: translate(-50%, -50%);
211
- color: #FFF;
212
- }
213
- }
214
- }
215
-
216
- > .vk_borderBox_title_container {
217
- position: relative;
218
- padding-top: 2.2em;
219
-
220
- > .vk_borderBox_icon_border {
221
- position: absolute;
222
- margin-right: 0;
223
- top: 0;
224
- left: 3em;
225
- padding: 1.4em;
226
- transform: translate(-50%, -50%);
227
- -webkit-transform: translate(-50%, -50%);
228
- -ms-transform: translate(-50%, -50%);
229
- border-radius: 50%;
230
- border: solid 2px #fff;
231
-
232
- & > i {
233
- position: absolute;
234
- font-size: 1.3em;
235
- top: 50%;
236
- left: 50%;
237
- -webkit-transform: translateY(-50%) translateX(-50%);
238
- transform: translateY(-50%) translateX(-50%);
239
- color: #FFF;
240
- }
241
-
242
- &:not(.has-background){
243
- background-color: #337ab7;
244
- }
245
- }
246
- }
247
- }
248
- &.is-style-vk_borderBox-style-solid-kado-tit-onborder {
249
- > .vk_borderBox_title_container {
250
- position: relative;
251
- top: -1.2em;
252
- left: 1em;
253
- z-index: 1;
254
- display: inline-block;
255
- padding: 0.5em 0.5em;
256
- background: #fff;
257
- }
258
- }
259
- }
260
-
261
- /*
262
- タイトル部分色指定
263
- --------------------------------------------*/
264
- /* タブ風タイトル　背景色がないパターン */
265
- .vk_borderBox {
266
- &.is-style-vk_borderBox-style-solid-kado-tit-tab,
267
- &.is-style-vk_borderBox-style-solid-round-tit-tab,
268
- &.is-style-vk_borderBox-style-solid-kado-tit-banner {
269
- border: none;
270
- background-color: transparent;
271
- }
272
- }
273
-
274
- /* タイトル背景塗り 白文字パターン */
275
- .is-style-vk_borderBox-style-solid-kado-tit-tab,
276
- .is-style-vk_borderBox-style-solid-kado-tit-banner,
277
- .is-style-vk_borderBox-style-solid-round-tit-tab {
278
- > .vk_borderBox_title_container {
279
- color: #fff;
280
- }
281
- &.vk_borderBox-color-red {
282
- .vk_borderBox_title_container {
283
- background-color: var(--vk-color-background-red);
284
- }
285
- .vk_borderBox_body {
286
- border-color: var(--vk-color-border-red);
287
- }
288
- }
289
-
290
- &.vk_borderBox-color-orange {
291
- .vk_borderBox_title_container {
292
- background-color: var(--vk-color-background-orange);
293
- }
294
- .vk_borderBox_body {
295
- border-color: var(--vk-color-border-orange);
296
- }
297
- }
298
- &.vk_borderBox-color-blue {
299
- .vk_borderBox_title_container {
300
- background-color: var(--vk-color-background-blue);
301
- }
302
- .vk_borderBox_body {
303
- border-color: var(--vk-color-border-blue);
304
- }
305
- }
306
- &.vk_borderBox-color-green {
307
- .vk_borderBox_title_container {
308
- background-color: var(--vk-color-background-green);
309
- }
310
- .vk_borderBox_body {
311
- border-color: var(--vk-color-border-green);
312
- }
313
- }
314
- &.vk_borderBox-color-black {
315
- .vk_borderBox_title_container {
316
- background-color: var(--vk-color-background-black);
317
- }
318
- .vk_borderBox_body {
319
- border-color: var(--vk-color-border-black);
320
- }
321
- }
322
- }
323
-
324
- /* タイトル文字色のみパターン */
325
- .is-style-vk_borderBox-style-solid-kado-tit-inner,
326
- .is-style-vk_borderBox-style-solid-kado-tit-onborder,
327
- .is-style-vk_borderBox-style-solid-kado-iconFeature {
328
- &.vk_borderBox-color-red .vk_borderBox_title_container {
329
- color: var(--vk-color-background-red);
330
- }
331
- &.vk_borderBox-color-orange .vk_borderBox_title_container {
332
- color: var(--vk-color-background-orange);
333
- }
334
- &.vk_borderBox-color-blue .vk_borderBox_title_container {
335
- color: var(--vk-color-background-blue);
336
- }
337
- &.vk_borderBox-color-green .vk_borderBox_title_container {
338
- color: var(--vk-color-background-green);
339
- }
340
- &.vk_borderBox-color-black .vk_borderBox_title_container {
341
- color: var(--vk-color-background-black);
342
- }
343
- }
344
- /* iconFeatureパターン */
345
- .is-style-vk_borderBox-style-solid-kado-iconFeature {
346
- &.vk_borderBox-color-red {
347
- .vk_borderBox_title_container {
348
- .svg-inline--fa,
349
- .fas {
350
- //iconfont
351
- color: #fff;
352
- }
353
- &::after {
354
- background-color: var(--vk-color-background-red);
355
- }
356
- }
357
- }
358
- &.vk_borderBox-color-orange {
359
- .vk_borderBox_title_container {
360
- .svg-inline--fa,
361
- .fas {
362
- //iconfont
363
- background-color: var(--vk-color-background-orange);
364
- color: #fff;
365
- }
366
- &::after {
367
- background-color: var(--vk-color-background-orange);
368
- }
369
- }
370
- }
371
- &.vk_borderBox-color-blue {
372
- .vk_borderBox_title_container {
373
- .svg-inline--fa,
374
- .fas {
375
- //iconfont
376
- background-color: var(--vk-color-background-blue);
377
- color: #fff;
378
- }
379
- &::after {
380
- background-color: var(--vk-color-background-blue);
381
- }
382
- }
383
- }
384
- &.vk_borderBox-color-green {
385
- .vk_borderBox_title_container {
386
- .svg-inline--fa,
387
- .fas {
388
- //iconfont
389
- background-color: var(--vk-color-background-green);
390
- color: #fff;
391
- }
392
- &::after {
393
- background-color: var(--vk-color-background-green);
394
- }
395
- }
396
- }
397
- &.vk_borderBox-color-black {
398
- .vk_borderBox_title_container {
399
- .svg-inline--fa,
400
- .fas {
401
- //iconfont
402
- background-color: var(--vk-color-background-black);
403
- color: #fff;
404
- }
405
- &::after {
406
- background-color: var(--vk-color-background-black);
407
- }
408
- }
409
- }
410
- }
411
-
412
- .vk_borderBox_body-align {
413
- &-left {
414
- display: flex;
415
- justify-content: left;
416
- }
417
- &-center {
418
- display: flex;
419
- justify-content: center;
420
- }
421
- &-right {
422
- display: flex;
423
- justify-content: right;
424
- }
425
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/bundle.js DELETED
@@ -1,126 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import '@wordpress/core-data';
5
- import '@wordpress/notices';
6
- // import '@wordpress/block-editor';
7
- import {
8
- registerBlockType,
9
- unstable__bootstrapServerSideBlockDefinitions, // eslint-disable-line camelcase
10
- } from '@wordpress/blocks';
11
- import compareVersions from 'compare-versions';
12
- const vkblocksPro = [];
13
-
14
- /**
15
- * Blocks
16
- */
17
- import * as alert from './alert';
18
- import * as balloon from './balloon';
19
- import * as borderBox from './border-box';
20
- import * as button from './button';
21
- import * as faq from './faq';
22
- import * as faq2 from './faq2';
23
- import * as faq2a from './faq2-a';
24
- import * as faq2q from './faq2-q';
25
- import * as flow from './flow';
26
- import * as heading from './heading';
27
- import * as icon from './icon';
28
- import * as iconOuter from './icon-outer';
29
- import * as pageContent from './page-content';
30
- import * as prBlocks from './pr-blocks';
31
- import * as prContent from './pr-content';
32
- import * as spacer from './spacer';
33
- import * as staff from './staff';
34
-
35
- /**
36
- * Extensions
37
- */
38
- import '@vkblocks/extensions/core/heading/style';
39
- import '@vkblocks/extensions/core/group/style';
40
- import '@vkblocks/extensions/core/list/style';
41
- import '@vkblocks/extensions/core/image/style';
42
- import '@vkblocks/extensions/core/table/style';
43
- import '@vkblocks/extensions/common/hidden-extension';
44
- import '@vkblocks/extensions/common/highlighter';
45
- import '@vkblocks/extensions/common/inline-font-size';
46
- import '@vkblocks/extensions/common/nowrap';
47
- import '@vkblocks/extensions/common/responsive-br';
48
- import '@vkblocks/extensions/common/margin-extension';
49
-
50
- const vkBlocks = [
51
- alert,
52
- balloon,
53
- borderBox,
54
- button,
55
- faq,
56
- faq2,
57
- faq2a,
58
- faq2q,
59
- flow,
60
- heading,
61
- icon,
62
- iconOuter,
63
- pageContent,
64
- prBlocks,
65
- prContent,
66
- spacer,
67
- staff,
68
- ];
69
-
70
- /**
71
- * Function to get all the VK Blocks in an array.
72
- */
73
- export const __getVKBlocks = () => vkBlocks.concat(vkblocksPro);
74
-
75
- /**
76
- * Function to register an individual block.
77
- *
78
- * @param {Object} block The block to be registered.
79
- */
80
- const registerBlock = (block) => {
81
- if (!block) {
82
- return;
83
- }
84
-
85
- let { metadata, settings, name } = block;
86
-
87
- /*
88
- そもそも Require at Least が 5.7 なので 5.5 以下の後方互換は不要ではあるが、現状影響が少ないので残しておく
89
- window.wpVersion は外観 > カスタマイズ > ウィジェットでは undefined を返すので比較不可能
90
- ともかく最初から undefined が条件に当てはまらないように変更
91
- */
92
-
93
- //WP5.5未満の場合
94
- if (
95
- window.wpVersion !== undefined &&
96
- window.wpVersion !== null &&
97
- compareVersions(window.wpVersion, '5.5') < 0
98
- ) {
99
- //nameを削除
100
- delete metadata.name;
101
- //カテゴリ等を追加
102
- settings = {
103
- ...settings,
104
- ...metadata,
105
- };
106
- } else if (metadata) {
107
- // ServerSideBlockの設定読み込み
108
- unstable__bootstrapServerSideBlockDefinitions({ [name]: metadata }); // eslint-disable-line camelcase
109
- }
110
-
111
- // 5.8以前の場合はnameのみ渡す
112
- if (typeof getBlockSettingsFromMetadata !== 'function') {
113
- registerBlockType(name, settings);
114
- } else if (metadata) {
115
- registerBlockType(metadata, settings);
116
- }
117
- };
118
-
119
- /**
120
- * Function to register VK Blocks.
121
- *
122
- * @param {*} blocks
123
- */
124
- export const registerVKBlocks = (blocks = __getVKBlocks()) => {
125
- blocks.forEach(registerBlock);
126
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/block.json DELETED
@@ -1,83 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/button",
4
- "title": "Button",
5
- "category": "vk-blocks-cat",
6
- "attributes": {
7
- "content": {
8
- "type": "string",
9
- "source": "html",
10
- "selector": "span"
11
- },
12
- "subCaption": {
13
- "type": "string"
14
- },
15
- "buttonUrl": {
16
- "type": "string"
17
- },
18
- "buttonTarget": {
19
- "type": "Boolean",
20
- "default": false
21
- },
22
- "buttonSize": {
23
- "type": "string",
24
- "default": "md"
25
- },
26
- "buttonType": {
27
- "type": "string",
28
- "default": "0"
29
- },
30
- "buttonColor": {
31
- "type": "string",
32
- "default": "primary"
33
- },
34
- "buttonTextColorCustom": {
35
- "type": "string"
36
- },
37
- "buttonColorCustom": {
38
- "type": "string"
39
- },
40
- "buttonAlign": {
41
- "type": "string",
42
- "default": "left"
43
- },
44
- "buttonWidthMobile": {
45
- "type": "number",
46
- "default": 0
47
- },
48
- "buttonWidthTablet": {
49
- "type": "number",
50
- "default": 0
51
- },
52
- "buttonWidth": {
53
- "type": "number",
54
- "default": 0
55
- },
56
- "outerGap": {
57
- "type": "string",
58
- "default": null
59
- },
60
- "fontAwesomeIconBefore": {
61
- "type": "string"
62
- },
63
- "fontAwesomeIconAfter": {
64
- "type": "string"
65
- },
66
- "clientId": {
67
- "type": "string"
68
- },
69
- "blockId": {
70
- "type": "string"
71
- },
72
- "old_1_31_0": {
73
- "type": "string",
74
- "default": true
75
- }
76
- },
77
- "description": "A button link that can display icons before and after.",
78
- "textdomain": "vk-blocks",
79
- "supports": {
80
- "className": true,
81
- "anchor": true
82
- }
83
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/component.js DELETED
@@ -1,125 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export class VKBButton extends Component {
6
- render() {
7
- const buttonTextColorCustom = this.props.lbTextColorCustom;
8
- const buttonColorCustom = this.props.lbColorCustom;
9
- const buttonColor = this.props.lbColor;
10
- const buttonType = this.props.lbType;
11
- const buttonAlign = this.props.lbAlign;
12
- const buttonSize = this.props.lbSize;
13
- const buttonUrl = this.props.lbUrl;
14
- const buttonTarget = this.props.lbTarget;
15
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
16
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
17
- const richText = this.props.lbRichtext;
18
- const subCaption = this.props.lbsubCaption;
19
- let aClass = '';
20
- let aStyle = {};
21
- let iconBefore = '';
22
- let iconAfter = '';
23
-
24
- aStyle = null;
25
- aClass = `vk_button_link`;
26
-
27
- // 塗り
28
- if (buttonType === '0' || buttonType === null) {
29
- // 規定カラーの場合
30
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
31
- aClass += ` btn has-background has-vk-color-${buttonColor}-background-color`;
32
- } else {
33
- aClass += ` btn has-background`;
34
- // カスタムパレットカラーの場合
35
- if (!isHexColor(buttonColorCustom)) {
36
- aClass += ` has-${buttonColorCustom}-background-color`;
37
- }
38
- }
39
-
40
- // 文字色
41
- if (
42
- buttonColor === 'custom' &&
43
- buttonTextColorCustom !== undefined
44
- ) {
45
- aClass += ` btn has-text-color`;
46
- // カスタムパレットカラーの場合
47
- if (!isHexColor(buttonTextColorCustom)) {
48
- aClass += ` has-${buttonTextColorCustom}-color`;
49
- }
50
- }
51
- // 塗りなし
52
- } else if (buttonType === '1') {
53
- // 規定カラーの場合
54
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
55
- aClass += ` btn has-text-color is-style-outline has-vk-color-${buttonColor}-color`;
56
- } else {
57
- aClass += ` btn has-text-color is-style-outline`;
58
- // カスタムパレットカラーの場合
59
- if (!isHexColor(buttonColorCustom)) {
60
- aClass += ` has-${buttonColorCustom}-color`;
61
- }
62
- }
63
- // テキストのみ
64
- } else if (buttonType === '2') {
65
- // 規定カラーの場合
66
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
67
- aClass += ` has-text-color vk_button_link-type-text has-vk-color-${buttonColor}-color`;
68
- } else {
69
- aClass += ` has-text-color vk_button_link-type-text`;
70
- // カスタムパレットカラーの場合
71
- if (!isHexColor(buttonColorCustom)) {
72
- aClass += ` has-${buttonColorCustom}-color`;
73
- }
74
- }
75
- }
76
-
77
- aClass = `${aClass} btn-${buttonSize}`;
78
-
79
- if (buttonAlign === 'block') {
80
- aClass = `${aClass} btn-block`;
81
- }
82
-
83
- //過去バージョンをリカバリーした時にiconを正常に表示する
84
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
85
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
86
- }
87
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
88
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
89
- }
90
-
91
- if (fontAwesomeIconBefore) {
92
- let fontAwesomeIconBeforeClassName =
93
- fontAwesomeIconBefore.match(/class="(.*?)"/)[1];
94
- fontAwesomeIconBeforeClassName += ` vk_button_link_before`;
95
- iconBefore = `<i class="${fontAwesomeIconBeforeClassName}"></i>`;
96
- }
97
- if (fontAwesomeIconAfter) {
98
- let fontAwesomeIconAfterClassName =
99
- fontAwesomeIconAfter.match(/class="(.*?)"/)[1];
100
- fontAwesomeIconAfterClassName += ` vk_button_link_after`;
101
- iconAfter = `<i class="${fontAwesomeIconAfterClassName}"></i>`;
102
- }
103
-
104
- return (
105
- /* eslint react/jsx-no-target-blank: 0 */
106
- <a
107
- href={buttonUrl}
108
- style={aStyle}
109
- className={aClass}
110
- role={'button'}
111
- aria-pressed={true}
112
- target={buttonTarget ? '_blank' : null}
113
- rel={'noopener'}
114
- >
115
- {parse(iconBefore)}
116
- {richText}
117
- {parse(iconAfter)}
118
- {/*サブキャプションが入力された時のみ表示*/}
119
- {subCaption && (
120
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
121
- )}
122
- </a>
123
- );
124
- }
125
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/hooks/1.16.2/index.js DELETED
@@ -1,3 +0,0 @@
1
- export default function ButtonHook({el}) {
2
- return el
3
- }
 
 
 
src/blocks/button/deprecated/hooks/1.16.4/index.js DELETED
@@ -1,57 +0,0 @@
1
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
2
-
3
- const generateInlineCss = (attributes) => {
4
- const { clientId, buttonType, buttonColorCustom } = attributes;
5
- let inlineCss = '';
6
-
7
- // カスタムカラーの場合
8
- if (buttonColorCustom !== undefined && isHexColor(buttonColorCustom)) {
9
- if (buttonType === '0' || buttonType === null) {
10
- inlineCss = `
11
- .vk_button-${clientId} .has-background {
12
- background-color: ${buttonColorCustom};
13
- border: 1px solid ${buttonColorCustom};
14
- color: #fff;
15
- }
16
- `;
17
- }
18
-
19
- if (buttonType === '1') {
20
- inlineCss = `
21
- .vk_button-${clientId} .has-text-color {
22
- background-color: transparent;
23
- border: 1px solid ${buttonColorCustom};
24
- color: ${buttonColorCustom};
25
- }
26
- .vk_button-${clientId} .has-text-color:hover {
27
- background-color: ${buttonColorCustom};
28
- border: 1px solid ${buttonColorCustom};
29
- color: #fff;
30
- }
31
- `;
32
- }
33
-
34
- if (buttonType === '2') {
35
- inlineCss = `
36
- .vk_button-${clientId} .vk_button_link-type-text {
37
- color: ${buttonColorCustom};
38
- }
39
- `;
40
- }
41
- }
42
-
43
- return inlineCss;
44
- };
45
-
46
- export default function ButtonHook({el,attributes}) {
47
- const cssTag = generateInlineCss(attributes);
48
- if (cssTag !== '') {
49
- return (
50
- <>
51
- {el}
52
- <style type="text/css">{cssTag}</style>
53
- </>
54
- );
55
- }
56
- return <>{el}</>;
57
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/hooks/1.18.1/index.js DELETED
@@ -1,55 +0,0 @@
1
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
2
-
3
- const generateInlineCss = (attributes) => {
4
- const { buttonColorCustom, buttonType, clientId } = attributes;
5
- let inlineCss = '';
6
-
7
- // カスタムカラーの場合
8
- if (buttonColorCustom !== undefined && isHexColor(buttonColorCustom)) {
9
- if (buttonType === '0' || buttonType === null) {
10
- inlineCss += `.vk_button-${clientId} .has-background {
11
- background-color: ${buttonColorCustom};
12
- border: 1px solid ${buttonColorCustom};
13
- color: #fff;
14
- }`;
15
- }
16
-
17
- if (buttonType === '1') {
18
- inlineCss += `.vk_button-${clientId} .has-text-color.is-style-outline {
19
- background-color: transparent;
20
- border: 1px solid ${buttonColorCustom};
21
- color: ${buttonColorCustom};
22
- }
23
- .vk_button-${clientId} .has-text-color.is-style-outline:hover {
24
- background-color: ${buttonColorCustom};
25
- border: 1px solid ${buttonColorCustom};
26
- color: #fff;
27
- }`;
28
- }
29
-
30
- if (buttonType === '2') {
31
- inlineCss = `.vk_button-${clientId} .has-text-color.vk_button_link-type-text {
32
- color: ${buttonColorCustom};
33
- }
34
- .vk_button-${clientId} .has-text-color.vk_button_link-type-text:hover {
35
- background-color: ${buttonColorCustom};
36
- color: #fff;
37
- }`;
38
- }
39
- }
40
-
41
- return inlineCss;
42
- };
43
-
44
- export default function ButtonHook({el,attributes}) {
45
- const cssTag = generateInlineCss(attributes);
46
- if (cssTag !== '') {
47
- return (
48
- <>
49
- {el}
50
- <style type="text/css">{cssTag}</style>
51
- </>
52
- );
53
- }
54
- return <>{el}</>;
55
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/hooks/1.29.2/index.js DELETED
@@ -1,64 +0,0 @@
1
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
2
-
3
- const generateInlineCss = (attributes) => {
4
- const { buttonTextColorCustom, buttonColorCustom, buttonType, blockId } =
5
- attributes;
6
- let inlineCss = '';
7
-
8
- // カスタムカラーの場合
9
- if (buttonColorCustom !== undefined && isHexColor(buttonColorCustom)) {
10
- // 塗り
11
- if (buttonType === '0' || buttonType === null) {
12
- inlineCss += `.vk_button-${blockId} .has-background {
13
- background-color: ${buttonColorCustom};
14
- border: 1px solid ${buttonColorCustom};
15
- }`;
16
- }
17
- // アウトライン
18
- if (buttonType === '1') {
19
- inlineCss += `.vk_button-${blockId} .has-text-color.is-style-outline {
20
- background-color: transparent;
21
- border: 1px solid ${buttonColorCustom};
22
- color: ${buttonColorCustom};
23
- }
24
- .vk_button-${blockId} .has-text-color.is-style-outline:hover {
25
- background-color: ${buttonColorCustom};
26
- border: 1px solid ${buttonColorCustom};
27
- color: #fff;
28
- }`;
29
- }
30
- // テキストのみ
31
- if (buttonType === '2') {
32
- inlineCss = `.vk_button-${blockId} .has-text-color.vk_button_link-type-text {
33
- color: ${buttonColorCustom};
34
- }`;
35
- }
36
- }
37
-
38
- // 文字色がカスタムカラーの場合
39
- if (
40
- buttonTextColorCustom !== undefined &&
41
- isHexColor(buttonTextColorCustom)
42
- ) {
43
- if (buttonType === '0' || buttonType === null) {
44
- inlineCss += ` .vk_button-${blockId} .has-text-color {
45
- color: ${buttonTextColorCustom};
46
- }`;
47
- }
48
- }
49
-
50
- return inlineCss;
51
- };
52
-
53
- export default function ButtonHook({ el, attributes }) {
54
- const cssTag = generateInlineCss(attributes);
55
- if (cssTag !== '') {
56
- return (
57
- <>
58
- {el}
59
- <style type="text/css">{cssTag}</style>
60
- </>
61
- );
62
- }
63
- return <>{el}</>;
64
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/hooks/index.js DELETED
@@ -1,27 +0,0 @@
1
- import ButtonHook1_16_2 from './1.16.2';
2
- import ButtonHook1_16_4 from './1.16.4';
3
- import ButtonHook1_18_1 from './1.18.1';
4
- import ButtonHook1_29_2 from './1.29.2';
5
-
6
- // saveの数分必要
7
- export default [
8
- ButtonHook1_29_2,
9
- ButtonHook1_29_2,
10
- ButtonHook1_29_2,
11
- ButtonHook1_18_1,
12
- ButtonHook1_18_1,
13
- ButtonHook1_16_4,
14
- ButtonHook1_16_2,
15
- ButtonHook1_16_2,
16
- ButtonHook1_16_2,
17
- ButtonHook1_16_2,
18
- ButtonHook1_16_2,
19
- ButtonHook1_16_2,
20
- ButtonHook1_16_2,
21
- ButtonHook1_16_2,
22
- ButtonHook1_16_2,
23
- ButtonHook1_16_2,
24
- ButtonHook1_16_2,
25
- ButtonHook1_16_2,
26
- ButtonHook1_16_2,
27
- ];
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.0/component.js DELETED
@@ -1,87 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
-
3
- export class VKBButton extends Component {
4
- render() {
5
- const buttonColorCustom = this.props.lbColorCustom;
6
- const buttonColor = this.props.lbColor;
7
- const buttonType = this.props.lbType;
8
- const buttonAlign = this.props.lbAlign;
9
- const buttonSize = this.props.lbSize;
10
- const buttonUrl = this.props.lbUrl;
11
- const buttonTarget = this.props.lbTarget;
12
- const fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
13
- const fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
14
- const richText = this.props.lbRichtext;
15
- let aClass = '';
16
- let aStyle = {};
17
- let iconBefore = '';
18
- let iconAfter = '';
19
-
20
- aClass = `btn vk_button_link`;
21
-
22
- if (buttonColorCustom) {
23
- aClass = `${aClass} btn-primary btn-${buttonSize}`;
24
-
25
- // 塗り
26
- if (buttonType === '0') {
27
- aStyle = {
28
- backgroundColor: buttonColorCustom,
29
- border: `1px solid ${buttonColorCustom}`,
30
- };
31
- // 塗りなし
32
- } else if (buttonType === '1') {
33
- aStyle = {
34
- backgroundColor: 'transparent',
35
- border: '1px solid ' + buttonColorCustom,
36
- color: buttonColorCustom,
37
- };
38
- }
39
-
40
- // カスタムカラーじゃない場合
41
- } else if (!buttonColorCustom) {
42
- // 塗り
43
- if (buttonType === '0') {
44
- aClass = `${aClass} btn-${buttonSize} btn-${buttonColor}`;
45
- aStyle = null;
46
- // 塗りなし
47
- } else if (buttonType === '1') {
48
- aClass = `${aClass} btn-${buttonSize} btn-outline-${buttonColor}`;
49
- aStyle = null;
50
- }
51
- }
52
-
53
- if (buttonAlign === 'block') {
54
- aClass = `${aClass} btn-block`;
55
- }
56
-
57
- if (fontAwesomeIconBefore) {
58
- iconBefore = (
59
- <i
60
- className={`${fontAwesomeIconBefore} vk_button_link_before`}
61
- ></i>
62
- );
63
- }
64
- if (fontAwesomeIconAfter) {
65
- iconAfter = (
66
- <i
67
- className={`${fontAwesomeIconAfter} vk_button_link_after`}
68
- ></i>
69
- );
70
- }
71
-
72
- return (
73
- <a
74
- href={buttonUrl}
75
- className={aClass}
76
- role={'button'}
77
- aria-pressed={true}
78
- style={aStyle}
79
- target={buttonTarget ? '_blank' : null}
80
- >
81
- {iconBefore}
82
- {richText}
83
- {iconAfter}
84
- </a>
85
- );
86
- }
87
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.0/save.js DELETED
@@ -1,48 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes }) {
5
- const {
6
- content,
7
- buttonUrl,
8
- buttonTarget,
9
- buttonSize,
10
- buttonType,
11
- buttonColor,
12
- buttonColorCustom,
13
- buttonAlign,
14
- fontAwesomeIconBefore,
15
- fontAwesomeIconAfter,
16
- } = attributes;
17
-
18
- let containerClass = '';
19
-
20
- if (buttonColorCustom) {
21
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
22
- } else if (!buttonColorCustom) {
23
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
24
- }
25
-
26
- return (
27
- <div className={containerClass}>
28
- <VKBButton
29
- lbColorCustom={buttonColorCustom}
30
- lbColor={buttonColor}
31
- lbType={buttonType}
32
- lbAlign={buttonAlign}
33
- lbSize={buttonSize}
34
- lbUrl={buttonUrl}
35
- lbTarget={buttonTarget}
36
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
37
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
38
- lbRichtext={
39
- <RichText.Content
40
- tagName="span"
41
- className={'vk_button_link_txt'}
42
- value={content}
43
- />
44
- }
45
- />
46
- </div>
47
- );
48
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.1/component.js DELETED
@@ -1,88 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
-
3
- export class VKBButton extends Component {
4
- render() {
5
- const buttonColorCustom = this.props.lbColorCustom;
6
- const buttonColor = this.props.lbColor;
7
- const buttonType = this.props.lbType;
8
- const buttonAlign = this.props.lbAlign;
9
- const buttonSize = this.props.lbSize;
10
- const buttonUrl = this.props.lbUrl;
11
- const buttonTarget = this.props.lbTarget;
12
- const fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
13
- const fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
14
- const richText = this.props.lbRichtext;
15
- let aClass = '';
16
- let aStyle = {};
17
- let iconBefore = '';
18
- let iconAfter = '';
19
-
20
- aClass = `btn vk_button_link`;
21
-
22
- if (buttonColorCustom) {
23
- aClass = `${aClass} btn-primary btn-${buttonSize}`;
24
-
25
- // 塗り
26
- if (buttonType === '0') {
27
- aStyle = {
28
- backgroundColor: buttonColorCustom,
29
- border: `1px solid ${buttonColorCustom}`,
30
- };
31
- // 塗りなし
32
- } else if (buttonType === '1') {
33
- aStyle = {
34
- backgroundColor: 'transparent',
35
- border: '1px solid ' + buttonColorCustom,
36
- color: buttonColorCustom,
37
- };
38
- }
39
-
40
- // カスタムカラーじゃない場合
41
- } else if (!buttonColorCustom) {
42
- // 塗り
43
- if (buttonType === '0') {
44
- aClass = `${aClass} btn-${buttonSize} btn-${buttonColor}`;
45
- aStyle = null;
46
- // 塗りなし
47
- } else if (buttonType === '1') {
48
- aClass = `${aClass} btn-${buttonSize} btn-outline-${buttonColor}`;
49
- aStyle = null;
50
- }
51
- }
52
-
53
- if (buttonAlign === 'block') {
54
- aClass = `${aClass} btn-block`;
55
- }
56
-
57
- if (fontAwesomeIconBefore) {
58
- iconBefore = (
59
- <i
60
- className={`${fontAwesomeIconBefore} vk_button_link_before`}
61
- ></i>
62
- );
63
- }
64
- if (fontAwesomeIconAfter) {
65
- iconAfter = (
66
- <i
67
- className={`${fontAwesomeIconAfter} vk_button_link_after`}
68
- ></i>
69
- );
70
- }
71
-
72
- return (
73
- <a
74
- href={buttonUrl}
75
- id={'vk_button_link'}
76
- className={aClass}
77
- role={'button'}
78
- aria-pressed={true}
79
- style={aStyle}
80
- target={buttonTarget ? '_blank' : null}
81
- >
82
- {iconBefore}
83
- {richText}
84
- {iconAfter}
85
- </a>
86
- );
87
- }
88
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.1/save.js DELETED
@@ -1,48 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes }) {
5
- const {
6
- content,
7
- buttonUrl,
8
- buttonTarget,
9
- buttonSize,
10
- buttonType,
11
- buttonColor,
12
- buttonColorCustom,
13
- buttonAlign,
14
- fontAwesomeIconBefore,
15
- fontAwesomeIconAfter,
16
- } = attributes;
17
-
18
- let containerClass = '';
19
-
20
- if (buttonColorCustom) {
21
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
22
- } else if (!buttonColorCustom) {
23
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
24
- }
25
-
26
- return (
27
- <div className={containerClass}>
28
- <VKBButton
29
- lbColorCustom={buttonColorCustom}
30
- lbColor={buttonColor}
31
- lbType={buttonType}
32
- lbAlign={buttonAlign}
33
- lbSize={buttonSize}
34
- lbUrl={buttonUrl}
35
- lbTarget={buttonTarget}
36
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
37
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
38
- lbRichtext={
39
- <RichText.Content
40
- tagName="span"
41
- className={'vk_button_link_txt'}
42
- value={content}
43
- />
44
- }
45
- />
46
- </div>
47
- );
48
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.2/component.js DELETED
@@ -1,94 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
-
3
- export class VKBButton extends Component {
4
- render() {
5
- const buttonColorCustom = this.props.lbColorCustom;
6
- const buttonColor = this.props.lbColor;
7
- const buttonType = this.props.lbType;
8
- const buttonAlign = this.props.lbAlign;
9
- const buttonSize = this.props.lbSize;
10
- const buttonUrl = this.props.lbUrl;
11
- const buttonTarget = this.props.lbTarget;
12
- const fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
13
- const fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
14
- const richText = this.props.lbRichtext;
15
- const subCaption = this.props.lbsubCaption;
16
- let aClass = '';
17
- let aStyle = {};
18
- let iconBefore = '';
19
- let iconAfter = '';
20
-
21
- aClass = `btn vk_button_link`;
22
-
23
- if (buttonColorCustom) {
24
- aClass = `${aClass} btn-primary btn-${buttonSize}`;
25
-
26
- // 塗り
27
- if (buttonType === '0') {
28
- aStyle = {
29
- backgroundColor: buttonColorCustom,
30
- border: `1px solid ${buttonColorCustom}`,
31
- };
32
- // 塗りなし
33
- } else if (buttonType === '1') {
34
- aStyle = {
35
- backgroundColor: 'transparent',
36
- border: '1px solid ' + buttonColorCustom,
37
- color: buttonColorCustom,
38
- };
39
- }
40
-
41
- // カスタムカラーじゃない場合
42
- } else if (!buttonColorCustom) {
43
- // 塗り
44
- if (buttonType === '0') {
45
- aClass = `${aClass} btn-${buttonSize} btn-${buttonColor}`;
46
- aStyle = null;
47
- // 塗りなし
48
- } else if (buttonType === '1') {
49
- aClass = `${aClass} btn-${buttonSize} btn-outline-${buttonColor}`;
50
- aStyle = null;
51
- }
52
- }
53
-
54
- if (buttonAlign === 'block') {
55
- aClass = `${aClass} btn-block`;
56
- }
57
-
58
- if (fontAwesomeIconBefore) {
59
- iconBefore = (
60
- <i
61
- className={`${fontAwesomeIconBefore} vk_button_link_before`}
62
- ></i>
63
- );
64
- }
65
- if (fontAwesomeIconAfter) {
66
- iconAfter = (
67
- <i
68
- className={`${fontAwesomeIconAfter} vk_button_link_after`}
69
- ></i>
70
- );
71
- }
72
-
73
- return (
74
- <a
75
- href={buttonUrl}
76
- id={'vk_button_link'}
77
- className={aClass}
78
- role={'button'}
79
- aria-pressed={true}
80
- style={aStyle}
81
- target={buttonTarget ? '_blank' : null}
82
- rel={'noopener noreferrer'}
83
- >
84
- {iconBefore}
85
- {richText}
86
- {iconAfter}
87
- {/*サブキャプションが入力された時のみ表示*/}
88
- {subCaption && (
89
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
90
- )}
91
- </a>
92
- );
93
- }
94
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.2/save.js DELETED
@@ -1,50 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes }) {
5
- const {
6
- content,
7
- subCaption,
8
- buttonUrl,
9
- buttonTarget,
10
- buttonSize,
11
- buttonType,
12
- buttonColor,
13
- buttonColorCustom,
14
- buttonAlign,
15
- fontAwesomeIconBefore,
16
- fontAwesomeIconAfter,
17
- } = attributes;
18
-
19
- let containerClass = '';
20
-
21
- if (buttonColorCustom) {
22
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
23
- } else if (!buttonColorCustom) {
24
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
25
- }
26
-
27
- return (
28
- <div className={containerClass}>
29
- <VKBButton
30
- lbColorCustom={buttonColorCustom}
31
- lbColor={buttonColor}
32
- lbType={buttonType}
33
- lbAlign={buttonAlign}
34
- lbSize={buttonSize}
35
- lbUrl={buttonUrl}
36
- lbTarget={buttonTarget}
37
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
38
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
39
- lbsubCaption={subCaption}
40
- lbRichtext={
41
- <RichText.Content
42
- tagName="span"
43
- className={'vk_button_link_txt'}
44
- value={content}
45
- />
46
- }
47
- />
48
- </div>
49
- );
50
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.3/component.js DELETED
@@ -1,93 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
-
3
- export class VKBButton extends Component {
4
- render() {
5
- const buttonColorCustom = this.props.lbColorCustom;
6
- const buttonColor = this.props.lbColor;
7
- const buttonType = this.props.lbType;
8
- const buttonAlign = this.props.lbAlign;
9
- const buttonSize = this.props.lbSize;
10
- const buttonUrl = this.props.lbUrl;
11
- const buttonTarget = this.props.lbTarget;
12
- const fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
13
- const fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
14
- const richText = this.props.lbRichtext;
15
- const subCaption = this.props.lbsubCaption;
16
- let aClass = '';
17
- let aStyle = {};
18
- let iconBefore = '';
19
- let iconAfter = '';
20
-
21
- aClass = `btn vk_button_link`;
22
-
23
- if (buttonColorCustom) {
24
- aClass = `${aClass} btn-primary btn-${buttonSize}`;
25
-
26
- // 塗り
27
- if (buttonType === '0') {
28
- aStyle = {
29
- backgroundColor: buttonColorCustom,
30
- border: `1px solid ${buttonColorCustom}`,
31
- };
32
- // 塗りなし
33
- } else if (buttonType === '1') {
34
- aStyle = {
35
- backgroundColor: 'transparent',
36
- border: '1px solid ' + buttonColorCustom,
37
- color: buttonColorCustom,
38
- };
39
- }
40
-
41
- // カスタムカラーじゃない場合
42
- } else if (!buttonColorCustom) {
43
- // 塗り
44
- if (buttonType === '0') {
45
- aClass = `${aClass} btn-${buttonSize} btn-${buttonColor}`;
46
- aStyle = null;
47
- // 塗りなし
48
- } else if (buttonType === '1') {
49
- aClass = `${aClass} btn-${buttonSize} btn-outline-${buttonColor}`;
50
- aStyle = null;
51
- }
52
- }
53
-
54
- if (buttonAlign === 'block') {
55
- aClass = `${aClass} btn-block`;
56
- }
57
-
58
- if (fontAwesomeIconBefore) {
59
- iconBefore = (
60
- <i
61
- className={`${fontAwesomeIconBefore} vk_button_link_before`}
62
- ></i>
63
- );
64
- }
65
- if (fontAwesomeIconAfter) {
66
- iconAfter = (
67
- <i
68
- className={`${fontAwesomeIconAfter} vk_button_link_after`}
69
- ></i>
70
- );
71
- }
72
-
73
- return (
74
- <a
75
- href={buttonUrl}
76
- id={'vk_button_link'}
77
- className={aClass}
78
- role={'button'}
79
- aria-pressed={true}
80
- style={aStyle}
81
- target={buttonTarget ? '_blank' : null}
82
- >
83
- {iconBefore}
84
- {richText}
85
- {iconAfter}
86
- {/*サブキャプションが入力された時のみ表示*/}
87
- {subCaption && (
88
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
89
- )}
90
- </a>
91
- );
92
- }
93
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.3/save.js DELETED
@@ -1,50 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes }) {
5
- const {
6
- content,
7
- subCaption,
8
- buttonUrl,
9
- buttonTarget,
10
- buttonSize,
11
- buttonType,
12
- buttonColor,
13
- buttonColorCustom,
14
- buttonAlign,
15
- fontAwesomeIconBefore,
16
- fontAwesomeIconAfter,
17
- } = attributes;
18
-
19
- let containerClass = '';
20
-
21
- if (buttonColorCustom) {
22
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
23
- } else if (!buttonColorCustom) {
24
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
25
- }
26
-
27
- return (
28
- <div className={containerClass}>
29
- <VKBButton
30
- lbColorCustom={buttonColorCustom}
31
- lbColor={buttonColor}
32
- lbType={buttonType}
33
- lbAlign={buttonAlign}
34
- lbSize={buttonSize}
35
- lbUrl={buttonUrl}
36
- lbTarget={buttonTarget}
37
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
38
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
39
- lbsubCaption={subCaption}
40
- lbRichtext={
41
- <RichText.Content
42
- tagName="span"
43
- className={'vk_button_link_txt'}
44
- value={content}
45
- />
46
- }
47
- />
48
- </div>
49
- );
50
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.4/component.js DELETED
@@ -1,93 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
-
3
- export class VKBButton extends Component {
4
- render() {
5
- const buttonColorCustom = this.props.lbColorCustom;
6
- const buttonColor = this.props.lbColor;
7
- const buttonType = this.props.lbType;
8
- const buttonAlign = this.props.lbAlign;
9
- const buttonSize = this.props.lbSize;
10
- const buttonUrl = this.props.lbUrl;
11
- const buttonTarget = this.props.lbTarget;
12
- const fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
13
- const fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
14
- const richText = this.props.lbRichtext;
15
- const subCaption = this.props.lbsubCaption;
16
- let aClass = '';
17
- let aStyle = {};
18
- let iconBefore = '';
19
- let iconAfter = '';
20
-
21
- aClass = `btn vk_button_link`;
22
-
23
- if (buttonColorCustom) {
24
- aClass = `${aClass} btn-primary btn-${buttonSize}`;
25
-
26
- // 塗り
27
- if (buttonType === '0') {
28
- aStyle = {
29
- backgroundColor: buttonColorCustom,
30
- border: `1px solid ${buttonColorCustom}`,
31
- };
32
- // 塗りなし
33
- } else if (buttonType === '1') {
34
- aStyle = {
35
- backgroundColor: 'transparent',
36
- border: '1px solid ' + buttonColorCustom,
37
- color: buttonColorCustom,
38
- };
39
- }
40
- // カスタムカラーじゃない場合
41
- } else if (!buttonColorCustom) {
42
- // 塗り
43
- if (buttonType === '0') {
44
- aClass = `${aClass} btn-${buttonSize} btn-${buttonColor}`;
45
- aStyle = null;
46
- // 塗りなし
47
- } else if (buttonType === '1') {
48
- aClass = `${aClass} btn-${buttonSize} btn-outline-${buttonColor}`;
49
- aStyle = null;
50
- }
51
- }
52
-
53
- if (buttonAlign === 'block') {
54
- aClass = `${aClass} btn-block`;
55
- }
56
-
57
- if (fontAwesomeIconBefore) {
58
- iconBefore = (
59
- <i
60
- className={`${fontAwesomeIconBefore} vk_button_link_before`}
61
- ></i>
62
- );
63
- }
64
- if (fontAwesomeIconAfter) {
65
- iconAfter = (
66
- <i
67
- className={`${fontAwesomeIconAfter} vk_button_link_after`}
68
- ></i>
69
- );
70
- }
71
-
72
- return (
73
- <a
74
- href={buttonUrl}
75
- id={'vk_button_link'}
76
- style={aStyle}
77
- className={aClass}
78
- role={'button'}
79
- aria-pressed={true}
80
- target={buttonTarget ? '_blank' : null}
81
- rel={'noopener noreferrer'}
82
- >
83
- {iconBefore}
84
- {richText}
85
- {iconAfter}
86
- {/*サブキャプションが入力された時のみ表示*/}
87
- {subCaption && (
88
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
89
- )}
90
- </a>
91
- );
92
- }
93
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.4/save.js DELETED
@@ -1,53 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes, className }) {
5
- const {
6
- content,
7
- subCaption,
8
- buttonUrl,
9
- buttonTarget,
10
- buttonSize,
11
- buttonType,
12
- buttonColor,
13
- buttonColorCustom,
14
- buttonAlign,
15
- fontAwesomeIconBefore,
16
- fontAwesomeIconAfter,
17
- } = attributes;
18
-
19
- let containerClass = '';
20
- if (buttonColorCustom) {
21
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
22
- } else if (!buttonColorCustom) {
23
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
24
- }
25
-
26
- if (className) {
27
- containerClass = className + ' ' + containerClass;
28
- }
29
-
30
- return (
31
- <div className={containerClass}>
32
- <VKBButton
33
- lbColorCustom={buttonColorCustom}
34
- lbColor={buttonColor}
35
- lbType={buttonType}
36
- lbAlign={buttonAlign}
37
- lbSize={buttonSize}
38
- lbUrl={buttonUrl}
39
- lbTarget={buttonTarget}
40
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
41
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
42
- lbsubCaption={subCaption}
43
- lbRichtext={
44
- <RichText.Content
45
- tagName="span"
46
- className={'vk_button_link_txt'}
47
- value={content}
48
- />
49
- }
50
- />
51
- </div>
52
- );
53
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.5/component.js DELETED
@@ -1,126 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
-
3
- export class VKBButton extends Component {
4
- render() {
5
- const buttonColorCustom = this.props.lbColorCustom;
6
- const buttonColor = this.props.lbColor;
7
- const buttonType = this.props.lbType;
8
- const buttonAlign = this.props.lbAlign;
9
- const buttonSize = this.props.lbSize;
10
- const buttonUrl = this.props.lbUrl;
11
- const buttonTarget = this.props.lbTarget;
12
- const fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
13
- const fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
14
- const richText = this.props.lbRichtext;
15
- const subCaption = this.props.lbsubCaption;
16
- let aClass = '';
17
- let aStyle = {};
18
- let iconBefore = '';
19
- let iconAfter = '';
20
-
21
- aStyle = null;
22
- aClass = `vk_button_link`;
23
-
24
- if (buttonType === '0' || buttonType === null || buttonType === '1') {
25
- aClass = `${aClass} btn`;
26
- } else {
27
- aClass = `${aClass} vk_button_link-type-text`;
28
- }
29
-
30
- // 塗り
31
- if (buttonType === '0' || buttonType === null) {
32
- // 規定カラーの場合
33
- if (
34
- buttonColorCustom === 'undefined' ||
35
- buttonColorCustom === undefined ||
36
- buttonColorCustom === null
37
- ) {
38
- aClass = `${aClass} btn-${buttonColor}`;
39
- aStyle = null;
40
-
41
- // カスタムカラーの場合
42
- } else {
43
- aStyle = {
44
- backgroundColor: buttonColorCustom,
45
- border: `1px solid ${buttonColorCustom}`,
46
- color: `#fff`,
47
- };
48
- }
49
- // 塗りなし
50
- } else if (buttonType === '1') {
51
- // 規定カラーの場合
52
- if (
53
- buttonColorCustom === 'undefined' ||
54
- buttonColorCustom === undefined ||
55
- buttonColorCustom === null
56
- ) {
57
- aClass = `${aClass} btn-outline-${buttonColor}`;
58
- aStyle = null;
59
- // カスタムカラーの場合
60
- } else {
61
- aStyle = {
62
- backgroundColor: 'transparent',
63
- border: '1px solid ' + buttonColorCustom,
64
- color: buttonColorCustom,
65
- };
66
- }
67
- // テキストのみ
68
- } else if (buttonType === '2') {
69
- // 規定カラーの場合
70
- if (
71
- buttonColorCustom === 'undefined' ||
72
- buttonColorCustom === undefined ||
73
- buttonColorCustom === null
74
- ) {
75
- aClass = `${aClass} btn-outline-${buttonColor}`;
76
- aStyle = null;
77
- // カスタムカラーの場合
78
- } else {
79
- aStyle = {
80
- color: buttonColorCustom,
81
- };
82
- }
83
- }
84
-
85
- aClass = `${aClass} btn-${buttonSize}`;
86
-
87
- if (buttonAlign === 'block') {
88
- aClass = `${aClass} btn-block`;
89
- }
90
- if (fontAwesomeIconBefore) {
91
- iconBefore = (
92
- <i
93
- className={`${fontAwesomeIconBefore} vk_button_link_before`}
94
- ></i>
95
- );
96
- }
97
- if (fontAwesomeIconAfter) {
98
- iconAfter = (
99
- <i
100
- className={`${fontAwesomeIconAfter} vk_button_link_after`}
101
- ></i>
102
- );
103
- }
104
-
105
- return (
106
- <a
107
- href={buttonUrl}
108
- id={'vk_button_link'}
109
- style={aStyle}
110
- className={aClass}
111
- role={'button'}
112
- aria-pressed={true}
113
- target={buttonTarget ? '_blank' : null}
114
- rel={'noopener noreferrer'}
115
- >
116
- {iconBefore}
117
- {richText}
118
- {iconAfter}
119
- {/*サブキャプションが入力された時のみ表示*/}
120
- {subCaption && (
121
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
122
- )}
123
- </a>
124
- );
125
- }
126
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.5/save.js DELETED
@@ -1,53 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes, className }) {
5
- const {
6
- content,
7
- subCaption,
8
- buttonUrl,
9
- buttonTarget,
10
- buttonSize,
11
- buttonType,
12
- buttonColor,
13
- buttonColorCustom,
14
- buttonAlign,
15
- fontAwesomeIconBefore,
16
- fontAwesomeIconAfter,
17
- } = attributes;
18
-
19
- let containerClass = '';
20
- if (buttonColorCustom) {
21
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
22
- } else if (!buttonColorCustom) {
23
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
24
- }
25
-
26
- if (className) {
27
- containerClass = className + ' ' + containerClass;
28
- }
29
-
30
- return (
31
- <div className={containerClass}>
32
- <VKBButton
33
- lbColorCustom={buttonColorCustom}
34
- lbColor={buttonColor}
35
- lbType={buttonType}
36
- lbAlign={buttonAlign}
37
- lbSize={buttonSize}
38
- lbUrl={buttonUrl}
39
- lbTarget={buttonTarget}
40
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
41
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
42
- lbsubCaption={subCaption}
43
- lbRichtext={
44
- <RichText.Content
45
- tagName="span"
46
- className={'vk_button_link_txt'}
47
- value={content}
48
- />
49
- }
50
- />
51
- </div>
52
- );
53
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.6/component.js DELETED
@@ -1,138 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
-
4
- export class VKBButton extends Component {
5
- render() {
6
- const buttonColorCustom = this.props.lbColorCustom;
7
- const buttonColor = this.props.lbColor;
8
- const buttonType = this.props.lbType;
9
- const buttonAlign = this.props.lbAlign;
10
- const buttonSize = this.props.lbSize;
11
- const buttonUrl = this.props.lbUrl;
12
- const buttonTarget = this.props.lbTarget;
13
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
14
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
15
- const richText = this.props.lbRichtext;
16
- const subCaption = this.props.lbsubCaption;
17
- let aClass = '';
18
- let aStyle = {};
19
- let iconBefore = '';
20
- let iconAfter = '';
21
-
22
- aStyle = null;
23
- aClass = `vk_button_link`;
24
-
25
- if (buttonType === '0' || buttonType === null || buttonType === '1') {
26
- aClass = `${aClass} btn`;
27
- } else {
28
- aClass = `${aClass} vk_button_link-type-text`;
29
- }
30
-
31
- // 塗り
32
- if (buttonType === '0' || buttonType === null) {
33
- // 規定カラーの場合
34
- if (
35
- buttonColorCustom === 'undefined' ||
36
- buttonColorCustom === undefined ||
37
- buttonColorCustom === null
38
- ) {
39
- aClass = `${aClass} btn-${buttonColor}`;
40
- aStyle = null;
41
-
42
- // カスタムカラーの場合
43
- } else {
44
- aStyle = {
45
- backgroundColor: `${buttonColorCustom}`,
46
- border: `1px solid ${buttonColorCustom}`,
47
- color: `#fff`,
48
- };
49
- }
50
- // 塗りなし
51
- } else if (buttonType === '1') {
52
- // 規定カラーの場合
53
- if (
54
- buttonColorCustom === 'undefined' ||
55
- buttonColorCustom === undefined ||
56
- buttonColorCustom === null
57
- ) {
58
- aClass = `${aClass} btn-outline-${buttonColor}`;
59
- aStyle = null;
60
- // カスタムカラーの場合
61
- } else {
62
- aStyle = {
63
- backgroundColor: 'transparent',
64
- border: `1px solid ${buttonColorCustom}`,
65
- color: `${buttonColorCustom}`,
66
- };
67
- }
68
- // テキストのみ
69
- } else if (buttonType === '2') {
70
- // 規定カラーの場合
71
- if (
72
- buttonColorCustom === 'undefined' ||
73
- buttonColorCustom === undefined ||
74
- buttonColorCustom === null
75
- ) {
76
- aClass = `${aClass} btn-outline-${buttonColor}`;
77
- aStyle = null;
78
- // カスタムカラーの場合
79
- } else {
80
- aStyle = {
81
- color: `${buttonColorCustom}`,
82
- };
83
- }
84
- }
85
-
86
- aClass = `${aClass} btn-${buttonSize}`;
87
-
88
- if (buttonAlign === 'block') {
89
- aClass = `${aClass} btn-block`;
90
- }
91
-
92
- //過去バージョンをリカバリーした時にiconを正常に表示する
93
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
94
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
95
- }
96
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
97
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
98
- }
99
-
100
- if (fontAwesomeIconBefore) {
101
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace(
102
- / fas/g,
103
- 'fas '
104
- );
105
-
106
- //add class and inline css
107
- const faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
108
- faIconFragmentBefore[1] =
109
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
110
- iconBefore = faIconFragmentBefore.join('');
111
- }
112
- if (fontAwesomeIconAfter) {
113
- iconAfter = fontAwesomeIconAfter.replace(/ fas /g, ' vk_button_link_after fas');
114
- }
115
-
116
- return (
117
- /* eslint react/jsx-no-target-blank: 0 */
118
- <a
119
- href={buttonUrl}
120
- id={'vk_button_link'}
121
- style={aStyle}
122
- className={aClass}
123
- role={'button'}
124
- aria-pressed={true}
125
- target={buttonTarget ? '_blank' : null}
126
- rel={'noopener noreferrer'}
127
- >
128
- {parse(iconBefore)}
129
- {richText}
130
- {parse(iconAfter)}
131
- {/*サブキャプションが入力された時のみ表示*/}
132
- {subCaption && (
133
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
134
- )}
135
- </a>
136
- );
137
- }
138
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.0.6/save.js DELETED
@@ -1,53 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText, useBlockProps } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes }) {
5
- const {
6
- content,
7
- subCaption,
8
- buttonUrl,
9
- buttonTarget,
10
- buttonSize,
11
- buttonType,
12
- buttonColor,
13
- buttonColorCustom,
14
- buttonAlign,
15
- fontAwesomeIconBefore,
16
- fontAwesomeIconAfter,
17
- } = attributes;
18
-
19
- let containerClass = '';
20
- if (buttonColorCustom && 'undefined' !== buttonColorCustom) {
21
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
22
- } else {
23
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
24
- }
25
-
26
- const blockProps = useBlockProps.save({
27
- className: containerClass,
28
- });
29
-
30
- return (
31
- <div {...blockProps}>
32
- <VKBButton
33
- lbColorCustom={buttonColorCustom}
34
- lbColor={buttonColor}
35
- lbType={buttonType}
36
- lbAlign={buttonAlign}
37
- lbSize={buttonSize}
38
- lbUrl={buttonUrl}
39
- lbTarget={buttonTarget}
40
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
41
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
42
- lbsubCaption={subCaption}
43
- lbRichtext={
44
- <RichText.Content
45
- tagName={'span'}
46
- className={'vk_button_link_txt'}
47
- value={content}
48
- />
49
- }
50
- />
51
- </div>
52
- );
53
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.41.0/component.js DELETED
@@ -1,143 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
-
4
- export class VKBButton extends Component {
5
- render() {
6
- const buttonColorCustom = this.props.lbColorCustom;
7
- const buttonColor = this.props.lbColor;
8
- const buttonType = this.props.lbType;
9
- const buttonAlign = this.props.lbAlign;
10
- const buttonSize = this.props.lbSize;
11
- const buttonUrl = this.props.lbUrl;
12
- const buttonTarget = this.props.lbTarget;
13
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
14
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
15
- const richText = this.props.lbRichtext;
16
- const subCaption = this.props.lbsubCaption;
17
- let aClass = '';
18
- let aStyle = {};
19
- let iconBefore = '';
20
- let iconAfter = '';
21
-
22
- aStyle = null;
23
- aClass = `vk_button_link`;
24
-
25
- if (buttonType === '0' || buttonType === null || buttonType === '1') {
26
- aClass = `${aClass} btn`;
27
- } else {
28
- aClass = `${aClass} vk_button_link-type-text`;
29
- }
30
-
31
- // 塗り
32
- if (buttonType === '0' || buttonType === null) {
33
- // 規定カラーの場合
34
- if (
35
- buttonColorCustom === 'undefined' ||
36
- buttonColorCustom === undefined ||
37
- buttonColorCustom === null
38
- ) {
39
- aClass = `${aClass} btn-${buttonColor}`;
40
- aStyle = null;
41
-
42
- // カスタムカラーの場合
43
- } else {
44
- aStyle = {
45
- backgroundColor: buttonColorCustom,
46
- border: `1px solid ${buttonColorCustom}`,
47
- color: `#fff`,
48
- };
49
- }
50
- // 塗りなし
51
- } else if (buttonType === '1') {
52
- // 規定カラーの場合
53
- if (
54
- buttonColorCustom === 'undefined' ||
55
- buttonColorCustom === undefined ||
56
- buttonColorCustom === null
57
- ) {
58
- aClass = `${aClass} btn-outline-${buttonColor}`;
59
- aStyle = null;
60
- // カスタムカラーの場合
61
- } else {
62
- aStyle = {
63
- backgroundColor: 'transparent',
64
- border: '1px solid ' + buttonColorCustom,
65
- color: buttonColorCustom,
66
- };
67
- }
68
- // テキストのみ
69
- } else if (buttonType === '2') {
70
- // 規定カラーの場合
71
- if (
72
- buttonColorCustom === 'undefined' ||
73
- buttonColorCustom === undefined ||
74
- buttonColorCustom === null
75
- ) {
76
- aClass = `${aClass} btn-outline-${buttonColor}`;
77
- aStyle = null;
78
- // カスタムカラーの場合
79
- } else {
80
- aStyle = {
81
- color: buttonColorCustom,
82
- };
83
- }
84
- }
85
-
86
- aClass = `${aClass} btn-${buttonSize}`;
87
-
88
- if (buttonAlign === 'block') {
89
- aClass = `${aClass} btn-block`;
90
- }
91
-
92
- //過去バージョンをリカバリーした時にiconを正常に表示する
93
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
94
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
95
- }
96
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
97
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
98
- }
99
-
100
- if (fontAwesomeIconBefore) {
101
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace(
102
- / fas/g,
103
- 'fas'
104
- );
105
-
106
- //add class and inline css
107
- const faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
108
- faIconFragmentBefore[1] =
109
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
110
- iconBefore = faIconFragmentBefore.join('');
111
- }
112
- if (fontAwesomeIconAfter) {
113
- fontAwesomeIconAfter = fontAwesomeIconAfter.replace(/ fas/g, 'fas');
114
-
115
- //add class and inline css
116
- const faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
117
- faIconFragmentAfter[1] =
118
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
119
- iconAfter = faIconFragmentAfter.join('');
120
- }
121
-
122
- return (
123
- <a
124
- href={buttonUrl}
125
- id={'vk_button_link'}
126
- style={aStyle}
127
- className={aClass}
128
- role={'button'}
129
- aria-pressed={true}
130
- target={buttonTarget ? '_blank' : null}
131
- rel={'noopener noreferrer'}
132
- >
133
- {parse(iconBefore)}
134
- {richText}
135
- {parse(iconAfter)}
136
- {/*サブキャプションが入力された時のみ表示*/}
137
- {subCaption && (
138
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
139
- )}
140
- </a>
141
- );
142
- }
143
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.41.0/save.js DELETED
@@ -1,53 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes, className }) {
5
- const {
6
- content,
7
- subCaption,
8
- buttonUrl,
9
- buttonTarget,
10
- buttonSize,
11
- buttonType,
12
- buttonColor,
13
- buttonColorCustom,
14
- buttonAlign,
15
- fontAwesomeIconBefore,
16
- fontAwesomeIconAfter,
17
- } = attributes;
18
-
19
- let containerClass = '';
20
- if (buttonColorCustom && 'undefined' !== buttonColorCustom) {
21
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
22
- } else {
23
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
24
- }
25
-
26
- if (className) {
27
- containerClass = className + ' ' + containerClass;
28
- }
29
-
30
- return (
31
- <div className={containerClass}>
32
- <VKBButton
33
- lbColorCustom={buttonColorCustom}
34
- lbColor={buttonColor}
35
- lbType={buttonType}
36
- lbAlign={buttonAlign}
37
- lbSize={buttonSize}
38
- lbUrl={buttonUrl}
39
- lbTarget={buttonTarget}
40
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
41
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
42
- lbsubCaption={subCaption}
43
- lbRichtext={
44
- <RichText.Content
45
- tagName="span"
46
- className={'vk_button_link_txt'}
47
- value={content}
48
- />
49
- }
50
- />
51
- </div>
52
- );
53
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.59.0/component.js DELETED
@@ -1,142 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
-
4
- export class VKBButton extends Component {
5
- render() {
6
- const buttonColorCustom = this.props.lbColorCustom;
7
- const buttonColor = this.props.lbColor;
8
- const buttonType = this.props.lbType;
9
- const buttonAlign = this.props.lbAlign;
10
- const buttonSize = this.props.lbSize;
11
- const buttonUrl = this.props.lbUrl;
12
- const buttonTarget = this.props.lbTarget;
13
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
14
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
15
- const richText = this.props.lbRichtext;
16
- const subCaption = this.props.lbsubCaption;
17
- let aClass = '';
18
- let aStyle = {};
19
- let iconBefore = '';
20
- let iconAfter = '';
21
-
22
- aStyle = null;
23
- aClass = `vk_button_link`;
24
-
25
- if (buttonType === '0' || buttonType === null || buttonType === '1') {
26
- aClass = `${aClass} btn`;
27
- } else {
28
- aClass = `${aClass} vk_button_link-type-text`;
29
- }
30
-
31
- // 塗り
32
- if (buttonType === '0' || buttonType === null) {
33
- // 規定カラーの場合
34
- if (
35
- buttonColorCustom === 'undefined' ||
36
- buttonColorCustom === undefined ||
37
- buttonColorCustom === null
38
- ) {
39
- aClass = `${aClass} btn-${buttonColor}`;
40
- aStyle = null;
41
-
42
- // カスタムカラーの場合
43
- } else {
44
- aStyle = {
45
- backgroundColor: `${buttonColorCustom}`,
46
- border: `1px solid ${buttonColorCustom}`,
47
- color: `#fff`,
48
- };
49
- }
50
- // 塗りなし
51
- } else if (buttonType === '1') {
52
- // 規定カラーの場合
53
- if (
54
- buttonColorCustom === 'undefined' ||
55
- buttonColorCustom === undefined ||
56
- buttonColorCustom === null
57
- ) {
58
- aClass = `${aClass} btn-outline-${buttonColor}`;
59
- aStyle = null;
60
- // カスタムカラーの場合
61
- } else {
62
- aStyle = {
63
- backgroundColor: 'transparent',
64
- border: `1px solid ${buttonColorCustom}`,
65
- color: `${buttonColorCustom}`,
66
- };
67
- }
68
- // テキストのみ
69
- } else if (buttonType === '2') {
70
- // 規定カラーの場合
71
- if (
72
- buttonColorCustom === 'undefined' ||
73
- buttonColorCustom === undefined ||
74
- buttonColorCustom === null
75
- ) {
76
- aClass = `${aClass} btn-outline-${buttonColor}`;
77
- aStyle = null;
78
- // カスタムカラーの場合
79
- } else {
80
- aStyle = {
81
- color: `${buttonColorCustom}`,
82
- };
83
- }
84
- }
85
-
86
- aClass = `${aClass} btn-${buttonSize}`;
87
-
88
- if (buttonAlign === 'block') {
89
- aClass = `${aClass} btn-block`;
90
- }
91
-
92
- //過去バージョンをリカバリーした時にiconを正常に表示する
93
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
94
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
95
- }
96
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
97
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
98
- }
99
-
100
- if (fontAwesomeIconBefore) {
101
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace(
102
- / fas/g,
103
- 'fas'
104
- );
105
-
106
- //add class and inline css
107
- const faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
108
- faIconFragmentBefore[1] =
109
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
110
- iconBefore = faIconFragmentBefore.join('');
111
- }
112
- if (fontAwesomeIconAfter) {
113
- fontAwesomeIconAfter = fontAwesomeIconAfter.replace(/ fas/g, 'fas');
114
-
115
- //add class and inline css
116
- const faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
117
- faIconFragmentAfter[1] =
118
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
119
- iconAfter = faIconFragmentAfter.join('');
120
- }
121
-
122
- return (
123
- <a
124
- href={buttonUrl}
125
- style={aStyle}
126
- className={aClass}
127
- role={'button'}
128
- aria-pressed={true}
129
- target={buttonTarget ? '_blank' : null}
130
- rel={'noopener noreferrer'}
131
- >
132
- {parse(iconBefore)}
133
- {richText}
134
- {parse(iconAfter)}
135
- {/*サブキャプションが入力された時のみ表示*/}
136
- {subCaption && (
137
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
138
- )}
139
- </a>
140
- );
141
- }
142
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.59.0/save.js DELETED
@@ -1,53 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes, className }) {
5
- const {
6
- content,
7
- subCaption,
8
- buttonUrl,
9
- buttonTarget,
10
- buttonSize,
11
- buttonType,
12
- buttonColor,
13
- buttonColorCustom,
14
- buttonAlign,
15
- fontAwesomeIconBefore,
16
- fontAwesomeIconAfter,
17
- } = attributes;
18
-
19
- let containerClass = '';
20
- if (buttonColorCustom && 'undefined' !== buttonColorCustom) {
21
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
22
- } else {
23
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
24
- }
25
-
26
- if (className) {
27
- containerClass = className + ' ' + containerClass;
28
- }
29
-
30
- return (
31
- <div className={containerClass}>
32
- <VKBButton
33
- lbColorCustom={buttonColorCustom}
34
- lbColor={buttonColor}
35
- lbType={buttonType}
36
- lbAlign={buttonAlign}
37
- lbSize={buttonSize}
38
- lbUrl={buttonUrl}
39
- lbTarget={buttonTarget}
40
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
41
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
42
- lbsubCaption={subCaption}
43
- lbRichtext={
44
- <RichText.Content
45
- tagName={'span'}
46
- className={'vk_button_link_txt'}
47
- value={content}
48
- />
49
- }
50
- />
51
- </div>
52
- );
53
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.59.1/component.js DELETED
@@ -1,141 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
-
4
- export class VKBButton extends Component {
5
- render() {
6
- const buttonColorCustom = this.props.lbColorCustom;
7
- const buttonColor = this.props.lbColor;
8
- const buttonType = this.props.lbType;
9
- const buttonAlign = this.props.lbAlign;
10
- const buttonSize = this.props.lbSize;
11
- const buttonUrl = this.props.lbUrl;
12
- const buttonTarget = this.props.lbTarget;
13
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
14
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
15
- const richText = this.props.lbRichtext;
16
- const subCaption = this.props.lbsubCaption;
17
- let aClass = '';
18
- let aStyle = {};
19
- let iconBefore = '';
20
- let iconAfter = '';
21
-
22
- aStyle = null;
23
- aClass = `vk_button_link`;
24
-
25
- if (buttonType === '0' || buttonType === null || buttonType === '1') {
26
- aClass = `${aClass} btn`;
27
- } else {
28
- aClass = `${aClass} vk_button_link-type-text`;
29
- }
30
-
31
- // 塗り
32
- if (buttonType === '0' || buttonType === null) {
33
- // 規定カラーの場合
34
- if (
35
- buttonColorCustom === 'undefined' ||
36
- buttonColorCustom === undefined ||
37
- buttonColorCustom === null
38
- ) {
39
- aClass = `${aClass} btn-${buttonColor}`;
40
- aStyle = null;
41
-
42
- // カスタムカラーの場合
43
- } else {
44
- aStyle = {
45
- backgroundColor: `${buttonColorCustom}`,
46
- border: `1px solid ${buttonColorCustom}`,
47
- color: `#fff`,
48
- };
49
- }
50
- // 塗りなし
51
- } else if (buttonType === '1') {
52
- // 規定カラーの場合
53
- if (
54
- buttonColorCustom === 'undefined' ||
55
- buttonColorCustom === undefined ||
56
- buttonColorCustom === null
57
- ) {
58
- aClass = `${aClass} btn-outline-${buttonColor}`;
59
- aStyle = null;
60
- // カスタムカラーの場合
61
- } else {
62
- aStyle = {
63
- backgroundColor: 'transparent',
64
- border: `1px solid ${buttonColorCustom}`,
65
- color: `${buttonColorCustom}`,
66
- };
67
- }
68
- // テキストのみ
69
- } else if (buttonType === '2') {
70
- // 規定カラーの場合
71
- if (
72
- buttonColorCustom === 'undefined' ||
73
- buttonColorCustom === undefined ||
74
- buttonColorCustom === null
75
- ) {
76
- aClass = `${aClass} btn-outline-${buttonColor}`;
77
- aStyle = null;
78
- // カスタムカラーの場合
79
- } else {
80
- aStyle = {
81
- color: `${buttonColorCustom}`,
82
- };
83
- }
84
- }
85
-
86
- aClass = `${aClass} btn-${buttonSize}`;
87
-
88
- if (buttonAlign === 'block') {
89
- aClass = `${aClass} btn-block`;
90
- }
91
-
92
- //過去バージョンをリカバリーした時にiconを正常に表示する
93
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
94
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
95
- }
96
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
97
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
98
- }
99
-
100
- if (fontAwesomeIconBefore) {
101
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace(
102
- / fas/g,
103
- 'fas'
104
- );
105
-
106
- //add class and inline css
107
- const faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
108
- faIconFragmentBefore[1] =
109
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
110
- iconBefore = faIconFragmentBefore.join('');
111
- }
112
- if (fontAwesomeIconAfter) {
113
- fontAwesomeIconAfter = fontAwesomeIconAfter.replace(/ fas/g, 'fas');
114
-
115
- //add class and inline css
116
- const faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
117
- faIconFragmentAfter[1] =
118
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
119
- iconAfter = faIconFragmentAfter.join('');
120
- }
121
-
122
- return (
123
- <a
124
- href={buttonUrl}
125
- style={aStyle}
126
- className={aClass}
127
- role={'button'}
128
- aria-pressed={true}
129
- target={buttonTarget ? '_blank' : null}
130
- >
131
- {parse(iconBefore)}
132
- {richText}
133
- {parse(iconAfter)}
134
- {/*サブキャプションが入力された時のみ表示*/}
135
- {subCaption && (
136
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
137
- )}
138
- </a>
139
- );
140
- }
141
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.59.1/save.js DELETED
@@ -1,53 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes, className }) {
5
- const {
6
- content,
7
- subCaption,
8
- buttonUrl,
9
- buttonTarget,
10
- buttonSize,
11
- buttonType,
12
- buttonColor,
13
- buttonColorCustom,
14
- buttonAlign,
15
- fontAwesomeIconBefore,
16
- fontAwesomeIconAfter,
17
- } = attributes;
18
-
19
- let containerClass = '';
20
- if (buttonColorCustom && 'undefined' !== buttonColorCustom) {
21
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
22
- } else {
23
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
24
- }
25
-
26
- if (className) {
27
- containerClass = className + ' ' + containerClass;
28
- }
29
-
30
- return (
31
- <div className={containerClass}>
32
- <VKBButton
33
- lbColorCustom={buttonColorCustom}
34
- lbColor={buttonColor}
35
- lbType={buttonType}
36
- lbAlign={buttonAlign}
37
- lbSize={buttonSize}
38
- lbUrl={buttonUrl}
39
- lbTarget={buttonTarget}
40
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
41
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
42
- lbsubCaption={subCaption}
43
- lbRichtext={
44
- <RichText.Content
45
- tagName={'span'}
46
- className={'vk_button_link_txt'}
47
- value={content}
48
- />
49
- }
50
- />
51
- </div>
52
- );
53
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.60.0/component.js DELETED
@@ -1,131 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
-
4
- export class VKBButton extends Component {
5
-
6
- render() {
7
-
8
- const buttonColorCustom = this.props.lbColorCustom;
9
- const buttonColor = this.props.lbColor;
10
- const buttonType = this.props.lbType;
11
- const buttonAlign = this.props.lbAlign;
12
- const buttonSize = this.props.lbSize;
13
- const buttonUrl = this.props.lbUrl;
14
- const buttonTarget = this.props.lbTarget;
15
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
16
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
17
- const richText = this.props.lbRichtext;
18
- const subCaption = this.props.lbsubCaption;
19
- const containerClass = '';
20
- let aClass = '';
21
- let aStyle = {};
22
- let iconBefore = '';
23
- let iconAfter = '';
24
-
25
- aStyle = null;
26
- aClass = `vk_button_link`;
27
-
28
- if (buttonType == '0' || buttonType == null || buttonType == '1') {
29
- aClass = `${aClass} btn`;
30
- } else {
31
- aClass = `${aClass} vk_button_link-type-text`;
32
- }
33
-
34
- // 塗り
35
- if (buttonType == '0' || buttonType === null) {
36
-
37
- // 規定カラーの場合
38
- if (buttonColorCustom == 'undefined' || buttonColorCustom == undefined || buttonColorCustom === null) {
39
-
40
- aClass = `${aClass} btn-${buttonColor}`;
41
- aStyle = null;
42
-
43
- // カスタムカラーの場合
44
- } else {
45
- aStyle = {
46
- backgroundColor: `${buttonColorCustom}`,
47
- border: `1px solid ${buttonColorCustom}`,
48
- color: `#fff`,
49
- };
50
- }
51
- // 塗りなし
52
- } else if (buttonType === '1') {
53
- // 規定カラーの場合
54
- if (buttonColorCustom == 'undefined' || buttonColorCustom == undefined || buttonColorCustom === null) {
55
- aClass = `${aClass} btn-outline-${buttonColor}`;
56
- aStyle = null;
57
- // カスタムカラーの場合
58
- } else {
59
- aStyle = {
60
- backgroundColor: 'transparent',
61
- border: `1px solid ${buttonColorCustom}`,
62
- color: `${buttonColorCustom}`,
63
- };
64
- }
65
- // テキストのみ
66
- } else if (buttonType === '2') {
67
- // 規定カラーの場合
68
- if (buttonColorCustom == 'undefined' || buttonColorCustom == undefined || buttonColorCustom === null) {
69
- aClass = `${aClass} btn-outline-${buttonColor}`;
70
- aStyle = null;
71
- // カスタムカラーの場合
72
- } else {
73
- aStyle = {
74
- color: `${buttonColorCustom}`,
75
- };
76
- }
77
- }
78
-
79
- aClass = `${aClass} btn-${buttonSize}`;
80
-
81
- if (buttonAlign === 'block') {
82
- aClass = `${aClass} btn-block`;
83
- }
84
-
85
-
86
-
87
- //過去バージョンをリカバリーした時にiconを正常に表示する
88
- if( fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)){
89
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`
90
- }
91
- if( fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)){
92
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`
93
- }
94
-
95
- if (fontAwesomeIconBefore) {
96
-
97
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace( / fas/g , "fas" )
98
-
99
- //add class and inline css
100
- const faIconFragmentBefore= fontAwesomeIconBefore.split(' ');
101
- faIconFragmentBefore[1] = ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `
102
- iconBefore = faIconFragmentBefore.join('')
103
- }
104
- if (fontAwesomeIconAfter) {
105
-
106
- fontAwesomeIconAfter = fontAwesomeIconAfter.replace( / fas/g , "fas" )
107
-
108
- //add class and inline css
109
- const faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
110
- faIconFragmentAfter[1] = ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `
111
- iconAfter = faIconFragmentAfter.join('')
112
- }
113
-
114
- return (
115
- <a
116
- href={ buttonUrl }
117
- style={ aStyle }
118
- className={ aClass }
119
- role={ 'button' }
120
- aria-pressed={ true }
121
- target={ buttonTarget ? '_blank' : null }
122
- >
123
- { parse(iconBefore) }
124
- { richText }
125
- { parse(iconAfter) }
126
- { /*サブキャプションが入力された時のみ表示*/ }
127
- { subCaption && <p className={ 'vk_button_link_subCaption' }>{ subCaption }</p> }
128
- </a>
129
- );
130
- }
131
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.60.0/save.js DELETED
@@ -1,58 +0,0 @@
1
- /**
2
- * Button block type
3
- *
4
- */
5
-
6
- import { VKBButton } from './component';
7
- import { RichText } from '@wordpress/block-editor';
8
-
9
- export default function save( { attributes, className } ) {
10
- const {
11
- content,
12
- subCaption,
13
- buttonUrl,
14
- buttonTarget,
15
- buttonSize,
16
- buttonType,
17
- buttonColor,
18
- buttonColorCustom,
19
- buttonAlign,
20
- fontAwesomeIconBefore,
21
- fontAwesomeIconAfter,
22
- } = attributes;
23
-
24
- let containerClass = '';
25
- if ( buttonColorCustom && 'undefined' !== buttonColorCustom ) {
26
- containerClass = `vk_button vk_button-color-custom vk_button-align-${ buttonAlign }`;
27
- } else {
28
- containerClass = `vk_button vk_button-align-${ buttonAlign }`;
29
- }
30
-
31
- if ( className ) {
32
- containerClass = className + ' ' + containerClass;
33
- }
34
-
35
- return (
36
- <div className={ containerClass }>
37
- <VKBButton
38
- lbColorCustom={ buttonColorCustom }
39
- lbColor={ buttonColor }
40
- lbType={ buttonType }
41
- lbAlign={ buttonAlign }
42
- lbSize={ buttonSize }
43
- lbUrl={ buttonUrl }
44
- lbTarget={ buttonTarget }
45
- lbFontAwesomeIconBefore={ fontAwesomeIconBefore }
46
- lbFontAwesomeIconAfter={ fontAwesomeIconAfter }
47
- lbsubCaption={ subCaption }
48
- lbRichtext={
49
- <RichText.Content
50
- tagName={ 'span' }
51
- className={ 'vk_button_link_txt' }
52
- value={ content }
53
- />
54
- }
55
- />
56
- </div>
57
- );
58
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.60.1/component.js DELETED
@@ -1,143 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
-
4
- export class VKBButton extends Component {
5
- render() {
6
- const buttonColorCustom = this.props.lbColorCustom;
7
- const buttonColor = this.props.lbColor;
8
- const buttonType = this.props.lbType;
9
- const buttonAlign = this.props.lbAlign;
10
- const buttonSize = this.props.lbSize;
11
- const buttonUrl = this.props.lbUrl;
12
- const buttonTarget = this.props.lbTarget;
13
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
14
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
15
- const richText = this.props.lbRichtext;
16
- const subCaption = this.props.lbsubCaption;
17
- let aClass = '';
18
- let aStyle = {};
19
- let iconBefore = '';
20
- let iconAfter = '';
21
-
22
- aStyle = null;
23
- aClass = `vk_button_link`;
24
-
25
- if (buttonType === '0' || buttonType === null || buttonType === '1') {
26
- aClass = `${aClass} btn`;
27
- } else {
28
- aClass = `${aClass} vk_button_link-type-text`;
29
- }
30
-
31
- // 塗り
32
- if (buttonType === '0' || buttonType === null) {
33
- // 規定カラーの場合
34
- if (
35
- buttonColorCustom === 'undefined' ||
36
- buttonColorCustom === undefined ||
37
- buttonColorCustom === null
38
- ) {
39
- aClass = `${aClass} btn-${buttonColor}`;
40
- aStyle = null;
41
-
42
- // カスタムカラーの場合
43
- } else {
44
- aStyle = {
45
- backgroundColor: `${buttonColorCustom}`,
46
- border: `1px solid ${buttonColorCustom}`,
47
- color: `#fff`,
48
- };
49
- }
50
- // 塗りなし
51
- } else if (buttonType === '1') {
52
- // 規定カラーの場合
53
- if (
54
- buttonColorCustom === 'undefined' ||
55
- buttonColorCustom === undefined ||
56
- buttonColorCustom === null
57
- ) {
58
- aClass = `${aClass} btn-outline-${buttonColor}`;
59
- aStyle = null;
60
- // カスタムカラーの場合
61
- } else {
62
- aStyle = {
63
- backgroundColor: 'transparent',
64
- border: `1px solid ${buttonColorCustom}`,
65
- color: `${buttonColorCustom}`,
66
- };
67
- }
68
- // テキストのみ
69
- } else if (buttonType === '2') {
70
- // 規定カラーの場合
71
- if (
72
- buttonColorCustom === 'undefined' ||
73
- buttonColorCustom === undefined ||
74
- buttonColorCustom === null
75
- ) {
76
- aClass = `${aClass} btn-outline-${buttonColor}`;
77
- aStyle = null;
78
- // カスタムカラーの場合
79
- } else {
80
- aStyle = {
81
- color: `${buttonColorCustom}`,
82
- };
83
- }
84
- }
85
-
86
- aClass = `${aClass} btn-${buttonSize}`;
87
-
88
- if (buttonAlign === 'block') {
89
- aClass = `${aClass} btn-block`;
90
- }
91
-
92
- //過去バージョンをリカバリーした時にiconを正常に表示する
93
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
94
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
95
- }
96
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
97
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
98
- }
99
-
100
- if (fontAwesomeIconBefore) {
101
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace(
102
- / fas/g,
103
- 'fas'
104
- );
105
-
106
- //add class and inline css
107
- const faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
108
- faIconFragmentBefore[1] =
109
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
110
- iconBefore = faIconFragmentBefore.join('');
111
- }
112
- if (fontAwesomeIconAfter) {
113
- fontAwesomeIconAfter = fontAwesomeIconAfter.replace(/ fas/g, 'fas');
114
-
115
- //add class and inline css
116
- const faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
117
- faIconFragmentAfter[1] =
118
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
119
- iconAfter = faIconFragmentAfter.join('');
120
- }
121
-
122
- return (
123
- /* eslint react/jsx-no-target-blank: 0 */
124
- <a
125
- href={buttonUrl}
126
- style={aStyle}
127
- className={aClass}
128
- role={'button'}
129
- aria-pressed={true}
130
- target={buttonTarget ? '_blank' : null}
131
- rel={"noopener"}
132
- >
133
- {parse(iconBefore)}
134
- {richText}
135
- {parse(iconAfter)}
136
- {/*サブキャプションが入力された時のみ表示*/}
137
- {subCaption && (
138
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
139
- )}
140
- </a>
141
- );
142
- }
143
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/0.60.1/save.js DELETED
@@ -1,53 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes, className }) {
5
- const {
6
- content,
7
- subCaption,
8
- buttonUrl,
9
- buttonTarget,
10
- buttonSize,
11
- buttonType,
12
- buttonColor,
13
- buttonColorCustom,
14
- buttonAlign,
15
- fontAwesomeIconBefore,
16
- fontAwesomeIconAfter,
17
- } = attributes;
18
-
19
- let containerClass = '';
20
- if (buttonColorCustom && 'undefined' !== buttonColorCustom) {
21
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
22
- } else {
23
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
24
- }
25
-
26
- if (className) {
27
- containerClass = className + ' ' + containerClass;
28
- }
29
-
30
- return (
31
- <div className={containerClass}>
32
- <VKBButton
33
- lbColorCustom={buttonColorCustom}
34
- lbColor={buttonColor}
35
- lbType={buttonType}
36
- lbAlign={buttonAlign}
37
- lbSize={buttonSize}
38
- lbUrl={buttonUrl}
39
- lbTarget={buttonTarget}
40
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
41
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
42
- lbsubCaption={subCaption}
43
- lbRichtext={
44
- <RichText.Content
45
- tagName={'span'}
46
- className={'vk_button_link_txt'}
47
- value={content}
48
- />
49
- }
50
- />
51
- </div>
52
- );
53
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.16.2/component.js DELETED
@@ -1,143 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
-
4
- export class VKBButton extends Component {
5
- render() {
6
- const buttonColorCustom = this.props.lbColorCustom;
7
- const buttonColor = this.props.lbColor;
8
- const buttonType = this.props.lbType;
9
- const buttonAlign = this.props.lbAlign;
10
- const buttonSize = this.props.lbSize;
11
- const buttonUrl = this.props.lbUrl;
12
- const buttonTarget = this.props.lbTarget;
13
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
14
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
15
- const richText = this.props.lbRichtext;
16
- const subCaption = this.props.lbsubCaption;
17
- let aClass = '';
18
- let aStyle = {};
19
- let iconBefore = '';
20
- let iconAfter = '';
21
-
22
- aStyle = null;
23
- aClass = `vk_button_link`;
24
-
25
- if (buttonType === '0' || buttonType === null || buttonType === '1') {
26
- aClass = `${aClass} btn`;
27
- } else {
28
- aClass = `${aClass} vk_button_link-type-text`;
29
- }
30
-
31
- // 塗り
32
- if (buttonType === '0' || buttonType === null) {
33
- // 規定カラーの場合
34
- if (
35
- buttonColorCustom === 'undefined' ||
36
- buttonColorCustom === undefined ||
37
- buttonColorCustom === null
38
- ) {
39
- aClass = `${aClass} btn-${buttonColor}`;
40
- aStyle = null;
41
-
42
- // カスタムカラーの場合
43
- } else {
44
- aStyle = {
45
- backgroundColor: `${buttonColorCustom}`,
46
- border: `1px solid ${buttonColorCustom}`,
47
- color: `#fff`,
48
- };
49
- }
50
- // 塗りなし
51
- } else if (buttonType === '1') {
52
- // 規定カラーの場合
53
- if (
54
- buttonColorCustom === 'undefined' ||
55
- buttonColorCustom === undefined ||
56
- buttonColorCustom === null
57
- ) {
58
- aClass = `${aClass} btn-outline-${buttonColor}`;
59
- aStyle = null;
60
- // カスタムカラーの場合
61
- } else {
62
- aStyle = {
63
- backgroundColor: 'transparent',
64
- border: `1px solid ${buttonColorCustom}`,
65
- color: `${buttonColorCustom}`,
66
- };
67
- }
68
- // テキストのみ
69
- } else if (buttonType === '2') {
70
- // 規定カラーの場合
71
- if (
72
- buttonColorCustom === 'undefined' ||
73
- buttonColorCustom === undefined ||
74
- buttonColorCustom === null
75
- ) {
76
- aClass = `${aClass} btn-outline-${buttonColor}`;
77
- aStyle = null;
78
- // カスタムカラーの場合
79
- } else {
80
- aStyle = {
81
- color: `${buttonColorCustom}`,
82
- };
83
- }
84
- }
85
-
86
- aClass = `${aClass} btn-${buttonSize}`;
87
-
88
- if (buttonAlign === 'block') {
89
- aClass = `${aClass} btn-block`;
90
- }
91
-
92
- //過去バージョンをリカバリーした時にiconを正常に表示する
93
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
94
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
95
- }
96
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
97
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
98
- }
99
-
100
- if (fontAwesomeIconBefore) {
101
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace(
102
- / fas/g,
103
- 'fas'
104
- );
105
-
106
- //add class and inline css
107
- const faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
108
- faIconFragmentBefore[1] =
109
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
110
- iconBefore = faIconFragmentBefore.join('');
111
- }
112
- if (fontAwesomeIconAfter) {
113
- fontAwesomeIconAfter = fontAwesomeIconAfter.replace(/ fas/g, 'fas');
114
-
115
- //add class and inline css
116
- const faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
117
- faIconFragmentAfter[1] =
118
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
119
- iconAfter = faIconFragmentAfter.join('');
120
- }
121
-
122
- return (
123
- /* eslint react/jsx-no-target-blank: 0 */
124
- <a
125
- href={buttonUrl}
126
- style={aStyle}
127
- className={aClass}
128
- role={'button'}
129
- aria-pressed={true}
130
- target={buttonTarget ? '_blank' : null}
131
- rel={'noopener'}
132
- >
133
- {parse(iconBefore)}
134
- {richText}
135
- {parse(iconAfter)}
136
- {/*サブキャプションが入力された時のみ表示*/}
137
- {subCaption && (
138
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
139
- )}
140
- </a>
141
- );
142
- }
143
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.16.2/save.js DELETED
@@ -1,53 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText, useBlockProps } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes }) {
5
- const {
6
- content,
7
- subCaption,
8
- buttonUrl,
9
- buttonTarget,
10
- buttonSize,
11
- buttonType,
12
- buttonColor,
13
- buttonColorCustom,
14
- buttonAlign,
15
- fontAwesomeIconBefore,
16
- fontAwesomeIconAfter,
17
- } = attributes;
18
-
19
- let containerClass = '';
20
- if (buttonColorCustom && 'undefined' !== buttonColorCustom) {
21
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
22
- } else {
23
- containerClass = `vk_button vk_button-align-${buttonAlign}`;
24
- }
25
-
26
- const blockProps = useBlockProps.save({
27
- className: containerClass,
28
- });
29
-
30
- return (
31
- <div {...blockProps}>
32
- <VKBButton
33
- lbColorCustom={buttonColorCustom}
34
- lbColor={buttonColor}
35
- lbType={buttonType}
36
- lbAlign={buttonAlign}
37
- lbSize={buttonSize}
38
- lbUrl={buttonUrl}
39
- lbTarget={buttonTarget}
40
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
41
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
42
- lbsubCaption={subCaption}
43
- lbRichtext={
44
- <RichText.Content
45
- tagName={'span'}
46
- className={'vk_button_link_txt'}
47
- value={content}
48
- />
49
- }
50
- />
51
- </div>
52
- );
53
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.16.4/component.js DELETED
@@ -1,137 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export class VKBButton extends Component {
6
- render() {
7
- const buttonColorCustom = this.props.lbColorCustom;
8
- const buttonColor = this.props.lbColor;
9
- const buttonType = this.props.lbType;
10
- const buttonAlign = this.props.lbAlign;
11
- const buttonSize = this.props.lbSize;
12
- const buttonUrl = this.props.lbUrl;
13
- const buttonTarget = this.props.lbTarget;
14
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
15
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
16
- const richText = this.props.lbRichtext;
17
- const subCaption = this.props.lbsubCaption;
18
- let aClass = '';
19
- let aStyle = {};
20
- let iconBefore = '';
21
- let iconAfter = '';
22
-
23
- aStyle = null;
24
- aClass = `vk_button_link`;
25
-
26
- if (buttonType !== '0' && buttonType !== null && buttonType !== '1') {
27
- aClass += ` vk_button_link-type-text`;
28
- }
29
-
30
- // 塗り
31
- if (buttonType === '0' || buttonType === null) {
32
- // 規定カラーの場合
33
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
34
- aClass += ` vk_button_btn has-background has-vk-color-${buttonColor}-background-color`;
35
- } else {
36
- aClass += ` has-background`;
37
- // カスタムパレットカラーの場合
38
- if (!isHexColor(buttonColorCustom)) {
39
- aClass += ` vk_button_btn has-${buttonColorCustom}-background-color`;
40
- }
41
- // カスタムカラーの場合
42
- else {
43
- aClass += ` vk_button_btn`;
44
- }
45
- }
46
- // 塗りなし
47
- } else if (buttonType === '1') {
48
- // 規定カラーの場合
49
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
50
- aClass += ` vk_button_btn has-text-color has-vk-color-${buttonColor}-color is-style-outline`;
51
- } else {
52
- aClass += ` has-text-color`;
53
- // カスタムパレットカラーの場合
54
- if (!isHexColor(buttonColorCustom)) {
55
- aClass += ` vk_button_btn has-${buttonColorCustom}-color is-style-outline`;
56
- }
57
- // カスタムカラーの場合
58
- else {
59
- aClass += ` vk_button_btn`;
60
- }
61
- }
62
- // テキストのみ
63
- } else if (buttonType === '2') {
64
- // 規定カラーの場合
65
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
66
- aClass += ` has-text-color has-vk-color-${buttonColor}-color`;
67
- } else {
68
- aClass += ` has-text-color`;
69
- // カスタムパレットカラーの場合
70
- if (!isHexColor(buttonColorCustom)) {
71
- aClass += ` has-${buttonColorCustom}-color`;
72
- }
73
- // カスタムカラーの場合
74
- else {
75
- aClass += ``;
76
- }
77
- }
78
- }
79
-
80
- aClass = `${aClass} btn-${buttonSize}`;
81
-
82
- if (buttonAlign === 'block') {
83
- aClass = `${aClass} btn-block`;
84
- }
85
-
86
- //過去バージョンをリカバリーした時にiconを正常に表示する
87
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
88
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
89
- }
90
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
91
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
92
- }
93
-
94
- if (fontAwesomeIconBefore) {
95
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace(
96
- / fas/g,
97
- 'fas'
98
- );
99
-
100
- //add class and inline css
101
- const faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
102
- faIconFragmentBefore[1] =
103
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
104
- iconBefore = faIconFragmentBefore.join('');
105
- }
106
- if (fontAwesomeIconAfter) {
107
- fontAwesomeIconAfter = fontAwesomeIconAfter.replace(/ fas/g, 'fas');
108
-
109
- //add class and inline css
110
- const faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
111
- faIconFragmentAfter[1] =
112
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
113
- iconAfter = faIconFragmentAfter.join('');
114
- }
115
-
116
- return (
117
- /* eslint react/jsx-no-target-blank: 0 */
118
- <a
119
- href={buttonUrl}
120
- style={aStyle}
121
- className={aClass}
122
- role={'button'}
123
- aria-pressed={true}
124
- target={buttonTarget ? '_blank' : null}
125
- rel={'noopener'}
126
- >
127
- {parse(iconBefore)}
128
- {richText}
129
- {parse(iconAfter)}
130
- {/*サブキャプションが入力された時のみ表示*/}
131
- {subCaption && (
132
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
133
- )}
134
- </a>
135
- );
136
- }
137
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.16.4/save.js DELETED
@@ -1,57 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText, useBlockProps } from '@wordpress/block-editor';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export default function save(props) {
6
- const { attributes } = props;
7
- const {
8
- content,
9
- subCaption,
10
- buttonUrl,
11
- buttonTarget,
12
- buttonSize,
13
- buttonType,
14
- buttonColor,
15
- buttonColorCustom,
16
- buttonAlign,
17
- fontAwesomeIconBefore,
18
- fontAwesomeIconAfter,
19
- clientId,
20
- } = attributes;
21
-
22
- let containerClass = '';
23
- // カスタムカラーの場合
24
- if (buttonColorCustom !== undefined && isHexColor(buttonColorCustom)) {
25
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign} vk_button-${clientId}`;
26
- } else {
27
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
28
- }
29
-
30
- const blockProps = useBlockProps.save({
31
- className: containerClass,
32
- });
33
-
34
- return (
35
- <div {...blockProps}>
36
- <VKBButton
37
- lbColorCustom={buttonColorCustom}
38
- lbColor={buttonColor}
39
- lbType={buttonType}
40
- lbAlign={buttonAlign}
41
- lbSize={buttonSize}
42
- lbUrl={buttonUrl}
43
- lbTarget={buttonTarget}
44
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
45
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
46
- lbsubCaption={subCaption}
47
- lbRichtext={
48
- <RichText.Content
49
- tagName={'span'}
50
- className={'vk_button_link_txt'}
51
- value={content}
52
- />
53
- }
54
- />
55
- </div>
56
- );
57
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.18.1/component.js DELETED
@@ -1,121 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export class VKBButton extends Component {
6
- render() {
7
- const buttonColorCustom = this.props.lbColorCustom;
8
- const buttonColor = this.props.lbColor;
9
- const buttonType = this.props.lbType;
10
- const buttonAlign = this.props.lbAlign;
11
- const buttonSize = this.props.lbSize;
12
- const buttonUrl = this.props.lbUrl;
13
- const buttonTarget = this.props.lbTarget;
14
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
15
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
16
- const richText = this.props.lbRichtext;
17
- const subCaption = this.props.lbsubCaption;
18
- let aClass = '';
19
- let aStyle = {};
20
- let iconBefore = '';
21
- let iconAfter = '';
22
-
23
- aStyle = null;
24
- aClass = `vk_button_link`;
25
-
26
- // 塗り
27
- if (buttonType === '0' || buttonType === null) {
28
- // 規定カラーの場合
29
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
30
- aClass += ` btn has-background has-vk-color-${buttonColor}-background-color`;
31
- } else {
32
- aClass += ` btn has-background`;
33
- // カスタムパレットカラーの場合
34
- if (!isHexColor(buttonColorCustom)) {
35
- aClass += ` has-${buttonColorCustom}-background-color`;
36
- }
37
- }
38
- // 塗りなし
39
- } else if (buttonType === '1') {
40
- // 規定カラーの場合
41
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
42
- aClass += ` btn has-text-color is-style-outline has-vk-color-${buttonColor}-color`;
43
- } else {
44
- aClass += ` btn has-text-color is-style-outline`;
45
- // カスタムパレットカラーの場合
46
- if (!isHexColor(buttonColorCustom)) {
47
- aClass += ` has-${buttonColorCustom}-color`;
48
- }
49
- }
50
- // テキストのみ
51
- } else if (buttonType === '2') {
52
- // 規定カラーの場合
53
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
54
- aClass += ` has-text-color vk_button_link-type-text has-vk-color-${buttonColor}-color`;
55
- } else {
56
- aClass += ` has-text-color vk_button_link-type-text`;
57
- // カスタムパレットカラーの場合
58
- if (!isHexColor(buttonColorCustom)) {
59
- aClass += ` has-${buttonColorCustom}-color`;
60
- }
61
- }
62
- }
63
-
64
- aClass = `${aClass} btn-${buttonSize}`;
65
-
66
- if (buttonAlign === 'block') {
67
- aClass = `${aClass} btn-block`;
68
- }
69
-
70
- //過去バージョンをリカバリーした時にiconを正常に表示する
71
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
72
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
73
- }
74
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
75
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
76
- }
77
-
78
- if (fontAwesomeIconBefore) {
79
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace(
80
- / fas/g,
81
- 'fas'
82
- );
83
-
84
- //add class and inline css
85
- const faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
86
- faIconFragmentBefore[1] =
87
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
88
- iconBefore = faIconFragmentBefore.join('');
89
- }
90
- if (fontAwesomeIconAfter) {
91
- fontAwesomeIconAfter = fontAwesomeIconAfter.replace(/ fas/g, 'fas');
92
-
93
- //add class and inline css
94
- const faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
95
- faIconFragmentAfter[1] =
96
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
97
- iconAfter = faIconFragmentAfter.join('');
98
- }
99
-
100
- return (
101
- /* eslint react/jsx-no-target-blank: 0 */
102
- <a
103
- href={buttonUrl}
104
- style={aStyle}
105
- className={aClass}
106
- role={'button'}
107
- aria-pressed={true}
108
- target={buttonTarget ? '_blank' : null}
109
- rel={'noopener'}
110
- >
111
- {parse(iconBefore)}
112
- {richText}
113
- {parse(iconAfter)}
114
- {/*サブキャプションが入力された時のみ表示*/}
115
- {subCaption && (
116
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
117
- )}
118
- </a>
119
- );
120
- }
121
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.18.1/save.js DELETED
@@ -1,57 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText, useBlockProps } from '@wordpress/block-editor';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export default function save(props) {
6
- const { attributes } = props;
7
- const {
8
- content,
9
- subCaption,
10
- buttonUrl,
11
- buttonTarget,
12
- buttonSize,
13
- buttonType,
14
- buttonColor,
15
- buttonColorCustom,
16
- buttonAlign,
17
- fontAwesomeIconBefore,
18
- fontAwesomeIconAfter,
19
- clientId,
20
- } = attributes;
21
-
22
- let containerClass = '';
23
- // カスタムカラーの場合
24
- if (buttonColorCustom !== undefined && isHexColor(buttonColorCustom)) {
25
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign} vk_button-${clientId}`;
26
- } else {
27
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
28
- }
29
-
30
- const blockProps = useBlockProps.save({
31
- className: containerClass,
32
- });
33
-
34
- return (
35
- <div {...blockProps}>
36
- <VKBButton
37
- lbColorCustom={buttonColorCustom}
38
- lbColor={buttonColor}
39
- lbType={buttonType}
40
- lbAlign={buttonAlign}
41
- lbSize={buttonSize}
42
- lbUrl={buttonUrl}
43
- lbTarget={buttonTarget}
44
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
45
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
46
- lbsubCaption={subCaption}
47
- lbRichtext={
48
- <RichText.Content
49
- tagName={'span'}
50
- className={'vk_button_link_txt'}
51
- value={content}
52
- />
53
- }
54
- />
55
- </div>
56
- );
57
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.18.6/component.js DELETED
@@ -1,121 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export class VKBButton extends Component {
6
- render() {
7
- const buttonColorCustom = this.props.lbColorCustom;
8
- const buttonColor = this.props.lbColor;
9
- const buttonType = this.props.lbType;
10
- const buttonAlign = this.props.lbAlign;
11
- const buttonSize = this.props.lbSize;
12
- const buttonUrl = this.props.lbUrl;
13
- const buttonTarget = this.props.lbTarget;
14
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
15
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
16
- const richText = this.props.lbRichtext;
17
- const subCaption = this.props.lbsubCaption;
18
- let aClass = '';
19
- let aStyle = {};
20
- let iconBefore = '';
21
- let iconAfter = '';
22
-
23
- aStyle = null;
24
- aClass = `vk_button_link`;
25
-
26
- // 塗り
27
- if (buttonType === '0' || buttonType === null) {
28
- // 規定カラーの場合
29
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
30
- aClass += ` btn has-background has-vk-color-${buttonColor}-background-color`;
31
- } else {
32
- aClass += ` btn has-background`;
33
- // カスタムパレットカラーの場合
34
- if (!isHexColor(buttonColorCustom)) {
35
- aClass += ` has-${buttonColorCustom}-background-color`;
36
- }
37
- }
38
- // 塗りなし
39
- } else if (buttonType === '1') {
40
- // 規定カラーの場合
41
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
42
- aClass += ` btn has-text-color is-style-outline has-vk-color-${buttonColor}-color`;
43
- } else {
44
- aClass += ` btn has-text-color is-style-outline`;
45
- // カスタムパレットカラーの場合
46
- if (!isHexColor(buttonColorCustom)) {
47
- aClass += ` has-${buttonColorCustom}-color`;
48
- }
49
- }
50
- // テキストのみ
51
- } else if (buttonType === '2') {
52
- // 規定カラーの場合
53
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
54
- aClass += ` has-text-color vk_button_link-type-text has-vk-color-${buttonColor}-color`;
55
- } else {
56
- aClass += ` has-text-color vk_button_link-type-text`;
57
- // カスタムパレットカラーの場合
58
- if (!isHexColor(buttonColorCustom)) {
59
- aClass += ` has-${buttonColorCustom}-color`;
60
- }
61
- }
62
- }
63
-
64
- aClass = `${aClass} btn-${buttonSize}`;
65
-
66
- if (buttonAlign === 'block') {
67
- aClass = `${aClass} btn-block`;
68
- }
69
-
70
- //過去バージョンをリカバリーした時にiconを正常に表示する
71
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
72
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
73
- }
74
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
75
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
76
- }
77
-
78
- if (fontAwesomeIconBefore) {
79
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace(
80
- / fas/g,
81
- 'fas'
82
- );
83
-
84
- //add class and inline css
85
- const faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
86
- faIconFragmentBefore[1] =
87
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
88
- iconBefore = faIconFragmentBefore.join('');
89
- }
90
- if (fontAwesomeIconAfter) {
91
- fontAwesomeIconAfter = fontAwesomeIconAfter.replace(/ fas/g, 'fas');
92
-
93
- //add class and inline css
94
- const faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
95
- faIconFragmentAfter[1] =
96
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
97
- iconAfter = faIconFragmentAfter.join('');
98
- }
99
-
100
- return (
101
- /* eslint react/jsx-no-target-blank: 0 */
102
- <a
103
- href={buttonUrl}
104
- style={aStyle}
105
- className={aClass}
106
- role={'button'}
107
- aria-pressed={true}
108
- target={buttonTarget ? '_blank' : null}
109
- rel={'noopener'}
110
- >
111
- {parse(iconBefore)}
112
- {richText}
113
- {parse(iconAfter)}
114
- {/*サブキャプションが入力された時のみ表示*/}
115
- {subCaption && (
116
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
117
- )}
118
- </a>
119
- );
120
- }
121
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.18.6/save.js DELETED
@@ -1,57 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText, useBlockProps } from '@wordpress/block-editor';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export default function save(props) {
6
- const { attributes } = props;
7
- const {
8
- content,
9
- subCaption,
10
- buttonUrl,
11
- buttonTarget,
12
- buttonSize,
13
- buttonType,
14
- buttonColor,
15
- buttonColorCustom,
16
- buttonAlign,
17
- fontAwesomeIconBefore,
18
- fontAwesomeIconAfter,
19
- blockId,
20
- } = attributes;
21
-
22
- let containerClass = '';
23
- // カスタムカラーの場合
24
- if (buttonColorCustom !== undefined && isHexColor(buttonColorCustom)) {
25
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign} vk_button-${blockId}`;
26
- } else {
27
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
28
- }
29
-
30
- const blockProps = useBlockProps.save({
31
- className: containerClass,
32
- });
33
-
34
- return (
35
- <div {...blockProps}>
36
- <VKBButton
37
- lbColorCustom={buttonColorCustom}
38
- lbColor={buttonColor}
39
- lbType={buttonType}
40
- lbAlign={buttonAlign}
41
- lbSize={buttonSize}
42
- lbUrl={buttonUrl}
43
- lbTarget={buttonTarget}
44
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
45
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
46
- lbsubCaption={subCaption}
47
- lbRichtext={
48
- <RichText.Content
49
- tagName={'span'}
50
- className={'vk_button_link_txt'}
51
- value={content}
52
- />
53
- }
54
- />
55
- </div>
56
- );
57
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.29.2/component.js DELETED
@@ -1,134 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export class VKBButton extends Component {
6
- render() {
7
- const buttonTextColorCustom = this.props.lbTextColorCustom;
8
- const buttonColorCustom = this.props.lbColorCustom;
9
- const buttonColor = this.props.lbColor;
10
- const buttonType = this.props.lbType;
11
- const buttonAlign = this.props.lbAlign;
12
- const buttonSize = this.props.lbSize;
13
- const buttonUrl = this.props.lbUrl;
14
- const buttonTarget = this.props.lbTarget;
15
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
16
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
17
- const richText = this.props.lbRichtext;
18
- const subCaption = this.props.lbsubCaption;
19
- let aClass = '';
20
- let aStyle = {};
21
- let iconBefore = '';
22
- let iconAfter = '';
23
-
24
- aStyle = null;
25
- aClass = `vk_button_link`;
26
-
27
- // 塗り
28
- if (buttonType === '0' || buttonType === null) {
29
- // 規定カラーの場合
30
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
31
- aClass += ` btn has-background has-vk-color-${buttonColor}-background-color`;
32
- } else {
33
- aClass += ` btn has-background`;
34
- // カスタムパレットカラーの場合
35
- if (!isHexColor(buttonColorCustom)) {
36
- aClass += ` has-${buttonColorCustom}-background-color`;
37
- }
38
- }
39
-
40
- // 文字色
41
- if (
42
- buttonColor === 'custom' &&
43
- buttonTextColorCustom !== undefined
44
- ) {
45
- aClass += ` btn has-text-color`;
46
- // カスタムパレットカラーの場合
47
- if (!isHexColor(buttonTextColorCustom)) {
48
- aClass += ` has-${buttonTextColorCustom}-color`;
49
- }
50
- }
51
- // 塗りなし
52
- } else if (buttonType === '1') {
53
- // 規定カラーの場合
54
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
55
- aClass += ` btn has-text-color is-style-outline has-vk-color-${buttonColor}-color`;
56
- } else {
57
- aClass += ` btn has-text-color is-style-outline`;
58
- // カスタムパレットカラーの場合
59
- if (!isHexColor(buttonColorCustom)) {
60
- aClass += ` has-${buttonColorCustom}-color`;
61
- }
62
- }
63
- // テキストのみ
64
- } else if (buttonType === '2') {
65
- // 規定カラーの場合
66
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
67
- aClass += ` has-text-color vk_button_link-type-text has-vk-color-${buttonColor}-color`;
68
- } else {
69
- aClass += ` has-text-color vk_button_link-type-text`;
70
- // カスタムパレットカラーの場合
71
- if (!isHexColor(buttonColorCustom)) {
72
- aClass += ` has-${buttonColorCustom}-color`;
73
- }
74
- }
75
- }
76
-
77
- aClass = `${aClass} btn-${buttonSize}`;
78
-
79
- if (buttonAlign === 'block') {
80
- aClass = `${aClass} btn-block`;
81
- }
82
-
83
- //過去バージョンをリカバリーした時にiconを正常に表示する
84
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
85
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
86
- }
87
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
88
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
89
- }
90
-
91
- if (fontAwesomeIconBefore) {
92
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace(
93
- / fas/g,
94
- 'fas'
95
- );
96
-
97
- //add class and inline css
98
- const faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
99
- faIconFragmentBefore[1] =
100
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
101
- iconBefore = faIconFragmentBefore.join('');
102
- }
103
- if (fontAwesomeIconAfter) {
104
- fontAwesomeIconAfter = fontAwesomeIconAfter.replace(/ fas/g, 'fas');
105
-
106
- //add class and inline css
107
- const faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
108
- faIconFragmentAfter[1] =
109
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
110
- iconAfter = faIconFragmentAfter.join('');
111
- }
112
-
113
- return (
114
- /* eslint react/jsx-no-target-blank: 0 */
115
- <a
116
- href={buttonUrl}
117
- style={aStyle}
118
- className={aClass}
119
- role={'button'}
120
- aria-pressed={true}
121
- target={buttonTarget ? '_blank' : null}
122
- rel={'noopener'}
123
- >
124
- {parse(iconBefore)}
125
- {richText}
126
- {parse(iconAfter)}
127
- {/*サブキャプションが入力された時のみ表示*/}
128
- {subCaption && (
129
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
130
- )}
131
- </a>
132
- );
133
- }
134
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.29.2/save.js DELETED
@@ -1,63 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText, useBlockProps } from '@wordpress/block-editor';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export default function save(props) {
6
- const { attributes } = props;
7
- const {
8
- content,
9
- subCaption,
10
- buttonUrl,
11
- buttonTarget,
12
- buttonSize,
13
- buttonType,
14
- buttonColor,
15
- buttonTextColorCustom,
16
- buttonColorCustom,
17
- buttonAlign,
18
- fontAwesomeIconBefore,
19
- fontAwesomeIconAfter,
20
- blockId,
21
- } = attributes;
22
-
23
- let containerClass = '';
24
- // カスタムカラーの場合
25
- if (
26
- (buttonTextColorCustom !== undefined &&
27
- isHexColor(buttonTextColorCustom)) ||
28
- (buttonColorCustom !== undefined && isHexColor(buttonColorCustom))
29
- ) {
30
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign} vk_button-${blockId}`;
31
- } else {
32
- containerClass = `vk_button vk_button-color-custom vk_button-align-${buttonAlign}`;
33
- }
34
-
35
- const blockProps = useBlockProps.save({
36
- className: containerClass,
37
- });
38
-
39
- return (
40
- <div {...blockProps}>
41
- <VKBButton
42
- lbTextColorCustom={buttonTextColorCustom}
43
- lbColorCustom={buttonColorCustom}
44
- lbColor={buttonColor}
45
- lbType={buttonType}
46
- lbAlign={buttonAlign}
47
- lbSize={buttonSize}
48
- lbUrl={buttonUrl}
49
- lbTarget={buttonTarget}
50
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
51
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
52
- lbsubCaption={subCaption}
53
- lbRichtext={
54
- <RichText.Content
55
- tagName={'span'}
56
- className={'vk_button_link_txt'}
57
- value={content}
58
- />
59
- }
60
- />
61
- </div>
62
- );
63
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.31.0/component.js DELETED
@@ -1,134 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export class VKBButton extends Component {
6
- render() {
7
- const buttonTextColorCustom = this.props.lbTextColorCustom;
8
- const buttonColorCustom = this.props.lbColorCustom;
9
- const buttonColor = this.props.lbColor;
10
- const buttonType = this.props.lbType;
11
- const buttonAlign = this.props.lbAlign;
12
- const buttonSize = this.props.lbSize;
13
- const buttonUrl = this.props.lbUrl;
14
- const buttonTarget = this.props.lbTarget;
15
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
16
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
17
- const richText = this.props.lbRichtext;
18
- const subCaption = this.props.lbsubCaption;
19
- let aClass = '';
20
- let aStyle = {};
21
- let iconBefore = '';
22
- let iconAfter = '';
23
-
24
- aStyle = null;
25
- aClass = `vk_button_link`;
26
-
27
- // 塗り
28
- if (buttonType === '0' || buttonType === null) {
29
- // 規定カラーの場合
30
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
31
- aClass += ` btn has-background has-vk-color-${buttonColor}-background-color`;
32
- } else {
33
- aClass += ` btn has-background`;
34
- // カスタムパレットカラーの場合
35
- if (!isHexColor(buttonColorCustom)) {
36
- aClass += ` has-${buttonColorCustom}-background-color`;
37
- }
38
- }
39
-
40
- // 文字色
41
- if (
42
- buttonColor === 'custom' &&
43
- buttonTextColorCustom !== undefined
44
- ) {
45
- aClass += ` btn has-text-color`;
46
- // カスタムパレットカラーの場合
47
- if (!isHexColor(buttonTextColorCustom)) {
48
- aClass += ` has-${buttonTextColorCustom}-color`;
49
- }
50
- }
51
- // 塗りなし
52
- } else if (buttonType === '1') {
53
- // 規定カラーの場合
54
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
55
- aClass += ` btn has-text-color is-style-outline has-vk-color-${buttonColor}-color`;
56
- } else {
57
- aClass += ` btn has-text-color is-style-outline`;
58
- // カスタムパレットカラーの場合
59
- if (!isHexColor(buttonColorCustom)) {
60
- aClass += ` has-${buttonColorCustom}-color`;
61
- }
62
- }
63
- // テキストのみ
64
- } else if (buttonType === '2') {
65
- // 規定カラーの場合
66
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
67
- aClass += ` has-text-color vk_button_link-type-text has-vk-color-${buttonColor}-color`;
68
- } else {
69
- aClass += ` has-text-color vk_button_link-type-text`;
70
- // カスタムパレットカラーの場合
71
- if (!isHexColor(buttonColorCustom)) {
72
- aClass += ` has-${buttonColorCustom}-color`;
73
- }
74
- }
75
- }
76
-
77
- aClass = `${aClass} btn-${buttonSize}`;
78
-
79
- if (buttonAlign === 'block') {
80
- aClass = `${aClass} btn-block`;
81
- }
82
-
83
- //過去バージョンをリカバリーした時にiconを正常に表示する
84
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
85
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
86
- }
87
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
88
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
89
- }
90
-
91
- if (fontAwesomeIconBefore) {
92
- fontAwesomeIconBefore = fontAwesomeIconBefore.replace(
93
- / fas/g,
94
- 'fas'
95
- );
96
-
97
- //add class and inline css
98
- const faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
99
- faIconFragmentBefore[1] =
100
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
101
- iconBefore = faIconFragmentBefore.join('');
102
- }
103
- if (fontAwesomeIconAfter) {
104
- fontAwesomeIconAfter = fontAwesomeIconAfter.replace(/ fas/g, 'fas');
105
-
106
- //add class and inline css
107
- const faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
108
- faIconFragmentAfter[1] =
109
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
110
- iconAfter = faIconFragmentAfter.join('');
111
- }
112
-
113
- return (
114
- /* eslint react/jsx-no-target-blank: 0 */
115
- <a
116
- href={buttonUrl}
117
- style={aStyle}
118
- className={aClass}
119
- role={'button'}
120
- aria-pressed={true}
121
- target={buttonTarget ? '_blank' : null}
122
- rel={'noopener'}
123
- >
124
- {parse(iconBefore)}
125
- {richText}
126
- {parse(iconAfter)}
127
- {/*サブキャプションが入力された時のみ表示*/}
128
- {subCaption && (
129
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
130
- )}
131
- </a>
132
- );
133
- }
134
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.31.0/save.js DELETED
@@ -1,71 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText, useBlockProps } from '@wordpress/block-editor';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export default function save(props) {
6
- const { attributes } = props;
7
- const {
8
- content,
9
- subCaption,
10
- buttonUrl,
11
- buttonTarget,
12
- buttonSize,
13
- buttonType,
14
- buttonColor,
15
- buttonTextColorCustom,
16
- buttonColorCustom,
17
- buttonAlign,
18
- buttonWidth,
19
- fontAwesomeIconBefore,
20
- fontAwesomeIconAfter,
21
- blockId,
22
- } = attributes;
23
-
24
- let containerClass = '';
25
- // カスタムカラーの場合
26
- if (
27
- (buttonTextColorCustom !== undefined &&
28
- isHexColor(buttonTextColorCustom)) ||
29
- (buttonColorCustom !== undefined && isHexColor(buttonColorCustom))
30
- ) {
31
- containerClass = `vk_button vk_button-color-custom vk_button-${blockId}`;
32
- } else {
33
- containerClass = `vk_button vk_button-color-custom`;
34
- }
35
-
36
- if (buttonWidth) {
37
- // 横並びボタンで幅が指定されている
38
- containerClass += ` vk_button-width-${buttonWidth}`;
39
- } else {
40
- containerClass += ` vk_button-align-${buttonAlign}`;
41
- }
42
-
43
- const blockProps = useBlockProps.save({
44
- className: containerClass,
45
- });
46
-
47
- return (
48
- <div {...blockProps}>
49
- <VKBButton
50
- lbTextColorCustom={buttonTextColorCustom}
51
- lbColorCustom={buttonColorCustom}
52
- lbColor={buttonColor}
53
- lbType={buttonType}
54
- lbAlign={buttonAlign}
55
- lbSize={buttonSize}
56
- lbUrl={buttonUrl}
57
- lbTarget={buttonTarget}
58
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
59
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
60
- lbsubCaption={subCaption}
61
- lbRichtext={
62
- <RichText.Content
63
- tagName={'span'}
64
- className={'vk_button_link_txt'}
65
- value={content}
66
- />
67
- }
68
- />
69
- </div>
70
- );
71
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.35.0/component.js DELETED
@@ -1,125 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export class VKBButton extends Component {
6
- render() {
7
- const buttonTextColorCustom = this.props.lbTextColorCustom;
8
- const buttonColorCustom = this.props.lbColorCustom;
9
- const buttonColor = this.props.lbColor;
10
- const buttonType = this.props.lbType;
11
- const buttonAlign = this.props.lbAlign;
12
- const buttonSize = this.props.lbSize;
13
- const buttonUrl = this.props.lbUrl;
14
- const buttonTarget = this.props.lbTarget;
15
- let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
16
- let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
17
- const richText = this.props.lbRichtext;
18
- const subCaption = this.props.lbsubCaption;
19
- let aClass = '';
20
- let aStyle = {};
21
- let iconBefore = '';
22
- let iconAfter = '';
23
-
24
- aStyle = null;
25
- aClass = `vk_button_link`;
26
-
27
- // 塗り
28
- if (buttonType === '0' || buttonType === null) {
29
- // 規定カラーの場合
30
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
31
- aClass += ` btn has-background has-vk-color-${buttonColor}-background-color`;
32
- } else {
33
- aClass += ` btn has-background`;
34
- // カスタムパレットカラーの場合
35
- if (!isHexColor(buttonColorCustom)) {
36
- aClass += ` has-${buttonColorCustom}-background-color`;
37
- }
38
- }
39
-
40
- // 文字色
41
- if (
42
- buttonColor === 'custom' &&
43
- buttonTextColorCustom !== undefined
44
- ) {
45
- aClass += ` btn has-text-color`;
46
- // カスタムパレットカラーの場合
47
- if (!isHexColor(buttonTextColorCustom)) {
48
- aClass += ` has-${buttonTextColorCustom}-color`;
49
- }
50
- }
51
- // 塗りなし
52
- } else if (buttonType === '1') {
53
- // 規定カラーの場合
54
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
55
- aClass += ` btn has-text-color is-style-outline has-vk-color-${buttonColor}-color`;
56
- } else {
57
- aClass += ` btn has-text-color is-style-outline`;
58
- // カスタムパレットカラーの場合
59
- if (!isHexColor(buttonColorCustom)) {
60
- aClass += ` has-${buttonColorCustom}-color`;
61
- }
62
- }
63
- // テキストのみ
64
- } else if (buttonType === '2') {
65
- // 規定カラーの場合
66
- if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
67
- aClass += ` has-text-color vk_button_link-type-text has-vk-color-${buttonColor}-color`;
68
- } else {
69
- aClass += ` has-text-color vk_button_link-type-text`;
70
- // カスタムパレットカラーの場合
71
- if (!isHexColor(buttonColorCustom)) {
72
- aClass += ` has-${buttonColorCustom}-color`;
73
- }
74
- }
75
- }
76
-
77
- aClass = `${aClass} btn-${buttonSize}`;
78
-
79
- if (buttonAlign === 'block') {
80
- aClass = `${aClass} btn-block`;
81
- }
82
-
83
- //過去バージョンをリカバリーした時にiconを正常に表示する
84
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
85
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
86
- }
87
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
88
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
89
- }
90
-
91
- if (fontAwesomeIconBefore) {
92
- let fontAwesomeIconBeforeClassName =
93
- fontAwesomeIconBefore.match(/class="(.*?)"/)[1];
94
- fontAwesomeIconBeforeClassName += ` vk_button_link_before`;
95
- iconBefore = `<i class="${fontAwesomeIconBeforeClassName}"></i>`;
96
- }
97
- if (fontAwesomeIconAfter) {
98
- let fontAwesomeIconAfterClassName =
99
- fontAwesomeIconAfter.match(/class="(.*?)"/)[1];
100
- fontAwesomeIconAfterClassName += ` vk_button_link_after`;
101
- iconAfter = `<i class="${fontAwesomeIconAfterClassName}"></i>`;
102
- }
103
-
104
- return (
105
- /* eslint react/jsx-no-target-blank: 0 */
106
- <a
107
- href={buttonUrl}
108
- style={aStyle}
109
- className={aClass}
110
- role={'button'}
111
- aria-pressed={true}
112
- target={buttonTarget ? '_blank' : null}
113
- rel={'noopener'}
114
- >
115
- {parse(iconBefore)}
116
- {richText}
117
- {parse(iconAfter)}
118
- {/*サブキャプションが入力された時のみ表示*/}
119
- {subCaption && (
120
- <p className={'vk_button_link_subCaption'}>{subCaption}</p>
121
- )}
122
- </a>
123
- );
124
- }
125
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/1.35.0/save.js DELETED
@@ -1,81 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText, useBlockProps } from '@wordpress/block-editor';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export default function save(props) {
6
- const { attributes } = props;
7
- const {
8
- content,
9
- subCaption,
10
- buttonUrl,
11
- buttonTarget,
12
- buttonSize,
13
- buttonType,
14
- buttonColor,
15
- buttonTextColorCustom,
16
- buttonColorCustom,
17
- buttonAlign,
18
- buttonWidthMobile,
19
- buttonWidthTablet,
20
- buttonWidth,
21
- fontAwesomeIconBefore,
22
- fontAwesomeIconAfter,
23
- blockId,
24
- } = attributes;
25
-
26
- let containerClass = '';
27
- // カスタムカラーの場合
28
- if (
29
- (buttonTextColorCustom !== undefined &&
30
- isHexColor(buttonTextColorCustom)) ||
31
- (buttonColorCustom !== undefined && isHexColor(buttonColorCustom))
32
- ) {
33
- containerClass = `vk_button vk_button-color-custom vk_button-${blockId}`;
34
- } else {
35
- containerClass = `vk_button vk_button-color-custom`;
36
- }
37
-
38
- if (buttonWidthMobile || buttonWidthTablet || buttonWidth) {
39
- // 横並びボタンで幅が指定されている
40
- if (buttonWidthMobile) {
41
- containerClass += ` vk_button-width-mobile-${buttonWidthMobile}`;
42
- }
43
- if (buttonWidthTablet) {
44
- containerClass += ` vk_button-width-tablet-${buttonWidthTablet}`;
45
- }
46
- if (buttonWidth) {
47
- containerClass += ` vk_button-width-${buttonWidth}`;
48
- }
49
- } else {
50
- containerClass += ` vk_button-align-${buttonAlign}`;
51
- }
52
-
53
- const blockProps = useBlockProps.save({
54
- className: containerClass,
55
- });
56
-
57
- return (
58
- <div {...blockProps}>
59
- <VKBButton
60
- lbTextColorCustom={buttonTextColorCustom}
61
- lbColorCustom={buttonColorCustom}
62
- lbColor={buttonColor}
63
- lbType={buttonType}
64
- lbAlign={buttonAlign}
65
- lbSize={buttonSize}
66
- lbUrl={buttonUrl}
67
- lbTarget={buttonTarget}
68
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
69
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
70
- lbsubCaption={subCaption}
71
- lbRichtext={
72
- <RichText.Content
73
- tagName={'span'}
74
- className={'vk_button_link_txt'}
75
- value={content}
76
- />
77
- }
78
- />
79
- </div>
80
- );
81
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/deprecated/save/index.js DELETED
@@ -1,272 +0,0 @@
1
- import save0_0_0 from './0.0.0/save';
2
- import save0_0_1 from './0.0.1/save';
3
- import save0_0_2 from './0.0.2/save';
4
- import save0_0_3 from './0.0.3/save';
5
- import save0_0_4 from './0.0.4/save';
6
- import save0_0_5 from './0.0.5/save';
7
- import save0_0_6 from './0.0.6/save';
8
- import save0_41_0 from './0.41.0/save';
9
- import save0_59_0 from './0.59.0/save';
10
- import save0_59_1 from './0.59.1/save';
11
- import save0_60_0 from './0.60.0/save';
12
- import save0_60_1 from './0.60.1/save';
13
- import save1_16_2 from './1.16.2/save';
14
- import save1_16_4 from './1.16.4/save';
15
- import save1_18_1 from './1.18.1/save';
16
- import save1_18_6 from './1.18.6/save';
17
- import save1_29_2 from './1.29.2/save';
18
- import save1_31_0 from './1.31.0/save';
19
- import save1_35_0 from './1.35.0/save';
20
-
21
- const blockAttributes = {
22
- content: {
23
- type: 'string',
24
- source: 'html',
25
- selector: 'span',
26
- },
27
- buttonUrl: {
28
- type: 'string',
29
- default: null,
30
- },
31
- buttonTarget: {
32
- type: 'Boolean',
33
- default: false,
34
- },
35
- buttonSize: {
36
- type: 'string',
37
- default: 'md',
38
- },
39
- buttonType: {
40
- type: 'string',
41
- default: '0',
42
- },
43
- buttonColor: {
44
- type: 'string',
45
- default: 'primary',
46
- },
47
- buttonColorCustom: {
48
- type: 'string',
49
- default: null,
50
- },
51
- buttonAlign: {
52
- type: 'string',
53
- default: 'left',
54
- },
55
- fontAwesomeIconBefore: {
56
- type: 'string',
57
- default: null,
58
- },
59
- fontAwesomeIconAfter: {
60
- type: 'string',
61
- default: null,
62
- },
63
- };
64
-
65
- const blockAttributes2 = {
66
- ...blockAttributes,
67
- subCaption: {
68
- type: 'string',
69
- default: '',
70
- },
71
- }
72
-
73
- const blockAttributes3 = {
74
- ...blockAttributes2,
75
- buttonUrl: {
76
- type: 'string',
77
- },
78
- buttonColorCustom: {
79
- type: 'string',
80
- },
81
- fontAwesomeIconBefore: {
82
- type: 'string',
83
- },
84
- fontAwesomeIconAfter: {
85
- type: 'string',
86
- },
87
- subCaption: {
88
- type: 'string',
89
- },
90
- clientId: {
91
- type: 'string',
92
- },
93
- }
94
-
95
- const blockAttributes4 = {
96
- ...blockAttributes3,
97
- blockId: {
98
- type: 'string',
99
- },
100
- }
101
-
102
- const blockAttributes5 = {
103
- ...blockAttributes4,
104
- buttonTextColorCustom: {
105
- type: 'string',
106
- },
107
- }
108
-
109
- const blockAttributes6 = {
110
- ...blockAttributes4,
111
- buttonWidth: {
112
- type: 'number',
113
- default: 0,
114
- },
115
- }
116
-
117
- const blockAttributes7 = {
118
- ...blockAttributes4,
119
- buttonWidthMobioe: {
120
- type: 'number',
121
- default: 0,
122
- },
123
- buttonWidthTablet: {
124
- type: 'number',
125
- default: 0,
126
- },
127
- buttonWidth: {
128
- type: 'number',
129
- default: 0,
130
- },
131
- }
132
-
133
- const blockAttributes8 = {
134
- ...blockAttributes7,
135
- "old_1_31_0": {
136
- 'type': 'string',
137
- 'default': true
138
- }
139
- }
140
-
141
- export const deprecated = [
142
- {
143
- attributes: blockAttributes8,
144
- save: save1_35_0,
145
- },
146
- {
147
- attributes: blockAttributes7,
148
- save: save1_31_0,
149
- },
150
- {
151
- attributes: blockAttributes6,
152
- save: save1_29_2,
153
- },
154
- {
155
- attributes: blockAttributes4,
156
- save: save1_18_6,
157
- },
158
- {
159
- attributes: blockAttributes3,
160
- save: save1_18_1,
161
- },
162
- {
163
- attributes: blockAttributes3,
164
- save: save1_16_4,
165
- },
166
- {
167
- attributes: blockAttributes2,
168
- save: save1_16_2,
169
- },
170
- // Fix: https://github.com/vektor-inc/vk-blocks-pro/issues/356
171
- // 独自後方互換処理のための、後方互換を追加
172
- {
173
- attributes: blockAttributes2,
174
- save: save0_0_6,
175
- },
176
- {
177
- attributes: blockAttributes2,
178
- save: save0_60_0,
179
- },
180
- {
181
- attributes: {
182
- ...blockAttributes,
183
- subCaption: {
184
- type: 'string',
185
- default: '',
186
- },
187
- },
188
- save: save0_59_1,
189
- },
190
- {
191
- attributes: {
192
- ...blockAttributes,
193
- subCaption: {
194
- type: 'string',
195
- default: '',
196
- },
197
- },
198
- save: save0_59_0,
199
- },
200
- {
201
- attributes: {
202
- ...blockAttributes,
203
- subCaption: {
204
- type: 'string',
205
- default: '',
206
- },
207
- },
208
- save: save0_41_0,
209
- },
210
- {
211
- attributes: {
212
- ...blockAttributes,
213
- subCaption: {
214
- type: 'string',
215
- default: '',
216
- },
217
- },
218
- save: save0_0_5,
219
- },
220
- {
221
- attributes: {
222
- ...blockAttributes,
223
- subCaption: {
224
- type: 'string',
225
- default: '',
226
- },
227
- },
228
- save: save0_0_4,
229
- },
230
- {
231
- attributes: {
232
- ...blockAttributes,
233
- subCaption: {
234
- type: 'string',
235
- default: '',
236
- },
237
- },
238
- save: save0_0_3,
239
- },
240
- {
241
- attributes: {
242
- ...blockAttributes,
243
- subCaption: {
244
- type: 'string',
245
- default: '',
246
- },
247
- },
248
- save: save0_0_2,
249
- },
250
- {
251
- attributes: {
252
- ...blockAttributes,
253
- },
254
- save: save0_0_1,
255
- },
256
- {
257
- attributes: {
258
- ...blockAttributes,
259
- },
260
- save: save0_0_0,
261
- },
262
- {
263
- attributes: {
264
- ...blockAttributes,
265
- subCaption: {
266
- type: 'string',
267
- default: '',
268
- },
269
- },
270
- save: save0_60_1,
271
- },
272
- ];
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/edit.js DELETED
@@ -1,760 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { VKBButton } from './component';
3
- import { FontAwesome } from '@vkblocks/utils/font-awesome-new';
4
- import {
5
- SelectControl,
6
- PanelBody,
7
- BaseControl,
8
- CheckboxControl,
9
- TextControl,
10
- ButtonGroup,
11
- Button,
12
- ToolbarGroup,
13
- ToolbarButton,
14
- Dropdown,
15
- } from '@wordpress/components';
16
- import {
17
- RichText,
18
- InspectorControls,
19
- useBlockProps,
20
- BlockControls,
21
- URLInput,
22
- } from '@wordpress/block-editor';
23
- import { useEffect } from '@wordpress/element';
24
- import { dispatch, select } from '@wordpress/data';
25
- import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette';
26
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
27
- import { link, linkOff, keyboardReturn } from '@wordpress/icons';
28
- import { isParentReusableBlock } from '@vkblocks/utils/is-parent-reusable-block';
29
- export default function ButtonEdit(props) {
30
- const { attributes, setAttributes, clientId } = props;
31
- const {
32
- content,
33
- subCaption,
34
- buttonUrl,
35
- buttonTarget,
36
- buttonSize,
37
- buttonType,
38
- buttonColor,
39
- buttonTextColorCustom,
40
- buttonColorCustom,
41
- buttonAlign,
42
- buttonWidthMobile,
43
- buttonWidthTablet,
44
- buttonWidth,
45
- outerGap,
46
- fontAwesomeIconBefore,
47
- fontAwesomeIconAfter,
48
- blockId,
49
- old_1_31_0,
50
- } = attributes;
51
-
52
- // eslint-disable-next-line no-undef
53
- const iconFamily = vkFontAwesome.iconFamily;
54
-
55
- // 以前の値を切り替え
56
- useEffect(() => {
57
- if (attributes.clientId !== undefined) {
58
- setAttributes({ clientId: undefined });
59
- }
60
- if (
61
- blockId === undefined ||
62
- isParentReusableBlock(clientId) === false
63
- ) {
64
- setAttributes({ blockId: clientId });
65
- }
66
- if (
67
- buttonUrl === null ||
68
- buttonUrl === 'null' ||
69
- buttonUrl === 'undefined' ||
70
- buttonUrl === ''
71
- ) {
72
- setAttributes({ buttonUrl: undefined });
73
- }
74
- if (buttonColorCustom === undefined) {
75
- setAttributes({ buttonTextColorCustom: undefined });
76
- }
77
- if (
78
- buttonColorCustom === null ||
79
- buttonColorCustom === 'null' ||
80
- buttonColorCustom === 'undefined' ||
81
- buttonColorCustom === ''
82
- ) {
83
- setAttributes({ buttonColorCustom: undefined });
84
- }
85
- if (
86
- fontAwesomeIconBefore === null ||
87
- fontAwesomeIconBefore === 'null' ||
88
- fontAwesomeIconBefore === 'undefined' ||
89
- fontAwesomeIconBefore === ''
90
- ) {
91
- setAttributes({ fontAwesomeIconBefore: undefined });
92
- }
93
- if (
94
- fontAwesomeIconAfter === null ||
95
- fontAwesomeIconAfter === 'null' ||
96
- fontAwesomeIconAfter === 'undefined' ||
97
- fontAwesomeIconAfter === ''
98
- ) {
99
- setAttributes({ fontAwesomeIconAfter: undefined });
100
- }
101
- if (
102
- subCaption === null ||
103
- subCaption === 'null' ||
104
- subCaption === 'undefined' ||
105
- subCaption === ''
106
- ) {
107
- setAttributes({ subCaption: undefined });
108
- }
109
- if (old_1_31_0 === undefined) {
110
- if (buttonWidthMobile === undefined) {
111
- setAttributes({ buttonWidthMobile: buttonWidth });
112
- }
113
- if (buttonWidthTablet === undefined) {
114
- setAttributes({ buttonWidthTablet: buttonWidth });
115
- }
116
- setAttributes({ old_1_31_0: true });
117
- }
118
- }, [clientId]);
119
-
120
- const { updateBlockAttributes } = dispatch('core/block-editor');
121
-
122
- // buttonColor が有効なら buttonColorCustom と buttonTextColorCustom を無効化
123
- // プルダウンから直接カスタムを選ぶとその瞬間色が適用されなくなるので primary に戻す
124
- // buttonColorCustom が有効でないと buttonTextColorCustom は意味を成さないので無効化
125
- useEffect(() => {
126
- if (buttonColor !== 'custom') {
127
- updateBlockAttributes(clientId, {
128
- buttonTextColorCustom: undefined,
129
- });
130
- updateBlockAttributes(clientId, { buttonColorCustom: undefined });
131
- } else if (
132
- buttonColorCustom === undefined &&
133
- buttonColor === 'custom'
134
- ) {
135
- updateBlockAttributes(clientId, { buttonColor: 'primary' });
136
- updateBlockAttributes(clientId, {
137
- buttonTextColorCustom: undefined,
138
- });
139
- }
140
- }, [buttonColor]);
141
-
142
- // buttonColorCustom が有効なら buttonColor を custom に
143
- // buttonColorCustom が空白かつ buttonColor が custom なら buttonColor を primary に
144
- useEffect(() => {
145
- if (buttonColorCustom !== undefined) {
146
- updateBlockAttributes(clientId, { buttonColor: 'custom' });
147
- }
148
- }, [buttonColorCustom]);
149
-
150
- // 親ブロックが vk-blocks/button-outer かどうか判定
151
- const parents = select('core/block-editor').getBlockParentsByBlockName(
152
- clientId,
153
- ['vk-blocks/button-outer']
154
- );
155
- const isInnerButton = parents.length ? true : false;
156
-
157
- let containerClass;
158
- // カスタムカラーの場合 またはアウターにギャップが指定されれいる場合
159
- if (
160
- (buttonColorCustom !== undefined && isHexColor(buttonColorCustom)) ||
161
- outerGap
162
- ) {
163
- containerClass = `vk_button vk_button-color-custom vk_button-${blockId}`;
164
- } else {
165
- containerClass = `vk_button vk_button-color-custom`;
166
- }
167
-
168
- if (isInnerButton) {
169
- if (buttonWidthMobile) {
170
- // 横並びボタンで幅が指定されている
171
- containerClass += ` vk_button-width-mobile-${buttonWidthMobile}`;
172
- }
173
- if (buttonWidthTablet) {
174
- containerClass += ` vk_button-width-tablet-${buttonWidthTablet}`;
175
- }
176
- if (buttonWidth) {
177
- containerClass += ` vk_button-width-${buttonWidth}`;
178
- }
179
- } else {
180
- containerClass += ` vk_button-align-${buttonAlign}`;
181
- setAttributes({ buttonWidth: 0 });
182
- }
183
-
184
- const blockProps = useBlockProps({
185
- className: containerClass,
186
- });
187
-
188
- return (
189
- <>
190
- <BlockControls>
191
- <ToolbarGroup>
192
- <Dropdown
193
- renderToggle={({ isOpen, onToggle }) => {
194
- const setLink = () => {
195
- if (isOpen && buttonUrl !== '') {
196
- // linkOff
197
- setAttributes({ buttonUrl: '' });
198
- }
199
- onToggle();
200
- };
201
- return (
202
- <ToolbarButton
203
- aria-expanded={isOpen}
204
- icon={
205
- buttonUrl !== '' && isOpen
206
- ? linkOff
207
- : link
208
- }
209
- isActive={
210
- buttonUrl !== '' && isOpen
211
- ? true
212
- : false
213
- }
214
- label={
215
- buttonUrl !== '' && isOpen
216
- ? __('Unlink')
217
- : __('Input Link URL', 'vk-blocks')
218
- }
219
- onClick={setLink}
220
- />
221
- );
222
- }}
223
- renderContent={(params) => {
224
- return (
225
- <div className="block-editor-url-input__button block-editor-link-control">
226
- <form
227
- className="block-editor-link-control__search-input-wrapper"
228
- onSubmit={() => {
229
- params.onClose();
230
- }}
231
- >
232
- <div className="block-editor-link-control__search-input">
233
- <URLInput
234
- value={buttonUrl}
235
- onChange={(value) => {
236
- setAttributes({
237
- buttonUrl: value,
238
- });
239
- }}
240
- />
241
- <CheckboxControl
242
- label={__(
243
- 'Open link new tab.',
244
- 'vk-blocks'
245
- )}
246
- checked={buttonTarget}
247
- onChange={(checked) =>
248
- setAttributes({
249
- buttonTarget: checked,
250
- })
251
- }
252
- />
253
- <div className="block-editor-link-control__search-actions">
254
- <Button
255
- icon={keyboardReturn}
256
- label={__('Submit')}
257
- type="submit"
258
- />
259
- </div>
260
- </div>
261
- </form>
262
- </div>
263
- );
264
- }}
265
- />
266
- </ToolbarGroup>
267
- </BlockControls>
268
- <InspectorControls>
269
- <PanelBody title={__('Button setting', 'vk-blocks')}>
270
- <TextControl
271
- label={__('Sub Caption', 'vk-blocks')}
272
- value={subCaption}
273
- className={`mt-0 mb-3`}
274
- onChange={(value) =>
275
- setAttributes({ subCaption: value })
276
- }
277
- placeholder={'Sub Caption'}
278
- />
279
-
280
- <h4 className={`mt-0 mb-2`}>
281
- {__('Button Size:', 'vk-blocks')}
282
- </h4>
283
- <ButtonGroup className={`mb-3`}>
284
- <Button
285
- isSmall
286
- isPrimary={buttonSize === 'lg'}
287
- isSecondary={buttonSize !== 'lg'}
288
- onClick={() => setAttributes({ buttonSize: 'lg' })}
289
- >
290
- {__('Large', 'vk-blocks')}
291
- </Button>
292
- <Button
293
- isSmall
294
- isPrimary={buttonSize === 'md'}
295
- isSecondary={buttonSize !== 'md'}
296
- onClick={() => setAttributes({ buttonSize: 'md' })}
297
- >
298
- {__('Normal', 'vk-blocks')}
299
- </Button>
300
- <Button
301
- isSmall
302
- isPrimary={buttonSize === 'sm'}
303
- isSecondary={buttonSize !== 'sm'}
304
- onClick={() => setAttributes({ buttonSize: 'sm' })}
305
- >
306
- {__('Small', 'vk-blocks')}
307
- </Button>
308
- </ButtonGroup>
309
-
310
- {!isInnerButton && (
311
- <>
312
- <h4 className={`mt-0 mb-2`}>
313
- {__('Button Position:', 'vk-blocks')}
314
- </h4>
315
- <ButtonGroup className={`mb-3`}>
316
- <Button
317
- isSmall
318
- isPrimary={buttonAlign === 'left'}
319
- isSecondary={buttonAlign !== 'left'}
320
- onClick={() =>
321
- setAttributes({ buttonAlign: 'left' })
322
- }
323
- >
324
- {__('Left', 'vk-blocks')}
325
- </Button>
326
- <Button
327
- isSmall
328
- isPrimary={buttonAlign === 'center'}
329
- isSecondary={buttonAlign !== 'center'}
330
- onClick={() =>
331
- setAttributes({ buttonAlign: 'center' })
332
- }
333
- >
334
- {__('Center', 'vk-blocks')}
335
- </Button>
336
- <Button
337
- isSmall
338
- isPrimary={buttonAlign === 'right'}
339
- isSecondary={buttonAlign !== 'right'}
340
- onClick={() =>
341
- setAttributes({ buttonAlign: 'right' })
342
- }
343
- >
344
- {__('Right', 'vk-blocks')}
345
- </Button>
346
- <Button
347
- isSmall
348
- isPrimary={buttonAlign === 'wide'}
349
- isSecondary={buttonAlign !== 'wide'}
350
- onClick={() =>
351
- setAttributes({ buttonAlign: 'wide' })
352
- }
353
- >
354
- {__('Wide', 'vk-blocks')}
355
- </Button>
356
- <Button
357
- isSmall
358
- isPrimary={buttonAlign === 'block'}
359
- isSecondary={buttonAlign !== 'block'}
360
- onClick={() =>
361
- setAttributes({ buttonAlign: 'block' })
362
- }
363
- >
364
- {__('Block', 'vk-blocks')}
365
- </Button>
366
- </ButtonGroup>
367
- </>
368
- )}
369
-
370
- {isInnerButton && (
371
- <>
372
- <h4 className={`mt-0 mb-2`}>
373
- {__('Button Width:', 'vk-blocks')}
374
- </h4>
375
- <p className={`mt-0 mb-2`}>
376
- {__('Mobile', 'vk-blocks')}
377
- </p>
378
- <ButtonGroup className={`mb-3`}>
379
- <Button
380
- isSmall
381
- isPrimary={buttonWidthMobile === 25}
382
- isSecondary={buttonWidthMobile !== 25}
383
- onClick={() =>
384
- setAttributes({
385
- buttonWidthMobile:
386
- buttonWidthMobile === 25
387
- ? 0
388
- : 25,
389
- })
390
- }
391
- >
392
- {__('25%', 'vk-blocks')}
393
- </Button>
394
- <Button
395
- isSmall
396
- isPrimary={buttonWidthMobile === 50}
397
- isSecondary={buttonWidthMobile !== 50}
398
- onClick={() =>
399
- setAttributes({
400
- buttonWidthMobile:
401
- buttonWidthMobile === 50
402
- ? 0
403
- : 50,
404
- })
405
- }
406
- >
407
- {__('50%', 'vk-blocks')}
408
- </Button>
409
- <Button
410
- isSmall
411
- isPrimary={buttonWidthMobile === 75}
412
- isSecondary={buttonWidthMobile !== 75}
413
- onClick={() =>
414
- setAttributes({
415
- buttonWidthMobile:
416
- buttonWidthMobile === 75
417
- ? 0
418
- : 75,
419
- })
420
- }
421
- >
422
- {__('75%', 'vk-blocks')}
423
- </Button>
424
- <Button
425
- isSmall
426
- isPrimary={buttonWidthMobile === 100}
427
- isSecondary={buttonWidthMobile !== 100}
428
- onClick={() =>
429
- setAttributes({
430
- buttonWidthMobile:
431
- buttonWidthMobile === 100
432
- ? 0
433
- : 100,
434
- })
435
- }
436
- >
437
- {__('100%', 'vk-blocks')}
438
- </Button>
439
- </ButtonGroup>
440
- <p className={`mt-0 mb-2`}>
441
- {__('Tablet', 'vk-blocks')}
442
- </p>
443
- <ButtonGroup className={`mb-3`}>
444
- <Button
445
- isSmall
446
- isPrimary={buttonWidthTablet === 25}
447
- isSecondary={buttonWidthTablet !== 25}
448
- onClick={() =>
449
- setAttributes({
450
- buttonWidthTablet:
451
- buttonWidthTablet === 25
452
- ? 0
453
- : 25,
454
- })
455
- }
456
- >
457
- {__('25%', 'vk-blocks')}
458
- </Button>
459
- <Button
460
- isSmall
461
- isPrimary={buttonWidthTablet === 50}
462
- isSecondary={buttonWidthTablet !== 50}
463
- onClick={() =>
464
- setAttributes({
465
- buttonWidthTablet:
466
- buttonWidthTablet === 50
467
- ? 0
468
- : 50,
469
- })
470
- }
471
- >
472
- {__('50%', 'vk-blocks')}
473
- </Button>
474
- <Button
475
- isSmall
476
- isPrimary={buttonWidthTablet === 75}
477
- isSecondary={buttonWidthTablet !== 75}
478
- onClick={() =>
479
- setAttributes({
480
- buttonWidthTablet:
481
- buttonWidthTablet === 75
482
- ? 0
483
- : 75,
484
- })
485
- }
486
- >
487
- {__('75%', 'vk-blocks')}
488
- </Button>
489
- <Button
490
- isSmall
491
- isPrimary={buttonWidthTablet === 100}
492
- isSecondary={buttonWidthTablet !== 100}
493
- onClick={() =>
494
- setAttributes({
495
- buttonWidthTablet:
496
- buttonWidthTablet === 100
497
- ? 0
498
- : 100,
499
- })
500
- }
501
- >
502
- {__('100%', 'vk-blocks')}
503
- </Button>
504
- </ButtonGroup>
505
- <p className={`mt-0 mb-2`}>
506
- {__('PC', 'vk-blocks')}
507
- </p>
508
- <ButtonGroup className={`mb-3`}>
509
- <Button
510
- isSmall
511
- isPrimary={buttonWidth === 25}
512
- isSecondary={buttonWidth !== 25}
513
- onClick={() =>
514
- setAttributes({
515
- buttonWidth:
516
- buttonWidth === 25 ? 0 : 25,
517
- })
518
- }
519
- >
520
- {__('25%', 'vk-blocks')}
521
- </Button>
522
- <Button
523
- isSmall
524
- isPrimary={buttonWidth === 50}
525
- isSecondary={buttonWidth !== 50}
526
- onClick={() =>
527
- setAttributes({
528
- buttonWidth:
529
- buttonWidth === 50 ? 0 : 50,
530
- })
531
- }
532
- >
533
- {__('50%', 'vk-blocks')}
534
- </Button>
535
- <Button
536
- isSmall
537
- isPrimary={buttonWidth === 75}
538
- isSecondary={buttonWidth !== 75}
539
- onClick={() =>
540
- setAttributes({
541
- buttonWidth:
542
- buttonWidth === 75 ? 0 : 75,
543
- })
544
- }
545
- >
546
- {__('75%', 'vk-blocks')}
547
- </Button>
548
- <Button
549
- isSmall
550
- isPrimary={buttonWidth === 100}
551
- isSecondary={buttonWidth !== 100}
552
- onClick={() =>
553
- setAttributes({
554
- buttonWidth:
555
- buttonWidth === 100 ? 0 : 100,
556
- })
557
- }
558
- >
559
- {__('100%', 'vk-blocks')}
560
- </Button>
561
- </ButtonGroup>
562
- </>
563
- )}
564
-
565
- <h4 className={`mt-0 mb-2`}>
566
- {__('Button Style:', 'vk-blocks')}
567
- </h4>
568
- <ButtonGroup className={`mb-2`}>
569
- <Button
570
- isSmall
571
- isPrimary={buttonType === '0'}
572
- isSecondary={buttonType !== '0'}
573
- onClick={() => setAttributes({ buttonType: '0' })}
574
- >
575
- {__('Solid color', 'vk-blocks')}
576
- </Button>
577
- <Button
578
- isSmall
579
- isPrimary={buttonType === '1'}
580
- isSecondary={buttonType !== '1'}
581
- onClick={() => {
582
- setAttributes({ buttonType: '1' });
583
- setAttributes({
584
- buttonTextColorCustom: undefined,
585
- });
586
- }}
587
- >
588
- {__('No background', 'vk-blocks')}
589
- </Button>
590
- <Button
591
- isSmall
592
- isPrimary={buttonType === '2'}
593
- isSecondary={buttonType !== '2'}
594
- onClick={() => {
595
- setAttributes({ buttonType: '2' });
596
- setAttributes({
597
- buttonTextColorCustom: undefined,
598
- });
599
- }}
600
- >
601
- {__('Text only', 'vk-blocks')}
602
- </Button>
603
- </ButtonGroup>
604
- <p className={`mb-3`}>
605
- {__(
606
- 'If you select "No background", that you need to select a Custom Color.',
607
- 'vk-blocks'
608
- )}
609
- </p>
610
- <h4 className={`mt-0 mb-2`}>{__('Color', 'vk-blocks')}</h4>
611
- <SelectControl
612
- label={__('Default Color (Bootstrap)', 'vk-blocks')}
613
- value={buttonColor}
614
- options={[
615
- {
616
- label: __('Primary', 'vk-blocks'),
617
- value: 'primary',
618
- },
619
- {
620
- label: __('Secondary', 'vk-blocks'),
621
- value: 'secondary',
622
- },
623
- {
624
- label: __('Success', 'vk-blocks'),
625
- value: 'success',
626
- },
627
- {
628
- label: __('Info', 'vk-blocks'),
629
- value: 'info',
630
- },
631
- {
632
- label: __('Warning', 'vk-blocks'),
633
- value: 'warning',
634
- },
635
- {
636
- label: __('Danger', 'vk-blocks'),
637
- value: 'danger',
638
- },
639
- {
640
- label: __('Light', 'vk-blocks'),
641
- value: 'light',
642
- },
643
- {
644
- label: __('Dark', 'vk-blocks'),
645
- value: 'dark',
646
- },
647
- {
648
- label: __('Custom Color', 'vk-blocks'),
649
- value: 'custom',
650
- },
651
- ]}
652
- onChange={(value) =>
653
- setAttributes({ buttonColor: value })
654
- }
655
- />
656
- <BaseControl
657
- label={__('Custom Color', 'vk-blocks')}
658
- id={`vk_block_button_custom_color`}
659
- >
660
- <BaseControl
661
- id={`vk_block_button_custom_background_color`}
662
- label={
663
- buttonType === '0' || buttonType === null
664
- ? __('Background Color', 'vk-blocks')
665
- : __('Button Color', 'vk-blocks')
666
- }
667
- help={__(
668
- 'This color palette overrides the default color. If you want to use the default color, click the clear button.',
669
- 'vk-blocks'
670
- )}
671
- >
672
- <AdvancedColorPalette
673
- schema={'buttonColorCustom'}
674
- {...props}
675
- />
676
- </BaseControl>
677
- {(buttonType === '0' || buttonType === null) &&
678
- buttonColorCustom !== undefined && (
679
- <BaseControl
680
- id={`vk_block_button_custom_text_color`}
681
- label={__('Text Color', 'vk-blocks')}
682
- >
683
- <AdvancedColorPalette
684
- schema={'buttonTextColorCustom'}
685
- {...props}
686
- />
687
- </BaseControl>
688
- )}
689
- </BaseControl>
690
- <BaseControl>
691
- <h4 className={`mt-0 mb-2`}>
692
- {__('Icon', 'vk-blocks') +
693
- ' ( ' +
694
- iconFamily +
695
- ' )'}
696
- </h4>
697
- <BaseControl
698
- id={`vk_block_button_fa_before_text`}
699
- label={__('Before text', 'vk-blocks')}
700
- >
701
- <FontAwesome
702
- attributeName={'fontAwesomeIconBefore'}
703
- {...props}
704
- />
705
- </BaseControl>
706
- <BaseControl
707
- id={`vk_block_button_fa_after_text`}
708
- label={__('After text', 'vk-blocks')}
709
- >
710
- <FontAwesome
711
- attributeName={'fontAwesomeIconAfter'}
712
- {...props}
713
- />
714
- </BaseControl>
715
- </BaseControl>
716
- </PanelBody>
717
- </InspectorControls>
718
- <div {...blockProps}>
719
- <VKBButton
720
- lbTextColorCustom={buttonTextColorCustom}
721
- lbColorCustom={buttonColorCustom}
722
- lbColor={buttonColor}
723
- lbType={buttonType}
724
- lbAlign={buttonAlign}
725
- lbSize={buttonSize}
726
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
727
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
728
- lbsubCaption={subCaption}
729
- lbRichtext={
730
- <RichText
731
- tagName={'span'}
732
- className={'vk_button_link_txt'}
733
- onChange={(value) =>
734
- setAttributes({ content: value })
735
- }
736
- value={content}
737
- placeholder={__('Input text', 'vk-blocks')}
738
- allowedFormats={[
739
- 'core/bold',
740
- // 'core/code',
741
- // 'core/image',
742
- 'core/italic',
743
- // 'core/link',
744
- 'core/strikethrough',
745
- // 'core/underline',
746
- // 'core/text-color',
747
- 'core/superscript',
748
- 'core/subscript',
749
- // 'vk-blocks/highlighter',
750
- 'vk-blocks/responsive-br',
751
- 'vk-blocks/nowrap',
752
- ]}
753
- isSelected={true}
754
- />
755
- }
756
- />
757
- </div>
758
- </>
759
- );
760
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 8h14c.28 0 .5.22.5.5v7a.5.5 0 01-.5.5h-6.94l-1.43 1.5H19a2 2 0 002-2v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v4.78h.27l.24-.69c.17-.47.54-.83.99-1V8.5c0-.28.22-.5.5-.5z" fill="#000"/><path d="M8.5 12.5a1.6 1.6 0 00-.5-.68v-.32h8v1H8.5zM10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/></svg>
 
src/blocks/button/index.js DELETED
@@ -1,196 +0,0 @@
1
- /**
2
- * Button block type
3
- *
4
- */
5
- import { ReactComponent as Icon } from './icon.svg';
6
- import { title, iconName, url, iconUser } from '@vkblocks/utils/example-data';
7
- import edit from './edit';
8
- import metadata from './block.json';
9
- import save from './save';
10
- import { deprecated } from './deprecated/save/';
11
- import deprecatedHooks from './deprecated/hooks';
12
- import transforms from './transforms';
13
- import { addFilter } from '@wordpress/hooks';
14
- import { createHigherOrderComponent } from '@wordpress/compose';
15
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
16
-
17
- const { name } = metadata;
18
-
19
- export { metadata, name };
20
-
21
- export const settings = {
22
- icon: <Icon />,
23
- example: {
24
- attributes: {
25
- content: iconName,
26
- subCaption: title,
27
- buttonUrl: url,
28
- buttonTarget: false,
29
- buttonSize: 'md',
30
- buttonType: '0',
31
- buttonColor: 'primary',
32
- buttonTextColorCustom: 'undefined',
33
- buttonColorCustom: 'undefined',
34
- buttonAlign: 'left',
35
- buttonWidthMobile: 0,
36
- buttonWidthTablet: 0,
37
- outerGap: null,
38
- buttonWidth: 0,
39
- fontAwesomeIconBefore: iconUser,
40
- fontAwesomeIconAfter: iconUser,
41
- },
42
- },
43
- edit,
44
- save,
45
- deprecated,
46
- transforms,
47
- };
48
-
49
- const generateInlineCss = (attributes) => {
50
- const { buttonTextColorCustom, buttonColorCustom, buttonType, blockId } =
51
- attributes;
52
- let inlineCss = '';
53
-
54
- // カスタムカラーの場合
55
- if (buttonColorCustom !== undefined && isHexColor(buttonColorCustom)) {
56
- // 塗り
57
- if (buttonType === '0' || buttonType === null) {
58
- inlineCss += `.vk_button-${blockId} .has-background {
59
- background-color: ${buttonColorCustom};
60
- border: 1px solid ${buttonColorCustom};
61
- }`;
62
- }
63
- // アウトライン
64
- if (buttonType === '1') {
65
- inlineCss += `.vk_button-${blockId} .has-text-color.is-style-outline {
66
- background-color: transparent;
67
- border: 1px solid ${buttonColorCustom};
68
- color: ${buttonColorCustom};
69
- }
70
- .vk_button-${blockId} .has-text-color.is-style-outline:hover {
71
- background-color: ${buttonColorCustom};
72
- border: 1px solid ${buttonColorCustom};
73
- color: #fff;
74
- }`;
75
- }
76
- // テキストのみ
77
- if (buttonType === '2') {
78
- inlineCss = `.vk_button-${blockId} .has-text-color.vk_button_link-type-text {
79
- color: ${buttonColorCustom};
80
- }`;
81
- }
82
- }
83
-
84
- // 文字色がカスタムカラーの場合
85
- if (
86
- buttonTextColorCustom !== undefined &&
87
- isHexColor(buttonTextColorCustom)
88
- ) {
89
- if (buttonType === '0' || buttonType === null) {
90
- inlineCss += ` .vk_button-${blockId} .has-text-color {
91
- color: ${buttonTextColorCustom};
92
- }`;
93
- }
94
- }
95
-
96
- return inlineCss;
97
- };
98
-
99
- const generateInlineGapCss = (attributes, isSave) => {
100
- const {
101
- buttonWidthMobile,
102
- buttonWidthTablet,
103
- buttonWidth,
104
- outerGap,
105
- blockId,
106
- } = attributes;
107
- let inlineCss = '';
108
- const propaty = isSave
109
- ? '.vk_button'
110
- : '.vk_buttons .vk_buttons_col .block-editor-block-list__layout .vk_button';
111
-
112
- // 親ブロックのギャップを反映
113
- if (outerGap) {
114
- if (buttonWidthMobile) {
115
- inlineCss += `@media (max-width: 575.98px) {
116
- ${propaty}.vk_button-${blockId} {
117
- width: calc(${buttonWidthMobile}% - calc(${outerGap} - calc(${outerGap} / (100 / ${buttonWidthMobile}))) - 1px);
118
- }
119
- }`;
120
- }
121
- if (buttonWidthTablet) {
122
- inlineCss += `@media(min-width: 576px) and (max-width: 991.98px) {
123
- ${propaty}.vk_button-${blockId} {
124
- width: calc(${buttonWidthTablet}% - calc(${outerGap} - calc(${outerGap} / (100 / ${buttonWidthTablet}))) - 1px);
125
- }
126
- }`;
127
- }
128
- if (buttonWidth) {
129
- inlineCss += `@media (min-width: 992px) {
130
- ${propaty}.vk_button-${blockId} {
131
- width: calc(${buttonWidth}% - calc(${outerGap} - calc(${outerGap} / (100 / ${buttonWidth}))) - 1px );
132
- }
133
- }`;
134
- }
135
- }
136
-
137
- return inlineCss;
138
- };
139
-
140
- const VKButtonInlineEditorCss = createHigherOrderComponent((BlockEdit) => {
141
- return (props) => {
142
- const { attributes } = props;
143
-
144
- if ('vk-blocks/button' === props.name) {
145
- const cssTag = generateInlineCss(attributes);
146
- const cssEditor = generateInlineGapCss(attributes, false);
147
- if (cssTag !== '' || cssEditor !== '') {
148
- return (
149
- <>
150
- <BlockEdit {...props} />
151
- <style type="text/css">
152
- {cssTag} {cssEditor}
153
- </style>
154
- </>
155
- );
156
- }
157
- return <BlockEdit {...props} />;
158
- }
159
- return <BlockEdit {...props} />;
160
- };
161
- }, 'VKButtonInlineEditorCss');
162
- addFilter('editor.BlockEdit', 'vk-blocks/button', VKButtonInlineEditorCss);
163
-
164
- const VKButtonInlineCss = (el, type, attributes) => {
165
- if ('vk-blocks/button' === type.name) {
166
- //現在実行されている deprecated内の save関数のindexを取得
167
- const deprecatedFuncIndex = deprecated.findIndex(
168
- (item) => item.save === type.save
169
- );
170
-
171
- // 最新版
172
- if (-1 === deprecatedFuncIndex) {
173
- // NOTE: useBlockProps + style要素を挿入する場合、useBlockPropsを使った要素が最初（上）にこないと、
174
- // カスタムクラスを追加する処理が失敗する[
175
- const cssTag = generateInlineCss(attributes);
176
- const cssEditor = generateInlineGapCss(attributes, true);
177
- if (cssTag !== '' || cssEditor !== '') {
178
- return (
179
- <>
180
- {el}
181
- <style type="text/css">
182
- {cssTag} {cssEditor}
183
- </style>
184
- </>
185
- );
186
- }
187
- return el;
188
-
189
- //後方互換
190
- }
191
- const DeprecatedHook = deprecatedHooks[deprecatedFuncIndex];
192
- return <DeprecatedHook el={el} attributes={attributes} />;
193
- }
194
- return el;
195
- };
196
- addFilter('blocks.getSaveElement', 'vk-blocks/button', VKButtonInlineCss, 11);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/index.php DELETED
@@ -1,33 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/button` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register Button block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_button() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/button',
18
- VK_BLOCKS_DIR_URL . 'build/button/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- register_block_type(
25
- __DIR__,
26
- array(
27
- 'style' => 'vk-blocks/button',
28
- 'editor_style' => 'vk-blocks-build-editor-css',
29
- 'editor_script' => 'vk-blocks-build-js',
30
- )
31
- );
32
- }
33
- add_action( 'init', 'vk_blocks_register_block_button', 99 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/save.js DELETED
@@ -1,81 +0,0 @@
1
- import { VKBButton } from './component';
2
- import { RichText, useBlockProps } from '@wordpress/block-editor';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export default function save(props) {
6
- const { attributes } = props;
7
- const {
8
- content,
9
- subCaption,
10
- buttonUrl,
11
- buttonTarget,
12
- buttonSize,
13
- buttonType,
14
- buttonColor,
15
- buttonTextColorCustom,
16
- buttonColorCustom,
17
- buttonAlign,
18
- buttonWidthMobile,
19
- buttonWidthTablet,
20
- buttonWidth,
21
- outerGap,
22
- fontAwesomeIconBefore,
23
- fontAwesomeIconAfter,
24
- blockId,
25
- } = attributes;
26
-
27
- let containerClass = '';
28
- // カスタムカラーの場合 またはアウターにギャップが指定されれいる場合
29
- if (
30
- (buttonColorCustom !== undefined && isHexColor(buttonColorCustom)) ||
31
- outerGap
32
- ) {
33
- containerClass = `vk_button vk_button-color-custom vk_button-${blockId}`;
34
- } else {
35
- containerClass = `vk_button vk_button-color-custom`;
36
- }
37
-
38
- if (buttonWidthMobile || buttonWidthTablet || buttonWidth) {
39
- // 横並びボタンで幅が指定されている
40
- if (buttonWidthMobile) {
41
- containerClass += ` vk_button-width-mobile-${buttonWidthMobile}`;
42
- }
43
- if (buttonWidthTablet) {
44
- containerClass += ` vk_button-width-tablet-${buttonWidthTablet}`;
45
- }
46
- if (buttonWidth) {
47
- containerClass += ` vk_button-width-${buttonWidth}`;
48
- }
49
- } else {
50
- containerClass += ` vk_button-align-${buttonAlign}`;
51
- }
52
-
53
- const blockProps = useBlockProps.save({
54
- className: containerClass,
55
- });
56
-
57
- return (
58
- <div {...blockProps}>
59
- <VKBButton
60
- lbTextColorCustom={buttonTextColorCustom}
61
- lbColorCustom={buttonColorCustom}
62
- lbColor={buttonColor}
63
- lbType={buttonType}
64
- lbAlign={buttonAlign}
65
- lbSize={buttonSize}
66
- lbUrl={buttonUrl}
67
- lbTarget={buttonTarget}
68
- lbFontAwesomeIconBefore={fontAwesomeIconBefore}
69
- lbFontAwesomeIconAfter={fontAwesomeIconAfter}
70
- lbsubCaption={subCaption}
71
- lbRichtext={
72
- <RichText.Content
73
- tagName={'span'}
74
- className={'vk_button_link_txt'}
75
- value={content}
76
- />
77
- }
78
- />
79
- </div>
80
- );
81
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/style.scss DELETED
@@ -1,392 +0,0 @@
1
- $vk-color-secondary: #6c757d;
2
- $vk-color-success: #28a745;
3
- $vk-color-info:#17a2b8;
4
- $vk-color-warning:#ffc107;
5
- $vk-color-danger: #dc3545;
6
- $vk-color-light:#f8f9fa;
7
- $vk-color-dark:#343a40;
8
-
9
- $xs-max: 575.98px;
10
- $sm-max: 767.98px;
11
- $md-max: 991.98px;
12
- $lg-max: 1199.98px;
13
- $xl-max: 1399.98px;
14
-
15
- $sm-min: 576px;
16
- $md-min: 768px;
17
- $lg-min: 992px;
18
- $xl-min: 1200px;
19
- $xxl-min: 1400px;
20
-
21
- :root,
22
- :root .editor-styles-wrapper {
23
- .has-vk-color-primary-background-color {
24
- background-color: var(--vk-color-primary);
25
- }
26
- .has-vk-color-secondary-background-color {
27
- background-color: $vk-color-secondary;
28
- }
29
- .has-vk-color-success-background-color {
30
- background-color: $vk-color-success;
31
- }
32
- .has-vk-color-info-background-color {
33
- background-color: $vk-color-info;
34
- }
35
- .has-vk-color-warning-background-color {
36
- background-color: $vk-color-warning;
37
- }
38
- .has-vk-color-danger-background-color {
39
- background-color: $vk-color-danger;
40
- }
41
- .has-vk-color-light-background-color {
42
- background-color: $vk-color-light;
43
- }
44
- .has-vk-color-dark-background-color {
45
- background-color: $vk-color-dark;
46
- }
47
- .has-vk-color-primary-color {
48
- color: var(--vk-color-primary);
49
- }
50
- .has-vk-color-secondary-color {
51
- color: $vk-color-secondary;
52
- }
53
- .has-vk-color-success-color {
54
- color: $vk-color-success;
55
- }
56
- .has-vk-color-info-color {
57
- color: $vk-color-info;
58
- }
59
- .has-vk-color-warning-color {
60
- color: $vk-color-warning;
61
- }
62
- .has-vk-color-danger-color {
63
- color: $vk-color-danger;
64
- }
65
- .has-vk-color-light-color {
66
- color: $vk-color-light;
67
- }
68
- .has-vk-color-dark-color {
69
- color: $vk-color-dark;
70
- }
71
- }
72
-
73
- .vk_button,
74
- .editor-styles-wrapper .vk_button {
75
- box-sizing: border-box;
76
- /* 他テーマで0だと左寄せになる場合があるのでautoに変更 */
77
- /* → いやいや、vk_button が100% div じゃない時にそれでは右寄せなど効かなくなるので margin 左右は指定ナシに戻し */
78
- margin-top:0;
79
- margin-bottom:5px;
80
- text-align: center; /* テキストのみの時のセンター揃え */
81
- &-color-custom {
82
- a:hover {
83
- opacity: 0.8;
84
- box-shadow: 0 0 0 0.2rem rgba(171, 184, 195, 0.25);
85
- }
86
- .vk_button_link-type-text:hover {
87
- box-shadow: none;
88
- }
89
- }
90
-
91
- @media (max-width: $xs-max) {
92
- &[class*="vk_button-width-mobile-"]{
93
- .vk_button_link {
94
- display: block;
95
- min-width: 50px;
96
- }
97
- }
98
-
99
- &-width-mobile {
100
- &-25 {
101
- width: calc( 25% - 8px );
102
- }
103
- &-50 {
104
- width: calc( 50% - 8px );
105
- }
106
- &-75 {
107
- width: calc( 75% - 8px );
108
- }
109
- &-100 {
110
- width: 100%;
111
- }
112
- }
113
- }
114
-
115
- @media (min-width: $sm-min) and (max-width: $md-max) {
116
- &[class*="vk_button-width-tablet-"] {
117
- .vk_button_link {
118
- display: block;
119
- }
120
- }
121
-
122
- &-width-tablet {
123
- &-25 {
124
- width: calc(25% - 8px);
125
- }
126
-
127
- &-50 {
128
- width: calc(50% - 8px);
129
- }
130
-
131
- &-75 {
132
- width: calc(75% - 8px);
133
- }
134
-
135
- &-100 {
136
- width: 100%;
137
- }
138
- }
139
- }
140
-
141
- @media (min-width: $lg-min) {
142
- &[class*="vk_button-width-"] {
143
- .vk_button_link {
144
- display: block;
145
- }
146
- }
147
-
148
- &-width {
149
- &-25 {
150
- width: calc(25% - 8px);
151
- }
152
-
153
- &-50 {
154
- width: calc(50% - 8px);
155
- }
156
-
157
- &-75 {
158
- width: calc(75% - 8px);
159
- }
160
-
161
- &-100 {
162
- width: 100%;
163
- }
164
- }
165
- }
166
-
167
- // 塗り
168
- .btn.has-background:not(.has-text-color) {
169
- color: #fff;
170
- /* 白っぽい色に対する対策 */
171
- &.has-vk-color-light-background-color,
172
- &.has-white-background-color {
173
- color:#212529;
174
- }
175
- }
176
-
177
- // アウトラインボタン（背景なし）の場合(.btnを含めるとカスタムカラーの 背景塗りなし:hover で背景が文字色と同じになる)
178
- .has-text-color.is-style-outline {
179
- background-color: transparent;
180
- border: 1px solid currentColor;
181
- &:hover {
182
- /* 応急処置：規定カラー */
183
- &.has-vk-color-primary-color {
184
- background-color: var(--vk-color-primary);
185
- }
186
- &.has-vk-color-secondary-color {
187
- background-color: $vk-color-secondary;
188
- }
189
- &.has-vk-color-success-color {
190
- background-color: $vk-color-success;
191
- }
192
- &.has-vk-color-info-color {
193
- background-color: $vk-color-info;
194
- }
195
- &.has-vk-color-warning-color {
196
- background-color: $vk-color-warning;
197
- }
198
- &.has-vk-color-danger-color {
199
- background-color: $vk-color-danger;
200
- }
201
- &.has-vk-color-light-color {
202
- background-color: $vk-color-light;
203
- }
204
- &.has-vk-color-dark-color {
205
- background-color: $vk-color-dark;
206
- }
207
- /* 応急処置：カラーパレットコア */
208
- &.has-black-color {
209
- background-color: #000000;
210
- }
211
- &.has-cyan-bluish-gray-color {
212
- background-color: #abb8c3;
213
- }
214
- &.has-white-color {
215
- background-color: #ffffff;
216
- }
217
- &.has-pale-pink-color {
218
- background-color: #f78da7;
219
- }
220
- &.has-vivid-red-color {
221
- background-color: #cf2e2e;
222
- }
223
- &.has-luminous-vivid-orange-color {
224
- background-color: #ff6900;
225
- }
226
- &.has-luminous-vivid-amber-color {
227
- background-color: #fcb900;
228
- }
229
- &.has-light-green-cyan-color {
230
- background-color: #7bdcb5;
231
- }
232
- &.has-vivid-green-cyan-color {
233
- background-color: #00d084;
234
- }
235
- &.has-pale-cyan-blue-color {
236
- background-color: #8ed1fc;
237
- }
238
- &.has-vivid-cyan-blue-color {
239
- background-color: #0693e3;
240
- }
241
- &.has-vivid-purple-color {
242
- background-color: #9b51e0;
243
- }
244
- /* 応急処置：カラーパレットVK */
245
- &.has-vk-color-primary-color {
246
- background-color: var(--vk-color-primary);
247
- }
248
- &.has-vk-color-primary-dark-color {
249
- background-color: var(--vk-color-primary-dark);
250
- }
251
- &.has-vk-color-primary-vivid-color {
252
- background-color: var(--vk-color-primary-vivid);
253
- }
254
- &.has-vk-color-custom-1-color {
255
- background-color: var(--vk-color-custom-1);
256
- }
257
- &.has-vk-color-custom-2-color {
258
- background-color: var(--vk-color-custom-2);
259
- }
260
- &.has-vk-color-custom-3-color {
261
- background-color: var(--vk-color-custom-3);
262
- }
263
- &.has-vk-color-custom-4-color {
264
- background-color: var(--vk-color-custom-4);
265
- }
266
- &.has-vk-color-custom-5-color {
267
- background-color: var(--vk-color-custom-5);
268
- }
269
- // ここから標準装備
270
- // background-color: currentColor;
271
- border: 1px solid #fff;
272
- .vk_button_link_before,
273
- .vk_button_link_txt,
274
- .vk_button_link_after,
275
- .vk_button_link_subCaption {
276
- color: #fff;
277
- }
278
- /* 白っぽい色に対する対策 */
279
- &.has-vk-color-light-color .vk_button_link_before,
280
- &.has-vk-color-light-color .vk_button_link_txt,
281
- &.has-vk-color-light-color .vk_button_link_after,
282
- &.has-vk-color-light-color .vk_button_link_subCaption,
283
- &.has-white-color .vk_button_link_before,
284
- &.has-white-color .vk_button_link_txt,
285
- &.has-white-color .vk_button_link_after,
286
- &.has-white-color .vk_button_link_subCaption {
287
- color:#212529;
288
- }
289
- }
290
- }
291
-
292
- // テキストのみ
293
- .has-text-color.vk_button_link-type-text {
294
- &:hover {
295
- /* 白っぽい色に対する対策 */
296
- &.has-vk-color-light-background-color .vk_button_link_before,
297
- &.has-vk-color-light-background-color .vk_button_link_txt,
298
- &.has-vk-color-light-background-color .vk_button_link_after,
299
- &.has-vk-color-light-background-color .vk_button_link_subCaption,
300
- &.has-white-color .vk_button_link_before,
301
- &.has-white-color .vk_button_link_txt,
302
- &.has-white-color .vk_button_link_after,
303
- &.has-white-color .vk_button_link_subCaption {
304
- color:#212529;
305
- }
306
- text-decoration: underline;
307
- text-decoration-style: dotted;
308
- text-underline-offset:2px;
309
- text-decoration-color:currentColor;
310
- text-decoration-thickness: 1px;
311
- }
312
- }
313
-
314
- &.vk_button-align {
315
- &-left {
316
- text-align: left;
317
- }
318
-
319
- &-center {
320
- text-align: center;
321
- }
322
-
323
- &-right {
324
- text-align: right;
325
- }
326
-
327
- &-block {
328
- display: block;
329
- .vk_button_link {
330
- width:100%;
331
- }
332
- }
333
- &-wide {
334
- display: block;
335
- margin-left: auto;
336
- margin-right: auto;
337
- max-width: 70%;
338
- .vk_button_btn,
339
- .btn {
340
- display: block;
341
- }
342
- }
343
- }
344
-
345
- .vk_button_link {
346
- min-width: 100px;
347
- min-height: 25px;
348
- box-sizing: border-box;
349
- &-type-text {
350
- box-shadow: none;
351
- padding: 0;
352
- &:hover {
353
- background: none;
354
- box-shadow: none;
355
- }
356
- }
357
-
358
- &.btn {
359
- // .btn指定がないと編集画面で標準の .btn の指定に負ける
360
- // X-T9で .has-background に対して padding:0; 指定しているので、左右余白が 0 にならないように上書き
361
- padding: 0.6em 1.5rem;
362
- user-select: text;
363
- text-decoration: none;
364
- font-size: calc( var(--vk-size-text) * 1 );
365
- }
366
- &.btn-lg{
367
- font-size:calc( var(--vk-size-text) * 1.25 );
368
- }
369
- &.btn-sm {
370
- font-size: calc( var(--vk-size-text) * .875 );
371
- }
372
- &_before {
373
- margin-right: 0.7rem;
374
- }
375
-
376
- &_after {
377
- margin-left: 0.7rem;
378
- }
379
-
380
- &_subCaption {
381
- display: block;
382
- overflow: hidden;
383
- margin: 0;
384
- font-size: 80%;
385
- }
386
- }
387
-
388
- .editor-rich-text {
389
- // Font Awesomeアイコンが管理画面側で改行されないために inline-block を指定
390
- display: inline-block;
391
- }
392
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/button/transforms.js DELETED
@@ -1,41 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { createBlock } from '@wordpress/blocks';
5
-
6
- /**
7
- * Internal dependencies
8
- */
9
- import { name } from './block.json';
10
-
11
- const transforms = {
12
- from: [
13
- {
14
- type: 'block',
15
- isMultiBlock: false,
16
- blocks: ['core/paragraph'],
17
- transform: ({ content }) => {
18
- const div = document.createElement('div');
19
- div.innerHTML = content;
20
- const text = div.innerText || '';
21
- const link = div.querySelector('a');
22
- const url = link?.getAttribute('href');
23
- const target = link?.getAttribute('target') ? true : false;
24
- return createBlock(name, {
25
- content: text,
26
- buttonUrl: url,
27
- buttonTarget: target,
28
- });
29
- },
30
- isMatch: (attributes) => {
31
- const div = document.createElement('div');
32
- div.innerHTML = attributes.content;
33
- const text = div.innerText || '';
34
- const links = div.querySelectorAll('a');
35
- return text.length <= 30 && links.length <= 1;
36
- },
37
- },
38
- ],
39
- };
40
-
41
- export default transforms;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq/block.json DELETED
@@ -1,18 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/faq",
4
- "title": "Classic FAQ",
5
- "category": "vk-blocks-cat",
6
- "description": "Displays a combination of questions and answers.",
7
- "textdomain": "vk-blocks",
8
- "attributes": {
9
- "heading": {
10
- "type": "string",
11
- "source": "html",
12
- "selector": "dt"
13
- }
14
- },
15
- "supports": {
16
- "anchor": true
17
- }
18
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq/deprecated/0.0.0/save.js DELETED
@@ -1,20 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes, className }) {
4
- const { heading, content } = attributes;
5
-
6
- return (
7
- <dl className={`${className} vk_faq`}>
8
- <RichText.Content
9
- tagName="dt"
10
- className={'vk_faq_title'}
11
- value={heading}
12
- />
13
- <RichText.Content
14
- tagName="dd"
15
- className={'vk_faq_content'}
16
- value={content}
17
- />
18
- </dl>
19
- );
20
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq/deprecated/0.0.1/save.js DELETED
@@ -1,20 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const { heading, content } = attributes;
5
-
6
- return (
7
- <dl className={'vk_faq'}>
8
- <RichText.Content
9
- tagName="dt"
10
- className={'vk_faq_title'}
11
- value={heading}
12
- />
13
- <RichText.Content
14
- tagName="dd"
15
- className={'vk_faq_content'}
16
- value={content}
17
- />
18
- </dl>
19
- );
20
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq/deprecated/0.0.2/save.js DELETED
@@ -1,17 +0,0 @@
1
- import { RichText, InnerBlocks } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const { heading } = attributes;
5
- return (
6
- <dl className={`vk_faq`}>
7
- <RichText.Content
8
- tagName="dt"
9
- className={'vk_faq_title'}
10
- value={heading}
11
- />
12
- <dd className={`vk_faq_content`}>
13
- <InnerBlocks.Content />
14
- </dd>
15
- </dl>
16
- );
17
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq/deprecated/0.58.6/save.js DELETED
@@ -1,17 +0,0 @@
1
- import { RichText, InnerBlocks } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const { heading } = attributes;
5
- return (
6
- <dl className={`vk_faq [accordion_trigger_switch]`}>
7
- <RichText.Content
8
- tagName="dt"
9
- className={'vk_faq_title'}
10
- value={heading}
11
- />
12
- <dd className={`vk_faq_content`}>
13
- <InnerBlocks.Content />
14
- </dd>
15
- </dl>
16
- );
17
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq/deprecated/index.js DELETED
@@ -1,41 +0,0 @@
1
- import save000 from './0.0.0/save';
2
- import save001 from './0.0.1/save';
3
- import save002 from './0.0.2/save';
4
- import save0_58_6 from './0.58.6/save';
5
-
6
- const blockAttributes = {
7
- heading: {
8
- type: 'string',
9
- source: 'html',
10
- selector: 'dt',
11
- },
12
- content: {
13
- type: 'string',
14
- source: 'html',
15
- selector: 'dd',
16
- },
17
- };
18
-
19
- const deprecated = [
20
- {
21
- attributes: blockAttributes,
22
- save: save000,
23
- },
24
- {
25
- attributes: blockAttributes,
26
- save: save001,
27
- },
28
- {
29
- attributes: {
30
- ...blockAttributes,
31
- },
32
- save: save002,
33
- },
34
- {
35
- attributes: {
36
- ...blockAttributes,
37
- },
38
- save: save0_58_6,
39
- },
40
- ];
41
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq/edit.js DELETED
@@ -1,52 +0,0 @@
1
- import { PanelBody, PanelRow } from '@wordpress/components';
2
- import {
3
- RichText,
4
- InnerBlocks,
5
- InspectorControls,
6
- useBlockProps,
7
- } from '@wordpress/block-editor';
8
- import { __ } from '@wordpress/i18n';
9
-
10
- export default function FAQEdit({ attributes, setAttributes }) {
11
- let massage;
12
- // eslint-disable-next-line no-undef
13
- if (vk_blocks_check.is_pro) {
14
- massage = __(
15
- 'If you want to be collapsing this block, you can set it at Setting > VK Blocks',
16
- 'vk-blocks'
17
- );
18
- } else {
19
- massage = __(
20
- 'You can be collapsing this block at VK Blocks Pro',
21
- 'vk-blocks'
22
- );
23
- }
24
- const { heading, content } = attributes;
25
- const TEMPLATE = [['core/paragraph', { content }]];
26
-
27
- const blockProps = useBlockProps({
28
- className: `vk_faq [accordion_trigger_switch]`,
29
- });
30
-
31
- return (
32
- <>
33
- <InspectorControls>
34
- <PanelBody title={__('Accordion Setting', 'vk-blocks')}>
35
- <PanelRow>{massage}</PanelRow>
36
- </PanelBody>
37
- </InspectorControls>
38
- <dl {...blockProps}>
39
- <RichText
40
- tagName="dt"
41
- className={'vk_faq_title'}
42
- onChange={(value) => setAttributes({ heading: value })}
43
- value={heading}
44
- placeholder={__('Please enter a question.', 'vk-blocks')}
45
- />
46
- <dd className={`vk_faq_content`}>
47
- <InnerBlocks template={TEMPLATE} />
48
- </dd>
49
- </dl>
50
- </>
51
- );
52
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/><path d="M5.07 0C3.57 0 2.35.49 1.4 1.47A5.2 5.2 0 000 5.24c0 1.54.48 2.81 1.43 3.79a4.87 4.87 0 003.64 1.44c1 0 1.85-.2 2.36-.53l1.35 1.39 1.38-1.38-1.19-1.21c.73-.9 1.17-2.1 1.17-3.5A4.9 4.9 0 005.07 0zM3.08 5.24c0-1.63.73-2.75 1.97-2.75 1.12 0 2 .9 2 2.75 0 .51-.06.93-.19 1.33l-.84-.86-1.39 1.35.84.86c-.14.05-.26.06-.4.06-1.16 0-1.99-.95-1.99-2.74zM13.52 7c-.91 0-1.69.64-1.69 1.55 0 .45.14.86.62 1.45-.96.47-1.45 1.17-1.45 1.96 0 1.25.89 2.04 2.09 2.04.73 0 1.3-.28 1.81-.8l.53.67H17l-1.31-1.61c.32-.43.55-.98.62-1.67h-1.1c-.04.3-.13.59-.24.8l-.83-1.07c.75-.43 1.14-.99 1.14-1.7 0-1.07-.81-1.62-1.76-1.62zM13 8.5c0-.36.27-.6.57-.6.33 0 .6.3.6.65 0 .42-.2.68-.67.97-.41-.5-.5-.73-.5-1.02zm-.78 3.5c0-.48.33-.87.9-1.13l1.1 1.42c-.36.44-.7.6-1.08.6a.93.93 0 01-.92-.9zM17.56 14L14 24h2.98l.45-1.43h3.07l.41 1.43H24l-3.52-10h-2.92zm1.45 3.35h.03l.87 3.08h-1.83l.93-3.08z" fill="#000"/></svg>
 
src/blocks/faq/index.js DELETED
@@ -1,70 +0,0 @@
1
- /**
2
- * Faq block type
3
- *
4
- */
5
- /**
6
- * Alert block type
7
- *
8
- */
9
- import { title, content } from '@vkblocks/utils/example-data';
10
- import { ReactComponent as Icon } from './icon.svg';
11
- import deprecated from './deprecated/';
12
- import edit from './edit';
13
- import metadata from './block.json';
14
- import save from './save';
15
- import { __ } from '@wordpress/i18n';
16
-
17
- const { name } = metadata;
18
-
19
- export { metadata, name };
20
-
21
- export const settings = {
22
- icon: <Icon />,
23
- styles: [
24
- {
25
- name: 'vk_faq-normal',
26
- label: __('Normal', 'vk-blocks'),
27
- isDefault: true,
28
- },
29
- {
30
- name: 'vk_faq-bgfill-circle',
31
- label: __('Bgfill Circle', 'vk-blocks'),
32
- },
33
- {
34
- name: 'vk_faq-bgfill-square',
35
- label: __('Bgfill Square', 'vk-blocks'),
36
- },
37
- {
38
- name: 'vk_faq-bgfill-rounded',
39
- label: __('Bgfill Rounded', 'vk-blocks'),
40
- },
41
- {
42
- name: 'vk_faq-border-circle',
43
- label: __('Border Circle', 'vk-blocks'),
44
- },
45
- {
46
- name: 'vk_faq-border-square',
47
- label: __('Border Square', 'vk-blocks'),
48
- },
49
- {
50
- name: 'vk_faq-border-rounded',
51
- label: __('Border Rounded', 'vk-blocks'),
52
- },
53
- ],
54
- example: {
55
- attributes: {
56
- heading: title,
57
- },
58
- innerBlocks: [
59
- {
60
- name: 'core/paragraph',
61
- attributes: {
62
- content,
63
- },
64
- },
65
- ],
66
- },
67
- save,
68
- edit,
69
- deprecated,
70
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq/index.php DELETED
@@ -1,68 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/faq` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register FAQ block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_faq() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/faq',
18
- VK_BLOCKS_DIR_URL . 'build/faq/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- // Register Style.
25
- if ( ! is_admin() ) {
26
- wp_register_script(
27
- 'vk-blocks/faq-script',
28
- VK_BLOCKS_DIR_URL . 'build/vk-faq2.min.js',
29
- array(),
30
- VK_BLOCKS_VERSION,
31
- true
32
- );
33
- }
34
-
35
- register_block_type(
36
- __DIR__,
37
- array(
38
- 'style' => 'vk-blocks/faq',
39
- 'script' => 'vk-blocks/faq-script',
40
- 'editor_style' => 'vk-blocks-build-editor-css',
41
- 'editor_script' => 'vk-blocks-build-js',
42
- )
43
- );
44
- }
45
- add_action( 'init', 'vk_blocks_register_block_faq', 99 );
46
-
47
- /**
48
- * Render faq block
49
- *
50
- * @param string $block_content block_content.
51
- * @param array $block block.
52
- * @return string
53
- */
54
- function vk_blocks_faq_render_callback( $block_content, $block ) {
55
- $vk_blocks_options = vk_blocks_get_options();
56
- if ( 'vk-blocks/faq' === $block['blockName'] ) {
57
- if ( ! empty( $vk_blocks_options['new_faq_accordion'] ) && 'open' === $vk_blocks_options['new_faq_accordion'] ) {
58
- $block_content = str_replace( '[accordion_trigger_switch]', 'vk_faq-accordion vk_faq-accordion-open', $block_content );
59
- } elseif ( ! empty( $vk_blocks_options['new_faq_accordion'] ) && 'close' === $vk_blocks_options['new_faq_accordion'] ) {
60
- $block_content = str_replace( '[accordion_trigger_switch]', 'vk_faq-accordion vk_faq-accordion-close', $block_content );
61
- } else {
62
- $block_content = str_replace( '[accordion_trigger_switch]', '', $block_content );
63
- }
64
- }
65
- return $block_content;
66
- }
67
-
68
- add_filter( 'render_block', 'vk_blocks_faq_render_callback', 10, 2 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq/save.js DELETED
@@ -1,21 +0,0 @@
1
- import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const { heading } = attributes;
5
- return (
6
- <dl
7
- {...useBlockProps.save({
8
- className: `vk_faq [accordion_trigger_switch]`,
9
- })}
10
- >
11
- <RichText.Content
12
- tagName="dt"
13
- className={'vk_faq_title'}
14
- value={heading}
15
- />
16
- <dd className={`vk_faq_content`}>
17
- <InnerBlocks.Content />
18
- </dd>
19
- </dl>
20
- );
21
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq/style.scss DELETED
@@ -1,212 +0,0 @@
1
- :root{
2
- --vk-color-border: rgba(0,0,0,.12);
3
- }
4
-
5
- $question-color: #e50000;
6
- $answer-color: #337ab7;
7
-
8
- @mixin question-bgcolor($color:#fff) {
9
- background-color: $question-color;
10
- color: $color !important;
11
- }
12
- @mixin answer-bgcolor($color:#fff) {
13
- background-color: $answer-color;
14
- color: $color !important;
15
- }
16
- @mixin question-bordercolor() {
17
- border: 1px solid $question-color;
18
- color:$question-color;
19
- }
20
- @mixin answer-bordercolor() {
21
- border: 1px solid $answer-color;
22
- color: $answer-color;
23
- }
24
-
25
- @mixin vk_faq-common($fweight:bold) {
26
- border:none;
27
- padding: 0.8rem 0.8rem 0.8rem 3rem;
28
- margin: 0;
29
- position: relative;
30
- font-weight: $fweight;
31
- &:before {
32
- position: absolute;
33
- left:0;
34
- top: 0.7rem;
35
- font-weight: 500;
36
- font-size:22px;
37
- line-height: 105%;
38
- width: 2.1rem;
39
- height: 2.1rem;
40
- line-height: 2.1rem;
41
- text-align: center;
42
- position: absolute;
43
- font-family:"areal";
44
- }
45
- p{
46
- &:first-of-type{
47
- margin-top:0;
48
- }
49
- &:last-child{
50
- margin-bottom:0;
51
- }
52
- }
53
- }
54
-
55
- /* style
56
- --------------------------------------------*/
57
- .is-style-vk_faq{
58
- &-normal{
59
- .vk_faq_title:before{
60
- color: $question-color;
61
- }
62
- .vk_faq_content:before{
63
- color: $answer-color;
64
- }
65
- }
66
- &-bgfill-circle,
67
- &-bgfill-square,
68
- &-bgfill-rounded{
69
- .vk_faq_title:before{
70
- @include question-bgcolor;
71
- }
72
- .vk_faq_content:before{
73
- @include answer-bgcolor;
74
- }
75
- }
76
- &-bgfill-circle,
77
- &-border-circle{
78
- .vk_faq_title:before,
79
- .vk_faq_content:before{
80
- border-radius: 50%;
81
- }
82
- }
83
- &-bgfill-rounded,
84
- &-border-rounded{
85
- .vk_faq_title:before,
86
- .vk_faq_content:before{
87
- border-radius: 4px;
88
- }
89
- }
90
- &-border-circle,
91
- &-border-square,
92
- &-border-rounded{
93
- .vk_faq_title:before{
94
- @include question-bordercolor;
95
- }
96
- .vk_faq_content:before{
97
- @include answer-bordercolor;
98
- }
99
- }
100
- }
101
-
102
-
103
- /* .qaItem
104
- /*-------------------------------------------*/
105
- .vk_faq {
106
- display:block;
107
- overflow:hidden;
108
- border-bottom:1px solid var(--vk-color-border);
109
- padding:0px 0px 1rem;
110
- margin: 0 auto 1rem auto;
111
- width:100%;
112
- position: relative;
113
-
114
- .vk_faq_title {
115
- @include vk_faq-common();
116
- font-size:16px;
117
- border-bottom: 1px dotted var(--vk-color-border);
118
- &:before { content:"Q";color:#e50000; font-weight: 500; }
119
- p {
120
- line-height: 1.7;
121
- }
122
- @media (min-width: 768px) {
123
- font-size:18px;
124
- }
125
- }
126
- .vk_faq_content {
127
- @include vk_faq-common(normal);
128
- transition: .25s;
129
- &:before { content:"A";color:#337ab7; }
130
-
131
- }
132
- } //.vk_faq
133
-
134
-
135
- /* 開閉機能
136
- /*-------------------------------------------*/
137
- .vk_faq{
138
- &.vk_faq-accordion-close,
139
- &.vk_faq-accordion-open{
140
- padding-bottom: 0;
141
- margin-bottom: 0;
142
- .vk_faq-body{
143
- margin-top: 0;
144
- margin-bottom: 0;
145
- }
146
- .vk_faq_title{
147
- padding-right: 2rem;
148
- @media (min-width: 768px) {
149
- padding-right: 2.5rem;
150
- }
151
- //矢印共通デザイン
152
- &::after{
153
- position: absolute;
154
- top: 50%;
155
- right: unset;
156
- right: 2.5rem;
157
- content: "";
158
- width: 8px;
159
- height: 8px;
160
- border-right: 1px solid #222;
161
- border-top: 1px solid #222;
162
- transition: border-color .3s ease,-webkit-transform .6s ease;
163
- -webkit-transition: border-color .3s ease,-webkit-transform .6s ease;
164
- transition: border-color .3s ease,transform .6s ease;
165
- transition: border-color .3s ease,transform .6s ease,-webkit-transform .6s ease;
166
- }
167
- }
168
- }
169
-
170
- //矢印開閉時の向き
171
- &.vk_faq-accordion{
172
- &-close{
173
- .vk_faq_title{
174
- border-bottom: none;
175
- }
176
- .vk_faq_title::after {
177
- -webkit-transform: translate(32px, -5px) rotate(135deg);
178
- transform: translate(32px, -5px) rotate(135deg);
179
-
180
- }
181
- }
182
- &-open{
183
-
184
- .vk_faq_title::after {
185
- -webkit-transform: translate(32px,-2px) rotate(-45deg);
186
- transform: translate(32px,-2px) rotate(-45deg);
187
- }
188
-
189
- }
190
- .vk_faq_title{
191
- cursor: pointer;
192
- }
193
- }
194
-
195
- //アンサーオープン時
196
- .vk_faq_content-accordion-open{
197
- height: auto;
198
- overflow: hidden;
199
- opacity: 1;
200
- transition: .25s;
201
- margin-bottom: 10px;
202
- }
203
- //アンサークローズ時
204
- .vk_faq_content-accordion-close{
205
- padding-top:0;
206
- padding-bottom: 0;
207
- height: 0;
208
- opacity: 0;
209
- overflow: hidden;
210
- }
211
-
212
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-a/block.json DELETED
@@ -1,15 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/faq2-a",
4
- "category": "vk-blocks-cat",
5
- "title": "FAQ Answer",
6
- "parent": [
7
- "vk-blocks/faq2"
8
- ],
9
- "description": "Answer area where you can add blocks freely.",
10
- "textdomain": "vk-blocks",
11
- "supports": {
12
- "anchor": true,
13
- "reusable": false
14
- }
15
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-a/deprecated/0.58.7/save.js DELETED
@@ -1,9 +0,0 @@
1
- import { InnerBlocks } from '@wordpress/block-editor';
2
-
3
- export default function save() {
4
- return (
5
- <dd className={`vk_faq_content`}>
6
- <InnerBlocks.Content />
7
- </dd>
8
- );
9
- }
 
 
 
 
 
 
 
 
 
src/blocks/faq2-a/deprecated/index.js DELETED
@@ -1,11 +0,0 @@
1
- import save000 from './0.58.7/save';
2
-
3
- const blockAttributes = {};
4
-
5
- const deprecated = [
6
- {
7
- attributes: blockAttributes,
8
- save: save000,
9
- },
10
- ];
11
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-a/edit.js DELETED
@@ -1,12 +0,0 @@
1
- import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function FAQ2AEdit() {
4
- const blockProps = useBlockProps({
5
- className: 'vk_faq_content',
6
- });
7
- return (
8
- <dd {...blockProps}>
9
- <InnerBlocks templateLock={false} template={[['core/paragraph']]} />
10
- </dd>
11
- );
12
- }
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-a/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/><path d="M14.99 0L10 14h4.17l.63-2h4.3l.57 2H24L19.07 0h-4.08zm2.03 4.69h.04L18.27 9h-2.56l1.3-4.31z" fill="#000"/></svg>
 
src/blocks/faq2-a/index.js DELETED
@@ -1,30 +0,0 @@
1
- /**
2
- * FAQ Answer Block
3
- */
4
- import { content } from '../../utils/example-data';
5
- import { ReactComponent as Icon } from './icon.svg';
6
- import edit from './edit';
7
- import metadata from './block.json';
8
- import save from './save';
9
- import deprecated from './deprecated/index';
10
-
11
- const { name } = metadata;
12
-
13
- export { metadata, name };
14
-
15
- export const settings = {
16
- icon: <Icon />,
17
- example: {
18
- innerBlocks: [
19
- {
20
- name: 'core/paragraph',
21
- attributes: {
22
- content,
23
- },
24
- },
25
- ],
26
- },
27
- edit,
28
- save,
29
- deprecated,
30
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-a/index.php DELETED
@@ -1,22 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/faq2-a` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register FAQ2A block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_faq2_a() {
14
- register_block_type(
15
- __DIR__,
16
- array(
17
- 'editor_style' => 'vk-blocks-build-editor-css',
18
- 'editor_script' => 'vk-blocks-build-js',
19
- )
20
- );
21
- }
22
- add_action( 'init', 'vk_blocks_register_block_faq2_a', 99 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-a/save.js DELETED
@@ -1,13 +0,0 @@
1
- import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function save() {
4
- return (
5
- <dd
6
- {...useBlockProps.save({
7
- className: `vk_faq_content`,
8
- })}
9
- >
10
- <InnerBlocks.Content />
11
- </dd>
12
- );
13
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-q/block.json DELETED
@@ -1,16 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/faq2-q",
4
- "title": "FAQ Question",
5
- "category": "vk-blocks-cat",
6
- "parent": [
7
- "vk-blocks/faq2"
8
- ],
9
- "description": "Question area where you can freely add blocks.",
10
- "textdomain": "vk-blocks",
11
- "supports": {
12
- "anchor": true,
13
- "className": true,
14
- "reusable": false
15
- }
16
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-q/deprecated/0.58.7/save.js DELETED
@@ -1,9 +0,0 @@
1
- import { InnerBlocks } from '@wordpress/block-editor';
2
-
3
- export default function save() {
4
- return (
5
- <dt className={`vk_faq_title`}>
6
- <InnerBlocks.Content />
7
- </dt>
8
- );
9
- }
 
 
 
 
 
 
 
 
 
src/blocks/faq2-q/deprecated/index.js DELETED
@@ -1,11 +0,0 @@
1
- import save000 from './0.58.7/save';
2
-
3
- const blockAttributes = {};
4
-
5
- const deprecated = [
6
- {
7
- attributes: blockAttributes,
8
- save: save000,
9
- },
10
- ];
11
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-q/edit.js DELETED
@@ -1,12 +0,0 @@
1
- import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function FAQ2QEit() {
4
- const blockProps = useBlockProps({
5
- className: 'vk_faq_title',
6
- });
7
- return (
8
- <dt {...blockProps}>
9
- <InnerBlocks templateLock={false} template={[['core/paragraph']]} />
10
- </dt>
11
- );
12
- }
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-q/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/><path d="M16.98 0c-2.06 0-3.74.7-5.03 2.08A7.44 7.44 0 0010 7.4a7.5 7.5 0 001.97 5.36 6.62 6.62 0 005.01 2.03c1.37 0 2.55-.3 3.26-.75L22.09 16 24 14.06l-1.64-1.72c1-1.26 1.6-2.97 1.6-4.94 0-2.18-.65-3.98-1.95-5.34A6.67 6.67 0 0016.98 0zm-2.74 7.4c0-2.3 1-3.88 2.72-3.88 1.54 0 2.76 1.27 2.76 3.88 0 .73-.1 1.32-.27 1.88l-1.16-1.21-1.9 1.9 1.15 1.22c-.2.06-.37.08-.56.08-1.6 0-2.74-1.34-2.74-3.87z" fill="#000"/></svg>
 
src/blocks/faq2-q/index.js DELETED
@@ -1,30 +0,0 @@
1
- /**
2
- * FAQ Question Block
3
- */
4
- import { title } from '../../utils/example-data';
5
- import { ReactComponent as Icon } from './icon.svg';
6
- import edit from './edit';
7
- import metadata from './block.json';
8
- import save from './save';
9
- import deprecated from './deprecated/index';
10
-
11
- const { name } = metadata;
12
-
13
- export { metadata, name };
14
-
15
- export const settings = {
16
- icon: <Icon />,
17
- example: {
18
- innerBlocks: [
19
- {
20
- name: 'core/paragraph',
21
- attributes: {
22
- content: title,
23
- },
24
- },
25
- ],
26
- },
27
- edit,
28
- save,
29
- deprecated,
30
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-q/index.php DELETED
@@ -1,23 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/faq2-q` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register FAQ2 block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_faq2_q() {
14
- register_block_type(
15
- __DIR__,
16
- array(
17
- 'editor_style' => 'vk-blocks-build-editor-css',
18
- 'editor_script' => 'vk-blocks-build-js',
19
- )
20
- );
21
- }
22
- add_action( 'init', 'vk_blocks_register_block_faq2_q', 99 );
23
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2-q/save.js DELETED
@@ -1,13 +0,0 @@
1
- import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function save() {
4
- return (
5
- <dt
6
- {...useBlockProps.save({
7
- className: `vk_faq_title`,
8
- })}
9
- >
10
- <InnerBlocks.Content />
11
- </dt>
12
- );
13
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2/block.json DELETED
@@ -1,12 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/faq2",
4
- "category": "vk-blocks-cat",
5
- "title": "New FAQ",
6
- "description": "It displays a combination of questions and answers. You can freely add blocks to the question area as well.",
7
- "textdomain": "vk-blocks",
8
- "supports": {
9
- "anchor": true,
10
- "className": true
11
- }
12
- }
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2/deprecated/0.0.0/save.js DELETED
@@ -1,9 +0,0 @@
1
- import { InnerBlocks } from '@wordpress/block-editor';
2
-
3
- export default function save() {
4
- return (
5
- <dl className={`vk_faq`}>
6
- <InnerBlocks.Content />
7
- </dl>
8
- );
9
- }
 
 
 
 
 
 
 
 
 
src/blocks/faq2/deprecated/1.3.9/save.js DELETED
@@ -1,13 +0,0 @@
1
- import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function save() {
4
- return (
5
- <dl
6
- {...useBlockProps.save({
7
- className: `vk_faq [accordion_trigger_switch]`,
8
- })}
9
- >
10
- <InnerBlocks.Content />
11
- </dl>
12
- );
13
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2/deprecated/index.js DELETED
@@ -1,24 +0,0 @@
1
- import save000 from './0.0.0/save';
2
- import save1_3_9 from './1.3.9/save';
3
- const blockAttributes = {
4
- heading: {
5
- type: 'string',
6
- source: 'html',
7
- selector: 'dt',
8
- },
9
- content: {
10
- type: 'string',
11
- },
12
- };
13
-
14
- const deprecated = [
15
- {
16
- attributes: blockAttributes,
17
- save: save1_3_9,
18
- },
19
- {
20
- attributes: blockAttributes,
21
- save: save000,
22
- }
23
- ];
24
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2/edit.js DELETED
@@ -1,52 +0,0 @@
1
- import {
2
- InnerBlocks,
3
- InspectorControls,
4
- useBlockProps,
5
- } from '@wordpress/block-editor';
6
- import { PanelBody, PanelRow } from '@wordpress/components';
7
- import { __ } from '@wordpress/i18n';
8
-
9
- export default function FAQ2Edit() {
10
- const blockProps = useBlockProps({
11
- className: 'vk_faq',
12
- });
13
-
14
- const ALLOWED_BLOCKS = ['vk-blocks/faq2-q', 'vk-blocks/faq2-a'];
15
-
16
- const TEMPLATE = [['vk-blocks/faq2-q'], ['vk-blocks/faq2-a']];
17
-
18
- let massage;
19
- // eslint-disable-next-line no-undef
20
- if (vk_blocks_check.is_pro) {
21
- massage = __(
22
- 'If you want to be collapsing this block, you can set it at Setting > VK Blocks',
23
- 'vk-blocks'
24
- );
25
- } else {
26
- massage = __(
27
- 'You can be collapsing this block at VK Blocks Pro',
28
- 'vk-blocks'
29
- );
30
- }
31
-
32
- return (
33
- <>
34
- <InspectorControls>
35
- <PanelBody title={__('Accordion Setting', 'vk-blocks')}>
36
- <PanelRow>{massage}</PanelRow>
37
- </PanelBody>
38
- </InspectorControls>
39
- <div {...blockProps}>
40
- <div className="vk_faq-header"></div>
41
- <dl className="vk_faq-body">
42
- <InnerBlocks
43
- allowedBlocks={ALLOWED_BLOCKS}
44
- template={TEMPLATE}
45
- templateLock="all"
46
- />
47
- </dl>
48
- <div className="vk_faq-footer"></div>
49
- </div>
50
- </>
51
- );
52
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24 0h-8v8h8V0zm-4.75 1v2.25H17v1.5h2.25V7h1.5V4.75H23v-1.5h-2.25V1h-1.5z" fill="#000"/><path d="M5.07 0C3.57 0 2.35.49 1.4 1.47A5.2 5.2 0 000 5.24c0 1.54.48 2.81 1.43 3.79a4.87 4.87 0 003.64 1.44c1 0 1.85-.2 2.36-.53l1.35 1.39 1.38-1.38-1.19-1.21c.73-.9 1.17-2.1 1.17-3.5A4.9 4.9 0 005.07 0zM3.08 5.24c0-1.63.73-2.75 1.97-2.75 1.12 0 2 .9 2 2.75 0 .51-.06.93-.19 1.33l-.84-.86-1.39 1.35.84.86c-.14.05-.26.06-.4.06-1.16 0-1.99-.95-1.99-2.74zM13.52 7c-.91 0-1.69.64-1.69 1.55 0 .45.14.86.62 1.45-.96.47-1.45 1.17-1.45 1.96 0 1.25.89 2.04 2.09 2.04.73 0 1.3-.28 1.81-.8l.53.67H17l-1.31-1.61c.32-.43.55-.98.62-1.67h-1.1c-.04.3-.13.59-.24.8l-.83-1.07c.75-.43 1.14-.99 1.14-1.7 0-1.07-.81-1.62-1.76-1.62zM13 8.5c0-.36.27-.6.57-.6.33 0 .6.3.6.65 0 .42-.2.68-.67.97-.41-.5-.5-.73-.5-1.02zm-.78 3.5c0-.48.33-.87.9-1.13l1.1 1.42c-.36.44-.7.6-1.08.6a.93.93 0 01-.92-.9zM17.56 14L14 24h2.98l.45-1.43h3.07l.41 1.43H24l-3.52-10h-2.92zm1.45 3.35h.03l.87 3.08h-1.83l.93-3.08z" fill="#000"/></svg>
 
src/blocks/faq2/index.js DELETED
@@ -1,78 +0,0 @@
1
- /**
2
- * FAQ Outer Block
3
- */
4
- import { title, content } from '../../utils/example-data';
5
- import { ReactComponent as Icon } from './icon.svg';
6
- import deprecated from './deprecated/index';
7
- import edit from './edit';
8
- import metadata from './block.json';
9
- import save from './save';
10
- import { __ } from '@wordpress/i18n';
11
-
12
- const { name } = metadata;
13
-
14
- export { metadata, name };
15
-
16
- export const settings = {
17
- icon: <Icon />,
18
- styles: [
19
- {
20
- name: 'vk_faq-normal',
21
- label: __('Normal', 'vk-blocks'),
22
- isDefault: true,
23
- },
24
- {
25
- name: 'vk_faq-bgfill-circle',
26
- label: __('Bgfill Circle', 'vk-blocks'),
27
- },
28
- {
29
- name: 'vk_faq-bgfill-square',
30
- label: __('Bgfill Square', 'vk-blocks'),
31
- },
32
- {
33
- name: 'vk_faq-bgfill-rounded',
34
- label: __('Bgfill Rounded', 'vk-blocks'),
35
- },
36
- {
37
- name: 'vk_faq-border-circle',
38
- label: __('Border Circle', 'vk-blocks'),
39
- },
40
- {
41
- name: 'vk_faq-border-square',
42
- label: __('Border Square', 'vk-blocks'),
43
- },
44
- {
45
- name: 'vk_faq-border-rounded',
46
- label: __('Border Rounded', 'vk-blocks'),
47
- },
48
- ],
49
- example: {
50
- innerBlocks: [
51
- {
52
- name: 'vk-blocks/faq2-q',
53
- innerBlocks: [
54
- {
55
- name: 'core/paragraph',
56
- attributes: {
57
- content: title,
58
- },
59
- },
60
- ],
61
- },
62
- {
63
- name: 'vk-blocks/faq2-a',
64
- innerBlocks: [
65
- {
66
- name: 'core/paragraph',
67
- attributes: {
68
- content,
69
- },
70
- },
71
- ],
72
- },
73
- ],
74
- },
75
- edit,
76
- save,
77
- deprecated,
78
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2/index.php DELETED
@@ -1,68 +0,0 @@
1
- <?php
2
- /**
3
- * VK Blocks - Faq2 Blocks
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register FAQ2 block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_faq2() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/faq2',
18
- VK_BLOCKS_DIR_URL . 'build/faq/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- // Register Style.
25
- if ( ! is_admin() ) {
26
- wp_register_script(
27
- 'vk-blocks-faq2',
28
- VK_BLOCKS_DIR_URL . 'build/vk-faq2.min.js',
29
- array(),
30
- VK_BLOCKS_VERSION,
31
- true
32
- );
33
- }
34
-
35
- register_block_type(
36
- __DIR__,
37
- array(
38
- 'style' => 'vk-blocks/faq2',
39
- 'script' => 'vk-blocks-faq2',
40
- 'editor_style' => 'vk-blocks-build-editor-css',
41
- 'editor_script' => 'vk-blocks-build-js',
42
- )
43
- );
44
- }
45
- add_action( 'init', 'vk_blocks_register_block_faq2', 99 );
46
-
47
- /**
48
- * Render faq2 block
49
- *
50
- * @param string $block_content block_content.
51
- * @param array $block block.
52
- * @return string
53
- */
54
- function vk_blocks_faq2_render_callback( $block_content, $block ) {
55
- $vk_blocks_options = vk_blocks_get_options();
56
- if ( 'vk-blocks/faq2' === $block['blockName'] ) {
57
- if ( ! empty( $vk_blocks_options['new_faq_accordion'] ) && 'open' === $vk_blocks_options['new_faq_accordion'] ) {
58
- $block_content = str_replace( '[accordion_trigger_switch]', 'vk_faq-accordion vk_faq-accordion-open', $block_content );
59
- } elseif ( ! empty( $vk_blocks_options['new_faq_accordion'] ) && 'close' === $vk_blocks_options['new_faq_accordion'] ) {
60
- $block_content = str_replace( '[accordion_trigger_switch]', 'vk_faq-accordion vk_faq-accordion-close', $block_content );
61
- } else {
62
- $block_content = str_replace( '[accordion_trigger_switch]', '', $block_content );
63
- }
64
- }
65
- return $block_content;
66
- }
67
-
68
- add_filter( 'render_block', 'vk_blocks_faq2_render_callback', 10, 2 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2/save.js DELETED
@@ -1,16 +0,0 @@
1
- import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function save() {
4
- const blockProps = useBlockProps.save({
5
- className: 'vk_faq [accordion_trigger_switch]',
6
- });
7
- return (
8
- <div {...blockProps}>
9
- <div className="vk_faq-header"></div>
10
- <dl className="vk_faq-body">
11
- <InnerBlocks.Content />
12
- </dl>
13
- <div className="vk_faq-footer"></div>
14
- </div>
15
- );
16
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/faq2/view.js DELETED
@@ -1,45 +0,0 @@
1
- const vkFaq2Container = document.getElementsByClassName('vk_faq-accordion');
2
- let vkFaq2A;
3
-
4
- const FAQ2ToggleLoop = (i) => {
5
- if (vkFaq2Container[i].classList.contains('vk_faq-accordion-open')) {
6
- vkFaq2Container[i]
7
- .querySelector('.vk_faq_content')
8
- .classList.add('vk_faq_content-accordion-open');
9
- }
10
-
11
- if (vkFaq2Container[i].classList.contains('vk_faq-accordion-close')) {
12
- vkFaq2Container[i]
13
- .querySelector('.vk_faq_content')
14
- .classList.add('vk_faq_content-accordion-close');
15
- }
16
-
17
- vkFaq2Container[i].querySelector('.vk_faq_title').addEventListener(
18
- 'click',
19
- () => {
20
- vkFaq2A = vkFaq2Container[i].querySelector('.vk_faq_content');
21
- if (
22
- vkFaq2Container[i].classList.contains('vk_faq-accordion-open')
23
- ) {
24
- vkFaq2Container[i].classList.remove('vk_faq-accordion-open');
25
- vkFaq2Container[i].classList.add('vk_faq-accordion-close');
26
-
27
- vkFaq2A.classList.remove('vk_faq_content-accordion-open');
28
- vkFaq2A.classList.add('vk_faq_content-accordion-close');
29
- } else if (
30
- vkFaq2Container[i].classList.contains('vk_faq-accordion-close')
31
- ) {
32
- vkFaq2Container[i].classList.remove('vk_faq-accordion-close');
33
- vkFaq2Container[i].classList.add('vk_faq-accordion-open');
34
-
35
- vkFaq2A.classList.remove('vk_faq_content-accordion-close');
36
- vkFaq2A.classList.add('vk_faq_content-accordion-open');
37
- }
38
- },
39
- false
40
- );
41
- };
42
-
43
- for (let i = 0; i < vkFaq2Container.length; i++) {
44
- FAQ2ToggleLoop(i);
45
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/flow/block.json DELETED
@@ -1,35 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/flow",
4
- "category": "vk-blocks-cat",
5
- "title": "Flow",
6
- "attributes": {
7
- "heading": {
8
- "type": "string",
9
- "source": "html",
10
- "selector": "dt"
11
- },
12
- "content": {
13
- "type": "string",
14
- "source": "html",
15
- "selector": "dd"
16
- },
17
- "arrowFlag": {
18
- "type": "string",
19
- "default": "vk_flow-arrow-on"
20
- },
21
- "insertImage": {
22
- "type": "string",
23
- "default": null
24
- },
25
- "insertImageAlt": {
26
- "type": "string",
27
- "default": null
28
- }
29
- },
30
- "description": "Displays a sequential description in time series.",
31
- "textdomain": "vk-blocks",
32
- "supports": {
33
- "className": true
34
- }
35
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/flow/deprecated/0.0.0/save.js DELETED
@@ -1,31 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const { heading, content, insertImage, arrowFlag } = attributes;
5
-
6
- return (
7
- <div className={`${arrowFlag} vk_flow`}>
8
- <div className={'vk_flow_frame'}>
9
- <dl className={'vk_flow_frame_text'}>
10
- <RichText.Content
11
- tagName="dt"
12
- className={'vk_flow_frame_text_title'}
13
- value={heading}
14
- />
15
- <RichText.Content
16
- tagName="dd"
17
- className={'vk_flow_frame_text_content'}
18
- value={content}
19
- />
20
- </dl>
21
- {insertImage ? (
22
- <div className={'vk_flow_frame_image'}>
23
- <img src={insertImage} alt="" />
24
- </div>
25
- ) : (
26
- ''
27
- )}
28
- </div>
29
- </div>
30
- );
31
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/flow/deprecated/1.8.0/save.js DELETED
@@ -1,29 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const { heading, content, insertImage, arrowFlag } = attributes;
5
-
6
- return (
7
- <div {...useBlockProps.save({ className: `${arrowFlag} vk_flow` })}>
8
- <div className={'vk_flow_frame'}>
9
- <dl className={'vk_flow_frame_text'}>
10
- <RichText.Content
11
- tagName="dt"
12
- className={'vk_flow_frame_text_title'}
13
- value={heading}
14
- />
15
- <RichText.Content
16
- tagName="dd"
17
- className={'vk_flow_frame_text_content'}
18
- value={content}
19
- />
20
- </dl>
21
- {insertImage && (
22
- <div className={'vk_flow_frame_image'}>
23
- <img src={insertImage} alt="" />
24
- </div>
25
- )}
26
- </div>
27
- </div>
28
- );
29
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/flow/deprecated/index.js DELETED
@@ -1,36 +0,0 @@
1
- import save000 from './0.0.0/save';
2
- import save1_8_0 from './1.8.0/save';
3
-
4
-
5
- const blockAttributes = {
6
- heading: {
7
- type: 'string',
8
- source: 'html',
9
- selector: 'dt',
10
- },
11
- content: {
12
- type: 'string',
13
- source: 'html',
14
- selector: 'dd',
15
- },
16
- arrowFlag: {
17
- type: 'string',
18
- default: 'vk_flow-arrow-on',
19
- },
20
- insertImage: {
21
- type: 'string',
22
- default: null, // no image by default!
23
- },
24
- }
25
-
26
- const deprecated = [
27
- {
28
- attributes: blockAttributes,
29
- save: save1_8_0,
30
- },
31
- {
32
- attributes: blockAttributes,
33
- save: save000,
34
- },
35
- ];
36
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/flow/edit.js DELETED
@@ -1,100 +0,0 @@
1
- import {
2
- RichText,
3
- InspectorControls,
4
- MediaUpload,
5
- useBlockProps,
6
- } from '@wordpress/block-editor';
7
- import { __ } from '@wordpress/i18n';
8
-
9
- import { RadioControl, PanelBody, Button } from '@wordpress/components';
10
-
11
- export default function FlowEdit({ attributes, setAttributes, clientId }) {
12
- const { heading, content, insertImage, arrowFlag, insertImageAlt } =
13
- attributes;
14
- const blockProps = useBlockProps({
15
- className: `${arrowFlag} vk_flow`,
16
- });
17
-
18
- return (
19
- <>
20
- <InspectorControls>
21
- <PanelBody title={__('Display of arrow', 'vk-blocks')}>
22
- <RadioControl
23
- selected={arrowFlag}
24
- options={[
25
- {
26
- label: __('Arrow display', 'vk-blocks'),
27
- value: 'vk_flow-arrow-on',
28
- },
29
- {
30
- label: __('Arrow hidden', 'vk-blocks'),
31
- value: 'vk_flow-arrow-off',
32
- },
33
- ]}
34
- onChange={(value) =>
35
- setAttributes({ arrowFlag: value })
36
- }
37
- />
38
- </PanelBody>
39
- </InspectorControls>
40
-
41
- <div {...blockProps}>
42
- <div className={'vk_flow_frame'}>
43
- <dl className={'vk_flow_frame_text'}>
44
- <RichText
45
- key={`${clientId}2`}
46
- tagName="dt"
47
- className={'vk_flow_frame_text_title'}
48
- onChange={(value) =>
49
- setAttributes({ heading: value })
50
- }
51
- value={heading}
52
- placeholder={__('Input title', 'vk-blocks')}
53
- />
54
- <RichText
55
- key={`${clientId}3`}
56
- tagName="dd"
57
- className={'vk_flow_frame_text_content'}
58
- onChange={(value) =>
59
- setAttributes({ content: value })
60
- }
61
- value={content}
62
- placeholder={__('Input content', 'vk-blocks')}
63
- />
64
- </dl>
65
- <div className={'vk_flow_frame_image'}>
66
- <MediaUpload
67
- onSelect={(value) => {
68
- setAttributes({ insertImage: value.url });
69
- setAttributes({ insertImageAlt: value.alt });
70
- }}
71
- type="image"
72
- className={'vk_flow_frame_image'}
73
- value={insertImage}
74
- render={({ open }) => (
75
- <Button
76
- onClick={open}
77
- className={
78
- insertImage
79
- ? 'image-button'
80
- : 'button button-large'
81
- }
82
- >
83
- {!insertImage ? (
84
- __('Select image', 'vk-blocks')
85
- ) : (
86
- <img
87
- className={'icon-image'}
88
- src={insertImage}
89
- alt={insertImageAlt}
90
- />
91
- )}
92
- </Button>
93
- )}
94
- />
95
- </div>
96
- </div>
97
- </div>
98
- </>
99
- );
100
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/flow/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/><path d="M12.5 14L9 10h7l-3.5 4z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23 1H1v6h22V1zM0 0v8h24V0H0z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20 4.5H4v-1h16v1z" fill="#000"/></svg>
 
src/blocks/flow/index.js DELETED
@@ -1,29 +0,0 @@
1
- /**
2
- * Flow block type
3
- *
4
- */
5
- import deprecated from './deprecated/';
6
- import { ReactComponent as Icon } from './icon.svg';
7
- import { content, title, iconPicture } from '../../utils/example-data';
8
- import edit from './edit';
9
- import metadata from './block.json';
10
- import save from './save';
11
-
12
- const { name } = metadata;
13
-
14
- export { metadata, name };
15
-
16
- export const settings = {
17
- icon: <Icon />,
18
- example: {
19
- attributes: {
20
- heading: title,
21
- content,
22
- arrowFlag: 'vk_flow-arrow-on',
23
- insertImage: iconPicture,
24
- },
25
- },
26
- edit,
27
- save,
28
- deprecated,
29
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/flow/index.php DELETED
@@ -1,34 +0,0 @@
1
- <?php
2
- /**
3
- * VK Blocks - Flow Blocks
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register Flow block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_flow() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/flow',
18
- VK_BLOCKS_DIR_URL . 'build/flow/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- register_block_type(
25
- __DIR__,
26
- array(
27
- 'style' => 'vk-blocks/flow',
28
- 'editor_style' => 'vk-blocks-build-editor-css',
29
- 'editor_script' => 'vk-blocks-build-js',
30
- )
31
- );
32
- }
33
- add_action( 'init', 'vk_blocks_register_block_flow', 99 );
34
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/flow/save.js DELETED
@@ -1,30 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const { heading, content, insertImage, insertImageAlt, arrowFlag } =
5
- attributes;
6
-
7
- return (
8
- <div {...useBlockProps.save({ className: `${arrowFlag} vk_flow` })}>
9
- <div className={'vk_flow_frame'}>
10
- <dl className={'vk_flow_frame_text'}>
11
- <RichText.Content
12
- tagName="dt"
13
- className={'vk_flow_frame_text_title'}
14
- value={heading}
15
- />
16
- <RichText.Content
17
- tagName="dd"
18
- className={'vk_flow_frame_text_content'}
19
- value={content}
20
- />
21
- </dl>
22
- {insertImage && (
23
- <div className={'vk_flow_frame_image'}>
24
- <img src={insertImage} alt={insertImageAlt} />
25
- </div>
26
- )}
27
- </div>
28
- </div>
29
- );
30
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/flow/style.scss DELETED
@@ -1,96 +0,0 @@
1
- //* .flowBox
2
- /*-------------------------------------------*/
3
- $xs-max: 575.98px;
4
- $sm-max: 767.98px;
5
- $md-max: 991.98px;
6
- $lg-max: 1199.98px;
7
- $xl-max: 1399.98px;
8
-
9
- $sm-min: 576px;
10
- $md-min: 768px;
11
- $lg-min: 992px;
12
- $xl-min: 1200px;
13
- $xxl-min: 1200px;
14
-
15
- .vk_flow{ // 編集画面でcssの指定が軽くて負けるので、優先させるため記述
16
- margin-bottom: 0;
17
- .vk_flow_frame {
18
- display: flex;
19
- padding: 20px 25px;
20
- border: 3px solid #e5e5e5;
21
- margin: 0;
22
- justify-content: space-between;
23
- @media (max-width: $xs-max) {
24
- flex-wrap: wrap;
25
- }
26
- }
27
-
28
- .vk_flow_frame_text {
29
- display: block;
30
- overflow: hidden;
31
- margin: 0;
32
- box-sizing: border-box;
33
- width: 100%;
34
- @media (max-width: $xs-max) {
35
- margin-bottom: 1em;
36
- }
37
- @media (min-width: $sm-min) {
38
- margin-right: 15px;
39
- }
40
- }
41
-
42
- .vk_flow_frame_text_title,
43
- .vk_flow_frame_text_content {
44
- padding-left: 0;
45
- border: none;
46
- }
47
-
48
- .vk_flow_frame_text_title {
49
- border-bottom: 1px dotted #ccc;
50
- margin: 0 0 10px;
51
- padding: 0 0 5px;
52
- font-size: 1.2em;
53
- }
54
-
55
- .vk_flow_frame_text_content {
56
- margin-bottom: 0;
57
- margin-inline-start: 0;
58
- margin-left:0;
59
- }
60
-
61
- .vk_flow_frame_image {
62
- max-width: 150px;
63
- box-sizing: border-box;
64
- }
65
-
66
- &.vk_flow-arrow-on::after {
67
- position: relative;
68
- content: "";
69
- background: var(--vk_flow-arrow) center 50% no-repeat;
70
- background-size: 50px 50px;
71
- display: block;
72
- overflow: hidden;
73
- height: 50px;
74
- width: 50px;
75
- margin: 0 auto;
76
- }
77
-
78
- &.vk_flow-arrow-off {
79
- padding-bottom: 0;
80
- margin-bottom: 30px;
81
- }
82
-
83
- &.vk_flow-arrow-off::after {
84
- content: "";
85
- font-size: 0;
86
- background-image: none;
87
- }
88
- }
89
-
90
- //編集画面
91
- .block-editor-block-list__layout .block-editor-block-list__block{
92
- &.vk_flow-arrow-on:focus:after{
93
- position: relative;
94
- box-shadow: none;
95
- }
96
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/block.json DELETED
@@ -1,78 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/heading",
4
- "category": "vk-blocks-cat",
5
- "title": "Heading",
6
- "attributes": {
7
- "anchor": {
8
- "type": "string",
9
- "source": "attribute",
10
- "attribute": "id",
11
- "selector": "*"
12
- },
13
- "level": {
14
- "type": "number",
15
- "default": 2
16
- },
17
- "align": {
18
- "type": "string"
19
- },
20
- "titleStyle": {
21
- "type": "string",
22
- "default": "default"
23
- },
24
- "outerMarginBottom": {
25
- "type": "number",
26
- "default": null
27
- },
28
- "title": {
29
- "type": "string",
30
- "source": "html",
31
- "selector": "span",
32
- "default": ""
33
- },
34
- "titleColor": {
35
- "type": "string"
36
- },
37
- "titleSize": {
38
- "type": "number"
39
- },
40
- "titleMarginBottom": {
41
- "type": "number",
42
- "default": null
43
- },
44
- "subText": {
45
- "source": "html",
46
- "selector": "p",
47
- "default": ""
48
- },
49
- "subTextFlag": {
50
- "type": "string",
51
- "default": "off"
52
- },
53
- "subTextColor": {
54
- "type": "string"
55
- },
56
- "subTextSize": {
57
- "type": "number"
58
- },
59
- "fontAwesomeIconBefore": {
60
- "type": "string",
61
- "default": ""
62
- },
63
- "fontAwesomeIconAfter": {
64
- "type": "string",
65
- "default": ""
66
- },
67
- "fontAwesomeIconColor": {
68
- "type": "string"
69
- }
70
- },
71
- "description": "This is a heading that allows you to set text size, subtext, icon, and margin.",
72
- "textdomain": "vk-blocks",
73
- "supports": {
74
- "className": true,
75
- "customClassName": true,
76
- "anchor": true
77
- }
78
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.1/component.js DELETED
@@ -1,130 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
- import { __ } from '@wordpress/i18n';
3
- import { Component } from '@wordpress/element'
4
-
5
- export class VKBHeadingV0_24_1 extends Component {
6
- render() {
7
- const {
8
- level,
9
- align,
10
- title,
11
- titleColor,
12
- titleSize,
13
- subText,
14
- subTextFlag,
15
- subTextColor,
16
- subTextSize,
17
- titleStyle,
18
- titleMarginBottom,
19
- outerMarginBottom,
20
- } = this.props.attributes;
21
- const setAttributes = this.props.setAttributes;
22
- const for_ = this.props.for_;
23
-
24
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
25
- const tagName = 'h' + level;
26
- let cStyle;
27
- let tStyle;
28
-
29
- //containerのマージンを切り替え
30
- if (outerMarginBottom !== null) {
31
- cStyle = { marginBottom: outerMarginBottom + `rem` };
32
- }
33
-
34
- //titleのマージンを切り替え
35
- if (titleMarginBottom !== null) {
36
- tStyle = {
37
- color: titleColor,
38
- fontSize: titleSize + 'rem',
39
- marginBottom: titleMarginBottom + 'rem',
40
- textAlign: align,
41
- };
42
- } else {
43
- tStyle = {
44
- color: titleColor,
45
- fontSize: titleSize + 'rem',
46
- textAlign: align,
47
- };
48
- }
49
-
50
- if (for_ === 'edit') {
51
- return (
52
- <div className={containerClass} style={cStyle}>
53
- <RichText
54
- tagName={tagName}
55
- value={title}
56
- onChange={(value) => setAttributes({ title: value })}
57
- style={tStyle}
58
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
59
- placeholder={__('Input title…', 'vk-blocks')}
60
- />
61
- {
62
- // サブテキスト
63
- (() => {
64
- if (subTextFlag === 'on') {
65
- return (
66
- <RichText
67
- tagName={'p'}
68
- value={subText}
69
- onChange={(value) =>
70
- setAttributes({ subText: value })
71
- }
72
- style={{
73
- color: subTextColor,
74
- fontSize: subTextSize + 'rem',
75
- textAlign: align,
76
- }}
77
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
78
- placeholder={__(
79
- 'Input sub text…',
80
- 'vk-blocks'
81
- )}
82
- />
83
- );
84
- }
85
- })()
86
- }
87
- </div>
88
- );
89
- } else if (for_ === 'save') {
90
- return (
91
- <div className={containerClass} style={cStyle}>
92
- <RichText.Content
93
- tagName={tagName}
94
- value={title}
95
- onChange={(value) => setAttributes({ title: value })}
96
- style={tStyle}
97
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
98
- placeholder={__('Input title…', 'vk-blocks')}
99
- />
100
- {
101
- // サブテキスト
102
- (() => {
103
- if (subTextFlag === 'on') {
104
- return (
105
- <RichText.Content
106
- tagName={'p'}
107
- value={subText}
108
- onChange={(value) =>
109
- setAttributes({ subText: value })
110
- }
111
- style={{
112
- color: subTextColor,
113
- fontSize: subTextSize + 'rem',
114
- textAlign: align,
115
- }}
116
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
117
- placeholder={__(
118
- 'Input sub text…',
119
- 'vk-blocks'
120
- )}
121
- />
122
- );
123
- }
124
- })()
125
- }
126
- </div>
127
- );
128
- }
129
- }
130
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.1/save.js DELETED
@@ -1,9 +0,0 @@
1
- import { VKBHeadingV0_24_1 } from './component';
2
-
3
- export default function save({ attributes, className }) {
4
- return (
5
- <div className={className}>
6
- <VKBHeadingV0_24_1 attributes={attributes} for_={'save'} />
7
- </div>
8
- );
9
- }
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.2/save.js DELETED
@@ -1,93 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const {
5
- level,
6
- align,
7
- title,
8
- titleColor,
9
- titleSize,
10
- subText,
11
- subTextFlag,
12
- subTextColor,
13
- subTextSize,
14
- titleStyle,
15
- titleMarginBottom,
16
- outerMarginBottom,
17
- } = attributes;
18
- const tagName = 'h' + level;
19
-
20
- return (
21
- <>
22
- {outerMarginBottom === null ? (
23
- <div className={`vk_heading vk_heading-style-${titleStyle}`}>
24
- <RichText.Content
25
- tagName={tagName}
26
- value={title}
27
- style={{
28
- color: titleColor,
29
- fontSize: titleSize + 'rem',
30
- textAlign: align,
31
- }}
32
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
33
- />
34
- {
35
- // サブテキスト
36
- (() => {
37
- if (subTextFlag === 'on') {
38
- return (
39
- <RichText.Content
40
- tagName={'p'}
41
- value={subText}
42
- style={{
43
- color: subTextColor,
44
- fontSize: subTextSize + 'rem',
45
- textAlign: align,
46
- }}
47
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
48
- />
49
- );
50
- }
51
- })()
52
- }
53
- </div>
54
- ) : (
55
- <div
56
- className={`vk_heading vk_heading-style-${titleStyle}`}
57
- style={{ marginBottom: outerMarginBottom + `rem` }}
58
- >
59
- <RichText.Content
60
- tagName={tagName}
61
- value={title}
62
- style={{
63
- color: titleColor,
64
- fontSize: titleSize + 'rem',
65
- textAlign: align,
66
- marginBottom: titleMarginBottom + 'rem',
67
- }}
68
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
69
- />
70
- {
71
- // サブテキスト
72
- (() => {
73
- if (subTextFlag === 'on') {
74
- return (
75
- <RichText.Content
76
- tagName={'p'}
77
- value={subText}
78
- style={{
79
- color: subTextColor,
80
- fontSize: subTextSize + 'rem',
81
- textAlign: align,
82
- }}
83
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
84
- />
85
- );
86
- }
87
- })()
88
- }
89
- </div>
90
- )}
91
- </>
92
- );
93
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.3/save.js DELETED
@@ -1,57 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- const {
5
- level,
6
- align,
7
- title,
8
- titleColor,
9
- titleSize,
10
- subText,
11
- subTextFlag,
12
- subTextColor,
13
- subTextSize,
14
- titleStyle,
15
- titleMarginBottom,
16
- outerMarginBottom,
17
- } = attributes;
18
- const tagName = 'h' + level;
19
-
20
- return (
21
- <div
22
- className={`vk_heading vk_heading-style-${titleStyle}`}
23
- style={{ marginBottom: outerMarginBottom + `rem` }}
24
- >
25
- <RichText.Content
26
- tagName={tagName}
27
- value={title}
28
- style={{
29
- color: titleColor,
30
- fontSize: titleSize + 'rem',
31
- textAlign: align,
32
- marginBottom: titleMarginBottom + 'rem',
33
- }}
34
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
35
- />
36
- {
37
- // サブテキスト
38
- (() => {
39
- if (subTextFlag === 'on') {
40
- return (
41
- <RichText.Content
42
- tagName={'p'}
43
- value={subText}
44
- style={{
45
- color: subTextColor,
46
- fontSize: subTextSize + 'rem',
47
- textAlign: align,
48
- }}
49
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
50
- />
51
- );
52
- }
53
- })()
54
- }
55
- </div>
56
- );
57
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.4/component.js DELETED
@@ -1,92 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import { RichText } from '@wordpress/block-editor';
3
- import { __ } from '@wordpress/i18n';
4
- import classNames from 'classnames';
5
-
6
- export class NoAnchor extends Component {
7
- render() {
8
- const {
9
- level,
10
- align,
11
- title,
12
- titleColor,
13
- titleSize,
14
- subText,
15
- subTextFlag,
16
- subTextColor,
17
- subTextSize,
18
- titleStyle,
19
- titleMarginBottom,
20
- outerMarginBottom,
21
- } = this.props.attributes;
22
- const setAttributes = this.props.setAttributes;
23
- const className = this.props.className;
24
- const containerClass = classNames(
25
- className,
26
- `vk_heading vk_heading-style-${titleStyle}`
27
- );
28
- const tagName = 'h' + level;
29
- let cStyle;
30
- let tStyle;
31
-
32
- //containerのマージンを切り替え
33
- if (outerMarginBottom !== null) {
34
- cStyle = { marginBottom: outerMarginBottom + `rem` };
35
- }
36
-
37
- //titleのマージンを切り替え
38
- if (titleMarginBottom !== null) {
39
- tStyle = {
40
- color: titleColor,
41
- fontSize: titleSize + 'rem',
42
- marginBottom: titleMarginBottom + 'rem',
43
- textAlign: align,
44
- };
45
- } else {
46
- tStyle = {
47
- color: titleColor,
48
- fontSize: titleSize + 'rem',
49
- textAlign: align,
50
- };
51
- }
52
-
53
- return (
54
- <div className={containerClass} style={cStyle}>
55
- <RichText.Content
56
- tagName={tagName}
57
- value={title}
58
- onChange={(value) => setAttributes({ title: value })}
59
- style={tStyle}
60
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
61
- placeholder={__('Input title…', 'vk-blocks')}
62
- />
63
- {
64
- // サブテキスト
65
- (() => {
66
- if (subTextFlag === 'on') {
67
- return (
68
- <RichText.Content
69
- tagName={'p'}
70
- value={subText}
71
- onChange={(value) =>
72
- setAttributes({ subText: value })
73
- }
74
- style={{
75
- color: subTextColor,
76
- fontSize: subTextSize + 'rem',
77
- textAlign: align,
78
- }}
79
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
80
- placeholder={__(
81
- 'Input sub text…',
82
- 'vk-blocks'
83
- )}
84
- />
85
- );
86
- }
87
- })()
88
- }
89
- </div>
90
- );
91
- }
92
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.4/save.js DELETED
@@ -1,7 +0,0 @@
1
- import { NoAnchor } from './component';
2
-
3
- export default function save({ attributes, className }) {
4
- return (
5
- <NoAnchor attributes={attributes} className={className} for_={'save'} />
6
- );
7
- }
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.5/component.js DELETED
@@ -1,130 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import { RichText } from '@wordpress/block-editor';
3
- import { __ } from '@wordpress/i18n';
4
-
5
- export class VKBHeading extends Component {
6
- render() {
7
- const {
8
- level,
9
- align,
10
- title,
11
- titleColor,
12
- titleSize,
13
- subText,
14
- subTextFlag,
15
- subTextColor,
16
- subTextSize,
17
- titleStyle,
18
- titleMarginBottom,
19
- outerMarginBottom,
20
- } = this.props.attributes;
21
- const setAttributes = this.props.setAttributes;
22
- const for_ = this.props.for_;
23
-
24
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
25
- const tagName = 'h' + level;
26
- let cStyle;
27
- let tStyle;
28
-
29
- //containerのマージンを切り替え
30
- if (outerMarginBottom !== null) {
31
- cStyle = { marginBottom: outerMarginBottom + `rem` };
32
- }
33
-
34
- //titleのマージンを切り替え
35
- if (titleMarginBottom !== null) {
36
- tStyle = {
37
- color: titleColor,
38
- fontSize: titleSize + 'rem',
39
- marginBottom: titleMarginBottom + 'rem',
40
- textAlign: align,
41
- };
42
- } else {
43
- tStyle = {
44
- color: titleColor,
45
- fontSize: titleSize + 'rem',
46
- textAlign: align,
47
- };
48
- }
49
-
50
- if (for_ === 'edit') {
51
- return (
52
- <div className={containerClass} style={cStyle}>
53
- <RichText
54
- tagName={tagName}
55
- value={title}
56
- onChange={(value) => setAttributes({ title: value })}
57
- style={tStyle}
58
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
59
- placeholder={__('Input title…', 'vk-blocks')}
60
- />
61
- {
62
- // サブテキスト
63
- (() => {
64
- if (subTextFlag === 'on') {
65
- return (
66
- <RichText
67
- tagName={'p'}
68
- value={subText}
69
- onChange={(value) =>
70
- setAttributes({ subText: value })
71
- }
72
- style={{
73
- color: subTextColor,
74
- fontSize: subTextSize + 'rem',
75
- textAlign: align,
76
- }}
77
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
78
- placeholder={__(
79
- 'Input sub text…',
80
- 'vk-blocks'
81
- )}
82
- />
83
- );
84
- }
85
- })()
86
- }
87
- </div>
88
- );
89
- } else if (for_ === 'save') {
90
- return (
91
- <div className={containerClass} style={cStyle}>
92
- <RichText.Content
93
- tagName={tagName}
94
- value={title}
95
- onChange={(value) => setAttributes({ title: value })}
96
- style={tStyle}
97
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
98
- placeholder={__('Input title…', 'vk-blocks')}
99
- />
100
- {
101
- // サブテキスト
102
- (() => {
103
- if (subTextFlag === 'on') {
104
- return (
105
- <RichText.Content
106
- tagName={'p'}
107
- value={subText}
108
- onChange={(value) =>
109
- setAttributes({ subText: value })
110
- }
111
- style={{
112
- color: subTextColor,
113
- fontSize: subTextSize + 'rem',
114
- textAlign: align,
115
- }}
116
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
117
- placeholder={__(
118
- 'Input sub text…',
119
- 'vk-blocks'
120
- )}
121
- />
122
- );
123
- }
124
- })()
125
- }
126
- </div>
127
- );
128
- }
129
- }
130
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.5/save.js DELETED
@@ -1,9 +0,0 @@
1
- import { VKBHeading } from './component';
2
-
3
- export default function save({ attributes, className }) {
4
- return (
5
- <div className={className} id="vk-htags--1">
6
- <VKBHeading attributes={attributes} for_={'save'} />
7
- </div>
8
- );
9
- }
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.6/component.js DELETED
@@ -1,130 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import { RichText } from '@wordpress/block-editor';
3
- import { __ } from '@wordpress/i18n';
4
-
5
- export class VKBHeading extends Component {
6
- render() {
7
- const {
8
- level,
9
- align,
10
- title,
11
- titleColor,
12
- titleSize,
13
- subText,
14
- subTextFlag,
15
- subTextColor,
16
- subTextSize,
17
- titleStyle,
18
- titleMarginBottom,
19
- outerMarginBottom,
20
- } = this.props.attributes;
21
- const setAttributes = this.props.setAttributes;
22
- const for_ = this.props.for_;
23
-
24
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
25
- const tagName = 'h' + level;
26
- let cStyle;
27
- let tStyle;
28
-
29
- //containerのマージンを切り替え
30
- if (outerMarginBottom !== null) {
31
- cStyle = { marginBottom: outerMarginBottom + `rem` };
32
- }
33
-
34
- //titleのマージンを切り替え
35
- if (titleMarginBottom !== null) {
36
- tStyle = {
37
- color: titleColor,
38
- fontSize: titleSize + 'rem',
39
- marginBottom: titleMarginBottom + 'rem',
40
- textAlign: align,
41
- };
42
- } else {
43
- tStyle = {
44
- color: titleColor,
45
- fontSize: titleSize + 'rem',
46
- textAlign: align,
47
- };
48
- }
49
-
50
- if (for_ === 'edit') {
51
- return (
52
- <div className={containerClass} style={cStyle}>
53
- <RichText
54
- tagName={tagName}
55
- value={title}
56
- onChange={(value) => setAttributes({ title: value })}
57
- style={tStyle}
58
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
59
- placeholder={__('Input title…', 'vk-blocks')}
60
- />
61
- {
62
- // サブテキスト
63
- (() => {
64
- if (subTextFlag === 'on') {
65
- return (
66
- <RichText
67
- tagName={'p'}
68
- value={subText}
69
- onChange={(value) =>
70
- setAttributes({ subText: value })
71
- }
72
- style={{
73
- color: subTextColor,
74
- fontSize: subTextSize + 'rem',
75
- textAlign: align,
76
- }}
77
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
78
- placeholder={__(
79
- 'Input sub text…',
80
- 'vk-blocks'
81
- )}
82
- />
83
- );
84
- }
85
- })()
86
- }
87
- </div>
88
- );
89
- } else if (for_ === 'save') {
90
- return (
91
- <div className={containerClass} style={cStyle}>
92
- <RichText.Content
93
- tagName={tagName}
94
- value={title}
95
- onChange={(value) => setAttributes({ title: value })}
96
- style={tStyle}
97
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
98
- placeholder={__('Input title…', 'vk-blocks')}
99
- />
100
- {
101
- // サブテキスト
102
- (() => {
103
- if (subTextFlag === 'on') {
104
- return (
105
- <RichText.Content
106
- tagName={'p'}
107
- value={subText}
108
- onChange={(value) =>
109
- setAttributes({ subText: value })
110
- }
111
- style={{
112
- color: subTextColor,
113
- fontSize: subTextSize + 'rem',
114
- textAlign: align,
115
- }}
116
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
117
- placeholder={__(
118
- 'Input sub text…',
119
- 'vk-blocks'
120
- )}
121
- />
122
- );
123
- }
124
- })()
125
- }
126
- </div>
127
- );
128
- }
129
- }
130
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.6/save.js DELETED
@@ -1,12 +0,0 @@
1
- import { VKBHeading } from './component';
2
-
3
- export default function save({ attributes, className }) {
4
- return (
5
- <div
6
- className={className}
7
- id="vk-htags-a181b726-7749-4bd8-9887-0306c0bc7bd5"
8
- >
9
- <VKBHeading attributes={attributes} for_={'save'} />
10
- </div>
11
- );
12
- }
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.7/component.js DELETED
@@ -1,130 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import { RichText } from '@wordpress/block-editor';
3
- import { __ } from '@wordpress/i18n';
4
-
5
- export class VKBHeading2 extends Component {
6
- render() {
7
- const {
8
- level,
9
- align,
10
- title,
11
- titleColor,
12
- titleSize,
13
- subText,
14
- subTextFlag,
15
- subTextColor,
16
- subTextSize,
17
- titleStyle,
18
- titleMarginBottom,
19
- outerMarginBottom,
20
- } = this.props.attributes;
21
- const setAttributes = this.props.setAttributes;
22
- const for_ = this.props.for_;
23
-
24
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
25
- const tagName = 'h' + level;
26
- let cStyle;
27
- let tStyle;
28
-
29
- //containerのマージンを切り替え
30
- if (outerMarginBottom !== null) {
31
- cStyle = { marginBottom: outerMarginBottom + `rem` };
32
- }
33
-
34
- //titleのマージンを切り替え
35
- if (titleMarginBottom !== null) {
36
- tStyle = {
37
- color: titleColor,
38
- fontSize: titleSize + 'rem',
39
- marginBottom: titleMarginBottom + 'rem',
40
- textAlign: align,
41
- };
42
- } else {
43
- tStyle = {
44
- color: titleColor,
45
- fontSize: titleSize + 'rem',
46
- textAlign: align,
47
- };
48
- }
49
-
50
- if (for_ === 'edit') {
51
- return (
52
- <div className={containerClass} style={cStyle}>
53
- <RichText
54
- tagName={tagName}
55
- value={title}
56
- onChange={(value) => setAttributes({ title: value })}
57
- style={tStyle}
58
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
59
- placeholder={__('Input title…', 'vk-blocks')}
60
- />
61
- {
62
- // サブテキスト
63
- (() => {
64
- if (subTextFlag === 'on') {
65
- return (
66
- <RichText
67
- tagName={'p'}
68
- value={subText}
69
- onChange={(value) =>
70
- setAttributes({ subText: value })
71
- }
72
- style={{
73
- color: subTextColor,
74
- fontSize: subTextSize + 'rem',
75
- textAlign: align,
76
- }}
77
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
78
- placeholder={__(
79
- 'Input sub text…',
80
- 'vk-blocks'
81
- )}
82
- />
83
- );
84
- }
85
- })()
86
- }
87
- </div>
88
- );
89
- } else if (for_ === 'save') {
90
- return (
91
- <div className={containerClass} style={cStyle}>
92
- <RichText.Content
93
- tagName={tagName}
94
- value={title}
95
- onChange={(value) => setAttributes({ title: value })}
96
- style={tStyle}
97
- className={`vk_heading_title vk_heading_title-style-${titleStyle}`}
98
- placeholder={__('Input title…', 'vk-blocks')}
99
- />
100
- {
101
- // サブテキスト
102
- (() => {
103
- if (subTextFlag === 'on') {
104
- return (
105
- <RichText.Content
106
- tagName={'p'}
107
- value={subText}
108
- onChange={(value) =>
109
- setAttributes({ subText: value })
110
- }
111
- style={{
112
- color: subTextColor,
113
- fontSize: subTextSize + 'rem',
114
- textAlign: align,
115
- }}
116
- className={`vk_heading_subtext vk_heading_subtext-style-${titleStyle}`}
117
- placeholder={__(
118
- 'Input sub text…',
119
- 'vk-blocks'
120
- )}
121
- />
122
- );
123
- }
124
- })()
125
- }
126
- </div>
127
- );
128
- }
129
- }
130
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.24.7/save.js DELETED
@@ -1,10 +0,0 @@
1
- import { VKBHeading2 } from './component';
2
-
3
- export default function save(props) {
4
- const { attributes } = props;
5
- return (
6
- <div id={attributes.anchor}>
7
- <VKBHeading2 attributes={attributes} for_={'save'} />
8
- </div>
9
- );
10
- }
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.37.1/component.js DELETED
@@ -1,159 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
- import { __ } from '@wordpress/i18n';
3
- import { Fragment } from '@wordpress/element';
4
- import parse from 'html-react-parser';
5
-
6
- const renderTitle = (level, contents,tStyle, headingStyle ) =>{
7
-
8
- switch (level) {
9
- case 1:
10
- return <h1 style={tStyle} className={headingStyle}>{contents}</h1>;
11
- case 2:
12
- return <h2 style={tStyle} className={headingStyle}>{contents}</h2>;
13
- case 3:
14
- return <h3 style={tStyle} className={headingStyle}>{contents}</h3>;
15
- case 4:
16
- return <h4 style={tStyle} className={headingStyle}>{contents}</h4>;
17
- case 5:
18
- return <h5 style={tStyle} className={headingStyle}>{contents}</h5>;
19
- case 6:
20
- return <h6 style={tStyle} className={headingStyle}>{contents}</h6>;
21
- }
22
- }
23
-
24
- export const VKBHeading =(props) => {
25
- const {attributes,setAttributes,for_} = props
26
- let {
27
- level,
28
- align,
29
- title,
30
- titleColor,
31
- titleSize,
32
- subText,
33
- subTextFlag,
34
- subTextColor,
35
- subTextSize,
36
- titleStyle,
37
- titleMarginBottom,
38
- outerMarginBottom,
39
- fontAwesomeIconBefore,
40
- fontAwesomeIconAfter,
41
- fontAwesomeIconColor
42
- } = attributes;
43
- let containerClass = `vk_heading vk_heading-style-${titleStyle}`;
44
- let cStyle;
45
- let tStyle;
46
-
47
- //containerのマージンを切り替え
48
- if (outerMarginBottom) {
49
- cStyle = { marginBottom: outerMarginBottom + `rem` };
50
- }
51
-
52
- //titleのマージンを切り替え
53
- if (titleMarginBottom) {
54
- tStyle = {
55
- color: titleColor,
56
- fontSize: titleSize + "rem",
57
- marginBottom: titleMarginBottom + "rem",
58
- textAlign: align
59
- };
60
- } else {
61
- tStyle = {
62
- color: titleColor,
63
- fontSize: titleSize + "rem",
64
- textAlign: align
65
- };
66
- }
67
-
68
- let headingStyle = `vk_heading_title vk_heading_title-style-${titleStyle}`;
69
- let subTextStyle = {
70
- color: subTextColor,
71
- fontSize: subTextSize + "rem",
72
- textAlign: align
73
- }
74
- let subTextClass = `vk_heading_subtext vk_heading_subtext-style-${titleStyle}`;
75
-
76
- let iconBefore = '';
77
- let iconAfter = '';
78
- if (fontAwesomeIconBefore) {
79
-
80
- //for recovering block
81
- fontAwesomeIconColor = fontAwesomeIconColor ? fontAwesomeIconColor : "#000000"
82
-
83
- //add inline css
84
- const faIconFragmentBefore= fontAwesomeIconBefore.split('<i');
85
- faIconFragmentBefore[0] = faIconFragmentBefore[0] + `<i style="color:${fontAwesomeIconColor};" `
86
- iconBefore = faIconFragmentBefore.join('')
87
- }
88
- if (fontAwesomeIconAfter) {
89
-
90
- //for recovering block
91
- fontAwesomeIconColor = fontAwesomeIconColor ? fontAwesomeIconColor : "#000000"
92
-
93
- //add class and inline css
94
- const faIconFragmentAfter = fontAwesomeIconAfter.split('<i');
95
- faIconFragmentAfter[0] = faIconFragmentAfter[0] + `<i style="color:${fontAwesomeIconColor};" `
96
- iconAfter = faIconFragmentAfter.join('')
97
- }
98
-
99
- if (for_ === "edit") {
100
-
101
- const titleContent = <Fragment>
102
- {parse(iconBefore)}
103
- <RichText
104
- tagName={"span"}
105
- value={title}
106
- onChange={(value) => {
107
- setAttributes({ title: value} )
108
- }}
109
- placeholder={__("Input title…", "vk-blocks")}
110
- />
111
- {parse(iconAfter)}
112
- </Fragment>
113
-
114
- let subtextContent;
115
- if (subTextFlag === "on") {
116
- subtextContent = <RichText
117
- tagName={"p"}
118
- value={subText}
119
- onChange={value => setAttributes({ subText: value })}
120
- style={subTextStyle}
121
- className={subTextClass}
122
- placeholder={__("Input sub text…", "vk-blocks")}
123
- />
124
- }
125
-
126
- return (<div className={containerClass} style={cStyle}>{renderTitle(level, titleContent, tStyle, headingStyle)}{subtextContent}</div>);
127
-
128
- } else if (for_ === "save") {
129
-
130
- // 後方互換用の独自処理 （spanが二重になる問題）-----------
131
- const spanCount = ( title.match( /span/g ) || [] ).length ;
132
- let titleValue;
133
- if(0 < spanCount){
134
- titleValue = parse(title)
135
- } else {
136
- titleValue = <RichText.Content
137
- tagName={"span"}
138
- value={title}
139
- />
140
- }
141
- const titleContent = <Fragment>
142
- {parse(iconBefore)}
143
- {titleValue}
144
- {parse(iconAfter)}
145
- </Fragment>
146
- // -----------------------------
147
-
148
- let subtextContent;
149
- if (subTextFlag === "on") {
150
- subtextContent = <RichText.Content
151
- tagName={"p"}
152
- value={subText}
153
- style={subTextStyle}
154
- className={subTextClass}
155
- />
156
- }
157
- return (<div className={containerClass} style={cStyle}>{renderTitle(level, titleContent, tStyle, headingStyle)}{subtextContent}</div>);
158
- }
159
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.37.1/save.js DELETED
@@ -1,9 +0,0 @@
1
- import { VKBHeading } from './component';
2
-
3
- export default function save(props) {
4
- return (
5
- <div id={props.attributes.anchor}>
6
- <VKBHeading {...props} for_={"save"}/>
7
- </div>
8
- );
9
- }
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.39.5/component.js DELETED
@@ -1,190 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
- import { __ } from '@wordpress/i18n';
3
- import parse from 'html-react-parser';
4
-
5
- const renderTitle = (level, contents, tStyle, headingStyle) => {
6
- switch (level) {
7
- case 1:
8
- return (
9
- <h1 style={tStyle} className={headingStyle}>
10
- {contents}
11
- </h1>
12
- );
13
- case 2:
14
- return (
15
- <h2 style={tStyle} className={headingStyle}>
16
- {contents}
17
- </h2>
18
- );
19
- case 3:
20
- return (
21
- <h3 style={tStyle} className={headingStyle}>
22
- {contents}
23
- </h3>
24
- );
25
- case 4:
26
- return (
27
- <h4 style={tStyle} className={headingStyle}>
28
- {contents}
29
- </h4>
30
- );
31
- case 5:
32
- return (
33
- <h5 style={tStyle} className={headingStyle}>
34
- {contents}
35
- </h5>
36
- );
37
- case 6:
38
- return (
39
- <h6 style={tStyle} className={headingStyle}>
40
- {contents}
41
- </h6>
42
- );
43
- }
44
- };
45
-
46
- export const VKBHeading_0_39_5 = (props) => {
47
- const { attributes, setAttributes, for_ } = props;
48
- let {
49
- level,
50
- align,
51
- title,
52
- titleColor,
53
- titleSize,
54
- subText,
55
- subTextFlag,
56
- subTextColor,
57
- subTextSize,
58
- titleStyle,
59
- titleMarginBottom,
60
- outerMarginBottom,
61
- fontAwesomeIconBefore,
62
- fontAwesomeIconAfter,
63
- fontAwesomeIconColor,
64
- } = attributes;
65
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
66
- let cStyle;
67
- let tStyle;
68
-
69
- //containerのマージンを切り替え
70
- if (outerMarginBottom) {
71
- cStyle = { marginBottom: outerMarginBottom + `rem` };
72
- }
73
-
74
- //titleのマージンを切り替え
75
- if (titleMarginBottom) {
76
- tStyle = {
77
- color: titleColor,
78
- fontSize: titleSize + 'rem',
79
- marginBottom: titleMarginBottom + 'rem',
80
- textAlign: align,
81
- };
82
- } else {
83
- tStyle = {
84
- color: titleColor,
85
- fontSize: titleSize + 'rem',
86
- textAlign: align,
87
- };
88
- }
89
-
90
- const headingStyle = `vk_heading_title vk_heading_title-style-${titleStyle}`;
91
- const subTextStyle = {
92
- color: subTextColor,
93
- fontSize: subTextSize + 'rem',
94
- textAlign: align,
95
- };
96
- const subTextClass = `vk_heading_subtext vk_heading_subtext-style-${titleStyle}`;
97
-
98
- let iconBefore = '';
99
- let iconAfter = '';
100
- if (fontAwesomeIconBefore) {
101
- //for recovering block
102
- fontAwesomeIconColor = fontAwesomeIconColor
103
- ? fontAwesomeIconColor
104
- : '#000000';
105
-
106
- //add inline css
107
- const faIconFragmentBefore = fontAwesomeIconBefore.split('<i');
108
- faIconFragmentBefore[0] =
109
- faIconFragmentBefore[0] +
110
- `<i style="color:${fontAwesomeIconColor};" `;
111
- iconBefore = faIconFragmentBefore.join('');
112
- }
113
- if (fontAwesomeIconAfter) {
114
- //for recovering block
115
- fontAwesomeIconColor = fontAwesomeIconColor
116
- ? fontAwesomeIconColor
117
- : '#000000';
118
-
119
- //add class and inline css
120
- const faIconFragmentAfter = fontAwesomeIconAfter.split('<i');
121
- faIconFragmentAfter[0] =
122
- faIconFragmentAfter[0] +
123
- `<i style="color:${fontAwesomeIconColor};" `;
124
- iconAfter = faIconFragmentAfter.join('');
125
- }
126
-
127
- if (for_ === 'edit') {
128
- const titleContent = (
129
- <>
130
- {parse(iconBefore)}
131
- <RichText
132
- tagName={'span'}
133
- value={title}
134
- onChange={(value) => {
135
- setAttributes({ title: value });
136
- }}
137
- placeholder={__('Input title…', 'vk-blocks')}
138
- />
139
- {parse(iconAfter)}
140
- </>
141
- );
142
-
143
- let subtextContent;
144
- if (subTextFlag === 'on') {
145
- subtextContent = (
146
- <RichText
147
- tagName={'p'}
148
- value={subText}
149
- onChange={(value) => setAttributes({ subText: value })}
150
- style={subTextStyle}
151
- className={subTextClass}
152
- placeholder={__('Input sub text…', 'vk-blocks')}
153
- />
154
- );
155
- }
156
-
157
- return (
158
- <div className={containerClass} style={cStyle}>
159
- {renderTitle(level, titleContent, tStyle, headingStyle)}
160
- {subtextContent}
161
- </div>
162
- );
163
- } else if (for_ === 'save') {
164
- const titleContent = (
165
- <>
166
- {parse(iconBefore)}
167
- <RichText.Content tagName={'span'} value={title} />
168
- {parse(iconAfter)}
169
- </>
170
- );
171
-
172
- let subtextContent;
173
- if (subTextFlag === 'on') {
174
- subtextContent = (
175
- <RichText.Content
176
- tagName={'p'}
177
- value={subText}
178
- style={subTextStyle}
179
- className={subTextClass}
180
- />
181
- );
182
- }
183
- return (
184
- <div className={containerClass} style={cStyle}>
185
- {renderTitle(level, titleContent, tStyle, headingStyle)}
186
- {subtextContent}
187
- </div>
188
- );
189
- }
190
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.39.5/save.js DELETED
@@ -1,10 +0,0 @@
1
- import { VKBHeading_0_39_5 } from './component';
2
-
3
- export default function save(props) {
4
- const { attributes } = props;
5
- return (
6
- <div id={attributes.anchor}>
7
- <VKBHeading_0_39_5 attributes={attributes} for_={'save'} />
8
- </div>
9
- );
10
- }
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.40.0/component.js DELETED
@@ -1,190 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
- import { __ } from '@wordpress/i18n';
3
- import parse from 'html-react-parser';
4
-
5
- const renderTitle = (level, contents, tStyle, headingStyle) => {
6
- switch (level) {
7
- case 1:
8
- return (
9
- <h1 style={tStyle} className={headingStyle}>
10
- {contents}
11
- </h1>
12
- );
13
- case 2:
14
- return (
15
- <h2 style={tStyle} className={headingStyle}>
16
- {contents}
17
- </h2>
18
- );
19
- case 3:
20
- return (
21
- <h3 style={tStyle} className={headingStyle}>
22
- {contents}
23
- </h3>
24
- );
25
- case 4:
26
- return (
27
- <h4 style={tStyle} className={headingStyle}>
28
- {contents}
29
- </h4>
30
- );
31
- case 5:
32
- return (
33
- <h5 style={tStyle} className={headingStyle}>
34
- {contents}
35
- </h5>
36
- );
37
- case 6:
38
- return (
39
- <h6 style={tStyle} className={headingStyle}>
40
- {contents}
41
- </h6>
42
- );
43
- }
44
- };
45
-
46
- export const VKBHeading_0_40_0 = (props) => {
47
- const { attributes, setAttributes, for_ } = props;
48
- let {
49
- level,
50
- align,
51
- title,
52
- titleColor,
53
- titleSize,
54
- subText,
55
- subTextFlag,
56
- subTextColor,
57
- subTextSize,
58
- titleStyle,
59
- titleMarginBottom,
60
- outerMarginBottom,
61
- fontAwesomeIconBefore,
62
- fontAwesomeIconAfter,
63
- fontAwesomeIconColor,
64
- } = attributes;
65
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
66
- let cStyle;
67
- let tStyle;
68
-
69
- //containerのマージンを切り替え
70
- if (outerMarginBottom) {
71
- cStyle = { marginBottom: outerMarginBottom + `rem` };
72
- }
73
-
74
- //titleのマージンを切り替え
75
- if (titleMarginBottom !== null && titleMarginBottom !== undefined) {
76
- tStyle = {
77
- color: titleColor,
78
- fontSize: titleSize + 'rem',
79
- marginBottom: titleMarginBottom + 'rem',
80
- textAlign: align,
81
- };
82
- } else {
83
- tStyle = {
84
- color: titleColor,
85
- fontSize: titleSize + 'rem',
86
- textAlign: align,
87
- };
88
- }
89
-
90
- const headingStyle = `vk_heading_title vk_heading_title-style-${titleStyle}`;
91
- const subTextStyle = {
92
- color: subTextColor,
93
- fontSize: subTextSize + 'rem',
94
- textAlign: align,
95
- };
96
- const subTextClass = `vk_heading_subtext vk_heading_subtext-style-${titleStyle}`;
97
-
98
- let iconBefore = '';
99
- let iconAfter = '';
100
- if (fontAwesomeIconBefore) {
101
- //for recovering block
102
- fontAwesomeIconColor = fontAwesomeIconColor
103
- ? fontAwesomeIconColor
104
- : '#000000';
105
-
106
- //add inline css
107
- const faIconFragmentBefore = fontAwesomeIconBefore.split('<i');
108
- faIconFragmentBefore[0] =
109
- faIconFragmentBefore[0] +
110
- `<i style="color:${fontAwesomeIconColor};" `;
111
- iconBefore = faIconFragmentBefore.join('');
112
- }
113
- if (fontAwesomeIconAfter) {
114
- //for recovering block
115
- fontAwesomeIconColor = fontAwesomeIconColor
116
- ? fontAwesomeIconColor
117
- : '#000000';
118
-
119
- //add class and inline css
120
- const faIconFragmentAfter = fontAwesomeIconAfter.split('<i');
121
- faIconFragmentAfter[0] =
122
- faIconFragmentAfter[0] +
123
- `<i style="color:${fontAwesomeIconColor};" `;
124
- iconAfter = faIconFragmentAfter.join('');
125
- }
126
-
127
- if (for_ === 'edit') {
128
- const titleContent = (
129
- <>
130
- {parse(iconBefore)}
131
- <RichText
132
- tagName={'span'}
133
- value={title}
134
- onChange={(value) => {
135
- setAttributes({ title: value });
136
- }}
137
- placeholder={__('Input title…', 'vk-blocks')}
138
- />
139
- {parse(iconAfter)}
140
- </>
141
- );
142
-
143
- let subtextContent;
144
- if (subTextFlag === 'on') {
145
- subtextContent = (
146
- <RichText
147
- tagName={'p'}
148
- value={subText}
149
- onChange={(value) => setAttributes({ subText: value })}
150
- style={subTextStyle}
151
- className={subTextClass}
152
- placeholder={__('Input sub text…', 'vk-blocks')}
153
- />
154
- );
155
- }
156
-
157
- return (
158
- <div className={containerClass} style={cStyle}>
159
- {renderTitle(level, titleContent, tStyle, headingStyle)}
160
- {subtextContent}
161
- </div>
162
- );
163
- } else if (for_ === 'save') {
164
- const titleContent = (
165
- <>
166
- {parse(iconBefore)}
167
- <RichText.Content tagName={'span'} value={title} />
168
- {parse(iconAfter)}
169
- </>
170
- );
171
-
172
- let subtextContent;
173
- if (subTextFlag === 'on') {
174
- subtextContent = (
175
- <RichText.Content
176
- tagName={'p'}
177
- value={subText}
178
- style={subTextStyle}
179
- className={subTextClass}
180
- />
181
- );
182
- }
183
- return (
184
- <div className={containerClass} style={cStyle}>
185
- {renderTitle(level, titleContent, tStyle, headingStyle)}
186
- {subtextContent}
187
- </div>
188
- );
189
- }
190
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.40.0/save.js DELETED
@@ -1,10 +0,0 @@
1
- import { VKBHeading_0_40_0 } from './component';
2
-
3
- export default function save(props) {
4
- const { attributes } = props;
5
- return (
6
- <div id={attributes.anchor}>
7
- <VKBHeading_0_40_0 {...props} for_={'save'} />
8
- </div>
9
- );
10
- }
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.40.1/component.js DELETED
@@ -1,190 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
- import { __ } from '@wordpress/i18n';
3
- import parse from 'html-react-parser';
4
-
5
- const renderTitle = (level, contents, tStyle, headingStyle) => {
6
- switch (level) {
7
- case 1:
8
- return (
9
- <h1 style={tStyle} className={headingStyle}>
10
- {contents}
11
- </h1>
12
- );
13
- case 2:
14
- return (
15
- <h2 style={tStyle} className={headingStyle}>
16
- {contents}
17
- </h2>
18
- );
19
- case 3:
20
- return (
21
- <h3 style={tStyle} className={headingStyle}>
22
- {contents}
23
- </h3>
24
- );
25
- case 4:
26
- return (
27
- <h4 style={tStyle} className={headingStyle}>
28
- {contents}
29
- </h4>
30
- );
31
- case 5:
32
- return (
33
- <h5 style={tStyle} className={headingStyle}>
34
- {contents}
35
- </h5>
36
- );
37
- case 6:
38
- return (
39
- <h6 style={tStyle} className={headingStyle}>
40
- {contents}
41
- </h6>
42
- );
43
- }
44
- };
45
-
46
- export default (props) => {
47
- const { attributes, setAttributes, for_ } = props;
48
- let {
49
- level,
50
- align,
51
- title,
52
- titleColor,
53
- titleSize,
54
- subText,
55
- subTextFlag,
56
- subTextColor,
57
- subTextSize,
58
- titleStyle,
59
- titleMarginBottom,
60
- outerMarginBottom,
61
- fontAwesomeIconBefore,
62
- fontAwesomeIconAfter,
63
- fontAwesomeIconColor,
64
- } = attributes;
65
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
66
- let cStyle;
67
- let tStyle;
68
-
69
- //containerのマージンを切り替え
70
- if (outerMarginBottom) {
71
- cStyle = { marginBottom: outerMarginBottom + `rem` };
72
- }
73
-
74
- //titleのマージンを切り替え
75
- if (titleMarginBottom) {
76
- tStyle = {
77
- color: titleColor,
78
- fontSize: titleSize + 'rem',
79
- marginBottom: titleMarginBottom + 'rem',
80
- textAlign: align,
81
- };
82
- } else {
83
- tStyle = {
84
- color: titleColor,
85
- fontSize: titleSize + 'rem',
86
- textAlign: align,
87
- };
88
- }
89
-
90
- const headingStyle = `vk_heading_title vk_heading_title-style-${titleStyle}`;
91
- const subTextStyle = {
92
- color: subTextColor,
93
- fontSize: subTextSize + 'rem',
94
- textAlign: align,
95
- };
96
- const subTextClass = `vk_heading_subtext vk_heading_subtext-style-${titleStyle}`;
97
-
98
- let iconBefore = '';
99
- let iconAfter = '';
100
- if (fontAwesomeIconBefore) {
101
- //for recovering block
102
- fontAwesomeIconColor = fontAwesomeIconColor
103
- ? fontAwesomeIconColor
104
- : '#000000';
105
-
106
- //add inline css
107
- const faIconFragmentBefore = fontAwesomeIconBefore.split('<i');
108
- faIconFragmentBefore[0] =
109
- faIconFragmentBefore[0] +
110
- `<i style="color:${fontAwesomeIconColor};" `;
111
- iconBefore = faIconFragmentBefore.join('');
112
- }
113
- if (fontAwesomeIconAfter) {
114
- //for recovering block
115
- fontAwesomeIconColor = fontAwesomeIconColor
116
- ? fontAwesomeIconColor
117
- : '#000000';
118
-
119
- //add class and inline css
120
- const faIconFragmentAfter = fontAwesomeIconAfter.split('<i');
121
- faIconFragmentAfter[0] =
122
- faIconFragmentAfter[0] +
123
- `<i style="color:${fontAwesomeIconColor};" `;
124
- iconAfter = faIconFragmentAfter.join('');
125
- }
126
-
127
- if (for_ === 'edit') {
128
- const titleContent = (
129
- <>
130
- {parse(iconBefore)}
131
- <RichText
132
- tagName={'span'}
133
- value={title}
134
- onChange={(value) => {
135
- setAttributes({ title: value });
136
- }}
137
- placeholder={__('Input title…', 'vk-blocks')}
138
- />
139
- {parse(iconAfter)}
140
- </>
141
- );
142
-
143
- let subtextContent;
144
- if (subTextFlag === 'on') {
145
- subtextContent = (
146
- <RichText
147
- tagName={'p'}
148
- value={subText}
149
- onChange={(value) => setAttributes({ subText: value })}
150
- style={subTextStyle}
151
- className={subTextClass}
152
- placeholder={__('Input sub text…', 'vk-blocks')}
153
- />
154
- );
155
- }
156
-
157
- return (
158
- <div className={containerClass} style={cStyle}>
159
- {renderTitle(level, titleContent, tStyle, headingStyle)}
160
- {subtextContent}
161
- </div>
162
- );
163
- } else if (for_ === 'save') {
164
- const titleContent = (
165
- <>
166
- {parse(iconBefore)}
167
- <RichText.Content tagName={'span'} value={title} />
168
- {parse(iconAfter)}
169
- </>
170
- );
171
-
172
- let subtextContent;
173
- if (subTextFlag === 'on') {
174
- subtextContent = (
175
- <RichText.Content
176
- tagName={'p'}
177
- value={subText}
178
- style={subTextStyle}
179
- className={subTextClass}
180
- />
181
- );
182
- }
183
- return (
184
- <div className={containerClass} style={cStyle}>
185
- {renderTitle(level, titleContent, tStyle, headingStyle)}
186
- {subtextContent}
187
- </div>
188
- );
189
- }
190
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.40.1/save.js DELETED
@@ -1,13 +0,0 @@
1
- /**
2
- * heading block type
3
- *
4
- */
5
- import VKBHeading from './component';
6
-
7
- export default function save(props) {
8
- return (
9
- <div>
10
- <VKBHeading {...props} for_={'save'} />
11
- </div>
12
- );
13
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.60.1/component.js DELETED
@@ -1,190 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
- import { __ } from '@wordpress/i18n';
3
- import parse from 'html-react-parser';
4
-
5
- const renderTitle = (level, contents, tStyle, headingStyle) => {
6
- switch (level) {
7
- case 1:
8
- return (
9
- <h1 style={tStyle} className={headingStyle}>
10
- {contents}
11
- </h1>
12
- );
13
- case 2:
14
- return (
15
- <h2 style={tStyle} className={headingStyle}>
16
- {contents}
17
- </h2>
18
- );
19
- case 3:
20
- return (
21
- <h3 style={tStyle} className={headingStyle}>
22
- {contents}
23
- </h3>
24
- );
25
- case 4:
26
- return (
27
- <h4 style={tStyle} className={headingStyle}>
28
- {contents}
29
- </h4>
30
- );
31
- case 5:
32
- return (
33
- <h5 style={tStyle} className={headingStyle}>
34
- {contents}
35
- </h5>
36
- );
37
- case 6:
38
- return (
39
- <h6 style={tStyle} className={headingStyle}>
40
- {contents}
41
- </h6>
42
- );
43
- }
44
- };
45
-
46
- export const VKBHeading = (props) => {
47
- const { attributes, setAttributes, for_ } = props;
48
- let {
49
- level,
50
- align,
51
- title,
52
- titleColor,
53
- titleSize,
54
- subText,
55
- subTextFlag,
56
- subTextColor,
57
- subTextSize,
58
- titleStyle,
59
- titleMarginBottom,
60
- outerMarginBottom,
61
- fontAwesomeIconBefore,
62
- fontAwesomeIconAfter,
63
- fontAwesomeIconColor,
64
- } = attributes;
65
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
66
- let cStyle;
67
- let tStyle;
68
-
69
- //containerのマージンを切り替え
70
- if (outerMarginBottom) {
71
- cStyle = { marginBottom: outerMarginBottom + `rem` };
72
- }
73
-
74
- //titleのマージンを切り替え
75
- if (titleMarginBottom !== null && titleMarginBottom !== undefined) {
76
- tStyle = {
77
- color: titleColor,
78
- fontSize: titleSize + 'rem',
79
- marginBottom: titleMarginBottom + 'rem',
80
- textAlign: align,
81
- };
82
- } else {
83
- tStyle = {
84
- color: titleColor,
85
- fontSize: titleSize + 'rem',
86
- textAlign: align,
87
- };
88
- }
89
-
90
- const headingStyle = `vk_heading_title vk_heading_title-style-${titleStyle}`;
91
- const subTextStyle = {
92
- color: subTextColor,
93
- fontSize: subTextSize + 'rem',
94
- textAlign: align,
95
- };
96
- const subTextClass = `vk_heading_subtext vk_heading_subtext-style-${titleStyle}`;
97
-
98
- let iconBefore = '';
99
- let iconAfter = '';
100
- if (fontAwesomeIconBefore) {
101
- //for recovering block
102
- fontAwesomeIconColor = fontAwesomeIconColor
103
- ? fontAwesomeIconColor
104
- : '#000000';
105
-
106
- //add inline css
107
- const faIconFragmentBefore = fontAwesomeIconBefore.split('<i');
108
- faIconFragmentBefore[0] =
109
- faIconFragmentBefore[0] +
110
- `<i style="color:${fontAwesomeIconColor};" `;
111
- iconBefore = faIconFragmentBefore.join('');
112
- }
113
- if (fontAwesomeIconAfter) {
114
- //for recovering block
115
- fontAwesomeIconColor = fontAwesomeIconColor
116
- ? fontAwesomeIconColor
117
- : '#000000';
118
-
119
- //add class and inline css
120
- const faIconFragmentAfter = fontAwesomeIconAfter.split('<i');
121
- faIconFragmentAfter[0] =
122
- faIconFragmentAfter[0] +
123
- `<i style="color:${fontAwesomeIconColor};" `;
124
- iconAfter = faIconFragmentAfter.join('');
125
- }
126
-
127
- if (for_ === 'edit') {
128
- const titleContent = (
129
- <>
130
- {parse(iconBefore)}
131
- <RichText
132
- tagName={'span'}
133
- value={title}
134
- onChange={(value) => {
135
- setAttributes({ title: value });
136
- }}
137
- placeholder={__('Input title…', 'vk-blocks')}
138
- />
139
- {parse(iconAfter)}
140
- </>
141
- );
142
-
143
- let subtextContent;
144
- if (subTextFlag === 'on') {
145
- subtextContent = (
146
- <RichText
147
- tagName={'p'}
148
- value={subText}
149
- onChange={(value) => setAttributes({ subText: value })}
150
- style={subTextStyle}
151
- className={subTextClass}
152
- placeholder={__('Input sub text…', 'vk-blocks')}
153
- />
154
- );
155
- }
156
-
157
- return (
158
- <div className={containerClass} style={cStyle}>
159
- {renderTitle(level, titleContent, tStyle, headingStyle)}
160
- {subtextContent}
161
- </div>
162
- );
163
- } else if (for_ === 'save') {
164
- const titleContent = (
165
- <>
166
- {parse(iconBefore)}
167
- <RichText.Content tagName={'span'} value={title} />
168
- {parse(iconAfter)}
169
- </>
170
- );
171
-
172
- let subtextContent;
173
- if (subTextFlag === 'on') {
174
- subtextContent = (
175
- <RichText.Content
176
- tagName={'p'}
177
- value={subText}
178
- style={subTextStyle}
179
- className={subTextClass}
180
- />
181
- );
182
- }
183
- return (
184
- <div className={containerClass} style={cStyle}>
185
- {renderTitle(level, titleContent, tStyle, headingStyle)}
186
- {subtextContent}
187
- </div>
188
- );
189
- }
190
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/0.60.1/save.js DELETED
@@ -1,9 +0,0 @@
1
- import { VKBHeading } from './component';
2
-
3
- export default function save(props) {
4
- return (
5
- <div>
6
- <VKBHeading {...props} for_={'save'} />
7
- </div>
8
- );
9
- }
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/1.20.5/save.js DELETED
@@ -1,155 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
-
3
- import parse from 'html-react-parser';
4
-
5
- const renderTitle = (level, contents, tStyle, headingStyle) => {
6
- switch (level) {
7
- case 1:
8
- return (
9
- <h1 style={tStyle} className={headingStyle}>
10
- {contents}
11
- </h1>
12
- );
13
- case 2:
14
- return (
15
- <h2 style={tStyle} className={headingStyle}>
16
- {contents}
17
- </h2>
18
- );
19
- case 3:
20
- return (
21
- <h3 style={tStyle} className={headingStyle}>
22
- {contents}
23
- </h3>
24
- );
25
- case 4:
26
- return (
27
- <h4 style={tStyle} className={headingStyle}>
28
- {contents}
29
- </h4>
30
- );
31
- case 5:
32
- return (
33
- <h5 style={tStyle} className={headingStyle}>
34
- {contents}
35
- </h5>
36
- );
37
- case 6:
38
- return (
39
- <h6 style={tStyle} className={headingStyle}>
40
- {contents}
41
- </h6>
42
- );
43
- }
44
- };
45
-
46
- export default function save(props) {
47
- const { attributes } = props;
48
- const {
49
- level,
50
- align,
51
- title,
52
- titleColor,
53
- titleSize,
54
- subText,
55
- subTextFlag,
56
- subTextColor,
57
- subTextSize,
58
- titleStyle,
59
- titleMarginBottom,
60
- outerMarginBottom,
61
- fontAwesomeIconBefore,
62
- fontAwesomeIconAfter,
63
- fontAwesomeIconColor,
64
- } = attributes;
65
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
66
-
67
- const cStyle = {
68
- marginBottom:
69
- outerMarginBottom !== null && outerMarginBottom !== undefined
70
- ? outerMarginBottom + `rem`
71
- : undefined,
72
- };
73
-
74
- const tStyle = {
75
- color:
76
- titleColor !== null && titleColor !== undefined
77
- ? titleColor
78
- : undefined,
79
- fontSize:
80
- titleSize !== null && titleSize !== undefined
81
- ? titleSize + 'rem'
82
- : undefined,
83
- marginBottom:
84
- titleMarginBottom !== null && titleMarginBottom !== undefined
85
- ? titleMarginBottom + 'rem'
86
- : undefined,
87
- textAlign: align !== null && align !== undefined ? align : undefined,
88
- };
89
-
90
- const headingStyle = `vk_heading_title vk_heading_title-style-${titleStyle}`;
91
- const subTextStyle = {
92
- color:
93
- subTextColor !== null && subTextColor !== undefined
94
- ? subTextColor
95
- : undefined,
96
- fontSize:
97
- subTextSize !== null && subTextSize !== undefined
98
- ? subTextSize + 'rem'
99
- : undefined,
100
- textAlign: align !== null && align !== undefined ? align : undefined,
101
- };
102
- const subTextClass = `vk_heading_subtext vk_heading_subtext-style-${titleStyle}`;
103
-
104
- let iconBefore = '';
105
- let iconAfter = '';
106
- const fontAwesomeIconStyle = fontAwesomeIconColor
107
- ? `style="color:${fontAwesomeIconColor};"`
108
- : '';
109
- if (fontAwesomeIconBefore) {
110
- //add inline css
111
- const faIconFragmentBefore = fontAwesomeIconBefore.split('<i');
112
- faIconFragmentBefore[0] =
113
- faIconFragmentBefore[0] + `<i ${fontAwesomeIconStyle} `;
114
- iconBefore = faIconFragmentBefore.join('');
115
- }
116
- if (fontAwesomeIconAfter) {
117
- //add class and inline css
118
- const faIconFragmentAfter = fontAwesomeIconAfter.split('<i');
119
- faIconFragmentAfter[0] =
120
- faIconFragmentAfter[0] + `<i ${fontAwesomeIconStyle} `;
121
- iconAfter = faIconFragmentAfter.join('');
122
- }
123
- const titleContent = (
124
- <>
125
- {parse(iconBefore)}
126
- <RichText.Content tagName={'span'} value={title} />
127
- {parse(iconAfter)}
128
- </>
129
- );
130
-
131
- let subtextContent;
132
- if (subTextFlag === 'on') {
133
- subtextContent = (
134
- <RichText.Content
135
- tagName={'p'}
136
- value={subText}
137
- style={subTextStyle}
138
- className={subTextClass}
139
- />
140
- );
141
- }
142
-
143
- const blockProps = useBlockProps.save({
144
- className: ``,
145
- });
146
-
147
- return (
148
- <div {...blockProps}>
149
- <div className={containerClass} style={cStyle}>
150
- {renderTitle(level, titleContent, tStyle, headingStyle)}
151
- {subtextContent}
152
- </div>
153
- </div>
154
- );
155
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/1.20.5a/save.js DELETED
@@ -1,211 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
-
3
- import parse from 'html-react-parser';
4
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
5
- import classnames from 'classnames';
6
-
7
- const renderTitle = (level, contents, tStyle, headingStyle) => {
8
- switch (level) {
9
- case 1:
10
- return (
11
- <h1 style={tStyle} className={headingStyle}>
12
- {contents}
13
- </h1>
14
- );
15
- case 2:
16
- return (
17
- <h2 style={tStyle} className={headingStyle}>
18
- {contents}
19
- </h2>
20
- );
21
- case 3:
22
- return (
23
- <h3 style={tStyle} className={headingStyle}>
24
- {contents}
25
- </h3>
26
- );
27
- case 4:
28
- return (
29
- <h4 style={tStyle} className={headingStyle}>
30
- {contents}
31
- </h4>
32
- );
33
- case 5:
34
- return (
35
- <h5 style={tStyle} className={headingStyle}>
36
- {contents}
37
- </h5>
38
- );
39
- case 6:
40
- return (
41
- <h6 style={tStyle} className={headingStyle}>
42
- {contents}
43
- </h6>
44
- );
45
- }
46
- };
47
-
48
- export default function save(props) {
49
- const { attributes } = props;
50
- const {
51
- level,
52
- align,
53
- title,
54
- titleColor,
55
- titleSize,
56
- subText,
57
- subTextFlag,
58
- subTextColor,
59
- subTextSize,
60
- titleStyle,
61
- titleMarginBottom,
62
- outerMarginBottom,
63
- fontAwesomeIconBefore,
64
- fontAwesomeIconAfter,
65
- fontAwesomeIconColor,
66
- } = attributes;
67
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
68
-
69
- const cStyle = {
70
- marginBottom:
71
- outerMarginBottom !== null && outerMarginBottom !== undefined
72
- ? outerMarginBottom + `rem`
73
- : undefined,
74
- };
75
-
76
- let headingColorClassName = '';
77
- // if (titleColor !== undefined) {
78
- // headingColorClassName += `has-text-color`;
79
- // if (!isHexColor(titleColor)) {
80
- // headingColorClassName += ` has-${titleColor}-color`;
81
- // }
82
- // }
83
-
84
- const headingStyle = classnames('vk_heading_title', {
85
- [`vk_heading_title-style-${titleStyle}`]: !!titleStyle,
86
- [`${headingColorClassName}`]: !!headingColorClassName,
87
- });
88
-
89
- const tStyle = {
90
- color:
91
- titleColor !== null &&
92
- titleColor !== undefined &&
93
- isHexColor(titleColor)
94
- ? titleColor
95
- : undefined,
96
- fontSize:
97
- titleSize !== null && titleSize !== undefined
98
- ? titleSize + 'rem'
99
- : undefined,
100
- marginBottom:
101
- titleMarginBottom !== null && titleMarginBottom !== undefined
102
- ? titleMarginBottom + 'rem'
103
- : undefined,
104
- textAlign: align !== null && align !== undefined ? align : undefined,
105
- };
106
-
107
- let subTextColorClassName = '';
108
- // if (subTextColor !== undefined) {
109
- // subTextColorClassName += `has-text-color`;
110
- // if (!isHexColor(subTextColor)) {
111
- // subTextColorClassName += ` has-${subTextColor}-color`;
112
- // }
113
- // }
114
-
115
- const subTextClass = classnames('vk_heading_subtext', {
116
- [`vk_heading_subtext-style-${titleStyle}`]: !!titleStyle,
117
- [`${subTextColorClassName}`]: !!subTextColorClassName,
118
- });
119
-
120
- const subTextStyle = {
121
- color:
122
- subTextColor !== null &&
123
- subTextColor !== undefined &&
124
- isHexColor(subTextColor)
125
- ? subTextColor
126
- : undefined,
127
- fontSize:
128
- subTextSize !== null && subTextSize !== undefined
129
- ? subTextSize + 'rem'
130
- : undefined,
131
- textAlign: align !== null && align !== undefined ? align : undefined,
132
- };
133
-
134
- let iconColorClassName = '';
135
- // if (fontAwesomeIconColor !== undefined) {
136
- // iconColorClassName += `has-text-color`;
137
- // if (!isHexColor(fontAwesomeIconColor)) {
138
- // iconColorClassName += ` has-${fontAwesomeIconColor}-color`;
139
- // }
140
- // }
141
-
142
- const fontAwesomeIconStyle =
143
- fontAwesomeIconColor && isHexColor(fontAwesomeIconColor)
144
- ? `style="color:${fontAwesomeIconColor};"`
145
- : '';
146
-
147
- let iconBefore = fontAwesomeIconBefore;
148
- let iconAfter = fontAwesomeIconAfter;
149
- //add class
150
- if (iconBefore && iconColorClassName) {
151
- const faIconFragmentBefore = iconBefore.split('<i class="');
152
- faIconFragmentBefore[0] =
153
- faIconFragmentBefore[0] + `<i class="${iconColorClassName} `;
154
- iconBefore = faIconFragmentBefore.join('');
155
- }
156
-
157
- if (iconAfter && iconColorClassName) {
158
- const faIconFragmentAfter = iconAfter.split('<i class="');
159
- faIconFragmentAfter[0] =
160
- faIconFragmentAfter[0] + `<i class="${iconColorClassName} `;
161
- iconAfter = faIconFragmentAfter.join('');
162
- }
163
-
164
- //add inline css
165
- if (iconBefore && fontAwesomeIconStyle) {
166
- const faIconFragmentBefore = iconBefore.split('<i');
167
- faIconFragmentBefore[0] =
168
- faIconFragmentBefore[0] + `<i ${fontAwesomeIconStyle} `;
169
- iconBefore = faIconFragmentBefore.join('');
170
- }
171
-
172
- if (iconAfter && fontAwesomeIconStyle) {
173
- const faIconFragmentAfter = iconAfter.split('<i');
174
- faIconFragmentAfter[0] =
175
- faIconFragmentAfter[0] + `<i ${fontAwesomeIconStyle} `;
176
- iconAfter = faIconFragmentAfter.join('');
177
- }
178
-
179
- const titleContent = (
180
- <>
181
- {parse(iconBefore)}
182
- <RichText.Content tagName={'span'} value={title} />
183
- {parse(iconAfter)}
184
- </>
185
- );
186
-
187
- let subtextContent;
188
- if (subTextFlag === 'on') {
189
- subtextContent = (
190
- <RichText.Content
191
- tagName={'p'}
192
- value={subText}
193
- style={subTextStyle}
194
- className={subTextClass}
195
- />
196
- );
197
- }
198
-
199
- const blockProps = useBlockProps.save({
200
- className: ``,
201
- });
202
-
203
- return (
204
- <div {...blockProps}>
205
- <div className={containerClass} style={cStyle}>
206
- {renderTitle(level, titleContent, tStyle, headingStyle)}
207
- {subtextContent}
208
- </div>
209
- </div>
210
- );
211
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/1.21.0/save.js DELETED
@@ -1,211 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
-
3
- import parse from 'html-react-parser';
4
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
5
- import classnames from 'classnames';
6
-
7
- const renderTitle = (level, contents, tStyle, headingStyle) => {
8
- switch (level) {
9
- case 1:
10
- return (
11
- <h1 style={tStyle} className={headingStyle}>
12
- {contents}
13
- </h1>
14
- );
15
- case 2:
16
- return (
17
- <h2 style={tStyle} className={headingStyle}>
18
- {contents}
19
- </h2>
20
- );
21
- case 3:
22
- return (
23
- <h3 style={tStyle} className={headingStyle}>
24
- {contents}
25
- </h3>
26
- );
27
- case 4:
28
- return (
29
- <h4 style={tStyle} className={headingStyle}>
30
- {contents}
31
- </h4>
32
- );
33
- case 5:
34
- return (
35
- <h5 style={tStyle} className={headingStyle}>
36
- {contents}
37
- </h5>
38
- );
39
- case 6:
40
- return (
41
- <h6 style={tStyle} className={headingStyle}>
42
- {contents}
43
- </h6>
44
- );
45
- }
46
- };
47
-
48
- export default function save(props) {
49
- const { attributes } = props;
50
- const {
51
- level,
52
- align,
53
- title,
54
- titleColor,
55
- titleSize,
56
- subText,
57
- subTextFlag,
58
- subTextColor,
59
- subTextSize,
60
- titleStyle,
61
- titleMarginBottom,
62
- outerMarginBottom,
63
- fontAwesomeIconBefore,
64
- fontAwesomeIconAfter,
65
- fontAwesomeIconColor,
66
- } = attributes;
67
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
68
-
69
- const cStyle = {
70
- marginBottom:
71
- outerMarginBottom !== null && outerMarginBottom !== undefined
72
- ? outerMarginBottom + `rem`
73
- : undefined,
74
- };
75
-
76
- let headingColorClassName = '';
77
- if (titleColor !== undefined) {
78
- headingColorClassName += `has-text-color`;
79
- if (!isHexColor(titleColor)) {
80
- headingColorClassName += ` has-${titleColor}-color`;
81
- }
82
- }
83
-
84
- const headingStyle = classnames('vk_heading_title', {
85
- [`vk_heading_title-style-${titleStyle}`]: !!titleStyle,
86
- [`${headingColorClassName}`]: !!headingColorClassName,
87
- });
88
-
89
- const tStyle = {
90
- color:
91
- titleColor !== null &&
92
- titleColor !== undefined &&
93
- isHexColor(titleColor)
94
- ? titleColor
95
- : undefined,
96
- fontSize:
97
- titleSize !== null && titleSize !== undefined
98
- ? titleSize + 'rem'
99
- : undefined,
100
- marginBottom:
101
- titleMarginBottom !== null && titleMarginBottom !== undefined
102
- ? titleMarginBottom + 'rem'
103
- : undefined,
104
- textAlign: align !== null && align !== undefined ? align : undefined,
105
- };
106
-
107
- let subTextColorClassName = '';
108
- if (subTextColor !== undefined) {
109
- subTextColorClassName += `has-text-color`;
110
- if (!isHexColor(subTextColor)) {
111
- subTextColorClassName += ` has-${subTextColor}-color`;
112
- }
113
- }
114
-
115
- const subTextClass = classnames('vk_heading_subtext', {
116
- [`vk_heading_subtext-style-${titleStyle}`]: !!titleStyle,
117
- [`${subTextColorClassName}`]: !!subTextColorClassName,
118
- });
119
-
120
- const subTextStyle = {
121
- color:
122
- subTextColor !== null &&
123
- subTextColor !== undefined &&
124
- isHexColor(subTextColor)
125
- ? subTextColor
126
- : undefined,
127
- fontSize:
128
- subTextSize !== null && subTextSize !== undefined
129
- ? subTextSize + 'rem'
130
- : undefined,
131
- textAlign: align !== null && align !== undefined ? align : undefined,
132
- };
133
-
134
- let iconColorClassName = '';
135
- if (fontAwesomeIconColor !== undefined) {
136
- iconColorClassName += `has-text-color`;
137
- if (!isHexColor(fontAwesomeIconColor)) {
138
- iconColorClassName += ` has-${fontAwesomeIconColor}-color`;
139
- }
140
- }
141
-
142
- const fontAwesomeIconStyle =
143
- fontAwesomeIconColor && isHexColor(fontAwesomeIconColor)
144
- ? `style="color:${fontAwesomeIconColor};"`
145
- : '';
146
-
147
- let iconBefore = fontAwesomeIconBefore;
148
- let iconAfter = fontAwesomeIconAfter;
149
- //add class
150
- if (iconBefore && iconColorClassName) {
151
- const faIconFragmentBefore = iconBefore.split('<i class="');
152
- faIconFragmentBefore[0] =
153
- faIconFragmentBefore[0] + `<i class="${iconColorClassName} `;
154
- iconBefore = faIconFragmentBefore.join('');
155
- }
156
-
157
- if (iconAfter && iconColorClassName) {
158
- const faIconFragmentAfter = iconAfter.split('<i class="');
159
- faIconFragmentAfter[0] =
160
- faIconFragmentAfter[0] + `<i class="${iconColorClassName} `;
161
- iconAfter = faIconFragmentAfter.join('');
162
- }
163
-
164
- //add inline css
165
- if (iconBefore && fontAwesomeIconStyle) {
166
- const faIconFragmentBefore = iconBefore.split('<i');
167
- faIconFragmentBefore[0] =
168
- faIconFragmentBefore[0] + `<i ${fontAwesomeIconStyle} `;
169
- iconBefore = faIconFragmentBefore.join('');
170
- }
171
-
172
- if (iconAfter && fontAwesomeIconStyle) {
173
- const faIconFragmentAfter = iconAfter.split('<i');
174
- faIconFragmentAfter[0] =
175
- faIconFragmentAfter[0] + `<i ${fontAwesomeIconStyle} `;
176
- iconAfter = faIconFragmentAfter.join('');
177
- }
178
-
179
- const titleContent = (
180
- <>
181
- {parse(iconBefore)}
182
- <RichText.Content tagName={'span'} value={title} />
183
- {parse(iconAfter)}
184
- </>
185
- );
186
-
187
- let subtextContent;
188
- if (subTextFlag === 'on') {
189
- subtextContent = (
190
- <RichText.Content
191
- tagName={'p'}
192
- value={subText}
193
- style={subTextStyle}
194
- className={subTextClass}
195
- />
196
- );
197
- }
198
-
199
- const blockProps = useBlockProps.save({
200
- className: ``,
201
- });
202
-
203
- return (
204
- <div {...blockProps}>
205
- <div className={containerClass} style={cStyle}>
206
- {renderTitle(level, titleContent, tStyle, headingStyle)}
207
- {subtextContent}
208
- </div>
209
- </div>
210
- );
211
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/1.3.2/save.js DELETED
@@ -1,158 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
-
3
- import parse from 'html-react-parser';
4
-
5
- const renderTitle = (level, contents, tStyle, headingStyle) => {
6
- switch (level) {
7
- case 1:
8
- return (
9
- <h1 style={tStyle} className={headingStyle}>
10
- {contents}
11
- </h1>
12
- );
13
- case 2:
14
- return (
15
- <h2 style={tStyle} className={headingStyle}>
16
- {contents}
17
- </h2>
18
- );
19
- case 3:
20
- return (
21
- <h3 style={tStyle} className={headingStyle}>
22
- {contents}
23
- </h3>
24
- );
25
- case 4:
26
- return (
27
- <h4 style={tStyle} className={headingStyle}>
28
- {contents}
29
- </h4>
30
- );
31
- case 5:
32
- return (
33
- <h5 style={tStyle} className={headingStyle}>
34
- {contents}
35
- </h5>
36
- );
37
- case 6:
38
- return (
39
- <h6 style={tStyle} className={headingStyle}>
40
- {contents}
41
- </h6>
42
- );
43
- }
44
- };
45
-
46
- export default function save(props) {
47
- const { attributes } = props;
48
- let {
49
- level,
50
- align,
51
- title,
52
- titleColor,
53
- titleSize,
54
- subText,
55
- subTextFlag,
56
- subTextColor,
57
- subTextSize,
58
- titleStyle,
59
- titleMarginBottom,
60
- outerMarginBottom,
61
- fontAwesomeIconBefore,
62
- fontAwesomeIconAfter,
63
- fontAwesomeIconColor,
64
- } = attributes;
65
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
66
- let cStyle;
67
- let tStyle;
68
-
69
- //containerのマージンを切り替え
70
- if (outerMarginBottom) {
71
- cStyle = { marginBottom: outerMarginBottom + `rem` };
72
- }
73
-
74
- //titleのマージンを切り替え
75
- if (titleMarginBottom !== null && titleMarginBottom !== undefined) {
76
- tStyle = {
77
- color: titleColor,
78
- fontSize: titleSize + 'rem',
79
- marginBottom: titleMarginBottom + 'rem',
80
- textAlign: align,
81
- };
82
- } else {
83
- tStyle = {
84
- color: titleColor,
85
- fontSize: titleSize + 'rem',
86
- textAlign: align,
87
- };
88
- }
89
-
90
- const headingStyle = `vk_heading_title vk_heading_title-style-${titleStyle}`;
91
- const subTextStyle = {
92
- color: subTextColor,
93
- fontSize: subTextSize + 'rem',
94
- textAlign: align,
95
- };
96
- const subTextClass = `vk_heading_subtext vk_heading_subtext-style-${titleStyle}`;
97
-
98
- let iconBefore = '';
99
- let iconAfter = '';
100
- if (fontAwesomeIconBefore) {
101
- //for recovering block
102
- fontAwesomeIconColor = fontAwesomeIconColor
103
- ? fontAwesomeIconColor
104
- : '#000000';
105
-
106
- //add inline css
107
- const faIconFragmentBefore = fontAwesomeIconBefore.split('<i');
108
- faIconFragmentBefore[0] =
109
- faIconFragmentBefore[0] +
110
- `<i style="color:${fontAwesomeIconColor};" `;
111
- iconBefore = faIconFragmentBefore.join('');
112
- }
113
- if (fontAwesomeIconAfter) {
114
- //for recovering block
115
- fontAwesomeIconColor = fontAwesomeIconColor
116
- ? fontAwesomeIconColor
117
- : '#000000';
118
-
119
- //add class and inline css
120
- const faIconFragmentAfter = fontAwesomeIconAfter.split('<i');
121
- faIconFragmentAfter[0] =
122
- faIconFragmentAfter[0] +
123
- `<i style="color:${fontAwesomeIconColor};" `;
124
- iconAfter = faIconFragmentAfter.join('');
125
- }
126
- const titleContent = (
127
- <>
128
- {parse(iconBefore)}
129
- <RichText.Content tagName={'span'} value={title} />
130
- {parse(iconAfter)}
131
- </>
132
- );
133
-
134
- let subtextContent;
135
- if (subTextFlag === 'on') {
136
- subtextContent = (
137
- <RichText.Content
138
- tagName={'p'}
139
- value={subText}
140
- style={subTextStyle}
141
- className={subTextClass}
142
- />
143
- );
144
- }
145
-
146
- const blockProps = useBlockProps.save({
147
- className: ``,
148
- });
149
-
150
- return (
151
- <div {...blockProps}>
152
- <div className={containerClass} style={cStyle}>
153
- {renderTitle(level, titleContent, tStyle, headingStyle)}
154
- {subtextContent}
155
- </div>
156
- </div>
157
- );
158
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/1.7.0/save.js DELETED
@@ -1,164 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
-
3
- import parse from 'html-react-parser';
4
-
5
- const renderTitle = (level, contents, tStyle, headingStyle) => {
6
- switch (level) {
7
- case 1:
8
- return (
9
- <h1 style={tStyle} className={headingStyle}>
10
- {contents}
11
- </h1>
12
- );
13
- case 2:
14
- return (
15
- <h2 style={tStyle} className={headingStyle}>
16
- {contents}
17
- </h2>
18
- );
19
- case 3:
20
- return (
21
- <h3 style={tStyle} className={headingStyle}>
22
- {contents}
23
- </h3>
24
- );
25
- case 4:
26
- return (
27
- <h4 style={tStyle} className={headingStyle}>
28
- {contents}
29
- </h4>
30
- );
31
- case 5:
32
- return (
33
- <h5 style={tStyle} className={headingStyle}>
34
- {contents}
35
- </h5>
36
- );
37
- case 6:
38
- return (
39
- <h6 style={tStyle} className={headingStyle}>
40
- {contents}
41
- </h6>
42
- );
43
- }
44
- };
45
-
46
- export default function save(props) {
47
- const { attributes } = props;
48
- let {
49
- level,
50
- align,
51
- title,
52
- titleColor,
53
- titleSize,
54
- subText,
55
- subTextFlag,
56
- subTextColor,
57
- subTextSize,
58
- titleStyle,
59
- titleMarginBottom,
60
- outerMarginBottom,
61
- fontAwesomeIconBefore,
62
- fontAwesomeIconAfter,
63
- fontAwesomeIconColor,
64
- } = attributes;
65
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
66
-
67
- const cStyle = {
68
- marginBottom:
69
- outerMarginBottom !== null && outerMarginBottom !== undefined
70
- ? outerMarginBottom + `rem`
71
- : undefined,
72
- };
73
-
74
- const tStyle = {
75
- color:
76
- titleColor !== null && titleColor !== undefined
77
- ? titleColor
78
- : undefined,
79
- fontSize:
80
- titleSize !== null && titleSize !== undefined
81
- ? titleSize + 'rem'
82
- : undefined,
83
- marginBottom:
84
- titleMarginBottom !== null && titleMarginBottom !== undefined
85
- ? titleMarginBottom + 'rem'
86
- : undefined,
87
- textAlign: align !== null && align !== undefined ? align : undefined,
88
- };
89
-
90
- const headingStyle = `vk_heading_title vk_heading_title-style-${titleStyle}`;
91
- const subTextStyle = {
92
- color:
93
- subTextColor !== null && subTextColor !== undefined
94
- ? subTextColor
95
- : undefined,
96
- fontSize:
97
- subTextSize !== null && subTextSize !== undefined
98
- ? subTextSize + 'rem'
99
- : undefined,
100
- textAlign: align !== null && align !== undefined ? align : undefined,
101
- };
102
- const subTextClass = `vk_heading_subtext vk_heading_subtext-style-${titleStyle}`;
103
-
104
- let iconBefore = '';
105
- let iconAfter = '';
106
- if (fontAwesomeIconBefore) {
107
- //for recovering block
108
- fontAwesomeIconColor = fontAwesomeIconColor
109
- ? fontAwesomeIconColor
110
- : '#000000';
111
-
112
- //add inline css
113
- const faIconFragmentBefore = fontAwesomeIconBefore.split('<i');
114
- faIconFragmentBefore[0] =
115
- faIconFragmentBefore[0] +
116
- `<i style="color:${fontAwesomeIconColor};" `;
117
- iconBefore = faIconFragmentBefore.join('');
118
- }
119
- if (fontAwesomeIconAfter) {
120
- //for recovering block
121
- fontAwesomeIconColor = fontAwesomeIconColor
122
- ? fontAwesomeIconColor
123
- : '#000000';
124
-
125
- //add class and inline css
126
- const faIconFragmentAfter = fontAwesomeIconAfter.split('<i');
127
- faIconFragmentAfter[0] =
128
- faIconFragmentAfter[0] +
129
- `<i style="color:${fontAwesomeIconColor};" `;
130
- iconAfter = faIconFragmentAfter.join('');
131
- }
132
- const titleContent = (
133
- <>
134
- {parse(iconBefore)}
135
- <RichText.Content tagName={'span'} value={title} />
136
- {parse(iconAfter)}
137
- </>
138
- );
139
-
140
- let subtextContent;
141
- if (subTextFlag === 'on') {
142
- subtextContent = (
143
- <RichText.Content
144
- tagName={'p'}
145
- value={subText}
146
- style={subTextStyle}
147
- className={subTextClass}
148
- />
149
- );
150
- }
151
-
152
- const blockProps = useBlockProps.save({
153
- className: ``,
154
- });
155
-
156
- return (
157
- <div {...blockProps}>
158
- <div className={containerClass} style={cStyle}>
159
- {renderTitle(level, titleContent, tStyle, headingStyle)}
160
- {subtextContent}
161
- </div>
162
- </div>
163
- );
164
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/1.9.1/save.js DELETED
@@ -1,155 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
-
3
- import parse from 'html-react-parser';
4
-
5
- const renderTitle = (level, contents, tStyle, headingStyle) => {
6
- switch (level) {
7
- case 1:
8
- return (
9
- <h1 style={tStyle} className={headingStyle}>
10
- {contents}
11
- </h1>
12
- );
13
- case 2:
14
- return (
15
- <h2 style={tStyle} className={headingStyle}>
16
- {contents}
17
- </h2>
18
- );
19
- case 3:
20
- return (
21
- <h3 style={tStyle} className={headingStyle}>
22
- {contents}
23
- </h3>
24
- );
25
- case 4:
26
- return (
27
- <h4 style={tStyle} className={headingStyle}>
28
- {contents}
29
- </h4>
30
- );
31
- case 5:
32
- return (
33
- <h5 style={tStyle} className={headingStyle}>
34
- {contents}
35
- </h5>
36
- );
37
- case 6:
38
- return (
39
- <h6 style={tStyle} className={headingStyle}>
40
- {contents}
41
- </h6>
42
- );
43
- }
44
- };
45
-
46
- export default function save(props) {
47
- const { attributes } = props;
48
- const {
49
- level,
50
- align,
51
- title,
52
- titleColor,
53
- titleSize,
54
- subText,
55
- subTextFlag,
56
- subTextColor,
57
- subTextSize,
58
- titleStyle,
59
- titleMarginBottom,
60
- outerMarginBottom,
61
- fontAwesomeIconBefore,
62
- fontAwesomeIconAfter,
63
- fontAwesomeIconColor,
64
- } = attributes;
65
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
66
-
67
- const cStyle = {
68
- marginBottom:
69
- outerMarginBottom !== null && outerMarginBottom !== undefined
70
- ? outerMarginBottom + `rem`
71
- : undefined,
72
- };
73
-
74
- const tStyle = {
75
- color:
76
- titleColor !== null && titleColor !== undefined
77
- ? titleColor
78
- : undefined,
79
- fontSize:
80
- titleSize !== null && titleSize !== undefined
81
- ? titleSize + 'rem'
82
- : undefined,
83
- marginBottom:
84
- titleMarginBottom !== null && titleMarginBottom !== undefined
85
- ? titleMarginBottom + 'rem'
86
- : undefined,
87
- textAlign: align !== null && align !== undefined ? align : undefined,
88
- };
89
-
90
- const headingStyle = `vk_heading_title vk_heading_title-style-${titleStyle}`;
91
- const subTextStyle = {
92
- color:
93
- subTextColor !== null && subTextColor !== undefined
94
- ? subTextColor
95
- : undefined,
96
- fontSize:
97
- subTextSize !== null && subTextSize !== undefined
98
- ? subTextSize + 'rem'
99
- : undefined,
100
- textAlign: align !== null && align !== undefined ? align : undefined,
101
- };
102
- const subTextClass = `vk_heading_subtext vk_heading_subtext-style-${titleStyle}`;
103
-
104
- let iconBefore = '';
105
- let iconAfter = '';
106
- const fontAwesomeIconStyle = fontAwesomeIconColor
107
- ? `style="color:${fontAwesomeIconColor};"`
108
- : '';
109
- if (fontAwesomeIconBefore) {
110
- //add inline css
111
- const faIconFragmentBefore = fontAwesomeIconBefore.split('<i');
112
- faIconFragmentBefore[0] =
113
- faIconFragmentBefore[0] + `<i ${fontAwesomeIconStyle} `;
114
- iconBefore = faIconFragmentBefore.join('');
115
- }
116
- if (fontAwesomeIconAfter) {
117
- //add class and inline css
118
- const faIconFragmentAfter = fontAwesomeIconAfter.split('<i');
119
- faIconFragmentAfter[0] =
120
- faIconFragmentAfter[0] + `<i ${fontAwesomeIconStyle} `;
121
- iconAfter = faIconFragmentAfter.join('');
122
- }
123
- const titleContent = (
124
- <>
125
- {parse(iconBefore)}
126
- <RichText.Content tagName={'span'} value={title} />
127
- {parse(iconAfter)}
128
- </>
129
- );
130
-
131
- let subtextContent;
132
- if (subTextFlag === 'on') {
133
- subtextContent = (
134
- <RichText.Content
135
- tagName={'p'}
136
- value={subText}
137
- style={subTextStyle}
138
- className={subTextClass}
139
- />
140
- );
141
- }
142
-
143
- const blockProps = useBlockProps.save({
144
- className: ``,
145
- });
146
-
147
- return (
148
- <div {...blockProps}>
149
- <div className={containerClass} style={cStyle}>
150
- {renderTitle(level, titleContent, tStyle, headingStyle)}
151
- {subtextContent}
152
- </div>
153
- </div>
154
- );
155
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/heading-toolbar.js DELETED
@@ -1,34 +0,0 @@
1
- /**
2
- * WordPress dependenciess
3
- */
4
- import { range } from 'lodash';
5
- import { __, sprintf } from '@wordpress/i18n';
6
- import { Component } from '@wordpress/element';
7
- import { Toolbar } from '@wordpress/components';
8
-
9
- class HeadingToolbar extends Component {
10
- createLevelControl(targetLevel, selectedLevel, onChange) {
11
- return {
12
- icon: 'heading',
13
- // translators: %s: heading level e.g: "1", "2", "3"
14
- title: sprintf(__('Heading %d'), targetLevel),
15
- isActive: targetLevel === selectedLevel,
16
- onClick: () => onChange(targetLevel),
17
- subscript: String(targetLevel),
18
- };
19
- }
20
-
21
- render() {
22
- const { minLevel, maxLevel, selectedLevel, onChange } = this.props;
23
-
24
- return (
25
- <Toolbar
26
- controls={range(minLevel, maxLevel).map((index) =>
27
- this.createLevelControl(index, selectedLevel, onChange)
28
- )}
29
- />
30
- );
31
- }
32
- }
33
-
34
- export default HeadingToolbar;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/deprecated/index.js DELETED
@@ -1,259 +0,0 @@
1
- import save0_24_1 from './0.24.1/save';
2
- import save0_24_2 from './0.24.2/save';
3
- import save0_24_3 from './0.24.3/save';
4
- import save0_24_4 from './0.24.4/save';
5
- import save0_24_5 from './0.24.5/save';
6
- import save0_24_6 from './0.24.6/save';
7
- import save0_24_7 from './0.24.7/save';
8
- import save0_37_1 from './0.37.1/save';
9
- import save0_39_5 from './0.39.5/save';
10
- import save0_40_0 from './0.40.0/save';
11
- import save0_40_1 from './0.40.1/save';
12
- import save0_60_1 from './0.60.1/save';
13
- import save1_3_2 from './1.3.2/save';
14
- import save1_7_0 from './1.7.0/save';
15
- import save1_9_1 from './1.9.1/save';
16
- import save1_20_5 from './1.20.5/save';
17
- import save1_20_5a from './1.20.5a/save';
18
- import save1_21_0 from './1.21.0/save';
19
-
20
- const blockAttributes = {
21
- level: {
22
- type: 'number',
23
- default: 2,
24
- },
25
- align: {
26
- type: 'string',
27
- },
28
- titleStyle: {
29
- type: 'string',
30
- default: 'default',
31
- },
32
- outerMarginBottom: {
33
- type: 'number',
34
- },
35
- title: {
36
- type: 'string',
37
- source: 'html',
38
- selector: 'h1,h2,h3,h4,h5,h6',
39
- default: '',
40
- },
41
- titleColor: {
42
- type: 'string',
43
- default: '#000000',
44
- },
45
- titleSize: {
46
- type: 'number',
47
- default: 2, // version < 0.17.7 は デフォルト値が 2.6
48
- },
49
- titleMarginBottom: {
50
- type: "number",
51
- default: 1
52
- },
53
- subText: {
54
- source: 'html',
55
- selector: 'p',
56
- default: '',
57
- },
58
- subTextFlag: {
59
- type: 'string',
60
- default: 'on',
61
- },
62
- subTextColor: {
63
- type: 'string',
64
- default: '#000000',
65
- },
66
- subTextSize: {
67
- type: 'number',
68
- default: 1.2,
69
- },
70
- };
71
-
72
- const blockAttributes2 = {
73
- ...blockAttributes,
74
- anchor: {
75
- type: 'string',
76
- source: 'attribute',
77
- attribute: 'id',
78
- selector: '*',
79
- },
80
- }
81
-
82
-
83
- const blockAttributes3 = {
84
- ...blockAttributes2,
85
- title: {
86
- type: 'string',
87
- source: 'html',
88
- selector: 'span',
89
- default: '',
90
- },
91
- fontAwesomeIconBefore: {
92
- type: 'string',
93
- default: '',
94
- },
95
- fontAwesomeIconAfter: {
96
- type: 'string',
97
- default: '',
98
- },
99
- fontAwesomeIconColor: {
100
- type: 'string',
101
- default: '#000000',
102
- },
103
- }
104
-
105
- const blockAttributes4 = {
106
- ...blockAttributes3,
107
- subTextFlag: {
108
- type: 'string',
109
- default: 'off'
110
- },
111
- }
112
-
113
- const blockAttributes5 = {
114
- ...blockAttributes4,
115
- outerMarginBottom: {
116
- type: 'number',
117
- default: 0
118
- },
119
- titleMarginBottom: {
120
- type: "number",
121
- default: 1
122
- },
123
- titleColor: {
124
- type: "string",
125
- default: "#000000"
126
- },
127
- subTextColor: {
128
- type: "string",
129
- default: "#000000"
130
- },
131
- }
132
-
133
- const blockAttributes6 = {
134
- ...blockAttributes5,
135
- outerMarginBottom: {
136
- type: 'number',
137
- default: null
138
- },
139
- titleMarginBottom: {
140
- type: "number",
141
- default: null
142
- },
143
- titleColor: {
144
- type: "string",
145
- default: null
146
- },
147
- subTextColor: {
148
- type: "string",
149
- default: null
150
- },
151
- fontAwesomeIconColor: {
152
- type: 'string',
153
- default: "#000000",
154
- },
155
- }
156
-
157
- /* 1.9.1 で titleSize とsubTextSize を変更 */
158
- const blockAttributes7 = {
159
- ...blockAttributes6,
160
- titleSize: {
161
- type: 'number',
162
- default: 2,
163
- },
164
- subTextSize: {
165
- type: 'number',
166
- default: 1.2,
167
- },
168
- subTextColor: {
169
- type: "string",
170
- },
171
- subTextSize: {
172
- type: 'number',
173
- },
174
- fontAwesomeIconColor: {
175
- type: 'string',
176
- },
177
- }
178
-
179
- const blockAttributes8 = {
180
- ...blockAttributes7,
181
- titleColor: {
182
- type: "string",
183
- },
184
- titleSize: {
185
- type: 'number',
186
- },
187
- }
188
-
189
- const deprecated = [
190
- {
191
- attributes: blockAttributes8,
192
- save: save1_21_0,
193
- },
194
- {
195
- attributes: blockAttributes8,
196
- save: save1_20_5,
197
- },
198
- {
199
- attributes: blockAttributes7,
200
- save: save1_9_1,
201
- },
202
- {
203
- attributes: blockAttributes6,
204
- save: save1_7_0,
205
- },
206
- {
207
- attributes: blockAttributes5,
208
- save: save1_3_2,
209
- },
210
- {
211
- attributes: blockAttributes4,
212
- save: save0_60_1,
213
- },
214
- {
215
- attributes: blockAttributes4,
216
- save: save0_40_1,
217
- },
218
- {
219
- attributes: blockAttributes3,
220
- save: save0_40_0,
221
- },
222
- {
223
- attributes: blockAttributes3,
224
- save: save0_39_5,
225
- },
226
- {
227
- attributes: blockAttributes3,
228
- save: save0_37_1,
229
- },
230
- {
231
- attributes: blockAttributes2,
232
- save: save0_24_7,
233
- },
234
- {
235
- attributes: blockAttributes2,
236
- save: save0_24_6,
237
- },
238
- {
239
- attributes: blockAttributes2,
240
- save: save0_24_5,
241
- },
242
- {
243
- attributes: blockAttributes2,
244
- save: save0_24_4,
245
- },
246
- {
247
- attributes: blockAttributes2,
248
- save: save0_24_3,
249
- },
250
- {
251
- attributes: blockAttributes2,
252
- save: save0_24_2,
253
- },
254
- {
255
- attributes: blockAttributes,
256
- save: save0_24_1,
257
- },
258
- ];
259
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/edit.js DELETED
@@ -1,405 +0,0 @@
1
- import { FontAwesome } from '@vkblocks/utils/font-awesome-new';
2
-
3
- import HeadingLevelDropdown from './heading-level-dropdown';
4
- import { __ } from '@wordpress/i18n';
5
- import {
6
- RangeControl,
7
- PanelBody,
8
- RadioControl,
9
- SelectControl,
10
- BaseControl,
11
- ToolbarGroup,
12
- } from '@wordpress/components';
13
- import {
14
- InspectorControls,
15
- BlockControls,
16
- AlignmentToolbar,
17
- RichText,
18
- useBlockProps,
19
- } from '@wordpress/block-editor';
20
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
21
- import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette';
22
- import parse from 'html-react-parser';
23
- import classnames from 'classnames';
24
-
25
- const renderTitle = (level, contents, tStyle, headingStyle) => {
26
- switch (level) {
27
- case 1:
28
- return (
29
- <h1 style={tStyle} className={headingStyle}>
30
- {contents}
31
- </h1>
32
- );
33
- case 2:
34
- return (
35
- <h2 style={tStyle} className={headingStyle}>
36
- {contents}
37
- </h2>
38
- );
39
- case 3:
40
- return (
41
- <h3 style={tStyle} className={headingStyle}>
42
- {contents}
43
- </h3>
44
- );
45
- case 4:
46
- return (
47
- <h4 style={tStyle} className={headingStyle}>
48
- {contents}
49
- </h4>
50
- );
51
- case 5:
52
- return (
53
- <h5 style={tStyle} className={headingStyle}>
54
- {contents}
55
- </h5>
56
- );
57
- case 6:
58
- return (
59
- <h6 style={tStyle} className={headingStyle}>
60
- {contents}
61
- </h6>
62
- );
63
- }
64
- };
65
-
66
- export default function HeaddingEdit(props) {
67
- const { attributes, setAttributes } = props;
68
- const {
69
- level,
70
- align,
71
- title,
72
- titleColor,
73
- titleSize,
74
- subText,
75
- subTextFlag,
76
- subTextColor,
77
- subTextSize,
78
- titleStyle,
79
- titleMarginBottom,
80
- outerMarginBottom,
81
- fontAwesomeIconBefore,
82
- fontAwesomeIconAfter,
83
- fontAwesomeIconColor,
84
- } = attributes;
85
-
86
- // eslint-disable-next-line no-undef
87
- const iconFamily = vkFontAwesome.iconFamily;
88
-
89
- const setTitleFontSize = (newLevel) => {
90
- setAttributes({ level: newLevel });
91
- };
92
-
93
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
94
-
95
- const cStyle = {
96
- marginBottom:
97
- outerMarginBottom !== null && outerMarginBottom !== undefined
98
- ? outerMarginBottom + `rem`
99
- : undefined,
100
- };
101
-
102
- let headingColorClassName = '';
103
- if (titleColor !== undefined) {
104
- headingColorClassName += `has-text-color`;
105
- if (!isHexColor(titleColor)) {
106
- headingColorClassName += ` has-${titleColor}-color`;
107
- }
108
- }
109
-
110
- const headingStyle = classnames('vk_heading_title', {
111
- [`vk_heading_title-style-${titleStyle}`]: !!titleStyle,
112
- [`${headingColorClassName}`]: !!headingColorClassName,
113
- });
114
-
115
- const tStyle = {
116
- color:
117
- titleColor !== null &&
118
- titleColor !== undefined &&
119
- isHexColor(titleColor)
120
- ? titleColor
121
- : undefined,
122
- fontSize:
123
- titleSize !== null && titleSize !== undefined
124
- ? titleSize + 'rem'
125
- : undefined,
126
- marginBottom:
127
- titleMarginBottom !== null && titleMarginBottom !== undefined
128
- ? titleMarginBottom + 'rem'
129
- : undefined,
130
- textAlign: align !== null && align !== undefined ? align : undefined,
131
- };
132
-
133
- let subTextColorClassName = '';
134
- if (subTextColor !== undefined) {
135
- subTextColorClassName += `has-text-color`;
136
- if (!isHexColor(subTextColor)) {
137
- subTextColorClassName += ` has-${subTextColor}-color`;
138
- }
139
- }
140
-
141
- const subTextClass = classnames('vk_heading_subtext', {
142
- [`vk_heading_subtext-style-${titleStyle}`]: !!titleStyle,
143
- [`${subTextColorClassName}`]: !!subTextColorClassName,
144
- });
145
-
146
- const subTextStyle = {
147
- color:
148
- subTextColor !== null &&
149
- subTextColor !== undefined &&
150
- isHexColor(subTextColor)
151
- ? subTextColor
152
- : undefined,
153
- fontSize:
154
- subTextSize !== null && subTextSize !== undefined
155
- ? subTextSize + 'rem'
156
- : undefined,
157
- textAlign: align !== null && align !== undefined ? align : undefined,
158
- };
159
-
160
- let iconColorClassName = '';
161
- if (fontAwesomeIconColor !== undefined) {
162
- iconColorClassName += `has-text-color`;
163
- if (!isHexColor(fontAwesomeIconColor)) {
164
- iconColorClassName += ` has-${fontAwesomeIconColor}-color`;
165
- }
166
- }
167
-
168
- const fontAwesomeIconStyle =
169
- fontAwesomeIconColor && isHexColor(fontAwesomeIconColor)
170
- ? `style="color:${fontAwesomeIconColor};"`
171
- : '';
172
-
173
- let iconBefore = fontAwesomeIconBefore;
174
- let iconAfter = fontAwesomeIconAfter;
175
- //add class
176
- if (iconBefore && iconColorClassName) {
177
- const faIconFragmentBefore = iconBefore.split('<i class="');
178
- faIconFragmentBefore[0] =
179
- faIconFragmentBefore[0] + `<i class="${iconColorClassName} `;
180
- iconBefore = faIconFragmentBefore.join('');
181
- }
182
-
183
- if (iconAfter && iconColorClassName) {
184
- const faIconFragmentAfter = iconAfter.split('<i class="');
185
- faIconFragmentAfter[0] =
186
- faIconFragmentAfter[0] + `<i class="${iconColorClassName} `;
187
- iconAfter = faIconFragmentAfter.join('');
188
- }
189
-
190
- //add inline css
191
- if (iconBefore && fontAwesomeIconStyle) {
192
- const faIconFragmentBefore = iconBefore.split('<i');
193
- faIconFragmentBefore[0] =
194
- faIconFragmentBefore[0] + `<i ${fontAwesomeIconStyle} `;
195
- iconBefore = faIconFragmentBefore.join('');
196
- }
197
-
198
- if (iconAfter && fontAwesomeIconStyle) {
199
- const faIconFragmentAfter = iconAfter.split('<i');
200
- faIconFragmentAfter[0] =
201
- faIconFragmentAfter[0] + `<i ${fontAwesomeIconStyle} `;
202
- iconAfter = faIconFragmentAfter.join('');
203
- }
204
-
205
- const titleContent = (
206
- <>
207
- {parse(iconBefore)}
208
- <RichText
209
- tagName={'span'}
210
- value={title}
211
- onChange={(value) => {
212
- setAttributes({ title: value });
213
- }}
214
- placeholder={__('Input title…', 'vk-blocks')}
215
- />
216
- {parse(iconAfter)}
217
- </>
218
- );
219
-
220
- let subtextContent;
221
- if (subTextFlag === 'on') {
222
- subtextContent = (
223
- <RichText
224
- tagName={'p'}
225
- value={subText}
226
- onChange={(value) => setAttributes({ subText: value })}
227
- style={subTextStyle}
228
- className={subTextClass}
229
- placeholder={__('Input sub text…', 'vk-blocks')}
230
- />
231
- );
232
- }
233
-
234
- const blockProps = useBlockProps({
235
- className: ``,
236
- });
237
-
238
- return (
239
- <>
240
- <BlockControls group="block">
241
- <ToolbarGroup>
242
- <HeadingLevelDropdown
243
- selectedLevel={level}
244
- onChange={setTitleFontSize}
245
- />
246
- </ToolbarGroup>
247
- <AlignmentToolbar
248
- value={align}
249
- onChange={(value) => {
250
- setAttributes({ align: value });
251
- }}
252
- />
253
- </BlockControls>
254
- <InspectorControls>
255
- <PanelBody title={__('Style Settings', 'vk-blocks')}>
256
- <SelectControl
257
- label={__('Heading style', 'vk-blocks')}
258
- value={titleStyle}
259
- onChange={(value) =>
260
- setAttributes({ titleStyle: value })
261
- }
262
- options={[
263
- {
264
- label: __('Default', 'vk-blocks'),
265
- value: 'default',
266
- },
267
- {
268
- label: __('Plain', 'vk-blocks'),
269
- value: 'plain',
270
- },
271
- ]}
272
- />
273
- </PanelBody>
274
- <PanelBody title={__('Margin Setting', 'vk-blocks')}>
275
- <p>
276
- {__(
277
- 'Margin between Heading and sub text (rem)',
278
- 'vk-blocks'
279
- )}
280
- </p>
281
- <RangeControl
282
- value={titleMarginBottom}
283
- onChange={(value) => {
284
- setAttributes({ titleMarginBottom: value });
285
- }}
286
- min={-1}
287
- max={3}
288
- step={0.1}
289
- allowReset={true}
290
- resetFallbackValue={null}
291
- />
292
- <p>
293
- {__(
294
- 'Margin bottom size of after this block (rem)',
295
- 'vk-blocks'
296
- )}
297
- </p>
298
- <RangeControl
299
- value={outerMarginBottom}
300
- onChange={(value) => {
301
- setAttributes({ outerMarginBottom: value });
302
- }}
303
- min={-1}
304
- max={8}
305
- step={0.1}
306
- allowReset={true}
307
- resetFallbackValue={null}
308
- />
309
- </PanelBody>
310
- <PanelBody title={__('Heading Settings', 'vk-blocks')}>
311
- <RangeControl
312
- label={__('Text size (rem)', 'vk-blocks')}
313
- value={titleSize}
314
- onChange={(value) => {
315
- setAttributes({ titleSize: value });
316
- }}
317
- min={0.5}
318
- max={4}
319
- step={0.1}
320
- allowReset={true}
321
- resetFallbackValue={null}
322
- />
323
- <BaseControl
324
- label={__('Text Color', 'vk-blocks')}
325
- id={`vk_heading_textColor`}
326
- >
327
- <AdvancedColorPalette
328
- schema={'titleColor'}
329
- {...props}
330
- />
331
- </BaseControl>
332
- </PanelBody>
333
- <PanelBody
334
- title={__('Icon', 'vk-blocks') + ' ( ' + iconFamily + ' )'}
335
- >
336
- <BaseControl
337
- label={__('Before text', 'vk-blocks')}
338
- id={`vk_heading_beforeText`}
339
- >
340
- <FontAwesome
341
- attributeName={'fontAwesomeIconBefore'}
342
- {...props}
343
- />
344
- </BaseControl>
345
- <BaseControl
346
- label={__('After text', 'vk-blocks')}
347
- id={`vk_heading_afterText`}
348
- >
349
- <FontAwesome
350
- attributeName={'fontAwesomeIconAfter'}
351
- {...props}
352
- />
353
- </BaseControl>
354
- <BaseControl
355
- label={__('Icon Color', 'vk-blocks')}
356
- id={`vk_heading_iconColor`}
357
- >
358
- <AdvancedColorPalette
359
- schema={'fontAwesomeIconColor'}
360
- {...props}
361
- />
362
- </BaseControl>
363
- </PanelBody>
364
- <PanelBody title={__('Sub Text Settings', 'vk-blocks')}>
365
- <RadioControl
366
- label={__('Position', 'vk-blocks')}
367
- selected={subTextFlag}
368
- options={[
369
- {
370
- label: __('Display', 'vk-blocks'),
371
- value: 'on',
372
- },
373
- {
374
- label: __('Hide', 'vk-blocks'),
375
- value: 'off',
376
- },
377
- ]}
378
- onChange={(value) =>
379
- setAttributes({ subTextFlag: value })
380
- }
381
- />
382
- <p>{__('Text size (rem)', 'vk-blocks')}</p>
383
- <RangeControl
384
- value={subTextSize}
385
- onChange={(value) => {
386
- setAttributes({ subTextSize: value });
387
- }}
388
- min={0.5}
389
- max={3}
390
- step={0.1}
391
- allowReset={true}
392
- resetFallbackValue={null}
393
- />
394
- <AdvancedColorPalette schema={'subTextColor'} {...props} />
395
- </PanelBody>
396
- </InspectorControls>
397
- <div {...blockProps}>
398
- <div className={containerClass} style={cStyle}>
399
- {renderTitle(level, titleContent, tStyle, headingStyle)}
400
- {subtextContent}
401
- </div>
402
- </div>
403
- </>
404
- );
405
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/heading-level-dropdown.js DELETED
@@ -1,51 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { ToolbarDropdownMenu } from '@wordpress/components';
5
- import { __, sprintf } from '@wordpress/i18n';
6
-
7
- /**
8
- * Internal dependencies
9
- */
10
- import HeadingLevelIcon from './heading-level-icon';
11
-
12
- const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
13
-
14
- // WordPress5.8でcssが崩れるので独自のクラスを追加
15
- const POPOVER_PROPS = {
16
- className:
17
- 'block-library-heading-level-dropdown vk-blocks-heading-level-dropdown',
18
- };
19
-
20
- export default function HeadingLevelDropdown({ selectedLevel, onChange }) {
21
- return (
22
- <ToolbarDropdownMenu
23
- popoverProps={POPOVER_PROPS}
24
- icon={<HeadingLevelIcon level={selectedLevel} />}
25
- label={__('Change heading level')}
26
- controls={HEADING_LEVELS.map((targetLevel) => {
27
- {
28
- const isActive = targetLevel === selectedLevel;
29
-
30
- return {
31
- icon: (
32
- <HeadingLevelIcon
33
- level={targetLevel}
34
- isPressed={isActive}
35
- />
36
- ),
37
- label: sprintf(
38
- // translators: %s: heading level e.g: "1", "2", "3"
39
- __('Heading %d'),
40
- targetLevel
41
- ),
42
- isActive,
43
- onClick() {
44
- onChange(targetLevel);
45
- },
46
- };
47
- }
48
- })}
49
- />
50
- );
51
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/heading-level-icon.js DELETED
@@ -1,44 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { Path, SVG } from '@wordpress/components';
5
-
6
- /**
7
- * HeadingLevelIcon props.
8
- *
9
- * @typedef WPHeadingLevelIconProps
10
- * @property {number} level The heading level to show an icon for.
11
- * @property {?boolean} isPressed Whether or not the icon should appear pressed; default: false.
12
- */
13
-
14
- /**
15
- * Heading level icon.
16
- *
17
- * @param {WPHeadingLevelIconProps} props Component props.
18
- * @return {?WPComponent} The icon.
19
- */
20
- export default function HeadingLevelIcon({ level, isPressed = false }) {
21
- const levelToPath = {
22
- 1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
23
- 2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
24
- 3: 'M12.1 12.2c.4.3.8.5 1.2.7.4.2.9.3 1.4.3.5 0 1-.1 1.4-.3.3-.1.5-.5.5-.8 0-.2 0-.4-.1-.6-.1-.2-.3-.3-.5-.4-.3-.1-.7-.2-1-.3-.5-.1-1-.1-1.5-.1V9.1c.7.1 1.5-.1 2.2-.4.4-.2.6-.5.6-.9 0-.3-.1-.6-.4-.8-.3-.2-.7-.3-1.1-.3-.4 0-.8.1-1.1.3-.4.2-.7.4-1.1.6l-1.2-1.4c.5-.4 1.1-.7 1.6-.9.5-.2 1.2-.3 1.8-.3.5 0 1 .1 1.6.2.4.1.8.3 1.2.5.3.2.6.5.8.8.2.3.3.7.3 1.1 0 .5-.2.9-.5 1.3-.4.4-.9.7-1.5.9v.1c.6.1 1.2.4 1.6.8.4.4.7.9.7 1.5 0 .4-.1.8-.3 1.2-.2.4-.5.7-.9.9-.4.3-.9.4-1.3.5-.5.1-1 .2-1.6.2-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1l1.1-1.4zM7 9H3V5H1v10h2v-4h4v4h2V5H7v4z',
25
- 4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z',
26
- 5: 'M12.1 12.2c.4.3.7.5 1.1.7.4.2.9.3 1.3.3.5 0 1-.1 1.4-.4.4-.3.6-.7.6-1.1 0-.4-.2-.9-.6-1.1-.4-.3-.9-.4-1.4-.4H14c-.1 0-.3 0-.4.1l-.4.1-.5.2-1-.6.3-5h6.4v1.9h-4.3L14 8.8c.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.5 0 .9.1 1.4.2.4.1.8.3 1.1.6.3.2.6.6.8.9.2.4.3.9.3 1.4 0 .5-.1 1-.3 1.4-.2.4-.5.8-.9 1.1-.4.3-.8.5-1.3.7-.5.2-1 .3-1.5.3-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1-.1-.1 1-1.5 1-1.5zM9 15H7v-4H3v4H1V5h2v4h4V5h2v10z',
27
- 6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z',
28
- };
29
- if (!levelToPath.hasOwnProperty(level)) {
30
- return null;
31
- }
32
-
33
- return (
34
- <SVG
35
- width="24"
36
- height="24"
37
- viewBox="0 0 20 20"
38
- xmlns="http://www.w3.org/2000/svg"
39
- isPressed={isPressed}
40
- >
41
- <Path d={levelToPath[level]} />
42
- </SVG>
43
- );
44
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 10V4h3v15h-3v-6h-6v6h-3v-1.89l1.06-1.1c.95-1 .28-2.64-1.06-2.73V4h3v6h6z" fill="#000"/><path d="M10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/></svg>
 
src/blocks/heading/index.js DELETED
@@ -1,45 +0,0 @@
1
- /**
2
- * heading block type
3
- *
4
- */
5
- import { ReactComponent as Icon } from './icon.svg';
6
- import { iconUser, title, baseColor } from '@vkblocks/utils/example-data';
7
-
8
- import deprecated from './deprecated/';
9
- import edit from './edit';
10
- import metadata from './block.json';
11
- import save from './save';
12
- import transforms from './transforms.js';
13
-
14
- const { name } = metadata;
15
-
16
- export { metadata, name };
17
-
18
- export const settings = {
19
- icon: <Icon />,
20
- category: 'vk-blocks-cat',
21
- example: {
22
- attributes: {
23
- anchor: '',
24
- level: 2,
25
- align: 'center',
26
- titleStyle: 'default',
27
- outerMarginBottom: 0,
28
- title,
29
- titleColor: baseColor,
30
- titleSize: 2,
31
- titleMarginBottom: 1,
32
- subText: title,
33
- subTextFlag: 'on',
34
- subTextColor: baseColor,
35
- subTextSize: 1.2,
36
- fontAwesomeIconBefore: iconUser,
37
- fontAwesomeIconAfter: '',
38
- fontAwesomeIconColor: baseColor,
39
- },
40
- },
41
- edit,
42
- save,
43
- transforms,
44
- deprecated,
45
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/index.php DELETED
@@ -1,34 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/heading` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register Heading block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_heading() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/heading',
18
- VK_BLOCKS_DIR_URL . 'build/heading/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- register_block_type(
25
- __DIR__,
26
- array(
27
- 'style' => 'vk-blocks/heading',
28
- 'editor_style' => 'vk-blocks-build-editor-css',
29
- 'editor_script' => 'vk-blocks-build-js',
30
- )
31
- );
32
- }
33
- add_action( 'init', 'vk_blocks_register_block_heading', 99 );
34
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/save.js DELETED
@@ -1,211 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
-
3
- import parse from 'html-react-parser';
4
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
5
- import classnames from 'classnames';
6
-
7
- const renderTitle = (level, contents, tStyle, headingStyle) => {
8
- switch (level) {
9
- case 1:
10
- return (
11
- <h1 style={tStyle} className={headingStyle}>
12
- {contents}
13
- </h1>
14
- );
15
- case 2:
16
- return (
17
- <h2 style={tStyle} className={headingStyle}>
18
- {contents}
19
- </h2>
20
- );
21
- case 3:
22
- return (
23
- <h3 style={tStyle} className={headingStyle}>
24
- {contents}
25
- </h3>
26
- );
27
- case 4:
28
- return (
29
- <h4 style={tStyle} className={headingStyle}>
30
- {contents}
31
- </h4>
32
- );
33
- case 5:
34
- return (
35
- <h5 style={tStyle} className={headingStyle}>
36
- {contents}
37
- </h5>
38
- );
39
- case 6:
40
- return (
41
- <h6 style={tStyle} className={headingStyle}>
42
- {contents}
43
- </h6>
44
- );
45
- }
46
- };
47
-
48
- export default function save(props) {
49
- const { attributes } = props;
50
- const {
51
- level,
52
- align,
53
- title,
54
- titleColor,
55
- titleSize,
56
- subText,
57
- subTextFlag,
58
- subTextColor,
59
- subTextSize,
60
- titleStyle,
61
- titleMarginBottom,
62
- outerMarginBottom,
63
- fontAwesomeIconBefore,
64
- fontAwesomeIconAfter,
65
- fontAwesomeIconColor,
66
- } = attributes;
67
- const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
68
-
69
- const cStyle = {
70
- marginBottom:
71
- outerMarginBottom !== null && outerMarginBottom !== undefined
72
- ? outerMarginBottom + `rem`
73
- : undefined,
74
- };
75
-
76
- let headingColorClassName = '';
77
- if (titleColor !== undefined) {
78
- headingColorClassName += `has-text-color`;
79
- if (!isHexColor(titleColor)) {
80
- headingColorClassName += ` has-${titleColor}-color`;
81
- }
82
- }
83
-
84
- const headingStyle = classnames('vk_heading_title', {
85
- [`vk_heading_title-style-${titleStyle}`]: !!titleStyle,
86
- [`${headingColorClassName}`]: !!headingColorClassName,
87
- });
88
-
89
- const tStyle = {
90
- color:
91
- titleColor !== null &&
92
- titleColor !== undefined &&
93
- isHexColor(titleColor)
94
- ? titleColor
95
- : undefined,
96
- fontSize:
97
- titleSize !== null && titleSize !== undefined
98
- ? titleSize + 'rem'
99
- : undefined,
100
- marginBottom:
101
- titleMarginBottom !== null && titleMarginBottom !== undefined
102
- ? titleMarginBottom + 'rem'
103
- : undefined,
104
- textAlign: align !== null && align !== undefined ? align : undefined,
105
- };
106
-
107
- let subTextColorClassName = '';
108
- if (subTextColor !== undefined) {
109
- subTextColorClassName += `has-text-color`;
110
- if (!isHexColor(subTextColor)) {
111
- subTextColorClassName += ` has-${subTextColor}-color`;
112
- }
113
- }
114
-
115
- const subTextClass = classnames('vk_heading_subtext', {
116
- [`vk_heading_subtext-style-${titleStyle}`]: !!titleStyle,
117
- [`${subTextColorClassName}`]: !!subTextColorClassName,
118
- });
119
-
120
- const subTextStyle = {
121
- color:
122
- subTextColor !== null &&
123
- subTextColor !== undefined &&
124
- isHexColor(subTextColor)
125
- ? subTextColor
126
- : undefined,
127
- fontSize:
128
- subTextSize !== null && subTextSize !== undefined
129
- ? subTextSize + 'rem'
130
- : undefined,
131
- textAlign: align !== null && align !== undefined ? align : undefined,
132
- };
133
-
134
- let iconColorClassName = '';
135
- if (fontAwesomeIconColor !== undefined) {
136
- iconColorClassName += `has-text-color`;
137
- if (!isHexColor(fontAwesomeIconColor)) {
138
- iconColorClassName += ` has-${fontAwesomeIconColor}-color`;
139
- }
140
- }
141
-
142
- const fontAwesomeIconStyle =
143
- fontAwesomeIconColor && isHexColor(fontAwesomeIconColor)
144
- ? `style="color:${fontAwesomeIconColor};"`
145
- : '';
146
-
147
- let iconBefore = fontAwesomeIconBefore;
148
- let iconAfter = fontAwesomeIconAfter;
149
- //add class
150
- if (iconBefore && iconColorClassName) {
151
- const faIconFragmentBefore = iconBefore.split('<i class="');
152
- faIconFragmentBefore[0] =
153
- faIconFragmentBefore[0] + `<i class="${iconColorClassName} `;
154
- iconBefore = faIconFragmentBefore.join('');
155
- }
156
-
157
- if (iconAfter && iconColorClassName) {
158
- const faIconFragmentAfter = iconAfter.split('<i class="');
159
- faIconFragmentAfter[0] =
160
- faIconFragmentAfter[0] + `<i class="${iconColorClassName} `;
161
- iconAfter = faIconFragmentAfter.join('');
162
- }
163
-
164
- //add inline css
165
- if (iconBefore && fontAwesomeIconStyle) {
166
- const faIconFragmentBefore = iconBefore.split('<i');
167
- faIconFragmentBefore[0] =
168
- faIconFragmentBefore[0] + `<i ${fontAwesomeIconStyle} `;
169
- iconBefore = faIconFragmentBefore.join('');
170
- }
171
-
172
- if (iconAfter && fontAwesomeIconStyle) {
173
- const faIconFragmentAfter = iconAfter.split('<i');
174
- faIconFragmentAfter[0] =
175
- faIconFragmentAfter[0] + `<i ${fontAwesomeIconStyle} `;
176
- iconAfter = faIconFragmentAfter.join('');
177
- }
178
-
179
- const titleContent = (
180
- <>
181
- {parse(iconBefore)}
182
- <RichText.Content tagName={'span'} value={title} />
183
- {parse(iconAfter)}
184
- </>
185
- );
186
-
187
- let subtextContent;
188
- if (subTextFlag === 'on') {
189
- subtextContent = (
190
- <RichText.Content
191
- tagName={'p'}
192
- value={subText}
193
- style={subTextStyle}
194
- className={subTextClass}
195
- />
196
- );
197
- }
198
-
199
- const blockProps = useBlockProps.save({
200
- className: ``,
201
- });
202
-
203
- return (
204
- <div {...blockProps}>
205
- <div className={containerClass} style={cStyle}>
206
- {renderTitle(level, titleContent, tStyle, headingStyle)}
207
- {subtextContent}
208
- </div>
209
- </div>
210
- );
211
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/style.scss DELETED
@@ -1,44 +0,0 @@
1
- /*-------------------------------------------*/
2
- /* CSS
3
- /*-------------------------------------------*/
4
- @mixin reset() {
5
- background: none;
6
- border: none;
7
- border-radius: 0;
8
- padding: 0;
9
- outline: unset;
10
- outline-offset: unset;
11
- box-shadow: none;
12
- display: block; /* display:block をつけておかないと左右線デザインでflex指定されて左寄りになる */
13
- &:after {
14
- content: none;
15
- border: none;
16
- }
17
- &:before {
18
- content: none;
19
- }
20
- }
21
- .vk_heading {
22
- i:first-child {
23
- margin-right: 0.2em;
24
- }
25
- i:last-child {
26
- margin-left: 0.2em;
27
- }
28
- }
29
- // .vk_heading は指定が強い要素（ Charm ）も消すために必要
30
- .vk_heading.vk_heading-style-plain {
31
- .vk_heading_title {
32
- @include reset;
33
- &:not(.has-text-color) {
34
- color: unset;
35
- }
36
- &:after {
37
- @include reset;
38
- }
39
- }
40
- }
41
-
42
- .vk_heading_subtext {
43
- margin-bottom: 0;
44
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/heading/transforms.js DELETED
@@ -1,21 +0,0 @@
1
- import { createBlock } from '@wordpress/blocks';
2
-
3
- const transforms = {
4
- from: [
5
- {
6
- type: 'block',
7
- blocks: ['core/heading'],
8
- transform: (attributes) => {
9
- const { content } = attributes;
10
-
11
- const transformAttributes = {
12
- title: content,
13
- };
14
-
15
- return createBlock('vk-blocks/heading', transformAttributes);
16
- },
17
- },
18
- ],
19
- };
20
-
21
- export default transforms;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon-outer/block.json DELETED
@@ -1,41 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/icon-outer",
4
- "category": "vk-blocks-cat",
5
- "title": "Icon Outer",
6
- "attributes": {
7
- "iconSize": {
8
- "type": "number",
9
- "default": 36
10
- },
11
- "iconSizeUnit": {
12
- "type": "string",
13
- "default": "px"
14
- },
15
- "iconMargin": {
16
- "type": "number",
17
- "default": 22
18
- },
19
- "iconMarginUnit": {
20
- "type": "string",
21
- "default": "px"
22
- },
23
- "iconRadius": {
24
- "type": "number",
25
- "default": 50
26
- },
27
- "iconsJustify": {
28
- "type": "string",
29
- "default": "left"
30
- },
31
- "iconType": {
32
- "type": "string",
33
- "default": "0"
34
- }
35
- },
36
- "description": "Display the Font Awesome icons horizontally.",
37
- "textdomain": "vk-blocks",
38
- "supports": {
39
- "className": true
40
- }
41
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon-outer/edit.js DELETED
@@ -1,239 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import {
3
- InnerBlocks,
4
- useBlockProps,
5
- InspectorControls,
6
- JustifyContentControl,
7
- BlockControls,
8
- } from '@wordpress/block-editor';
9
- import {
10
- PanelBody,
11
- BaseControl,
12
- TextControl,
13
- RangeControl,
14
- ButtonGroup,
15
- Button,
16
- SelectControl,
17
- } from '@wordpress/components';
18
- import { useEffect } from '@wordpress/element';
19
- import { select, dispatch } from '@wordpress/data';
20
-
21
- export default function IconOuterEdit(props) {
22
- const { attributes, setAttributes, clientId } = props;
23
- const {
24
- iconSize,
25
- iconSizeUnit,
26
- iconMargin,
27
- iconMarginUnit,
28
- iconRadius,
29
- iconsJustify,
30
- iconType,
31
- } = attributes;
32
-
33
- const { getBlocksByClientId } = select('core/block-editor');
34
- const { updateBlockAttributes } = dispatch('core/block-editor');
35
-
36
- const thisBlock = getBlocksByClientId(clientId);
37
-
38
- useEffect(() => {
39
- if (thisBlock && thisBlock[0] && thisBlock[0].innerBlocks) {
40
- const thisInnerBlocks = thisBlock[0].innerBlocks;
41
- thisInnerBlocks.forEach(function (thisInnerBlock) {
42
- updateBlockAttributes(thisInnerBlock.clientId, { iconSize });
43
- updateBlockAttributes(thisInnerBlock.clientId, {
44
- iconSizeUnit,
45
- });
46
- updateBlockAttributes(thisInnerBlock.clientId, { iconMargin });
47
- updateBlockAttributes(thisInnerBlock.clientId, {
48
- iconMarginUnit,
49
- });
50
- updateBlockAttributes(thisInnerBlock.clientId, { iconRadius });
51
- updateBlockAttributes(thisInnerBlock.clientId, { iconType });
52
- });
53
- }
54
- }, [thisBlock, attributes, clientId]);
55
-
56
- // blocksProps を予め定義
57
- const blockProps = useBlockProps({
58
- className: `vk_icons`,
59
- });
60
-
61
- const ALLOWED_BLOCKS = ['vk-blocks/icon'];
62
-
63
- const TEMPLATE = [['vk-blocks/icon'], ['vk-blocks/icon']];
64
-
65
- return (
66
- <>
67
- <BlockControls group="block">
68
- <JustifyContentControl
69
- allowedControls={[
70
- 'left',
71
- 'center',
72
- 'right',
73
- 'space-between',
74
- ]}
75
- value={iconsJustify}
76
- onChange={(value) => setAttributes({ iconsJustify: value })}
77
- popoverProps={{
78
- position: 'bottom right',
79
- isAlternate: true,
80
- }}
81
- />
82
- </BlockControls>
83
- <InspectorControls>
84
- <PanelBody title={__('Icon Common Setting', 'vk-blocks')}>
85
- <p className={`mt-0 mb-2`}>{__('Size', 'vk-blocks')}</p>
86
- <div className="vk_icon_custombox">
87
- <TextControl
88
- className={`vk_icon_custombox_number`}
89
- value={iconSize}
90
- onChange={(value) =>
91
- setAttributes({ iconSize: parseInt(value) })
92
- }
93
- type={'number'}
94
- />
95
- <SelectControl
96
- className={`vk_icon_custombox_unit`}
97
- value={iconSizeUnit}
98
- onChange={(value) => {
99
- setAttributes({ iconSizeUnit: value });
100
- }}
101
- options={[
102
- {
103
- value: 'px',
104
- label: __('px', 'vk-blocks'),
105
- },
106
- {
107
- value: 'em',
108
- label: __('em', 'vk-blocks'),
109
- },
110
- {
111
- value: 'rem',
112
- label: __('rem', 'vk-blocks'),
113
- },
114
- {
115
- value: 'vw',
116
- label: __('vw', 'vk-blocks'),
117
- },
118
- ]}
119
- />
120
- <Button
121
- className="vk_icon_custombox_reset"
122
- isSmall
123
- isSecondary
124
- onClick={() => {
125
- setAttributes({ iconSize: 36 });
126
- setAttributes({ iconSizeUnit: 'px' });
127
- }}
128
- >
129
- {__('Reset')}
130
- </Button>
131
- </div>
132
- <p className={`mt-0 mb-2`}>{__('Margin', 'vk-blocks')}</p>
133
- <div className="vk_icon_custombox">
134
- <TextControl
135
- className={`vk_icon_custombox_number`}
136
- value={iconMargin}
137
- onChange={(value) =>
138
- setAttributes({ iconMargin: parseInt(value) })
139
- }
140
- type={'number'}
141
- />
142
- <SelectControl
143
- className={`vk_icon_custombox_unit`}
144
- value={iconMarginUnit}
145
- onChange={(value) => {
146
- setAttributes({ iconMarginUnit: value });
147
- }}
148
- options={[
149
- {
150
- value: 'px',
151
- label: __('px', 'vk-blocks'),
152
- },
153
- {
154
- value: 'em',
155
- label: __('em', 'vk-blocks'),
156
- },
157
- {
158
- value: 'rem',
159
- label: __('rem', 'vk-blocks'),
160
- },
161
- {
162
- value: 'vw',
163
- label: __('vw', 'vk-blocks'),
164
- },
165
- ]}
166
- />
167
- <Button
168
- className="vk_icon_custombox_reset"
169
- isSmall
170
- isSecondary
171
- onClick={() => {
172
- setAttributes({ iconMargin: 22 });
173
- setAttributes({ iconMarginUnit: 'px' });
174
- }}
175
- >
176
- {__('Reset')}
177
- </Button>
178
- </div>
179
- <BaseControl
180
- label={__('Border radius', 'vk-blocks')}
181
- id={`vk_icon-radius`}
182
- >
183
- <RangeControl
184
- value={iconRadius}
185
- onChange={(value) =>
186
- setAttributes({
187
- iconRadius:
188
- value !== undefined ? value : 50,
189
- })
190
- }
191
- min={0}
192
- max={50}
193
- allowReset={true}
194
- />
195
- </BaseControl>
196
- <p className={`mt-0 mb-2`}>{__('Style', 'vk-blocks')}</p>
197
- <ButtonGroup className={`mb-3`}>
198
- <Button
199
- isSmall
200
- isPrimary={iconType === '0'}
201
- isSecondary={iconType !== '0'}
202
- onClick={() => setAttributes({ iconType: '0' })}
203
- >
204
- {__('Solid color', 'vk-blocks')}
205
- </Button>
206
- <Button
207
- isSmall
208
- isPrimary={iconType === '1'}
209
- isSecondary={iconType !== '1'}
210
- onClick={() => setAttributes({ iconType: '1' })}
211
- >
212
- {__('Icon & Frame', 'vk-blocks')}
213
- </Button>
214
- <Button
215
- isSmall
216
- isPrimary={iconType === '2'}
217
- isSecondary={iconType !== '2'}
218
- onClick={() => setAttributes({ iconType: '2' })}
219
- >
220
- {__('Icon only', 'vk-blocks')}
221
- </Button>
222
- </ButtonGroup>
223
- </PanelBody>
224
- </InspectorControls>
225
- <div {...blockProps}>
226
- <div
227
- className={`vk_icons_col vk_icons_col-justify-${iconsJustify}`}
228
- >
229
- <InnerBlocks
230
- allowedBlocks={ALLOWED_BLOCKS}
231
- template={TEMPLATE}
232
- templateLock={false}
233
- orientation="horizontal"
234
- />
235
- </div>
236
- </div>
237
- </>
238
- );
239
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon-outer/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.91 17.64"><defs><style>.cls-1{fill-rule:evenodd;}.cls-2{fill:#d8141c;}</style></defs>><path class="cls-1" d="M1.15,6.21a3.67,3.67,0,0,0,1.57,1,3.57,3.57,0,0,0,1,.15H4l.33-.06a.37.37,0,0,1,0-.11l.32-.75a.11.11,0,0,1,.11-.11H6.29A3.65,3.65,0,1,0,.1,3.6v0a3.66,3.66,0,0,0,1,2.56ZM3,1.46H4.48v.81H3ZM3,2.92H4.48V5.85H3Z"/><path class="cls-1" d="M11,7.16a3.65,3.65,0,0,1-1.58-1h0A3.63,3.63,0,0,1,8.35,3.65v0a3.66,3.66,0,1,1,3.93,3.7H12A3.47,3.47,0,0,1,11,7.16Zm.3-4.89V1.46h1.46v.81Zm0,3.58V2.92h1.46V5.85Z"/><path class="cls-1" d="M19.23,7.16a3.65,3.65,0,0,1-1.58-1h0a3.62,3.62,0,0,1-1-2.56v0a3.65,3.65,0,1,1,3.93,3.7h-.28A3.52,3.52,0,0,1,19.23,7.16Zm.3-4.89V1.46H21v.81Zm0,3.58V2.92H21V5.85Z"/><path d="M10.9,8.47H7.6a.09.09,0,0,0-.1.1h0l-.2.7c0,.1,0,.2.1.2H8.7c.1,0,.1.1.1.2l-2,2.2h0l1,3.4c0,.1,0,.1-.1.1h-1c-.1,0-.1,0-.1-.1L6,13.47c0-.1-.2-.1-.2,0l-.4,1.2v.1l.4,1.5.1.1H9.2a.1.1,0,0,0,.1-.1h0L8,12v-.1l3-3.2C11,8.57,11,8.47,10.9,8.47Z"/><path class="cls-2" d="M7,6.67H5a.09.09,0,0,0-.1.1h0l-.3.7c0,.1,0,.2.1.2h.8c.1,0,.1.1.1.2l-2.4,6.7c0,.1-.2.1-.2,0L1.4,9.67c0-.1,0-.2.1-.2h.9a.09.09,0,0,1,.1.1h0l.6,1.7c0,.1.2.1.2,0l1-2.7c0-.1,0-.2-.1-.2H.1a.3.3,0,0,0-.1.2l3.1,9c0,.1.2.1.2,0L7.1,6.77a.09.09,0,0,0-.1-.1Z"/></svg>
 
src/blocks/icon-outer/index.js DELETED
@@ -1,29 +0,0 @@
1
- /**
2
- * Icon Outer Block
3
- */
4
- import { ReactComponent as Icon } from './icon.svg';
5
-
6
- import metadata from './block.json';
7
- import edit from './edit';
8
- import save from './save';
9
-
10
- const { name } = metadata;
11
-
12
- export { metadata, name };
13
-
14
- export const settings = {
15
- icon: <Icon />,
16
- styles: [],
17
- example: {
18
- innerBlocks: [
19
- {
20
- name: 'vk-blocks/icon',
21
- },
22
- {
23
- name: 'vk-blocks/icon',
24
- },
25
- ],
26
- },
27
- edit,
28
- save,
29
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon-outer/index.php DELETED
@@ -1,33 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/icon-outer` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register Alert block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_icon_outer() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/icon-outer',
18
- VK_BLOCKS_DIR_URL . 'build/icon-outer/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- register_block_type(
25
- __DIR__,
26
- array(
27
- 'style' => 'vk-blocks/icon-outer',
28
- 'editor_style' => 'vk-blocks-build-editor-css',
29
- 'editor_script' => 'vk-blocks-build-js',
30
- )
31
- );
32
- }
33
- add_action( 'init', 'vk_blocks_register_block_icon_outer', 99 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon-outer/save.js DELETED
@@ -1,20 +0,0 @@
1
- import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
2
-
3
- export default function save(props) {
4
- const { attributes } = props;
5
- const { iconsJustify } = attributes;
6
- //blocksProps を予め定義
7
- const blockProps = useBlockProps.save({
8
- className: `vk_icons`,
9
- });
10
-
11
- return (
12
- <div {...blockProps}>
13
- <div
14
- className={`vk_icons_col vk_icons_col-justify-${iconsJustify}`}
15
- >
16
- <InnerBlocks.Content />
17
- </div>
18
- </div>
19
- );
20
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon-outer/style.scss DELETED
@@ -1,42 +0,0 @@
1
-
2
- /*-------------------------------------------*/
3
- /* CSS
4
- /*-------------------------------------------*/
5
- /*-------------------------------------------*/
6
- /* .vk_icon_icon_outer
7
- /*-------------------------------------------*/
8
- .vk_icons {
9
- @media screen and (max-width: 992px) {
10
- margin-bottom: 1.5em;
11
- }
12
- }
13
-
14
- .vk_icons { //編集画面で負けるので先頭に追加
15
-
16
- &_col {
17
- display: flex;
18
- flex-wrap: wrap;
19
- clear: both; /* To be cope with inline image float and so on. */
20
- margin-left: -8px;
21
-
22
- .vk_icon {
23
- margin: 4px 0 4px 8px;
24
-
25
- &_frame {
26
- line-height: 1;
27
- }
28
- }
29
-
30
- &-justify-center {
31
- justify-content: center;
32
- }
33
-
34
- &-justify-right {
35
- justify-content: flex-end;
36
- }
37
-
38
- &-justify-space-between {
39
- justify-content: space-between;
40
- }
41
- }
42
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/block.json DELETED
@@ -1,56 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/icon",
4
- "category": "vk-blocks-cat",
5
- "title": "Icon",
6
- "attributes": {
7
- "faIcon": {
8
- "type": "string",
9
- "default": "<i class=\"fas fa-user\"></i>"
10
- },
11
- "iconSize": {
12
- "type": "number",
13
- "default": 36
14
- },
15
- "iconSizeUnit": {
16
- "type": "string",
17
- "default": "px"
18
- },
19
- "iconMargin": {
20
- "type": "number",
21
- "default": 22
22
- },
23
- "iconMarginUnit": {
24
- "type": "string",
25
- "default": "px"
26
- },
27
- "iconRadius": {
28
- "type": "number",
29
- "default": 50
30
- },
31
- "iconAlign": {
32
- "type": "string",
33
- "default": "left"
34
- },
35
- "iconType": {
36
- "type": "string",
37
- "default": "0"
38
- },
39
- "iconColor": {
40
- "type": "string"
41
- },
42
- "iconUrl": {
43
- "type": "string"
44
- },
45
- "iconTarget": {
46
- "type": "Boolean",
47
- "default": false
48
- }
49
- },
50
- "description": "Display icons with Font Awesome.",
51
- "textdomain": "vk-blocks",
52
- "supports": {
53
- "className": true,
54
- "anchor": true
55
- }
56
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/component.js DELETED
@@ -1,154 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
4
-
5
- export class VKBIcon extends Component {
6
- render() {
7
- let fontAwesomeIcon = this.props.lbFontAwesomeIcon;
8
- const iconSize = this.props.lbSize;
9
- const iconSizeUnit = this.props.lbSizeUnit;
10
- const iconMargin = this.props.lbMargin;
11
- const iconMarginUnit = this.props.lbMarginUnit;
12
- const iconRadius = this.props.lbRadius;
13
- const iconAlign = this.props.lbAlign;
14
- const iconType = this.props.lbType;
15
- const iconColor = this.props.lbColor;
16
- const iconUrl = this.props.lbUrl;
17
- const iconTarget = this.props.lbTarget;
18
-
19
- // outer & align
20
- let outerClass = 'vk_icon_frame';
21
- if (iconAlign === 'center') {
22
- outerClass += ' text-center';
23
- } else if (iconAlign === 'right') {
24
- outerClass += ' text-right';
25
- }
26
-
27
- // color style
28
- let borderClass = 'vk_icon_border';
29
- let borderStyle = {};
30
-
31
- if (iconType === '0') {
32
- // Solid color
33
- if (
34
- iconColor !== 'undefined' &&
35
- iconColor !== null &&
36
- iconColor !== undefined
37
- ) {
38
- // Solid color
39
- borderClass += ` has-background`;
40
-
41
- if (isHexColor(iconColor)) {
42
- // custom color
43
- borderStyle = {
44
- backgroundColor: `${iconColor}`,
45
- };
46
- } else {
47
- // palette color
48
- borderClass += ` has-${iconColor}-background-color`;
49
- }
50
- }
51
- } else {
52
- if (
53
- iconColor !== 'undefined' &&
54
- iconColor !== null &&
55
- iconColor !== undefined
56
- ) {
57
- borderClass += ` has-text-color`;
58
-
59
- if (isHexColor(iconColor)) {
60
- // custom color
61
- borderStyle = {
62
- color: `${iconColor}`,
63
- };
64
- } else {
65
- // palette color
66
- borderClass += ` has-${iconColor}-color`;
67
- }
68
- }
69
-
70
- if (iconType === '1') {
71
- // Icon & Frame
72
- outerClass += ' is-style-outline';
73
- } else {
74
- // icon only
75
- outerClass += ' is-style-noline';
76
- }
77
- }
78
-
79
- // margin
80
- if (
81
- !(
82
- iconSize === 36 &&
83
- iconSizeUnit === 'px' &&
84
- iconMargin === 22 &&
85
- iconMarginUnit === 'px'
86
- )
87
- ) {
88
- borderStyle.width =
89
- 'calc(' +
90
- (iconSize + iconSizeUnit) +
91
- ' + ' +
92
- (iconMargin * 2 + iconMarginUnit) +
93
- ')';
94
- borderStyle.height = borderStyle.width;
95
- }
96
-
97
- // border radius
98
- if (iconRadius !== 50) {
99
- borderStyle.borderRadius = iconRadius + `%`;
100
- }
101
-
102
- // icon font
103
- let faIconTag = '';
104
- if (fontAwesomeIcon) {
105
- fontAwesomeIcon = fontAwesomeIcon.replace(/ fas/g, 'fas');
106
-
107
- // font size
108
- let size = null;
109
- if (!(iconSize === 36 && iconSizeUnit === 'px')) {
110
- size = ` font-size:${iconSize}${iconSizeUnit}`;
111
- }
112
-
113
- // add class and inline css
114
- const faIconFragment = fontAwesomeIcon.split(' ');
115
- faIconFragment[0] = faIconFragment[0] + ` style="${size};"`;
116
- faIconFragment[1] = ' ' + faIconFragment[1] + ` vk_icon_font `;
117
- faIconTag = faIconFragment.join('');
118
- }
119
-
120
- const blockContent = (
121
- <>
122
- <div className={borderClass} style={borderStyle}>
123
- {parse(faIconTag)}
124
- </div>
125
- </>
126
- );
127
-
128
- let blockContentWrapper = '';
129
- if (iconUrl !== null && iconUrl !== undefined && iconUrl !== '') {
130
- blockContentWrapper = (
131
- /*
132
- target=_blankで指定すると、WordPressが自動でnoopener noreferrerを付与する。
133
- ブロックでもrelを付与しないとブロックが壊れる。
134
- */
135
- <a
136
- href={iconUrl}
137
- className="vk_icon_link"
138
- target={iconTarget && '_blank'}
139
- rel={iconTarget && 'noopener noreferrer'}
140
- >
141
- {blockContent}
142
- </a>
143
- );
144
- } else {
145
- blockContentWrapper = blockContent;
146
- }
147
-
148
- return (
149
- <>
150
- <div className={outerClass}>{blockContentWrapper}</div>
151
- </>
152
- );
153
- }
154
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/deprecated/1.13.2/component.js DELETED
@@ -1,135 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
-
4
- export class VKBIcon extends Component {
5
- render() {
6
- let fontAwesomeIcon = this.props.lbFontAwesomeIcon;
7
- const iconSize = this.props.lbSize;
8
- const iconSizeUnit = this.props.lbSizeUnit;
9
- const iconMargin = this.props.lbMargin;
10
- const iconMarginUnit = this.props.lbMarginUnit;
11
- const iconRadius = this.props.lbRadius;
12
- const iconAlign = this.props.lbAlign;
13
- const iconType = this.props.lbType;
14
- const iconColor = this.props.lbColor;
15
- const iconUrl = this.props.lbUrl;
16
- const iconTarget = this.props.lbTarget;
17
-
18
- // outer & align
19
- let outerClass = 'vk_icon_outer';
20
- if (iconAlign === 'center') {
21
- outerClass += ' vk_icon_align_center';
22
- } else if (iconAlign === 'right') {
23
- outerClass += ' vk_icon_align_right';
24
- }
25
-
26
- // color style
27
- let borderClass = 'vk_icon_border';
28
- let borderStyle = {};
29
-
30
- if (iconType === '0') {
31
- // Solid color
32
- if (iconColor !== 'undefined') {
33
- borderStyle = {
34
- backgroundColor: `${iconColor}`,
35
- borderColor: `${iconColor}`,
36
- };
37
- }
38
- } else if (iconType === '1') {
39
- // Icon & Frame
40
- borderClass += ' vk_icon_border_frame';
41
- if (iconColor !== 'undefined') {
42
- borderStyle = {
43
- borderColor: `${iconColor}`,
44
- };
45
- }
46
- } else {
47
- // icon only
48
- borderClass += ' vk_icon_border_none';
49
- if (iconColor !== 'undefined') {
50
- }
51
- }
52
-
53
- // margin
54
- if (
55
- !(
56
- iconSize === 36 &&
57
- iconSizeUnit === 'px' &&
58
- iconMargin === 22 &&
59
- iconMarginUnit === 'px'
60
- )
61
- ) {
62
- borderStyle.width =
63
- 'calc(' +
64
- (iconSize + iconSizeUnit) +
65
- ' + ' +
66
- (iconMargin * 2 + iconMarginUnit) +
67
- ')';
68
- borderStyle.height = borderStyle.width;
69
- }
70
-
71
- // border radius
72
- if (iconRadius !== 50) {
73
- borderStyle.borderRadius = iconRadius + `%`;
74
- }
75
-
76
- // icon font
77
- let faIconTag = '';
78
- if (fontAwesomeIcon) {
79
- fontAwesomeIcon = fontAwesomeIcon.replace(/ fas/g, 'fas');
80
-
81
- // font color
82
- let color = null;
83
- if (iconType !== '0' && iconColor !== 'undefined') {
84
- color = `color:${iconColor}`;
85
- }
86
-
87
- // font size
88
- let size = null;
89
- if (!(iconSize === 36 && iconSizeUnit === 'px')) {
90
- size = ` font-size:${iconSize}${iconSizeUnit}`;
91
- }
92
-
93
- // add class and inline css
94
- const faIconFragment = fontAwesomeIcon.split(' ');
95
- faIconFragment[0] =
96
- faIconFragment[0] + ` style="${color}; ${size};"`;
97
- faIconFragment[1] = ' ' + faIconFragment[1] + ` vk_icon_font `;
98
- faIconTag = faIconFragment.join('');
99
- }
100
-
101
- const blockContent = (
102
- <>
103
- <div className={borderClass} style={borderStyle}>
104
- {parse(faIconTag)}
105
- </div>
106
- </>
107
- );
108
-
109
- let blockContentWrapper = '';
110
- if (iconUrl !== null && iconUrl !== undefined && iconUrl !== '') {
111
- blockContentWrapper = (
112
- /*
113
- target=_blankで指定すると、WordPressが自動でnoopener noreferrerを付与する。
114
- ブロックでもrelを付与しないとブロックが壊れる。
115
- */
116
- <a
117
- href={iconUrl}
118
- className="vk_icon_link"
119
- target={iconTarget && '_blank'}
120
- rel={iconTarget && 'noopener noreferrer'}
121
- >
122
- {blockContent}
123
- </a>
124
- );
125
- } else {
126
- blockContentWrapper = blockContent;
127
- }
128
-
129
- return (
130
- <>
131
- <div className={outerClass}>{blockContentWrapper}</div>
132
- </>
133
- );
134
- }
135
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/deprecated/1.13.2/save.js DELETED
@@ -1,44 +0,0 @@
1
- import { VKBIcon } from './component';
2
- import { useBlockProps } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes }) {
5
- let {
6
- faIcon,
7
- iconSize,
8
- iconSizeUnit,
9
- iconMargin,
10
- iconMarginUnit,
11
- iconRadius,
12
- iconAlign,
13
- iconType,
14
- iconColor,
15
- iconUrl,
16
- iconTarget,
17
- } = attributes;
18
-
19
- if (faIcon && !faIcon.match(/<i/)) {
20
- faIcon = `<i class="${faIcon}"></i>`;
21
- }
22
-
23
- const blockProps = useBlockProps.save({
24
- className: `vk_icon`,
25
- });
26
-
27
- return (
28
- <div {...blockProps}>
29
- <VKBIcon
30
- lbFontAwesomeIcon={faIcon}
31
- lbSize={iconSize}
32
- lbSizeUnit={iconSizeUnit}
33
- lbMargin={iconMargin}
34
- lbMarginUnit={iconMarginUnit}
35
- lbRadius={iconRadius}
36
- lbAlign={iconAlign}
37
- lbType={iconType}
38
- lbColor={iconColor}
39
- lbUrl={iconUrl}
40
- lbTarget={iconTarget}
41
- />
42
- </div>
43
- );
44
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/deprecated/1.16.1/component.js DELETED
@@ -1,152 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import parse from 'html-react-parser';
3
-
4
- export class VKBIcon extends Component {
5
- render() {
6
- let fontAwesomeIcon = this.props.lbFontAwesomeIcon;
7
- const iconSize = this.props.lbSize;
8
- const iconSizeUnit = this.props.lbSizeUnit;
9
- const iconMargin = this.props.lbMargin;
10
- const iconMarginUnit = this.props.lbMarginUnit;
11
- const iconRadius = this.props.lbRadius;
12
- const iconAlign = this.props.lbAlign;
13
- const iconType = this.props.lbType;
14
- const iconColor = this.props.lbColor;
15
- const iconUrl = this.props.lbUrl;
16
- const iconTarget = this.props.lbTarget;
17
-
18
- // outer & align
19
- let outerClass = 'vk_icon_frame';
20
- if (iconAlign === 'center') {
21
- outerClass += ' vk_icon_align_center';
22
- } else if (iconAlign === 'right') {
23
- outerClass += ' vk_icon_align_right';
24
- }
25
-
26
- // color style
27
- let borderClass = 'vk_icon_border';
28
- let borderStyle = {};
29
-
30
- if (iconType === '0') {
31
- // Solid color
32
- if (
33
- iconColor !== 'undefined' &&
34
- iconColor !== null &&
35
- iconColor !== undefined
36
- ) {
37
- borderStyle = {
38
- backgroundColor: `${iconColor}`,
39
- borderColor: `${iconColor}`,
40
- };
41
- }
42
- } else if (iconType === '1') {
43
- // Icon & Frame
44
- borderClass += ' vk_icon_border_frame';
45
- if (
46
- iconColor !== 'undefined' &&
47
- iconColor !== null &&
48
- iconColor !== undefined
49
- ) {
50
- borderStyle = {
51
- borderColor: `${iconColor}`,
52
- };
53
- }
54
- } else {
55
- // icon only
56
- borderClass += ' vk_icon_border_none';
57
- if (
58
- iconColor !== 'undefined' &&
59
- iconColor !== null &&
60
- iconColor !== undefined
61
- ) {
62
- }
63
- }
64
-
65
- // margin
66
- if (
67
- !(
68
- iconSize === 36 &&
69
- iconSizeUnit === 'px' &&
70
- iconMargin === 22 &&
71
- iconMarginUnit === 'px'
72
- )
73
- ) {
74
- borderStyle.width =
75
- 'calc(' +
76
- (iconSize + iconSizeUnit) +
77
- ' + ' +
78
- (iconMargin * 2 + iconMarginUnit) +
79
- ')';
80
- borderStyle.height = borderStyle.width;
81
- }
82
-
83
- // border radius
84
- if (iconRadius !== 50) {
85
- borderStyle.borderRadius = iconRadius + `%`;
86
- }
87
-
88
- // icon font
89
- let faIconTag = '';
90
- if (fontAwesomeIcon) {
91
- fontAwesomeIcon = fontAwesomeIcon.replace(/ fas/g, 'fas');
92
-
93
- // font color
94
- let color = null;
95
- if (
96
- iconType !== '0' &&
97
- iconColor !== 'undefined' &&
98
- iconColor !== null &&
99
- iconColor !== undefined
100
- ) {
101
- color = `color:${iconColor}`;
102
- }
103
-
104
- // font size
105
- let size = null;
106
- if (!(iconSize === 36 && iconSizeUnit === 'px')) {
107
- size = ` font-size:${iconSize}${iconSizeUnit}`;
108
- }
109
-
110
- // add class and inline css
111
- const faIconFragment = fontAwesomeIcon.split(' ');
112
- faIconFragment[0] =
113
- faIconFragment[0] + ` style="${color}; ${size};"`;
114
- faIconFragment[1] = ' ' + faIconFragment[1] + ` vk_icon_font `;
115
- faIconTag = faIconFragment.join('');
116
- }
117
-
118
- const blockContent = (
119
- <>
120
- <div className={borderClass} style={borderStyle}>
121
- {parse(faIconTag)}
122
- </div>
123
- </>
124
- );
125
-
126
- let blockContentWrapper = '';
127
- if (iconUrl !== null && iconUrl !== undefined && iconUrl !== '') {
128
- blockContentWrapper = (
129
- /*
130
- target=_blankで指定すると、WordPressが自動でnoopener noreferrerを付与する。
131
- ブロックでもrelを付与しないとブロックが壊れる。
132
- */
133
- <a
134
- href={iconUrl}
135
- className="vk_icon_link"
136
- target={iconTarget && '_blank'}
137
- rel={iconTarget && 'noopener noreferrer'}
138
- >
139
- {blockContent}
140
- </a>
141
- );
142
- } else {
143
- blockContentWrapper = blockContent;
144
- }
145
-
146
- return (
147
- <>
148
- <div className={outerClass}>{blockContentWrapper}</div>
149
- </>
150
- );
151
- }
152
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/deprecated/1.16.1/save.js DELETED
@@ -1,44 +0,0 @@
1
- import { VKBIcon } from './component';
2
- import { useBlockProps } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes }) {
5
- let {
6
- faIcon,
7
- iconSize,
8
- iconSizeUnit,
9
- iconMargin,
10
- iconMarginUnit,
11
- iconRadius,
12
- iconAlign,
13
- iconType,
14
- iconColor,
15
- iconUrl,
16
- iconTarget,
17
- } = attributes;
18
-
19
- if (faIcon && !faIcon.match(/<i/)) {
20
- faIcon = `<i class="${faIcon}"></i>`;
21
- }
22
-
23
- const blockProps = useBlockProps.save({
24
- className: `vk_icon`,
25
- });
26
-
27
- return (
28
- <div {...blockProps}>
29
- <VKBIcon
30
- lbFontAwesomeIcon={faIcon}
31
- lbSize={iconSize}
32
- lbSizeUnit={iconSizeUnit}
33
- lbMargin={iconMargin}
34
- lbMarginUnit={iconMarginUnit}
35
- lbRadius={iconRadius}
36
- lbAlign={iconAlign}
37
- lbType={iconType}
38
- lbColor={iconColor}
39
- lbUrl={iconUrl}
40
- lbTarget={iconTarget}
41
- />
42
- </div>
43
- );
44
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/deprecated/index.js DELETED
@@ -1,70 +0,0 @@
1
- import save1_13_2 from './1.13.2/save';
2
- import save1_16_1 from './1.16.1/save';
3
-
4
- const blockAttributes = {
5
- faIcon: {
6
- type: 'string',
7
- default: '<i class="fas fa-user"></i>',
8
- },
9
- iconSize: {
10
- type: 'number',
11
- default: 36,
12
- },
13
- iconSizeUnit: {
14
- type: 'string',
15
- default: 'px',
16
- },
17
- iconMargin: {
18
- type: 'number',
19
- default: 22,
20
- },
21
- iconMarginUnit: {
22
- type: 'string',
23
- default: 'px',
24
- },
25
- iconRadius: {
26
- type: 'number',
27
- default: 50,
28
- },
29
- iconAlign: {
30
- type: 'string',
31
- default: 'left',
32
- },
33
- iconType: {
34
- type: 'string',
35
- default: '0'
36
- },
37
- iconColor: {
38
- type: 'string',
39
- default: 'undefined',
40
- },
41
- iconUrl: {
42
- type: 'string',
43
- default: "",
44
- },
45
- iconTarget: {
46
- type: 'Boolean',
47
- default: false,
48
- },
49
- };
50
-
51
- const blockAttributes2 = {
52
- ...blockAttributes,
53
- iconColor: {
54
- type: 'string',
55
- },
56
- iconUrl: {
57
- type: 'string',
58
- },
59
- }
60
-
61
- export const deprecated = [
62
- {
63
- attributes: blockAttributes2,
64
- save: save1_16_1,
65
- },
66
- {
67
- attributes: blockAttributes,
68
- save: save1_13_2,
69
- },
70
- ];
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/edit.js DELETED
@@ -1,282 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { VKBIcon } from './component';
3
- import { FontAwesome } from '@vkblocks/utils/font-awesome-new';
4
- import {
5
- PanelBody,
6
- BaseControl,
7
- TextControl,
8
- CheckboxControl,
9
- RangeControl,
10
- ButtonGroup,
11
- Button,
12
- SelectControl,
13
- } from '@wordpress/components';
14
- import {
15
- InspectorControls,
16
- useBlockProps,
17
- BlockControls,
18
- BlockAlignmentControl,
19
- } from '@wordpress/block-editor';
20
- import { select } from '@wordpress/data';
21
- import { useEffect } from '@wordpress/element';
22
-
23
- import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette';
24
-
25
- export default function IconEdit(props) {
26
- const { attributes, setAttributes, clientId } = props;
27
- let {
28
- faIcon,
29
- iconSize,
30
- iconSizeUnit,
31
- iconMargin,
32
- iconMarginUnit,
33
- iconRadius,
34
- iconAlign,
35
- iconType,
36
- iconColor,
37
- iconUrl,
38
- iconTarget,
39
- } = attributes;
40
-
41
- // eslint-disable-next-line no-undef
42
- const iconFamily = vkFontAwesome.iconFamily;
43
-
44
- /**
45
- * 親ブロックが vk-blocks/icon-outer かどうか判定
46
- */
47
- const parent = select('core/block-editor').getBlockParentsByBlockName(
48
- clientId,
49
- ['vk-blocks/icon-outer']
50
- );
51
-
52
- /**
53
- * 親ブロックが vk-blocks/icon-outer でなければ設定項目を追加
54
- */
55
- let commonBlockControl = '';
56
- if (!parent.length) {
57
- commonBlockControl = (
58
- <BlockControls group="block">
59
- <BlockAlignmentControl
60
- value={iconAlign}
61
- onChange={(value) => {
62
- setAttributes({ iconAlign: value });
63
- }}
64
- controls={['left', 'center', 'right']}
65
- />
66
- </BlockControls>
67
- );
68
- }
69
-
70
- /**
71
- * 親ブロックが vk-blocks/icon-outer でなければ設定項目を追加
72
- */
73
- let commonInspectorControls = '';
74
- if (!parent.length) {
75
- commonInspectorControls = (
76
- <>
77
- <p className={`mt-0 mb-2`}>{__('Size', 'vk-blocks')}</p>
78
- <div className="vk_icon_custombox">
79
- <TextControl
80
- className={`vk_icon_custombox_number`}
81
- value={iconSize}
82
- onChange={(value) =>
83
- setAttributes({ iconSize: parseInt(value) })
84
- }
85
- type={'number'}
86
- />
87
- <SelectControl
88
- className={`vk_icon_custombox_unit`}
89
- value={iconSizeUnit}
90
- onChange={(value) => {
91
- setAttributes({ iconSizeUnit: value });
92
- }}
93
- options={[
94
- {
95
- value: 'px',
96
- label: __('px', 'vk-blocks'),
97
- },
98
- {
99
- value: 'em',
100
- label: __('em', 'vk-blocks'),
101
- },
102
- {
103
- value: 'rem',
104
- label: __('rem', 'vk-blocks'),
105
- },
106
- {
107
- value: 'vw',
108
- label: __('vw', 'vk-blocks'),
109
- },
110
- ]}
111
- />
112
- <Button
113
- className="vk_icon_custombox_reset"
114
- isSmall
115
- isSecondary
116
- onClick={() => {
117
- setAttributes({ iconSize: 36 });
118
- setAttributes({ iconSizeUnit: 'px' });
119
- }}
120
- >
121
- {__('Reset')}
122
- </Button>
123
- </div>
124
- <p className={`mt-0 mb-2`}>{__('Margin', 'vk-blocks')}</p>
125
- <div className="vk_icon_custombox">
126
- <TextControl
127
- className={`vk_icon_custombox_number`}
128
- value={iconMargin}
129
- onChange={(value) =>
130
- setAttributes({ iconMargin: parseInt(value) })
131
- }
132
- type={'number'}
133
- />
134
- <SelectControl
135
- className={`vk_icon_custombox_unit`}
136
- value={iconMarginUnit}
137
- onChange={(value) => {
138
- setAttributes({ iconMarginUnit: value });
139
- }}
140
- options={[
141
- {
142
- value: 'px',
143
- label: __('px', 'vk-blocks'),
144
- },
145
- {
146
- value: 'em',
147
- label: __('em', 'vk-blocks'),
148
- },
149
- {
150
- value: 'rem',
151
- label: __('rem', 'vk-blocks'),
152
- },
153
- {
154
- value: 'vw',
155
- label: __('vw', 'vk-blocks'),
156
- },
157
- ]}
158
- />
159
- <Button
160
- className="vk_icon_custombox_reset"
161
- isSmall
162
- isSecondary
163
- onClick={() => {
164
- setAttributes({ iconMargin: 22 });
165
- setAttributes({ iconMarginUnit: 'px' });
166
- }}
167
- >
168
- {__('Reset')}
169
- </Button>
170
- </div>
171
- <BaseControl
172
- label={__('Border radius', 'vk-blocks')}
173
- id={`vk_icon-radius`}
174
- >
175
- <RangeControl
176
- value={iconRadius}
177
- onChange={(value) =>
178
- setAttributes({
179
- iconRadius: value !== undefined ? value : 50,
180
- })
181
- }
182
- min={0}
183
- max={50}
184
- allowReset={true}
185
- />
186
- </BaseControl>
187
- <p className={`mt-0 mb-2`}>{__('Style', 'vk-blocks')}</p>
188
- <ButtonGroup className={`mb-3`}>
189
- <Button
190
- isSmall
191
- isPrimary={iconType === '0'}
192
- isSecondary={iconType !== '0'}
193
- onClick={() => setAttributes({ iconType: '0' })}
194
- >
195
- {__('Solid color', 'vk-blocks')}
196
- </Button>
197
- <Button
198
- isSmall
199
- isPrimary={iconType === '1'}
200
- isSecondary={iconType !== '1'}
201
- onClick={() => setAttributes({ iconType: '1' })}
202
- >
203
- {__('Icon & Frame', 'vk-blocks')}
204
- </Button>
205
- <Button
206
- isSmall
207
- isPrimary={iconType === '2'}
208
- isSecondary={iconType !== '2'}
209
- onClick={() => setAttributes({ iconType: '2' })}
210
- >
211
- {__('Icon only', 'vk-blocks')}
212
- </Button>
213
- </ButtonGroup>
214
- </>
215
- );
216
- }
217
-
218
- if (faIcon && !faIcon.match(/<i/)) {
219
- faIcon = `<i class="${faIcon}"></i>`;
220
- }
221
-
222
- // コンソールエラー回避のため useEffect を使用（実行タイミングの問題）
223
- useEffect(() => {
224
- // containerClass 互換設定
225
- if (iconColor === 'undefined') {
226
- setAttributes({ iconColor: undefined });
227
- }
228
- }, [clientId]);
229
-
230
- const blockProps = useBlockProps({
231
- className: `vk_icon`,
232
- });
233
-
234
- return (
235
- <>
236
- {commonBlockControl}
237
- <InspectorControls>
238
- <PanelBody title={__('Icon Setting', 'vk-blocks')}>
239
- <BaseControl
240
- label={
241
- __('Icon', 'vk-blocks') + ' ( ' + iconFamily + ' )'
242
- }
243
- id={`vk_icon-font`}
244
- >
245
- <FontAwesome attributeName={'faIcon'} {...props} />
246
- </BaseControl>
247
- {commonInspectorControls}
248
- <TextControl
249
- label={__('Link URL', 'vk-blocks')}
250
- value={iconUrl}
251
- onChange={(value) => setAttributes({ iconUrl: value })}
252
- />
253
- <CheckboxControl
254
- label={__('Open link new tab.', 'vk-blocks')}
255
- checked={iconTarget}
256
- onChange={(checked) => {
257
- setAttributes({ iconTarget: checked });
258
- }}
259
- />
260
- </PanelBody>
261
- <PanelBody title={__('Color', 'vk-blocks')}>
262
- <BaseControl>
263
- <AdvancedColorPalette schema={'iconColor'} {...props} />
264
- </BaseControl>
265
- </PanelBody>
266
- </InspectorControls>
267
- <div {...blockProps}>
268
- <VKBIcon
269
- lbFontAwesomeIcon={faIcon}
270
- lbSize={iconSize}
271
- lbSizeUnit={iconSizeUnit}
272
- lbMargin={iconMargin}
273
- lbMarginUnit={iconMarginUnit}
274
- lbRadius={iconRadius}
275
- lbAlign={iconAlign}
276
- lbType={iconType}
277
- lbColor={iconColor}
278
- />
279
- </div>
280
- </>
281
- );
282
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/icon.svg DELETED
@@ -1,5 +0,0 @@
1
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M10.9 14.8H7.60002C7.5735 14.8 7.54807 14.8105 7.52931 14.8293C7.51056 14.848 7.50002 14.8735 7.50002 14.9L7.30002 15.6C7.30002 15.7 7.30002 15.8 7.40002 15.8H8.70002C8.80002 15.8 8.80002 15.9 8.80002 16L6.80002 18.2L7.80002 21.6C7.80002 21.7 7.80002 21.7 7.70002 21.7H6.70002C6.60002 21.7 6.60002 21.7 6.60002 21.6L6.00002 19.8C6.00002 19.7 5.80002 19.7 5.80002 19.8L5.40002 21V21.1L5.80002 22.6L5.90002 22.7H9.20002C9.22655 22.7 9.25198 22.6895 9.27074 22.6707C9.28949 22.6519 9.30002 22.6265 9.30002 22.6L8.00002 18.3V18.2L11 15C11 14.9 11 14.8 10.9 14.8Z" fill="black"/>
3
- <path d="M7 13H5C4.97348 13 4.94804 13.0105 4.92929 13.0293C4.91054 13.048 4.9 13.0735 4.9 13.1L4.6 13.8C4.6 13.9 4.6 14 4.7 14H5.5C5.6 14 5.6 14.1 5.6 14.2L3.2 20.9C3.2 21 3 21 3 20.9L1.4 16C1.4 15.9 1.4 15.8 1.5 15.8H2.4C2.42652 15.8 2.45196 15.8105 2.47071 15.8293C2.48946 15.848 2.5 15.8735 2.5 15.9L3.1 17.6C3.1 17.7 3.3 17.7 3.3 17.6L4.3 14.9C4.3 14.8 4.3 14.7 4.2 14.7H0.1C0.0429464 14.7519 0.00729159 14.8232 0 14.9L3.1 23.9C3.1 24 3.3 24 3.3 23.9L7.1 13.1C7.1 13.0735 7.08946 13.048 7.07071 13.0293C7.05196 13.0105 7.02652 13 7 13Z" fill="#D8141C"/>
4
- <path d="M15.5 1.40793e-07C14.1168 -0.000251575 12.7546 0.33702 11.5313 0.982547C10.3081 1.62807 9.26084 2.56235 8.48048 3.70431C7.70013 4.84627 7.21023 6.16141 7.0533 7.53559C6.89637 8.90978 7.07716 10.3015 7.57996 11.59C7.90669 11.7261 8.18062 11.9642 8.36086 12.2688C8.54109 12.5734 8.61796 12.9281 8.57996 13.28H10.85C11.1687 13.2712 11.4829 13.3573 11.7527 13.5273C12.0225 13.6973 12.2358 13.9436 12.3654 14.235C12.495 14.5264 12.5352 14.8497 12.4808 15.1639C12.4264 15.4781 12.2799 15.7691 12.06 16L11.88 16.19C13.0325 16.7327 14.2922 17.0095 15.5661 16.9998C16.8399 16.99 18.0953 16.6941 19.2394 16.1339C20.3835 15.5737 21.3871 14.7634 22.1758 13.7631C22.9646 12.7628 23.5185 11.598 23.7964 10.3548C24.0744 9.11156 24.0694 7.82177 23.7818 6.58077C23.4941 5.33977 22.9312 4.17929 22.1347 3.18514C21.3382 2.19099 20.3283 1.38859 19.1799 0.837266C18.0315 0.285944 16.7739 -0.000196444 15.5 1.40793e-07V1.40793e-07ZM17.2 13.6H13.8V6.8H17.2V13.6ZM17.2 5.3H13.8V3.4H17.2V5.3Z" fill="#0B0C0C"/>
5
- </svg>
 
 
 
 
 
src/blocks/icon/index.js DELETED
@@ -1,36 +0,0 @@
1
- /**
2
- * icon block type
3
- *
4
- */
5
- import { ReactComponent as Icon } from './icon.svg';
6
- import { url, iconUser } from '@vkblocks/utils/example-data';
7
- import edit from './edit';
8
- import metadata from './block.json';
9
- import save from './save';
10
- import { deprecated } from './deprecated/';
11
-
12
- const { name } = metadata;
13
-
14
- export { metadata, name };
15
-
16
- export const settings = {
17
- icon: <Icon />,
18
- example: {
19
- attributes: {
20
- faIcon: iconUser,
21
- iconSize: 36,
22
- iconSizeUnit: 'px',
23
- iconMargin: 22,
24
- iconMarginUnit: 'px',
25
- iconRadius: 50,
26
- iconType: '0',
27
- iconAlign: 'left',
28
- iconColor: 'undefined',
29
- iconUrl: url,
30
- iconTarget: false,
31
- },
32
- },
33
- edit,
34
- save,
35
- deprecated,
36
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/index.php DELETED
@@ -1,33 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/icon` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register Icon block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_icon() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/icon',
18
- VK_BLOCKS_DIR_URL . 'build/icon/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- register_block_type(
25
- __DIR__,
26
- array(
27
- 'style' => 'vk-blocks/icon',
28
- 'editor_style' => 'vk-blocks-build-editor-css',
29
- 'editor_script' => 'vk-blocks-build-js',
30
- )
31
- );
32
- }
33
- add_action( 'init', 'vk_blocks_register_block_icon', 99 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/save.js DELETED
@@ -1,44 +0,0 @@
1
- import { VKBIcon } from './component';
2
- import { useBlockProps } from '@wordpress/block-editor';
3
-
4
- export default function save({ attributes }) {
5
- let {
6
- faIcon,
7
- iconSize,
8
- iconSizeUnit,
9
- iconMargin,
10
- iconMarginUnit,
11
- iconRadius,
12
- iconAlign,
13
- iconType,
14
- iconColor,
15
- iconUrl,
16
- iconTarget,
17
- } = attributes;
18
-
19
- if (faIcon && !faIcon.match(/<i/)) {
20
- faIcon = `<i class="${faIcon}"></i>`;
21
- }
22
-
23
- const blockProps = useBlockProps.save({
24
- className: `vk_icon`,
25
- });
26
-
27
- return (
28
- <div {...blockProps}>
29
- <VKBIcon
30
- lbFontAwesomeIcon={faIcon}
31
- lbSize={iconSize}
32
- lbSizeUnit={iconSizeUnit}
33
- lbMargin={iconMargin}
34
- lbMarginUnit={iconMarginUnit}
35
- lbRadius={iconRadius}
36
- lbAlign={iconAlign}
37
- lbType={iconType}
38
- lbColor={iconColor}
39
- lbUrl={iconUrl}
40
- lbTarget={iconTarget}
41
- />
42
- </div>
43
- );
44
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/icon/style.scss DELETED
@@ -1,106 +0,0 @@
1
- /*-------------------------------------------*/
2
- /* CSS
3
- /*-------------------------------------------*/
4
- /*-------------------------------------------*/
5
- /* .vk_icon
6
- /*-------------------------------------------*/
7
- .vk_icon {
8
- @media screen and (max-width: 991.98px) {
9
- margin-bottom: 1.5em;
10
- }
11
- }
12
- .wp-block-vk-blocks-icon { //編集画面で負けるので先頭に追加
13
- .vk_icon_frame {
14
- line-height: 1;
15
- }
16
- .vk_icon {
17
- &_border {
18
- display: inline-block;
19
- position: relative;
20
- width: 80px;
21
- height: 80px;
22
- border-radius: 50%;
23
- }
24
- &_link {
25
- display: inline-block;
26
- &:hover {
27
- opacity: .85;
28
- }
29
- }
30
- &_font {
31
- position: absolute;
32
- top: 50%;
33
- left: 50%;
34
- transform: translateY(-50%) translateX(-50%);
35
- font-size: 36px;
36
- }
37
- }
38
-
39
- .is-style-outline {
40
- .vk_icon_border {
41
- background-color: transparent;
42
- border: 1px solid currentColor;
43
- }
44
- }
45
-
46
- .vk_icon_frame:not(.is-style-outline):not(.is-style-noline) {
47
- .vk_icon_font {
48
- color: #fff;
49
- }
50
- }
51
-
52
- // old class before key-color START >>>
53
- .vk_icon {
54
- &_align {
55
- &_center {
56
- text-align: center;
57
- }
58
- &_right {
59
- text-align: right;
60
- }
61
- }
62
-
63
- &_border {
64
- &_frame {
65
- background-color: transparent;
66
- border-width: 1px;
67
- border-style: solid;
68
- }
69
- }
70
- }
71
-
72
- div:not(.is-style-outline):not(.is-style-noline) {
73
- .vk_icon_border:not(.vk_icon_border_frame):not(.vk_icon_border_none) {
74
- .vk_icon_font {
75
- color: #fff;
76
- }
77
- }
78
- }
79
- // <<< END
80
- }
81
-
82
-
83
- .wp-block-vk-blocks-icon {
84
-
85
- }
86
-
87
- // デフォルトのカラー
88
- .wp-block-vk-blocks-icon {
89
- .vk_icon_frame:not(.is-style-outline):not(.is-style-noline) {
90
- .vk_icon_border:not(.has-background) {
91
- background-color: #337ab7;
92
- }
93
- }
94
-
95
- .is-style-noline {
96
- .vk_icon_border:not(.has-text-color) {
97
- color: #337ab7;
98
- }
99
- }
100
-
101
- .is-style-outline {
102
- .vk_icon_border:not(.has-text-color) {
103
- color: #337ab7;
104
- }
105
- }
106
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/index.js DELETED
@@ -1,2 +0,0 @@
1
- import { registerVKBlocks } from '@vkblocks/blocks/bundle';
2
- registerVKBlocks();
 
 
src/blocks/page-content/block.json DELETED
@@ -1,17 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/page-content",
4
- "title": "Page Content",
5
- "category": "vk-blocks-cat",
6
- "attributes": {
7
- "TargetPost": {
8
- "type": "number",
9
- "default": -1
10
- }
11
- },
12
- "description": "Displays the body content of the specified parent page.",
13
- "textdomain": "vk-blocks",
14
- "supports": {
15
- "className": true
16
- }
17
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/page-content/edit.js DELETED
@@ -1,79 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { PanelBody, BaseControl, SelectControl } from '@wordpress/components';
3
- import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
4
- import ServerSideRender from '@wordpress/server-side-render';
5
- import { usePosts } from '@vkblocks/utils/hooks';
6
-
7
- const getPagesSelect = (pages) => {
8
- const defaultSelect = [
9
- {
10
- label: __('Unspecified', 'vk-blocks'),
11
- value: -1,
12
- },
13
- ];
14
- const pagesSelect = pages.map((page) => {
15
- return {
16
- label: page.title.rendered,
17
- value: page.id,
18
- };
19
- });
20
-
21
- return defaultSelect.concat(pagesSelect);
22
- };
23
-
24
- export default function PageContentEdit({ attributes, setAttributes }) {
25
- const { TargetPost } = attributes;
26
-
27
- const pages = usePosts(
28
- { slug: 'page' },
29
- { per_page: -1, status: 'private,publish' }
30
- );
31
-
32
- const pagesSelect = getPagesSelect(pages);
33
-
34
- let editContent;
35
- if (TargetPost === -1) {
36
- editContent = (
37
- <div className="alert alert-warning text-center">
38
- {__(
39
- 'Because no post is selected, The block Will not render',
40
- 'vk-blocks'
41
- )}
42
- </div>
43
- );
44
- } else {
45
- editContent = (
46
- <ServerSideRender
47
- block="vk-blocks/page-content"
48
- attributes={attributes}
49
- />
50
- );
51
- }
52
-
53
- const blockProps = useBlockProps();
54
-
55
- return (
56
- <>
57
- <InspectorControls>
58
- <PanelBody
59
- title={__('Page Setting', 'vk-blocks')}
60
- initialOpen={true}
61
- >
62
- <BaseControl id={'vb-call-01'}>
63
- <SelectControl
64
- label={__('Select Page', 'vk-blocks')}
65
- value={TargetPost}
66
- options={pagesSelect}
67
- onChange={(value) =>
68
- setAttributes({
69
- TargetPost: parseInt(value, 10),
70
- })
71
- }
72
- />
73
- </BaseControl>
74
- </PanelBody>
75
- </InspectorControls>
76
- <div {...blockProps}>{editContent}</div>
77
- </>
78
- );
79
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/page-content/icon.svg DELETED
@@ -1,5 +0,0 @@
1
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M17 5.5H7C6.72386 5.5 6.5 5.72386 6.5 6V11.502L5.03265 11.5076L5.02796 11.5076C5.01863 11.5076 5.00931 11.5078 5 11.5079V6C5 4.89543 5.89543 4 7 4H17C18.1046 4 19 4.89543 19 6V18C19 19.1046 18.1046 20 17 20H10.036L9.5983 18.5904L9.68419 18.5H17C17.2761 18.5 17.5 18.2761 17.5 18V6C17.5 5.72386 17.2761 5.5 17 5.5ZM12.2552 15.75H14V14.25H12.3664C12.5689 14.718 12.5573 15.2784 12.2552 15.75ZM8.50164 12.5H16V11H8V11.821C8.22955 11.9997 8.39794 12.2386 8.50164 12.5ZM8 7.75H16V9.25H8V7.75Z" fill="#1E1E1E"/>
3
- <path d="M10.8895 14.7778L7.62346 14.7854C7.57942 14.7854 7.53538 14.8158 7.5207 14.8614L7.27116 15.5832C7.24915 15.6592 7.30052 15.7352 7.37392 15.7352H8.64364C8.73905 15.7352 8.79043 15.8567 8.72437 15.9251L6.69869 18.1058H6.70603L7.74823 21.5021C7.77025 21.578 7.71887 21.6464 7.64548 21.6464H6.62529C6.57392 21.6464 6.53722 21.616 6.52254 21.5704L6.00144 19.8305C5.97208 19.7241 5.83264 19.7241 5.79594 19.8229L5.37025 21.0462C5.36291 21.069 5.36291 21.0918 5.37025 21.1146L5.75924 22.5962C5.77392 22.6418 5.81796 22.6797 5.86199 22.6797H9.15006C9.22345 22.6797 9.27483 22.6038 9.25281 22.5354L7.92437 18.2577C7.90969 18.2197 7.92437 18.1741 7.95373 18.1437L10.9702 14.9678C11.0363 14.8994 10.9849 14.7778 10.8895 14.7778Z" fill="black"/>
4
- <path d="M7.02164 13L5.03265 13.0076C4.98862 13.0076 4.94458 13.038 4.9299 13.0836L4.67302 13.8054C4.64366 13.8814 4.70238 13.9573 4.77577 13.9573H5.61247C5.68586 13.9573 5.73724 14.0333 5.71522 14.1093L3.34458 20.8259C3.30789 20.9247 3.17578 20.9247 3.13908 20.8259L1.43633 15.9784C1.40697 15.9024 1.46569 15.8265 1.53908 15.8265H2.3978C2.44183 15.8265 2.48587 15.8568 2.50055 15.9024L3.11706 17.65C3.15376 17.7487 3.28587 17.7487 3.32257 17.65L4.27669 14.9299C4.30605 14.8539 4.24733 14.7779 4.17394 14.7779H0.107895C0.0345005 14.7779 -0.0168755 14.8539 0.0051428 14.9299L3.13174 23.9259C3.16844 24.0247 3.30055 24.0247 3.33724 23.9259L7.12439 13.152C7.14641 13.076 7.09503 13 7.02164 13Z" fill="#D8141C"/>
5
- </svg>
 
 
 
 
 
src/blocks/page-content/index.js DELETED
@@ -1,13 +0,0 @@
1
- import { ReactComponent as Icon } from './icon.svg';
2
-
3
- import metadata from './block.json';
4
- import edit from './edit';
5
-
6
- const { name } = metadata;
7
-
8
- export { metadata, name };
9
-
10
- export const settings = {
11
- icon: <Icon />,
12
- edit,
13
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/page-content/index.php DELETED
@@ -1,150 +0,0 @@
1
- <?php
2
- /**
3
- * Page Content Block
4
- *
5
- * @package VK Blocks
6
- */
7
-
8
- /**
9
- * Registers the `vk-blocks/page-content` block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_page_content() {
14
- global $vk_blocks_common_attributes;
15
- register_block_type(
16
- __DIR__,
17
- array(
18
- 'editor_style' => 'vk-blocks-build-editor-css',
19
- 'editor_script' => 'vk-blocks-build-js',
20
- 'attributes' => array_merge(
21
- array(
22
- 'className' => array(
23
- 'type' => 'string',
24
- 'default' => '',
25
- ),
26
- 'TargetPost' => array(
27
- 'type' => 'number',
28
- 'default' => -1,
29
- ),
30
- ),
31
- $vk_blocks_common_attributes
32
- ),
33
- 'render_callback' => 'vk_blocks_page_content_render_callback',
34
- )
35
- );
36
- }
37
- add_action( 'init', 'vk_blocks_register_block_page_content', 99 );
38
-
39
- // Add fiter for render post content
40
- add_filter( 'vk_page_content', 'do_blocks', 9 );
41
- add_filter( 'vk_page_content', 'wptexturize' );
42
- add_filter( 'vk_page_content', 'convert_smilies', 20 );
43
- add_filter( 'vk_page_content', 'shortcode_unautop' );
44
- add_filter( 'vk_page_content', 'prepend_attachment' );
45
- add_filter( 'vk_page_content', 'wp_filter_content_tags' );
46
- add_filter( 'vk_page_content', 'do_shortcode', 11 );
47
- add_filter( 'vk_page_content', 'capital_P_dangit', 11 );
48
-
49
- /**
50
- * Render Callback of Page Content Block
51
- *
52
- * @param array $attributes attributes.
53
- * @return string
54
- */
55
- function vk_blocks_page_content_render_callback( $attributes ) {
56
- $page_content_id = ! empty( $attributes['TargetPost'] ) ? $attributes['TargetPost'] : -1;
57
- $page_content = -1 !== $page_content_id ? get_post( $page_content_id )->post_content : '';
58
- vk_blocks_content_enqueue_scripts( $page_content );
59
-
60
- $vk_blocks_options = vk_blocks_get_options();
61
- if ( has_block( 'vk-blocks/faq2', $page_content ) || has_block( 'vk-blocks/faq', $page_content ) ) {
62
- if ( 'open' === $vk_blocks_options['new_faq_accordion'] ) {
63
- $page_content = str_replace( '[accordion_trigger_switch]', 'vk_faq-accordion vk_faq-accordion-open', $page_content );
64
- } elseif ( 'close' === $vk_blocks_options['new_faq_accordion'] ) {
65
- $page_content = str_replace( '[accordion_trigger_switch]', 'vk_faq-accordion vk_faq-accordion-close', $page_content );
66
- } else {
67
- $page_content = str_replace( '[accordion_trigger_switch]', '', $page_content );
68
- }
69
- }
70
- $page_content = str_replace( '[br-xs]', '<br class="vk_responsive-br vk_responsive-br-xs"/>', $page_content );
71
- $page_content = str_replace( '[br-sm]', '<br class="vk_responsive-br vk_responsive-br-sm"/>', $page_content );
72
- $page_content = str_replace( '[br-md]', '<br class="vk_responsive-br vk_responsive-br-md"/>', $page_content );
73
- $page_content = str_replace( '[br-lg]', '<br class="vk_responsive-br vk_responsive-br-lg"/>', $page_content );
74
- $page_content = str_replace( '[br-xl]', '<br class="vk_responsive-br vk_responsive-br-xl"/>', $page_content );
75
- $page_content = str_replace( '[br-xxl]', '<br class="vk_responsive-br vk_responsive-br-xxl"/>', $page_content );
76
-
77
- $classes = '';
78
- $page_html = '';
79
-
80
- if ( -1 !== $page_content_id ) {
81
- $classes .= 'vk_pageContent';
82
- if ( isset( $attributes['TargetPost'] ) ) {
83
- $classes .= ' vk_pageContent-id-' . $page_content_id;
84
- }
85
- if ( isset( $attributes['className'] ) ) {
86
- $classes .= ' ' . $attributes['className'];
87
- }
88
- if ( isset( $attributes['vkb_hidden'] ) && $attributes['vkb_hidden'] ) {
89
- $classes .= ' vk_hidden';
90
- }
91
- if ( isset( $attributes['vkb_hidden_xxl'] ) && $attributes['vkb_hidden_xxl'] ) {
92
- $classes .= ' vk_hidden-xxl';
93
- }
94
- if ( isset( $attributes['vkb_hidden_xl_v2'] ) && $attributes['vkb_hidden_xl_v2'] ) {
95
- $classes .= ' vk_hidden-xl';
96
- }
97
- if ( isset( $attributes['vkb_hidden_lg'] ) && $attributes['vkb_hidden_lg'] ) {
98
- $classes .= ' vk_hidden-lg';
99
- }
100
- if ( isset( $attributes['vkb_hidden_md'] ) && $attributes['vkb_hidden_md'] ) {
101
- $classes .= ' vk_hidden-md';
102
- }
103
- if ( isset( $attributes['vkb_hidden_sm'] ) && $attributes['vkb_hidden_sm'] ) {
104
- $classes .= ' vk_hidden-sm';
105
- }
106
- if ( isset( $attributes['vkb_hidden_xs'] ) && $attributes['vkb_hidden_xs'] ) {
107
- $classes .= ' vk_hidden-xs';
108
- }
109
- if ( isset( $attributes['marginTop'] ) && $attributes['marginTop'] ) {
110
- $classes .= ' ' . $attributes['marginTop'];
111
- }
112
- if ( isset( $attributes['marginBottom'] ) && $attributes['marginBottom'] ) {
113
- $classes .= ' ' . $attributes['marginBottom'];
114
- }
115
-
116
- $page_html .= '<div class="' . $classes . '">';
117
- // Warning : 'vk_page_content' is old hook name that this line is old filter name fall back.
118
- $page_content = apply_filters( 'vk_page_content', $page_content ); //phpcs:ignore
119
- $page_html .= apply_filters( 'vk_blocks_page_content', $page_content );
120
- $page_html .= '</div>';
121
-
122
- $url = get_edit_post_link( $page_content_id );
123
- if ( $url ) {
124
- $page_html .= '<a href="' . esc_url( $url ) . '" class="vk_pageContent_editBtn btn btn-outline-primary btn-sm veu_adminEdit" target="_blank">' . __( 'Edit this area', 'vk-blocks' ) . '</a>';
125
- }
126
- }
127
-
128
- return $page_html;
129
- }
130
-
131
-
132
- /**
133
- * Load Scripts
134
- *
135
- * @param string $page_content Contents.
136
- */
137
- function vk_blocks_content_enqueue_scripts( $page_content ) {
138
- if ( has_block( 'vk-blocks/faq2', $page_content ) || has_block( 'vk-blocks/faq', $page_content ) ) {
139
- wp_enqueue_script( 'vk-blocks-faq2', VK_BLOCKS_DIR_URL . 'build/faq2.min.js', array(), VK_BLOCKS_VERSION, true );
140
- }
141
- if ( has_block( 'vk-blocks/animation', $page_content ) ) {
142
- wp_enqueue_script( 'vk-blocks-animation', VK_BLOCKS_DIR_URL . 'build/vk-animation.min.js', array(), VK_BLOCKS_VERSION, true );
143
- }
144
- if ( has_block( 'vk-blocks/slider', $page_content ) ) {
145
- wp_enqueue_style( 'vk-blocks-swiper', VK_BLOCKS_DIR_URL . 'build/swiper.min.css', array(), VK_BLOCKS_VERSION );
146
- wp_enqueue_script( 'vk-blocks-swiper', VK_BLOCKS_DIR_URL . 'build/swiper.min.js', array(), VK_BLOCKS_VERSION, true );
147
- wp_enqueue_script( 'vk-blocks-slider', VK_BLOCKS_DIR_URL . 'build/vk-slider.min.js', array( 'vk-blocks-swiper' ), VK_BLOCKS_VERSION, true );
148
- }
149
- }
150
- add_action( 'wp_enqueue_scripts', 'vk_blocks_content_enqueue_scripts' );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/block.json DELETED
@@ -1,145 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/pr-blocks",
4
- "title": "PR Blocks (not recommended)",
5
- "category": "vk-blocks-cat",
6
- "attributes": {
7
- "heading1" :{
8
- "type": "string",
9
- "source": "html",
10
- "selector": ".vk_prBlocks_item_title-1"
11
- },
12
- "heading2" :{
13
- "type": "string",
14
- "source": "html",
15
- "selector": ".vk_prBlocks_item_title-2"
16
- },
17
- "heading3" :{
18
- "type": "string",
19
- "source": "html",
20
- "selector": ".vk_prBlocks_item_title-3"
21
- },
22
- "heading4" :{
23
- "type": "string",
24
- "source": "html",
25
- "selector": ".vk_prBlocks_item_title-4"
26
- },
27
- "content1": {
28
- "type": "string",
29
- "source": "html",
30
- "selector": "p.vk_prBlocks_item_summary-1"
31
- },
32
- "content2": {
33
- "type": "string",
34
- "source": "html",
35
- "selector": "p.vk_prBlocks_item_summary-2"
36
- },
37
- "content3": {
38
- "type": "string",
39
- "source": "html",
40
- "selector": "p.vk_prBlocks_item_summary-3"
41
- },
42
- "content4": {
43
- "type": "string",
44
- "source": "html",
45
- "selector": "p.vk_prBlocks_item_summary-4"
46
- },
47
- "url1": {
48
- "type": "string",
49
- "default": ""
50
- },
51
- "url2": {
52
- "type": "string",
53
- "default": ""
54
- },
55
- "url3": {
56
- "type": "string",
57
- "default": ""
58
- },
59
- "url4": {
60
- "type": "string",
61
- "default": ""
62
- },
63
- "urlOpenType1": {
64
- "type": "Boolean",
65
- "default": false
66
- },
67
- "urlOpenType2": {
68
- "type": "Boolean",
69
- "default": false
70
- },
71
- "urlOpenType3": {
72
- "type": "Boolean",
73
- "default": false
74
- },
75
- "urlOpenType4": {
76
- "type": "Boolean",
77
- "default": false
78
- },
79
- "icon1": {
80
- "type": "string",
81
- "default": "<i class=\"fas fa-file\"></i>"
82
- },
83
- "icon2": {
84
- "type": "string",
85
- "default": "<i class=\"fas fa-file\"></i>"
86
- },
87
- "icon3": {
88
- "type": "string",
89
- "default": "<i class=\"fas fa-file\"></i>"
90
- },
91
- "icon4": {
92
- "type": "string",
93
- "default": "<i class=\"fas fa-file\"></i>"
94
- },
95
- "color1":{
96
- "type": "string"
97
- },
98
- "color2":{
99
- "type": "string"
100
- },
101
- "color3":{
102
- "type": "string"
103
- },
104
- "color4":{
105
- "type": "string"
106
- },
107
- "bgType1": {
108
- "type": "string",
109
- "default": "0"
110
- },
111
- "bgType2": {
112
- "type": "string",
113
- "default": "0"
114
- },
115
- "bgType3": {
116
- "type": "string",
117
- "default": "0"
118
- },
119
- "bgType4": {
120
- "type": "string",
121
- "default": "0"
122
- },
123
- "insertImage1": {
124
- "type": "string",
125
- "default": ""
126
- },
127
- "insertImage2": {
128
- "type": "string",
129
- "default": ""
130
- },
131
- "insertImage3": {
132
- "type": "string",
133
- "default": ""
134
- },
135
- "insertImage4": {
136
- "type": "string",
137
- "default": ""
138
- }
139
- },
140
- "description": "This is a PR block where you can place images and icon. But currently, it is possible to create the same layout by combining Column Block and Icon Block, so this block is not recommended. Please check Columns category of Block Patterns.",
141
- "textdomain": "vk-blocks",
142
- "supports": {
143
- "className": true
144
- }
145
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/0.0.0/save.js DELETED
@@ -1,247 +0,0 @@
1
- import { RichText } from '@wordpress/block-editor';
2
-
3
- export default function save({ attributes }) {
4
- let {
5
- heading1,
6
- heading2,
7
- heading3,
8
- content1,
9
- content2,
10
- content3,
11
- url1,
12
- url2,
13
- url3,
14
- urlOpenType1,
15
- urlOpenType2,
16
- urlOpenType3,
17
- icon1,
18
- icon2,
19
- icon3,
20
- color1,
21
- color2,
22
- color3,
23
- bgType1,
24
- bgType2,
25
- bgType3,
26
- insertImage1,
27
- insertImage2,
28
- insertImage3,
29
- } = attributes;
30
-
31
- return (
32
- <div className="vk_prBlocks row">
33
- <div className="vk_prBlocks_item col-sm-4">
34
- <a
35
- href={url1}
36
- target={urlOpenType1 ? '_blank' : '_self'}
37
- className="vk_prBlocks_item_link"
38
- >
39
- {(() => {
40
- if (insertImage1) {
41
- return (
42
- <div
43
- className="vk_prBlocks_item_image"
44
- style={{
45
- backgroundImage:
46
- 'url(' + insertImage1 + ')',
47
- backgroundRepeat:
48
- 'no-repeat 50% center',
49
- backgroundSize: 'cover',
50
- }}
51
- >
52
- <img src={insertImage1} alt="" />
53
- </div>
54
- );
55
- }
56
-
57
- if (!color1) {
58
- color1 = '#0693e3';
59
- bgType1 = '0';
60
- }
61
- if (bgType1 === '0') {
62
- return (
63
- <div
64
- className="vk_prBlocks_item_icon_outer"
65
- style={{
66
- backgroundColor: color1,
67
- border: `1px solid ${color1}`,
68
- }}
69
- >
70
- <i
71
- className={`${icon1} vk_prBlocks_item_icon`}
72
- style={{ color: '#fff' }}
73
- ></i>
74
- </div>
75
- );
76
- }
77
- return (
78
- <div
79
- className="vk_prBlocks_item_icon_outer"
80
- style={{
81
- backgroundColor: 'transparent',
82
- border: '1px solid ' + color1,
83
- }}
84
- >
85
- <i
86
- className={`${icon1} vk_prBlocks_item_icon`}
87
- style={{ color: color1 }}
88
- ></i>
89
- </div>
90
- );
91
- })()}
92
- <RichText.Content
93
- className="vk_prBlocks_item_title vk_prBlocks_item_title-1"
94
- tagName={'h1'}
95
- value={heading1}
96
- />
97
- <RichText.Content
98
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-1"
99
- tagName={'p'}
100
- value={content1}
101
- />
102
- </a>
103
- </div>
104
- <div className="vk_prBlocks_item col-sm-4">
105
- <a
106
- href={url2}
107
- target={urlOpenType2 ? '_blank' : '_self'}
108
- className="vk_prBlocks_item_link"
109
- >
110
- {(() => {
111
- if (insertImage2) {
112
- return (
113
- <div
114
- className="vk_prBlocks_item_image"
115
- style={{
116
- backgroundImage:
117
- 'url(' + insertImage2 + ')',
118
- backgroundRepeat:
119
- 'no-repeat 50% center',
120
- backgroundSize: 'cover',
121
- }}
122
- >
123
- <img src={insertImage2} alt="" />
124
- </div>
125
- );
126
- }
127
- if (!color2) {
128
- color2 = '#0693e3';
129
- bgType2 = '0';
130
- }
131
- if (bgType2 === '0') {
132
- return (
133
- <div
134
- className="vk_prBlocks_item_icon_outer"
135
- style={{
136
- backgroundColor: color2,
137
- border: `1px solid ${color2}`,
138
- }}
139
- >
140
- <i
141
- className={`${icon2} vk_prBlocks_item_icon`}
142
- style={{ color: '#fff' }}
143
- ></i>
144
- </div>
145
- );
146
- }
147
- return (
148
- <div
149
- className="vk_prBlocks_item_icon_outer"
150
- style={{
151
- backgroundColor: 'transparent',
152
- border: '1px solid ' + color2,
153
- }}
154
- >
155
- <i
156
- className={`${icon2} vk_prBlocks_item_icon`}
157
- style={{ color: color2 }}
158
- ></i>
159
- </div>
160
- );
161
- })()}
162
- <RichText.Content
163
- className="vk_prBlocks_item_title vk_prBlocks_item_title-2"
164
- tagName={'h1'}
165
- value={heading2}
166
- />
167
- <RichText.Content
168
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-2"
169
- tagName={'p'}
170
- value={content2}
171
- />
172
- </a>
173
- </div>
174
-
175
- <div className="vk_prBlocks_item col-sm-4">
176
- <a
177
- href={url3}
178
- target={urlOpenType3 ? '_blank' : '_self'}
179
- className="vk_prBlocks_item_link"
180
- >
181
- {(() => {
182
- if (insertImage3) {
183
- return (
184
- <div
185
- className="vk_prBlocks_item_image"
186
- style={{
187
- backgroundImage:
188
- 'url(' + insertImage3 + ')',
189
- backgroundRepeat:
190
- 'no-repeat 50% center',
191
- backgroundSize: 'cover',
192
- }}
193
- >
194
- <img src={insertImage3} alt="" />
195
- </div>
196
- );
197
- }
198
- if (!color3) {
199
- color3 = '#0693e3';
200
- bgType3 = '0';
201
- }
202
- if (bgType3 === '0') {
203
- return (
204
- <div
205
- className="vk_prBlocks_item_icon_outer"
206
- style={{
207
- backgroundColor: color3,
208
- border: `1px solid ${color3}`,
209
- }}
210
- >
211
- <i
212
- className={`${icon3} vk_prBlocks_item_icon`}
213
- style={{ color: '#fff' }}
214
- ></i>
215
- </div>
216
- );
217
- }
218
- return (
219
- <div
220
- className="vk_prBlocks_item_icon_outer"
221
- style={{
222
- backgroundColor: 'transparent',
223
- border: '1px solid ' + color3,
224
- }}
225
- >
226
- <i
227
- className={`${icon3} vk_prBlocks_item_icon`}
228
- style={{ color: color3 }}
229
- ></i>
230
- </div>
231
- );
232
- })()}
233
- <RichText.Content
234
- className="vk_prBlocks_item_title vk_prBlocks_item_title-3"
235
- tagName={'h1'}
236
- value={heading3}
237
- />
238
- <RichText.Content
239
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-3"
240
- tagName={'p'}
241
- value={content3}
242
- />
243
- </a>
244
- </div>
245
- </div>
246
- );
247
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/0.0.0/schema.js DELETED
@@ -1,42 +0,0 @@
1
- export default function setAttributes(number) {
2
- const attributes = {};
3
-
4
- for (let i = 1; i <= number; i++) {
5
- attributes['heading' + i] = {
6
- type: 'string',
7
- source: 'html',
8
- selector: 'h3.vk_prBlocks_item_title-' + i,
9
- };
10
- attributes['content' + i] = {
11
- type: 'string',
12
- source: 'html',
13
- selector: 'p.vk_prBlocks_item_summary-' + i,
14
- };
15
- attributes['url' + i] = {
16
- type: 'string',
17
- default: null,
18
- };
19
- attributes['urlOpenType' + i] = {
20
- type: 'Boolean',
21
- default: false,
22
- };
23
- attributes['icon' + i] = {
24
- type: 'string',
25
- default: 'fas fa-file',
26
- };
27
- attributes['color' + i] = {
28
- type: 'string',
29
- default: '#0693e3',
30
- };
31
- attributes['bgType' + i] = {
32
- type: 'string',
33
- default: '0',
34
- };
35
- attributes['insertImage' + i] = {
36
- type: 'string',
37
- default: null,
38
- };
39
- }
40
-
41
- return attributes;
42
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/0.0.1/component.js DELETED
@@ -1,193 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { Component } from '@wordpress/element';
3
- import { RichText } from '@wordpress/block-editor';
4
-
5
- export class ComponentBlock extends Component {
6
- render() {
7
- const setAttributes = this.props.setAttributes;
8
- const {
9
- heading1,
10
- heading2,
11
- heading3,
12
- content1,
13
- content2,
14
- content3,
15
- url1,
16
- url2,
17
- url3,
18
- urlOpenType1,
19
- urlOpenType2,
20
- urlOpenType3,
21
- icon1,
22
- icon2,
23
- icon3,
24
- color1,
25
- color2,
26
- color3,
27
- bgType1,
28
- bgType2,
29
- bgType3,
30
- insertImage1,
31
- insertImage2,
32
- insertImage3,
33
- } = this.props.attributes;
34
- const for_ = this.props.for_;
35
- const blockNum = this.props.blockNum;
36
- const blockNumArrIndex = this.props.blockNum - 1;
37
-
38
- const heading = [heading1, heading2, heading3];
39
- const content = [content1, content2, content3];
40
- const url = [url1, url2, url3];
41
- const urlOpenType = [urlOpenType1, urlOpenType2, urlOpenType3];
42
- const icon = [icon1, icon2, icon3];
43
- const color = [color1, color2, color3];
44
- const bgType = [bgType1, bgType2, bgType3];
45
- const insertImage = [insertImage1, insertImage2, insertImage3];
46
-
47
- let richTextH1Save = '';
48
- let richTextPSave = '';
49
-
50
- const drawElement = (() => {
51
- if (insertImage[blockNumArrIndex]) {
52
- return (
53
- <div
54
- className="vk_prBlocks_item_image"
55
- style={{
56
- backgroundImage: `url(${insertImage[blockNumArrIndex]})`,
57
- backgroundRepeat: 'no-repeat 50% center',
58
- backgroundSize: 'cover',
59
- }}
60
- >
61
- <img src={insertImage[blockNumArrIndex]} alt="" />
62
- </div>
63
- );
64
- }
65
-
66
- if (!color[blockNumArrIndex]) {
67
- color[blockNumArrIndex] = '#0693e3';
68
- }
69
- if (bgType[blockNumArrIndex] === '0') {
70
- return (
71
- <div
72
- className="vk_prBlocks_item_icon_outer"
73
- style={{
74
- backgroundColor: color[blockNumArrIndex],
75
- border: `1px solid ${color[blockNumArrIndex]}`,
76
- }}
77
- >
78
- <i
79
- className={`${icon[blockNumArrIndex]} vk_prBlocks_item_icon`}
80
- style={{ color: '#fff' }}
81
- ></i>
82
- </div>
83
- );
84
- }
85
- return (
86
- <div
87
- className="vk_prBlocks_item_icon_outer"
88
- style={{
89
- backgroundColor: 'transparent',
90
- border: '1px solid ' + color[blockNumArrIndex],
91
- }}
92
- >
93
- <i
94
- className={`${icon[blockNumArrIndex]} vk_prBlocks_item_icon`}
95
- style={{ color: color[blockNumArrIndex] }}
96
- ></i>
97
- </div>
98
- );
99
- })();
100
-
101
- //編集画面とフロント側の切り替え
102
- if (for_ === 'edit') {
103
- if (blockNum === 1) {
104
- richTextH1Save = (
105
- <RichText
106
- className="vk_prBlocks_item_title vk_prBlocks_item_title-1"
107
- tagName={'h1'}
108
- onChange={(value) => setAttributes({ heading1: value })}
109
- value={heading1}
110
- placeholder={__('Input Title', 'vk-blocks')}
111
- />
112
- );
113
- richTextPSave = (
114
- <RichText
115
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-1"
116
- tagName={'p'}
117
- onChange={(value) => setAttributes({ content1: value })}
118
- value={content1}
119
- placeholder={__('Input Content', 'vk-blocks')}
120
- />
121
- );
122
- } else if (blockNum === 2) {
123
- richTextH1Save = (
124
- <RichText
125
- className="vk_prBlocks_item_title vk_prBlocks_item_title-2"
126
- tagName={'h1'}
127
- onChange={(value) => setAttributes({ heading2: value })}
128
- value={heading2}
129
- placeholder={__('Input Title', 'vk-blocks')}
130
- />
131
- );
132
- richTextPSave = (
133
- <RichText
134
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-2"
135
- tagName={'p'}
136
- onChange={(value) => setAttributes({ content2: value })}
137
- value={content2}
138
- placeholder={__('Input Content', 'vk-blocks')}
139
- />
140
- );
141
- } else if (blockNum === 3) {
142
- richTextH1Save = (
143
- <RichText
144
- className="vk_prBlocks_item_title vk_prBlocks_item_title-3"
145
- tagName={'h1'}
146
- onChange={(value) => setAttributes({ heading3: value })}
147
- value={heading3}
148
- placeholder={__('Input Title', 'vk-blocks')}
149
- />
150
- );
151
- richTextPSave = (
152
- <RichText
153
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-3"
154
- tagName={'p'}
155
- onChange={(value) => setAttributes({ content3: value })}
156
- value={content3}
157
- placeholder={__('Input Content', 'vk-blocks')}
158
- />
159
- );
160
- }
161
- } else if (for_ === 'save') {
162
- richTextH1Save = (
163
- <RichText.Content
164
- className={`vk_prBlocks_item_title vk_prBlocks_item_title-${blockNum}`}
165
- tagName={'h1'}
166
- value={heading[blockNumArrIndex]}
167
- />
168
- );
169
- richTextPSave = (
170
- <RichText.Content
171
- className={`vk_prBlocks_item_summary vk_prBlocks_item_summary-${blockNum}`}
172
- tagName={'p'}
173
- value={content[blockNumArrIndex]}
174
- />
175
- );
176
- }
177
-
178
- return (
179
- <div className="vk_prBlocks_item col-sm-4">
180
- <a
181
- href={url[blockNumArrIndex]}
182
- target={urlOpenType[blockNumArrIndex] ? '_blank' : '_self'}
183
- className="vk_prBlocks_item_link"
184
- rel="noopener noreferrer"
185
- >
186
- {drawElement}
187
- {richTextH1Save}
188
- {richTextPSave}
189
- </a>
190
- </div>
191
- );
192
- }
193
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/0.0.1/save.js DELETED
@@ -1,23 +0,0 @@
1
- import { ComponentBlock } from './component';
2
-
3
- export default function save({ attributes }) {
4
- return (
5
- <div className="vk_prBlocks row">
6
- <ComponentBlock
7
- attributes={attributes}
8
- blockNum={1}
9
- for_={'save'}
10
- />
11
- <ComponentBlock
12
- attributes={attributes}
13
- blockNum={2}
14
- for_={'save'}
15
- />
16
- <ComponentBlock
17
- attributes={attributes}
18
- blockNum={3}
19
- for_={'save'}
20
- />
21
- </div>
22
- );
23
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/0.0.1/schema.js DELETED
@@ -1,42 +0,0 @@
1
- export default function setAttributes(number) {
2
- const attributes = {};
3
-
4
- for (let i = 1; i <= number; i++) {
5
- attributes['heading' + i] = {
6
- type: 'string',
7
- source: 'html',
8
- selector: 'h1.vk_prBlocks_item_title-' + i,
9
- };
10
- attributes['content' + i] = {
11
- type: 'string',
12
- source: 'html',
13
- selector: 'p.vk_prBlocks_item_summary-' + i,
14
- };
15
- attributes['url' + i] = {
16
- type: 'string',
17
- default: null,
18
- };
19
- attributes['urlOpenType' + i] = {
20
- type: 'Boolean',
21
- default: false,
22
- };
23
- attributes['icon' + i] = {
24
- type: 'string',
25
- default: 'fas fa-file',
26
- };
27
- attributes['color' + i] = {
28
- type: 'string',
29
- default: '#0693e3',
30
- };
31
- attributes['bgType' + i] = {
32
- type: 'string',
33
- default: '0',
34
- };
35
- attributes['insertImage' + i] = {
36
- type: 'string',
37
- default: null,
38
- };
39
- }
40
-
41
- return attributes;
42
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/0.0.2/component.js DELETED
@@ -1,233 +0,0 @@
1
- import { isNotJSON } from '@vkblocks/utils/is-not-json';
2
- import { __ } from '@wordpress/i18n';
3
- import { Component } from '@wordpress/element';
4
- import { RichText } from '@wordpress/block-editor';
5
- import { fixBrokenUnicode } from '@vkblocks/utils/depModules';
6
-
7
- export class ComponentBlock extends Component {
8
- render() {
9
- const setAttributes = this.props.setAttributes;
10
- const {
11
- heading1,
12
- heading2,
13
- heading3,
14
- content1,
15
- content2,
16
- content3,
17
- url1,
18
- url2,
19
- url3,
20
- urlOpenType1,
21
- urlOpenType2,
22
- urlOpenType3,
23
- icon1,
24
- icon2,
25
- icon3,
26
- color1,
27
- color2,
28
- color3,
29
- bgType1,
30
- bgType2,
31
- bgType3,
32
- insertImage1,
33
- insertImage2,
34
- insertImage3,
35
- } = this.props.attributes;
36
- const for_ = this.props.for_;
37
- const blockNum = this.props.blockNum;
38
- const blockNumArrIndex = this.props.blockNum - 1;
39
-
40
- const heading = [heading1, heading2, heading3];
41
- const content = [content1, content2, content3];
42
- const url = [url1, url2, url3];
43
- const urlOpenType = [urlOpenType1, urlOpenType2, urlOpenType3];
44
- const icon = [icon1, icon2, icon3];
45
- const color = [color1, color2, color3];
46
- const bgType = [bgType1, bgType2, bgType3];
47
- const insertImage = [insertImage1, insertImage2, insertImage3];
48
-
49
- let richTextH1Save = '';
50
- let richTextPSave = '';
51
-
52
- const renderSaveAltImage = (Image) => {
53
- if (isNotJSON(Image)) {
54
- return <img src={Image} alt="" />;
55
- }
56
- const IconImageParse = JSON.parse(fixBrokenUnicode(Image));
57
- return (
58
- <img
59
- src={IconImageParse.sizes.full.url}
60
- alt={IconImageParse.alt}
61
- />
62
- );
63
- };
64
-
65
- const renderItemImage = (Image) => {
66
- const bgImage = Image[blockNumArrIndex];
67
- if (isNotJSON(bgImage)) {
68
- return {
69
- backgroundImage: `url(${bgImage})`,
70
- backgroundRepeat: 'no-repeat 50% center',
71
- backgroundSize: 'cover',
72
- };
73
- }
74
- const bgImageParse = JSON.parse(fixBrokenUnicode(bgImage));
75
- return {
76
- backgroundImage: `url(${bgImageParse.sizes.full.url})`,
77
- backgroundRepeat: 'no-repeat 50% center',
78
- backgroundSize: 'cover',
79
- };
80
- };
81
-
82
- const drawElement = (() => {
83
- if (insertImage[blockNumArrIndex]) {
84
- return (
85
- <div
86
- className="vk_prBlocks_item_image"
87
- style={renderItemImage(insertImage)}
88
- >
89
- {renderSaveAltImage(insertImage[blockNumArrIndex])}
90
- </div>
91
- );
92
- }
93
-
94
- if (!color[blockNumArrIndex]) {
95
- color[blockNumArrIndex] = '#0693e3';
96
- }
97
- if (bgType[blockNumArrIndex] === '0') {
98
- return (
99
- <div
100
- className="vk_prBlocks_item_icon_outer"
101
- style={{
102
- backgroundColor: color[blockNumArrIndex],
103
- border: `1px solid ${color[blockNumArrIndex]}`,
104
- }}
105
- >
106
- <i
107
- className={`${icon[blockNumArrIndex]} vk_prBlocks_item_icon`}
108
- style={{ color: '#fff' }}
109
- ></i>
110
- </div>
111
- );
112
- }
113
- return (
114
- <div
115
- className="vk_prBlocks_item_icon_outer"
116
- style={{
117
- backgroundColor: 'transparent',
118
- border: '1px solid ' + color[blockNumArrIndex],
119
- }}
120
- >
121
- <i
122
- className={`${icon[blockNumArrIndex]} vk_prBlocks_item_icon`}
123
- style={{ color: color[blockNumArrIndex] }}
124
- ></i>
125
- </div>
126
- );
127
- })();
128
-
129
- //編集画面とフロント側の切り替え
130
- if (for_ === 'edit') {
131
- if (blockNum === 1) {
132
- richTextH1Save = (
133
- <RichText
134
- className="vk_prBlocks_item_title vk_prBlocks_item_title-1"
135
- tagName={'h3'}
136
- onChange={(value) => setAttributes({ heading1: value })}
137
- value={heading1}
138
- placeholder={__('Input Title', 'vk-blocks')}
139
- />
140
- );
141
- richTextPSave = (
142
- <RichText
143
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-1"
144
- tagName={'p'}
145
- onChange={(value) => setAttributes({ content1: value })}
146
- value={content1}
147
- placeholder={__('Input Content', 'vk-blocks')}
148
- />
149
- );
150
- } else if (blockNum === 2) {
151
- richTextH1Save = (
152
- <RichText
153
- className="vk_prBlocks_item_title vk_prBlocks_item_title-2"
154
- tagName={'h3'}
155
- onChange={(value) => setAttributes({ heading2: value })}
156
- value={heading2}
157
- placeholder={__('Input Title', 'vk-blocks')}
158
- />
159
- );
160
- richTextPSave = (
161
- <RichText
162
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-2"
163
- tagName={'p'}
164
- onChange={(value) => setAttributes({ content2: value })}
165
- value={content2}
166
- placeholder={__('Input Content', 'vk-blocks')}
167
- />
168
- );
169
- } else if (blockNum === 3) {
170
- richTextH1Save = (
171
- <RichText
172
- className="vk_prBlocks_item_title vk_prBlocks_item_title-3"
173
- tagName={'h3'}
174
- onChange={(value) => setAttributes({ heading3: value })}
175
- value={heading3}
176
- placeholder={__('Input Title', 'vk-blocks')}
177
- />
178
- );
179
- richTextPSave = (
180
- <RichText
181
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-3"
182
- tagName={'p'}
183
- onChange={(value) => setAttributes({ content3: value })}
184
- value={content3}
185
- placeholder={__('Input Content', 'vk-blocks')}
186
- />
187
- );
188
- }
189
- } else if (for_ === 'save') {
190
- richTextH1Save = (
191
- <RichText.Content
192
- className={`vk_prBlocks_item_title vk_prBlocks_item_title-${blockNum}`}
193
- tagName={'h3'}
194
- value={heading[blockNumArrIndex]}
195
- />
196
- );
197
- richTextPSave = (
198
- <RichText.Content
199
- className={`vk_prBlocks_item_summary vk_prBlocks_item_summary-${blockNum}`}
200
- tagName={'p'}
201
- value={content[blockNumArrIndex]}
202
- />
203
- );
204
- }
205
-
206
- // aタグ判定
207
- if (url[blockNumArrIndex] && for_ === 'save') {
208
- return (
209
- <div className="vk_prBlocks_item col-sm-4">
210
- <a
211
- href={url[blockNumArrIndex]}
212
- className="vk_prBlocks_item_link"
213
- target={
214
- urlOpenType[blockNumArrIndex] ? '_blank' : '_self'
215
- }
216
- rel="noopener noreferrer"
217
- >
218
- {drawElement}
219
- {richTextH1Save}
220
- {richTextPSave}
221
- </a>
222
- </div>
223
- );
224
- }
225
- return (
226
- <div className="vk_prBlocks_item col-sm-4">
227
- {drawElement}
228
- {richTextH1Save}
229
- {richTextPSave}
230
- </div>
231
- );
232
- }
233
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/0.0.2/save.js DELETED
@@ -1,30 +0,0 @@
1
- import { ComponentBlock } from './component';
2
-
3
- export default function save({ attributes, className }) {
4
- let containerClass;
5
- if (className) {
6
- containerClass = `${className} vk_prBlocks row`;
7
- } else {
8
- containerClass = `vk_prBlocks row`;
9
- }
10
-
11
- return (
12
- <div className={containerClass}>
13
- <ComponentBlock
14
- attributes={attributes}
15
- blockNum={1}
16
- for_={'save'}
17
- />
18
- <ComponentBlock
19
- attributes={attributes}
20
- blockNum={2}
21
- for_={'save'}
22
- />
23
- <ComponentBlock
24
- attributes={attributes}
25
- blockNum={3}
26
- for_={'save'}
27
- />
28
- </div>
29
- );
30
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/0.0.2/schema.js DELETED
@@ -1,42 +0,0 @@
1
- export default function setAttributes(number) {
2
- const attributes = {};
3
-
4
- for (let i = 1; i <= number; i++) {
5
- attributes['heading' + i] = {
6
- type: 'string',
7
- source: 'html',
8
- selector: 'h3.vk_prBlocks_item_title-' + i,
9
- };
10
- attributes['content' + i] = {
11
- type: 'string',
12
- source: 'html',
13
- selector: 'p.vk_prBlocks_item_summary-' + i,
14
- };
15
- attributes['url' + i] = {
16
- type: 'string',
17
- default: null,
18
- };
19
- attributes['urlOpenType' + i] = {
20
- type: 'Boolean',
21
- default: false,
22
- };
23
- attributes['icon' + i] = {
24
- type: 'string',
25
- default: 'fas fa-file',
26
- };
27
- attributes['color' + i] = {
28
- type: 'string',
29
- default: '#0693e3',
30
- };
31
- attributes['bgType' + i] = {
32
- type: 'string',
33
- default: '0',
34
- };
35
- attributes['insertImage' + i] = {
36
- type: 'string',
37
- default: null,
38
- };
39
- }
40
-
41
- return attributes;
42
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/0.59.0/component.js DELETED
@@ -1,248 +0,0 @@
1
- import { isNotJSON } from '@vkblocks/utils/is-not-json';
2
- import { __ } from '@wordpress/i18n';
3
- import { Component } from '@wordpress/element';
4
- import { RichText } from '@wordpress/block-editor';
5
- import { fixBrokenUnicode } from '@vkblocks/utils/depModules';
6
- import parse from 'html-react-parser';
7
-
8
- export class ComponentBlock extends Component {
9
- render() {
10
- const setAttributes = this.props.setAttributes;
11
- const {
12
- heading1,
13
- heading2,
14
- heading3,
15
- content1,
16
- content2,
17
- content3,
18
- url1,
19
- url2,
20
- url3,
21
- urlOpenType1,
22
- urlOpenType2,
23
- urlOpenType3,
24
- icon1,
25
- icon2,
26
- icon3,
27
- color1,
28
- color2,
29
- color3,
30
- bgType1,
31
- bgType2,
32
- bgType3,
33
- insertImage1,
34
- insertImage2,
35
- insertImage3,
36
- } = this.props.attributes;
37
- const for_ = this.props.for_;
38
- const blockNum = this.props.blockNum;
39
- const blockNumArrIndex = this.props.blockNum - 1;
40
-
41
- const heading = [heading1, heading2, heading3];
42
- const content = [content1, content2, content3];
43
- const url = [url1, url2, url3];
44
- const urlOpenType = [urlOpenType1, urlOpenType2, urlOpenType3];
45
- const icon = [icon1, icon2, icon3];
46
- const color = [color1, color2, color3];
47
- const bgType = [bgType1, bgType2, bgType3];
48
- const insertImage = [insertImage1, insertImage2, insertImage3];
49
-
50
- let richTextH1Save = '';
51
- let richTextPSave = '';
52
-
53
- const renderSaveAltImage = (Image) => {
54
- if (isNotJSON(Image)) {
55
- return <img src={Image} alt="" />;
56
- }
57
- const IconImageParse = JSON.parse(fixBrokenUnicode(Image));
58
- return (
59
- <img
60
- src={IconImageParse.sizes.full.url}
61
- alt={IconImageParse.alt}
62
- />
63
- );
64
- };
65
-
66
- const renderItemImage = (Image) => {
67
- const bgImage = Image[blockNumArrIndex];
68
- if (isNotJSON(bgImage)) {
69
- return {
70
- backgroundImage: `url(${bgImage})`,
71
- backgroundRepeat: 'no-repeat 50% center',
72
- backgroundSize: 'cover',
73
- };
74
- }
75
- const bgImageParse = JSON.parse(fixBrokenUnicode(bgImage));
76
- return {
77
- backgroundImage: `url(${bgImageParse.sizes.full.url})`,
78
- backgroundRepeat: 'no-repeat 50% center',
79
- backgroundSize: 'cover',
80
- };
81
- };
82
-
83
- const drawElement = (() => {
84
- if (insertImage[blockNumArrIndex]) {
85
- return (
86
- <div
87
- className="vk_prBlocks_item_image"
88
- style={renderItemImage(insertImage)}
89
- >
90
- {renderSaveAltImage(insertImage[blockNumArrIndex])}
91
- </div>
92
- );
93
- }
94
-
95
- if (!color[blockNumArrIndex]) {
96
- color[blockNumArrIndex] = '#0693e3';
97
- }
98
-
99
- let iconColor;
100
- if (bgType[blockNumArrIndex] === '0') {
101
- iconColor = '#fff';
102
- } else {
103
- iconColor = color[blockNumArrIndex];
104
- }
105
-
106
- let faIcon = icon[blockNumArrIndex];
107
- //過去バージョンをリカバリーした時にiconを正常に表示する
108
- if (faIcon && !faIcon.match(/<i/)) {
109
- faIcon = `<i class="${faIcon}"></i>`;
110
- }
111
- //add class and inline css
112
- const faIconFragment = faIcon.split(' ');
113
- faIconFragment[0] =
114
- faIconFragment[0] + ` style="color:${iconColor}" `;
115
- faIconFragment[1] = faIconFragment[1] + ` vk_prBlocks_item_icon `;
116
- const faIconTag = faIconFragment.join('');
117
-
118
- if (bgType[blockNumArrIndex] === '0') {
119
- return (
120
- <div
121
- className="vk_prBlocks_item_icon_outer"
122
- style={{
123
- backgroundColor: color[blockNumArrIndex],
124
- border: `1px solid ${color[blockNumArrIndex]}`,
125
- }}
126
- >
127
- {parse(faIconTag)}
128
- </div>
129
- );
130
- }
131
- return (
132
- <div
133
- className="vk_prBlocks_item_icon_outer"
134
- style={{
135
- backgroundColor: 'transparent',
136
- border: '1px solid ' + color[blockNumArrIndex],
137
- }}
138
- >
139
- {parse(faIconTag)}
140
- </div>
141
- );
142
- })();
143
-
144
- //編集画面とフロント側の切り替え
145
- if (for_ === 'edit') {
146
- if (blockNum === 1) {
147
- richTextH1Save = (
148
- <RichText
149
- className="vk_prBlocks_item_title vk_prBlocks_item_title-1"
150
- tagName={'h3'}
151
- onChange={(value) => setAttributes({ heading1: value })}
152
- value={heading1}
153
- placeholder={__('Input Title', 'vk-blocks')}
154
- />
155
- );
156
- richTextPSave = (
157
- <RichText
158
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-1"
159
- tagName={'p'}
160
- onChange={(value) => setAttributes({ content1: value })}
161
- value={content1}
162
- placeholder={__('Input Content', 'vk-blocks')}
163
- />
164
- );
165
- } else if (blockNum === 2) {
166
- richTextH1Save = (
167
- <RichText
168
- className="vk_prBlocks_item_title vk_prBlocks_item_title-2"
169
- tagName={'h3'}
170
- onChange={(value) => setAttributes({ heading2: value })}
171
- value={heading2}
172
- placeholder={__('Input Title', 'vk-blocks')}
173
- />
174
- );
175
- richTextPSave = (
176
- <RichText
177
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-2"
178
- tagName={'p'}
179
- onChange={(value) => setAttributes({ content2: value })}
180
- value={content2}
181
- placeholder={__('Input Content', 'vk-blocks')}
182
- />
183
- );
184
- } else if (blockNum === 3) {
185
- richTextH1Save = (
186
- <RichText
187
- className="vk_prBlocks_item_title vk_prBlocks_item_title-3"
188
- tagName={'h3'}
189
- onChange={(value) => setAttributes({ heading3: value })}
190
- value={heading3}
191
- placeholder={__('Input Title', 'vk-blocks')}
192
- />
193
- );
194
- richTextPSave = (
195
- <RichText
196
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-3"
197
- tagName={'p'}
198
- onChange={(value) => setAttributes({ content3: value })}
199
- value={content3}
200
- placeholder={__('Input Content', 'vk-blocks')}
201
- />
202
- );
203
- }
204
- } else if (for_ === 'save') {
205
- richTextH1Save = (
206
- <RichText.Content
207
- className={`vk_prBlocks_item_title vk_prBlocks_item_title-${blockNum}`}
208
- tagName={'h3'}
209
- value={heading[blockNumArrIndex]}
210
- />
211
- );
212
- richTextPSave = (
213
- <RichText.Content
214
- className={`vk_prBlocks_item_summary vk_prBlocks_item_summary-${blockNum}`}
215
- tagName={'p'}
216
- value={content[blockNumArrIndex]}
217
- />
218
- );
219
- }
220
-
221
- // aタグ判定
222
- if (url[blockNumArrIndex] && for_ === 'save') {
223
- return (
224
- <div className="vk_prBlocks_item col-sm-4">
225
- <a
226
- href={url[blockNumArrIndex]}
227
- className="vk_prBlocks_item_link"
228
- target={
229
- urlOpenType[blockNumArrIndex] ? '_blank' : '_self'
230
- }
231
- rel="noopener noreferrer"
232
- >
233
- {drawElement}
234
- {richTextH1Save}
235
- {richTextPSave}
236
- </a>
237
- </div>
238
- );
239
- }
240
- return (
241
- <div className="vk_prBlocks_item col-sm-4">
242
- {drawElement}
243
- {richTextH1Save}
244
- {richTextPSave}
245
- </div>
246
- );
247
- }
248
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/0.59.0/save.js DELETED
@@ -1,31 +0,0 @@
1
- import { ComponentBlock } from './component';
2
-
3
- export default function save(props) {
4
- const { attributes, className } = props;
5
- let containerClass;
6
- if (className) {
7
- containerClass = `${className} vk_prBlocks row`;
8
- } else {
9
- containerClass = `vk_prBlocks row`;
10
- }
11
-
12
- return (
13
- <div className={containerClass}>
14
- <ComponentBlock
15
- attributes={attributes}
16
- blockNum={1}
17
- for_={'save'}
18
- />
19
- <ComponentBlock
20
- attributes={attributes}
21
- blockNum={2}
22
- for_={'save'}
23
- />
24
- <ComponentBlock
25
- attributes={attributes}
26
- blockNum={3}
27
- for_={'save'}
28
- />
29
- </div>
30
- );
31
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/0.59.0/schema.js DELETED
@@ -1,42 +0,0 @@
1
- export default function setAttributes(number) {
2
- const attributes = {};
3
-
4
- for (let i = 1; i <= number; i++) {
5
- attributes['heading' + i] = {
6
- type: 'string',
7
- source: 'html',
8
- selector: '.vk_prBlocks_item_title-' + i,
9
- };
10
- attributes['content' + i] = {
11
- type: 'string',
12
- source: 'html',
13
- selector: 'p.vk_prBlocks_item_summary-' + i,
14
- };
15
- attributes['url' + i] = {
16
- type: 'string',
17
- default: '',
18
- };
19
- attributes['urlOpenType' + i] = {
20
- type: 'Boolean',
21
- default: false,
22
- };
23
- attributes['icon' + i] = {
24
- type: 'string',
25
- default: '<i class="fas fa-file"></i>',
26
- };
27
- attributes['color' + i] = {
28
- type: 'string',
29
- default: '#0693e3',
30
- };
31
- attributes['bgType' + i] = {
32
- type: 'string',
33
- default: '0',
34
- };
35
- attributes['insertImage' + i] = {
36
- type: 'string',
37
- default: '',
38
- };
39
- }
40
-
41
- return attributes;
42
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/1.0.7/save.js DELETED
@@ -1,188 +0,0 @@
1
- import { useBlockProps, RichText } from '@wordpress/block-editor';
2
- import { isNotJSON } from '@vkblocks/utils/is-not-json';
3
- import { Component } from '@wordpress/element';
4
- import { fixBrokenUnicode } from '@vkblocks/utils/depModules';
5
- import parse from 'html-react-parser';
6
-
7
- export default function save(props) {
8
- const { attributes } = props;
9
- const containerClass = `vk_prBlocks row`;
10
-
11
- const blockProps = useBlockProps.save({
12
- className: containerClass,
13
- });
14
-
15
- return (
16
- <div {...blockProps}>
17
- <ComponentBlockSave attributes={attributes} blockNum={1} />
18
- <ComponentBlockSave attributes={attributes} blockNum={2} />
19
- <ComponentBlockSave attributes={attributes} blockNum={3} />
20
- </div>
21
- );
22
- }
23
-
24
- export class ComponentBlockSave extends Component {
25
- render() {
26
- const {
27
- heading1,
28
- heading2,
29
- heading3,
30
- content1,
31
- content2,
32
- content3,
33
- url1,
34
- url2,
35
- url3,
36
- urlOpenType1,
37
- urlOpenType2,
38
- urlOpenType3,
39
- icon1,
40
- icon2,
41
- icon3,
42
- color1,
43
- color2,
44
- color3,
45
- bgType1,
46
- bgType2,
47
- bgType3,
48
- insertImage1,
49
- insertImage2,
50
- insertImage3,
51
- } = this.props.attributes;
52
- const blockNum = this.props.blockNum;
53
- const blockNumArrIndex = this.props.blockNum - 1;
54
-
55
- const heading = [heading1, heading2, heading3];
56
- const content = [content1, content2, content3];
57
- const url = [url1, url2, url3];
58
- const urlOpenType = [urlOpenType1, urlOpenType2, urlOpenType3];
59
- const icon = [icon1, icon2, icon3];
60
- const color = [color1, color2, color3];
61
- const bgType = [bgType1, bgType2, bgType3];
62
- const insertImage = [insertImage1, insertImage2, insertImage3];
63
-
64
- let richTextH1Save = '';
65
- let richTextPSave = '';
66
-
67
- const renderSaveAltImage = (Image) => {
68
- if (isNotJSON(Image)) {
69
- return <img src={Image} alt="" />;
70
- }
71
- const IconImageParse = JSON.parse(fixBrokenUnicode(Image));
72
- return (
73
- <img
74
- src={IconImageParse.sizes.full.url}
75
- alt={IconImageParse.alt}
76
- />
77
- );
78
- };
79
-
80
- const renderItemImage = (Image) => {
81
- const bgImage = Image[blockNumArrIndex];
82
- if (isNotJSON(bgImage)) {
83
- return {
84
- backgroundImage: `url(${bgImage})`,
85
- backgroundRepeat: 'no-repeat 50% center',
86
- backgroundSize: 'cover',
87
- };
88
- }
89
- const bgImageParse = JSON.parse(fixBrokenUnicode(bgImage));
90
- return {
91
- backgroundImage: `url(${bgImageParse.sizes.full.url})`,
92
- backgroundRepeat: 'no-repeat 50% center',
93
- backgroundSize: 'cover',
94
- };
95
- };
96
-
97
- const drawElement = (() => {
98
- if (insertImage[blockNumArrIndex]) {
99
- return (
100
- <div
101
- className="vk_prBlocks_item_image"
102
- style={renderItemImage(insertImage)}
103
- >
104
- {renderSaveAltImage(insertImage[blockNumArrIndex])}
105
- </div>
106
- );
107
- }
108
-
109
- if (!color[blockNumArrIndex]) {
110
- color[blockNumArrIndex] = '#0693e3';
111
- }
112
-
113
- let iconColor;
114
- if (bgType[blockNumArrIndex] === '0') {
115
- iconColor = '#fff';
116
- } else {
117
- iconColor = color[blockNumArrIndex];
118
- }
119
-
120
- let faIcon = icon[blockNumArrIndex];
121
- //過去バージョンをリカバリーした時にiconを正常に表示する
122
- if (faIcon && !faIcon.match(/<i/)) {
123
- faIcon = `<i class="${faIcon}"></i>`;
124
- }
125
- //add class and inline css
126
- const faIconFragment = faIcon.split(' ');
127
- faIconFragment[0] =
128
- faIconFragment[0] + ` style="color:${iconColor}" `;
129
- faIconFragment[1] = faIconFragment[1] + ` vk_prBlocks_item_icon `;
130
- const faIconTag = faIconFragment.join('');
131
-
132
- if (bgType[blockNumArrIndex] === '0') {
133
- return (
134
- <div
135
- className="vk_prBlocks_item_icon_outer"
136
- style={{
137
- backgroundColor: color[blockNumArrIndex],
138
- border: `1px solid ${color[blockNumArrIndex]}`,
139
- }}
140
- >
141
- {parse(faIconTag)}
142
- </div>
143
- );
144
- }
145
- return (
146
- <div
147
- className="vk_prBlocks_item_icon_outer"
148
- style={{
149
- backgroundColor: 'transparent',
150
- border: '1px solid ' + color[blockNumArrIndex],
151
- }}
152
- >
153
- {parse(faIconTag)}
154
- </div>
155
- );
156
- })();
157
-
158
- richTextH1Save = (
159
- <RichText.Content
160
- className={`vk_prBlocks_item_title vk_prBlocks_item_title-${blockNum}`}
161
- tagName={'h3'}
162
- value={heading[blockNumArrIndex]}
163
- />
164
- );
165
- richTextPSave = (
166
- <RichText.Content
167
- className={`vk_prBlocks_item_summary vk_prBlocks_item_summary-${blockNum}`}
168
- tagName={'p'}
169
- value={content[blockNumArrIndex]}
170
- />
171
- );
172
-
173
- return (
174
- <div className="vk_prBlocks_item col-sm-4">
175
- <a
176
- href={url[blockNumArrIndex]}
177
- className="vk_prBlocks_item_link"
178
- target={urlOpenType[blockNumArrIndex] ? '_blank' : '_self'}
179
- rel="noopener noreferrer"
180
- >
181
- {drawElement}
182
- {richTextH1Save}
183
- {richTextPSave}
184
- </a>
185
- </div>
186
- );
187
- }
188
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/1.0.7/schema.js DELETED
@@ -1,42 +0,0 @@
1
- export default function setAttributes(number) {
2
- const attributes = {};
3
-
4
- for (let i = 1; i <= number; i++) {
5
- attributes['heading' + i] = {
6
- type: 'string',
7
- source: 'html',
8
- selector: '.vk_prBlocks_item_title-' + i,
9
- };
10
- attributes['content' + i] = {
11
- type: 'string',
12
- source: 'html',
13
- selector: 'p.vk_prBlocks_item_summary-' + i,
14
- };
15
- attributes['url' + i] = {
16
- type: 'string',
17
- default: '',
18
- };
19
- attributes['urlOpenType' + i] = {
20
- type: 'Boolean',
21
- default: false,
22
- };
23
- attributes['icon' + i] = {
24
- type: 'string',
25
- default: '<i class="fas fa-file"></i>',
26
- };
27
- attributes['color' + i] = {
28
- type: 'string',
29
- default: '#0693e3',
30
- };
31
- attributes['bgType' + i] = {
32
- type: 'string',
33
- default: '0',
34
- };
35
- attributes['insertImage' + i] = {
36
- type: 'string',
37
- default: '',
38
- };
39
- }
40
-
41
- return attributes;
42
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/1.20.2/save.js DELETED
@@ -1,198 +0,0 @@
1
- import { useBlockProps, RichText } from '@wordpress/block-editor';
2
- import { isNotJSON } from '@vkblocks/utils/is-not-json';
3
- import { Component } from '@wordpress/element';
4
- import { fixBrokenUnicode } from '@vkblocks/utils/depModules';
5
- import parse from 'html-react-parser';
6
-
7
- export default function save(props) {
8
- const { attributes } = props;
9
- const containerClass = `vk_prBlocks row`;
10
-
11
- const blockProps = useBlockProps.save({
12
- className: containerClass,
13
- });
14
-
15
- return (
16
- <div {...blockProps}>
17
- <ComponentBlockSave attributes={attributes} blockNum={1} />
18
- <ComponentBlockSave attributes={attributes} blockNum={2} />
19
- <ComponentBlockSave attributes={attributes} blockNum={3} />
20
- </div>
21
- );
22
- }
23
-
24
- export class ComponentBlockSave extends Component {
25
- render() {
26
- const {
27
- heading1,
28
- heading2,
29
- heading3,
30
- content1,
31
- content2,
32
- content3,
33
- url1,
34
- url2,
35
- url3,
36
- urlOpenType1,
37
- urlOpenType2,
38
- urlOpenType3,
39
- icon1,
40
- icon2,
41
- icon3,
42
- color1,
43
- color2,
44
- color3,
45
- bgType1,
46
- bgType2,
47
- bgType3,
48
- insertImage1,
49
- insertImage2,
50
- insertImage3,
51
- } = this.props.attributes;
52
- const blockNum = this.props.blockNum;
53
- const blockNumArrIndex = this.props.blockNum - 1;
54
-
55
- const heading = [heading1, heading2, heading3];
56
- const content = [content1, content2, content3];
57
- const url = [url1, url2, url3];
58
- const urlOpenType = [urlOpenType1, urlOpenType2, urlOpenType3];
59
- const icon = [icon1, icon2, icon3];
60
- const color = [color1, color2, color3];
61
- const bgType = [bgType1, bgType2, bgType3];
62
- const insertImage = [insertImage1, insertImage2, insertImage3];
63
-
64
- let richTextH1Save = '';
65
- let richTextPSave = '';
66
-
67
- const renderSaveAltImage = (Image) => {
68
- if (isNotJSON(Image)) {
69
- return <img src={Image} alt="" />;
70
- }
71
- const IconImageParse = JSON.parse(fixBrokenUnicode(Image));
72
- return (
73
- <img
74
- src={IconImageParse.sizes.full.url}
75
- alt={IconImageParse.alt}
76
- />
77
- );
78
- };
79
-
80
- const renderItemImage = (Image) => {
81
- const bgImage = Image[blockNumArrIndex];
82
- if (isNotJSON(bgImage)) {
83
- return {
84
- backgroundImage: `url(${bgImage})`,
85
- backgroundRepeat: 'no-repeat 50% center',
86
- backgroundSize: 'cover',
87
- };
88
- }
89
- const bgImageParse = JSON.parse(fixBrokenUnicode(bgImage));
90
- return {
91
- backgroundImage: `url(${bgImageParse.sizes.full.url})`,
92
- backgroundRepeat: 'no-repeat 50% center',
93
- backgroundSize: 'cover',
94
- };
95
- };
96
-
97
- const drawElement = (() => {
98
- if (insertImage[blockNumArrIndex]) {
99
- return (
100
- <div
101
- className="vk_prBlocks_item_image"
102
- style={renderItemImage(insertImage)}
103
- >
104
- {renderSaveAltImage(insertImage[blockNumArrIndex])}
105
- </div>
106
- );
107
- }
108
-
109
- if (!color[blockNumArrIndex]) {
110
- color[blockNumArrIndex] = '#0693e3';
111
- }
112
-
113
- let iconColor;
114
- if (bgType[blockNumArrIndex] === '0') {
115
- iconColor = '#fff';
116
- } else {
117
- iconColor = color[blockNumArrIndex];
118
- }
119
-
120
- let faIcon = icon[blockNumArrIndex];
121
- //過去バージョンをリカバリーした時にiconを正常に表示する
122
- if (faIcon && !faIcon.match(/<i/)) {
123
- faIcon = `<i class="${faIcon}"></i>`;
124
- }
125
- //add class and inline css
126
- const faIconFragment = faIcon.split(' ');
127
- faIconFragment[0] =
128
- faIconFragment[0] + ` style="color:${iconColor}" `;
129
- faIconFragment[1] = faIconFragment[1] + ` vk_prBlocks_item_icon `;
130
- const faIconTag = faIconFragment.join('');
131
-
132
- if (bgType[blockNumArrIndex] === '0') {
133
- return (
134
- <div
135
- className="vk_prBlocks_item_icon_outer"
136
- style={{
137
- backgroundColor: color[blockNumArrIndex],
138
- border: `1px solid ${color[blockNumArrIndex]}`,
139
- }}
140
- >
141
- {parse(faIconTag)}
142
- </div>
143
- );
144
- }
145
- return (
146
- <div
147
- className="vk_prBlocks_item_icon_outer"
148
- style={{
149
- backgroundColor: 'transparent',
150
- border: '1px solid ' + color[blockNumArrIndex],
151
- }}
152
- >
153
- {parse(faIconTag)}
154
- </div>
155
- );
156
- })();
157
-
158
- richTextH1Save = (
159
- <RichText.Content
160
- className={`vk_prBlocks_item_title vk_prBlocks_item_title-${blockNum}`}
161
- tagName={'h3'}
162
- value={heading[blockNumArrIndex]}
163
- />
164
- );
165
- richTextPSave = (
166
- <RichText.Content
167
- className={`vk_prBlocks_item_summary vk_prBlocks_item_summary-${blockNum}`}
168
- tagName={'p'}
169
- value={content[blockNumArrIndex]}
170
- />
171
- );
172
- if (url[blockNumArrIndex]) {
173
- return (
174
- <div className="vk_prBlocks_item col-sm-4">
175
- <a
176
- href={url[blockNumArrIndex]}
177
- className="vk_prBlocks_item_link"
178
- target={
179
- urlOpenType[blockNumArrIndex] ? '_blank' : '_self'
180
- }
181
- rel="noopener noreferrer"
182
- >
183
- {drawElement}
184
- {richTextH1Save}
185
- {richTextPSave}
186
- </a>
187
- </div>
188
- );
189
- }
190
- return (
191
- <div className="vk_prBlocks_item col-sm-4">
192
- {drawElement}
193
- {richTextH1Save}
194
- {richTextPSave}
195
- </div>
196
- );
197
- }
198
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/1.20.2/schema.js DELETED
@@ -1,42 +0,0 @@
1
- export default function setAttributes(number) {
2
- const attributes = {};
3
-
4
- for (let i = 1; i <= number; i++) {
5
- attributes['heading' + i] = {
6
- type: 'string',
7
- source: 'html',
8
- selector: '.vk_prBlocks_item_title-' + i,
9
- };
10
- attributes['content' + i] = {
11
- type: 'string',
12
- source: 'html',
13
- selector: 'p.vk_prBlocks_item_summary-' + i,
14
- };
15
- attributes['url' + i] = {
16
- type: 'string',
17
- default: '',
18
- };
19
- attributes['urlOpenType' + i] = {
20
- type: 'Boolean',
21
- default: false,
22
- };
23
- attributes['icon' + i] = {
24
- type: 'string',
25
- default: '<i class="fas fa-file"></i>',
26
- };
27
- attributes['color' + i] = {
28
- type: 'string',
29
- default: '#0693e3',
30
- };
31
- attributes['bgType' + i] = {
32
- type: 'string',
33
- default: '0',
34
- };
35
- attributes['insertImage' + i] = {
36
- type: 'string',
37
- default: '',
38
- };
39
- }
40
-
41
- return attributes;
42
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/deprecated/index.js DELETED
@@ -1,39 +0,0 @@
1
- import save000 from './0.0.0/save';
2
- import schema000 from './0.0.0/schema';
3
- import save001 from './0.0.1/save';
4
- import schema001 from './0.0.1/schema';
5
- import save002 from './0.0.2/save';
6
- import schema002 from './0.0.2/schema';
7
- import save0_59_0 from './0.59.0/save';
8
- import schema0_59_0 from './0.59.0/schema';
9
- import save1_0_7 from './1.0.7/save';
10
- import schema1_0_7 from './1.0.7/schema';
11
- import save1_20_2 from './1.20.2/save';
12
- import schema1_20_2 from './1.20.2/schema';
13
-
14
- export const deprecated = [
15
- {
16
- attributes: schema1_20_2(4),
17
- save: save1_20_2,
18
- },
19
- {
20
- attributes: schema1_0_7(4),
21
- save: save1_0_7,
22
- },
23
- {
24
- attributes: schema0_59_0(4),
25
- save: save0_59_0,
26
- },
27
- {
28
- attributes: schema002(4),
29
- save: save002,
30
- },
31
- {
32
- attributes: schema001(4),
33
- save: save001,
34
- },
35
- {
36
- attributes: schema000(4),
37
- save: save000,
38
- },
39
- ];
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/edit.js DELETED
@@ -1,556 +0,0 @@
1
- import { isNotJSON } from '@vkblocks/utils/is-not-json';
2
- import { FontAwesome } from '@vkblocks/utils/font-awesome-new';
3
- import { fixBrokenUnicode } from '@vkblocks/utils/depModules';
4
- import { __ } from '@wordpress/i18n';
5
- import {
6
- RadioControl,
7
- PanelBody,
8
- Button,
9
- BaseControl,
10
- CheckboxControl,
11
- TextControl,
12
- } from '@wordpress/components';
13
- import { Component } from '@wordpress/element';
14
- import {
15
- InspectorControls,
16
- MediaUpload,
17
- RichText,
18
- useBlockProps,
19
- } from '@wordpress/block-editor';
20
-
21
- import parse from 'html-react-parser';
22
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
23
- import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette';
24
-
25
- export default function PrBlocksEdit(props) {
26
- const { attributes, setAttributes } = props;
27
- const {
28
- url1,
29
- url2,
30
- url3,
31
- urlOpenType1,
32
- urlOpenType2,
33
- urlOpenType3,
34
- bgType1,
35
- bgType2,
36
- bgType3,
37
- insertImage1,
38
- insertImage2,
39
- insertImage3,
40
- } = attributes;
41
-
42
- // eslint-disable-next-line no-undef
43
- const iconFamily = vkFontAwesome.iconFamily;
44
-
45
- const containerClass = `vk_prBlocks row`;
46
-
47
- const blockProps = useBlockProps({
48
- className: containerClass,
49
- });
50
-
51
- const uploadNonAltImage1 = (insertImage) => {
52
- if (isNotJSON(insertImage)) {
53
- setAttributes({ insertImage1: insertImage.url });
54
- } else {
55
- setAttributes({ insertImage1: JSON.stringify(insertImage) });
56
- }
57
- };
58
-
59
- const uploadNonAltImage2 = (insertImage) => {
60
- if (isNotJSON(insertImage)) {
61
- setAttributes({ insertImage2: insertImage.url });
62
- } else {
63
- setAttributes({ insertImage2: JSON.stringify(insertImage) });
64
- }
65
- };
66
-
67
- const uploadNonAltImage3 = (insertImage) => {
68
- if (isNotJSON(insertImage)) {
69
- setAttributes({ insertImage3: insertImage.url });
70
- } else {
71
- setAttributes({ insertImage3: JSON.stringify(insertImage) });
72
- }
73
- };
74
-
75
- const renderEditAltImage = (insertImage) => {
76
- if (isNotJSON(insertImage)) {
77
- return !insertImage ? (
78
- __('Select image', 'vk-blocks')
79
- ) : (
80
- <img
81
- className={'icon-image'}
82
- src={insertImage}
83
- alt={__('Upload image', 'vk-blocks')}
84
- />
85
- );
86
- }
87
- const IconImageParse = JSON.parse(fixBrokenUnicode(insertImage));
88
- return !insertImage ? (
89
- __('Select image', 'vk-blocks')
90
- ) : (
91
- <img
92
- className={'icon-image'}
93
- src={IconImageParse.sizes.full.url}
94
- alt={IconImageParse.alt}
95
- />
96
- );
97
- };
98
-
99
- return (
100
- <>
101
- <InspectorControls>
102
- <PanelBody title={__('PR Block1 Setting', 'vk-blocks')}>
103
- <BaseControl
104
- label={__('Link URL:', 'vk-blocks')}
105
- id={`vk_prBlocks_linkUrl1`}
106
- >
107
- <TextControl
108
- value={url1}
109
- onChange={(value) => setAttributes({ url1: value })}
110
- />
111
- <CheckboxControl
112
- label={__('Open link new tab.', 'vk-blocks')}
113
- checked={urlOpenType1}
114
- onChange={(checked) =>
115
- setAttributes({ urlOpenType1: checked })
116
- }
117
- />
118
- </BaseControl>
119
- <BaseControl
120
- label={
121
- __('Icon 1', 'vk-blocks') +
122
- ' ( ' +
123
- iconFamily +
124
- ' )'
125
- }
126
- id={`vk_prBlocks_Icon1`}
127
- >
128
- <FontAwesome attributeName={'icon1'} {...props} />
129
- <AdvancedColorPalette schema={'color1'} {...props} />
130
- <RadioControl
131
- label={__('Icon Background:', 'vk-blocks')}
132
- selected={bgType1}
133
- options={[
134
- {
135
- label: __('Solid color', 'vk-blocks'),
136
- value: '0',
137
- },
138
- {
139
- label: __('No background', 'vk-blocks'),
140
- value: '1',
141
- },
142
- ]}
143
- onChange={(value) =>
144
- setAttributes({ bgType1: value })
145
- }
146
- />
147
- </BaseControl>
148
- <BaseControl
149
- // label={ __('PR Image 1', 'vk-blocks') }
150
- help={__(
151
- 'When you have an image. Image is displayed with priority',
152
- 'vk-blocks'
153
- )}
154
- >
155
- <h4 className="components-base-control__title">
156
- {__('PR Image 1', 'vk-blocks')}
157
- </h4>
158
- <MediaUpload
159
- onSelect={uploadNonAltImage1}
160
- type="image"
161
- value={insertImage1}
162
- render={({ open }) => (
163
- <Button
164
- onClick={open}
165
- className={
166
- insertImage1
167
- ? 'image-button'
168
- : 'button button-large'
169
- }
170
- >
171
- {renderEditAltImage(insertImage1)}
172
- </Button>
173
- )}
174
- />
175
- </BaseControl>
176
- </PanelBody>
177
- <PanelBody title={__('PR Block2 Setting', 'vk-blocks')}>
178
- <BaseControl
179
- label={__('Link URL:', 'vk-blocks')}
180
- id={`vk_prBlocks_linkUrl2`}
181
- >
182
- <TextControl
183
- value={url2}
184
- onChange={(value) => setAttributes({ url2: value })}
185
- />
186
- <CheckboxControl
187
- label={__('Open link new tab.', 'vk-blocks')}
188
- checked={urlOpenType2}
189
- onChange={(checked) =>
190
- setAttributes({ urlOpenType2: checked })
191
- }
192
- />
193
- </BaseControl>
194
- <BaseControl
195
- label={
196
- __('Icon 2', 'vk-blocks') +
197
- ' ( ' +
198
- iconFamily +
199
- ' )'
200
- }
201
- id={`vk_prBlocks_Icon2`}
202
- >
203
- <FontAwesome attributeName={'icon2'} {...props} />
204
- <AdvancedColorPalette schema={'color2'} {...props} />
205
- <RadioControl
206
- label={__('Icon Background:', 'vk-blocks')}
207
- selected={bgType2}
208
- options={[
209
- {
210
- label: __('Solid color', 'vk-blocks'),
211
- value: '0',
212
- },
213
- {
214
- label: __('No background', 'vk-blocks'),
215
- value: '1',
216
- },
217
- ]}
218
- onChange={(value) =>
219
- setAttributes({ bgType2: value })
220
- }
221
- />
222
- </BaseControl>
223
- <BaseControl
224
- // label={ __('PR Image 2', 'vk-blocks') }
225
- help={__(
226
- 'When you have an image. Image is displayed with priority.',
227
- 'vk-blocks'
228
- )}
229
- >
230
- <h4 className="components-base-control__title">
231
- {__('PR Image 2', 'vk-blocks')}
232
- </h4>
233
- <MediaUpload
234
- onSelect={uploadNonAltImage2}
235
- type="image"
236
- value={insertImage2}
237
- render={({ open }) => (
238
- <Button
239
- onClick={open}
240
- className={
241
- insertImage2
242
- ? 'image-button'
243
- : 'button button-large'
244
- }
245
- >
246
- {renderEditAltImage(insertImage2)}
247
- </Button>
248
- )}
249
- />
250
- </BaseControl>
251
- </PanelBody>
252
- <PanelBody title={__('PR Block3 Setting', 'vk-blocks')}>
253
- <BaseControl
254
- label={__('Link URL:', 'vk-blocks')}
255
- id={`vk_prBlocks_linkUrl3`}
256
- >
257
- <TextControl
258
- value={url3}
259
- onChange={(value) => setAttributes({ url3: value })}
260
- />
261
- <CheckboxControl
262
- label={__('Open link new tab.', 'vk-blocks')}
263
- checked={urlOpenType3}
264
- onChange={(checked) =>
265
- setAttributes({ urlOpenType3: checked })
266
- }
267
- />
268
- </BaseControl>
269
- <BaseControl
270
- label={
271
- __('Icon 3', 'vk-blocks') +
272
- ' ( ' +
273
- iconFamily +
274
- ' )'
275
- }
276
- id={`vk_prBlocks_Icon3`}
277
- >
278
- <FontAwesome attributeName={'icon3'} {...props} />
279
- <AdvancedColorPalette schema={'color3'} {...props} />
280
- <RadioControl
281
- label={__('Icon Background:', 'vk-blocks')}
282
- selected={bgType3}
283
- options={[
284
- {
285
- label: __('Solid color', 'vk-blocks'),
286
- value: '0',
287
- },
288
- {
289
- label: __('No background', 'vk-blocks'),
290
- value: '1',
291
- },
292
- ]}
293
- onChange={(value) =>
294
- setAttributes({ bgType3: value })
295
- }
296
- />
297
- </BaseControl>
298
- <BaseControl
299
- // label={ __('PR Image 3', 'vk-blocks') }
300
- help={__(
301
- 'When you have an image. Image is displayed with priority.',
302
- 'vk-blocks'
303
- )}
304
- >
305
- <h4 className="components-base-control__title">
306
- {__('PR Image 3', 'vk-blocks')}
307
- </h4>
308
- <MediaUpload
309
- onSelect={uploadNonAltImage3}
310
- type="image"
311
- value={insertImage3}
312
- render={({ open }) => (
313
- <Button
314
- onClick={open}
315
- className={
316
- insertImage3
317
- ? 'image-button'
318
- : 'button button-large'
319
- }
320
- >
321
- {renderEditAltImage(insertImage3)}
322
- </Button>
323
- )}
324
- />
325
- </BaseControl>
326
- </PanelBody>
327
- </InspectorControls>
328
- <div {...blockProps}>
329
- <ComponentBlockEdit
330
- attributes={attributes}
331
- setAttributes={setAttributes}
332
- blockNum={1}
333
- />
334
- <ComponentBlockEdit
335
- attributes={attributes}
336
- setAttributes={setAttributes}
337
- blockNum={2}
338
- />
339
- <ComponentBlockEdit
340
- attributes={attributes}
341
- setAttributes={setAttributes}
342
- blockNum={3}
343
- />
344
- </div>
345
- </>
346
- );
347
- }
348
-
349
- export class ComponentBlockEdit extends Component {
350
- render() {
351
- const setAttributes = this.props.setAttributes;
352
- const {
353
- heading1,
354
- heading2,
355
- heading3,
356
- content1,
357
- content2,
358
- content3,
359
- icon1,
360
- icon2,
361
- icon3,
362
- color1,
363
- color2,
364
- color3,
365
- bgType1,
366
- bgType2,
367
- bgType3,
368
- insertImage1,
369
- insertImage2,
370
- insertImage3,
371
- } = this.props.attributes;
372
- const blockNum = this.props.blockNum;
373
- const blockNumArrIndex = this.props.blockNum - 1;
374
-
375
- const icon = [icon1, icon2, icon3];
376
- const color = [color1, color2, color3];
377
- const bgType = [bgType1, bgType2, bgType3];
378
- const insertImage = [insertImage1, insertImage2, insertImage3];
379
-
380
- let richTextH1Save = '';
381
- let richTextPSave = '';
382
-
383
- const renderSaveAltImage = (Image) => {
384
- if (isNotJSON(Image)) {
385
- return <img src={Image} alt="" />;
386
- }
387
- const IconImageParse = JSON.parse(fixBrokenUnicode(Image));
388
- return (
389
- <img
390
- src={IconImageParse.sizes.full.url}
391
- alt={IconImageParse.alt}
392
- />
393
- );
394
- };
395
-
396
- const renderItemImage = (Image) => {
397
- const bgImage = Image[blockNumArrIndex];
398
- if (isNotJSON(bgImage)) {
399
- return {
400
- backgroundImage: `url(${bgImage})`,
401
- backgroundRepeat: 'no-repeat 50% center',
402
- backgroundSize: 'cover',
403
- };
404
- }
405
- const bgImageParse = JSON.parse(fixBrokenUnicode(bgImage));
406
- return {
407
- backgroundImage: `url(${bgImageParse.sizes.full.url})`,
408
- backgroundRepeat: 'no-repeat 50% center',
409
- backgroundSize: 'cover',
410
- };
411
- };
412
-
413
- const drawElement = (() => {
414
- if (insertImage[blockNumArrIndex]) {
415
- return (
416
- <div
417
- className="vk_prBlocks_item_image"
418
- style={renderItemImage(insertImage)}
419
- >
420
- {renderSaveAltImage(insertImage[blockNumArrIndex])}
421
- </div>
422
- );
423
- }
424
-
425
- let iconOuterClass = '';
426
- let iconOuterInlineStyle = {};
427
- let iconColor = '';
428
- if (color[blockNumArrIndex] !== undefined) {
429
- // アイコン背景:ベタ塗り
430
- if (bgType[blockNumArrIndex] === '0') {
431
- //カスタムカラーの時
432
- if (isHexColor(color[blockNumArrIndex])) {
433
- iconOuterClass = `has-background `;
434
- iconOuterInlineStyle = {
435
- backgroundColor: `${color[blockNumArrIndex]}`,
436
- };
437
- //カラーパレットの時
438
- } else {
439
- iconOuterClass = `has-background has-${color[blockNumArrIndex]}-background-color`;
440
- }
441
- // アイコン背景:背景なし
442
- } else if (bgType[blockNumArrIndex] === '1') {
443
- //カスタムカラーの時
444
- if (isHexColor(color[blockNumArrIndex])) {
445
- iconOuterClass = `has-text-color`;
446
- iconOuterInlineStyle = {
447
- border: `1px solid ${color[blockNumArrIndex]}`,
448
- };
449
- iconColor = color[blockNumArrIndex];
450
- //カラーパレットの時
451
- } else {
452
- iconOuterClass = `has-text-color has-${color[blockNumArrIndex]}-color`;
453
- }
454
- }
455
- }
456
-
457
- let faIcon = icon[blockNumArrIndex];
458
- //過去バージョンをリカバリーした時にiconを正常に表示する
459
- if (faIcon && !faIcon.match(/<i/)) {
460
- faIcon = `<i class="${faIcon}"></i>`;
461
- }
462
- //add class and inline css
463
- const faIconFragment = faIcon.split(' ');
464
- if (iconColor !== '') {
465
- faIconFragment[0] =
466
- faIconFragment[0] + ` style="color:${iconColor}" `;
467
- } else {
468
- faIconFragment[0] = faIconFragment[0] + ` `;
469
- }
470
- faIconFragment[1] = faIconFragment[1] + ` vk_prBlocks_item_icon `;
471
- const faIconTag = faIconFragment.join('');
472
-
473
- return (
474
- <div
475
- className={`vk_prBlocks_item_icon_outer ${iconOuterClass}`}
476
- style={iconOuterInlineStyle}
477
- >
478
- {parse(faIconTag)}
479
- </div>
480
- );
481
- })();
482
-
483
- // アイコン背景:背景なし
484
- let iconOutlineClass = '';
485
- if (bgType[blockNumArrIndex] === '1') {
486
- iconOutlineClass = 'is-style-outline';
487
- }
488
-
489
- if (blockNum === 1) {
490
- richTextH1Save = (
491
- <RichText
492
- className="vk_prBlocks_item_title vk_prBlocks_item_title-1"
493
- tagName={'h3'}
494
- onChange={(value) => setAttributes({ heading1: value })}
495
- value={heading1}
496
- placeholder={__('Input Title', 'vk-blocks')}
497
- />
498
- );
499
- richTextPSave = (
500
- <RichText
501
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-1"
502
- tagName={'p'}
503
- onChange={(value) => setAttributes({ content1: value })}
504
- value={content1}
505
- placeholder={__('Input Content', 'vk-blocks')}
506
- />
507
- );
508
- } else if (blockNum === 2) {
509
- richTextH1Save = (
510
- <RichText
511
- className="vk_prBlocks_item_title vk_prBlocks_item_title-2"
512
- tagName={'h3'}
513
- onChange={(value) => setAttributes({ heading2: value })}
514
- value={heading2}
515
- placeholder={__('Input Title', 'vk-blocks')}
516
- />
517
- );
518
- richTextPSave = (
519
- <RichText
520
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-2"
521
- tagName={'p'}
522
- onChange={(value) => setAttributes({ content2: value })}
523
- value={content2}
524
- placeholder={__('Input Content', 'vk-blocks')}
525
- />
526
- );
527
- } else if (blockNum === 3) {
528
- richTextH1Save = (
529
- <RichText
530
- className="vk_prBlocks_item_title vk_prBlocks_item_title-3"
531
- tagName={'h3'}
532
- onChange={(value) => setAttributes({ heading3: value })}
533
- value={heading3}
534
- placeholder={__('Input Title', 'vk-blocks')}
535
- />
536
- );
537
- richTextPSave = (
538
- <RichText
539
- className="vk_prBlocks_item_summary vk_prBlocks_item_summary-3"
540
- tagName={'p'}
541
- onChange={(value) => setAttributes({ content3: value })}
542
- value={content3}
543
- placeholder={__('Input Content', 'vk-blocks')}
544
- />
545
- );
546
- }
547
-
548
- return (
549
- <div className={`vk_prBlocks_item col-sm-4 ${iconOutlineClass}`}>
550
- {drawElement}
551
- {richTextH1Save}
552
- {richTextPSave}
553
- </div>
554
- );
555
- }
556
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.15 7.88A3 3 0 013 2a3 3 0 11-.85 5.88zm.25-4.01V3.2h1.2v.67H2.4zm0 2.93V4.4h1.2v2.4H2.4zM11.15 7.88A3 3 0 0112 2a3 3 0 11-.85 5.88zm.25-4.01V3.2h1.2v.67h-1.2zm0 2.93V4.4h1.2v2.4h-1.2zM20.15 7.88A3 3 0 0121 2a3 3 0 11-.85 5.88zm.25-4.01V3.2h1.2v.67h-1.2zm0 2.93V4.4h1.2v2.4h-1.2z" fill="#000"/><path d="M24 10v1h-6v-1h6zM24 12v1h-6v-1h6zM24 14v1h-6v-1h6zM15 11v-1H9v1h6zM15 13v-1H9v1h6zM15 15v-1h-2.77c.2.3.3.65.27 1H15zM6 10v1H0v-1h6zM3.37 13l.14-.41c.08-.23.2-.43.37-.59H0v1h3.37zM10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/></svg>
 
src/blocks/pr-blocks/index.js DELETED
@@ -1,53 +0,0 @@
1
- /**
2
- * PR Block block type
3
- *
4
- */
5
- import { ReactComponent as Icon } from './icon.svg';
6
- import {
7
- iconName,
8
- iconUser,
9
- title,
10
- baseColor,
11
- url,
12
- } from '@vkblocks/utils/example-data';
13
- import metadata from './block.json';
14
- import edit from './edit';
15
- import save from './save';
16
- import { deprecated } from './deprecated/';
17
-
18
- const { name } = metadata;
19
-
20
- export { metadata, name };
21
-
22
- export const settings = {
23
- icon: <Icon />,
24
- example: {
25
- heading1: iconName,
26
- heading2: iconName,
27
- heading3: iconName,
28
- content1: title,
29
- content2: title,
30
- content3: title,
31
- url1: url,
32
- url2: url,
33
- url3: url,
34
- urlOpenType1: false,
35
- urlOpenType2: false,
36
- urlOpenType3: false,
37
- icon1: iconUser,
38
- icon2: iconUser,
39
- icon3: iconUser,
40
- color1: baseColor,
41
- color2: baseColor,
42
- color3: baseColor,
43
- bgType1: '0',
44
- bgType2: '0',
45
- bgType3: '0',
46
- insertImage1: '',
47
- insertImage2: '',
48
- insertImage3: '',
49
- },
50
- edit,
51
- save,
52
- deprecated,
53
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/index.php DELETED
@@ -1,33 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/pr-blocks` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register PR block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_pr_blocks() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/pr-blocks',
18
- VK_BLOCKS_DIR_URL . 'build/pr-blocks/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- register_block_type(
25
- __DIR__,
26
- array(
27
- 'style' => 'vk-blocks/pr-blocks',
28
- 'editor_style' => 'vk-blocks-build-editor-css',
29
- 'editor_script' => 'vk-blocks-build-js',
30
- )
31
- );
32
- }
33
- add_action( 'init', 'vk_blocks_register_block_pr_blocks', 99 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/save.js DELETED
@@ -1,216 +0,0 @@
1
- import { useBlockProps, RichText } from '@wordpress/block-editor';
2
- import { isNotJSON } from '@vkblocks/utils/is-not-json';
3
- import { Component } from '@wordpress/element';
4
- import { fixBrokenUnicode } from '@vkblocks/utils/depModules';
5
- import parse from 'html-react-parser';
6
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
7
-
8
- export default function save(props) {
9
- const { attributes } = props;
10
- const containerClass = `vk_prBlocks row`;
11
-
12
- const blockProps = useBlockProps.save({
13
- className: containerClass,
14
- });
15
-
16
- return (
17
- <div {...blockProps}>
18
- <ComponentBlockSave attributes={attributes} blockNum={1} />
19
- <ComponentBlockSave attributes={attributes} blockNum={2} />
20
- <ComponentBlockSave attributes={attributes} blockNum={3} />
21
- </div>
22
- );
23
- }
24
-
25
- export class ComponentBlockSave extends Component {
26
- render() {
27
- const {
28
- heading1,
29
- heading2,
30
- heading3,
31
- content1,
32
- content2,
33
- content3,
34
- url1,
35
- url2,
36
- url3,
37
- urlOpenType1,
38
- urlOpenType2,
39
- urlOpenType3,
40
- icon1,
41
- icon2,
42
- icon3,
43
- color1,
44
- color2,
45
- color3,
46
- bgType1,
47
- bgType2,
48
- bgType3,
49
- insertImage1,
50
- insertImage2,
51
- insertImage3,
52
- } = this.props.attributes;
53
- const blockNum = this.props.blockNum;
54
- const blockNumArrIndex = this.props.blockNum - 1;
55
-
56
- const heading = [heading1, heading2, heading3];
57
- const content = [content1, content2, content3];
58
- const url = [url1, url2, url3];
59
- const urlOpenType = [urlOpenType1, urlOpenType2, urlOpenType3];
60
- const icon = [icon1, icon2, icon3];
61
- const color = [color1, color2, color3];
62
- const bgType = [bgType1, bgType2, bgType3];
63
- const insertImage = [insertImage1, insertImage2, insertImage3];
64
-
65
- let richTextH1Save = '';
66
- let richTextPSave = '';
67
-
68
- const renderSaveAltImage = (Image) => {
69
- if (isNotJSON(Image)) {
70
- return <img src={Image} alt="" />;
71
- }
72
- const IconImageParse = JSON.parse(fixBrokenUnicode(Image));
73
- return (
74
- <img
75
- src={IconImageParse.sizes.full.url}
76
- alt={IconImageParse.alt}
77
- />
78
- );
79
- };
80
-
81
- const renderItemImage = (Image) => {
82
- const bgImage = Image[blockNumArrIndex];
83
- if (isNotJSON(bgImage)) {
84
- return {
85
- backgroundImage: `url(${bgImage})`,
86
- backgroundRepeat: 'no-repeat 50% center',
87
- backgroundSize: 'cover',
88
- };
89
- }
90
- const bgImageParse = JSON.parse(fixBrokenUnicode(bgImage));
91
- return {
92
- backgroundImage: `url(${bgImageParse.sizes.full.url})`,
93
- backgroundRepeat: 'no-repeat 50% center',
94
- backgroundSize: 'cover',
95
- };
96
- };
97
-
98
- const drawElement = (() => {
99
- if (insertImage[blockNumArrIndex]) {
100
- return (
101
- <div
102
- className="vk_prBlocks_item_image"
103
- style={renderItemImage(insertImage)}
104
- >
105
- {renderSaveAltImage(insertImage[blockNumArrIndex])}
106
- </div>
107
- );
108
- }
109
-
110
- let iconOuterClass = '';
111
- let iconOuterInlineStyle = {};
112
- let iconColor = '';
113
- if (color[blockNumArrIndex] !== undefined) {
114
- // アイコン背景:ベタ塗り
115
- if (bgType[blockNumArrIndex] === '0') {
116
- //カスタムカラーの時
117
- if (isHexColor(color[blockNumArrIndex])) {
118
- iconOuterClass = `has-background `;
119
- iconOuterInlineStyle = {
120
- backgroundColor: `${color[blockNumArrIndex]}`,
121
- };
122
- //カラーパレットの時
123
- } else {
124
- iconOuterClass = `has-background has-${color[blockNumArrIndex]}-background-color`;
125
- }
126
- // アイコン背景:背景なし
127
- } else if (bgType[blockNumArrIndex] === '1') {
128
- //カスタムカラーの時
129
- if (isHexColor(color[blockNumArrIndex])) {
130
- iconOuterClass = `has-text-color`;
131
- iconOuterInlineStyle = {
132
- border: `1px solid ${color[blockNumArrIndex]}`,
133
- };
134
- iconColor = color[blockNumArrIndex];
135
- //カラーパレットの時
136
- } else {
137
- iconOuterClass = `has-text-color has-${color[blockNumArrIndex]}-color`;
138
- }
139
- }
140
- }
141
-
142
- let faIcon = icon[blockNumArrIndex];
143
- //過去バージョンをリカバリーした時にiconを正常に表示する
144
- if (faIcon && !faIcon.match(/<i/)) {
145
- faIcon = `<i class="${faIcon}"></i>`;
146
- }
147
- //add class and inline css
148
- const faIconFragment = faIcon.split(' ');
149
- if (iconColor !== '') {
150
- faIconFragment[0] =
151
- faIconFragment[0] + ` style="color:${iconColor}" `;
152
- } else {
153
- faIconFragment[0] = faIconFragment[0] + ` `;
154
- }
155
- faIconFragment[1] = faIconFragment[1] + ` vk_prBlocks_item_icon `;
156
- const faIconTag = faIconFragment.join('');
157
-
158
- return (
159
- <div
160
- className={`vk_prBlocks_item_icon_outer ${iconOuterClass}`}
161
- style={iconOuterInlineStyle}
162
- >
163
- {parse(faIconTag)}
164
- </div>
165
- );
166
- })();
167
-
168
- // アイコン背景:背景なし
169
- let iconOutlineClass = '';
170
- if (bgType[blockNumArrIndex] === '1') {
171
- iconOutlineClass = 'is-style-outline';
172
- }
173
-
174
- richTextH1Save = (
175
- <RichText.Content
176
- className={`vk_prBlocks_item_title vk_prBlocks_item_title-${blockNum}`}
177
- tagName={'h3'}
178
- value={heading[blockNumArrIndex]}
179
- />
180
- );
181
- richTextPSave = (
182
- <RichText.Content
183
- className={`vk_prBlocks_item_summary vk_prBlocks_item_summary-${blockNum}`}
184
- tagName={'p'}
185
- value={content[blockNumArrIndex]}
186
- />
187
- );
188
- if (url[blockNumArrIndex]) {
189
- return (
190
- <div
191
- className={`vk_prBlocks_item col-sm-4 ${iconOutlineClass}`}
192
- >
193
- <a
194
- href={url[blockNumArrIndex]}
195
- className="vk_prBlocks_item_link"
196
- target={
197
- urlOpenType[blockNumArrIndex] ? '_blank' : '_self'
198
- }
199
- rel="noopener noreferrer"
200
- >
201
- {drawElement}
202
- {richTextH1Save}
203
- {richTextPSave}
204
- </a>
205
- </div>
206
- );
207
- }
208
- return (
209
- <div className={`vk_prBlocks_item col-sm-4 ${iconOutlineClass}`}>
210
- {drawElement}
211
- {richTextH1Save}
212
- {richTextPSave}
213
- </div>
214
- );
215
- }
216
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-blocks/style.scss DELETED
@@ -1,100 +0,0 @@
1
- /*-------------------------------------------*/
2
- /* .vk_prBlocks
3
- /*-------------------------------------------*/
4
- // 編集画面でcssの指定が軽くて負けるので.vk_prBlocks .vk_prBlocks_item を先に記述
5
- .vk_prBlocks{
6
- .vk_prBlocks_item {
7
- a{text-decoration: none;}
8
- @media screen and (max-width: 991.98px) {
9
- margin-bottom: 1.5em;
10
- }
11
- //ベタ塗りの時
12
- &:not(.is-style-outline) {
13
- .vk_prBlocks_item {
14
- &_icon {
15
- color: #fff;
16
- }
17
- //デフォルト状態
18
- &_icon_outer:not(.has-background) {
19
- background-color: #0693e3;
20
- }
21
- }
22
- }
23
- //背景なしの時
24
- &.is-style-outline {
25
- //カラー選択
26
- .vk_prBlocks_item_icon_outer {
27
- background-color: transparent;
28
- border: 1px solid currentColor;
29
- //デフォルト状態
30
- &:not(.has-text-color) {
31
- border: 1px solid #0693e3;
32
- .vk_prBlocks_item_icon {
33
- color: #0693e3;
34
- }
35
- }
36
- }
37
- }
38
- .vk_prBlocks_item {
39
- &_link {
40
- color: #333;
41
- &:hover {
42
- color: #333;
43
- text-decoration: none;
44
- }
45
- }
46
- &_icon_outer {
47
- display: block;
48
- position: relative;
49
- margin: 0 auto;
50
- width: 80px;
51
- height: 80px;
52
- border-radius: 50%;
53
- }
54
- &_icon {
55
- position: absolute;
56
- top: 50%;
57
- left: 50%;
58
- transform: translateY(-50%) translateX(-50%);
59
- font-size: 36px;
60
- }
61
- &_title {
62
- background-color: transparent;
63
- margin-top: 0.9em;
64
- margin-bottom: 0.6em;
65
- text-align: center;
66
- font-size: 21px;
67
- line-height: 1.4em;
68
- border: none;
69
- border-radius:unset;
70
- padding: 0;
71
- outline: unset;
72
- outline-offset: unset;
73
- box-shadow: unset;
74
- color: inherit;
75
- display: block; /* display:block をつけておかないと左右線デザインでflex指定されて左寄りになる */
76
- &::before {
77
- content: none;
78
- }
79
- &::after {
80
- border: none;
81
- }
82
- }
83
- &_image {
84
- position: relative;
85
- display: block;
86
- width: 120px;
87
- height: 120px;
88
- margin: 0 auto;
89
- overflow: hidden;
90
- border-radius: 50%;
91
- text-indent: -9999px;
92
- }
93
- &_summary {
94
- margin-bottom: 0.5em;
95
- text-align: center;
96
- line-height: 1.8em;
97
- }
98
- }
99
- }
100
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/block.json DELETED
@@ -1,74 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/pr-content",
4
- "title": "PR Content",
5
- "description": "This is PR content where you can place images, headlines, text, and buttons.",
6
- "category": "vk-blocks-cat",
7
- "attributes": {
8
- "title": {
9
- "source": "html",
10
- "selector": ".vk_prContent_colTxt_title"
11
- },
12
- "titleColor": {
13
- "type": "string",
14
- "default": ""
15
- },
16
- "content": {
17
- "source": "html",
18
- "selector": ".vk_prContent_colTxt_text"
19
- },
20
- "contentColor": {
21
- "type": "string",
22
- "default": ""
23
- },
24
- "url": {
25
- "type": "string",
26
- "default": ""
27
- },
28
- "buttonType": {
29
- "type": "string",
30
- "default": "0"
31
- },
32
- "buttonColor": {
33
- "type": "string",
34
- "default": "primary"
35
- },
36
- "buttonColorCustom": {
37
- "type": "string",
38
- "default": ""
39
- },
40
- "buttonText": {
41
- "source": "html",
42
- "selector": ".vk_button_link_txt",
43
- "default": ""
44
- },
45
- "buttonTarget": {
46
- "type": "Boolean",
47
- "default": false
48
- },
49
- "Image": {
50
- "type": "string",
51
- "default": "{}"
52
- },
53
- "ImageBorderColor": {
54
- "type": "string",
55
- "default": ""
56
- },
57
- "layout": {
58
- "type": "string",
59
- "default": "left"
60
- },
61
- "fontAwesomeIconBefore": {
62
- "type": "string",
63
- "default": "<i class='fas fa-user'></i>"
64
- },
65
- "fontAwesomeIconAfter": {
66
- "type": "string",
67
- "default": "<i class='fas fa-user'></i>"
68
- }
69
- },
70
- "textdomain": "vk-blocks",
71
- "supports": {
72
- "className": true
73
- }
74
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.0.0/save.js DELETED
@@ -1,229 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { Button } from '@wordpress/components';
3
- import { Component } from '@wordpress/element';
4
- import { MediaUpload, RichText } from '@wordpress/block-editor';
5
-
6
- import classNames from 'classnames';
7
- import { Fontawesome } from '../component-fontawesome-deprecated';
8
-
9
- class PRContent extends Component {
10
- render() {
11
- const attributes = this.props.attributes;
12
- const {
13
- title,
14
- titleColor,
15
- content,
16
- contentColor,
17
- url,
18
- buttonType,
19
- buttonColor,
20
- buttonColorCustom,
21
- buttonText,
22
- buttonTarget,
23
- Image,
24
- ImageBorderColor,
25
- layout,
26
- } = attributes;
27
-
28
- const setAttributes = this.props.setAttributes;
29
- const className = this.props.className;
30
- const for_ = this.props.for_;
31
- let containerClass = 'vk_prContent';
32
- let btnClass = 'vk_button';
33
- let aClass = 'btn btn-block vk_button_link vk_prContent_colTxt_btn';
34
- let aStyle = {};
35
- let imageBorderProperty = '';
36
-
37
- if (layout === 'right') {
38
- containerClass = classNames(
39
- className,
40
- containerClass,
41
- 'vk_prContent-layout-imageRight'
42
- );
43
- } else {
44
- containerClass = classNames(
45
- className,
46
- containerClass,
47
- 'vk_prContent-layout-imageLeft'
48
- );
49
- }
50
-
51
- if (buttonColorCustom) {
52
- btnClass = `${btnClass} vk_button-color-custom`;
53
- aClass = `${aClass} btn-primary`;
54
-
55
- // 塗り
56
- if (buttonType === '0') {
57
- aStyle = {
58
- backgroundColor: buttonColorCustom,
59
- border: `1px solid ${buttonColorCustom}`,
60
- };
61
- // 塗りなし
62
- } else if (buttonType === '1') {
63
- aStyle = {
64
- backgroundColor: 'transparent',
65
- border: '1px solid ' + buttonColorCustom,
66
- color: buttonColorCustom,
67
- };
68
- }
69
-
70
- // カスタムカラーじゃない場合
71
- } else if (!buttonColorCustom) {
72
- // 塗り
73
- if (buttonType === '0') {
74
- aClass = `${aClass} btn-${buttonColor}`;
75
- aStyle = null;
76
- // 塗りなし
77
- } else if (buttonType === '1') {
78
- aClass = `${aClass} btn-outline-${buttonColor}`;
79
- aStyle = null;
80
- }
81
- }
82
-
83
- //borderColorが指定されなかった場合はボーダーを非表示に
84
- if (ImageBorderColor === null || ImageBorderColor === undefined) {
85
- imageBorderProperty = 'none';
86
- } else {
87
- imageBorderProperty = `1px solid ${ImageBorderColor}`;
88
- }
89
-
90
- return (
91
- <div className={containerClass}>
92
- <div className="col-sm-6 vk_prContent_colImg">
93
- {for_ === 'edit' ? (
94
- <MediaUpload
95
- onSelect={(value) =>
96
- setAttributes({ Image: value.sizes.full.url })
97
- }
98
- type=" image"
99
- value={Image}
100
- render={({ open }) => (
101
- <Button
102
- onClick={open}
103
- className={
104
- Image
105
- ? 'image-button'
106
- : 'button button-large'
107
- }
108
- >
109
- {!Image ? (
110
- __('Select image', 'vk-blocks')
111
- ) : (
112
- <img
113
- className={
114
- 'vk_prContent_colImg_image'
115
- }
116
- src={Image}
117
- alt={__(
118
- 'Upload image',
119
- 'vk-blocks'
120
- )}
121
- style={{
122
- border: imageBorderProperty,
123
- }}
124
- />
125
- )}
126
- </Button>
127
- )}
128
- />
129
- ) : !Image ? (
130
- __('Select image', 'vk-blocks')
131
- ) : (
132
- <img
133
- className={'vk_prContent_colImg_image'}
134
- src={Image}
135
- alt={__('Upload image', 'vk-blocks')}
136
- style={{ border: imageBorderProperty }}
137
- />
138
- )}
139
- </div>
140
- <div className="col-sm-6 vk_prContent_colTxt">
141
- {(() => {
142
- if (for_ === 'edit') {
143
- return (
144
- <>
145
- <RichText
146
- tagName="h3"
147
- className={'vk_prContent_colTxt_title'}
148
- onChange={(value) =>
149
- setAttributes({ title: value })
150
- }
151
- value={title}
152
- placeholder={__(
153
- 'Input title.',
154
- 'vk-blocks'
155
- )}
156
- style={{ color: titleColor }}
157
- />
158
- <RichText
159
- tagName="p"
160
- className={'vk_prContent_colTxt_text'}
161
- onChange={(value) =>
162
- setAttributes({ content: value })
163
- }
164
- value={content}
165
- placeholder={__(
166
- 'Input content.',
167
- 'vk-blocks'
168
- )}
169
- style={{ color: contentColor }}
170
- />
171
- </>
172
- );
173
- }
174
- return (
175
- <>
176
- <RichText.Content
177
- tagName="h3"
178
- value={title}
179
- className={'vk_prContent_colTxt_title'}
180
- style={{ color: titleColor }}
181
- />
182
- <RichText.Content
183
- tagName="p"
184
- className={'vk_prContent_colTxt_text'}
185
- value={content}
186
- style={{ color: contentColor }}
187
- />
188
- </>
189
- );
190
- })()}
191
- {
192
- //ボタンテキストが入力されるとボタンを表示。
193
- (() => {
194
- if (buttonText !== '' && buttonText !== undefined) {
195
- return (
196
- <div className={btnClass}>
197
- <a
198
- href={url}
199
- className={aClass}
200
- target={
201
- buttonTarget ? '_blank' : null
202
- }
203
- style={aStyle}
204
- rel="noopener noreferrer"
205
- >
206
- <Fontawesome
207
- attributes={attributes}
208
- />
209
- </a>
210
- </div>
211
- );
212
- }
213
- })()
214
- }
215
- </div>
216
- </div>
217
- );
218
- }
219
- }
220
-
221
- export default function save({ attributes, className }) {
222
- return (
223
- <PRContent
224
- attributes={attributes}
225
- className={className}
226
- for_={'save'}
227
- />
228
- );
229
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.0.1/save.js DELETED
@@ -1,205 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { Button } from '@wordpress/components';
3
- import { Component } from '@wordpress/element';
4
- import { MediaUpload, RichText } from '@wordpress/block-editor';
5
- import { Fontawesome } from '../component-fontawesome-deprecated';
6
-
7
- export class PRContent extends Component {
8
- render() {
9
- const attributes = this.props.attributes;
10
- const {
11
- title,
12
- titleColor,
13
- content,
14
- contentColor,
15
- url,
16
- buttonType,
17
- buttonColor,
18
- buttonColorCustom,
19
- buttonText,
20
- buttonTarget,
21
- Image,
22
- ImageBorderColor,
23
- layout,
24
- fontAwesomeIconBefore,
25
- fontAwesomeIconAfter,
26
- } = attributes;
27
- const setAttributes = this.props.setAttributes;
28
- const for_ = this.props.for_;
29
- let containerClass = 'vk_prContent';
30
- let btnClass = 'vk_button';
31
- let aClass = 'btn btn-block vk_button_link vk_prContent_colTxt_btn';
32
- let aStyle = {};
33
-
34
- if (layout === 'right') {
35
- containerClass = `${containerClass} vk_prContent-layout-imageRight`;
36
- } else {
37
- containerClass = `${containerClass} vk_prContent-layout-imageLeft`;
38
- }
39
-
40
- if (buttonColorCustom) {
41
- btnClass = `${btnClass} vk_button-color-custom`;
42
- aClass = `${aClass} btn-primary`;
43
-
44
- // 塗り
45
- if (buttonType === '0') {
46
- aStyle = {
47
- backgroundColor: buttonColorCustom,
48
- border: `1px solid ${buttonColorCustom}`,
49
- };
50
- // 塗りなし
51
- } else if (buttonType === '1') {
52
- aStyle = {
53
- backgroundColor: 'transparent',
54
- border: '1px solid ' + buttonColorCustom,
55
- color: buttonColorCustom,
56
- };
57
- }
58
-
59
- // カスタムカラーじゃない場合
60
- } else if (!buttonColorCustom) {
61
- // 塗り
62
- if (buttonType === '0') {
63
- aClass = `${aClass} btn-${buttonColor}`;
64
- aStyle = null;
65
- // 塗りなし
66
- } else if (buttonType === '1') {
67
- aClass = `${aClass} btn-outline-${buttonColor}`;
68
- aStyle = null;
69
- }
70
- }
71
-
72
- return (
73
- <div className={containerClass}>
74
- <div className="col-sm-6 vk_prContent_colImg">
75
- {for_ === 'edit' ? (
76
- <MediaUpload
77
- onSelect={(value) =>
78
- setAttributes({ Image: value.sizes.full.url })
79
- }
80
- type=" image"
81
- value={Image}
82
- render={({ open }) => (
83
- <Button
84
- onClick={open}
85
- className={
86
- Image
87
- ? 'image-button'
88
- : 'button button-large'
89
- }
90
- >
91
- {!Image ? (
92
- __('Select image', 'vk-blocks')
93
- ) : (
94
- <img
95
- className={
96
- 'vk_prContent_colImg_image'
97
- }
98
- src={Image}
99
- alt={__(
100
- 'Upload image',
101
- 'vk-blocks'
102
- )}
103
- style={{
104
- border: `1px solid ${ImageBorderColor}`,
105
- }}
106
- />
107
- )}
108
- </Button>
109
- )}
110
- />
111
- ) : !Image ? (
112
- __('Select image', 'vk-blocks')
113
- ) : (
114
- <img
115
- className={'vk_prContent_colImg_image'}
116
- src={Image}
117
- alt={__('Upload image', 'vk-blocks')}
118
- style={{ border: `1px solid ${ImageBorderColor}` }}
119
- />
120
- )}
121
- </div>
122
- <div className="col-sm-6 vk_prContent_colTxt">
123
- {(() => {
124
- if (for_ === 'edit') {
125
- return (
126
- <>
127
- <RichText
128
- tagName="h3"
129
- className={'vk_prContent_colTxt_title'}
130
- onChange={(value) =>
131
- setAttributes({ title: value })
132
- }
133
- value={title}
134
- placeholder={__(
135
- 'Input title.',
136
- 'vk-blocks'
137
- )}
138
- style={{ color: titleColor }}
139
- />
140
- <RichText
141
- tagName="p"
142
- className={'vk_prContent_colTxt_text'}
143
- onChange={(value) =>
144
- setAttributes({ content: value })
145
- }
146
- value={content}
147
- placeholder={__(
148
- 'Input content.',
149
- 'vk-blocks'
150
- )}
151
- style={{ color: contentColor }}
152
- />
153
- </>
154
- );
155
- }
156
- return (
157
- <>
158
- <RichText.Content
159
- tagName="h3"
160
- value={title}
161
- className={'vk_prContent_colTxt_title'}
162
- style={{ color: titleColor }}
163
- />
164
- <RichText.Content
165
- tagName="p"
166
- className={'vk_prContent_colTxt_text'}
167
- value={content}
168
- style={{ color: contentColor }}
169
- />
170
- </>
171
- );
172
- })()}
173
- {
174
- //ボタンテキストが入力されるとボタンを表示。
175
- (() => {
176
- if (buttonText !== '' && buttonText !== undefined) {
177
- return (
178
- <div className={btnClass}>
179
- <a
180
- href={url}
181
- className={aClass}
182
- target={
183
- buttonTarget ? '_blank' : null
184
- }
185
- style={aStyle}
186
- rel="noopener noreferrer"
187
- >
188
- <Fontawesome
189
- attributes={attributes}
190
- />
191
- </a>
192
- </div>
193
- );
194
- }
195
- })()
196
- }
197
- </div>
198
- </div>
199
- );
200
- }
201
- }
202
-
203
- export default function save({ attributes, className }) {
204
- return <PRContent attributes={attributes} for_={'save'} />;
205
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.0.2/save.js DELETED
@@ -1,328 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { Button } from '@wordpress/components';
3
- import { Component } from '@wordpress/element';
4
- import { MediaUpload, RichText } from '@wordpress/block-editor';
5
-
6
- import classNames from 'classnames';
7
- import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode';
8
-
9
- export class Fontawesome extends Component {
10
- render() {
11
- const {
12
- buttonText,
13
- fontAwesomeIconBefore,
14
- fontAwesomeIconAfter,
15
- } = this.props.attributes;
16
-
17
- let iconBefore = '';
18
- let iconAfter = '';
19
-
20
- if (fontAwesomeIconBefore) {
21
- iconBefore = (
22
- <i
23
- className={`${fontAwesomeIconBefore} vk_button_link_before`}
24
- ></i>
25
- );
26
- }
27
- if (fontAwesomeIconAfter) {
28
- iconAfter = (
29
- <i
30
- className={`${fontAwesomeIconAfter} vk_button_link_after`}
31
- ></i>
32
- );
33
- }
34
-
35
- return (
36
- <>
37
- {iconBefore}
38
- <span className="vk_button_link_txt">{buttonText}</span>
39
- {iconAfter}
40
- </>
41
- );
42
- }
43
- }
44
-
45
- export class PRContent extends Component {
46
- render() {
47
- const attributes = this.props.attributes;
48
- const {
49
- title,
50
- titleColor,
51
- content,
52
- contentColor,
53
- url,
54
- buttonType,
55
- buttonColor,
56
- buttonColorCustom,
57
- buttonText,
58
- buttonTarget,
59
- Image,
60
- ImageBorderColor,
61
- layout,
62
- fontAwesomeIconBefore,
63
- fontAwesomeIconAfter,
64
- } = attributes;
65
-
66
- const setAttributes = this.props.setAttributes;
67
- const className = this.props.className;
68
- const for_ = this.props.for_;
69
- let containerClass = 'vk_prContent';
70
- let btnClass = 'vk_button';
71
- let aClass = 'btn btn-block vk_button_link vk_prContent_colTxt_btn';
72
- let aStyle = {};
73
- let imageBorderProperty = 'none';
74
-
75
- if (layout === 'right') {
76
- containerClass = classNames(
77
- className,
78
- containerClass,
79
- 'vk_prContent-layout-imageRight'
80
- );
81
- } else {
82
- containerClass = classNames(
83
- className,
84
- containerClass,
85
- 'vk_prContent-layout-imageLeft'
86
- );
87
- }
88
-
89
- if (buttonColorCustom) {
90
- btnClass = `${btnClass} vk_button-color-custom`;
91
- aClass = `${aClass} btn-primary`;
92
-
93
- // 塗り
94
- if (buttonType === '0') {
95
- aStyle = {
96
- backgroundColor: buttonColorCustom,
97
- border: `1px solid ${buttonColorCustom}`,
98
- };
99
- // 塗りなし
100
- } else if (buttonType === '1') {
101
- aStyle = {
102
- backgroundColor: 'transparent',
103
- border: '1px solid ' + buttonColorCustom,
104
- color: buttonColorCustom,
105
- };
106
- }
107
-
108
- // カスタムカラーじゃない場合
109
- } else if (!buttonColorCustom) {
110
- // 塗り
111
- if (buttonType === '0') {
112
- aClass = `${aClass} btn-${buttonColor}`;
113
- aStyle = null;
114
- // 塗りなし
115
- } else if (buttonType === '1') {
116
- aClass = `${aClass} btn-outline-${buttonColor}`;
117
- aStyle = null;
118
- }
119
- }
120
-
121
- //borderColorが指定されなかった場合はボーダーを非表示に
122
- if (ImageBorderColor) {
123
- imageBorderProperty = `1px solid ${ImageBorderColor}`;
124
- } else {
125
- imageBorderProperty = `none`;
126
- }
127
-
128
- const saveImage = (value) => {
129
- if (value) {
130
- setAttributes({ Image: JSON.stringify(value) });
131
- }
132
- };
133
-
134
- const renderImage = (for_) => {
135
- if (for_ === 'edit') {
136
- if (Image && Image.indexOf('{') === -1) {
137
- return (
138
- <MediaUpload
139
- onSelect={(value) =>
140
- setAttributes({ Image: value.sizes.full.url })
141
- }
142
- type=" image"
143
- value={Image}
144
- render={({ open }) => (
145
- <Button
146
- onClick={open}
147
- className={
148
- Image
149
- ? 'image-button'
150
- : 'button button-large'
151
- }
152
- >
153
- {!Image ? (
154
- __('Select image', 'vk-blocks')
155
- ) : (
156
- <img
157
- className={
158
- 'vk_prContent_colImg_image'
159
- }
160
- src={Image}
161
- alt={__(
162
- 'Upload image',
163
- 'vk-blocks'
164
- )}
165
- style={{
166
- border: imageBorderProperty,
167
- }}
168
- />
169
- )}
170
- </Button>
171
- )}
172
- />
173
- );
174
- }
175
- const ImageParse = JSON.parse(fixBrokenUnicode(Image));
176
- return (
177
- <MediaUpload
178
- onSelect={saveImage}
179
- type=" image"
180
- value={ImageParse}
181
- render={({ open }) => (
182
- <Button
183
- onClick={open}
184
- className={
185
- ImageParse
186
- ? 'image-button'
187
- : 'button button-large'
188
- }
189
- >
190
- {Image === null ||
191
- typeof ImageParse.sizes === 'undefined' ? (
192
- __('Select image', 'vk-blocks')
193
- ) : (
194
- <img
195
- className={'vk_prContent_colImg_image'}
196
- src={ImageParse.sizes.full.url}
197
- alt={ImageParse.alt}
198
- style={{ border: imageBorderProperty }}
199
- />
200
- )}
201
- </Button>
202
- )}
203
- />
204
- );
205
- } else if (for_ === 'save') {
206
- if (!Image) {
207
- return __('Select image', 'vk-blocks');
208
- }
209
- if (Image && Image.indexOf('{') === -1) {
210
- return (
211
- <img
212
- className={'vk_prContent_colImg_image'}
213
- src={Image}
214
- alt={__('Upload image', 'vk-blocks')}
215
- style={{ border: imageBorderProperty }}
216
- />
217
- );
218
- }
219
- const ImageParse = JSON.parse(fixBrokenUnicode(Image));
220
- if (ImageParse && typeof ImageParse.sizes !== 'undefined') {
221
- return (
222
- <img
223
- className={'vk_prContent_colImg_image'}
224
- src={ImageParse.sizes.full.url}
225
- alt={ImageParse.alt}
226
- style={{ border: imageBorderProperty }}
227
- />
228
- );
229
- }
230
- return '';
231
- }
232
- };
233
-
234
- return (
235
- <div className={containerClass}>
236
- <div className="col-sm-6 vk_prContent_colImg">
237
- {renderImage(for_)}
238
- </div>
239
- <div className="col-sm-6 vk_prContent_colTxt">
240
- {(() => {
241
- if (for_ === 'edit') {
242
- return (
243
- <>
244
- <RichText
245
- tagName="h3"
246
- className={'vk_prContent_colTxt_title'}
247
- onChange={(value) =>
248
- setAttributes({ title: value })
249
- }
250
- value={title}
251
- placeholder={__(
252
- 'Input title.',
253
- 'vk-blocks'
254
- )}
255
- style={{ color: titleColor }}
256
- />
257
- <RichText
258
- tagName="p"
259
- className={'vk_prContent_colTxt_text'}
260
- onChange={(value) =>
261
- setAttributes({ content: value })
262
- }
263
- value={content}
264
- placeholder={__(
265
- 'Input content.',
266
- 'vk-blocks'
267
- )}
268
- style={{ color: contentColor }}
269
- />
270
- </>
271
- );
272
- }
273
- return (
274
- <>
275
- <RichText.Content
276
- tagName="h3"
277
- value={title}
278
- className={'vk_prContent_colTxt_title'}
279
- style={{ color: titleColor }}
280
- />
281
- <RichText.Content
282
- tagName="p"
283
- className={'vk_prContent_colTxt_text'}
284
- value={content}
285
- style={{ color: contentColor }}
286
- />
287
- </>
288
- );
289
- })()}
290
- {
291
- //ボタンテキストが入力されるとボタンを表示。
292
- (() => {
293
- if (buttonText !== '' && buttonText !== undefined) {
294
- return (
295
- <div className={btnClass}>
296
- <a
297
- href={url}
298
- className={aClass}
299
- target={
300
- buttonTarget ? '_blank' : null
301
- }
302
- style={aStyle}
303
- rel="noopener noreferrer"
304
- >
305
- <Fontawesome
306
- attributes={attributes}
307
- />
308
- </a>
309
- </div>
310
- );
311
- }
312
- })()
313
- }
314
- </div>
315
- </div>
316
- );
317
- }
318
- }
319
-
320
- export default function save({ attributes, className }) {
321
- return (
322
- <PRContent
323
- attributes={attributes}
324
- className={className}
325
- for_={'save'}
326
- />
327
- );
328
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.0.3/component-fontawesome.js DELETED
@@ -1,34 +0,0 @@
1
- import parse from 'html-react-parser';
2
- import { Component } from '@wordpress/element';
3
-
4
- export class Fontawesome extends Component {
5
- render() {
6
- let {
7
- buttonText,
8
- fontAwesomeIconAfter,
9
- } = this.props.attributes;
10
-
11
- let iconAfter = '';
12
- let faIconFragmentAfter;
13
-
14
- //過去バージョンをリカバリーした時にiconを正常に表示する
15
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
16
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
17
- }
18
-
19
- if (fontAwesomeIconAfter) {
20
- //add class and inline css
21
- faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
22
- faIconFragmentAfter[1] =
23
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
24
- iconAfter = faIconFragmentAfter.join('');
25
- }
26
-
27
- return (
28
- <>
29
- <span className="vk_button_link_txt">{buttonText}</span>
30
- {parse(iconAfter)}
31
- </>
32
- );
33
- }
34
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.0.3/component.js DELETED
@@ -1,287 +0,0 @@
1
- import classNames from 'classnames';
2
- import { __ } from '@wordpress/i18n';
3
- import { Button } from '@wordpress/components';
4
- import { Component } from '@wordpress/element';
5
- import { MediaUpload, RichText } from '@wordpress/block-editor';
6
- import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode';
7
- import { Fontawesome } from './component-fontawesome';
8
-
9
- export class PRcontent extends Component {
10
- render() {
11
- const attributes = this.props.attributes;
12
- const {
13
- title,
14
- titleColor,
15
- content,
16
- contentColor,
17
- url,
18
- buttonType,
19
- buttonColor,
20
- buttonColorCustom,
21
- buttonText,
22
- buttonTarget,
23
- Image,
24
- ImageBorderColor,
25
- layout,
26
- } = attributes;
27
-
28
- const setAttributes = this.props.setAttributes;
29
- const className = this.props.className;
30
- const for_ = this.props.for_;
31
- let containerClass = 'vk_prContent';
32
- let btnClass = 'vk_button';
33
- let aClass = 'btn btn-block vk_button_link vk_prContent_colTxt_btn';
34
- let aStyle = {};
35
- let imageBorderProperty = 'none';
36
-
37
- let titleStyle = {}
38
- if(titleColor && titleColor !== "") {
39
- titleStyle = {color:titleColor}
40
- }
41
- let contentStyle = {}
42
- if(contentColor && contentColor !== "") {
43
- contentStyle = {color:contentColor}
44
- }
45
-
46
- if (layout === 'right') {
47
- containerClass = classNames(
48
- className,
49
- containerClass,
50
- 'vk_prContent-layout-imageRight'
51
- );
52
- } else {
53
- containerClass = classNames(
54
- className,
55
- containerClass,
56
- 'vk_prContent-layout-imageLeft'
57
- );
58
- }
59
-
60
- if (buttonColorCustom) {
61
- btnClass = `${btnClass} vk_button-color-custom`;
62
- aClass = `${aClass} btn-primary`;
63
-
64
- // 塗り
65
- if (buttonType === '0') {
66
- aStyle = {
67
- backgroundColor: buttonColorCustom,
68
- border: `1px solid ${buttonColorCustom}`,
69
- };
70
- // 塗りなし
71
- } else if (buttonType === '1') {
72
- aStyle = {
73
- backgroundColor: 'transparent',
74
- border: '1px solid ' + buttonColorCustom,
75
- color: buttonColorCustom,
76
- };
77
- }
78
-
79
- // カスタムカラーじゃない場合
80
- } else if (!buttonColorCustom) {
81
- // 塗り
82
- if (buttonType === '0') {
83
- aClass = `${aClass} btn-${buttonColor}`;
84
- aStyle = null;
85
- // 塗りなし
86
- } else if (buttonType === '1') {
87
- aClass = `${aClass} btn-outline-${buttonColor}`;
88
- aStyle = null;
89
- }
90
- }
91
-
92
- //borderColorが指定されなかった場合はボーダーを非表示に
93
- if (ImageBorderColor) {
94
- imageBorderProperty = `1px solid ${ImageBorderColor}`;
95
- } else {
96
- imageBorderProperty = `none`;
97
- }
98
-
99
- const saveImage = (value) => {
100
- if (value) {
101
- setAttributes({ Image: JSON.stringify(value) });
102
- }
103
- };
104
-
105
- const renderImage = (for_) => {
106
- if (for_ === 'edit') {
107
- if (Image && Image.indexOf('{') === -1) {
108
- return (
109
- <MediaUpload
110
- onSelect={(value) =>
111
- setAttributes({ Image: value.sizes.full.url })
112
- }
113
- type=" image"
114
- value={Image}
115
- render={({ open }) => (
116
- <Button
117
- onClick={open}
118
- className={
119
- Image
120
- ? 'image-button'
121
- : 'button button-large'
122
- }
123
- >
124
- {!Image ? (
125
- __('Select image', 'vk-blocks')
126
- ) : (
127
- <img
128
- className={
129
- 'vk_prContent_colImg_image'
130
- }
131
- src={Image}
132
- alt={__(
133
- 'Upload image',
134
- 'vk-blocks'
135
- )}
136
- style={{
137
- border: imageBorderProperty,
138
- }}
139
- />
140
- )}
141
- </Button>
142
- )}
143
- />
144
- );
145
- }
146
- const ImageParse = JSON.parse(fixBrokenUnicode(Image));
147
- return (
148
- <MediaUpload
149
- onSelect={saveImage}
150
- type=" image"
151
- value={ImageParse}
152
- render={({ open }) => (
153
- <Button
154
- onClick={open}
155
- className={
156
- ImageParse
157
- ? 'image-button'
158
- : 'button button-large'
159
- }
160
- >
161
- {Image === null ||
162
- typeof ImageParse.sizes === 'undefined' ? (
163
- __('Select image', 'vk-blocks')
164
- ) : (
165
- <img
166
- className={'vk_prContent_colImg_image'}
167
- src={ImageParse.sizes.full.url}
168
- alt={ImageParse.alt}
169
- style={{ border: imageBorderProperty }}
170
- />
171
- )}
172
- </Button>
173
- )}
174
- />
175
- );
176
- } else if (for_ === 'save') {
177
- if (!Image) {
178
- return __('Select image', 'vk-blocks');
179
- }
180
- if (Image && Image.indexOf('{') === -1) {
181
- return (
182
- <img
183
- className={'vk_prContent_colImg_image'}
184
- src={Image}
185
- alt={__('Upload image', 'vk-blocks')}
186
- style={{ border: imageBorderProperty }}
187
- />
188
- );
189
- }
190
- const ImageParse = JSON.parse(fixBrokenUnicode(Image));
191
- if (ImageParse && typeof ImageParse.sizes !== 'undefined') {
192
- return (
193
- <img
194
- className={'vk_prContent_colImg_image'}
195
- src={ImageParse.sizes.full.url}
196
- alt={ImageParse.alt}
197
- style={{ border: imageBorderProperty }}
198
- />
199
- );
200
- }
201
- return '';
202
- }
203
- };
204
-
205
- return (
206
- <div className={containerClass}>
207
- <div className="col-sm-6 vk_prContent_colImg">
208
- {renderImage(for_)}
209
- </div>
210
- <div className="col-sm-6 vk_prContent_colTxt">
211
- {(() => {
212
- if (for_ === 'edit') {
213
- return (
214
- <>
215
- <RichText
216
- tagName="h3"
217
- className={'vk_prContent_colTxt_title'}
218
- onChange={(value) =>
219
- setAttributes({ title: value })
220
- }
221
- value={title}
222
- placeholder={__(
223
- 'Input title.',
224
- 'vk-blocks'
225
- )}
226
- style={titleStyle}
227
- />
228
- <RichText
229
- tagName="p"
230
- className={'vk_prContent_colTxt_text'}
231
- onChange={(value) =>
232
- setAttributes({ content: value })
233
- }
234
- value={content}
235
- placeholder={__(
236
- 'Input content.',
237
- 'vk-blocks'
238
- )}
239
- style={contentStyle}
240
- />
241
- </>
242
- );
243
- }
244
- return (
245
- <>
246
- <RichText.Content
247
- tagName="h3"
248
- value={title}
249
- className={'vk_prContent_colTxt_title'}
250
- style={titleStyle}
251
- />
252
- <RichText.Content
253
- tagName="p"
254
- className={'vk_prContent_colTxt_text'}
255
- value={content}
256
- style={contentStyle}
257
- />
258
- </>
259
- );
260
- })()}
261
- {
262
- //ボタンテキストが入力されるとボタンを表示。
263
- (() => {
264
- if (buttonText !== '' && buttonText !== undefined) {
265
- return (
266
- <div className={btnClass}>
267
- <a
268
- href={url}
269
- className={aClass}
270
- target={buttonTarget && '_blank'}
271
- style={aStyle}
272
- rel={buttonTarget && 'noopener'}
273
- >
274
- <Fontawesome
275
- attributes={attributes}
276
- />
277
- </a>
278
- </div>
279
- );
280
- }
281
- })()
282
- }
283
- </div>
284
- </div>
285
- );
286
- }
287
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.0.3/save.js DELETED
@@ -1,14 +0,0 @@
1
- /**
2
- * Pr-Content block type
3
- *
4
- */
5
- import { PRcontent } from './component';
6
- export default function save({ attributes, className }) {
7
- return (
8
- <PRcontent
9
- attributes={attributes}
10
- className={className}
11
- for_={'save'}
12
- />
13
- );
14
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.43.0/save.js DELETED
@@ -1,299 +0,0 @@
1
- /**
2
- * Pr-Content block type
3
- *
4
- */
5
- import { __ } from '@wordpress/i18n';
6
- import { Button } from '@wordpress/components';
7
- import { Component } from '@wordpress/element';
8
- import { MediaUpload, RichText } from '@wordpress/block-editor';
9
-
10
- import classNames from 'classnames';
11
- import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode';
12
- import { Fontawesome } from '../component-fontawesome';
13
-
14
- export class PRcontent extends Component {
15
- render() {
16
- const attributes = this.props.attributes;
17
- const {
18
- title,
19
- titleColor,
20
- content,
21
- contentColor,
22
- url,
23
- buttonType,
24
- buttonColor,
25
- buttonColorCustom,
26
- buttonText,
27
- buttonTarget,
28
- Image,
29
- ImageBorderColor,
30
- layout,
31
- fontAwesomeIconBefore,
32
- fontAwesomeIconAfter,
33
- } = attributes;
34
-
35
- const setAttributes = this.props.setAttributes;
36
- const className = this.props.className;
37
- const for_ = this.props.for_;
38
- let containerClass = 'vk_prContent';
39
- let btnClass = 'vk_button';
40
- let aClass = 'btn btn-block vk_button_link vk_prContent_colTxt_btn';
41
- let aStyle = {};
42
- let imageBorderProperty = 'none';
43
-
44
- if (layout === 'right') {
45
- containerClass = classNames(
46
- className,
47
- containerClass,
48
- 'vk_prContent-layout-imageRight'
49
- );
50
- } else {
51
- containerClass = classNames(
52
- className,
53
- containerClass,
54
- 'vk_prContent-layout-imageLeft'
55
- );
56
- }
57
-
58
- if (buttonColorCustom) {
59
- btnClass = `${btnClass} vk_button-color-custom`;
60
- aClass = `${aClass} btn-primary`;
61
-
62
- // 塗り
63
- if (buttonType === '0') {
64
- aStyle = {
65
- backgroundColor: buttonColorCustom,
66
- border: `1px solid ${buttonColorCustom}`,
67
- };
68
- // 塗りなし
69
- } else if (buttonType === '1') {
70
- aStyle = {
71
- backgroundColor: 'transparent',
72
- border: '1px solid ' + buttonColorCustom,
73
- color: buttonColorCustom,
74
- };
75
- }
76
-
77
- // カスタムカラーじゃない場合
78
- } else if (!buttonColorCustom) {
79
- // 塗り
80
- if (buttonType === '0') {
81
- aClass = `${aClass} btn-${buttonColor}`;
82
- aStyle = null;
83
- // 塗りなし
84
- } else if (buttonType === '1') {
85
- aClass = `${aClass} btn-outline-${buttonColor}`;
86
- aStyle = null;
87
- }
88
- }
89
-
90
- //borderColorが指定されなかった場合はボーダーを非表示に
91
- if (ImageBorderColor) {
92
- imageBorderProperty = `1px solid ${ImageBorderColor}`;
93
- } else {
94
- imageBorderProperty = `none`;
95
- }
96
-
97
- const saveImage = (value) => {
98
- if (value) {
99
- setAttributes({ Image: JSON.stringify(value) });
100
- }
101
- };
102
-
103
- const renderImage = (for_) => {
104
- if (for_ === 'edit') {
105
- if (Image && Image.indexOf('{') === -1) {
106
- return (
107
- <MediaUpload
108
- onSelect={(value) =>
109
- setAttributes({ Image: value.sizes.full.url })
110
- }
111
- type=" image"
112
- value={Image}
113
- render={({ open }) => (
114
- <Button
115
- onClick={open}
116
- className={
117
- Image
118
- ? 'image-button'
119
- : 'button button-large'
120
- }
121
- >
122
- {!Image ? (
123
- __('Select image', 'vk-blocks')
124
- ) : (
125
- <img
126
- className={
127
- 'vk_prContent_colImg_image'
128
- }
129
- src={Image}
130
- alt={__(
131
- 'Upload image',
132
- 'vk-blocks'
133
- )}
134
- style={{
135
- border: imageBorderProperty,
136
- }}
137
- />
138
- )}
139
- </Button>
140
- )}
141
- />
142
- );
143
- }
144
- const ImageParse = JSON.parse(fixBrokenUnicode(Image));
145
- return (
146
- <MediaUpload
147
- onSelect={saveImage}
148
- type=" image"
149
- value={ImageParse}
150
- render={({ open }) => (
151
- <Button
152
- onClick={open}
153
- className={
154
- ImageParse
155
- ? 'image-button'
156
- : 'button button-large'
157
- }
158
- >
159
- {Image === null ||
160
- typeof ImageParse.sizes === 'undefined' ? (
161
- __('Select image', 'vk-blocks')
162
- ) : (
163
- <img
164
- className={'vk_prContent_colImg_image'}
165
- src={ImageParse.sizes.full.url}
166
- alt={ImageParse.alt}
167
- style={{
168
- border: imageBorderProperty,
169
- }}
170
- />
171
- )}
172
- </Button>
173
- )}
174
- />
175
- );
176
- } else if (for_ === 'save') {
177
- if (!Image) {
178
- return __('Select image', 'vk-blocks');
179
- }
180
- if (Image && Image.indexOf('{') === -1) {
181
- return (
182
- <img
183
- className={'vk_prContent_colImg_image'}
184
- src={Image}
185
- alt={__('Upload image', 'vk-blocks')}
186
- style={{ border: imageBorderProperty }}
187
- />
188
- );
189
- }
190
- const ImageParse = JSON.parse(fixBrokenUnicode(Image));
191
- if (ImageParse && typeof ImageParse.sizes !== 'undefined') {
192
- return (
193
- <img
194
- className={'vk_prContent_colImg_image'}
195
- src={ImageParse.sizes.full.url}
196
- alt={ImageParse.alt}
197
- style={{ border: imageBorderProperty }}
198
- />
199
- );
200
- }
201
- return '';
202
- }
203
- };
204
-
205
- return (
206
- <div className={containerClass}>
207
- <div className="col-sm-6 vk_prContent_colImg">
208
- {renderImage(for_)}
209
- </div>
210
- <div className="col-sm-6 vk_prContent_colTxt">
211
- {(() => {
212
- if (for_ === 'edit') {
213
- return (
214
- <>
215
- <RichText
216
- tagName="h3"
217
- className={'vk_prContent_colTxt_title'}
218
- onChange={(value) =>
219
- setAttributes({ title: value })
220
- }
221
- value={title}
222
- placeholder={__(
223
- 'Input title.',
224
- 'vk-blocks'
225
- )}
226
- style={{ color: titleColor }}
227
- />
228
- <RichText
229
- tagName="p"
230
- className={'vk_prContent_colTxt_text'}
231
- onChange={(value) =>
232
- setAttributes({ content: value })
233
- }
234
- value={content}
235
- placeholder={__(
236
- 'Input content.',
237
- 'vk-blocks'
238
- )}
239
- style={{ color: contentColor }}
240
- />
241
- </>
242
- );
243
- }
244
- return (
245
- <>
246
- <RichText.Content
247
- tagName="h3"
248
- value={title}
249
- className={'vk_prContent_colTxt_title'}
250
- style={{ color: titleColor }}
251
- />
252
- <RichText.Content
253
- tagName="p"
254
- className={'vk_prContent_colTxt_text'}
255
- value={content}
256
- style={{ color: contentColor }}
257
- />
258
- </>
259
- );
260
- })()}
261
- {
262
- //ボタンテキストが入力されるとボタンを表示。
263
- (() => {
264
- if (buttonText !== '' && buttonText !== undefined) {
265
- return (
266
- <div className={btnClass}>
267
- <a
268
- href={url}
269
- className={aClass}
270
- target={
271
- buttonTarget ? '_blank' : null
272
- }
273
- style={aStyle}
274
- rel="noopener noreferrer"
275
- >
276
- <Fontawesome
277
- attributes={attributes}
278
- />
279
- </a>
280
- </div>
281
- );
282
- }
283
- })()
284
- }
285
- </div>
286
- </div>
287
- );
288
- }
289
- }
290
-
291
- export default function save({ attributes, className }) {
292
- return (
293
- <PRcontent
294
- attributes={attributes}
295
- className={className}
296
- for_={'save'}
297
- />
298
- );
299
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.5.1/save.js DELETED
@@ -1,215 +0,0 @@
1
- /**
2
- * Pr-Content block type
3
- *
4
- */
5
- import { __ } from '@wordpress/i18n';
6
- import { Button } from '@wordpress/components';
7
- import { Component } from '@wordpress/element';
8
- import { MediaUpload, RichText } from '@wordpress/block-editor';
9
- import { Fontawesome } from '../component-fontawesome-deprecated';
10
-
11
- export class PRcontent extends Component {
12
- render() {
13
- const attributes = this.props.attributes;
14
- const {
15
- title,
16
- titleColor,
17
- content,
18
- contentColor,
19
- url,
20
- buttonType,
21
- buttonColor,
22
- buttonColorCustom,
23
- buttonText,
24
- buttonTarget,
25
- Image,
26
- ImageBorderColor,
27
- layout,
28
- fontAwesomeIconBefore,
29
- fontAwesomeIconAfter,
30
- } = attributes;
31
- const setAttributes = this.props.setAttributes;
32
- const for_ = this.props.for_;
33
- let containerClass = 'vk_prContent';
34
- let btnClass = 'vk_button';
35
- let aClass = 'btn btn-block vk_button_link vk_prContent_colTxt_btn';
36
- let aStyle = {};
37
-
38
- if (layout === 'right') {
39
- containerClass = `${containerClass} vk_prContent-layout-imageRight`;
40
- } else {
41
- containerClass = `${containerClass} vk_prContent-layout-imageLeft`;
42
- }
43
-
44
- if (buttonColorCustom) {
45
- btnClass = `${btnClass} vk_button-color-custom`;
46
- aClass = `${aClass} btn-primary`;
47
-
48
- // 塗り
49
- if (buttonType === '0') {
50
- aStyle = {
51
- backgroundColor: buttonColorCustom,
52
- border: `1px solid ${buttonColorCustom}`,
53
- };
54
- // 塗りなし
55
- } else if (buttonType === '1') {
56
- aStyle = {
57
- backgroundColor: 'transparent',
58
- border: '1px solid ' + buttonColorCustom,
59
- color: buttonColorCustom,
60
- };
61
- }
62
-
63
- // カスタムカラーじゃない場合
64
- } else if (!buttonColorCustom) {
65
- // 塗り
66
- if (buttonType === '0') {
67
- aClass = `${aClass} btn-${buttonColor}`;
68
- aStyle = null;
69
- // 塗りなし
70
- } else if (buttonType === '1') {
71
- aClass = `${aClass} btn-outline-${buttonColor}`;
72
- aStyle = null;
73
- }
74
- }
75
-
76
- return (
77
- <article className={containerClass}>
78
- <div className="col-sm-6 vk_prContent_colImg">
79
- {for_ === 'edit' ? (
80
- <MediaUpload
81
- onSelect={(value) =>
82
- setAttributes({ Image: value.sizes.full.url })
83
- }
84
- type=" image"
85
- value={Image}
86
- render={({ open }) => (
87
- <Button
88
- onClick={open}
89
- className={
90
- Image
91
- ? 'image-button'
92
- : 'button button-large'
93
- }
94
- >
95
- {!Image ? (
96
- __('Select image', 'vk-blocks')
97
- ) : (
98
- <img
99
- className={
100
- 'vk_prContent_colImg_image'
101
- }
102
- src={Image}
103
- alt={__(
104
- 'Upload image',
105
- 'vk-blocks'
106
- )}
107
- style={{
108
- border: `1px solid ${ImageBorderColor}`,
109
- }}
110
- />
111
- )}
112
- </Button>
113
- )}
114
- />
115
- ) : !Image ? (
116
- __('Select image', 'vk-blocks')
117
- ) : (
118
- <img
119
- className={'vk_prContent_colImg_image'}
120
- src={Image}
121
- alt={__('Upload image', 'vk-blocks')}
122
- style={{ border: `1px solid ${ImageBorderColor}` }}
123
- />
124
- )}
125
- </div>
126
- <div className="col-sm-6 vk_prContent_colTxt">
127
- {(() => {
128
- if (for_ === 'edit') {
129
- return (
130
- <>
131
- <RichText
132
- tagName="h3"
133
- className={'vk_prContent_colTxt_title'}
134
- onChange={(value) =>
135
- setAttributes({ title: value })
136
- }
137
- value={title}
138
- placeholder={__(
139
- 'Input title.',
140
- 'vk-blocks'
141
- )}
142
- style={{ color: titleColor }}
143
- />
144
- <RichText
145
- tagName="p"
146
- className={'vk_prContent_colTxt_text'}
147
- onChange={(value) =>
148
- setAttributes({ content: value })
149
- }
150
- value={content}
151
- placeholder={__(
152
- 'Input content.',
153
- 'vk-blocks'
154
- )}
155
- style={{ color: contentColor }}
156
- />
157
- </>
158
- );
159
- }
160
- return (
161
- <>
162
- <RichText.Content
163
- tagName="h3"
164
- value={title}
165
- className={'vk_prContent_colTxt_title'}
166
- style={{ color: titleColor }}
167
- />
168
- <RichText.Content
169
- tagName="p"
170
- className={'vk_prContent_colTxt_text'}
171
- value={content}
172
- style={{ color: contentColor }}
173
- />
174
- </>
175
- );
176
- })()}
177
- {
178
- //ボタンテキストが入力されるとボタンを表示。
179
- (() => {
180
- if (buttonText !== '' && buttonText !== undefined) {
181
- return (
182
- <div className={btnClass}>
183
- <a
184
- href={url}
185
- className={aClass}
186
- target={
187
- buttonTarget ? '_blank' : null
188
- }
189
- rel="noopener noreferrer"
190
- style={aStyle}
191
- >
192
- <Fontawesome
193
- attributes={attributes}
194
- />
195
- </a>
196
- </div>
197
- );
198
- }
199
- })()
200
- }
201
- </div>
202
- </article>
203
- );
204
- }
205
- }
206
-
207
- export default function save({ attributes, className }) {
208
- return (
209
- <PRcontent
210
- attributes={attributes}
211
- className={className}
212
- for_={'save'}
213
- />
214
- );
215
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.56.3/component.js DELETED
@@ -1,249 +0,0 @@
1
- import classNames from 'classnames';
2
- import { __ } from '@wordpress/i18n';
3
- import { Button } from '@wordpress/components';
4
- import { Component, Fragment } from '@wordpress/element';
5
- import { MediaUpload, RichText } from '@wordpress/block-editor';
6
- import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode';
7
- import { Fontawesome } from '../component-fontawesome';
8
-
9
- export class PRcontent extends Component {
10
- render() {
11
- const attributes = this.props.attributes;
12
- let {
13
- title,
14
- titleColor,
15
- content,
16
- contentColor,
17
- url,
18
- buttonType,
19
- buttonColor,
20
- buttonColorCustom,
21
- buttonText,
22
- buttonTarget,
23
- Image,
24
- ImageBorderColor,
25
- layout,
26
- fontAwesomeIconBefore,
27
- fontAwesomeIconAfter
28
- } = attributes;
29
-
30
- const setAttributes = this.props.setAttributes;
31
- const className = this.props.className;
32
- const for_ = this.props.for_;
33
- let containerClass = "vk_prContent";
34
- let btnClass = "vk_button";
35
- let aClass = "btn btn-block vk_button_link vk_prContent_colTxt_btn";
36
- let aStyle = {};
37
- let imageBorderProperty = "none";
38
-
39
- if (layout === "right") {
40
- containerClass = classNames(
41
- className,
42
- containerClass,
43
- "vk_prContent-layout-imageRight"
44
- );
45
- } else {
46
- containerClass = classNames(
47
- className,
48
- containerClass,
49
- "vk_prContent-layout-imageLeft"
50
- );
51
- }
52
-
53
- if (buttonColorCustom) {
54
- btnClass = `${btnClass} vk_button-color-custom`;
55
- aClass = `${aClass} btn-primary`;
56
-
57
- // 塗り
58
- if (buttonType === "0") {
59
- aStyle = {
60
- backgroundColor: buttonColorCustom,
61
- border: `1px solid ${buttonColorCustom}`
62
- };
63
- // 塗りなし
64
- } else if (buttonType === "1") {
65
- aStyle = {
66
- backgroundColor: "transparent",
67
- border: "1px solid " + buttonColorCustom,
68
- color: buttonColorCustom
69
- };
70
- }
71
-
72
- // カスタムカラーじゃない場合
73
- } else if (!buttonColorCustom) {
74
- // 塗り
75
- if (buttonType === "0") {
76
- aClass = `${aClass} btn-${buttonColor}`;
77
- aStyle = null;
78
- // 塗りなし
79
- } else if (buttonType === "1") {
80
- aClass = `${aClass} btn-outline-${buttonColor}`;
81
- aStyle = null;
82
- }
83
- }
84
-
85
- //borderColorが指定されなかった場合はボーダーを非表示に
86
- if (ImageBorderColor) {
87
- imageBorderProperty = `1px solid ${ImageBorderColor}`;
88
- } else {
89
- imageBorderProperty = `none`;
90
- }
91
-
92
- const saveImage = value => {
93
- if (value) {
94
- setAttributes({ Image: JSON.stringify(value) });
95
- }
96
- };
97
-
98
- const renderImage = for_ => {
99
- if (for_ === "edit") {
100
- if (Image && Image.indexOf("{") === -1) {
101
- return (
102
- <MediaUpload
103
- onSelect={ value => setAttributes({ Image: value.sizes.full.url }) }
104
- type=" image"
105
- value={ Image }
106
- render={ ({ open }) => (
107
- <Button
108
- onClick={ open }
109
- className={ Image ? "image-button" : "button button-large" }
110
- >
111
- { !Image ? (
112
- __("Select image", "vk-blocks")
113
- ) : (
114
- <img
115
- className={ "vk_prContent_colImg_image" }
116
- src={ Image }
117
- alt={ __("Upload image", "vk-blocks") }
118
- style={ { border: imageBorderProperty } }
119
- />
120
- ) }
121
- </Button>
122
- ) }
123
- />
124
- );
125
- }
126
- const ImageParse = JSON.parse( fixBrokenUnicode(Image) );
127
- return (
128
- <MediaUpload
129
- onSelect={ saveImage }
130
- type=" image"
131
- value={ ImageParse }
132
- render={ ({ open }) => (
133
- <Button
134
- onClick={ open }
135
- className={
136
- ImageParse ? "image-button" : "button button-large"
137
- }
138
- >
139
- { Image === null || typeof ImageParse.sizes === "undefined" ? (
140
- __("Select image", "vk-blocks")
141
- ) : (
142
- <img
143
- className={ "vk_prContent_colImg_image" }
144
- src={ ImageParse.sizes.full.url }
145
- alt={ ImageParse.alt }
146
- style={ { border: imageBorderProperty } }
147
- />
148
- ) }
149
- </Button>
150
- ) }
151
- />
152
- );
153
-
154
- } else if (for_ === "save") {
155
- if (!Image) {
156
- return __("Select image", "vk-blocks");
157
- }
158
- if (Image && Image.indexOf("{") === -1) {
159
- return (
160
- <img
161
- className={ "vk_prContent_colImg_image" }
162
- src={ Image }
163
- alt={ __("Upload image", "vk-blocks") }
164
- style={ { border: imageBorderProperty } }
165
- />
166
- );
167
- }
168
- const ImageParse = JSON.parse( fixBrokenUnicode(Image) );
169
- if (ImageParse && typeof ImageParse.sizes !== "undefined") {
170
- return (
171
- <img
172
- className={ "vk_prContent_colImg_image" }
173
- src={ ImageParse.sizes.full.url }
174
- alt={ ImageParse.alt }
175
- style={ { border: imageBorderProperty } }
176
- />
177
- );
178
- }else{
179
- return "";
180
- }
181
- }
182
- };
183
-
184
- return (
185
- <div className={ containerClass }>
186
- <div className="col-sm-6 vk_prContent_colImg">{ renderImage(for_) }</div>
187
- <div className="col-sm-6 vk_prContent_colTxt">
188
- { (() => {
189
- if (for_ === "edit") {
190
- return (
191
- <Fragment>
192
- <RichText
193
- tagName="h3"
194
- className={ "vk_prContent_colTxt_title" }
195
- onChange={ value => setAttributes({ title: value }) }
196
- value={ title }
197
- placeholder={ __("Input title.", "vk-blocks") }
198
- style={ { color: titleColor } }
199
- />
200
- <RichText
201
- tagName="p"
202
- className={ "vk_prContent_colTxt_text" }
203
- onChange={ value => setAttributes({ content: value }) }
204
- value={ content }
205
- placeholder={ __("Input content.", "vk-blocks") }
206
- style={ { color: contentColor } }
207
- />
208
- </Fragment>
209
- );
210
- }
211
- return (
212
- <Fragment>
213
- <RichText.Content
214
- tagName="h3"
215
- value={ title }
216
- className={ "vk_prContent_colTxt_title" }
217
- style={ { color: titleColor } }
218
- />
219
- <RichText.Content
220
- tagName="p"
221
- className={ "vk_prContent_colTxt_text" }
222
- value={ content }
223
- style={ { color: contentColor } }
224
- />
225
- </Fragment>
226
- );
227
- })() }
228
- { //ボタンテキストが入力されるとボタンを表示。
229
- (() => {
230
- if (buttonText !== "" && buttonText !== undefined) {
231
- return (
232
- <div className={ btnClass }>
233
- <a
234
- href={ url }
235
- className={ aClass }
236
- target={ buttonTarget ? "_blank" : null }
237
- style={ aStyle }
238
- >
239
- <Fontawesome attributes={ attributes } />
240
- </a>
241
- </div>
242
- );
243
- }
244
- })() }
245
- </div>
246
- </div>
247
- );
248
- }
249
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.56.3/save.js DELETED
@@ -1,11 +0,0 @@
1
- /**
2
- * Pr-Content block type
3
- *
4
- */
5
- import { PRcontent } from './component';
6
- export default function save(props) {
7
- const { attributes, className } = props
8
- return (
9
- <PRcontent attributes={ attributes } className={ className } for_={ "save" } />
10
- );
11
- }
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.58.7/component.js DELETED
@@ -1,281 +0,0 @@
1
- import classNames from 'classnames';
2
- import { __ } from '@wordpress/i18n';
3
- import { Button } from '@wordpress/components';
4
- import { Component } from '@wordpress/element';
5
- import { MediaUpload, RichText } from '@wordpress/block-editor';
6
- import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode';
7
- import { Fontawesome } from '../component-fontawesome';
8
-
9
- export class PRcontent extends Component {
10
- render() {
11
- const attributes = this.props.attributes;
12
- const {
13
- title,
14
- titleColor,
15
- content,
16
- contentColor,
17
- url,
18
- buttonType,
19
- buttonColor,
20
- buttonColorCustom,
21
- buttonText,
22
- buttonTarget,
23
- Image,
24
- ImageBorderColor,
25
- layout,
26
- fontAwesomeIconBefore,
27
- fontAwesomeIconAfter,
28
- } = attributes;
29
-
30
- const setAttributes = this.props.setAttributes;
31
- const className = this.props.className;
32
- const for_ = this.props.for_;
33
- let containerClass = 'vk_prContent';
34
- let btnClass = 'vk_button';
35
- let aClass = 'btn btn-block vk_button_link vk_prContent_colTxt_btn';
36
- let aStyle = {};
37
- let imageBorderProperty = 'none';
38
-
39
- if (layout === 'right') {
40
- containerClass = classNames(
41
- className,
42
- containerClass,
43
- 'vk_prContent-layout-imageRight'
44
- );
45
- } else {
46
- containerClass = classNames(
47
- className,
48
- containerClass,
49
- 'vk_prContent-layout-imageLeft'
50
- );
51
- }
52
-
53
- if (buttonColorCustom) {
54
- btnClass = `${btnClass} vk_button-color-custom`;
55
- aClass = `${aClass} btn-primary`;
56
-
57
- // 塗り
58
- if (buttonType === '0') {
59
- aStyle = {
60
- backgroundColor: buttonColorCustom,
61
- border: `1px solid ${buttonColorCustom}`,
62
- };
63
- // 塗りなし
64
- } else if (buttonType === '1') {
65
- aStyle = {
66
- backgroundColor: 'transparent',
67
- border: '1px solid ' + buttonColorCustom,
68
- color: buttonColorCustom,
69
- };
70
- }
71
-
72
- // カスタムカラーじゃない場合
73
- } else if (!buttonColorCustom) {
74
- // 塗り
75
- if (buttonType === '0') {
76
- aClass = `${aClass} btn-${buttonColor}`;
77
- aStyle = null;
78
- // 塗りなし
79
- } else if (buttonType === '1') {
80
- aClass = `${aClass} btn-outline-${buttonColor}`;
81
- aStyle = null;
82
- }
83
- }
84
-
85
- //borderColorが指定されなかった場合はボーダーを非表示に
86
- if (ImageBorderColor) {
87
- imageBorderProperty = `1px solid ${ImageBorderColor}`;
88
- } else {
89
- imageBorderProperty = `none`;
90
- }
91
-
92
- const saveImage = (value) => {
93
- if (value) {
94
- setAttributes({ Image: JSON.stringify(value) });
95
- }
96
- };
97
-
98
- const renderImage = (for_) => {
99
- if (for_ === 'edit') {
100
- if (Image && Image.indexOf('{') === -1) {
101
- return (
102
- <MediaUpload
103
- onSelect={(value) =>
104
- setAttributes({ Image: value.sizes.full.url })
105
- }
106
- type=" image"
107
- value={Image}
108
- render={({ open }) => (
109
- <Button
110
- onClick={open}
111
- className={
112
- Image
113
- ? 'image-button'
114
- : 'button button-large'
115
- }
116
- >
117
- {!Image ? (
118
- __('Select image', 'vk-blocks')
119
- ) : (
120
- <img
121
- className={
122
- 'vk_prContent_colImg_image'
123
- }
124
- src={Image}
125
- alt={__(
126
- 'Upload image',
127
- 'vk-blocks'
128
- )}
129
- style={{
130
- border: imageBorderProperty,
131
- }}
132
- />
133
- )}
134
- </Button>
135
- )}
136
- />
137
- );
138
- }
139
- const ImageParse = JSON.parse(fixBrokenUnicode(Image));
140
- return (
141
- <MediaUpload
142
- onSelect={saveImage}
143
- type=" image"
144
- value={ImageParse}
145
- render={({ open }) => (
146
- <Button
147
- onClick={open}
148
- className={
149
- ImageParse
150
- ? 'image-button'
151
- : 'button button-large'
152
- }
153
- >
154
- {Image === null ||
155
- typeof ImageParse.sizes === 'undefined' ? (
156
- __('Select image', 'vk-blocks')
157
- ) : (
158
- <img
159
- className={'vk_prContent_colImg_image'}
160
- src={ImageParse.sizes.full.url}
161
- alt={ImageParse.alt}
162
- style={{ border: imageBorderProperty }}
163
- />
164
- )}
165
- </Button>
166
- )}
167
- />
168
- );
169
- } else if (for_ === 'save') {
170
- if (!Image) {
171
- return __('Select image', 'vk-blocks');
172
- }
173
- if (Image && Image.indexOf('{') === -1) {
174
- return (
175
- <img
176
- className={'vk_prContent_colImg_image'}
177
- src={Image}
178
- alt={__('Upload image', 'vk-blocks')}
179
- style={{ border: imageBorderProperty }}
180
- />
181
- );
182
- }
183
- const ImageParse = JSON.parse(fixBrokenUnicode(Image));
184
- if (ImageParse && typeof ImageParse.sizes !== 'undefined') {
185
- return (
186
- <img
187
- className={'vk_prContent_colImg_image'}
188
- src={ImageParse.sizes.full.url}
189
- alt={ImageParse.alt}
190
- style={{ border: imageBorderProperty }}
191
- />
192
- );
193
- }
194
- return '';
195
- }
196
- };
197
-
198
- return (
199
- <div className={containerClass}>
200
- <div className="col-sm-6 vk_prContent_colImg">
201
- {renderImage(for_)}
202
- </div>
203
- <div className="col-sm-6 vk_prContent_colTxt">
204
- {(() => {
205
- if (for_ === 'edit') {
206
- return (
207
- <>
208
- <RichText
209
- tagName="h3"
210
- className={'vk_prContent_colTxt_title'}
211
- onChange={(value) =>
212
- setAttributes({ title: value })
213
- }
214
- value={title}
215
- placeholder={__(
216
- 'Input title.',
217
- 'vk-blocks'
218
- )}
219
- style={{ color: titleColor }}
220
- />
221
- <RichText
222
- tagName="p"
223
- className={'vk_prContent_colTxt_text'}
224
- onChange={(value) =>
225
- setAttributes({ content: value })
226
- }
227
- value={content}
228
- placeholder={__(
229
- 'Input content.',
230
- 'vk-blocks'
231
- )}
232
- style={{ color: contentColor }}
233
- />
234
- </>
235
- );
236
- }
237
- return (
238
- <>
239
- <RichText.Content
240
- tagName="h3"
241
- value={title}
242
- className={'vk_prContent_colTxt_title'}
243
- style={{ color: titleColor }}
244
- />
245
- <RichText.Content
246
- tagName="p"
247
- className={'vk_prContent_colTxt_text'}
248
- value={content}
249
- style={{ color: contentColor }}
250
- />
251
- </>
252
- );
253
- })()}
254
- {
255
- //ボタンテキストが入力されるとボタンを表示。
256
- (() => {
257
- if (buttonText !== '' && buttonText !== undefined) {
258
- return (
259
- <div className={btnClass}>
260
- <a
261
- href={url}
262
- className={aClass}
263
- target={
264
- buttonTarget ? '_blank' : null
265
- }
266
- style={aStyle}
267
- >
268
- <Fontawesome
269
- attributes={attributes}
270
- />
271
- </a>
272
- </div>
273
- );
274
- }
275
- })()
276
- }
277
- </div>
278
- </div>
279
- );
280
- }
281
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.58.7/save.js DELETED
@@ -1,15 +0,0 @@
1
- /**
2
- * Pr-Content block type
3
- *
4
- */
5
- import { PRcontent } from './component';
6
- export default function save(props) {
7
- const { attributes, className } = props;
8
- return (
9
- <PRcontent
10
- attributes={attributes}
11
- className={className}
12
- for_={'save'}
13
- />
14
- );
15
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.58.9/component.js DELETED
@@ -1,280 +0,0 @@
1
- import classNames from 'classnames';
2
- import { __ } from '@wordpress/i18n';
3
- import { Button } from '@wordpress/components';
4
- import { Component } from '@wordpress/element';
5
- import { MediaUpload, RichText } from '@wordpress/block-editor';
6
- import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode';
7
- import { Fontawesome } from '../component-fontawesome';
8
-
9
- export class PRcontent extends Component {
10
- render() {
11
- const attributes = this.props.attributes;
12
- const {
13
- title,
14
- titleColor,
15
- content,
16
- contentColor,
17
- url,
18
- buttonType,
19
- buttonColor,
20
- buttonColorCustom,
21
- buttonText,
22
- buttonTarget,
23
- Image,
24
- ImageBorderColor,
25
- layout,
26
- fontAwesomeIconBefore,
27
- fontAwesomeIconAfter,
28
- } = attributes;
29
-
30
- const setAttributes = this.props.setAttributes;
31
- const className = this.props.className;
32
- const for_ = this.props.for_;
33
- let containerClass = 'vk_prContent';
34
- let btnClass = 'vk_button';
35
- let aClass = 'btn btn-block vk_button_link vk_prContent_colTxt_btn';
36
- let aStyle = {};
37
- let imageBorderProperty = 'none';
38
-
39
- if (layout === 'right') {
40
- containerClass = classNames(
41
- className,
42
- containerClass,
43
- 'vk_prContent-layout-imageRight'
44
- );
45
- } else {
46
- containerClass = classNames(
47
- className,
48
- containerClass,
49
- 'vk_prContent-layout-imageLeft'
50
- );
51
- }
52
-
53
- if (buttonColorCustom) {
54
- btnClass = `${btnClass} vk_button-color-custom`;
55
- aClass = `${aClass} btn-primary`;
56
-
57
- // 塗り
58
- if (buttonType === '0') {
59
- aStyle = {
60
- backgroundColor: buttonColorCustom,
61
- border: `1px solid ${buttonColorCustom}`,
62
- };
63
- // 塗りなし
64
- } else if (buttonType === '1') {
65
- aStyle = {
66
- backgroundColor: 'transparent',
67
- border: '1px solid ' + buttonColorCustom,
68
- color: buttonColorCustom,
69
- };
70
- }
71
-
72
- // カスタムカラーじゃない場合
73
- } else if (!buttonColorCustom) {
74
- // 塗り
75
- if (buttonType === '0') {
76
- aClass = `${aClass} btn-${buttonColor}`;
77
- aStyle = null;
78
- // 塗りなし
79
- } else if (buttonType === '1') {
80
- aClass = `${aClass} btn-outline-${buttonColor}`;
81
- aStyle = null;
82
- }
83
- }
84
-
85
- //borderColorが指定されなかった場合はボーダーを非表示に
86
- if (ImageBorderColor) {
87
- imageBorderProperty = `1px solid ${ImageBorderColor}`;
88
- } else {
89
- imageBorderProperty = `none`;
90
- }
91
-
92
- const saveImage = (value) => {
93
- if (value) {
94
- setAttributes({ Image: JSON.stringify(value) });
95
- }
96
- };
97
-
98
- const renderImage = (for_) => {
99
- if (for_ === 'edit') {
100
- if (Image && Image.indexOf('{') === -1) {
101
- return (
102
- <MediaUpload
103
- onSelect={(value) =>
104
- setAttributes({ Image: value.sizes.full.url })
105
- }
106
- type=" image"
107
- value={Image}
108
- render={({ open }) => (
109
- <Button
110
- onClick={open}
111
- className={
112
- Image
113
- ? 'image-button'
114
- : 'button button-large'
115
- }
116
- >
117
- {!Image ? (
118
- __('Select image', 'vk-blocks')
119
- ) : (
120
- <img
121
- className={
122
- 'vk_prContent_colImg_image'
123
- }
124
- src={Image}
125
- alt={__(
126
- 'Upload image',
127
- 'vk-blocks'
128
- )}
129
- style={{
130
- border: imageBorderProperty,
131
- }}
132
- />
133
- )}
134
- </Button>
135
- )}
136
- />
137
- );
138
- }
139
- const ImageParse = JSON.parse(fixBrokenUnicode(Image));
140
- return (
141
- <MediaUpload
142
- onSelect={saveImage}
143
- type=" image"
144
- value={ImageParse}
145
- render={({ open }) => (
146
- <Button
147
- onClick={open}
148
- className={
149
- ImageParse
150
- ? 'image-button'
151
- : 'button button-large'
152
- }
153
- >
154
- {Image === null ||
155
- typeof ImageParse.sizes === 'undefined' ? (
156
- __('Select image', 'vk-blocks')
157
- ) : (
158
- <img
159
- className={'vk_prContent_colImg_image'}
160
- src={ImageParse.sizes.full.url}
161
- alt={ImageParse.alt}
162
- style={{ border: imageBorderProperty }}
163
- />
164
- )}
165
- </Button>
166
- )}
167
- />
168
- );
169
- } else if (for_ === 'save') {
170
- if (!Image) {
171
- return __('Select image', 'vk-blocks');
172
- }
173
- if (Image && Image.indexOf('{') === -1) {
174
- return (
175
- <img
176
- className={'vk_prContent_colImg_image'}
177
- src={Image}
178
- alt={__('Upload image', 'vk-blocks')}
179
- style={{ border: imageBorderProperty }}
180
- />
181
- );
182
- }
183
- const ImageParse = JSON.parse(fixBrokenUnicode(Image));
184
- if (ImageParse && typeof ImageParse.sizes !== 'undefined') {
185
- return (
186
- <img
187
- className={'vk_prContent_colImg_image'}
188
- src={ImageParse.sizes.full.url}
189
- alt={ImageParse.alt}
190
- style={{ border: imageBorderProperty }}
191
- />
192
- );
193
- }
194
- return '';
195
- }
196
- };
197
-
198
- return (
199
- <div className={containerClass}>
200
- <div className="col-sm-6 vk_prContent_colImg">
201
- {renderImage(for_)}
202
- </div>
203
- <div className="col-sm-6 vk_prContent_colTxt">
204
- {(() => {
205
- if (for_ === 'edit') {
206
- return (
207
- <>
208
- <RichText
209
- tagName="h3"
210
- className={'vk_prContent_colTxt_title'}
211
- onChange={(value) =>
212
- setAttributes({ title: value })
213
- }
214
- value={title}
215
- placeholder={__(
216
- 'Input title.',
217
- 'vk-blocks'
218
- )}
219
- style={{ color: titleColor }}
220
- />
221
- <RichText
222
- tagName="p"
223
- className={'vk_prContent_colTxt_text'}
224
- onChange={(value) =>
225
- setAttributes({ content: value })
226
- }
227
- value={content}
228
- placeholder={__(
229
- 'Input content.',
230
- 'vk-blocks'
231
- )}
232
- style={{ color: contentColor }}
233
- />
234
- </>
235
- );
236
- }
237
- return (
238
- <>
239
- <RichText.Content
240
- tagName="h3"
241
- value={title}
242
- className={'vk_prContent_colTxt_title'}
243
- style={{ color: titleColor }}
244
- />
245
- <RichText.Content
246
- tagName="p"
247
- className={'vk_prContent_colTxt_text'}
248
- value={content}
249
- style={{ color: contentColor }}
250
- />
251
- </>
252
- );
253
- })()}
254
- {
255
- //ボタンテキストが入力されるとボタンを表示。
256
- (() => {
257
- if (buttonText !== '' && buttonText !== undefined) {
258
- return (
259
- <div className={btnClass}>
260
- <a
261
- href={url}
262
- className={aClass}
263
- target={buttonTarget && '_blank'}
264
- style={aStyle}
265
- rel={buttonTarget && 'noopener'}
266
- >
267
- <Fontawesome
268
- attributes={attributes}
269
- />
270
- </a>
271
- </div>
272
- );
273
- }
274
- })()
275
- }
276
- </div>
277
- </div>
278
- );
279
- }
280
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/0.58.9/save.js DELETED
@@ -1,14 +0,0 @@
1
- /**
2
- * Pr-Content block type
3
- *
4
- */
5
- import { PRcontent } from './component';
6
- export default function save({ attributes, className }) {
7
- return (
8
- <PRcontent
9
- attributes={attributes}
10
- className={className}
11
- for_={'save'}
12
- />
13
- );
14
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/1.7.1/mediaUpload.js DELETED
@@ -1,146 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { Button } from '@wordpress/components';
3
- import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode';
4
- import { MediaUpload } from '@wordpress/block-editor';
5
-
6
- // 過去に保存された画像か確認
7
- export const isDeprecatedImage = (image) => {
8
- return image && image.indexOf('{') === -1;
9
- };
10
-
11
- // 画像の枠線設定を取得
12
- export const getImageBorder = (ImageBorderColor) => {
13
- let imageBorderSettings = 'none';
14
- //borderColorが指定されなかった場合はボーダーを非表示に
15
- if (ImageBorderColor) {
16
- imageBorderSettings = `1px solid ${ImageBorderColor}`;
17
- }
18
- return imageBorderSettings;
19
- };
20
-
21
- export const PrContentMediaUploadEdit = ({
22
- ImageBorderColor,
23
- setAttributes,
24
- Image,
25
- }) => {
26
- /* eslint no-unused-vars: 0 */
27
- const imageBorderSettings = getImageBorder(ImageBorderColor);
28
- const prContentDatas = {};
29
-
30
- //画像のURL保存
31
- const setImageURL = (value) =>
32
- setAttributes({ Image: value.sizes.full.url });
33
-
34
- //画像のJSONオブジェクト保存
35
- const setImageJSON = (value) => {
36
- if (value) {
37
- // JSONデータから抜き出し
38
- const imageData = {
39
- alt: value.alt,
40
- sizes: {
41
- full: {
42
- url: value.sizes.full.url,
43
- },
44
- },
45
- };
46
-
47
- setAttributes({ Image: JSON.stringify(imageData) });
48
- }
49
- };
50
- const getImagePlaceHolderDeprecated = (image, borderSettings) => {
51
- if (!image) {
52
- return __('Select image', 'vk-blocks');
53
- }
54
- return (
55
- <img
56
- className={'vk_prContent_colImg_image'}
57
- src={image}
58
- alt={__('Upload image', 'vk-blocks')}
59
- style={{ border: borderSettings }}
60
- />
61
- );
62
- };
63
-
64
- const getImagePlaceHolder = (image, borderSettings) => {
65
- image = JSON.parse(fixBrokenUnicode(image));
66
-
67
- if (image === null || typeof image.sizes === 'undefined') {
68
- return __('Select image', 'vk-blocks');
69
- }
70
- return (
71
- <img
72
- className={'vk_prContent_colImg_image'}
73
- src={image.sizes.full.url}
74
- alt={image.alt}
75
- style={{ border: borderSettings }}
76
- />
77
- );
78
- };
79
-
80
- //バージョンによって画像の保存方式変更
81
- if (isDeprecatedImage(Image)) {
82
- prContentDatas.setImage = setImageURL;
83
- prContentDatas.value = Image;
84
- prContentDatas.alt = __('Upload image', 'vk-blocks');
85
- prContentDatas.getImagePlaceHolder = getImagePlaceHolderDeprecated;
86
- } else {
87
- prContentDatas.setImage = setImageJSON;
88
- prContentDatas.value = JSON.parse(fixBrokenUnicode(Image));
89
- prContentDatas.alt = prContentDatas.value.alt;
90
- prContentDatas.getImagePlaceHolder = getImagePlaceHolder;
91
- }
92
-
93
- const isImageUpload =
94
- Image !== null && Image !== undefined && Image !== '' && Image !== '{}';
95
-
96
- return (
97
- <MediaUpload
98
- onSelect={prContentDatas.setImage}
99
- type="image"
100
- value={prContentDatas.value}
101
- render={({ open }) => (
102
- <Button
103
- onClick={open}
104
- className={
105
- isImageUpload ? 'image-button' : 'button button-large'
106
- }
107
- >
108
- {prContentDatas.getImagePlaceHolder(
109
- Image,
110
- imageBorderSettings
111
- )}
112
- </Button>
113
- )}
114
- />
115
- );
116
- };
117
-
118
- export const PrContentMediaUpload = ({ Image, ImageBorderColor }) => {
119
- if (!Image) {
120
- return __('Select Image', 'vk-blocks');
121
- }
122
-
123
- const imageBorderSettings = getImageBorder(ImageBorderColor);
124
-
125
- if (Image && Image.indexOf('{') === -1) {
126
- return (
127
- <img
128
- className={'vk_prContent_colImg_image'}
129
- src={Image}
130
- alt={__('Upload image', 'vk-blocks')}
131
- style={{ border: imageBorderSettings }}
132
- />
133
- );
134
- }
135
- const imageParse = JSON.parse(fixBrokenUnicode(Image));
136
- if (imageParse && typeof imageParse.sizes !== 'undefined') {
137
- return (
138
- <img
139
- className={'vk_prContent_colImg_image'}
140
- src={imageParse.sizes.full.url}
141
- alt={imageParse.alt}
142
- style={{ border: imageBorderSettings }}
143
- />
144
- );
145
- }
146
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/1.7.1/save.js DELETED
@@ -1,83 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
- import {
3
- getButtonClass,
4
- getLinkClass,
5
- getLinkStyle,
6
- getFontawesomeIcon,
7
- getContainerClass,
8
- } from './utils';
9
- import { PrContentMediaUpload } from './mediaUpload';
10
- import parse from 'html-react-parser';
11
-
12
- export default function save({ attributes }) {
13
- const {
14
- title,
15
- titleColor,
16
- content,
17
- contentColor,
18
- url,
19
- buttonType,
20
- buttonColor,
21
- buttonColorCustom,
22
- buttonText,
23
- buttonTarget,
24
- Image,
25
- ImageBorderColor,
26
- layout,
27
- fontAwesomeIconBefore,
28
- fontAwesomeIconAfter,
29
- } = attributes;
30
-
31
- const containerClass = getContainerClass(layout);
32
- const btnClass = getButtonClass(buttonColorCustom);
33
- const linkClass = getLinkClass(buttonColor, buttonColorCustom, buttonType);
34
- const linkStyle = getLinkStyle(buttonColorCustom, buttonType);
35
- const iconBefore = getFontawesomeIcon(fontAwesomeIconBefore);
36
- const iconAfter = getFontawesomeIcon(fontAwesomeIconAfter);
37
-
38
- return (
39
- <div {...useBlockProps.save({ className: containerClass })}>
40
- <div className="col-sm-6 vk_prContent_colImg">
41
- <PrContentMediaUpload
42
- Image={Image}
43
- ImageBorderColor={ImageBorderColor}
44
- />
45
- </div>
46
- <div className="col-sm-6 vk_prContent_colTxt">
47
- <RichText.Content
48
- tagName="h3"
49
- value={title}
50
- className={'vk_prContent_colTxt_title'}
51
- style={{ color: titleColor }}
52
- />
53
- <RichText.Content
54
- tagName="p"
55
- className={'vk_prContent_colTxt_text'}
56
- value={content}
57
- style={{ color: contentColor }}
58
- />
59
- {buttonText && (
60
- /* eslint react/jsx-no-target-blank: 0 */
61
- <div className={btnClass}>
62
- {/* eslint-disable-next-line react/jsx-no-target-blank*/}
63
- <a
64
- href={url}
65
- className={linkClass}
66
- rel={
67
- buttonTarget ? 'noopener noreferrer' : undefined
68
- }
69
- style={linkStyle}
70
- target={buttonTarget ? '_blank' : undefined}
71
- >
72
- {parse(iconBefore)}
73
- <span className="vk_button_link_txt">
74
- {buttonText}
75
- </span>
76
- {parse(iconAfter)}
77
- </a>
78
- </div>
79
- )}
80
- </div>
81
- </div>
82
- );
83
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/1.7.1/utils.js DELETED
@@ -1,77 +0,0 @@
1
- export const getContainerClass = (layout) => {
2
- let layoutClass;
3
- if (layout === 'right') {
4
- layoutClass = 'Right';
5
- } else {
6
- layoutClass = 'Left';
7
- }
8
- return `vk_prContent vk_prContent-layout-image${layoutClass}`;
9
- };
10
-
11
- export const getButtonClass = (buttonColorCustom) => {
12
- let btnClass = 'vk_button';
13
- if (buttonColorCustom) {
14
- btnClass = `${btnClass} vk_button-color-custom`;
15
- }
16
- return btnClass;
17
- };
18
-
19
- export const getLinkClass = (buttonColor, buttonColorCustom, buttonType) => {
20
- let linkClass = 'btn btn-block vk_button_link vk_prContent_colTxt_btn';
21
-
22
- if (buttonColorCustom) {
23
- linkClass = `${linkClass} btn-primary`;
24
- // カスタムカラーじゃない場合
25
- } else if (!buttonColorCustom) {
26
- // 塗り
27
- if (buttonType === '0') {
28
- linkClass = `${linkClass} btn-${buttonColor}`;
29
- // 塗りなし
30
- } else if (buttonType === '1') {
31
- linkClass = `${linkClass} btn-outline-${buttonColor}`;
32
- }
33
- }
34
-
35
- return linkClass;
36
- };
37
-
38
- export const getLinkStyle = (buttonColorCustom, buttonType) => {
39
- let linkStyle = null;
40
-
41
- // 塗り
42
- if (buttonType === '0') {
43
- linkStyle = {
44
- backgroundColor: buttonColorCustom,
45
- border: `1px solid ${buttonColorCustom}`,
46
- };
47
- // 塗りなし
48
- } else if (buttonType === '1') {
49
- linkStyle = {
50
- backgroundColor: 'transparent',
51
- border: '1px solid ' + buttonColorCustom,
52
- color: buttonColorCustom,
53
- };
54
- }
55
-
56
- return linkStyle;
57
- };
58
-
59
- export const getFontawesomeIcon = (fontAwesomeIconSelector) => {
60
- let icon = '';
61
- let faIconDatas;
62
-
63
- //過去バージョンをリカバリーした時にiconを正常に表示する
64
- if (fontAwesomeIconSelector && !fontAwesomeIconSelector.match(/<i/)) {
65
- fontAwesomeIconSelector = `<i class="${fontAwesomeIconSelector}"></i>`;
66
- }
67
-
68
- if (fontAwesomeIconSelector) {
69
- //add class and inline css
70
- faIconDatas = fontAwesomeIconSelector.split(' ');
71
- faIconDatas[1] = ' ' + faIconDatas[1] + ` vk_button_link_before `;
72
- icon = faIconDatas.join('');
73
- }
74
-
75
- return icon;
76
- };
77
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/component-fontawesome-deprecated.js DELETED
@@ -1,37 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
-
3
- export class Fontawesome extends Component {
4
- render() {
5
- const {
6
- buttonText,
7
- fontAwesomeIconBefore,
8
- fontAwesomeIconAfter,
9
- } = this.props.attributes;
10
-
11
- let iconBefore = '';
12
- let iconAfter = '';
13
-
14
- if (fontAwesomeIconBefore) {
15
- iconBefore = (
16
- <i
17
- className={`${fontAwesomeIconBefore} vk_button_link_before`}
18
- ></i>
19
- );
20
- }
21
- if (fontAwesomeIconAfter) {
22
- iconAfter = (
23
- <i
24
- className={`${fontAwesomeIconAfter} vk_button_link_after`}
25
- ></i>
26
- );
27
- }
28
-
29
- return (
30
- <>
31
- {iconBefore}
32
- <span className="vk_button_link_txt">{buttonText}</span>
33
- {iconAfter}
34
- </>
35
- );
36
- }
37
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/component-fontawesome.js DELETED
@@ -1,48 +0,0 @@
1
- import parse from 'html-react-parser';
2
- import { Component } from '@wordpress/element';
3
-
4
- export class Fontawesome extends Component {
5
- render() {
6
- let {
7
- buttonText,
8
- fontAwesomeIconBefore,
9
- fontAwesomeIconAfter,
10
- } = this.props.attributes;
11
-
12
- let iconBefore = '';
13
- let faIconFragmentBefore;
14
- let iconAfter = '';
15
- let faIconFragmentAfter;
16
-
17
- //過去バージョンをリカバリーした時にiconを正常に表示する
18
- if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
19
- fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
20
- }
21
- if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
22
- fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
23
- }
24
-
25
- if (fontAwesomeIconBefore) {
26
- //add class and inline css
27
- faIconFragmentBefore = fontAwesomeIconBefore.split(' ');
28
- faIconFragmentBefore[1] =
29
- ' ' + faIconFragmentBefore[1] + ` vk_button_link_before `;
30
- iconBefore = faIconFragmentBefore.join('');
31
- }
32
- if (fontAwesomeIconAfter) {
33
- //add class and inline css
34
- faIconFragmentAfter = fontAwesomeIconAfter.split(' ');
35
- faIconFragmentAfter[1] =
36
- ' ' + faIconFragmentAfter[1] + ` vk_button_link_after `;
37
- iconAfter = faIconFragmentAfter.join('');
38
- }
39
-
40
- return (
41
- <>
42
- {parse(iconBefore)}
43
- <span className="vk_button_link_txt">{buttonText}</span>
44
- {parse(iconAfter)}
45
- </>
46
- );
47
- }
48
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/deprecated/index.js DELETED
@@ -1,165 +0,0 @@
1
- import save000 from './0.0.0/save';
2
- import save001 from './0.0.1/save';
3
- import save002 from './0.0.2/save';
4
- import save003 from './0.0.3/save';
5
- import save0_5_1 from './0.5.1/save';
6
- import save0_43_0 from './0.43.0/save';
7
- import save0_56_3 from './0.56.3/save';
8
- import save0_58_7 from './0.58.7/save';
9
- import save0_58_9 from './0.58.9/save';
10
- import save1_7_1 from './1.7.1/save';
11
-
12
- const blockAttributes = {
13
- title: {
14
- source: 'html',
15
- selector: '.vk_prContent_colTxt_title',
16
- },
17
- titleColor: {
18
- type: 'string',
19
- },
20
- content: {
21
- source: 'html',
22
- selector: '.vk_prContent_colTxt_text',
23
- },
24
- contentColor: {
25
- type: 'string',
26
- },
27
- url: {
28
- type: 'string',
29
- default: null,
30
- },
31
- buttonType: {
32
- type: 'string',
33
- default: '0',
34
- },
35
- buttonColor: {
36
- type: 'string',
37
- default: 'primary',
38
- },
39
- buttonColorCustom: {
40
- type: 'string',
41
- default: null,
42
- },
43
- buttonText: {
44
- source: 'html',
45
- selector: '.vk_button_link_txt',
46
- default: '',
47
- },
48
- buttonTarget: {
49
- type: 'Boolean',
50
- default: false,
51
- },
52
- Image: {
53
- type: 'string',
54
- default: null,
55
- },
56
- ImageBorderColor: {
57
- type: 'string',
58
- default: null,
59
- },
60
- layout: {
61
- type: 'string',
62
- default: 'left',
63
- },
64
- fontAwesomeIconBefore: {
65
- type: 'string',
66
- },
67
- fontAwesomeIconAfter: {
68
- type: 'string',
69
- },
70
- };
71
-
72
- const blockAttributes2 = {
73
- ...blockAttributes,
74
- titleColor: {
75
- type: 'string',
76
- default: ''
77
- },
78
- contentColor: {
79
- type: 'string',
80
- default: ''
81
- },
82
- url: {
83
- type: 'string',
84
- default: ''
85
- },
86
- buttonColorCustom: {
87
- type: 'string',
88
- default: ''
89
- },
90
- Image: {
91
- type: 'string',
92
- default: '{}'
93
- },
94
- ImageBorderColor: {
95
- type: 'string',
96
- default: ''
97
- },
98
- fontAwesomeIconBefore: {
99
- type: 'string',
100
- default: ''
101
- },
102
- fontAwesomeIconAfter: {
103
- type: 'string',
104
- default: ''
105
- }
106
- };
107
-
108
- const blockAttributes3 = {
109
- ...blockAttributes2,
110
- fontAwesomeIconBefore: {
111
- type: 'string',
112
- default: '<i class="fas fa-user"></i>'
113
- },
114
- fontAwesomeIconAfter: {
115
- type: 'string',
116
- default: '<i class="fas fa-user"></i>'
117
- }
118
- };
119
-
120
- const deprecated = [
121
- {
122
- attributes: blockAttributes3,
123
- save: save1_7_1,
124
- },
125
- //Fix: https://github.com/vektor-inc/vk-blocks-pro/issues/355
126
- // 独自後方互換で変化したデータ用の後方互換バージョン
127
- {
128
- attributes: blockAttributes3,
129
- save: save003,
130
- },
131
- {
132
- attributes: blockAttributes3,
133
- save: save0_58_9,
134
- },
135
- {
136
- attributes: blockAttributes3,
137
- save: save0_58_7,
138
- },
139
- {
140
- attributes: blockAttributes3,
141
- save: save0_56_3,
142
- },
143
- {
144
- attributes: blockAttributes3,
145
- save: save0_43_0,
146
- },
147
- {
148
- attributes: blockAttributes2,
149
- save: save0_5_1,
150
- },
151
- {
152
- attributes: blockAttributes2,
153
- save: save002,
154
- },
155
- {
156
- attributes: blockAttributes,
157
- save: save001,
158
- },
159
- {
160
- attributes: blockAttributes,
161
- save: save000,
162
- },
163
- ];
164
-
165
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/edit.js DELETED
@@ -1,294 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import {
3
- PanelBody,
4
- BaseControl,
5
- TextControl,
6
- CheckboxControl,
7
- RadioControl,
8
- } from '@wordpress/components';
9
- import {
10
- InspectorControls,
11
- RichText,
12
- ColorPalette,
13
- useBlockProps,
14
- } from '@wordpress/block-editor';
15
- import {
16
- getContainerClass,
17
- getButtonClass,
18
- getLinkClass,
19
- getLinkStyle,
20
- getFontawesomeIcon,
21
- } from './utils';
22
- import { PrContentMediaUploadEdit } from './mediaUpload';
23
- import { FontAwesome } from '@vkblocks/utils/font-awesome-new';
24
- import parse from 'html-react-parser';
25
-
26
- export default function PrcontentEdit({ attributes, setAttributes, clientId }) {
27
- const {
28
- title,
29
- titleColor,
30
- content,
31
- contentColor,
32
- url,
33
- buttonType,
34
- buttonColor,
35
- buttonColorCustom,
36
- buttonText,
37
- buttonTarget,
38
- Image,
39
- ImageBorderColor,
40
- layout,
41
- fontAwesomeIconBefore,
42
- fontAwesomeIconAfter,
43
- } = attributes;
44
- // eslint-disable-next-line no-undef
45
- const iconFamily = vkFontAwesome.iconFamily;
46
- const containerClass = getContainerClass(layout);
47
- const btnClass = getButtonClass(buttonColorCustom);
48
- const linkClass = getLinkClass(buttonColor, buttonColorCustom, buttonType);
49
- const linkStyle = getLinkStyle(buttonColorCustom, buttonType);
50
- const iconBefore = getFontawesomeIcon(
51
- fontAwesomeIconBefore,
52
- 'vk_button_link_before'
53
- );
54
- const iconAfter = getFontawesomeIcon(
55
- fontAwesomeIconAfter,
56
- 'vk_button_link_after'
57
- );
58
-
59
- const blockProps = useBlockProps({
60
- className: containerClass,
61
- });
62
-
63
- return (
64
- <>
65
- <InspectorControls>
66
- <PanelBody
67
- title={__('Color Setting', 'vk-blocks')}
68
- initialOpen={false}
69
- >
70
- <BaseControl
71
- id={`vk_prContent_titleColor-${clientId}`}
72
- label={__('Title Color', 'vk-blocks')}
73
- >
74
- <ColorPalette
75
- value={titleColor}
76
- onChange={(value) =>
77
- setAttributes({ titleColor: value })
78
- }
79
- />
80
- </BaseControl>
81
- <BaseControl
82
- id={`vk_prContent_contentColor-${clientId}`}
83
- label={__('Content Color', 'vk-blocks')}
84
- >
85
- <ColorPalette
86
- value={contentColor}
87
- onChange={(value) =>
88
- setAttributes({ contentColor: value })
89
- }
90
- />
91
- </BaseControl>
92
- <BaseControl
93
- id={`vk_prContent_image-borderColor-${clientId}`}
94
- label={__('Image Border Color', 'vk-blocks')}
95
- >
96
- <ColorPalette
97
- value={ImageBorderColor}
98
- onChange={(value) =>
99
- setAttributes({ ImageBorderColor: value })
100
- }
101
- />
102
- </BaseControl>
103
- </PanelBody>
104
- <PanelBody
105
- title={__('Button Setting', 'vk-blocks')}
106
- initialOpen={false}
107
- >
108
- <BaseControl
109
- id={`vk_prContent_buttonText-${clientId}`}
110
- label={__('Button Text', 'vk-blocks')}
111
- >
112
- <TextControl
113
- value={buttonText}
114
- onChange={(value) =>
115
- setAttributes({ buttonText: value })
116
- }
117
- placeholder={'Input button text.'}
118
- />
119
- </BaseControl>
120
- <BaseControl
121
- id={`vk_prContent_linkUrl-${clientId}`}
122
- label={__('Link URL', 'vk-blocks')}
123
- >
124
- <TextControl
125
- value={url}
126
- onChange={(value) => setAttributes({ url: value })}
127
- placeholder={'https://vektor-inc.co.jp/'}
128
- />
129
- </BaseControl>
130
- <CheckboxControl
131
- label={__('Open link new tab.', 'vk-blocks')}
132
- checked={buttonTarget}
133
- onChange={(checked) =>
134
- setAttributes({ buttonTarget: checked })
135
- }
136
- />
137
- <BaseControl
138
- id={`vk_prContent_buttonType-${clientId}`}
139
- label={__('Button Type', 'vk-blocks')}
140
- >
141
- <RadioControl
142
- selected={buttonType}
143
- options={[
144
- { label: __('Solid', 'vk-blocks'), value: '0' },
145
- { label: __('Ghost', 'vk-blocks'), value: '1' },
146
- ]}
147
- onChange={(value) =>
148
- setAttributes({ buttonType: value })
149
- }
150
- />
151
- </BaseControl>
152
- <RadioControl
153
- label={__('Default Color:', 'vk-blocks')}
154
- selected={buttonColor}
155
- options={[
156
- {
157
- label: __('Primary', 'vk-blocks'),
158
- value: 'primary',
159
- },
160
- {
161
- label: __('Secondary', 'vk-blocks'),
162
- value: 'secondary',
163
- },
164
- {
165
- label: __('Success', 'vk-blocks'),
166
- value: 'success',
167
- },
168
- { label: __('Info', 'vk-blocks'), value: 'info' },
169
- {
170
- label: __('Warning', 'vk-blocks'),
171
- value: 'warning',
172
- },
173
- {
174
- label: __('Danger', 'vk-blocks'),
175
- value: 'danger',
176
- },
177
- { label: __('Light', 'vk-blocks'), value: 'light' },
178
- { label: __('Dark', 'vk-blocks'), value: 'dark' },
179
- ]}
180
- onChange={(value) =>
181
- setAttributes({ buttonColor: value })
182
- }
183
- />
184
- <BaseControl
185
- id={`vk_prContent_buttonColor-${clientId}`}
186
- label={__('Button Color', 'vk-blocks')}
187
- >
188
- <ColorPalette
189
- value={buttonColorCustom}
190
- onChange={(value) =>
191
- setAttributes({ buttonColorCustom: value })
192
- }
193
- />
194
- </BaseControl>
195
- <BaseControl id={`vk_prContent_icon-${clientId}`}>
196
- <h4 className="mt-0 mb-2">
197
- {__('Icon', 'vk-blocks') +
198
- ' ( ' +
199
- iconFamily +
200
- ' )'}
201
- </h4>
202
- <BaseControl
203
- id={`vk_prContent_icon_beforeText${clientId}`}
204
- label={__('Before text', 'vk-blocks')}
205
- >
206
- <FontAwesome
207
- attributeName={'fontAwesomeIconBefore'}
208
- {...{
209
- attributes,
210
- setAttributes,
211
- }}
212
- />
213
- </BaseControl>
214
- <BaseControl
215
- id={`vk_prContent_icon_afterText-${clientId}`}
216
- label={__('After text', 'vk-blocks')}
217
- >
218
- <FontAwesome
219
- attributeName={'fontAwesomeIconAfter'}
220
- {...{
221
- attributes,
222
- setAttributes,
223
- }}
224
- />
225
- </BaseControl>
226
- </BaseControl>
227
- </PanelBody>
228
- <PanelBody
229
- title={__('Layout Setting', 'vk-blocks')}
230
- initialOpen={false}
231
- >
232
- <RadioControl
233
- label={__('Layout Type', 'vk-blocks')}
234
- selected={layout}
235
- options={[
236
- { label: __('Right', 'vk-blocks'), value: 'right' },
237
- { label: __('Left', 'vk-blocks'), value: 'left' },
238
- ]}
239
- onChange={(value) => setAttributes({ layout: value })}
240
- />
241
- </PanelBody>
242
- </InspectorControls>
243
- <div {...blockProps}>
244
- <div className="col-sm-6 vk_prContent_colImg">
245
- <PrContentMediaUploadEdit
246
- ImageBorderColor={ImageBorderColor}
247
- setAttributes={setAttributes}
248
- Image={Image}
249
- />
250
- </div>
251
- <div className="col-sm-6 vk_prContent_colTxt">
252
- <RichText
253
- tagName="h3"
254
- className={'vk_prContent_colTxt_title'}
255
- onChange={(value) => setAttributes({ title: value })}
256
- value={title}
257
- placeholder={__('Input title.', 'vk-blocks')}
258
- style={{ color: titleColor }}
259
- />
260
- <RichText
261
- tagName="p"
262
- className={'vk_prContent_colTxt_text'}
263
- onChange={(value) => setAttributes({ content: value })}
264
- value={content}
265
- placeholder={__('Input content.', 'vk-blocks')}
266
- style={{ color: contentColor }}
267
- />
268
- {buttonText && (
269
- /* eslint react/jsx-no-target-blank: 0 */
270
- <div className={btnClass}>
271
- <a
272
- href={url}
273
- className={linkClass}
274
- target={buttonTarget ? '_blank' : undefined}
275
- style={linkStyle}
276
- rel={
277
- buttonTarget
278
- ? 'noopener noreferrer'
279
- : undefined
280
- }
281
- >
282
- {parse(iconBefore)}
283
- <span className="vk_button_link_txt">
284
- {buttonText}
285
- </span>
286
- {parse(iconAfter)}
287
- </a>
288
- </div>
289
- )}
290
- </div>
291
- </div>
292
- </>
293
- );
294
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3H1v9.5h2.55a1.6 1.6 0 00-.04.09l-.24.69H0V2h13v11.5h-1.29a1.6 1.6 0 00-.82-.22H8.62c.02-.26-.02-.53-.12-.78H12V3zM15 4.5h9v1h-9v-1zM24 7h-9v1h9V7zM24 2h-9v1h9V2zM17.5 11h4v1h-4v-1z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.7c0-.32.13-.62.37-.85.23-.22.55-.35.88-.35h6.5c.33 0 .65.13.88.35.24.23.37.53.37.85v1.6c0 .32-.13.62-.37.85-.23.22-.55.35-.88.35h-6.5c-.33 0-.65-.13-.88-.35a1.18 1.18 0 01-.37-.85v-1.6zm1.25-.4a.43.43 0 00-.3.12.4.4 0 00-.12.28v1.6a.43.43 0 00.42.4h6.5c.11 0 .22-.04.3-.12a.4.4 0 00.12-.28v-1.6a.4.4 0 00-.13-.28.43.43 0 00-.29-.12h-6.5z" fill="#000"/><path d="M5.62 6a1 1 0 01-1 .99 1 1 0 01-1-1 1 1 0 012 0zM11.1 10.83H2.15c-.42 0-.67-.52-.43-.9l1.44-2.2a.5.5 0 01.85 0l.95 1.43c.2.3.6.33.82.04l2.2-2.8a.5.5 0 01.79 0l2.73 3.5c.29.36.05.93-.4.93zM10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/></svg>
 
src/blocks/pr-content/index.js DELETED
@@ -1,48 +0,0 @@
1
- /**
2
- * Pr-Content block type
3
- *
4
- */
5
- import { ReactComponent as Icon } from './icon.svg';
6
- import deprecated from './deprecated';
7
- import edit from './edit';
8
- import metadata from './block.json';
9
- import save from './save';
10
- import {
11
- iconName,
12
- iconUser,
13
- iconPicture,
14
- title,
15
- content,
16
- baseColor,
17
- url,
18
- } from '@vkblocks/utils/example-data';
19
-
20
- const { name } = metadata;
21
-
22
- export { metadata, name };
23
-
24
- export const settings = {
25
- icon: <Icon />,
26
- example: {
27
- attributes: {
28
- title,
29
- titleColor: baseColor,
30
- content,
31
- contentColor: baseColor,
32
- url,
33
- buttonType: '0',
34
- buttonColor: 'primary',
35
- buttonColorCustom: '',
36
- buttonText: iconName,
37
- buttonTarget: false,
38
- Image: iconPicture,
39
- ImageBorderColor: baseColor,
40
- layout: 'left',
41
- fontAwesomeIconBefore: iconUser,
42
- fontAwesomeIconAfter: iconUser,
43
- },
44
- },
45
- edit,
46
- save,
47
- deprecated,
48
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/index.php DELETED
@@ -1,34 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/pr-content` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register PR content block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_pr_content() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/pr-content',
18
- VK_BLOCKS_DIR_URL . 'build/pr-content/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- register_block_type(
25
- __DIR__,
26
- array(
27
- 'style' => 'vk-blocks/pr-content',
28
- 'editor_style' => 'vk-blocks-build-editor-css',
29
- 'editor_script' => 'vk-blocks-build-js',
30
- )
31
- );
32
- }
33
- add_action( 'init', 'vk_blocks_register_block_pr_content', 99 );
34
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/mediaUpload.js DELETED
@@ -1,146 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { Button } from '@wordpress/components';
3
- import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode';
4
- import { MediaUpload } from '@wordpress/block-editor';
5
-
6
- // 過去に保存された画像か確認
7
- export const isDeprecatedImage = (image) => {
8
- return image && image.indexOf('{') === -1;
9
- };
10
-
11
- // 画像の枠線設定を取得
12
- export const getImageBorder = (ImageBorderColor) => {
13
- let imageBorderSettings = 'none';
14
- //borderColorが指定されなかった場合はボーダーを非表示に
15
- if (ImageBorderColor) {
16
- imageBorderSettings = `1px solid ${ImageBorderColor}`;
17
- }
18
- return imageBorderSettings;
19
- };
20
-
21
- export const PrContentMediaUploadEdit = ({
22
- ImageBorderColor,
23
- setAttributes,
24
- Image,
25
- }) => {
26
- /* eslint no-unused-vars: 0 */
27
- const imageBorderSettings = getImageBorder(ImageBorderColor);
28
- const prContentDatas = {};
29
-
30
- //画像のURL保存
31
- const setImageURL = (value) =>
32
- setAttributes({ Image: value.sizes.full.url });
33
-
34
- //画像のJSONオブジェクト保存
35
- const setImageJSON = (value) => {
36
- if (value) {
37
- // JSONデータから抜き出し
38
- const imageData = {
39
- alt: value.alt,
40
- sizes: {
41
- full: {
42
- url: value.sizes.full.url,
43
- },
44
- },
45
- };
46
-
47
- setAttributes({ Image: JSON.stringify(imageData) });
48
- }
49
- };
50
- const getImagePlaceHolderDeprecated = (image, borderSettings) => {
51
- if (!image) {
52
- return __('Select image', 'vk-blocks');
53
- }
54
- return (
55
- <img
56
- className={'vk_prContent_colImg_image'}
57
- src={image}
58
- alt={__('Upload image', 'vk-blocks')}
59
- style={{ border: borderSettings }}
60
- />
61
- );
62
- };
63
-
64
- const getImagePlaceHolder = (image, borderSettings) => {
65
- image = JSON.parse(fixBrokenUnicode(image));
66
-
67
- if (image === null || typeof image.sizes === 'undefined') {
68
- return __('Select image', 'vk-blocks');
69
- }
70
- return (
71
- <img
72
- className={'vk_prContent_colImg_image'}
73
- src={image.sizes.full.url}
74
- alt={image.alt}
75
- style={{ border: borderSettings }}
76
- />
77
- );
78
- };
79
-
80
- //バージョンによって画像の保存方式変更
81
- if (isDeprecatedImage(Image)) {
82
- prContentDatas.setImage = setImageURL;
83
- prContentDatas.value = Image;
84
- prContentDatas.alt = __('Upload image', 'vk-blocks');
85
- prContentDatas.getImagePlaceHolder = getImagePlaceHolderDeprecated;
86
- } else {
87
- prContentDatas.setImage = setImageJSON;
88
- prContentDatas.value = JSON.parse(fixBrokenUnicode(Image));
89
- prContentDatas.alt = prContentDatas.value.alt;
90
- prContentDatas.getImagePlaceHolder = getImagePlaceHolder;
91
- }
92
-
93
- const isImageUpload =
94
- Image !== null && Image !== undefined && Image !== '' && Image !== '{}';
95
-
96
- return (
97
- <MediaUpload
98
- onSelect={prContentDatas.setImage}
99
- type="image"
100
- value={prContentDatas.value}
101
- render={({ open }) => (
102
- <Button
103
- onClick={open}
104
- className={
105
- isImageUpload ? 'image-button' : 'button button-large'
106
- }
107
- >
108
- {prContentDatas.getImagePlaceHolder(
109
- Image,
110
- imageBorderSettings
111
- )}
112
- </Button>
113
- )}
114
- />
115
- );
116
- };
117
-
118
- export const PrContentMediaUpload = ({ Image, ImageBorderColor }) => {
119
- if (!Image) {
120
- return __('Select Image', 'vk-blocks');
121
- }
122
-
123
- const imageBorderSettings = getImageBorder(ImageBorderColor);
124
-
125
- if (Image && Image.indexOf('{') === -1) {
126
- return (
127
- <img
128
- className={'vk_prContent_colImg_image'}
129
- src={Image}
130
- alt={__('Upload image', 'vk-blocks')}
131
- style={{ border: imageBorderSettings }}
132
- />
133
- );
134
- }
135
- const imageParse = JSON.parse(fixBrokenUnicode(Image));
136
- if (imageParse && typeof imageParse.sizes !== 'undefined') {
137
- return (
138
- <img
139
- className={'vk_prContent_colImg_image'}
140
- src={imageParse.sizes.full.url}
141
- alt={imageParse.alt}
142
- style={{ border: imageBorderSettings }}
143
- />
144
- );
145
- }
146
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/save.js DELETED
@@ -1,89 +0,0 @@
1
- import { RichText, useBlockProps } from '@wordpress/block-editor';
2
- import {
3
- getButtonClass,
4
- getLinkClass,
5
- getLinkStyle,
6
- getFontawesomeIcon,
7
- getContainerClass,
8
- } from './utils';
9
- import { PrContentMediaUpload } from './mediaUpload';
10
- import parse from 'html-react-parser';
11
-
12
- export default function save({ attributes }) {
13
- const {
14
- title,
15
- titleColor,
16
- content,
17
- contentColor,
18
- url,
19
- buttonType,
20
- buttonColor,
21
- buttonColorCustom,
22
- buttonText,
23
- buttonTarget,
24
- Image,
25
- ImageBorderColor,
26
- layout,
27
- fontAwesomeIconBefore,
28
- fontAwesomeIconAfter,
29
- } = attributes;
30
-
31
- const containerClass = getContainerClass(layout);
32
- const btnClass = getButtonClass(buttonColorCustom);
33
- const linkClass = getLinkClass(buttonColor, buttonColorCustom, buttonType);
34
- const linkStyle = getLinkStyle(buttonColorCustom, buttonType);
35
- const iconBefore = getFontawesomeIcon(
36
- fontAwesomeIconBefore,
37
- 'vk_button_link_before'
38
- );
39
- const iconAfter = getFontawesomeIcon(
40
- fontAwesomeIconAfter,
41
- 'vk_button_link_after'
42
- );
43
-
44
- return (
45
- <div {...useBlockProps.save({ className: containerClass })}>
46
- <div className="col-sm-6 vk_prContent_colImg">
47
- <PrContentMediaUpload
48
- Image={Image}
49
- ImageBorderColor={ImageBorderColor}
50
- />
51
- </div>
52
- <div className="col-sm-6 vk_prContent_colTxt">
53
- <RichText.Content
54
- tagName="h3"
55
- value={title}
56
- className={'vk_prContent_colTxt_title'}
57
- style={{ color: titleColor }}
58
- />
59
- <RichText.Content
60
- tagName="p"
61
- className={'vk_prContent_colTxt_text'}
62
- value={content}
63
- style={{ color: contentColor }}
64
- />
65
- {buttonText && (
66
- /* eslint react/jsx-no-target-blank: 0 */
67
- <div className={btnClass}>
68
- {/* eslint-disable-next-line react/jsx-no-target-blank*/}
69
- <a
70
- href={url}
71
- className={linkClass}
72
- rel={
73
- buttonTarget ? 'noopener noreferrer' : undefined
74
- }
75
- style={linkStyle}
76
- target={buttonTarget ? '_blank' : undefined}
77
- >
78
- {parse(iconBefore)}
79
- <span className="vk_button_link_txt">
80
- {buttonText}
81
- </span>
82
- {parse(iconAfter)}
83
- </a>
84
- </div>
85
- )}
86
- </div>
87
- </div>
88
- );
89
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/style.scss DELETED
@@ -1,88 +0,0 @@
1
- /*-------------------------------------------*/
2
- /* Layout
3
- /*-------------------------------------------*/
4
- .vk_prContent {
5
- @media (min-width: 576px) {
6
- display: flex;
7
- .col-sm-6 {
8
- width: 50%;
9
- }
10
- &-layout {
11
- &-imageLeft {
12
- flex-direction: row;
13
- }
14
-
15
- &-imageRight {
16
- flex-direction: row-reverse;
17
- }
18
-
19
- &-imageLeft .vk_prContent_colImg {
20
- padding-right: 2em;
21
- padding-left: 0;
22
- }
23
-
24
- &-imageRight .vk_prContent_colImg {
25
- padding-left: 2em;
26
- padding-right: 0;
27
- }
28
- }
29
- } // @media (min-width: 768px) {
30
- }
31
-
32
- /*-------------------------------------------*/
33
- /* others
34
- /*-------------------------------------------*/
35
- // 編集画面でcssの指定が軽くて負けるので.vk_prContent .vk_prContent_colTxt を先に記述
36
- .vk_prContent {
37
- & &_colTxt {
38
- vertical-align: top;
39
- .vk_prContent_colTxt_title {
40
- font-size: calc(var(--vk-size-text) * 1.75 );
41
- background-color: transparent;
42
- font-weight: bold;
43
- margin-top: 0;
44
- margin-bottom: 0.8em;
45
- outline: unset;
46
- outline-offset: unset;
47
- box-shadow: unset;
48
- border: none;
49
- border-radius:unset;
50
- padding: 0;
51
- color: inherit;
52
- line-height: 1.5;
53
- text-align: left; /* 見出しに左右線デザインを当てられている場合があるので上書きする */
54
- @media (max-width: 575.98px) {
55
- &:first-child {
56
- margin-top: 30px;
57
- }
58
- }
59
- &:before,
60
- &:after {
61
- content: none;
62
-
63
- }
64
- }
65
- &_text {
66
- line-height: 1.8;
67
- margin-bottom: 1.7em;
68
- }
69
- &_btn.btn {
70
- @media (min-width: 992px) {
71
- font-size: 16px;
72
- }
73
- }
74
- } // .vk_prContent_colTxt
75
- .vk_prContent_colImg {
76
- &_image {
77
- max-width: 100%;
78
- height: auto;
79
- }
80
- .components-button.button {
81
- margin: 1em;
82
- }
83
- .components-button.image-button {
84
- margin: 0;
85
- height: auto; //これがないとfirefoxの管理画面上でbutton内のimage画像が上にはみ出す
86
- }
87
- }
88
- } // .vk_prContent {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/pr-content/utils.js DELETED
@@ -1,76 +0,0 @@
1
- export const getContainerClass = (layout) => {
2
- let layoutClass;
3
- if (layout === 'right') {
4
- layoutClass = 'Right';
5
- } else {
6
- layoutClass = 'Left';
7
- }
8
- return `vk_prContent vk_prContent-layout-image${layoutClass}`;
9
- };
10
-
11
- export const getButtonClass = (buttonColorCustom) => {
12
- let btnClass = 'vk_button';
13
- if (buttonColorCustom) {
14
- btnClass = `${btnClass} vk_button-color-custom`;
15
- }
16
- return btnClass;
17
- };
18
-
19
- export const getLinkClass = (buttonColor, buttonColorCustom, buttonType) => {
20
- let linkClass = 'btn btn-block vk_button_link vk_prContent_colTxt_btn';
21
-
22
- if (buttonColorCustom) {
23
- linkClass = `${linkClass} btn-primary`;
24
- // カスタムカラーじゃない場合
25
- } else if (!buttonColorCustom) {
26
- // 塗り
27
- if (buttonType === '0') {
28
- linkClass = `${linkClass} btn-${buttonColor}`;
29
- // 塗りなし
30
- } else if (buttonType === '1') {
31
- linkClass = `${linkClass} btn-outline-${buttonColor}`;
32
- }
33
- }
34
-
35
- return linkClass;
36
- };
37
-
38
- export const getLinkStyle = (buttonColorCustom, buttonType) => {
39
- let linkStyle = null;
40
-
41
- // 塗り
42
- if (buttonType === '0') {
43
- linkStyle = {
44
- backgroundColor: buttonColorCustom,
45
- border: `1px solid ${buttonColorCustom}`,
46
- };
47
- // 塗りなし
48
- } else if (buttonType === '1') {
49
- linkStyle = {
50
- backgroundColor: 'transparent',
51
- border: '1px solid ' + buttonColorCustom,
52
- color: buttonColorCustom,
53
- };
54
- }
55
-
56
- return linkStyle;
57
- };
58
-
59
- export const getFontawesomeIcon = (fontAwesomeIconSelector, iconClassName) => {
60
- let icon = '';
61
- let faIconDatas;
62
-
63
- //過去バージョンをリカバリーした時にiconを正常に表示する
64
- if (fontAwesomeIconSelector && !fontAwesomeIconSelector.match(/<i/)) {
65
- fontAwesomeIconSelector = `<i class="${fontAwesomeIconSelector}"></i>`;
66
- }
67
-
68
- if (fontAwesomeIconSelector) {
69
- //add class and inline css
70
- faIconDatas = fontAwesomeIconSelector.split(' ');
71
- faIconDatas[1] = ' ' + faIconDatas[1] + ' ' + iconClassName + ' ';
72
- icon = faIconDatas.join('');
73
- }
74
-
75
- return icon;
76
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/advanced-spacer-control.js DELETED
@@ -1,30 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { SelectControl } from '@wordpress/components';
3
-
4
- const AdvancedSpacerControl = (props) => {
5
- const { attributes, setAttributes } = props;
6
- const { spaceType } = attributes;
7
- return (
8
- <SelectControl
9
- label={__('Space Type', 'vk-blocks')}
10
- value={spaceType}
11
- onChange={(value) => setAttributes({ spaceType: value })}
12
- options={[
13
- {
14
- value: 'height',
15
- label: __('height', 'vk-blocks'),
16
- },
17
- {
18
- value: 'margin-top',
19
- label: __('margin-top', 'vk-blocks'),
20
- },
21
- {
22
- value: 'margin-bottom',
23
- label: __('margin-bottom', 'vk-blocks'),
24
- },
25
- ]}
26
- />
27
- );
28
- };
29
-
30
- export default AdvancedSpacerControl;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/block.json DELETED
@@ -1,41 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/spacer",
4
- "title": "Responsive Spacer",
5
- "description": "Use responsive spacers to get the margins right.",
6
- "category": "vk-blocks-cat",
7
- "attributes": {
8
- "anchor": {
9
- "type": "string",
10
- "default": null
11
- },
12
- "spaceType": {
13
- "type": "string",
14
- "default": "margin-top"
15
- },
16
- "unit": {
17
- "type": "string",
18
- "default": "px"
19
- },
20
- "pc": {
21
- "type": "number",
22
- "default": 40
23
- },
24
- "tablet": {
25
- "type": "number",
26
- "default": 30
27
- },
28
- "mobile": {
29
- "type": "number",
30
- "default": 20
31
- },
32
- "spaceSize": {
33
- "type": "string",
34
- "default": "medium"
35
- }
36
- },
37
- "textdomain": "vk-blocks",
38
- "supports": {
39
- "anchor": true
40
- }
41
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/0.0.0/component.js DELETED
@@ -1,21 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
-
3
- export class SpacerComponent extends Component {
4
-
5
- render() {
6
- const {
7
- unit,
8
- pc,
9
- tablet,
10
- mobile,
11
- } = this.props.attributes;
12
-
13
- return (
14
- <div className="vk_spacer">
15
- <div className={ 'vk_spacer-display-pc' } style={ {height: pc + unit} }></div>
16
- <div className={ 'vk_spacer-display-tablet' } style={ {height: tablet + unit} }></div>
17
- <div className={ 'vk_spacer-display-mobile' } style={ {height: mobile + unit} }></div>
18
- </div>
19
- );
20
- }
21
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/0.0.0/save.js DELETED
@@ -1,7 +0,0 @@
1
- import { SpacerComponent } from "./component";
2
-
3
- export default function save({ attributes }) {
4
- return (
5
- <SpacerComponent attributes={attributes} />
6
- );
7
- }
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/0.0.1/component.js DELETED
@@ -1,22 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
-
3
- export class SpacerComponent extends Component {
4
-
5
- render() {
6
- const {
7
- unit,
8
- pc,
9
- tablet,
10
- mobile,
11
- } = this.props.attributes;
12
- const className = this.props.className;
13
-
14
- return (
15
- <div className={ `${className} vk_spacer` }>
16
- <div className={ 'vk_spacer-display-pc' } style={ {height: pc + unit} }></div>
17
- <div className={ 'vk_spacer-display-tablet' } style={ {height: tablet + unit} }></div>
18
- <div className={ 'vk_spacer-display-mobile' } style={ {height: mobile + unit} }></div>
19
- </div>
20
- );
21
- }
22
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/0.0.1/save.js DELETED
@@ -1,7 +0,0 @@
1
- import { SpacerComponent } from "./component";
2
-
3
- export default function save({ attributes }) {
4
- return (
5
- <SpacerComponent attributes={attributes} />
6
- );
7
- }
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/0.0.2/component.js DELETED
@@ -1,24 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import classNames from "classnames";
3
-
4
- export class SpacerComponent extends Component {
5
-
6
- render() {
7
- const {
8
- anchor,
9
- unit,
10
- pc,
11
- tablet,
12
- mobile,
13
- } = this.props.attributes;
14
- const className = this.props.className;
15
-
16
- return (
17
- <div id={ anchor } className={ classNames('vk_spacer', className) }>
18
- <div className={ 'vk_spacer-display-pc' } style={ {height: pc + unit} }></div>
19
- <div className={ 'vk_spacer-display-tablet' } style={ {height: tablet + unit} }></div>
20
- <div className={ 'vk_spacer-display-mobile' } style={ {height: mobile + unit} }></div>
21
- </div>
22
- );
23
- }
24
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/0.0.2/save.js DELETED
@@ -1,7 +0,0 @@
1
- import { SpacerComponent } from "./component";
2
-
3
- export default function save({ attributes }) {
4
- return (
5
- <SpacerComponent attributes={attributes} />
6
- );
7
- }
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/0.57.4/component.js DELETED
@@ -1,34 +0,0 @@
1
- import { Component } from '@wordpress/element';
2
- import classNames from 'classnames';
3
-
4
- export class SpacerComponent extends Component {
5
-
6
- render() {
7
- const {
8
- anchor,
9
- spaceType,
10
- unit,
11
- pc,
12
- tablet,
13
- mobile,
14
- } = this.props.attributes;
15
- const className = this.props.className;
16
- if ( spaceType === 'height') {
17
- return (
18
- <div id={ anchor } className={ classNames('vk_spacer', className) }>
19
- <div className={ 'vk_spacer-display-pc' } style={ {height: pc + unit} }></div>
20
- <div className={ 'vk_spacer-display-tablet' } style={ {height: tablet + unit} }></div>
21
- <div className={ 'vk_spacer-display-mobile' } style={ {height: mobile + unit} }></div>
22
- </div>
23
- );
24
- } else if ( spaceType === 'margin-top') {
25
- return (
26
- <div id={ anchor } className={ classNames('vk_spacer', className) }>
27
- <div className={ 'vk_spacer-display-pc' } style={ {marginTop: pc + unit} }></div>
28
- <div className={ 'vk_spacer-display-tablet' } style={ {marginTop: tablet + unit} }></div>
29
- <div className={ 'vk_spacer-display-mobile' } style={ {marginTop: mobile + unit} }></div>
30
- </div>
31
- );
32
- }
33
- }
34
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/0.57.4/save.js DELETED
@@ -1,7 +0,0 @@
1
- import { SpacerComponent } from "./component";
2
-
3
- export default function save({ attributes }) {
4
- return (
5
- <SpacerComponent attributes={attributes} />
6
- );
7
- }
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/0.57.4/schema.js DELETED
@@ -1,35 +0,0 @@
1
- export const schema = {
2
- anchor: {
3
- type: 'string',
4
- default: null,
5
- },
6
- spaceType: {
7
- type: 'string',
8
- default: 'height',
9
- },
10
- unit: {
11
- type: 'string',
12
- default: 'px',
13
- },
14
- pc: {
15
- type: 'number',
16
- default: 40,
17
- },
18
- tablet: {
19
- type: 'number',
20
- default: 30,
21
- },
22
- mobile: {
23
- type: 'number',
24
- default: 20,
25
- },
26
- };
27
-
28
- export const example = {
29
- anchor: null,
30
- spaceType: 'height',
31
- unit: 'px',
32
- pc: 40,
33
- tablet: 30,
34
- mobile: 20
35
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/1.13.2/save.js DELETED
@@ -1,35 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import classnames from 'classnames';
5
-
6
- /**
7
- * WordPress dependencies
8
- */
9
- import { useBlockProps } from '@wordpress/block-editor';
10
-
11
- /**
12
- * Internal dependencies
13
- */
14
- import Spacers from './spacers';
15
-
16
- export default function save({ attributes, anchor }) {
17
- const { spaceType, unit, pc, tablet, mobile, spaceSize } = attributes;
18
- return (
19
- <div
20
- {...useBlockProps.save({
21
- className: classnames('vk_spacer'),
22
- id: anchor,
23
- })}
24
- >
25
- <Spacers
26
- spaceSize={spaceSize}
27
- type={spaceType}
28
- pcSize={pc}
29
- tabletSize={tablet}
30
- mobileSize={mobile}
31
- unit={unit}
32
- />
33
- </div>
34
- );
35
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/1.13.2/spacers.js DELETED
@@ -1,47 +0,0 @@
1
- // Spacers
2
-
3
- const Spacer = ({ style, viewPort }) => {
4
- return <div className={`vk_spacer-display-${viewPort}`} style={style} />;
5
- };
6
-
7
- export default function Spacers({
8
- spaceSize,
9
- type,
10
- pcSize,
11
- tabletSize,
12
- mobileSize,
13
- unit,
14
- }) {
15
- const SPACE_SIZE_CLASSNAMES = {
16
- small: 'vk_block-margin-sm',
17
- medium: 'vk_block-margin-md',
18
- large: 'vk_block-margin-lg',
19
- };
20
-
21
- if (spaceSize !== undefined && SPACE_SIZE_CLASSNAMES[spaceSize]) {
22
- return <div className={SPACE_SIZE_CLASSNAMES[spaceSize]} />;
23
- }
24
-
25
- if (type === 'margin-top') {
26
- return (
27
- <>
28
- <Spacer viewPort={'pc'} style={{ marginTop: pcSize + unit }} />
29
- <Spacer
30
- viewPort={'tablet'}
31
- style={{ marginTop: tabletSize + unit }}
32
- />
33
- <Spacer
34
- viewPort={'mobile'}
35
- style={{ marginTop: mobileSize + unit }}
36
- />
37
- </>
38
- );
39
- }
40
- return (
41
- <>
42
- <Spacer viewPort={'pc'} style={{ height: pcSize + unit }} />
43
- <Spacer viewPort={'tablet'} style={{ height: tabletSize + unit }} />
44
- <Spacer viewPort={'mobile'} style={{ height: mobileSize + unit }} />
45
- </>
46
- );
47
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/1.25.1/save.js DELETED
@@ -1,36 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { useBlockProps } from '@wordpress/block-editor';
5
-
6
- /**
7
- * Internal dependencies
8
- */
9
- import Spacers from './spacers';
10
-
11
- export default function save({ attributes, anchor }) {
12
- const { spaceType, unit, pc, tablet, mobile, spaceSize } = attributes;
13
-
14
- let containerClass = `vk_spacer`;
15
- if ('custom' !== spaceSize) {
16
- containerClass += ` vk_spacer-type-${spaceType}`;
17
- }
18
-
19
- return (
20
- <div
21
- {...useBlockProps.save({
22
- className: containerClass,
23
- id: anchor,
24
- })}
25
- >
26
- <Spacers
27
- spaceSize={spaceSize}
28
- type={spaceType}
29
- pcSize={pc}
30
- tabletSize={tablet}
31
- mobileSize={mobile}
32
- unit={unit}
33
- />
34
- </div>
35
- );
36
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/1.25.1/spacers.js DELETED
@@ -1,47 +0,0 @@
1
- // Spacers
2
-
3
- const Spacer = ({ style, viewPort }) => {
4
- return <div className={`vk_spacer-display-${viewPort}`} style={style} />;
5
- };
6
-
7
- export default function Spacers({
8
- spaceSize,
9
- type,
10
- pcSize,
11
- tabletSize,
12
- mobileSize,
13
- unit,
14
- }) {
15
- const SPACE_SIZE_CLASSNAMES = {
16
- small: 'vk_block-margin-sm',
17
- medium: 'vk_block-margin-md',
18
- large: 'vk_block-margin-lg',
19
- };
20
-
21
- if (spaceSize !== undefined && SPACE_SIZE_CLASSNAMES[spaceSize]) {
22
- return <div className={SPACE_SIZE_CLASSNAMES[spaceSize]} />;
23
- }
24
-
25
- if (type === 'margin-top') {
26
- return (
27
- <>
28
- <Spacer viewPort={'pc'} style={{ marginTop: pcSize + unit }} />
29
- <Spacer
30
- viewPort={'tablet'}
31
- style={{ marginTop: tabletSize + unit }}
32
- />
33
- <Spacer
34
- viewPort={'mobile'}
35
- style={{ marginTop: mobileSize + unit }}
36
- />
37
- </>
38
- );
39
- }
40
- return (
41
- <>
42
- <Spacer viewPort={'pc'} style={{ height: pcSize + unit }} />
43
- <Spacer viewPort={'tablet'} style={{ height: tabletSize + unit }} />
44
- <Spacer viewPort={'mobile'} style={{ height: mobileSize + unit }} />
45
- </>
46
- );
47
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/1.3.2/save.js DELETED
@@ -1,34 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import classnames from 'classnames';
5
-
6
- /**
7
- * WordPress dependencies
8
- */
9
- import { useBlockProps } from '@wordpress/block-editor';
10
-
11
- /**
12
- * Internal dependencies
13
- */
14
- import Spacers from './spacers';
15
-
16
- export default function save({ attributes, anchor }) {
17
- const { spaceType, unit, pc, tablet, mobile } = attributes;
18
- return (
19
- <div
20
- {...useBlockProps.save({
21
- className: classnames('vk_spacer'),
22
- id: anchor,
23
- })}
24
- >
25
- <Spacers
26
- type={spaceType}
27
- pcSize={pc}
28
- tabletSize={tablet}
29
- mobileSize={mobile}
30
- unit={unit}
31
- />
32
- </div>
33
- );
34
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/1.3.2/spacers.js DELETED
@@ -1,35 +0,0 @@
1
- // Spacers
2
-
3
- const Spacer = ({ style, viewPort }) => {
4
- return <div className={`vk_spacer-display-${viewPort}`} style={style} />;
5
- };
6
- export default function Spacers({
7
- type,
8
- pcSize,
9
- tabletSize,
10
- mobileSize,
11
- unit,
12
- }) {
13
- if (type === 'margin-top') {
14
- return (
15
- <>
16
- <Spacer viewPort={'pc'} style={{ marginTop: pcSize + unit }} />
17
- <Spacer
18
- viewPort={'tablet'}
19
- style={{ marginTop: tabletSize + unit }}
20
- />
21
- <Spacer
22
- viewPort={'mobile'}
23
- style={{ marginTop: mobileSize + unit }}
24
- />
25
- </>
26
- );
27
- }
28
- return (
29
- <>
30
- <Spacer viewPort={'pc'} style={{ height: pcSize + unit }} />
31
- <Spacer viewPort={'tablet'} style={{ height: tabletSize + unit }} />
32
- <Spacer viewPort={'mobile'} style={{ height: mobileSize + unit }} />
33
- </>
34
- );
35
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/deprecated/index.js DELETED
@@ -1,91 +0,0 @@
1
- import save000 from './0.0.0/save';
2
- import save001 from './0.0.1/save';
3
- import save002 from './0.0.2/save';
4
- import save0_57_4 from './0.57.4/save';
5
- import save1_3_2 from './1.3.2/save';
6
- import save1_13_2 from './1.13.2/save';
7
- import save1_25_1 from './1.25.1/save';
8
-
9
- export const blockAttributes = {
10
- unit: {
11
- type: 'string',
12
- default: 'px',
13
- },
14
- pc: {
15
- type: 'number',
16
- default: 50,
17
- },
18
- tablet: {
19
- type: 'number',
20
- default: 10,
21
- },
22
- mobile: {
23
- type: 'number',
24
- default: 10,
25
- },
26
- spaceType: {
27
- type: 'string',
28
- default: 'height',
29
- },
30
- };
31
-
32
- const blockAttributes2 = {
33
- ...blockAttributes,
34
- pc: {
35
- type: 'number',
36
- default: 40,
37
- },
38
- tablet: {
39
- type: 'number',
40
- default: 30,
41
- },
42
- mobile: {
43
- type: 'number',
44
- default: 20,
45
- },
46
- anchor: {
47
- type: 'string',
48
- default: null,
49
- },
50
- }
51
-
52
- const blockAttributes3 = {
53
- ...blockAttributes2,
54
- spaceSize: {
55
- type: 'string',
56
- default: 'medium',
57
- }
58
- }
59
-
60
- const deprecated = [
61
- {
62
- attributes:blockAttributes3,
63
- save: save1_25_1,
64
- },
65
- {
66
- attributes:blockAttributes3,
67
- save: save1_13_2,
68
- },
69
- {
70
- attributes:blockAttributes2,
71
- save: save1_3_2,
72
- },
73
- {
74
- attributes: blockAttributes2,
75
- save: save0_57_4,
76
- },
77
- {
78
- attributes: blockAttributes2,
79
- save: save002,
80
- },
81
- {
82
- attributes: blockAttributes,
83
- save: save001,
84
- },
85
- {
86
- attributes: blockAttributes,
87
- save: save000,
88
- },
89
- ];
90
-
91
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/edit.js DELETED
@@ -1,145 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { __ } from '@wordpress/i18n';
5
- import {
6
- PanelBody,
7
- BaseControl,
8
- ButtonGroup,
9
- Button,
10
- } from '@wordpress/components';
11
- import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
12
-
13
- /**
14
- * Internal dependencies
15
- */
16
- import AdvancedViewportControl from '@vkblocks/components/advanced-viewport-control';
17
- import AdvancedUnitControl from '@vkblocks/components/advanced-unit-control';
18
- import AdvancedSpacerControl from './advanced-spacer-control';
19
- import Spacers from './spacers';
20
- import { useEffect } from '@wordpress/element';
21
-
22
- export default function SpacerEdit({
23
- attributes,
24
- setAttributes,
25
- className,
26
- clientId,
27
- anchor,
28
- }) {
29
- const { spaceType, unit, pc, tablet, mobile, spaceSize } = attributes;
30
-
31
- let containerClass = `vk_spacer`;
32
- if ('custom' !== spaceSize) {
33
- containerClass += ` vk_spacer-type-${spaceType}`;
34
- }
35
-
36
- useEffect(() => {
37
- if (spaceSize === undefined) {
38
- setAttributes({ spaceSize: 'custom' });
39
- }
40
- }, [clientId]);
41
-
42
- const blockProps = useBlockProps({
43
- className: containerClass,
44
- id: anchor,
45
- });
46
-
47
- const numberSetting =
48
- spaceSize === 'custom' ? (
49
- <>
50
- <AdvancedUnitControl
51
- attributes={attributes}
52
- setAttributes={setAttributes}
53
- className={className}
54
- />
55
- <BaseControl
56
- label={__('Height for each device.', 'vk-blocks')}
57
- id={`vk_spacer-viewPort-${clientId}`}
58
- >
59
- <AdvancedViewportControl
60
- attributes={attributes}
61
- setAttributes={setAttributes}
62
- className={className}
63
- initial={{ iPc: 40, iTablet: 30, iMobile: 20 }}
64
- id={`vk_spacer-viewPort-${clientId}`}
65
- />
66
- </BaseControl>
67
- </>
68
- ) : (
69
- ''
70
- );
71
-
72
- return (
73
- <>
74
- <InspectorControls>
75
- <PanelBody title={__('Spacer Settings', 'vk-blocks')}>
76
- <ButtonGroup className="mb-3">
77
- <Button
78
- isSmall
79
- isPrimary={spaceSize === 'small'}
80
- isSecondary={spaceSize !== 'small'}
81
- onClick={() =>
82
- setAttributes({ spaceSize: 'small' })
83
- }
84
- >
85
- {__('Small', 'vk-blocks')}
86
- </Button>
87
- <Button
88
- isSmall
89
- isPrimary={spaceSize === 'medium'}
90
- isSecondary={spaceSize !== 'medium'}
91
- onClick={() =>
92
- setAttributes({ spaceSize: 'medium' })
93
- }
94
- >
95
- {__('Medium', 'vk-blocks')}
96
- </Button>
97
- <Button
98
- isSmall
99
- isPrimary={spaceSize === 'large'}
100
- isSecondary={spaceSize !== 'large'}
101
- onClick={() =>
102
- setAttributes({ spaceSize: 'large' })
103
- }
104
- >
105
- {__('Large', 'vk-blocks')}
106
- </Button>
107
- <Button
108
- isSmall
109
- isPrimary={spaceSize === 'custom'}
110
- isSecondary={spaceSize !== 'custom'}
111
- onClick={() =>
112
- setAttributes({ spaceSize: 'custom' })
113
- }
114
- >
115
- {__('Custom', 'vk-blocks')}
116
- </Button>
117
- </ButtonGroup>
118
- <p>
119
- {__(
120
- 'You can change each common margin size from Setting > VK Blocks',
121
- 'vk-blocks'
122
- )}
123
- </p>
124
- <AdvancedSpacerControl
125
- attributes={attributes}
126
- setAttributes={setAttributes}
127
- className={className}
128
- />
129
- {numberSetting}
130
- </PanelBody>
131
- </InspectorControls>
132
-
133
- <div {...blockProps}>
134
- <Spacers
135
- spaceSize={spaceSize}
136
- type={spaceType}
137
- pcSize={pc}
138
- tabletSize={tablet}
139
- mobileSize={mobile}
140
- unit={unit}
141
- />
142
- </div>
143
- </>
144
- );
145
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0h16v1.5H8V0zm2.76 22.5H24V24H9.9c.55-.29.88-.89.86-1.5zm.75-5.92L15.93 21l5.3-5.3-1.03-1.03-3.55 3.55V5.78l3.21 3.2 1.03-1.02-2.48-2.48L15.93 3l-4.96 4.96L11.99 9l3.21-3.21v12.44l-2.79-2.79c-.07.2-.19.4-.35.57l-.55.58z" fill="#000"/><path d="M10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/></svg>
 
src/blocks/spacer/index.js DELETED
@@ -1,32 +0,0 @@
1
- /**
2
- * spacer block type
3
- */
4
-
5
- /**
6
- * Internal dependencies
7
- */
8
- import { ReactComponent as Icon } from './icon.svg';
9
- import metadata from './block.json';
10
- import deprecated from './deprecated/index';
11
- import edit from './edit';
12
- import save from './save';
13
-
14
- const { name } = metadata;
15
-
16
- export { metadata, name };
17
-
18
- export const settings = {
19
- icon: <Icon />,
20
- example: {
21
- anchor: null,
22
- spaceType: 'height',
23
- unit: 'px',
24
- pc: 40,
25
- tablet: 30,
26
- mobile: 20,
27
- spaceSize: 'custom',
28
- },
29
- edit,
30
- save,
31
- deprecated,
32
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/index.php DELETED
@@ -1,171 +0,0 @@
1
- <?php
2
- /**
3
- * Registers the `vk-blocks/spacer` block.
4
- *
5
- * @package vk-blocks
6
- */
7
-
8
- /**
9
- * Register Spacer block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_spacer() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/spacer',
18
- VK_BLOCKS_DIR_URL . 'build/spacer/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- }
23
-
24
- register_block_type(
25
- __DIR__,
26
- array(
27
- 'style' => 'vk-blocks/spacer',
28
- 'editor_style' => 'vk-blocks-build-editor-css',
29
- 'editor_script' => 'vk-blocks-build-js',
30
- )
31
- );
32
- }
33
- add_action( 'init', 'vk_blocks_register_block_spacer', 99 );
34
-
35
- /**
36
- * スペーサーのサイズ（数値）を取得する関数
37
- *
38
- * @param array $options VK Blocks 共通オプション.
39
- * @param string $spacer_size スペーサーのサイズ.
40
- * @param string $device 対象デバイス.
41
- *
42
- * @return integer|float $return 返り値
43
- */
44
- function vk_blocks_get_spacer_size( $options, $spacer_size, $device = '' ) {
45
-
46
- // そもそも値がなかった場合.
47
- if ( ! isset( $options['margin_size'][ $spacer_size ] ) ) {
48
- return null;
49
- }
50
-
51
- // 配列じゃない（デバイス毎のサイズが登録されていない）場合.
52
- if ( ! is_array( $options['margin_size'][ $spacer_size ] ) ) {
53
- return $options['margin_size'][ $spacer_size ];
54
- }
55
-
56
- // 各サイズのデバイス毎のサイズ.
57
- if ( isset( $options['margin_size'][ $spacer_size ][ $device ] ) && '' !== $options['margin_size'][ $spacer_size ][ $device ] ) {
58
- return $options['margin_size'][ $spacer_size ][ $device ];
59
- } else {
60
- // 指定デバイスでのサイズ指定がない場合、他のデバイスで指定しているサイズを自動割り振り
61
- // tablet -> pc -> mobile の順で自動適用する.
62
- // でないと PC と タブが指定済 / モバイル未指定のときに モバイルに tablet より広い PC のサイズが適用されてしまうため.
63
- if ( isset( $options['margin_size'][ $spacer_size ]['tablet'] ) ) {
64
- return $options['margin_size'][ $spacer_size ]['tablet'];
65
- } elseif ( isset( $options['margin_size'][ $spacer_size ]['pc'] ) ) {
66
- return $options['margin_size'][ $spacer_size ]['pc'];
67
- } elseif ( isset( $options['margin_size'][ $spacer_size ]['mobile'] ) ) {
68
- return $options['margin_size'][ $spacer_size ]['mobile'];
69
- } else {
70
- return null;
71
- }
72
- }
73
- return $return;
74
- }
75
-
76
- /**
77
- * 画面サイズ毎のCSSをインライン出力するかどうかを判定する関数
78
- *
79
- * @param array $options VK Blocks 共通オプション.
80
- * @param string $device : 画面の広さ mobile / tablet / pc.
81
- * @return bool : 出力するかどうか
82
- */
83
- function vk_blocks_is_size_print( $options, $device ) {
84
- $return = false;
85
- if ( is_numeric( vk_blocks_get_spacer_size( $options, 'sm', $device ) ) ) {
86
- $return = true;
87
- }
88
- if ( is_numeric( vk_blocks_get_spacer_size( $options, 'md', $device ) ) ) {
89
- $return = true;
90
- }
91
- if ( is_numeric( vk_blocks_get_spacer_size( $options, 'lg', $device ) ) ) {
92
- $return = true;
93
- }
94
- return $return;
95
- }
96
-
97
- /**
98
- * スペーサーのサイズのCSS変数（１行）を出力する関数
99
- *
100
- * @param array $options VK Blocks 共通オプション.
101
- * @param string $spacer_size スペーサーのサイズ.
102
- * @param string $device 対象デバイス.
103
- * @param string $unit 単位.
104
- *
105
- * @return string $style CSS変数指定（１行分）.
106
- */
107
- function vk_blocks_get_spacer_size_style( $options, $spacer_size, $device = '', $unit ) {
108
- $style = '';
109
- $return_size = vk_blocks_get_spacer_size( $options, $spacer_size, $device );
110
- if ( is_numeric( $return_size ) ) {
111
- $style = '--vk-margin-' . $spacer_size . ':' . $return_size . $unit . ';';
112
- }
113
- return $style;
114
- }
115
-
116
- /**
117
- * 共通スペーサーのサイズ指定の全CSSを出力する関数
118
- *
119
- * @param array $options VK Blocks 共通オプション.
120
- * @return string $dynamic_css : 出力するcss
121
- */
122
- function vk_blocks_get_spacer_size_style_all( $options ) {
123
- $vk_margin_size_array = vk_blocks_margin_size_array();
124
- $dynamic_css = '';
125
- if (
126
- ! empty( $options['margin_size']['sm'] ) ||
127
- ! empty( $options['margin_size']['md'] ) ||
128
- ! empty( $options['margin_size']['lg'] )
129
- ) {
130
- if ( ! empty( $options['margin_unit'] ) ) {
131
- $unit = $options['margin_unit'];
132
- } else {
133
- $unit = 'rem';
134
- }
135
-
136
- if ( vk_blocks_is_size_print( $options, 'mobile' ) ) {
137
- $dynamic_css .= '
138
- @media (max-width: 575.98px) {
139
- :root{';
140
- $dynamic_css .= esc_attr( vk_blocks_get_spacer_size_style( $options, 'sm', 'mobile', $unit ) );
141
- $dynamic_css .= esc_attr( vk_blocks_get_spacer_size_style( $options, 'md', 'mobile', $unit ) );
142
- $dynamic_css .= esc_attr( vk_blocks_get_spacer_size_style( $options, 'lg', 'mobile', $unit ) );
143
- $dynamic_css .= '
144
- }
145
- }';
146
- }
147
- if ( vk_blocks_is_size_print( $options, 'tablet' ) ) {
148
- $dynamic_css .= '
149
- @media (min-width: 576px) and (max-width: 991.98px) {
150
- :root{';
151
- $dynamic_css .= esc_attr( vk_blocks_get_spacer_size_style( $options, 'sm', 'tablet', $unit ) );
152
- $dynamic_css .= esc_attr( vk_blocks_get_spacer_size_style( $options, 'md', 'tablet', $unit ) );
153
- $dynamic_css .= esc_attr( vk_blocks_get_spacer_size_style( $options, 'lg', 'tablet', $unit ) );
154
- $dynamic_css .= '
155
- }
156
- }';
157
- }
158
- if ( vk_blocks_is_size_print( $options, 'pc' ) ) {
159
- $dynamic_css .= '
160
- @media (min-width: 992px) {
161
- :root{';
162
- $dynamic_css .= esc_attr( vk_blocks_get_spacer_size_style( $options, 'sm', 'pc', $unit ) );
163
- $dynamic_css .= esc_attr( vk_blocks_get_spacer_size_style( $options, 'md', 'pc', $unit ) );
164
- $dynamic_css .= esc_attr( vk_blocks_get_spacer_size_style( $options, 'lg', 'pc', $unit ) );
165
- $dynamic_css .= '
166
- }
167
- }';
168
- }
169
- }
170
- return $dynamic_css;
171
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/save.js DELETED
@@ -1,36 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { useBlockProps } from '@wordpress/block-editor';
5
-
6
- /**
7
- * Internal dependencies
8
- */
9
- import Spacers from './spacers';
10
-
11
- export default function save({ attributes, anchor }) {
12
- const { spaceType, unit, pc, tablet, mobile, spaceSize } = attributes;
13
-
14
- let containerClass = `vk_spacer`;
15
- if ('custom' !== spaceSize) {
16
- containerClass += ` vk_spacer-type-${spaceType}`;
17
- }
18
-
19
- return (
20
- <div
21
- {...useBlockProps.save({
22
- className: containerClass,
23
- id: anchor,
24
- })}
25
- >
26
- <Spacers
27
- spaceSize={spaceSize}
28
- type={spaceType}
29
- pcSize={pc}
30
- tabletSize={tablet}
31
- mobileSize={mobile}
32
- unit={unit}
33
- />
34
- </div>
35
- );
36
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/spacers.js DELETED
@@ -1,83 +0,0 @@
1
- // Spacers
2
-
3
- const Spacer = ({ style, viewPort }) => {
4
- return <div className={`vk_spacer-display-${viewPort}`} style={style} />;
5
- };
6
-
7
- export default function Spacers({
8
- spaceSize,
9
- type,
10
- pcSize,
11
- tabletSize,
12
- mobileSize,
13
- unit,
14
- }) {
15
- const SPACE_SIZE_CLASSNAMES = {
16
- small: 'vk_block-margin-sm',
17
- medium: 'vk_block-margin-md',
18
- large: 'vk_block-margin-lg',
19
- };
20
-
21
- if (spaceSize !== undefined && SPACE_SIZE_CLASSNAMES[spaceSize]) {
22
- if (type === 'margin-top') {
23
- return (
24
- <div
25
- className={
26
- SPACE_SIZE_CLASSNAMES[spaceSize] + '--margin-top'
27
- }
28
- />
29
- );
30
- } else if (type === 'margin-bottom') {
31
- return (
32
- <div
33
- className={
34
- SPACE_SIZE_CLASSNAMES[spaceSize] + '--margin-bottom'
35
- }
36
- />
37
- );
38
- }
39
- return (
40
- <div className={SPACE_SIZE_CLASSNAMES[spaceSize] + '--height'} />
41
- );
42
- }
43
-
44
- if (type === 'margin-top') {
45
- return (
46
- <>
47
- <Spacer viewPort={'pc'} style={{ marginTop: pcSize + unit }} />
48
- <Spacer
49
- viewPort={'tablet'}
50
- style={{ marginTop: tabletSize + unit }}
51
- />
52
- <Spacer
53
- viewPort={'mobile'}
54
- style={{ marginTop: mobileSize + unit }}
55
- />
56
- </>
57
- );
58
- } else if (type === 'margin-bottom') {
59
- return (
60
- <>
61
- <Spacer
62
- viewPort={'pc'}
63
- style={{ marginBottom: pcSize + unit }}
64
- />
65
- <Spacer
66
- viewPort={'tablet'}
67
- style={{ marginBottom: tabletSize + unit }}
68
- />
69
- <Spacer
70
- viewPort={'mobile'}
71
- style={{ marginBottom: mobileSize + unit }}
72
- />
73
- </>
74
- );
75
- }
76
- return (
77
- <>
78
- <Spacer viewPort={'pc'} style={{ height: pcSize + unit }} />
79
- <Spacer viewPort={'tablet'} style={{ height: tabletSize + unit }} />
80
- <Spacer viewPort={'mobile'} style={{ height: mobileSize + unit }} />
81
- </>
82
- );
83
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/spacer/style.scss DELETED
@@ -1,44 +0,0 @@
1
- /*-------------------------------------------*/
2
- /* CSS
3
- /*-------------------------------------------*/
4
- .vk_spacer-type-margin-top,
5
- .vk_spacer-type-margin-bottom{
6
- div[class*="vk_block-margin"]{
7
- display:block;
8
- overflow:hidden;
9
- }
10
- }
11
- .vk_spacer-type-height {
12
- display:block;
13
- overflow:hidden;
14
- }
15
- @mixin switchVisibility($pc, $tablet, $mobile) {
16
- .vk_spacer {
17
- .vk_spacer-display-pc {
18
- display: $pc;
19
- }
20
-
21
- .vk_spacer-display-tablet {
22
- display: $tablet;
23
- }
24
-
25
- .vk_spacer-display-mobile {
26
- display: $mobile;
27
- }
28
- }
29
- }
30
-
31
- // Small devices (landscape phones, 575.98px以下)
32
- @media (max-width: 575.98px) {
33
- @include switchVisibility(none, none, block);
34
- }
35
-
36
- // Medium devices (tablets, 577pxから 991.98px)
37
- @media (min-width: 576px) and (max-width: 991.98px) {
38
- @include switchVisibility(none, block, none);
39
- }
40
-
41
- // Large devices (desktops, 992px以上)
42
- @media (min-width: 992px) {
43
- @include switchVisibility(block, none, none);
44
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/staff/block.json DELETED
@@ -1,73 +0,0 @@
1
- {
2
- "apiVersion": 2,
3
- "name": "vk-blocks/staff",
4
- "category": "vk-blocks-cat",
5
- "title": "Staff",
6
- "description": "Used for staff introduction, company introduction, school introduction, menu, etc.",
7
- "textdomain": "vk-blocks",
8
- "attributes": {
9
- "vk_staff_text_name": {
10
- "type": "string",
11
- "source": "html",
12
- "selector": "h3"
13
- },
14
- "vk_staff_text_caption": {
15
- "type": "string",
16
- "source": "html",
17
- "selector": "p.vk_staff_text_caption"
18
- },
19
- "vk_staff_text_role": {
20
- "type": "string",
21
- "source": "html",
22
- "selector": "p.vk_staff_text_role"
23
- },
24
- "vk_staff_text_profileTitle": {
25
- "type": "string",
26
- "source": "html",
27
- "selector": "h4"
28
- },
29
- "vk_staff_text_profileText": {
30
- "type": "string",
31
- "source": "html",
32
- "selector": "p.vk_staff_text_profileText"
33
- },
34
- "vk_staff_photo_image": {
35
- "type": "string",
36
- "default": ""
37
- },
38
- "vk_staff_photo_image_alt": {
39
- "type": "string",
40
- "default": "Profile Picture"
41
- },
42
- "vk_staff_layout": {
43
- "type": "string",
44
- "default": "default"
45
- },
46
- "vk_staff_nameColor": {
47
- "type": "string"
48
- },
49
- "vk_staff_captionColor": {
50
- "type": "string"
51
- },
52
- "vk_staff_positionColor": {
53
- "type": "string"
54
- },
55
- "vk_staff_profileTitleColor": {
56
- "type": "string"
57
- },
58
- "vk_staff_profileTextColor": {
59
- "type": "string"
60
- },
61
- "vk_staff_photoBorder": {
62
- "type": "string",
63
- "default": "default"
64
- },
65
- "vk_staff_fontFamily": {
66
- "type": "string",
67
- "default": "0"
68
- }
69
- },
70
- "supports": {
71
- "className": true
72
- }
73
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/staff/deprecated/0.58/component.js DELETED
@@ -1,153 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { Button } from '@wordpress/components';
3
- import { Component } from '@wordpress/element';
4
- import { RichText, MediaUpload } from '@wordpress/block-editor';
5
-
6
- export class NewComponent extends Component {
7
-
8
- render() {
9
-
10
- const {
11
- vk_staff_text_name,
12
- vk_staff_text_caption,
13
- vk_staff_text_role,
14
- vk_staff_text_profileTitle,
15
- vk_staff_text_profileText,
16
- vk_staff_photo_image,
17
- vk_staff_photo_image_alt,
18
- vk_staff_layout,
19
- vk_staff_nameColor,
20
- vk_staff_captionColor,
21
- vk_staff_positionColor,
22
- vk_staff_profileTitleColor,
23
- vk_staff_profileTextColor,
24
- vk_staff_photoBorder,
25
- vk_staff_fontFamily
26
- } = this.props.attributes;
27
- const setAttributes = this.props.setAttributes;
28
- const className = this.props.className;
29
- const for_ = this.props.for_;
30
- let returnELm = '';
31
-
32
- let staffTextClassName = 'vk_staff_text';
33
- if (vk_staff_fontFamily === '1') {
34
- staffTextClassName = classnames(
35
- staffTextClassName,
36
- 'vk_staff-headingFont-serif'
37
- );
38
- }
39
-
40
- if (for_ === 'edit') {
41
-
42
- returnELm = <div className={ `${className} vk_staff vk_staff-layout-${vk_staff_layout}` }>
43
- <div className={ staffTextClassName }>
44
- <RichText
45
- tagName="h3"
46
- className={ 'vk_staff_text_name' }
47
- style={ { color: vk_staff_nameColor } }
48
- onChange={ (value) => setAttributes({ vk_staff_text_name: value }) }
49
- value={ vk_staff_text_name }
50
- placeholder={ __('Your Name', 'vk-blocks') }
51
- />
52
- <RichText
53
- tagName="p"
54
- className={ 'vk_staff_text_caption' }
55
- style={ { color: vk_staff_captionColor } }
56
- onChange={ (value) => setAttributes({ vk_staff_text_caption: value }) }
57
- value={ vk_staff_text_caption }
58
- placeholder={ __('Caption', 'vk-blocks') }
59
- />
60
- <RichText
61
- tagName="p"
62
- className={ 'vk_staff_text_role' }
63
- style={ { color: vk_staff_positionColor } }
64
- onChange={ (value) => setAttributes({ vk_staff_text_role: value }) }
65
- value={ vk_staff_text_role }
66
- placeholder={ __('Role position', 'vk-blocks') }
67
- />
68
- <RichText
69
- tagName="h4"
70
- className={ 'vk_staff_text_profileTitle' }
71
- style={ { color: vk_staff_profileTitleColor } }
72
- onChange={ (value) => setAttributes({ vk_staff_text_profileTitle: value }) }
73
- value={ vk_staff_text_profileTitle }
74
- placeholder={ __('Profile title', 'vk-blocks') }
75
- />
76
- <RichText
77
- tagName="p"
78
- className={ 'vk_staff_text_profileText' }
79
- style={ { color: vk_staff_profileTextColor } }
80
- onChange={ (value) => setAttributes({ vk_staff_text_profileText: value }) }
81
- value={ vk_staff_text_profileText }
82
- placeholder={ __('Profile text', 'vk-blocks') }
83
- />
84
- </div>
85
- <div className={ `vk_staff_photo vk_staff_photo-border-${vk_staff_photoBorder}` }>
86
- <MediaUpload
87
- onSelect={ (value) => setAttributes({ vk_staff_photo_image: value.sizes.full.url }) }
88
- type="image"
89
- className={ 'vk_staff_photo_image' }
90
- value={ vk_staff_photo_image }
91
- render={ ({ open }) => (
92
- <Button
93
- onClick={ open }
94
- className={ vk_staff_photo_image ? 'image-button' : 'button button-large' }
95
- >
96
- { !vk_staff_photo_image ? __('Select image', 'vk-blocks') :
97
- <img className={ `vk_staff_photo_image` } src={ vk_staff_photo_image }
98
- alt={ __(vk_staff_photo_image_alt, 'vk-blocks') } /> }
99
- </Button>
100
- ) }
101
- />
102
- </div>
103
- </div>;
104
-
105
- } else if (for_ === 'save') {
106
-
107
- returnELm = <div className={ `${className} vk_staff vk_staff-layout-${vk_staff_layout}` }>
108
- <div className={ staffTextClassName }>
109
- <RichText.Content
110
- tagName="h3"
111
- className={ 'vk_staff_text_name' }
112
- style={ { color: vk_staff_nameColor } }
113
- value={ vk_staff_text_name } />
114
- <RichText.Content
115
- tagName="p"
116
- className={ 'vk_staff_text_caption' }
117
- style={ { color: vk_staff_captionColor } }
118
- value={ vk_staff_text_caption }
119
- />
120
- <RichText.Content
121
- tagName="p"
122
- className={ 'vk_staff_text_role' }
123
- style={ { color: vk_staff_positionColor } }
124
- value={ vk_staff_text_role }
125
- />
126
- <RichText.Content
127
- tagName="h4"
128
- className={ 'vk_staff_text_profileTitle' }
129
- style={ { color: vk_staff_profileTitleColor } }
130
- value={ vk_staff_text_profileTitle }
131
- />
132
- <RichText.Content
133
- tagName="p"
134
- className={ 'vk_staff_text_profileText' }
135
- style={ { color: vk_staff_profileTextColor } }
136
- value={ vk_staff_text_profileText }
137
- />
138
- </div>
139
- { vk_staff_photo_image ?
140
- <div className={ `vk_staff_photo vk_staff_photo-border-${vk_staff_photoBorder}` }>
141
- <img className={ `vk_staff_photo_image` } src={ vk_staff_photo_image } alt={
142
- vk_staff_photo_image_alt ? __(vk_staff_photo_image_alt, 'vk-blocks')
143
- :
144
- ""
145
- } />
146
- </div>
147
- : ''
148
- }
149
- </div>;
150
- }
151
- return (returnELm);
152
- }
153
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/staff/deprecated/0.58/save.js DELETED
@@ -1,12 +0,0 @@
1
- import { NewComponent } from "./component";
2
-
3
- export default function save({ attributes }) {
4
- return (
5
- <NewComponent
6
- attributes={attributes}
7
- setAttributes={''}
8
- className={''}
9
- for_={'save'}
10
- />
11
- );
12
- }
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/staff/deprecated/1.20.2/save.js DELETED
@@ -1,98 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import classnames from 'classnames';
5
- /**
6
- * WordPress dependencies
7
- */
8
- import { useBlockProps, RichText } from '@wordpress/block-editor';
9
-
10
- // import StaffMediaUpload from './staffMediaUpload';
11
-
12
- export default function save({ attributes, className }) {
13
- const {
14
- vk_staff_layout, // eslint-disable-line camelcase
15
- vk_staff_text_name, // eslint-disable-line camelcase
16
- vk_staff_text_caption, // eslint-disable-line camelcase
17
- vk_staff_text_role, // eslint-disable-line camelcase
18
- vk_staff_text_profileTitle, // eslint-disable-line camelcase
19
- vk_staff_text_profileText, // eslint-disable-line camelcase
20
- vk_staff_nameColor, // eslint-disable-line camelcase
21
- vk_staff_captionColor, // eslint-disable-line camelcase
22
- vk_staff_positionColor, // eslint-disable-line camelcase
23
- vk_staff_profileTitleColor, // eslint-disable-line camelcase
24
- vk_staff_profileTextColor, // eslint-disable-line camelcase
25
- vk_staff_photo_image, // eslint-disable-line camelcase
26
- vk_staff_photo_image_alt, // eslint-disable-line camelcase
27
- vk_staff_photoBorder, // eslint-disable-line camelcase
28
- vk_staff_fontFamily,
29
- } = attributes;
30
-
31
- const classes = classnames('vk_staff', {
32
- [className]: !!className,
33
- [`vk_staff-layout-${vk_staff_layout}`]: !!vk_staff_layout, // eslint-disable-line camelcase
34
- });
35
-
36
- // 画像の線のクラスとimgタグの親タグのクラス名を生成.
37
- const imgBorderClassName = classnames('vk_staff_photo', {
38
- [`vk_staff_photo-border-${vk_staff_photoBorder}`]:
39
- !!vk_staff_photoBorder, // eslint-disable-line camelcase
40
- });
41
-
42
- let staffTextClassName = classnames;
43
- if (vk_staff_fontFamily === '1') {
44
- staffTextClassName = classnames(
45
- 'vk_staff_text',
46
- staffTextClassName,
47
- 'vk_staff-headingFont-serif'
48
- );
49
- } else {
50
- staffTextClassName = classnames('vk_staff_text', staffTextClassName);
51
- }
52
-
53
- return (
54
- <div {...useBlockProps.save({ className: classes })}>
55
- <div className={staffTextClassName}>
56
- <RichText.Content
57
- tagName="h3"
58
- className={'vk_staff_text_name'}
59
- style={{ color: vk_staff_nameColor }}
60
- value={vk_staff_text_name} // eslint-disable-line camelcase
61
- />
62
- <RichText.Content
63
- tagName="p"
64
- className={'vk_staff_text_caption'}
65
- style={{ color: vk_staff_captionColor }}
66
- value={vk_staff_text_caption} // eslint-disable-line camelcase
67
- />
68
- <RichText.Content
69
- tagName="p"
70
- className={'vk_staff_text_role'}
71
- style={{ color: vk_staff_positionColor }}
72
- value={vk_staff_text_role} // eslint-disable-line camelcase
73
- />
74
- <RichText.Content
75
- tagName="h4"
76
- className={'vk_staff_text_profileTitle'}
77
- style={{ color: vk_staff_profileTitleColor }}
78
- value={vk_staff_text_profileTitle} // eslint-disable-line camelcase
79
- />
80
- <RichText.Content
81
- tagName="p"
82
- className={'vk_staff_text_profileText'}
83
- style={{ color: vk_staff_profileTextColor }}
84
- value={vk_staff_text_profileText} // eslint-disable-line camelcase
85
- />
86
- </div>
87
- {vk_staff_photo_image && ( // eslint-disable-line camelcase
88
- <div className={imgBorderClassName}>
89
- <img
90
- className={`vk_staff_photo_image`}
91
- src={vk_staff_photo_image} // eslint-disable-line camelcase
92
- alt={vk_staff_photo_image_alt} // eslint-disable-line camelcase
93
- />
94
- </div>
95
- )}
96
- </div>
97
- );
98
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/staff/deprecated/1.3.1/save.js DELETED
@@ -1,85 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import classnames from 'classnames';
5
- /**
6
- * WordPress dependencies
7
- */
8
- import { useBlockProps, RichText } from '@wordpress/block-editor';
9
-
10
- // import StaffMediaUpload from './staffMediaUpload';
11
-
12
- export default function save({ attributes, className }) {
13
- const {
14
- vk_staff_layout, // eslint-disable-line camelcase
15
- vk_staff_text_name, // eslint-disable-line camelcase
16
- vk_staff_text_caption, // eslint-disable-line camelcase
17
- vk_staff_text_role, // eslint-disable-line camelcase
18
- vk_staff_text_profileTitle, // eslint-disable-line camelcase
19
- vk_staff_text_profileText, // eslint-disable-line camelcase
20
- vk_staff_nameColor, // eslint-disable-line camelcase
21
- vk_staff_captionColor, // eslint-disable-line camelcase
22
- vk_staff_positionColor, // eslint-disable-line camelcase
23
- vk_staff_profileTitleColor, // eslint-disable-line camelcase
24
- vk_staff_profileTextColor, // eslint-disable-line camelcase
25
- vk_staff_photo_image, // eslint-disable-line camelcase
26
- vk_staff_photo_image_alt, // eslint-disable-line camelcase
27
- vk_staff_photoBorder, // eslint-disable-line camelcase
28
- } = attributes;
29
-
30
- const classes = classnames('vk_staff', {
31
- [className]: !!className,
32
- [`vk_staff-layout-${vk_staff_layout}`]: !!vk_staff_layout, // eslint-disable-line camelcase
33
- });
34
-
35
- // 画像の線のクラスとimgタグの親タグのクラス名を生成.
36
- const imgBorderClassName = classnames('vk_staff_photo', {
37
- [`vk_staff_photo-border-${vk_staff_photoBorder}`]: !!vk_staff_photoBorder, // eslint-disable-line camelcase
38
- });
39
-
40
- return (
41
- <div {...useBlockProps.save({ className: classes })}>
42
- <div className={`vk_staff_text`}>
43
- <RichText.Content
44
- tagName="h3"
45
- className={'vk_staff_text_name'}
46
- style={{ color: vk_staff_nameColor }}
47
- value={vk_staff_text_name} // eslint-disable-line camelcase
48
- />
49
- <RichText.Content
50
- tagName="p"
51
- className={'vk_staff_text_caption'}
52
- style={{ color: vk_staff_captionColor }}
53
- value={vk_staff_text_caption} // eslint-disable-line camelcase
54
- />
55
- <RichText.Content
56
- tagName="p"
57
- className={'vk_staff_text_role'}
58
- style={{ color: vk_staff_positionColor }}
59
- value={vk_staff_text_role} // eslint-disable-line camelcase
60
- />
61
- <RichText.Content
62
- tagName="h4"
63
- className={'vk_staff_text_profileTitle'}
64
- style={{ color: vk_staff_profileTitleColor }}
65
- value={vk_staff_text_profileTitle} // eslint-disable-line camelcase
66
- />
67
- <RichText.Content
68
- tagName="p"
69
- className={'vk_staff_text_profileText'}
70
- style={{ color: vk_staff_profileTextColor }}
71
- value={vk_staff_text_profileText} // eslint-disable-line camelcase
72
- />
73
- </div>
74
- {vk_staff_photo_image && ( // eslint-disable-line camelcase
75
- <div className={imgBorderClassName}>
76
- <img
77
- className={`vk_staff_photo_image`}
78
- src={vk_staff_photo_image} // eslint-disable-line camelcase
79
- alt={vk_staff_photo_image_alt} // eslint-disable-line camelcase
80
- />
81
- </div>
82
- )}
83
- </div>
84
- );
85
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/staff/deprecated/index.js DELETED
@@ -1,92 +0,0 @@
1
- import save1_20_2 from './1.20.2/save';
2
- import save1_3_1 from './1.3.1/save';
3
- import save0_58 from './0.58/save';
4
-
5
- export const blockAttributes = {
6
- vk_staff_text_name: {
7
- type: 'string',
8
- source: 'html',
9
- selector: 'h3',
10
- },
11
- vk_staff_text_caption: {
12
- type: 'string',
13
- source: 'html',
14
- selector: 'p.vk_staff_text_caption',
15
- },
16
- vk_staff_text_role: {
17
- type: 'string',
18
- source: 'html',
19
- selector: 'p.vk_staff_text_role',
20
- },
21
- vk_staff_text_profileTitle: {
22
- type: 'string',
23
- source: 'html',
24
- selector: 'h4',
25
- },
26
- vk_staff_text_profileText: {
27
- type: 'string',
28
- source: 'html',
29
- selector: 'p.vk_staff_text_profileText',
30
- },
31
- vk_staff_photo_image: {
32
- type: 'string',
33
- default: '',
34
- },
35
- vk_staff_photo_image_alt: {
36
- type: 'string',
37
- default: 'Profile Picture',
38
- },
39
- vk_staff_layout: {
40
- type: 'string',
41
- default: 'default',
42
- },
43
- vk_staff_nameColor: {
44
- type: 'string',
45
- default: 'inherit',
46
- },
47
- vk_staff_captionColor: {
48
- type: 'string',
49
- default: 'inherit',
50
- },
51
- vk_staff_positionColor: {
52
- type: 'string',
53
- default: 'inherit',
54
- },
55
- vk_staff_profileTitleColor: {
56
- type: 'string',
57
- default: 'inherit',
58
- },
59
- vk_staff_profileTextColor: {
60
- type: 'string',
61
- default: 'inherit',
62
- },
63
- vk_staff_photoBorder: {
64
- type: 'string',
65
- default: 'default',
66
- }
67
- };
68
-
69
- const blockAttributes2 = {
70
- ...blockAttributes,
71
- vk_staff_fontFamily: {
72
- type: 'string',
73
- default: '0',
74
- },
75
- }
76
-
77
- const deprecated = [
78
- {
79
- attributes: blockAttributes2,
80
- save: save1_20_2
81
- },
82
- {
83
- attributes: blockAttributes2,
84
- save: save1_3_1
85
- },
86
- {
87
- attributes: blockAttributes,
88
- save: save0_58
89
- }
90
- ];
91
-
92
- export default deprecated;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/staff/edit.js DELETED
@@ -1,374 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import classnames from 'classnames';
5
-
6
- /**
7
- * WordPress dependencies
8
- */
9
- import { __ } from '@wordpress/i18n';
10
- import {
11
- TextControl,
12
- PanelBody,
13
- RadioControl,
14
- BaseControl,
15
- SelectControl,
16
- Button,
17
- } from '@wordpress/components';
18
- import {
19
- InspectorControls,
20
- useBlockProps,
21
- RichText,
22
- MediaUpload,
23
- } from '@wordpress/block-editor';
24
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
25
- import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette';
26
-
27
- export default function StaffEdit(props) {
28
- const { attributes, setAttributes, className, clientId } = props;
29
- // id生成
30
- const vkStaffNameColorId = `vk_staff_name-color-${clientId}`;
31
- const vkStaffCaptionColorId = `vk_staff_caption-color-${clientId}`;
32
- const vkStaffPositionColorId = `vk_staff_position-color-${clientId}`;
33
- const vkStaffProfileTitleColorId = `vk_staff_profileTitle-color-${clientId}`;
34
- const vkStaffProfileTextColorId = `vk_staff_profileText-color-${clientId}`;
35
- const {
36
- vk_staff_layout, // eslint-disable-line camelcase
37
- vk_staff_nameColor, // eslint-disable-line camelcase
38
- vk_staff_captionColor, // eslint-disable-line camelcase
39
- vk_staff_positionColor, // eslint-disable-line camelcase
40
- vk_staff_profileTitleColor, // eslint-disable-line camelcase
41
- vk_staff_profileTextColor, // eslint-disable-line camelcase
42
- vk_staff_photo_image_alt, // eslint-disable-line camelcase
43
- vk_staff_photoBorder, // eslint-disable-line camelcase
44
- vk_staff_text_name, // eslint-disable-line camelcase
45
- vk_staff_text_caption, // eslint-disable-line camelcase
46
- vk_staff_text_role, // eslint-disable-line camelcase
47
- vk_staff_text_profileTitle, // eslint-disable-line camelcase
48
- vk_staff_text_profileText, // eslint-disable-line camelcase
49
- vk_staff_photo_image, // eslint-disable-line camelcase
50
- vk_staff_fontFamily,
51
- } = attributes;
52
-
53
- const classes = classnames('vk_staff', {
54
- [className]: !!className,
55
- [`vk_staff-layout-${vk_staff_layout}`]: !!vk_staff_layout, // eslint-disable-line camelcase
56
- });
57
-
58
- const blockProps = useBlockProps({
59
- className: classes,
60
- });
61
-
62
- // 画像の線のクラスとimgタグの親タグのクラス名を生成.
63
- const imgBorderClassName = classnames('vk_staff_photo', {
64
- [`vk_staff_photo-border-${vk_staff_photoBorder}`]:
65
- !!vk_staff_photoBorder, // eslint-disable-line camelcase
66
- });
67
-
68
- let staffTextClassName = classnames;
69
- if (vk_staff_fontFamily === '1') {
70
- staffTextClassName = classnames(
71
- 'vk_staff_text',
72
- staffTextClassName,
73
- 'vk_staff-headingFont-serif'
74
- );
75
- } else {
76
- staffTextClassName = classnames('vk_staff_text', staffTextClassName);
77
- }
78
-
79
- let staffNameColorInlineStyle = {};
80
- let staffTextNameClassName = '';
81
- if (vk_staff_nameColor !== undefined) {
82
- staffTextNameClassName += ` has-text-color`;
83
- if (isHexColor(vk_staff_nameColor)) {
84
- staffNameColorInlineStyle = { color: `${vk_staff_nameColor}` };
85
- } else {
86
- staffTextNameClassName += ` has-${vk_staff_nameColor}-color`;
87
- }
88
- }
89
-
90
- let staffCaptionColorInlineStyle = {};
91
- let staffCaptionClassName = '';
92
- if (vk_staff_captionColor !== undefined) {
93
- staffCaptionClassName += ` has-text-color`;
94
- if (isHexColor(vk_staff_captionColor)) {
95
- staffCaptionColorInlineStyle = {
96
- color: `${vk_staff_captionColor}`,
97
- };
98
- } else {
99
- staffCaptionClassName += ` has-${vk_staff_captionColor}-color`;
100
- }
101
- }
102
-
103
- let staffPositionColorInlineStyle = {};
104
- let staffPositionClassName = '';
105
- if (vk_staff_positionColor !== undefined) {
106
- staffPositionClassName += ` has-text-color`;
107
- if (isHexColor(vk_staff_positionColor)) {
108
- staffPositionColorInlineStyle = {
109
- color: `${vk_staff_positionColor}`,
110
- };
111
- } else {
112
- staffPositionClassName += ` has-${vk_staff_positionColor}-color`;
113
- }
114
- }
115
-
116
- let staffProfileTitleColorInlineStyle = {};
117
- let staffProfileTitleClassName = '';
118
- if (vk_staff_profileTitleColor !== undefined) {
119
- staffProfileTitleClassName += ` has-text-color`;
120
- if (isHexColor(vk_staff_profileTitleColor)) {
121
- staffProfileTitleColorInlineStyle = {
122
- color: `${vk_staff_profileTitleColor}`,
123
- };
124
- } else {
125
- staffProfileTitleClassName += ` has-${vk_staff_profileTitleColor}-color`;
126
- }
127
- }
128
-
129
- let staffProfileTextColorInlineStyle = {};
130
- let staffProfileTextClassName = '';
131
- if (vk_staff_profileTextColor !== undefined) {
132
- staffProfileTextClassName += ` has-text-color`;
133
- if (isHexColor(vk_staff_profileTextColor)) {
134
- staffProfileTextColorInlineStyle = {
135
- color: `${vk_staff_profileTextColor}`,
136
- };
137
- } else {
138
- staffProfileTextClassName += ` has-${vk_staff_profileTextColor}-color`;
139
- }
140
- }
141
-
142
- return (
143
- <>
144
- <InspectorControls>
145
- <PanelBody title={__('Layout', 'vk-blocks')}>
146
- <SelectControl
147
- value={vk_staff_layout} // eslint-disable-line camelcase
148
- onChange={
149
- (value) => setAttributes({ vk_staff_layout: value }) // eslint-disable-line camelcase
150
- }
151
- options={[
152
- {
153
- value: 'default',
154
- label: __('Default', 'vk-blocks'),
155
- },
156
- {
157
- value: 'imageLeft',
158
- label: __('Image left', 'vk-blocks'),
159
- },
160
- ]}
161
- />
162
- </PanelBody>
163
- <PanelBody title={__('Image border', 'vk-blocks')}>
164
- <SelectControl
165
- value={vk_staff_photoBorder} // eslint-disable-line camelcase
166
- onChange={
167
- (value) =>
168
- setAttributes({ vk_staff_photoBorder: value }) // eslint-disable-line camelcase
169
- }
170
- options={[
171
- {
172
- value: 'default',
173
- label: __('Default', 'vk-blocks'),
174
- },
175
- {
176
- value: 'none',
177
- label: __('None', 'vk-blocks'),
178
- },
179
- ]}
180
- />
181
- </PanelBody>
182
- <PanelBody title={__('Alt text', 'vk-blocks')}>
183
- <BaseControl
184
- help={__(
185
- 'Set the alt text for profile image',
186
- 'vk-blocks'
187
- )}
188
- >
189
- <TextControl
190
- value={vk_staff_photo_image_alt} // eslint-disable-line camelcase
191
- onChange={(value) =>
192
- setAttributes({
193
- vk_staff_photo_image_alt: value, // eslint-disable-line camelcase
194
- })
195
- }
196
- />
197
- </BaseControl>
198
- </PanelBody>
199
- <PanelBody title={__('Color', 'vk-blocks')}>
200
- <BaseControl
201
- id={vkStaffNameColorId}
202
- label={__('Staff name', 'vk-blocks')}
203
- >
204
- <AdvancedColorPalette
205
- id={vkStaffNameColorId}
206
- schema={'vk_staff_nameColor'}
207
- {...props}
208
- />
209
- </BaseControl>
210
- <BaseControl
211
- id={vkStaffCaptionColorId}
212
- label={__('Name caption', 'vk-blocks')}
213
- >
214
- <AdvancedColorPalette
215
- id={vkStaffCaptionColorId}
216
- schema={'vk_staff_captionColor'}
217
- {...props}
218
- />
219
- </BaseControl>
220
- <BaseControl
221
- id={vkStaffPositionColorId}
222
- label={__('Role position', 'vk-blocks')}
223
- >
224
- <AdvancedColorPalette
225
- id={vkStaffPositionColorId}
226
- schema={'vk_staff_positionColor'}
227
- {...props}
228
- />
229
- </BaseControl>
230
- <BaseControl
231
- id={vkStaffProfileTitleColorId}
232
- label={__('Profile title', 'vk-blocks')}
233
- >
234
- <AdvancedColorPalette
235
- id={vkStaffProfileTitleColorId}
236
- schema={'vk_staff_profileTitleColor'}
237
- {...props}
238
- />
239
- </BaseControl>
240
- <BaseControl
241
- id={vkStaffProfileTextColorId}
242
- label={__('Profile text', 'vk-blocks')}
243
- >
244
- <AdvancedColorPalette
245
- id={vkStaffProfileTextColorId}
246
- schema={'vk_staff_profileTextColor'}
247
- {...props}
248
- />
249
- </BaseControl>
250
- </PanelBody>
251
- <PanelBody title={__('Heading Font', 'vk-blocks')}>
252
- <RadioControl
253
- label={__('Font', 'vk-blocks')}
254
- selected={vk_staff_fontFamily}
255
- options={[
256
- {
257
- label: __('Unspecified', 'vk-blocks'),
258
- value: '0',
259
- },
260
- {
261
- label: __('minchoBody', 'vk-blocks'),
262
- value: '1',
263
- },
264
- ]}
265
- onChange={(value) =>
266
- setAttributes({ vk_staff_fontFamily: value })
267
- }
268
- />
269
- </PanelBody>
270
- </InspectorControls>
271
-
272
- <div {...blockProps}>
273
- <div className={staffTextClassName}>
274
- <RichText
275
- tagName="h3"
276
- className={
277
- `vk_staff_text_name` + staffTextNameClassName
278
- }
279
- style={staffNameColorInlineStyle}
280
- onChange={(value) =>
281
- setAttributes({ vk_staff_text_name: value })
282
- }
283
- value={vk_staff_text_name} // eslint-disable-line camelcase
284
- placeholder={__('Your Name', 'vk-blocks')}
285
- />
286
- <RichText
287
- tagName="p"
288
- className={
289
- `vk_staff_text_caption` + staffCaptionClassName
290
- }
291
- style={staffCaptionColorInlineStyle}
292
- onChange={(value) =>
293
- setAttributes({ vk_staff_text_caption: value })
294
- }
295
- value={vk_staff_text_caption} // eslint-disable-line camelcase
296
- placeholder={__('Caption', 'vk-blocks')}
297
- />
298
- <RichText
299
- tagName="p"
300
- className={
301
- `vk_staff_text_role` + staffPositionClassName
302
- }
303
- style={staffPositionColorInlineStyle}
304
- onChange={(value) =>
305
- setAttributes({ vk_staff_text_role: value })
306
- }
307
- value={vk_staff_text_role} // eslint-disable-line camelcase
308
- placeholder={__('Role position', 'vk-blocks')}
309
- />
310
- <RichText
311
- tagName="h4"
312
- className={
313
- `vk_staff_text_profileTitle` +
314
- staffProfileTitleClassName
315
- }
316
- style={staffProfileTitleColorInlineStyle}
317
- onChange={(value) =>
318
- setAttributes({ vk_staff_text_profileTitle: value })
319
- }
320
- value={vk_staff_text_profileTitle} // eslint-disable-line camelcase
321
- placeholder={__('Profile title', 'vk-blocks')}
322
- />
323
- <RichText
324
- tagName="p"
325
- className={
326
- `vk_staff_text_profileText` +
327
- staffProfileTextClassName
328
- }
329
- style={staffProfileTextColorInlineStyle}
330
- onChange={
331
- (value) =>
332
- setAttributes({
333
- vk_staff_text_profileText: value,
334
- }) // eslint-disable-line camelcase
335
- }
336
- value={vk_staff_text_profileText} // eslint-disable-line camelcase
337
- placeholder={__('Profile text', 'vk-blocks')}
338
- />
339
- </div>
340
- <div className={imgBorderClassName}>
341
- <MediaUpload
342
- onSelect={(value) =>
343
- setAttributes({
344
- vk_staff_photo_image: value.sizes.full.url,
345
- })
346
- }
347
- type="image"
348
- value={vk_staff_photo_image} // eslint-disable-line camelcase
349
- render={({ open }) => (
350
- <Button
351
- onClick={open}
352
- className={
353
- vk_staff_photo_image // eslint-disable-line camelcase
354
- ? 'image-button'
355
- : 'button button-large'
356
- }
357
- >
358
- {!vk_staff_photo_image ? ( // eslint-disable-line camelcase
359
- __('Select image', 'vk-blocks')
360
- ) : (
361
- <img
362
- className={`vk_staff_photo_image`}
363
- src={vk_staff_photo_image} // eslint-disable-line camelcase
364
- alt={vk_staff_photo_image_alt} // eslint-disable-line camelcase
365
- />
366
- )}
367
- </Button>
368
- )}
369
- />
370
- </div>
371
- </div>
372
- </>
373
- );
374
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/staff/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 4.5H2a.5.5 0 00-.5.5v8.28H0V5c0-1.1.9-2 2-2h20a2 2 0 012 2v13a2 2 0 01-2 2H10.04l-.44-1.41.08-.09H22a.5.5 0 00.5-.5V5a.5.5 0 00-.5-.5zM8.1 11.9H12v1.2H8.62a1.7 1.7 0 00-.53-1.2zm-4.12 0c-.2.18-.37.42-.47.69l-.18.51H3v-1.2h.98zM12 10.6H3V9.4h9v1.2zM3 8h2V6H3v2zm6 0H7V6h2v2zm2 0h2V6h-2v2zm6.5 4a2 2 0 100-4 2 2 0 000 4zm3.5 3.4c0 .33-.31.6-.7.6h-5.6c-.39 0-.7-.27-.7-.6v-.6c0-1 .94-1.8 2.1-1.8.14 0 .26.04.4.09.22.07.5.16 1 .16s.79-.1 1-.16c.15-.05.27-.09.4-.09 1.16 0 2.1.8 2.1 1.8v.6z" fill="#000"/><path d="M10.89 14.78H7.62a.11.11 0 00-.1.08l-.25.72c-.02.08.03.16.1.16h1.27c.1 0 .15.12.08.19L6.7 18.1l1.05 3.4c.02.07-.03.14-.1.14H6.63a.1.1 0 01-.1-.08L6 19.83c-.03-.1-.17-.1-.2 0l-.43 1.22a.1.1 0 000 .06l.39 1.49c.01.04.06.08.1.08h3.29c.07 0 .12-.08.1-.14l-1.33-4.28c-.01-.04 0-.09.03-.12l3.02-3.17c.07-.07.01-.2-.08-.2z" fill="#000"/><path d="M7.02 13H5.03a.11.11 0 00-.1.08l-.26.73c-.03.07.03.15.1.15h.84c.08 0 .13.07.1.15l-2.37 6.72a.1.1 0 01-.2 0l-1.7-4.85a.11.11 0 01.1-.15h.86c.04 0 .09.03.1.07l.62 1.75c.03.1.17.1.2 0l.96-2.72a.11.11 0 00-.1-.15H.1c-.08 0-.13.07-.1.15l3.12 9c.04.1.17.1.2 0l3.8-10.78c.02-.07-.03-.15-.1-.15z" fill="#D8141C"/></svg>
 
src/blocks/staff/index.js DELETED
@@ -1,49 +0,0 @@
1
- /**
2
- * staff block type
3
- */
4
-
5
- /**
6
- * Internal dependencies
7
- */
8
- import {
9
- iconPicture,
10
- profileTitle,
11
- position,
12
- profileName,
13
- profileLifeTime,
14
- content,
15
- } from '@vkblocks/utils/example-data';
16
- import { ReactComponent as Icon } from './icon.svg';
17
-
18
- import edit from './edit';
19
- import save from './save';
20
- import deprecated from './deprecated/index';
21
- import metadata from './block.json';
22
-
23
- const { name } = metadata;
24
-
25
- export { metadata, name };
26
-
27
- export const settings = {
28
- icon: <Icon />,
29
- example: {
30
- attributes: {
31
- vk_staff_text_name: profileName,
32
- vk_staff_text_caption: profileLifeTime,
33
- vk_staff_text_role: position,
34
- vk_staff_text_profileTitle: profileTitle,
35
- vk_staff_text_profileText: content,
36
- vk_staff_photo_image: iconPicture,
37
- vk_staff_layout: 'default',
38
- vk_staff_nameColor: 'inherit',
39
- vk_staff_captionColor: 'inherit',
40
- vk_staff_positionColor: 'inherit',
41
- vk_staff_profileTitleColor: 'inherit',
42
- vk_staff_profileTextColor: 'inherit',
43
- vk_staff_photoBorder: 'default',
44
- },
45
- },
46
- edit,
47
- save,
48
- deprecated,
49
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/staff/index.php DELETED
@@ -1,40 +0,0 @@
1
- <?php
2
- /**
3
- * Block - Staff
4
- *
5
- * @package vk_blocks
6
- */
7
-
8
- /**
9
- * Register Staff block.
10
- *
11
- * @return void
12
- */
13
- function vk_blocks_register_block_staff() {
14
- // Register Style.
15
- if ( ! is_admin() ) {
16
- wp_register_style(
17
- 'vk-blocks/staff',
18
- VK_BLOCKS_DIR_URL . 'build/staff/style.css',
19
- array(),
20
- VK_BLOCKS_VERSION
21
- );
22
- } else {
23
- wp_register_style(
24
- 'vk-blocks/staff',
25
- VK_BLOCKS_DIR_URL . '/build/staff/style.css',
26
- array(),
27
- filemtime( VK_BLOCKS_DIR_PATH . 'build/staff/style.css' )
28
- );
29
- }
30
-
31
- register_block_type(
32
- __DIR__,
33
- array(
34
- 'style' => 'vk-blocks/staff',
35
- 'editor_style' => 'vk-blocks-build-editor-css',
36
- 'editor_script' => 'vk-blocks-build-js',
37
- )
38
- );
39
- }
40
- add_action( 'init', 'vk_blocks_register_block_staff', 99 );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/staff/save.js DELETED
@@ -1,167 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import classnames from 'classnames';
5
- /**
6
- * WordPress dependencies
7
- */
8
- import { useBlockProps, RichText } from '@wordpress/block-editor';
9
- import { isHexColor } from '@vkblocks/utils/is-hex-color';
10
-
11
- // import StaffMediaUpload from './staffMediaUpload';
12
-
13
- export default function save({ attributes, className }) {
14
- const {
15
- vk_staff_layout, // eslint-disable-line camelcase
16
- vk_staff_text_name, // eslint-disable-line camelcase
17
- vk_staff_text_caption, // eslint-disable-line camelcase
18
- vk_staff_text_role, // eslint-disable-line camelcase
19
- vk_staff_text_profileTitle, // eslint-disable-line camelcase
20
- vk_staff_text_profileText, // eslint-disable-line camelcase
21
- vk_staff_nameColor, // eslint-disable-line camelcase
22
- vk_staff_captionColor, // eslint-disable-line camelcase
23
- vk_staff_positionColor, // eslint-disable-line camelcase
24
- vk_staff_profileTitleColor, // eslint-disable-line camelcase
25
- vk_staff_profileTextColor, // eslint-disable-line camelcase
26
- vk_staff_photo_image, // eslint-disable-line camelcase
27
- vk_staff_photo_image_alt, // eslint-disable-line camelcase
28
- vk_staff_photoBorder, // eslint-disable-line camelcase
29
- vk_staff_fontFamily,
30
- } = attributes;
31
-
32
- const classes = classnames('vk_staff', {
33
- [className]: !!className,
34
- [`vk_staff-layout-${vk_staff_layout}`]: !!vk_staff_layout, // eslint-disable-line camelcase
35
- });
36
-
37
- // 画像の線のクラスとimgタグの親タグのクラス名を生成.
38
- const imgBorderClassName = classnames('vk_staff_photo', {
39
- [`vk_staff_photo-border-${vk_staff_photoBorder}`]:
40
- !!vk_staff_photoBorder, // eslint-disable-line camelcase
41
- });
42
-
43
- let staffTextClassName = classnames;
44
- if (vk_staff_fontFamily === '1') {
45
- staffTextClassName = classnames(
46
- 'vk_staff_text',
47
- staffTextClassName,
48
- 'vk_staff-headingFont-serif'
49
- );
50
- } else {
51
- staffTextClassName = classnames('vk_staff_text', staffTextClassName);
52
- }
53
-
54
- let staffNameColorInlineStyle = {};
55
- let staffTextNameClassName = '';
56
- if (vk_staff_nameColor !== undefined) {
57
- staffTextNameClassName += ` has-text-color`;
58
- if (isHexColor(vk_staff_nameColor)) {
59
- staffNameColorInlineStyle = { color: `${vk_staff_nameColor}` };
60
- } else {
61
- staffTextNameClassName += ` has-${vk_staff_nameColor}-color`;
62
- }
63
- }
64
-
65
- let staffCaptionColorInlineStyle = {};
66
- let staffCaptionClassName = '';
67
- if (vk_staff_captionColor !== undefined) {
68
- staffCaptionClassName += ` has-text-color`;
69
- if (isHexColor(vk_staff_captionColor)) {
70
- staffCaptionColorInlineStyle = {
71
- color: `${vk_staff_captionColor}`,
72
- };
73
- } else {
74
- staffCaptionClassName += ` has-${vk_staff_captionColor}-color`;
75
- }
76
- }
77
-
78
- let staffPositionColorInlineStyle = {};
79
- let staffPositionClassName = '';
80
- if (vk_staff_positionColor !== undefined) {
81
- staffPositionClassName += ` has-text-color`;
82
- if (isHexColor(vk_staff_positionColor)) {
83
- staffPositionColorInlineStyle = {
84
- color: `${vk_staff_positionColor}`,
85
- };
86
- } else {
87
- staffPositionClassName += ` has-${vk_staff_positionColor}-color`;
88
- }
89
- }
90
-
91
- let staffProfileTitleColorInlineStyle = {};
92
- let staffProfileTitleClassName = '';
93
- if (vk_staff_profileTitleColor !== undefined) {
94
- staffProfileTitleClassName += ` has-text-color`;
95
- if (isHexColor(vk_staff_profileTitleColor)) {
96
- staffProfileTitleColorInlineStyle = {
97
- color: `${vk_staff_profileTitleColor}`,
98
- };
99
- } else {
100
- staffProfileTitleClassName += ` has-${vk_staff_profileTitleColor}-color`;
101
- }
102
- }
103
-
104
- let staffProfileTextColorInlineStyle = {};
105
- let staffProfileTextClassName = '';
106
- if (vk_staff_profileTextColor !== undefined) {
107
- staffProfileTextClassName += ` has-text-color`;
108
- if (isHexColor(vk_staff_profileTextColor)) {
109
- staffProfileTextColorInlineStyle = {
110
- color: `${vk_staff_profileTextColor}`,
111
- };
112
- } else {
113
- staffProfileTextClassName += ` has-${vk_staff_profileTextColor}-color`;
114
- }
115
- }
116
-
117
- return (
118
- <div {...useBlockProps.save({ className: classes })}>
119
- <div className={staffTextClassName}>
120
- <RichText.Content
121
- tagName="h3"
122
- className={`vk_staff_text_name` + staffTextNameClassName}
123
- style={staffNameColorInlineStyle}
124
- value={vk_staff_text_name} // eslint-disable-line camelcase
125
- />
126
- <RichText.Content
127
- tagName="p"
128
- className={`vk_staff_text_caption` + staffCaptionClassName}
129
- style={staffCaptionColorInlineStyle}
130
- value={vk_staff_text_caption} // eslint-disable-line camelcase
131
- />
132
- <RichText.Content
133
- tagName="p"
134
- className={`vk_staff_text_role` + staffPositionClassName}
135
- style={staffPositionColorInlineStyle}
136
- value={vk_staff_text_role} // eslint-disable-line camelcase
137
- />
138
- <RichText.Content
139
- tagName="h4"
140
- className={
141
- `vk_staff_text_profileTitle` +
142
- staffProfileTitleClassName
143
- }
144
- style={staffProfileTitleColorInlineStyle}
145
- value={vk_staff_text_profileTitle} // eslint-disable-line camelcase
146
- />
147
- <RichText.Content
148
- tagName="p"
149
- className={
150
- 'vk_staff_text_profileText' + staffProfileTextClassName
151
- }
152
- style={staffProfileTextColorInlineStyle}
153
- value={vk_staff_text_profileText} // eslint-disable-line camelcase
154
- />
155
- </div>
156
- {vk_staff_photo_image && ( // eslint-disable-line camelcase
157
- <div className={imgBorderClassName}>
158
- <img
159
- className={`vk_staff_photo_image`}
160
- src={vk_staff_photo_image} // eslint-disable-line camelcase
161
- alt={vk_staff_photo_image_alt} // eslint-disable-line camelcase
162
- />
163
- </div>
164
- )}
165
- </div>
166
- );
167
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/blocks/staff/style.scss DELETED
@@ -1,209 +0,0 @@
1
- /*-------------------------------------------*/
2
- /* CSS
3
- /*-------------------------------------------*/
4
- $font_serif: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3",
5
- "Hiragino Mincho Pro", "serif";
6
-
7
- // Layout
8
- .vk_staff {
9
- &_text {
10
- float: left;
11
- width: 61.6%;
12
- }
13
- &_photo {
14
- float: right;
15
- width: 32%;
16
- }
17
- &-layout-imageLeft {
18
- .vk_staff_text {
19
- float: right;
20
- }
21
- .vk_staff_photo {
22
- float: left;
23
- }
24
- }
25
- }
26
-
27
- // 編集画面でcssの指定が軽くて負けるので.vk_staff .vk_staff_text を先に記述
28
- .vk_staff{
29
- display: block;
30
- overflow: hidden;
31
- .vk_staff_text {
32
- .vk_staff_text{
33
- &_name {
34
- &:not(.has-text-color) {
35
- color: inherit;
36
- }
37
- text-align: left;
38
- box-shadow: none;
39
- font-size: calc(var(--vk-size-text) * 2.5 );
40
- font-family: $font_serif;
41
- line-height: 1;
42
- margin-bottom: 0.5rem;
43
- border: none;
44
- padding: 0;
45
- background-color: transparent;
46
- display: inline; // これがないと見出しデザインで左右線みたいにflax指定されたときにセンター揃えになってしまう
47
- &:before,
48
- &:after {
49
- display: none;
50
- }
51
- }
52
-
53
- &_caption {
54
- &:not(.has-text-color) {
55
- color: inherit;
56
- }
57
- font-size: 14px;
58
- display: block;
59
- margin: 0 0 0.5rem 4px;
60
- letter-spacing: 5px;
61
- }
62
- &_role {
63
- &:not(.has-text-color) {
64
- color: inherit;
65
- }
66
- font-size: 14px;
67
- line-height: 1.6em;
68
- }
69
- &_profileTitle {
70
- &:not(.has-text-color) {
71
- color: inherit;
72
- }
73
- font-size: 18px;
74
- padding-top: 0;
75
- padding-left: 0;
76
- padding-bottom: 2px;
77
- margin-top:calc(var(--vk-size-text) * 1.5);
78
- margin-bottom: calc(var(--vk-size-text) * 1.2 );
79
- border-top: none;
80
- border-left: none;
81
- border-bottom: 1px solid #ccc;
82
- background: none;
83
- &:before,
84
- &:after {
85
- border: none;
86
- }
87
- }
88
- &_profileText {
89
- &:not(.has-text-color) {
90
- color: inherit;
91
- }
92
- font-size: 14px;
93
- }
94
- }
95
- } //.vk_staff_text
96
-
97
- .vk_staff-headingFont-serif {
98
- .vk_staff_text{
99
- &_name {
100
- font-family: $font_serif;
101
- }
102
- &_caption {
103
- font-family: $font_serif;
104
- }
105
- &_role {
106
- font-family: $font_serif;
107
- }
108
- &_profileTitle {
109
- font-family: $font_serif;
110
- }
111
- }
112
- }
113
-
114
- .vk_staff_photo {
115
- display: block;
116
- vertical-align: top;
117
- text-align: center;
118
- button {
119
- width: 100%;
120
- }
121
- .image-button {
122
- padding: 0;
123
- margin: 0;
124
- display: block;
125
- height: 100%; // これがないと画像の枠が潰れる
126
- }
127
- &-border-default {
128
- border: 4px solid #efefef;
129
- padding: 1px;
130
- }
131
- &-border-none {
132
- border: none;
133
- }
134
- &_image {
135
- width: 100%;
136
- margin: 0;
137
- display: block;
138
- }
139
- }
140
-
141
- }
142
-
143
- // Lightning で幅広の１カラムテンプレート時補正
144
- .page-template-page-onecolumn,
145
- .page-template-page-lp,
146
- .page-template-page-lp-builder {
147
- .vk_staff {
148
- @media (min-width: 992px) {
149
- &_text {
150
- width: 74%;
151
- &_caption {
152
- font-size: 1rem;
153
- letter-spacing: 0.5rem;
154
- }
155
- &_role {
156
- letter-spacing: 0.5rem;
157
- }
158
- }
159
- &_photo {
160
- width: 22%;
161
- }
162
- }
163
- @media (min-width: 1200px) {
164
- &_text {
165
- width: 75%;
166
- }
167
- &_photo {
168
- width: 20%;
169
- }
170
- }
171
- }
172
- }
173
-
174
- // .staff-profile-table {
175
- // margin-top: 2em;
176
- // margin-bottom: 80px;
177
- // border: none;
178
- // }
179
- //
180
- // .staff-profile-table dl {
181
- // display: table;
182
- // width: 100%;
183
- // }
184
- //
185
- // .staff-profile-table dt,
186
- // .staff-profile-table dd {
187
- // display: table-cell;
188
- // border-bottom: 1px solid #ccc;
189
- // padding-left: 10px;
190
- // font-size: 14px;
191
- // padding-bottom: 4px;
192
- // }
193
- //
194
- // .staff-profile-table dl {
195
- // margin: 0 0 1rem;
196
- // }
197
- //
198
- // .staff-profile-table dt {
199
- // background: none;
200
- // font-weight: lighter;
201
- // border-left-width: 2px;
202
- // border-left-style: solid;
203
- // width: 30%;
204
- // }
205
- //
206
- // .staff-profile-table dd {
207
- // border-left: none;
208
- // width: 70%;
209
- // }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/advanced-checkbox-control/index.js DELETED
@@ -1,36 +0,0 @@
1
- import { CheckboxControl } from '@wordpress/components';
2
- import { destructiveDeleteFromArray } from '@vkblocks/utils/delete-from-array';
3
-
4
- const advancedSetAttributes = (schema, saveData, setAttributes) => {
5
- setAttributes({ [schema]: JSON.stringify(saveData) });
6
- };
7
-
8
- export const AdvancedCheckboxControl = (props) => {
9
- const { schema, rawData, checkedData, setAttributes, saveState } = props;
10
-
11
- if (!rawData || !checkedData) return false;
12
-
13
- const checkBoxComponents = rawData.map((data) => {
14
- return (
15
- <CheckboxControl
16
- key={data.slug}
17
- label={data.label}
18
- checked={checkedData.some((item) => item === data.slug)}
19
- onChange={(value) => {
20
- if (value) {
21
- saveState(data.slug);
22
- } else {
23
- destructiveDeleteFromArray(checkedData, data.slug);
24
- }
25
- advancedSetAttributes.bind(
26
- null,
27
- schema,
28
- checkedData,
29
- setAttributes
30
- )();
31
- }}
32
- />
33
- );
34
- });
35
- return <ul>{checkBoxComponents}</ul>;
36
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/advanced-color-palette/index.js DELETED
@@ -1,36 +0,0 @@
1
- // @wordpress/block-editor から必要なものをインポート
2
- import {
3
- ColorPalette,
4
- getColorObjectByColorValue,
5
- } from '@wordpress/block-editor';
6
- import { colorSlugToColorCode } from '@vkblocks/utils/color-slug-to-color-code';
7
-
8
- // @wordpress/data から必要なものをインポート
9
- import { select } from '@wordpress/data';
10
-
11
- export const AdvancedColorPalette = (props) => {
12
- const { schema, setAttributes, attributes } = props;
13
- const hexColor = colorSlugToColorCode(attributes[schema]);
14
-
15
- return (
16
- <ColorPalette
17
- value={hexColor}
18
- onChange={(value) => {
19
- // カラーパレットの色名・スラッグ・カラーコードを取得
20
- const colorSet =
21
- select('core/block-editor').getSettings().colors;
22
-
23
- // 色コードを colorSet から探して色データを取得
24
- // カスタムカラーの場合 undefined が返る
25
- // パレットのあるカラーの場合 オブジェクトで color / name / slug が返る（ console.dir(ColorValue) ）
26
- const ColorValue = getColorObjectByColorValue(colorSet, value);
27
-
28
- if (ColorValue !== undefined) {
29
- setAttributes({ [schema]: ColorValue.slug });
30
- } else {
31
- setAttributes({ [schema]: value });
32
- }
33
- }}
34
- />
35
- );
36
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/advanced-media-upload/index.js DELETED
@@ -1,55 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { Button } from '@wordpress/components';
3
- import { MediaUpload } from '@wordpress/block-editor';
4
- import { dispatch } from '@wordpress/data';
5
- import noImage from '../../../inc/vk-blocks/images/no-image.svg';
6
-
7
- export const AdvancedMediaUpload = (props) => {
8
- const { schema, clientId, setAttributes, attributes } = props;
9
-
10
- const deleteImgBtn = () => {
11
- dispatch('core/editor').updateBlockAttributes(clientId, {
12
- [schema]: null,
13
- });
14
- };
15
-
16
- return (
17
- <MediaUpload
18
- onSelect={(value) => setAttributes({ [schema]: value.url })}
19
- type="image"
20
- value={attributes[schema]}
21
- render={({ open }) => (
22
- <>
23
- {attributes[schema] ? (
24
- <>
25
- {/* eslint-disable-next-line jsx-a11y/alt-text*/}
26
- <img
27
- className={'icon-image'}
28
- src={attributes[schema]}
29
- />
30
- <Button
31
- onClick={deleteImgBtn}
32
- className={'image-button button button-delete'}
33
- >
34
- {__('Delete Image', 'vk-blocks')}
35
- </Button>
36
- </>
37
- ) : (
38
- <>
39
- {/* eslint-disable-next-line jsx-a11y/alt-text*/}
40
- <img className={'icon-image'} src={noImage} />
41
- <Button
42
- onClick={open}
43
- className={
44
- 'button button-large components-button'
45
- }
46
- >
47
- {__('Select image', 'vk-blocks')}
48
- </Button>
49
- </>
50
- )}
51
- </>
52
- )}
53
- />
54
- );
55
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/advanced-popover-control/index.js DELETED
@@ -1,63 +0,0 @@
1
- import { Button, Popover } from '@wordpress/components';
2
- import { createRef, Component } from '@wordpress/element';
3
-
4
- export default class AdvancedPopOverControl extends Component {
5
- constructor(props) {
6
- super(props);
7
- this.state = { open: false };
8
- this.buttonRef = createRef();
9
- }
10
-
11
- render() {
12
- const popverBtnClass =
13
- 'apc-icon-btn components-button is-secondary is-small';
14
-
15
- const handleOpen = () => {
16
- this.setState({ open: !this.state.open });
17
- };
18
-
19
- const handleClose = () => {
20
- this.setState({ open: false });
21
- };
22
-
23
- const handleOnClickOutside = (event) => {
24
- if (
25
- event.relatedTarget &&
26
- !event.relatedTarget.closest(`.${popverBtnClass}`) &&
27
- event.relatedTarget !== this.buttonRef.current
28
- ) {
29
- handleClose();
30
- }
31
- };
32
-
33
- return (
34
- <>
35
- <div className="components-base-control">
36
- <div
37
- className={
38
- 'vk-blocks-button-icon-control__wrapper components-base-control__field'
39
- }
40
- >
41
- <Button
42
- isTertiary
43
- className={`${popverBtnClass} mb-1`}
44
- onClick={handleOpen}
45
- ref={this.buttonRef}
46
- >
47
- {this.props.label}
48
- </Button>
49
- {this.state.open && this.buttonRef.current && (
50
- <Popover
51
- anchorRect={this.buttonRef.current.getBoundingClientRect()}
52
- children={this.props.renderComp}
53
- onFocusOutside={handleOnClickOutside}
54
- focusOnMount={'container'}
55
- className={'vk-blocks-advanced-popover-control'}
56
- ></Popover>
57
- )}
58
- </div>
59
- </div>
60
- </>
61
- );
62
- }
63
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/advanced-toggle-control/index.js DELETED
@@ -1,20 +0,0 @@
1
- import { ToggleControl } from '@wordpress/components';
2
- import { useState } from '@wordpress/element';
3
-
4
- export const AdvancedToggleControl = (props) => {
5
- const { initialFixedTable, label, helpYes, helpNo, schema, setAttributes } =
6
- props;
7
-
8
- const [hasFixedTable, setHasFixedTable] = useState(initialFixedTable);
9
- return (
10
- <ToggleControl
11
- label={label}
12
- help={hasFixedTable ? helpYes : helpNo}
13
- checked={hasFixedTable}
14
- onChange={() => {
15
- setHasFixedTable(!hasFixedTable);
16
- setAttributes({ [schema]: !hasFixedTable });
17
- }}
18
- />
19
- );
20
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/advanced-unit-control/index.js DELETED
@@ -1,37 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { __ } from '@wordpress/i18n';
5
- import { SelectControl } from '@wordpress/components';
6
-
7
- const AdvancedUnitControl = (props) => {
8
- const { attributes, setAttributes } = props;
9
- const { unit } = attributes;
10
- return (
11
- <SelectControl
12
- label={__('Unit Type', 'vk-blocks')}
13
- value={unit}
14
- onChange={(value) => setAttributes({ unit: value })}
15
- options={[
16
- {
17
- value: 'px',
18
- label: __('px', 'vk-blocks'),
19
- },
20
- {
21
- value: 'em',
22
- label: __('em', 'vk-blocks'),
23
- },
24
- {
25
- value: 'rem',
26
- label: __('rem', 'vk-blocks'),
27
- },
28
- {
29
- value: 'vw',
30
- label: __('vw', 'vk-blocks'),
31
- },
32
- ]}
33
- />
34
- );
35
- };
36
-
37
- export default AdvancedUnitControl;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/advanced-viewport-control/index.js DELETED
@@ -1,49 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { __ } from '@wordpress/i18n';
5
- import { TextControl } from '@wordpress/components';
6
-
7
- const AdvancedViewportControl = (props) => {
8
- const { attributes, setAttributes, initial } = props;
9
- let { pc, tablet, mobile } = attributes;
10
- const { iPc, iTablet, iMobile } = initial;
11
-
12
- if (!pc) {
13
- pc = iPc;
14
- }
15
- if (!tablet) {
16
- tablet = iTablet;
17
- }
18
- if (!mobile) {
19
- mobile = iMobile;
20
- }
21
-
22
- return (
23
- <>
24
- <TextControl
25
- label={__('PC', 'vk-blocks')}
26
- value={pc}
27
- onChange={(value) => setAttributes({ pc: parseFloat(value) })}
28
- type={'number'}
29
- />
30
- <TextControl
31
- label={__('Tablet', 'vk-blocks')}
32
- value={tablet}
33
- onChange={(value) =>
34
- setAttributes({ tablet: parseFloat(value) })
35
- }
36
- type={'number'}
37
- />
38
- <TextControl
39
- label={__('Mobile', 'vk-blocks')}
40
- value={mobile}
41
- onChange={(value) =>
42
- setAttributes({ mobile: parseFloat(value) })
43
- }
44
- type={'number'}
45
- />
46
- </>
47
- );
48
- };
49
- export default AdvancedViewportControl;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/align-control/index.js DELETED
@@ -1,36 +0,0 @@
1
- import { __, sprintf } from '@wordpress/i18n';
2
- import { useState } from '@wordpress/element';
3
- import { Toolbar } from '@wordpress/components';
4
- import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
5
-
6
- export const AlignControl = (props) => {
7
- const { setAttributes, schema, initial, component } = props;
8
- const [activeControl, setActiveControl] = useState(initial);
9
-
10
- function createAlignControl(align) {
11
- let alignIcon = '';
12
- if (align === 'left') {
13
- alignIcon = alignLeft;
14
- } else if (align === 'center') {
15
- alignIcon = alignCenter;
16
- } else if (align === 'right') {
17
- alignIcon = alignRight;
18
- }
19
- return {
20
- icon: alignIcon,
21
- // translators: %s is align.
22
- title: sprintf(__(`Align %s`, 'vk-blocks'), align),
23
- isActive: activeControl === align,
24
- onClick: () => {
25
- schema[component] = align;
26
- setAttributes({ activeControl: JSON.stringify(schema) });
27
- setActiveControl(align);
28
- },
29
- };
30
- }
31
- return (
32
- <Toolbar
33
- controls={['left', 'center', 'right'].map(createAlignControl)}
34
- />
35
- );
36
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/card-align-control/index.js DELETED
@@ -1,37 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { PanelBody, BaseControl } from '@wordpress/components';
3
- import { AlignControl } from '@vkblocks/components/align-control';
4
- import { capitalize } from '@vkblocks/utils/capitalize';
5
- import { fixBrokenUnicode } from '@vkblocks/utils/depModules';
6
-
7
- export const CardAlignControls = (props) => {
8
- const { attributes } = props;
9
- const schema = JSON.parse(fixBrokenUnicode(attributes.activeControl));
10
- const createAlignControl = (label, index) => {
11
- props = {
12
- ...props,
13
- ...{
14
- initial: schema[label],
15
- },
16
- ...{
17
- component: label,
18
- },
19
- };
20
- return (
21
- <BaseControl
22
- key={index}
23
- label={__(capitalize(label), 'vk-blocks')} // eslint-disable-line @wordpress/i18n-no-variables
24
- id={'vk_card-align'}
25
- >
26
- <AlignControl schema={schema} {...props} />
27
- </BaseControl>
28
- );
29
- };
30
-
31
- const alignControls = ['title', 'text', 'button'].map(createAlignControl);
32
- return (
33
- <PanelBody title={__('Align', 'vk-blocks')} initialOpen={false}>
34
- {alignControls}
35
- </PanelBody>
36
- );
37
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/column-layout-control/index.js DELETED
@@ -1,90 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { PanelBody, BaseControl, SelectControl } from '@wordpress/components';
3
- import { Component } from '@wordpress/element';
4
- import { createHigherOrderComponent, compose } from '@wordpress/compose';
5
- import { ColumnLayout } from '@vkblocks/components/column-layout';
6
-
7
- export const setOptions = (name) => {
8
- const options = {
9
- 'vk-blocks/card': [
10
- {
11
- value: 'card',
12
- label: __('Card', 'vk-blocks'),
13
- },
14
- {
15
- value: 'card-noborder',
16
- label: __('Card (No border)', 'vk-blocks'),
17
- },
18
- {
19
- value: 'card-imageRound',
20
- label: __('Card (Image Round)', 'vk-blocks'),
21
- },
22
- ],
23
- 'vk-blocks/else': [
24
- {
25
- value: 'card',
26
- label: __('Card', 'vk-blocks'),
27
- },
28
- {
29
- value: 'card-noborder',
30
- label: __('Card (No border)', 'vk-blocks'),
31
- },
32
- {
33
- value: 'card-intext',
34
- label: __('Card (Intext)', 'vk-blocks'),
35
- },
36
- {
37
- value: 'card-horizontal',
38
- label: __('Card (Horizontal)', 'vk-blocks'),
39
- },
40
- {
41
- value: 'media',
42
- label: __('Media', 'vk-blocks'),
43
- },
44
- {
45
- value: 'postListText',
46
- label: __('Text 1 Column', 'vk-blocks'),
47
- },
48
- ],
49
- };
50
-
51
- if (name === 'vk-blocks/card') {
52
- return options[name];
53
- }
54
- return options['vk-blocks/else'];
55
- };
56
-
57
- const ColumnLayoutControlRaw = createHigherOrderComponent(
58
- (WrappedComponent) =>
59
- class extends Component {
60
- render() {
61
- const { setAttributes, attributes } = this.props;
62
- const { layout, name } = attributes;
63
- return (
64
- <PanelBody
65
- title={__('Display type and columns', 'vk-blocks')}
66
- initialOpen={false}
67
- >
68
- <BaseControl
69
- label={__('Display type', 'vk-blocks')}
70
- id={'vk_column-displayType'}
71
- >
72
- <SelectControl
73
- value={layout}
74
- onChange={(value) =>
75
- setAttributes({ layout: value })
76
- }
77
- options={setOptions(name)}
78
- />
79
- </BaseControl>
80
- <WrappedComponent {...this.props} />
81
- </PanelBody>
82
- );
83
- }
84
- },
85
- 'ColumnLayoutControlRaw'
86
- );
87
-
88
- export const ColumnLayoutControl = compose(ColumnLayoutControlRaw)(
89
- ColumnLayout
90
- );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/column-layout/index.js DELETED
@@ -1,133 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { RangeControl, BaseControl } from '@wordpress/components';
3
- import formatNumCol from '@vkblocks/utils/formatNumCol';
4
-
5
- export const ColumnLayout = (props) => {
6
- const { setAttributes, attributes } = props;
7
- // eslint-disable-next-line camelcase
8
- const { col_xs, col_sm, col_md, col_lg, col_xl, col_xxl } = attributes;
9
-
10
- const defaultMinMax = {
11
- min: '1',
12
- max: '6',
13
- };
14
-
15
- const marks = [
16
- {
17
- value: 1,
18
- },
19
- {
20
- value: 2,
21
- },
22
- {
23
- value: 3,
24
- },
25
- {
26
- value: 4,
27
- },
28
- {
29
- value: 6,
30
- },
31
- ];
32
-
33
- return (
34
- <>
35
- <BaseControl
36
- label={__('Column ( Screen size : Extra small )', 'vk-blocks')}
37
- id={'vk_columns-xs'}
38
- >
39
- <RangeControl
40
- // eslint-disable-next-line camelcase
41
- value={col_xs}
42
- onChange={(value) =>
43
- setAttributes({ col_xs: formatNumCol(value, col_xs) })
44
- }
45
- marks={marks}
46
- min={defaultMinMax.min}
47
- max={defaultMinMax.max}
48
- step={1}
49
- />
50
- </BaseControl>
51
- <BaseControl
52
- label={__('Column ( Screen size : Small )', 'vk-blocks')}
53
- id={'vk_columns-xs'}
54
- >
55
- <RangeControl
56
- // eslint-disable-next-line camelcase
57
- value={col_sm}
58
- onChange={(value) =>
59
- setAttributes({ col_sm: formatNumCol(value, col_sm) })
60
- }
61
- marks={marks}
62
- min={defaultMinMax.min}
63
- max={defaultMinMax.max}
64
- step={1}
65
- />
66
- </BaseControl>
67
- <BaseControl
68
- label={__('Column ( Screen size : Medium )', 'vk-blocks')}
69
- id={'vk_columns-xs'}
70
- >
71
- <RangeControl
72
- // eslint-disable-next-line camelcase
73
- value={col_md}
74
- onChange={(value) =>
75
- setAttributes({ col_md: formatNumCol(value, col_md) })
76
- }
77
- marks={marks}
78
- min={defaultMinMax.min}
79
- max={defaultMinMax.max}
80
- step={1}
81
- />
82
- </BaseControl>
83
- <BaseControl
84
- label={__('Column ( Screen size : Large )', 'vk-blocks')}
85
- id={'vk_columns-xs'}
86
- >
87
- <RangeControl
88
- // eslint-disable-next-line camelcase
89
- value={col_lg}
90
- onChange={(value) =>
91
- setAttributes({ col_lg: formatNumCol(value, col_lg) })
92
- }
93
- marks={marks}
94
- min={defaultMinMax.min}
95
- max={defaultMinMax.max}
96
- step={1}
97
- />
98
- </BaseControl>
99
- <BaseControl
100
- label={__('Column ( Screen size : Extra large )', 'vk-blocks')}
101
- id={'vk_columns-xs'}
102
- >
103
- <RangeControl
104
- // eslint-disable-next-line camelcase
105
- value={col_xl}
106
- onChange={(value) =>
107
- setAttributes({ col_xl: formatNumCol(value, col_xl) })
108
- }
109
- marks={marks}
110
- min={defaultMinMax.min}
111
- max={defaultMinMax.max}
112
- step={1}
113
- />
114
- </BaseControl>
115
- <BaseControl
116
- label={__('Column ( Screen size : XX large )', 'vk-blocks')}
117
- id={'vk_columns-xs'}
118
- >
119
- <RangeControl
120
- // eslint-disable-next-line camelcase
121
- value={col_xxl}
122
- onChange={(value) =>
123
- setAttributes({ col_xxl: formatNumCol(value, col_xxl) })
124
- }
125
- marks={marks}
126
- min={defaultMinMax.min}
127
- max={defaultMinMax.max}
128
- step={1}
129
- />
130
- </BaseControl>
131
- </>
132
- );
133
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/display-items-control/index.js DELETED
@@ -1,138 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import {
3
- PanelBody,
4
- BaseControl,
5
- TextControl,
6
- SelectControl,
7
- CheckboxControl,
8
- } from '@wordpress/components';
9
-
10
- export const DisplayItemsControl = (props) => {
11
- const { setAttributes, attributes } = props;
12
- const {
13
- display_image, //eslint-disable-line camelcase
14
- display_image_overlay_term, //eslint-disable-line camelcase
15
- display_excerpt, //eslint-disable-line camelcase
16
- display_author, //eslint-disable-line camelcase
17
- display_date, //eslint-disable-line camelcase
18
- display_new, //eslint-disable-line camelcase
19
- display_taxonomies, //eslint-disable-line camelcase
20
- display_btn, //eslint-disable-line camelcase
21
- new_date, //eslint-disable-line camelcase
22
- new_text, //eslint-disable-line camelcase
23
- btn_text, //eslint-disable-line camelcase
24
- btn_align, //eslint-disable-line camelcase
25
- } = attributes;
26
-
27
- return (
28
- <PanelBody title={__('Display item', 'vk-blocks')} initialOpen={false}>
29
- <CheckboxControl
30
- label={__('Image', 'vk-blocks')}
31
- checked={display_image} //eslint-disable-line camelcase
32
- onChange={(checked) =>
33
- setAttributes({ display_image: checked })
34
- }
35
- />
36
- <CheckboxControl
37
- label={__("Term's name on Image", 'vk-blocks')}
38
- checked={display_image_overlay_term} //eslint-disable-line camelcase
39
- onChange={(checked) =>
40
- setAttributes({ display_image_overlay_term: checked })
41
- }
42
- />
43
- <CheckboxControl
44
- label={__('Excerpt', 'vk-blocks')}
45
- checked={display_excerpt} //eslint-disable-line camelcase
46
- onChange={(checked) =>
47
- setAttributes({ display_excerpt: checked })
48
- }
49
- />
50
- <CheckboxControl
51
- label={__('Author', 'vk-blocks')}
52
- checked={display_author} //eslint-disable-line camelcase
53
- onChange={(checked) =>
54
- setAttributes({ display_author: checked })
55
- }
56
- />
57
- <CheckboxControl
58
- label={__('Date', 'vk-blocks')}
59
- checked={display_date} //eslint-disable-line camelcase
60
- onChange={(checked) => setAttributes({ display_date: checked })}
61
- />
62
-
63
- <CheckboxControl
64
- label={__('New mark', 'vk-blocks')}
65
- checked={display_new} //eslint-disable-line camelcase
66
- onChange={(checked) => setAttributes({ display_new: checked })}
67
- />
68
-
69
- <CheckboxControl
70
- label={__('Taxonomies (all)', 'vk-blocks')}
71
- checked={display_taxonomies} //eslint-disable-line camelcase
72
- onChange={(checked) =>
73
- setAttributes({ display_taxonomies: checked })
74
- }
75
- />
76
-
77
- <CheckboxControl
78
- label={__('Button', 'vk-blocks')}
79
- checked={display_btn} //eslint-disable-line camelcase
80
- onChange={(checked) => setAttributes({ display_btn: checked })}
81
- />
82
- <h4>{__('New mark option', 'vk-blocks')}</h4>
83
- <TextControl
84
- label={__(
85
- 'Number of days to display the new post mark',
86
- 'vk-blocks'
87
- )}
88
- value={new_date} //eslint-disable-line camelcase
89
- onChange={(value) =>
90
- setAttributes({ new_date: parseInt(value) })
91
- }
92
- type={'number'}
93
- />
94
- <TextControl
95
- label={__('New post mark', 'vk-blocks')}
96
- value={new_text} //eslint-disable-line camelcase
97
- onChange={(value) => setAttributes({ new_text: value })}
98
- />
99
- <h4 className={'postList_itemCard_button-option'}>
100
- {__('Button option', 'vk-blocks')}
101
- </h4>
102
- <p>
103
- {__(
104
- "Click each card block to set the target url. You can find the url form at it's sidebar.",
105
- 'vk-blocks'
106
- )}
107
- </p>
108
- <TextControl
109
- label={__('Button text', 'vk-blocks')}
110
- value={btn_text} //eslint-disable-line camelcase
111
- onChange={(value) => setAttributes({ btn_text: value })}
112
- />
113
- <BaseControl
114
- label={__('Button align', 'vk-blocks')}
115
- id={'vk_displayItem-buttonAlign'}
116
- >
117
- <SelectControl
118
- value={btn_align} //eslint-disable-line camelcase
119
- onChange={(value) => setAttributes({ btn_align: value })}
120
- options={[
121
- {
122
- value: 'text-left',
123
- label: __('Left', 'vk-blocks'),
124
- },
125
- {
126
- value: 'text-center',
127
- label: __('Center', 'vk-blocks'),
128
- },
129
- {
130
- value: 'text-right',
131
- label: __('Right', 'vk-blocks'),
132
- },
133
- ]}
134
- />
135
- </BaseControl>
136
- </PanelBody>
137
- );
138
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/components/link-control/index.js DELETED
@@ -1,52 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { BaseControl, TextControl, ToggleControl } from '@wordpress/components';
3
- import { useCallback } from '@wordpress/element';
4
-
5
- export const LinkControl = (props) => {
6
- const { setAttributes, attributes, blockName } = props;
7
- const { linkTarget, rel } = attributes;
8
-
9
- const NEW_TAB_REL = 'noreferrer noopener';
10
- const onSetLinkRel = useCallback(
11
- (value) => {
12
- setAttributes({ rel: value });
13
- },
14
- [setAttributes]
15
- );
16
- const onToggleOpenInNewTab = useCallback(
17
- (value) => {
18
- const newLinkTarget = value ? '_blank' : undefined;
19
-
20
- let updatedRel = rel;
21
- if (newLinkTarget && !rel) {
22
- updatedRel = NEW_TAB_REL;
23
- } else if (!newLinkTarget && rel === NEW_TAB_REL) {
24
- updatedRel = undefined;
25
- }
26
-
27
- setAttributes({
28
- linkTarget: newLinkTarget,
29
- rel: updatedRel,
30
- });
31
- },
32
- [rel, setAttributes]
33
- );
34
-
35
- return (
36
- <BaseControl
37
- label={__('Link target', 'vk-blocks')}
38
- id={`sidebar-${blockName}-block-url-settings`}
39
- >
40
- <ToggleControl
41
- label={__('Open in new tab', 'vk-blocks')}
42
- onChange={onToggleOpenInNewTab}
43
- checked={linkTarget === '_blank'}
44
- />
45
- <TextControl
46
- label={__('Link rel', 'vk-blocks')}
47
- value={rel || ''}
48
- onChange={onSetLinkRel}
49
- />
50
- </BaseControl>
51
- );
52
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/extensions/common/hidden-extension/index.js DELETED
@@ -1,330 +0,0 @@
1
- import { __ } from '@wordpress/i18n';
2
- import { addFilter } from '@wordpress/hooks';
3
- import { PanelBody, BaseControl } from '@wordpress/components';
4
- import { InspectorControls } from '@wordpress/block-editor';
5
- import { createHigherOrderComponent } from '@wordpress/compose';
6
- import { AdvancedToggleControl } from '@vkblocks/components/advanced-toggle-control';
7
- import classnames from 'classnames';
8
-
9
- // Check the keyword including str or not
10
- // eslint-disable-next-line camelcase
11
- export const in_string = (str, keyword) => {
12
- // If keyword was included that return ( true or false )
13
- return str.indexOf(keyword) !== -1;
14
- };
15
-
16
- // The checking block is hidden function target or not
17
- // eslint-disable-next-line camelcase
18
- export const is_hidden = (blockName) => {
19
- // Target of hidden function active
20
- const allowed = ['core', 'vk-blocks'];
21
- // name には allowed の項目が一つずつ入る
22
- // 判断中のブロック名の中にname( core or vk-blocks )がある（ undefinedじゃない ）場合
23
- // true を返す
24
- let hiddenReturn =
25
- allowed.find((name) => in_string(blockName, name)) !== undefined;
26
-
27
- const excludes = [
28
- 'core/calendar',
29
- 'core/latest-comments',
30
- 'core/archives',
31
- 'core/tag-cloud',
32
- 'core/shortcode',
33
- 'core/rss',
34
- 'vk-blocks/card-item',
35
- 'vk-blocks/icon-card-item',
36
- 'vk-blocks/icon',
37
- 'vk-blocks/select-post-list-item',
38
- ];
39
- const excludeBlock =
40
- excludes.find((excludeName) => in_string(blockName, excludeName)) !==
41
- undefined;
42
-
43
- if (excludeBlock) {
44
- hiddenReturn = false;
45
- }
46
- return hiddenReturn;
47
- };
48
-
49
- /* Filter of blocks.registerBlockType
50
- /*-----------------------------------*/
51
- addFilter(
52
- 'blocks.registerBlockType',
53
- 'vk-blocks/hidden-extension',
54
- (settings) => {
55
- // If hidden function target block...
56
- if (is_hidden(settings.name)) {
57
- settings.attributes = {
58
- // Deploy original settings.attributes to array and...
59
- ...settings.attributes,
60
- // Add hidden attributes
61
- ...{
62
- vkb_hidden: {
63
- type: 'boolean',
64
- default: false,
65
- },
66
- vkb_hidden_xxl: {
67
- type: 'boolean',
68
- default: false,
69
- },
70
- vkb_hidden_xl_v2: {
71
- type: 'boolean',
72
- default: false,
73
- },
74
- vkb_hidden_xl: {
75
- type: 'boolean',
76
- default: false,
77
- },
78
- vkb_hidden_lg: {
79
- type: 'boolean',
80
- default: false,
81
- },
82
- vkb_hidden_md: {
83
- type: 'boolean',
84
- default: false,
85
- },
86
- vkb_hidden_sm: {
87
- type: 'boolean',
88
- default: false,
89
- },
90
- vkb_hidden_xs: {
91
- type: 'boolean',
92
- default: false,
93
- },
94
- },
95
- };
96
- }
97
- return settings;
98
- }
99
- );
100
-
101
- /* Filter of editor.BlockEdit
102
- /*-----------------------------------*/
103
- addFilter(
104
- 'editor.BlockEdit',
105
- 'vk-blocks/hidden-extension',
106
- createHigherOrderComponent((BlockEdit) => {
107
- return (props) => {
108
- if (is_hidden(props.name)) {
109
- //xxl用、deprecated追加
110
- if (
111
- props.attributes.vkb_hidden_xl &&
112
- !props.attributes.vkb_hidden_xxl
113
- ) {
114
- props.attributes.vkb_hidden_xxl = true;
115
- props.attributes.vkb_hidden_xl_v2 = true;
116
- props.attributes.vkb_hidden_xl = false;
117
- }
118
-
119
- return (
120
- <>
121
- <BlockEdit {...props} />
122
- <InspectorControls>
123
- <PanelBody
124
- title={__('Hidden Settings', 'vk-blocks')}
125
- initialOpen={false}
126
- >
127
- <BaseControl
128
- label={__(
129
- 'Hidden at screel size',
130
- 'vk-blocks'
131
- )}
132
- id={`vk_hiddenControl-hiddenScreenSize`}
133
- >
134
- <p>
135
- {__(
136
- "Note : This function is display hidden only. Actually Block is output to HTML.Pleade don't use you must not bisible item.Don't use it for blocks you really don't want to display.",
137
- 'vk-blocks'
138
- )}
139
- </p>
140
- <AdvancedToggleControl
141
- label={__(
142
- 'Hidden ( Screen size : all )',
143
- 'vk-blocks'
144
- )}
145
- initialFixedTable={
146
- props.attributes.vkb_hidden
147
- }
148
- schema={'vkb_hidden'}
149
- {...props}
150
- />
151
- <AdvancedToggleControl
152
- label={__(
153
- 'Hidden ( Screen size : xs )',
154
- 'vk-blocks'
155
- )}
156
- initialFixedTable={
157
- props.attributes.vkb_hidden_xs
158
- }
159
- schema={'vkb_hidden_xs'}
160
- {...props}
161
- />
162
- <AdvancedToggleControl
163
- label={__(
164
- 'Hidden ( Screen size : sm )',
165
- 'vk-blocks'
166
- )}
167
- initialFixedTable={
168
- props.attributes.vkb_hidden_sm
169
- }
170
- schema={'vkb_hidden_sm'}
171
- {...props}
172
- />
173
- <AdvancedToggleControl
174
- label={__(
175
- 'Hidden ( Screen size : md )',
176
- 'vk-blocks'
177
- )}
178
- initialFixedTable={
179
- props.attributes.vkb_hidden_md
180
- }
181
- schema={'vkb_hidden_md'}
182
- {...props}
183
- />
184
- <AdvancedToggleControl
185
- label={__(
186
- 'Hidden ( Screen size : lg )',
187
- 'vk-blocks'
188
- )}
189
- initialFixedTable={
190
- props.attributes.vkb_hidden_lg
191
- }
192
- schema={'vkb_hidden_lg'}
193
- {...props}
194
- />
195
- <AdvancedToggleControl
196
- label={__(
197
- 'Hidden ( Screen size : xl )',
198
- 'vk-blocks'
199
- )}
200
- initialFixedTable={
201
- props.attributes.vkb_hidden_xl_v2
202
- }
203
- schema={'vkb_hidden_xl_v2'}
204
- {...props}
205
- />
206
- <AdvancedToggleControl
207
- label={__(
208
- 'Hidden ( Screen size : xxl )',
209
- 'vk-blocks'
210
- )}
211
- initialFixedTable={
212
- props.attributes.vkb_hidden_xxl
213
- }
214
- schema={'vkb_hidden_xxl'}
215
- {...props}
216
- />
217
- <p>
218
- {__(
219
- 'If you want to hide multiple blocks, that first you set to group block and the next, hide for the that group block.',
220
- 'vk-blocks'
221
- )}
222
- </p>
223
- </BaseControl>
224
- </PanelBody>
225
- </InspectorControls>
226
- </>
227
- );
228
- }
229
- // IF not hidden function target block that return original BlockEdit
230
- return <BlockEdit {...props} />;
231
- };
232
- }, 'addHiddenSection')
233
- );
234
-
235
- /* Filter of blocks.getSaveElement
236
- /*-----------------------------------*/
237
- addFilter(
238
- 'blocks.getSaveElement',
239
- 'vk-blocks/hidden-extension',
240
- (element, blockType, attributes) => {
241
- const {
242
- vkb_hidden, // eslint-disable-line camelcase
243
- vkb_hidden_xxl, // eslint-disable-line camelcase
244
- vkb_hidden_xl_v2, // eslint-disable-line camelcase
245
- vkb_hidden_xl, // eslint-disable-line camelcase
246
- vkb_hidden_lg, // eslint-disable-line camelcase
247
- vkb_hidden_md, // eslint-disable-line camelcase
248
- vkb_hidden_sm, // eslint-disable-line camelcase
249
- vkb_hidden_xs, // eslint-disable-line camelcase
250
- } = attributes;
251
-
252
- if (
253
- vkb_hidden || // eslint-disable-line camelcase
254
- vkb_hidden_xxl || // eslint-disable-line camelcase
255
- vkb_hidden_xl_v2 || // eslint-disable-line camelcase
256
- vkb_hidden_xl || // eslint-disable-line camelcase
257
- vkb_hidden_lg || // eslint-disable-line camelcase
258
- vkb_hidden_md || // eslint-disable-line camelcase
259
- vkb_hidden_sm || // eslint-disable-line camelcase
260
- vkb_hidden_xs // eslint-disable-line camelcase
261
- ) {
262
- const custom = vkb_hidden && 'vk_hidden'; // eslint-disable-line camelcase
263
- const customXxl = vkb_hidden_xxl && 'vk_hidden-xxl'; // eslint-disable-line camelcase
264
- const customXl2 = vkb_hidden_xl_v2 && 'vk_hidden-xl-v2'; // eslint-disable-line camelcase
265
- const customXl = vkb_hidden_xl && 'vk_hidden-xl'; // eslint-disable-line camelcase
266
- const customLg = vkb_hidden_lg && 'vk_hidden-lg'; // eslint-disable-line camelcase
267
- const customMd = vkb_hidden_md && 'vk_hidden-md'; // eslint-disable-line camelcase
268
- const customSm = vkb_hidden_sm && 'vk_hidden-sm'; // eslint-disable-line camelcase
269
- const customXs = vkb_hidden_xs && 'vk_hidden-xs'; // eslint-disable-line camelcase
270
-
271
- if (element) {
272
- element = {
273
- ...element,
274
- ...{
275
- props: {
276
- ...element.props,
277
- ...{
278
- className: classnames(
279
- element.props.className,
280
- custom,
281
- customXxl,
282
- customXl2,
283
- customXl,
284
- customLg,
285
- customMd,
286
- customSm,
287
- customXs
288
- ),
289
- },
290
- },
291
- },
292
- };
293
- }
294
- }
295
- return element;
296
- }
297
- );
298
-
299
- /* Filter of editor.BlockListBlock
300
- /*-----------------------------------*/
301
- addFilter(
302
- 'editor.BlockListBlock',
303
- 'vk-blocks/hidden-extension',
304
- createHigherOrderComponent((BlockListBlock) => {
305
- return (props) => {
306
- // Add hidden common class
307
- const hiddenSomething =
308
- props.attributes.vkb_hidden_xxl ||
309
- props.attributes.vkb_hidden_xl_v2 ||
310
- props.attributes.vkb_hidden_xl ||
311
- props.attributes.vkb_hidden_lg ||
312
- props.attributes.vkb_hidden_md ||
313
- props.attributes.vkb_hidden_sm ||
314
- props.attributes.vkb_hidden_xs ||
315
- props.attributes.vkb_hidden
316
- ? 'vk_edit_hidden_warning'
317
- : '';
318
-
319
- // Add hidden all class
320
- const hiddenClassName = props.attributes.vkb_hidden
321
- ? hiddenSomething + ' vk_edit_hidden_all'
322
- : hiddenSomething;
323
-
324
- // Add default class too.
325
- const attachedClass = classnames(hiddenClassName, props.className);
326
-
327
- return <BlockListBlock {...props} className={attachedClass} />;
328
- };
329
- }, 'addHiddenWarning')
330
- );
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/extensions/common/hidden-extension/style.scss DELETED
@@ -1,67 +0,0 @@
1
- $xs-max: 575.98px;
2
- $sm-max: 767.98px;
3
- $md-max: 991.98px;
4
- $lg-max: 1199.98px;
5
- $xl-max: 1399.98px;
6
-
7
-
8
-
9
- $sm-min: 576px;
10
- $md-min: 768px;
11
- $lg-min: 992px;
12
- $xl-min: 1200px;
13
- $xxl-min: 1400px;
14
-
15
- .vk_hidden {
16
- display: none !important;
17
- color: var(--blue);
18
-
19
- @media (max-width: $xs-max) {
20
-
21
- &-xs {
22
- display: none !important;
23
- }
24
- }
25
-
26
- @media (min-width: $sm-min) and (max-width: $sm-max) {
27
-
28
- &-sm {
29
- display: none !important;
30
- }
31
- }
32
-
33
- @media (min-width: $md-min) and (max-width: $md-max) {
34
-
35
- &-md {
36
- display: none !important;
37
- }
38
- }
39
-
40
- @media (min-width: $lg-min) and (max-width: $lg-max) {
41
-
42
- &-lg {
43
- display: none !important;
44
- }
45
- }
46
-
47
- @media (min-width: $xl-min) {
48
-
49
- &-xl {
50
- display: none !important;
51
- }
52
- }
53
-
54
- @media (min-width: $xl-min) and (max-width: $xl-max) {
55
-
56
- &-xl-v2 {
57
- display: none !important;
58
- }
59
- }
60
-
61
- @media (min-width: $xxl-min) {
62
-
63
- &-xxl {
64
- display: none !important;
65
- }
66
- }
67
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/extensions/common/highlighter/icon.svg DELETED
@@ -1,7 +0,0 @@
1
- <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M20 4.80426C19.999 4.36063 19.5648 4.00089 19.0287 4.00037L12.5801 4C12.3935 3.99986 12.2197 4.04328 12.072 4.11847C11.7946 4.25974 11.6093 4.51342 11.6093 4.8032L11.6097 12.4995L20 12.5V4.80426Z" />
3
- <path d="M19.9554 15.3193C19.9554 15.3193 19.9556 14.6114 19.9555 13.7598L12.0397 13.7591C12.544 14.2811 12.6794 15.1283 12.2301 15.788C12.9911 16.4125 14.1331 17.6568 14.1325 19.5L17.3864 19.501C17.3858 16.7364 19.9554 15.3193 19.9554 15.3193Z" />
4
- <path d="M17.0975 22.0152L14.6951 23.0553L14.5976 20.5L17.0976 20.5L17.0975 22.0152Z" />
5
- <path d="M10.8895 14.778L7.62346 14.7856C7.57942 14.7856 7.53538 14.8159 7.5207 14.8615L7.27116 15.5833C7.24915 15.6593 7.30052 15.7353 7.37392 15.7353H8.64364C8.73905 15.7353 8.79043 15.8569 8.72437 15.9253L6.69869 18.1059H6.70603L7.74823 21.5022C7.77025 21.5782 7.71887 21.6465 7.64548 21.6465H6.62529C6.57392 21.6465 6.53722 21.6162 6.52254 21.5706L6.00144 19.8306C5.97208 19.7242 5.83264 19.7242 5.79594 19.823L5.37025 21.0463C5.36291 21.0691 5.36291 21.0919 5.37025 21.1147L5.75924 22.5963C5.77392 22.6419 5.81796 22.6799 5.86199 22.6799H9.15006C9.22345 22.6799 9.27483 22.6039 9.25281 22.5355L7.92437 18.2578C7.90969 18.2198 7.92437 18.1743 7.95373 18.1439L10.9702 14.9679C11.0363 14.8995 10.9849 14.778 10.8895 14.778Z" />
6
- <path d="M7.02164 13L5.03265 13.0076C4.98862 13.0076 4.94458 13.038 4.9299 13.0836L4.67302 13.8054C4.64366 13.8814 4.70238 13.9573 4.77577 13.9573H5.61247C5.68586 13.9573 5.73724 14.0333 5.71522 14.1093L3.34458 20.8259C3.30789 20.9247 3.17578 20.9247 3.13908 20.8259L1.43633 15.9784C1.40697 15.9024 1.46569 15.8265 1.53908 15.8265H2.3978C2.44183 15.8265 2.48587 15.8568 2.50055 15.9024L3.11706 17.65C3.15376 17.7487 3.28587 17.7487 3.32257 17.65L4.27669 14.9299C4.30605 14.8539 4.24733 14.7779 4.17394 14.7779H0.107895C0.0345005 14.7779 -0.0168755 14.8539 0.0051428 14.9299L3.13174 23.9259C3.16844 24.0247 3.30055 24.0247 3.33724 23.9259L7.12439 13.152C7.14641 13.076 7.09503 13 7.02164 13Z" fill="#D8141C"/>
7
- </svg>
 
 
 
 
 
 
 
src/extensions/common/highlighter/index.js DELETED
@@ -1,156 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { __ } from '@wordpress/i18n';
5
- import { useCallback, useState } from '@wordpress/element';
6
- import {
7
- registerFormatType,
8
- applyFormat,
9
- removeFormat,
10
- getActiveFormat,
11
- useAnchorRef,
12
- } from '@wordpress/rich-text';
13
- import {
14
- RichTextToolbarButton,
15
- RichTextShortcut,
16
- ColorPalette,
17
- } from '@wordpress/block-editor';
18
- import { Popover, Icon } from '@wordpress/components';
19
-
20
- /**
21
- * Internal dependencies
22
- */
23
- import { ReactComponent as IconSVG } from './icon.svg';
24
- import hex2rgba from '@vkblocks/utils/hex-to-rgba';
25
-
26
- const name = 'vk-blocks/highlighter';
27
- const alpha = 0.7;
28
- const defaultColor = '#fffd6b';
29
-
30
- // 色が指定されていなかったらデフォルトカラーを指定する
31
- const setColorIfUndefined = (color) => {
32
- if (color === undefined) {
33
- color = defaultColor;
34
- }
35
- return color;
36
- };
37
-
38
- //ハイライトカラーが選択されたら
39
- const hightliterOnApply = ({ color, value, onChange }) => {
40
- color = setColorIfUndefined(color);
41
-
42
- onChange(
43
- applyFormat(value, {
44
- type: name,
45
- attributes: {
46
- data: color,
47
- style: `background: linear-gradient(transparent 60%,${hex2rgba(
48
- color,
49
- alpha
50
- )} 0);`,
51
- },
52
- })
53
- );
54
- };
55
-
56
- const HighlighterEdit = (props) => {
57
- const { value, isActive, onChange, contentRef } = props;
58
- const shortcutType = 'primary';
59
- const shortcutChar = 'h';
60
-
61
- let heightlightColor;
62
- if (isActive) {
63
- const activeFormat = getActiveFormat(value, name);
64
- heightlightColor = activeFormat.attributes.data;
65
- }
66
- let iconStyle = {};
67
- if (heightlightColor) {
68
- const rgbaHeightlightColor = hex2rgba(heightlightColor, alpha);
69
- iconStyle = {
70
- color: 'initial',
71
- background: `linear-gradient(transparent 60%, ${rgbaHeightlightColor} 0)`,
72
- };
73
- }
74
- const anchorRef = useAnchorRef({ ref: contentRef, value });
75
- const [isAddingColor, setIsAddingColor] = useState(false);
76
-
77
- const enableIsAddingColor = useCallback(
78
- () => setIsAddingColor(true),
79
- [setIsAddingColor]
80
- );
81
- const disableIsAddingColor = useCallback(
82
- () => setIsAddingColor(false),
83
- [setIsAddingColor]
84
- );
85
-
86
- return (
87
- <>
88
- <RichTextShortcut
89
- type={shortcutType}
90
- character={shortcutChar}
91
- onUse={() => setIsAddingColor(true)}
92
- />
93
- <RichTextToolbarButton
94
- title={__('Highlighter', 'vk-blocks')}
95
- onClick={() => {
96
- if (heightlightColor === undefined) {
97
- // set default color on initial
98
- hightliterOnApply({
99
- heightlightColor,
100
- value,
101
- onChange,
102
- });
103
- }
104
- setIsAddingColor(true);
105
- enableIsAddingColor(true);
106
- }}
107
- shortcutType={shortcutType}
108
- shortcutCharacter={shortcutChar}
109
- className="format-library-text-color-button"
110
- isActive={isActive}
111
- icon={
112
- <>
113
- <Icon icon={IconSVG} style={iconStyle} />
114
- </>
115
- }
116
- />
117
- {isAddingColor && (
118
- <Popover
119
- value={value}
120
- className="vk-blocks-format-popover components-inline-color-popover"
121
- anchorRef={anchorRef}
122
- onClose={disableIsAddingColor}
123
- >
124
- <ColorPalette
125
- value={heightlightColor}
126
- onChange={(color) => {
127
- if (color) {
128
- // select color on palette
129
- hightliterOnApply({
130
- color,
131
- value,
132
- onChange,
133
- });
134
- } else {
135
- // clear palette
136
- onChange(removeFormat(value, name));
137
- }
138
- setIsAddingColor(false);
139
- }}
140
- />
141
- </Popover>
142
- )}
143
- </>
144
- );
145
- };
146
-
147
- registerFormatType(name, {
148
- title: __('Highlighter', 'vk-blocks'),
149
- tagName: 'span',
150
- className: 'vk_highlighter',
151
- attributes: {
152
- data: 'data-color',
153
- style: 'style',
154
- },
155
- edit: HighlighterEdit,
156
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src/extensions/common/inline-font-size/icon.svg DELETED
@@ -1 +0,0 @@
1
- <svg fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.303 12.137c.242.334.35.755.315 1.146l2.271-.005c1.006 0 1.663.859 1.61 1.722h3.121l1.12 3h2.25L14.5 4h-2l-3.197 8.137zM11.12 13l2.38-6.33L15.88 13h-4.76z"/><path d="M11.89 14.778l-3.267.008a.11.11 0 00-.102.075l-.25.722c-.022.076.03.152.103.152h1.27c.095 0 .146.122.08.19L7.7 18.105h.007l1.042 3.397c.022.076-.03.145-.103.145h-1.02a.104.104 0 01-.102-.076L7 19.83c-.029-.107-.168-.107-.205-.008l-.426 1.223a.109.109 0 000 .069l.39 1.481c.014.046.058.084.102.084h3.288c.073 0 .125-.076.103-.145l-1.329-4.277c-.014-.038 0-.084.03-.114l3.016-3.176c.066-.069.015-.19-.08-.19z"/><path d="M8.022 13l-1.99.008a.11.11 0 00-.102.076l-.257.721c-.03.076.03.152.103.152h.836c.074 0 .125.076.103.152l-2.37 6.717a.108.108 0 01-.206 0l-1.703-4.848a.112.112 0 01.103-.152h.859a.11.11 0 01.103.076l.616 1.748a.108.108 0 00.206 0l.954-2.72a.112.112 0 00-.103-.152H1.108c-.074 0-.125.076-.103.152l3.127 8.996a.108.108 0 00.205 0l3.787-10.774c.022-.076-.029-.152-.102-.152z" fill="#D8141C"/></svg>
 
src/extensions/common/inline-font-size/index.js DELETED
@@ -1,196 +0,0 @@
1
- /**
2
- * External dependencies
3
- */
4
- import { isEmpty } from 'lodash';
5
-
6
- /**
7
- * WordPress dependencies
8
- */
9
- import { __ } from '@wordpress/i18n';
10
- import { useCallback, useState } from '@wordpress/element';
11
- import {
12
- registerFormatType,
13
- applyFormat,
14
- removeFormat,
15
- getActiveFormat,
16
- useAnchorRef,
17
- } from '@wordpress/rich-text';
18
- import { RichTextToolbarButton } from '@wordpress/block-editor';
19
- import { FontSizePicker, Button, Popover, Icon } from '@wordpress/components';
20
-
21
- /**
22
- * Internal dependencies
23
- */
24
- import { ReactComponent as IconSVG } from './icon.svg';
25
- import compareVersions from 'compare-versions';
26
-
27
- const name = 'vk-blocks/inline-font-size';
28
-
29
- const FontSizeEdit = (props) => {
30
- const { value, isActive, onChange, contentRef } = props;
31
- const shortcutType = 'primary';
32
- const shortcutChar = 'h';
33
-
34
- // 選択した font-size を格納
35
- let selectedFontSize;
36
-
37
- // 保存された font-sizeを取得 font-size:数字+単位
38
- let getFontSizeStyle;
39
- let getFontSize;
40
- if (isActive) {
41
- const activeFormat = getActiveFormat(value, name);
42
- selectedFontSize = activeFormat.attributes.data;
43
-
44
- getFontSizeStyle = activeFormat.attributes.style;
45
- getFontSize = getFontSizeStyle.replace('font-size:', '');
46
-
47
- // フォントサイズを変更した後にリロードするとselectedFontSizeはundefinedになるため
48
- if (selectedFontSize === undefined && getFontSize) {
49
- selectedFontSize = getFontSize;
50
- }
51
- }
52
-
53
- const pickerStyle = {
54
- width: '200px',
55
- };
56
- const iconStyle = {
57
- width: '24px',
58
- height: '24px',
59
- };
60
- const buttonStyle = {
61
- marginTop: '16px',
62
- padding: '0 16px',
63
- height: '30px',
64
- };
65
- const anchorRef = useAnchorRef({ ref: contentRef, value });
66
- const [isSettingFontSize, setIsSettingFontSize] = useState(false);
67
-
68
- const enableIsAddingFontSize = useCallback(
69
- () => setIsSettingFontSize(true),
70
- [setIsSettingFontSize]
71
- );
72
- const disableIsAddingFontSize = useCallback(
73
- () => setIsSettingFontSize(false),
74
- [setIsSettingFontSize]
75
- );
76
-
77
- const hasFontSizeToChoose = !isEmpty(value) || !selectedFontSize;
78
- if (!hasFontSizeToChoose && !isActive) {
79
- return null;
80
- }
81
-
82
- const fontSizes = [
83
- {
84
- name: __('Small', 'vk-blocks'),
85
- slug: 'small',
86
- size: '12px',
87
- },
88
- {
89
- name: __('Normal', 'vk-blocks'),
90
- slug: 'normal',
91
- size: '16px',
92
- },
93
- {
94
- name: __('Big', 'vk-blocks'),
95
- slug: 'big',
96
- size: '18px',
97
- },
98
- {
99
- name: __('Extra big', 'vk-blocks'),
100
- slug: 'extra-big',
101
- size: '21px',
102
- },
103
- ];
104
-
105
- // Sliderを使用するときに必要になるfallbackFontSizeを用意 wp5.8以下
106
- const getFontSizeNoUnit = parseInt(getFontSize);
107
- const fallbackFontSize = !getFontSizeNoUnit ? 16 : getFontSizeNoUnit;
108
-
109
- return (
110
- <>
111
- <RichTextToolbarButton
112
- title={__('Inline Font Size', 'vk-blocks')}
113
- onClick={
114
- hasFontSizeToChoose
115
- ? enableIsAddingFontSize
116
- : () => onChange(removeFormat(value, name))
117
- }
118
- shortcutType={shortcutType}
119
- shortcutCharacter={shortcutChar}
120
- className="format-library-text-color-button"
121
- isActive={isActive}
122
- icon={
123
- <>
124
- <Icon icon={IconSVG} style={iconStyle} />
125
- </>
126
- }
127
- />
128
- {isSettingFontSize && (
129
- <Popover
130
- className="vk-blocks-format-popover components-inline-color-popover"
131
- anchorRef={anchorRef}
132
- onClose={disableIsAddingFontSize}
133
- >
134
- <div style={pickerStyle}>
135
- <FontSizePicker
136
- fontSizes={fontSizes}
137
- value={selectedFontSize}
138
- fallbackFontSize={
139
- window.wpVersion !== undefined &&
140
- window.wpVersion !== null &&
141
- compareVersions(window.wpVersion, '5.9') < 0
142
- ? fallbackFontSize
143
- : false
144
- }
145
- withSlider={
146
- window.wpVersion !== undefined &&
147
- window.wpVersion !== null &&
148
- compareVersions(window.wpVersion, '5.9') < 0
149
- ? true
150
- : false
151
- }
152
- onChange={(newFontSize) => {
153
- if (newFontSize) {
154
- onChange(
155
- applyFormat(value, {
156
- type: name,
157
- attributes: {
158
- data: `${newFontSize}`,
159
- style: `font-size: ${newFontSize};`,
160
- },
161
- })
162
- );
163
- } else {
164
- // reset font size
165
- onChange(removeFormat(value, name));
166
- }
167
- //setIsSettingFontSize(false);
168
- }}
169
- />
170
- <Button
171
- onClick={() => {
172
- setIsSettingFontSize(false);
173
- }}
174
- isSmall
175
- isSecondary
176
- style={buttonStyle}
177
- >
178
- {__('Apply', 'vk-blocks')}
179
- </Button>
180
- </div>
181
- </Popover>
182
- )}
183
- </>
184
- );
185
- };
186
-
187
- registerFormatType(name, {
188
- title: __('Inline font size', 'vk-blocks'),
189
- tagName: 'span',
190
- className: 'vk_inline-font-size',
191
- attributes: {
192
- data: 'data-fontSize',
193
- style: 'style',
194
- },
195
- edit: FontSiz