From 4e5c8b3f4879155216eeedbd069904d67bb00357 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Mon, 6 Dec 2021 14:26:26 +0900
Subject: [PATCH 01/22] =?UTF-8?q?fix:=20GenerateBgImage=20=E3=81=A7?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=89=B2=E5=87=BA=E5=8A=9B=E6=8A=91=E5=88=B6?=
 =?UTF-8?q?=E3=83=A2=E3=83=BC=E3=83=89=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 inc/vk-blocks/languages/vk-blocks-js.pot      | 138 ++--
 inc/vk-blocks/languages/vk-blocks.pot         | 697 +++++++-----------
 .../_pro/outer/deprecated/1.20.2/save.js      | 133 ++++
 src/blocks/_pro/outer/deprecated/index.js     |  23 +
 src/blocks/_pro/outer/edit.js                 |   2 +
 src/utils/GenerateBgImage.js                  |  44 +-
 6 files changed, 529 insertions(+), 508 deletions(-)
 create mode 100644 src/blocks/_pro/outer/deprecated/1.20.2/save.js

diff --git a/inc/vk-blocks/languages/vk-blocks-js.pot b/inc/vk-blocks/languages/vk-blocks-js.pot
index 309935b97..5c616d179 100644
--- a/inc/vk-blocks/languages/vk-blocks-js.pot
+++ b/inc/vk-blocks/languages/vk-blocks-js.pot
@@ -44,7 +44,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:303
+#: src/blocks/_pro/outer/edit.js:315
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:276
 #: src/blocks/button/edit.js:220
@@ -269,7 +269,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:125
-#: src/blocks/_pro/outer/edit.js:318
+#: src/blocks/_pro/outer/edit.js:330
 #: src/blocks/_pro/slider-item/edit.js:78
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -283,7 +283,7 @@ msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:163
-#: src/blocks/_pro/outer/edit.js:617
+#: src/blocks/_pro/outer/edit.js:629
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
@@ -291,7 +291,7 @@ msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:167
-#: src/blocks/_pro/outer/edit.js:621
+#: src/blocks/_pro/outer/edit.js:633
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
@@ -299,7 +299,7 @@ msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:171
-#: src/blocks/_pro/outer/edit.js:625
+#: src/blocks/_pro/outer/edit.js:637
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
@@ -307,7 +307,7 @@ msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:175
-#: src/blocks/_pro/outer/edit.js:629
+#: src/blocks/_pro/outer/edit.js:641
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -375,7 +375,7 @@ msgid "Open link new tab."
 msgstr ""
 
 #: src/blocks/_pro/icon-card-item/edit.js:108
-#: src/blocks/_pro/step-item/edit.js:57
+#: src/blocks/_pro/step-item/edit.js:72
 #: src/blocks/border-box/edit.js:122
 #: src/blocks/button/edit.js:415
 #: src/blocks/icon/edit.js:237
@@ -424,236 +424,236 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:182
+#: src/blocks/_pro/outer/edit.js:190
 #: src/blocks/_pro/slider-item/edit.js:125
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:187
+#: src/blocks/_pro/outer/edit.js:195
 #: src/blocks/_pro/slider-item/edit.js:129
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:188
+#: src/blocks/_pro/outer/edit.js:196
 #: src/blocks/_pro/slider-item/edit.js:131
 msgid ""
 "Color will overcome background image. If you want to display image, clear "
 "background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:201
+#: src/blocks/_pro/outer/edit.js:213
 #: src/blocks/_pro/slider-item/edit.js:144
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:215
+#: src/blocks/_pro/outer/edit.js:227
 #: src/blocks/_pro/slider-item/edit.js:179
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:231
+#: src/blocks/_pro/outer/edit.js:243
 #: src/blocks/_pro/slider-item/edit.js:195
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:241
+#: src/blocks/_pro/outer/edit.js:253
 #: src/blocks/_pro/slider-item/edit.js:205
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:251
+#: src/blocks/_pro/outer/edit.js:263
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:259
+#: src/blocks/_pro/outer/edit.js:271
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:263
+#: src/blocks/_pro/outer/edit.js:275
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:267
+#: src/blocks/_pro/outer/edit.js:279
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:274
+#: src/blocks/_pro/outer/edit.js:286
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:289
+#: src/blocks/_pro/outer/edit.js:301
 #: src/blocks/_pro/slider-item/edit.js:73
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:292
+#: src/blocks/_pro/outer/edit.js:304
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:313
+#: src/blocks/_pro/outer/edit.js:325
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:322
+#: src/blocks/_pro/outer/edit.js:334
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:329
+#: src/blocks/_pro/outer/edit.js:341
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:336
+#: src/blocks/_pro/outer/edit.js:348
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:350
+#: src/blocks/_pro/outer/edit.js:362
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:355
+#: src/blocks/_pro/outer/edit.js:367
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:362
+#: src/blocks/_pro/outer/edit.js:374
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:376
+#: src/blocks/_pro/outer/edit.js:388
 msgid ""
 "* If you select \"Do not use\" that, please set yourself it such as a "
 "spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:384
+#: src/blocks/_pro/outer/edit.js:396
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:389
+#: src/blocks/_pro/outer/edit.js:401
 #: src/blocks/balloon/edit.js:236
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:397
+#: src/blocks/_pro/outer/edit.js:409
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:401
+#: src/blocks/_pro/outer/edit.js:413
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:405
+#: src/blocks/_pro/outer/edit.js:417
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:409
+#: src/blocks/_pro/outer/edit.js:421
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:415
+#: src/blocks/_pro/outer/edit.js:427
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:440
+#: src/blocks/_pro/outer/edit.js:452
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:466
+#: src/blocks/_pro/outer/edit.js:478
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:471
+#: src/blocks/_pro/outer/edit.js:483
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:477
+#: src/blocks/_pro/outer/edit.js:489
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:485
-#: src/blocks/_pro/step-item/edit.js:114
+#: src/blocks/_pro/outer/edit.js:497
+#: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:95
 #: src/blocks/balloon/edit.js:338
 #: src/blocks/staff/edit.js:117
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:489
-#: src/blocks/_pro/step-item/edit.js:92
+#: src/blocks/_pro/outer/edit.js:501
+#: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:77
 #: src/blocks/pr-content/edit.js:143
 #: src/extensions/core/group/style.js:102
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:493
+#: src/blocks/_pro/outer/edit.js:505
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:497
+#: src/blocks/_pro/outer/edit.js:509
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:501
+#: src/blocks/_pro/outer/edit.js:513
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:505
+#: src/blocks/_pro/outer/edit.js:517
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:509
+#: src/blocks/_pro/outer/edit.js:521
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:513
+#: src/blocks/_pro/outer/edit.js:525
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:517
+#: src/blocks/_pro/outer/edit.js:529
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:531
+#: src/blocks/_pro/outer/edit.js:543
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:543
+#: src/blocks/_pro/outer/edit.js:555
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:559
+#: src/blocks/_pro/outer/edit.js:571
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:566
+#: src/blocks/_pro/outer/edit.js:578
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:581
+#: src/blocks/_pro/outer/edit.js:593
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:596
+#: src/blocks/_pro/outer/edit.js:608
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:607
+#: src/blocks/_pro/outer/edit.js:619
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
@@ -809,7 +809,7 @@ msgid "Pagination Type"
 msgstr ""
 
 #: src/blocks/_pro/slider/edit.js:345
-#: src/blocks/_pro/step-item/edit.js:110
+#: src/blocks/_pro/step-item/edit.js:122
 #: src/blocks/_pro/table-of-contents-new/edit.js:145
 #: src/blocks/_pro/timeline-item/edit.js:91
 #: src/blocks/heading/edit.js:228
@@ -842,20 +842,25 @@ msgstr ""
 msgid "Bottom on Mobile device"
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:54
+#: src/blocks/_pro/step-item/edit.js:108
+#: src/blocks/_pro/timeline-item/edit.js:73
+msgid "Outlined"
+msgstr ""
+
+#: src/blocks/_pro/step-item/edit.js:69
 msgid "Step Mark"
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:58
+#: src/blocks/_pro/step-item/edit.js:73
 msgid "If Font Awesome tags entered, it will overrides the number."
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:72
+#: src/blocks/_pro/step-item/edit.js:87
 #: src/blocks/_pro/timeline-item/edit.js:50
 msgid "Ex,6:00AM"
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:76
+#: src/blocks/_pro/step-item/edit.js:91
 #: src/blocks/_pro/timeline-item/edit.js:53
 #: src/blocks/border-box/edit.js:63
 #: src/blocks/button/edit.js:333
@@ -864,7 +869,7 @@ msgstr ""
 msgid "Color"
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:82
+#: src/blocks/_pro/step-item/edit.js:94
 #: src/blocks/_pro/table-of-contents-new/edit.js:135
 #: src/blocks/_pro/timeline-item/edit.js:63
 #: src/blocks/icon-outer/edit.js:196
@@ -872,11 +877,6 @@ msgstr ""
 msgid "Style"
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:96
-#: src/blocks/_pro/timeline-item/edit.js:73
-msgid "Outlined"
-msgstr ""
-
 #: src/blocks/_pro/step/edit.js:38
 msgid "First Dot Number"
 msgstr ""
diff --git a/inc/vk-blocks/languages/vk-blocks.pot b/inc/vk-blocks/languages/vk-blocks.pot
index 69da0935c..9fade12bb 100644
--- a/inc/vk-blocks/languages/vk-blocks.pot
+++ b/inc/vk-blocks/languages/vk-blocks.pot
@@ -2,16 +2,16 @@
 # This file is distributed under the same license as the VK Blocks Pro plugin.
 msgid ""
 msgstr ""
-"Project-Id-Version: VK Blocks Pro 1.20.0\n"
+"Project-Id-Version: VK Blocks Pro 1.20.2\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/vk-blocks-pro\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2021-11-18T10:08:08+00:00\n"
+"POT-Creation-Date: 2021-12-06T04:49:44+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
-"X-Generator: WP-CLI 2.5.0-alpha-3f4c34b\n"
+"X-Generator: WP-CLI 2.5.0\n"
 "X-Domain: vk-blocks\n"
 
 #: src/blocks/_pro/accordion/index.js:22
@@ -55,7 +55,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:303
+#: src/blocks/_pro/outer/edit.js:315
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:276
 #: src/blocks/button/edit.js:220
@@ -276,7 +276,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:125
-#: src/blocks/_pro/outer/edit.js:318
+#: src/blocks/_pro/outer/edit.js:330
 #: src/blocks/_pro/slider-item/edit.js:78
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -286,43 +286,39 @@ msgid "Padding (Bottom)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:155
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:31
 #: inc/vk-blocks/admin/admin-margin.php:31
 msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:163
-#: src/blocks/_pro/outer/edit.js:617
+#: src/blocks/_pro/outer/edit.js:629
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:10
 #: inc/vk-blocks/admin/admin-margin.php:10
 msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:167
-#: src/blocks/_pro/outer/edit.js:621
+#: src/blocks/_pro/outer/edit.js:633
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:14
 #: inc/vk-blocks/admin/admin-margin.php:14
 msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:171
-#: src/blocks/_pro/outer/edit.js:625
+#: src/blocks/_pro/outer/edit.js:637
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:18
 #: inc/vk-blocks/admin/admin-margin.php:18
 msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:175
-#: src/blocks/_pro/outer/edit.js:629
+#: src/blocks/_pro/outer/edit.js:641
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -390,7 +386,7 @@ msgid "Open link new tab."
 msgstr ""
 
 #: src/blocks/_pro/icon-card-item/edit.js:108
-#: src/blocks/_pro/step-item/edit.js:57
+#: src/blocks/_pro/step-item/edit.js:72
 #: src/blocks/border-box/edit.js:122
 #: src/blocks/button/edit.js:415
 #: src/blocks/icon/edit.js:237
@@ -439,238 +435,235 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:182
+#: src/blocks/_pro/outer/edit.js:190
 #: src/blocks/_pro/slider-item/edit.js:125
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:187
+#: src/blocks/_pro/outer/edit.js:195
 #: src/blocks/_pro/slider-item/edit.js:129
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:188
+#: src/blocks/_pro/outer/edit.js:196
 #: src/blocks/_pro/slider-item/edit.js:131
 msgid "Color will overcome background image. If you want to display image, clear background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:201
+#: src/blocks/_pro/outer/edit.js:213
 #: src/blocks/_pro/slider-item/edit.js:144
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:215
+#: src/blocks/_pro/outer/edit.js:227
 #: src/blocks/_pro/slider-item/edit.js:179
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:231
+#: src/blocks/_pro/outer/edit.js:243
 #: src/blocks/_pro/slider-item/edit.js:195
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:241
+#: src/blocks/_pro/outer/edit.js:253
 #: src/blocks/_pro/slider-item/edit.js:205
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:251
+#: src/blocks/_pro/outer/edit.js:263
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:259
+#: src/blocks/_pro/outer/edit.js:271
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:263
+#: src/blocks/_pro/outer/edit.js:275
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:267
+#: src/blocks/_pro/outer/edit.js:279
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:274
+#: src/blocks/_pro/outer/edit.js:286
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:289
+#: src/blocks/_pro/outer/edit.js:301
 #: src/blocks/_pro/slider-item/edit.js:73
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:292
+#: src/blocks/_pro/outer/edit.js:304
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:313
+#: src/blocks/_pro/outer/edit.js:325
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:322
+#: src/blocks/_pro/outer/edit.js:334
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:329
+#: src/blocks/_pro/outer/edit.js:341
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:336
+#: src/blocks/_pro/outer/edit.js:348
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:350
+#: src/blocks/_pro/outer/edit.js:362
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:355
+#: src/blocks/_pro/outer/edit.js:367
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:362
+#: src/blocks/_pro/outer/edit.js:374
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:376
+#: src/blocks/_pro/outer/edit.js:388
 msgid "* If you select \"Do not use\" that, please set yourself it such as a spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:384
+#: src/blocks/_pro/outer/edit.js:396
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:389
+#: src/blocks/_pro/outer/edit.js:401
 #: src/blocks/balloon/edit.js:236
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:397
+#: src/blocks/_pro/outer/edit.js:409
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:401
+#: src/blocks/_pro/outer/edit.js:413
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:405
+#: src/blocks/_pro/outer/edit.js:417
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:409
+#: src/blocks/_pro/outer/edit.js:421
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:415
+#: src/blocks/_pro/outer/edit.js:427
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:440
+#: src/blocks/_pro/outer/edit.js:452
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:466
+#: src/blocks/_pro/outer/edit.js:478
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:471
+#: src/blocks/_pro/outer/edit.js:483
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:477
+#: src/blocks/_pro/outer/edit.js:489
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:485
-#: src/blocks/_pro/step-item/edit.js:114
+#: src/blocks/_pro/outer/edit.js:497
+#: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:95
 #: src/blocks/balloon/edit.js:338
 #: src/blocks/staff/edit.js:117
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:489
-#: src/blocks/_pro/step-item/edit.js:92
+#: src/blocks/_pro/outer/edit.js:501
+#: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:77
 #: src/blocks/pr-content/edit.js:143
 #: src/extensions/core/group/style.js:102
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:493
+#: src/blocks/_pro/outer/edit.js:505
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:497
+#: src/blocks/_pro/outer/edit.js:509
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:501
+#: src/blocks/_pro/outer/edit.js:513
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:505
+#: src/blocks/_pro/outer/edit.js:517
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:509
+#: src/blocks/_pro/outer/edit.js:521
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:513
+#: src/blocks/_pro/outer/edit.js:525
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:517
+#: src/blocks/_pro/outer/edit.js:529
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:531
+#: src/blocks/_pro/outer/edit.js:543
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:543
+#: src/blocks/_pro/outer/edit.js:555
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:559
+#: src/blocks/_pro/outer/edit.js:571
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:566
+#: src/blocks/_pro/outer/edit.js:578
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:62
 #: inc/vk-blocks/admin/admin-margin.php:62
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:581
+#: src/blocks/_pro/outer/edit.js:593
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:61
 #: inc/vk-blocks/admin/admin-margin.php:61
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:596
+#: src/blocks/_pro/outer/edit.js:608
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:60
 #: inc/vk-blocks/admin/admin-margin.php:60
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:607
+#: src/blocks/_pro/outer/edit.js:619
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
@@ -826,7 +819,7 @@ msgid "Pagination Type"
 msgstr ""
 
 #: src/blocks/_pro/slider/edit.js:345
-#: src/blocks/_pro/step-item/edit.js:110
+#: src/blocks/_pro/step-item/edit.js:122
 #: src/blocks/_pro/table-of-contents-new/edit.js:145
 #: src/blocks/_pro/timeline-item/edit.js:91
 #: src/blocks/heading/edit.js:228
@@ -859,35 +852,37 @@ msgstr ""
 msgid "Bottom on Mobile device"
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:54
+#: src/blocks/_pro/step-item/edit.js:108
+#: src/blocks/_pro/timeline-item/edit.js:73
+msgid "Outlined"
+msgstr ""
+
+#: src/blocks/_pro/step-item/edit.js:69
 msgid "Step Mark"
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:58
+#: src/blocks/_pro/step-item/edit.js:73
 msgid "If Font Awesome tags entered, it will overrides the number."
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:72
+#: src/blocks/_pro/step-item/edit.js:87
 #: src/blocks/_pro/timeline-item/edit.js:50
 msgid "Ex,6:00AM"
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:76
+#: src/blocks/_pro/step-item/edit.js:91
 #: src/blocks/_pro/timeline-item/edit.js:53
 #: src/blocks/border-box/edit.js:63
 #: src/blocks/button/edit.js:333
 #: src/blocks/icon/edit.js:256
 #: src/blocks/staff/edit.js:139
-#: dist/vk-blocks-pro/inc/term-color/package/class.term-color.php:41
-#: dist/vk-blocks-pro/inc/term-color/package/class.term-color.php:56
-#: dist/vk-blocks-pro/inc/term-color/package/class.term-color.php:130
 #: inc/term-color/package/class.term-color.php:41
 #: inc/term-color/package/class.term-color.php:56
 #: inc/term-color/package/class.term-color.php:130
 msgid "Color"
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:82
+#: src/blocks/_pro/step-item/edit.js:94
 #: src/blocks/_pro/table-of-contents-new/edit.js:135
 #: src/blocks/_pro/timeline-item/edit.js:63
 #: src/blocks/icon-outer/edit.js:196
@@ -895,11 +890,6 @@ msgstr ""
 msgid "Style"
 msgstr ""
 
-#: src/blocks/_pro/step-item/edit.js:96
-#: src/blocks/_pro/timeline-item/edit.js:73
-msgid "Outlined"
-msgstr ""
-
 #: src/blocks/_pro/step/edit.js:38
 msgid "First Dot Number"
 msgstr ""
@@ -1119,7 +1109,6 @@ msgstr ""
 #: src/blocks/border-box/edit.js:51
 #: src/blocks/icon-outer/edit.js:132
 #: src/blocks/icon/edit.js:121
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:57
 #: inc/vk-blocks/admin/admin-margin.php:57
 msgid "Margin"
 msgstr ""
@@ -1215,16 +1204,14 @@ msgstr ""
 
 #: src/blocks/button/edit.js:212
 #: src/blocks/spacer/edit.js:105
-#: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:30
-#: inc/vk-blocks/vk-blocks-functions.php:30
+#: inc/vk-blocks/vk-blocks-functions.php:31
 msgid "Large"
 msgstr ""
 
 #: src/blocks/button/edit.js:228
 #: src/blocks/spacer/edit.js:85
 #: src/extensions/common/inline-font-size/index.js:51
-#: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:22
-#: inc/vk-blocks/vk-blocks-functions.php:22
+#: inc/vk-blocks/vk-blocks-functions.php:23
 msgid "Small"
 msgstr ""
 
@@ -1642,8 +1629,7 @@ msgid "Spacer Settings"
 msgstr ""
 
 #: src/blocks/spacer/edit.js:95
-#: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:26
-#: inc/vk-blocks/vk-blocks-functions.php:26
+#: inc/vk-blocks/vk-blocks-functions.php:27
 msgid "Medium"
 msgstr ""
 
@@ -1717,7 +1703,6 @@ msgid "Card (Image Round)"
 msgstr ""
 
 #: src/components/column-layout-control/index.js:26
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:671
 #: inc/vk-components/package/class-vk-component-posts.php:733
 msgid "Card"
 msgstr ""
@@ -1735,7 +1720,6 @@ msgid "Card (Horizontal)"
 msgstr ""
 
 #: src/components/column-layout-control/index.js:42
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:687
 #: inc/vk-components/package/class-vk-component-posts.php:749
 msgid "Media"
 msgstr ""
@@ -2094,87 +2078,68 @@ msgstr ""
 msgid "https://vektor-inc.co.jp"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/admin-notices.php:28
 #: inc/admin-notices.php:28
 msgid "We've released VK Blocks Pro!"
 msgstr ""
 
 #. translators: 1: opening a tag, 2: closing a tag
-#: dist/vk-blocks-pro/inc/admin-notices.php:35
 #: inc/admin-notices.php:35
 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."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/admin-notices.php:39
-#: dist/vk-blocks-pro/inc/admin-notices.php:45
 #: inc/admin-notices.php:39
 #: inc/admin-notices.php:45
 msgid "https://www.vektor-inc.co.jp/service/wordpress-plugins/vk-blocks/"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/admin-notices.php:46
 #: inc/admin-notices.php:46
 msgid "See more"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/admin-notices.php:49
 #: inc/admin-notices.php:49
 msgid "Dismiss this notice"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:42
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:57
 #: inc/font-awesome/package/class-vk-font-awesome-versions.php:42
 #: inc/font-awesome/package/class-vk-font-awesome-versions.php:57
 msgid "Not recommended"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:89
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:91
 #: inc/font-awesome/package/class-vk-font-awesome-versions.php:89
 #: inc/font-awesome/package/class-vk-font-awesome-versions.php:91
 msgid "Ex ) "
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:200
 #: inc/font-awesome/package/class-vk-font-awesome-versions.php:200
 msgid "Font Awesome"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:223
 #: inc/font-awesome/package/class-vk-font-awesome-versions.php:223
 msgid "Font Awesome Version"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:226
 #: inc/font-awesome/package/class-vk-font-awesome-versions.php:226
 msgid "4.7 will be abolished in the near future."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:77
 #: inc/tgm-plugin-activation/tgm-config.php:77
 msgid "Install Required Plugins"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:78
 #: inc/tgm-plugin-activation/tgm-config.php:78
 msgid "Install Plugins"
 msgstr ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:80
 #: inc/tgm-plugin-activation/tgm-config.php:80
 msgid "Installing Plugin: %s"
 msgstr ""
 
-#. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:81
 #: inc/tgm-plugin-activation/tgm-config.php:81
 msgid "Something went wrong with the plugin API."
 msgstr ""
 
 #. translators:
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:83
 #: inc/tgm-plugin-activation/tgm-config.php:83
 msgid "This plugin requires the following plugin: %1$s."
 msgid_plural "This plugin requires the following plugins: %1$s."
@@ -2182,7 +2147,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:89
 #: inc/tgm-plugin-activation/tgm-config.php:89
 msgid "This plugin recommends the following plugin: %1$s.<br>Many additional functions are available for free."
 msgid_plural "This plugin recommends the following plugins: %1$s.<br>Many additional functions are available for free."
@@ -2190,7 +2154,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:95
 #: inc/tgm-plugin-activation/tgm-config.php:95
 msgid "Sorry, but you do not have the correct permissions to install the %1$s plugin."
 msgid_plural "Sorry, but you do not have the correct permissions to install the %1$s plugins."
@@ -2198,7 +2161,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:101
 #: inc/tgm-plugin-activation/tgm-config.php:101
 msgid "The following plugin needs to be updated to its latest version to ensure maximum compatibility with this plugin: %1$s."
 msgid_plural "The following plugins need to be updated to their latest version to ensure maximum compatibility with this plugin: %1$s."
@@ -2206,7 +2168,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:107
 #: inc/tgm-plugin-activation/tgm-config.php:107
 msgid "There is an update available for: %1$s."
 msgid_plural "There are updates available for the following plugins: %1$s."
@@ -2214,7 +2175,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:113
 #: inc/tgm-plugin-activation/tgm-config.php:113
 msgid "Sorry, but you do not have the correct permissions to update the %1$s plugin."
 msgid_plural "Sorry, but you do not have the correct permissions to update the %1$s plugins."
@@ -2222,7 +2182,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:119
 #: inc/tgm-plugin-activation/tgm-config.php:119
 msgid "The following required plugin is currently inactive: %1$s."
 msgid_plural "The following required plugins are currently inactive: %1$s."
@@ -2230,7 +2189,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:125
 #: inc/tgm-plugin-activation/tgm-config.php:125
 msgid "The following recommended plugin is currently inactive: %1$s."
 msgid_plural "The following recommended plugins are currently inactive: %1$s."
@@ -2238,7 +2196,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:131
 #: inc/tgm-plugin-activation/tgm-config.php:131
 msgid "Sorry, but you do not have the correct permissions to activate the %1$s plugin."
 msgid_plural "Sorry, but you do not have the correct permissions to activate the %1$s plugins."
@@ -2246,695 +2203,504 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:137
 #: inc/tgm-plugin-activation/tgm-config.php:137
 msgid "Begin installing plugin"
 msgid_plural "Begin installing plugins"
 msgstr[0] ""
 msgstr[1] ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:142
 #: inc/tgm-plugin-activation/tgm-config.php:142
 msgid "Begin updating plugin"
 msgid_plural "Begin updating plugins"
 msgstr[0] ""
 msgstr[1] ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:147
 #: inc/tgm-plugin-activation/tgm-config.php:147
 msgid "Begin activating plugin"
 msgid_plural "Begin activating plugins"
 msgstr[0] ""
 msgstr[1] ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:152
 #: inc/tgm-plugin-activation/tgm-config.php:152
 msgid "Return to Required Plugins Installer"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:153
 #: inc/tgm-plugin-activation/tgm-config.php:153
 msgid "Plugin activated successfully."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:154
 #: inc/tgm-plugin-activation/tgm-config.php:154
 msgid "The following plugin was activated successfully:"
 msgstr ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:156
 #: inc/tgm-plugin-activation/tgm-config.php:156
 msgid "No action taken. Plugin %1$s was already active."
 msgstr ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:158
 #: inc/tgm-plugin-activation/tgm-config.php:158
 msgid "Plugin not activated. A higher version of %s is needed for this theme. Please update the plugin."
 msgstr ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:160
 #: inc/tgm-plugin-activation/tgm-config.php:160
 msgid "All plugins installed and activated successfully. %1$s"
 msgstr ""
 
 #. translators: %s = dashboard link.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:162
 #: inc/tgm-plugin-activation/tgm-config.php:162
 msgid "Please contact the administrator of this site for help."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-admin/package/class-vk-admin.php:316
 #: inc/vk-admin/package/class-vk-admin.php:316
 msgid "Sorry, there is no post"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-admin/package/class-vk-admin.php:370
 #: inc/vk-admin/package/class-vk-admin.php:370
 msgid "Vektor WordPress Information"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:13
 #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:13
 msgid "Disable accordion"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:17
 #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:17
 msgid "Enable accordion and default open "
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:21
 #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:21
 msgid "Enable accordion and default close "
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:29
 #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:29
 msgid "FAQ Block Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-pro.php:22
 #: inc/vk-blocks-pro/admin-pro/admin-pro.php:22
 msgid "FAQ Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:11
 #: inc/vk-blocks/admin/admin-balloon.php:11
 msgid "Balloon Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:12
 #: inc/vk-blocks/admin/admin-balloon.php:12
 msgid "Balloon Border Width Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:22
 #: inc/vk-blocks/admin/admin-balloon.php:22
 msgid "Balloon Image Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:89
 #: inc/vk-blocks/admin/admin-balloon.php:89
 msgid "You can register frequently used icon images for speech bubble blocks."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:90
 #: inc/vk-blocks/admin/admin-balloon.php:90
 msgid "If you change image or name that please click Save Changes button."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:116
 #: inc/vk-blocks/admin/admin-balloon.php:116
 msgid "Select"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:119
 #: inc/vk-blocks/admin/admin-balloon.php:119
 msgid "Delete"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:124
 #: inc/vk-blocks/admin/admin-balloon.php:124
 msgid "Balloon Image Name"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:27
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:71
 #: inc/vk-blocks/admin/admin-margin.php:27
 #: inc/vk-blocks/admin/admin.php:71
 msgid "Common Margin Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:28
 #: inc/vk-blocks/admin/admin-margin.php:28
 msgid "Please specify the size of the common margin used for responsive spacers, etc."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:47
 #: inc/vk-blocks/admin/admin.php:47
 msgid "Blocks setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:48
 #: inc/vk-blocks/admin/admin.php:48
 msgctxt "label in admin menu"
 msgid "Blocks"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:64
 #: inc/vk-blocks/admin/admin.php:64
 msgid "Blocks Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:70
 #: inc/vk-blocks/admin/admin.php:70
 msgid "Balloon Block Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/load-bootstrap.php:61
 #: inc/vk-blocks/load-bootstrap.php:61
 msgid "VK Blocks Bootstrap Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/load-bootstrap.php:81
 #: inc/vk-blocks/load-bootstrap.php:81
 msgid "Loading Bootstrap4"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/load-bootstrap.php:82
 #: inc/vk-blocks/load-bootstrap.php:82
 msgid "Check here to load Bootstrap4. If your theme or plugins loading Bootstrap4, uncheck here."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/load-bootstrap.php:102
 #: inc/vk-blocks/load-bootstrap.php:102
 msgid "Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/view/class-vk-blocks-postlist.php:186
 #: inc/vk-blocks/view/class-vk-blocks-postlist.php:187
 msgid "No Post is selected"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:320
-#: inc/vk-blocks/vk-blocks-functions.php:211
+#: inc/vk-blocks/vk-blocks-functions.php:212
 msgid "Blocks"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:333
-#: inc/vk-blocks/vk-blocks-functions.php:224
+#: inc/vk-blocks/vk-blocks-functions.php:225
 msgid "Blocks Layout"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:53
 #: inc/vk-components/package/class-vk-component-posts.php:55
 msgid "Read more"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:55
 #: inc/vk-components/package/class-vk-component-posts.php:57
 msgid "New!!"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:238
+#: inc/vk-components/package/class-vk-component-posts.php:255
+msgid "More"
+msgstr ""
+
 #: inc/vk-components/package/class-vk-component-posts.php:291
 msgid "Posts navigation"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:239
 #: inc/vk-components/package/class-vk-component-posts.php:292
 msgid "Posts"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:241
 #: inc/vk-components/package/class-vk-component-posts.php:294
 msgid "Page"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:675
 #: inc/vk-components/package/class-vk-component-posts.php:737
 msgid "Card Noborder"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:679
 #: inc/vk-components/package/class-vk-component-posts.php:741
 msgid "Card Intext"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:683
 #: inc/vk-components/package/class-vk-component-posts.php:745
 msgid "Card Horizontal"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:691
 #: inc/vk-components/package/class-vk-component-posts.php:753
 msgctxt "post list type"
 msgid "Text 1 Column"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:47
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:47
 msgid "CSS Optimize ( Speed up ) Settings"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:66
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:66
 msgid "Tree shaking"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:87
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:87
 msgid "Tree shaking activation settings"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:91
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:91
 msgid "Output only the main CSS of the page inline"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:93
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:159
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:93
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:159
 msgid "Nothing to do"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:94
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:94
 msgid "Active Tree shaking (Recomend)"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:111
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:111
 msgid "Exclude class of Tree shaking"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:115
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:115
 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"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:132
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:132
 msgid "Preload CSS"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:153
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:153
 msgid "Preload CSS activation settings"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:156
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:156
 msgid "Preload css except for critical css"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:160
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:160
 msgid "Active Preload CSS (Recomend)"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:177
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:177
 msgid "Exclude class of Preload CSS"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:181
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:181
 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"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/page-content/index.php:121
-#: src/blocks/page-content/index.php:128
+#: src/blocks/page-content/index.php:152
 msgid "Edit this area"
 msgstr ""
 
-#: dist/vk-blocks-pro/vk-blocks.php:90
-#: vk-blocks.php:95
+#: vk-blocks.php:96
 msgid "Disabled Blocks module on VK All in One Expansion Unit. Because VK-Blocks Plugin running."
 msgstr ""
 
-#: inc/vk-components/package/class-vk-component-posts.php:255
-msgid "More"
+#: src/blocks/alert/block.json
+msgctxt "block title"
+msgid "Alert"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/alert/block.json
 #: src/blocks/alert/block.json
 msgctxt "block description"
 msgid "A colored box with four statuses, including annotations and alerts."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/balloon/block.json
+#: src/blocks/balloon/block.json
+msgctxt "block title"
+msgid "Ballon"
+msgstr ""
+
 #: src/blocks/balloon/block.json
 msgctxt "block description"
 msgid "These speech balloons are perfect for recreating conversations."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/border-box/block.json
+#: src/blocks/border-box/block.json
+msgctxt "block title"
+msgid "Border Box"
+msgstr ""
+
 #: src/blocks/border-box/block.json
 msgctxt "block description"
 msgid "This is a border box where you can place headings to attract attention."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/button/block.json
+#: src/blocks/button/block.json
+msgctxt "block title"
+msgid "Button"
+msgstr ""
+
 #: src/blocks/button/block.json
 msgctxt "block description"
 msgid "A button link that can display icons before and after."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq/block.json
+#: src/blocks/faq/block.json
+msgctxt "block title"
+msgid "Classic FAQ"
+msgstr ""
+
 #: src/blocks/faq/block.json
 msgctxt "block description"
 msgid "Displays a combination of questions and answers."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq2-a/block.json
+#: src/blocks/faq2-a/block.json
+msgctxt "block title"
+msgid "FAQ Answer"
+msgstr ""
+
 #: src/blocks/faq2-a/block.json
 msgctxt "block description"
 msgid "Answer area where you can add blocks freely."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq2-q/block.json
+#: src/blocks/faq2-q/block.json
+msgctxt "block title"
+msgid "FAQ Question"
+msgstr ""
+
 #: src/blocks/faq2-q/block.json
 msgctxt "block description"
 msgid "Question area where you can freely add blocks."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq2/block.json
+#: src/blocks/faq2/block.json
+msgctxt "block title"
+msgid "New FAQ"
+msgstr ""
+
 #: src/blocks/faq2/block.json
 msgctxt "block description"
 msgid "It displays a combination of questions and answers. You can freely add blocks to the question area as well."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/flow/block.json
+#: src/blocks/flow/block.json
+msgctxt "block title"
+msgid "Flow"
+msgstr ""
+
 #: src/blocks/flow/block.json
 msgctxt "block description"
 msgid "Displays a sequential description in time series."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/heading/block.json
+#: src/blocks/heading/block.json
+msgctxt "block title"
+msgid "Heading"
+msgstr ""
+
 #: src/blocks/heading/block.json
 msgctxt "block description"
 msgid "This is a heading that allows you to set text size, subtext, icon, and margin."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/icon-outer/block.json
+#: src/blocks/icon-outer/block.json
+msgctxt "block title"
+msgid "Icon Outer"
+msgstr ""
+
 #: src/blocks/icon-outer/block.json
 msgctxt "block description"
 msgid "Display the Font Awesome icons horizontally."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/icon/block.json
+#: src/blocks/icon/block.json
+msgctxt "block title"
+msgid "Icon"
+msgstr ""
+
 #: src/blocks/icon/block.json
 msgctxt "block description"
 msgid "Display icons with Font Awesome."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/page-content/block.json
+#: src/blocks/page-content/block.json
+msgctxt "block title"
+msgid "Page Content"
+msgstr ""
+
 #: src/blocks/page-content/block.json
 msgctxt "block description"
 msgid "Displays the body content of the specified parent page."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/pr-blocks/block.json
+#: src/blocks/pr-blocks/block.json
+msgctxt "block title"
+msgid "PR Blocks"
+msgstr ""
+
 #: src/blocks/pr-blocks/block.json
 msgctxt "block description"
 msgid "This is a PR block where you can place images and icon."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/pr-content/block.json
+#: src/blocks/pr-content/block.json
+msgctxt "block title"
+msgid "PR Content"
+msgstr ""
+
 #: src/blocks/pr-content/block.json
 msgctxt "block description"
 msgid "This is PR content where you can place images, headlines, text, and buttons."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/spacer/block.json
+#: src/blocks/spacer/block.json
+msgctxt "block title"
+msgid "Responsive Spacer"
+msgstr ""
+
 #: src/blocks/spacer/block.json
 msgctxt "block description"
 msgid "Use responsive spacers to get the margins right."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/staff/block.json
+#: src/blocks/staff/block.json
+msgctxt "block title"
+msgid "Staff"
+msgstr ""
+
 #: src/blocks/staff/block.json
 msgctxt "block description"
 msgid "Used for staff introduction, company introduction, school introduction, menu, etc."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/accordion-target/block.json
+#: src/blocks/_pro/accordion-target/block.json
+msgctxt "block title"
+msgid "Accordion Target"
+msgstr ""
+
 #: src/blocks/_pro/accordion-target/block.json
 msgctxt "block description"
 msgid "This is the content area where you can add blocks freely."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/accordion-trigger/block.json
+#: src/blocks/_pro/accordion-trigger/block.json
+msgctxt "block title"
+msgid "Accordion Trigger"
+msgstr ""
+
 #: src/blocks/_pro/accordion-trigger/block.json
 msgctxt "block description"
 msgid "This is the title area where you can freely add blocks."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/accordion/block.json
+#: src/blocks/_pro/accordion/block.json
+msgctxt "block title"
+msgid "Accordion"
+msgstr ""
+
 #: src/blocks/_pro/accordion/block.json
 msgctxt "block description"
 msgid "Collapses and hides content when the content is long."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/animation/block.json
+#: src/blocks/_pro/animation/block.json
+msgctxt "block title"
+msgid "Animation"
+msgstr ""
+
 #: src/blocks/_pro/animation/block.json
 msgctxt "block description"
 msgid "Add animation to elements when scrolling the page."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/button-outer/block.json
 #: src/blocks/_pro/button-outer/block.json
 msgctxt "block title"
 msgid "Button Outer"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/button-outer/block.json
 #: src/blocks/_pro/button-outer/block.json
 msgctxt "block description"
 msgid "Display the VK Button block horizontally."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/card-item/block.json
 #: src/blocks/_pro/card-item/block.json
-msgctxt "block description"
-msgid "A single item in a card block."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/card/block.json
-#: src/blocks/_pro/card/block.json
-msgctxt "block description"
-msgid "A card where you can place images, headings, text, and links."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/child-page/block.json
-#: src/blocks/_pro/child-page/block.json
-msgctxt "block description"
-msgid "When a parent page is specified, a list of its child pages will be displayed."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/grid-column-item/block.json
-#: src/blocks/_pro/grid-column-item/block.json
-msgctxt "block description"
-msgid "One item in a grit column block."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/grid-column/block.json
-#: src/blocks/_pro/grid-column/block.json
-msgctxt "block description"
-msgid "Set the number of columns to be displayed for each screen size."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/icon-card-item/block.json
-#: src/blocks/_pro/icon-card-item/block.json
-msgctxt "block description"
-msgid "This is one item in an icon card."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/icon-card/block.json
-#: src/blocks/_pro/icon-card/block.json
-msgctxt "block description"
-msgid "Display card with icons, headings, text, and links."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/outer/block.json
-#: src/blocks/_pro/outer/block.json
-msgctxt "block description"
-msgid "Set the background image, color, and border to show the layout and divisions."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/post-list/block.json
-#: src/blocks/_pro/post-list/block.json
-msgctxt "block description"
-msgid "Displays the list of posts by setting the post type, classification, and number of posts to display."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/select-post-list-item/block.json
-#: src/blocks/_pro/select-post-list-item/block.json
-msgctxt "block description"
-msgid "A single item in the select post list."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/select-post-list/block.json
-#: src/blocks/_pro/select-post-list/block.json
-msgctxt "block description"
-msgid "Displays an arbitrarily specified page with the layout of the posting list."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/slider-item/block.json
-#: src/blocks/_pro/slider-item/block.json
-msgctxt "block description"
-msgid "This is one item in the slider."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/slider/block.json
-#: src/blocks/_pro/slider/block.json
-msgctxt "block description"
-msgid "This slider allows you to place various items.Slider is do not move in edit screen."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/step-item/block.json
-#: src/blocks/_pro/step-item/block.json
-msgctxt "block description"
-msgid "This element sets the icon, color, and style of the step mark."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/step/block.json
-#: src/blocks/_pro/step/block.json
-msgctxt "block description"
-msgid "Set and display step marks, which are useful when explaining the order."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/table-of-contents-new/block.json
-#: src/blocks/_pro/table-of-contents-new/block.json
-msgctxt "block description"
-msgid "This is a table of contents that is automatically generated according to the headings when added."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/timeline-item/block.json
-#: src/blocks/_pro/timeline-item/block.json
-msgctxt "block description"
-msgid "This element sets the label, color, and style of the timeline."
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/_pro/timeline/block.json
-#: src/blocks/_pro/timeline/block.json
-msgctxt "block description"
-msgid "Displays a simple schedule and other information that is useful for explaining the order."
-msgstr ""
-
-#: src/blocks/alert/block.json
-msgctxt "block title"
-msgid "Alert"
-msgstr ""
-
-#: src/blocks/balloon/block.json
-msgctxt "block title"
-msgid "Ballon"
-msgstr ""
-
-#: src/blocks/border-box/block.json
-msgctxt "block title"
-msgid "Border Box"
-msgstr ""
-
-#: src/blocks/button/block.json
-msgctxt "block title"
-msgid "Button"
-msgstr ""
-
-#: src/blocks/faq/block.json
-msgctxt "block title"
-msgid "Classic FAQ"
-msgstr ""
-
-#: src/blocks/faq2-a/block.json
-msgctxt "block title"
-msgid "FAQ Answer"
-msgstr ""
-
-#: src/blocks/faq2-q/block.json
-msgctxt "block title"
-msgid "FAQ Question"
-msgstr ""
-
-#: src/blocks/faq2/block.json
-msgctxt "block title"
-msgid "New FAQ"
-msgstr ""
-
-#: src/blocks/flow/block.json
-msgctxt "block title"
-msgid "Flow"
-msgstr ""
-
-#: src/blocks/heading/block.json
-msgctxt "block title"
-msgid "Heading"
-msgstr ""
-
-#: src/blocks/icon-outer/block.json
-msgctxt "block title"
-msgid "Icon Outer"
-msgstr ""
-
-#: src/blocks/icon/block.json
-msgctxt "block title"
-msgid "Icon"
-msgstr ""
-
-#: src/blocks/page-content/block.json
-msgctxt "block title"
-msgid "Page Content"
-msgstr ""
-
-#: src/blocks/pr-blocks/block.json
-msgctxt "block title"
-msgid "PR Blocks"
-msgstr ""
-
-#: src/blocks/pr-content/block.json
-msgctxt "block title"
-msgid "PR Content"
-msgstr ""
-
-#: src/blocks/spacer/block.json
-msgctxt "block title"
-msgid "Responsive Spacer"
-msgstr ""
-
-#: src/blocks/staff/block.json
-msgctxt "block title"
-msgid "Staff"
-msgstr ""
-
-#: src/blocks/_pro/accordion-target/block.json
 msgctxt "block title"
-msgid "Accordion Target"
-msgstr ""
-
-#: src/blocks/_pro/accordion-trigger/block.json
-msgctxt "block title"
-msgid "Accordion Trigger"
-msgstr ""
-
-#: src/blocks/_pro/accordion/block.json
-msgctxt "block title"
-msgid "Accordion"
-msgstr ""
-
-#: src/blocks/_pro/animation/block.json
-msgctxt "block title"
-msgid "Animation"
+msgid "Card Item"
 msgstr ""
 
 #: src/blocks/_pro/card-item/block.json
-msgctxt "block title"
-msgid "Card Item"
+msgctxt "block description"
+msgid "A single item in a card block."
 msgstr ""
 
 #: src/blocks/_pro/card/block.json
@@ -2942,82 +2708,167 @@ msgctxt "block title"
 msgid "Card"
 msgstr ""
 
+#: src/blocks/_pro/card/block.json
+msgctxt "block description"
+msgid "A card where you can place images, headings, text, and links."
+msgstr ""
+
 #: src/blocks/_pro/child-page/block.json
 msgctxt "block title"
 msgid "Child page list"
 msgstr ""
 
+#: src/blocks/_pro/child-page/block.json
+msgctxt "block description"
+msgid "When a parent page is specified, a list of its child pages will be displayed."
+msgstr ""
+
 #: src/blocks/_pro/grid-column-item/block.json
 msgctxt "block title"
 msgid "Grid Column Item"
 msgstr ""
 
+#: src/blocks/_pro/grid-column-item/block.json
+msgctxt "block description"
+msgid "One item in a grit column block."
+msgstr ""
+
 #: src/blocks/_pro/grid-column/block.json
 msgctxt "block title"
 msgid "Grid Column"
 msgstr ""
 
+#: src/blocks/_pro/grid-column/block.json
+msgctxt "block description"
+msgid "Set the number of columns to be displayed for each screen size."
+msgstr ""
+
 #: src/blocks/_pro/icon-card-item/block.json
 msgctxt "block title"
 msgid "Icon Card Item"
 msgstr ""
 
+#: src/blocks/_pro/icon-card-item/block.json
+msgctxt "block description"
+msgid "This is one item in an icon card."
+msgstr ""
+
 #: src/blocks/_pro/icon-card/block.json
 msgctxt "block title"
 msgid "Icon Card"
 msgstr ""
 
+#: src/blocks/_pro/icon-card/block.json
+msgctxt "block description"
+msgid "Display card with icons, headings, text, and links."
+msgstr ""
+
 #: src/blocks/_pro/outer/block.json
 msgctxt "block title"
 msgid "Outer"
 msgstr ""
 
+#: src/blocks/_pro/outer/block.json
+msgctxt "block description"
+msgid "Set the background image, color, and border to show the layout and divisions."
+msgstr ""
+
 #: src/blocks/_pro/post-list/block.json
 msgctxt "block title"
 msgid "Post list"
 msgstr ""
 
+#: src/blocks/_pro/post-list/block.json
+msgctxt "block description"
+msgid "Displays the list of posts by setting the post type, classification, and number of posts to display."
+msgstr ""
+
 #: src/blocks/_pro/select-post-list-item/block.json
 msgctxt "block title"
 msgid "Selected Post List Item"
 msgstr ""
 
+#: src/blocks/_pro/select-post-list-item/block.json
+msgctxt "block description"
+msgid "A single item in the select post list."
+msgstr ""
+
 #: src/blocks/_pro/select-post-list/block.json
 msgctxt "block title"
 msgid "Selected Post List"
 msgstr ""
 
+#: src/blocks/_pro/select-post-list/block.json
+msgctxt "block description"
+msgid "Displays an arbitrarily specified page with the layout of the posting list."
+msgstr ""
+
 #: src/blocks/_pro/slider-item/block.json
 msgctxt "block title"
 msgid "Slider Item"
 msgstr ""
 
+#: src/blocks/_pro/slider-item/block.json
+msgctxt "block description"
+msgid "This is one item in the slider."
+msgstr ""
+
 #: src/blocks/_pro/slider/block.json
 msgctxt "block title"
 msgid "Slider"
 msgstr ""
 
+#: src/blocks/_pro/slider/block.json
+msgctxt "block description"
+msgid "This slider allows you to place various items.Slider is do not move in edit screen."
+msgstr ""
+
 #: src/blocks/_pro/step-item/block.json
 msgctxt "block title"
 msgid "Step Item"
 msgstr ""
 
+#: src/blocks/_pro/step-item/block.json
+msgctxt "block description"
+msgid "This element sets the icon, color, and style of the step mark."
+msgstr ""
+
 #: src/blocks/_pro/step/block.json
 msgctxt "block title"
 msgid "Step"
 msgstr ""
 
+#: src/blocks/_pro/step/block.json
+msgctxt "block description"
+msgid "Set and display step marks, which are useful when explaining the order."
+msgstr ""
+
 #: src/blocks/_pro/table-of-contents-new/block.json
 msgctxt "block title"
 msgid "Table of Contents"
 msgstr ""
 
+#: src/blocks/_pro/table-of-contents-new/block.json
+msgctxt "block description"
+msgid "This is a table of contents that is automatically generated according to the headings when added."
+msgstr ""
+
 #: src/blocks/_pro/timeline-item/block.json
 msgctxt "block title"
 msgid "Timeline Item"
 msgstr ""
 
+#: src/blocks/_pro/timeline-item/block.json
+msgctxt "block description"
+msgid "This element sets the label, color, and style of the timeline."
+msgstr ""
+
 #: src/blocks/_pro/timeline/block.json
 msgctxt "block title"
 msgid "Timeline"
 msgstr ""
+
+#: src/blocks/_pro/timeline/block.json
+msgctxt "block description"
+msgid "Displays a simple schedule and other information that is useful for explaining the order."
+msgstr ""
diff --git a/src/blocks/_pro/outer/deprecated/1.20.2/save.js b/src/blocks/_pro/outer/deprecated/1.20.2/save.js
new file mode 100644
index 000000000..7e716668d
--- /dev/null
+++ b/src/blocks/_pro/outer/deprecated/1.20.2/save.js
@@ -0,0 +1,133 @@
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { componentDivider } from '../component-divider';
+import GenerateBgImage from '@vkblocks/utils/GenerateBgImage';
+
+export default function save(props) {
+	const { attributes } = props;
+	const {
+		bgPosition,
+		outerWidth,
+		padding_left_and_right, //eslint-disable-line camelcase
+		padding_top_and_bottom, //eslint-disable-line camelcase
+		upper_level, //eslint-disable-line camelcase
+		lower_level, //eslint-disable-line camelcase
+		upperDividerBgColor,
+		lowerDividerBgColor,
+		dividerType,
+		borderWidth,
+		borderStyle,
+		borderColor,
+		borderRadius,
+		clientId,
+	} = attributes;
+
+	let classPaddingLR;
+	let classPaddingVertical;
+	let classBgPosition;
+	let whichSideUpper;
+	let whichSideLower;
+
+	//幅のクラス切り替え
+	const classWidth = `vk_outer-width-${outerWidth}`;
+
+	//classBgPositionのクラス切り替え
+	if (bgPosition === 'parallax') {
+		classBgPosition = 'vk_outer-bgPosition-parallax vk-prlx';
+	} else if (bgPosition === 'fixed') {
+		classBgPosition = 'vk_outer-bgPosition-fixed';
+	} else if (bgPosition === 'repeat') {
+		classBgPosition = 'vk_outer-bgPosition-repeat';
+	} else {
+		classBgPosition = 'vk_outer-bgPosition-normal';
+	}
+
+	//classPaddingLRのクラス切り替え
+	classPaddingLR = '';
+	//eslint-disable-next-line camelcase
+	if (padding_left_and_right === '0') {
+		classPaddingLR = 'vk_outer-paddingLR-none';
+		//eslint-disable-next-line camelcase
+	} else if (padding_left_and_right === '1') {
+		classPaddingLR = 'vk_outer-paddingLR-use';
+		//eslint-disable-next-line camelcase
+	} else if (padding_left_and_right === '2') {
+		// Fit to content area width
+		classPaddingLR = 'vk_outer-paddingLR-zero';
+	}
+
+	//classPaddingVerticalのクラス切り替
+	//eslint-disable-next-line camelcase
+	if (padding_top_and_bottom === '1') {
+		classPaddingVertical = 'vk_outer-paddingVertical-use';
+	} else {
+		classPaddingVertical = 'vk_outer-paddingVertical-none';
+	}
+
+	//上側セクションの傾き切り替
+	//eslint-disable-next-line camelcase
+	if (upper_level) {
+		whichSideUpper = 'upper';
+	}
+
+	//下側セクションの傾き切り替
+	//eslint-disable-next-line camelcase
+	if (lower_level) {
+		whichSideLower = 'lower';
+	}
+
+	//編集画面とサイト上の切り替え
+	const containerClass = 'vk_outer_container';
+
+	//Dividerエフェクトがない時のみ枠線を追
+	let borderStyleProperty = {};
+	//eslint-disable-next-line camelcase
+	if (
+		upper_level === 0 && //eslint-disable-line camelcase
+		lower_level === 0 && //eslint-disable-line camelcase
+		borderWidth > 0 &&
+		borderStyle !== 'none'
+	) {
+		borderStyleProperty = {
+			border: `${borderWidth}px ${borderStyle} ${borderColor}`,
+			borderRadius: `${borderRadius}px`,
+		};
+		//eslint-disable-next-line camelcase
+	} else if (upper_level !== 0 || lower_level !== 0) {
+		//eslint-disable-line camelcase
+		borderStyleProperty = {
+			border: `none`,
+			borderRadius: `0px`,
+		};
+	}
+
+	const blockProps = useBlockProps.save({
+		className: `vkb-outer-${clientId} vk_outer ${classWidth} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`,
+		style: borderStyleProperty,
+	});
+	return (
+		<div {...blockProps}>
+			<GenerateBgImage
+				prefix={'vkb-outer'}
+				clientId={clientId}
+				{...props}
+			/>
+			<div>
+				{componentDivider(
+					upper_level,
+					upperDividerBgColor,
+					whichSideUpper,
+					dividerType
+				)}
+				<div className={containerClass}>
+					<InnerBlocks.Content />
+				</div>
+				{componentDivider(
+					lower_level,
+					lowerDividerBgColor,
+					whichSideLower,
+					dividerType
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/src/blocks/_pro/outer/deprecated/index.js b/src/blocks/_pro/outer/deprecated/index.js
index 717d54656..35e1c1f87 100644
--- a/src/blocks/_pro/outer/deprecated/index.js
+++ b/src/blocks/_pro/outer/deprecated/index.js
@@ -11,6 +11,7 @@ import save009 from './0.0.9/save';
 import save0_37_1 from './0.37.1/save';
 import save0_60_0 from './0.60.0/save';
 import save1_0_13 from './1.0.13/save';
+import save1_20_2 from './1.20.2/save';
 
 const blockAttributes = {
 	bgColor: {
@@ -81,6 +82,28 @@ const blockAttributes = {
 
 const deprecated = [
 	//ブロックテンプレート用のdeprecated
+	{
+		attributes: {
+			...blockAttributes,
+			defaultBgColor: {
+				type: 'string',
+				default: '#f3f4f5',
+			},
+			bgImageTablet: {
+				type: 'string',
+				default: null,
+			},
+			bgImageMobile: {
+				type: 'string',
+				default: null,
+			},
+			clientId: {
+				type: 'string',
+				default: null,
+			},
+		},
+		save: save1_20_2,
+	},	
 	{
 		attributes: {
 			...blockAttributes,
diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index f04cd5fec..c0499dfea 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -1,5 +1,6 @@
 import toNumber from '@vkblocks/utils/to-number';
 import { AdvancedMediaUpload } from '@vkblocks/components/advanced-media-upload';
+import { AdvancedColorPalette } from '@vkblocks/components/advanced-color-palette';
 import { __ } from '@wordpress/i18n';
 import {
 	RangeControl,
@@ -190,6 +191,7 @@ export default function OuterEdit(props) {
 							'vk-blocks'
 						)}
 					>
+						<AdvancedColorPalette schema={'bgColor'} {...props} />
 						<ColorPalette
 							value={bgColor}
 							onChange={(value) =>
diff --git a/src/utils/GenerateBgImage.js b/src/utils/GenerateBgImage.js
index ab89baccf..2d2dc7318 100644
--- a/src/utils/GenerateBgImage.js
+++ b/src/utils/GenerateBgImage.js
@@ -1,6 +1,8 @@
 import hex2rgba from './hex-to-rgba';
+import { colorSlugToColorCode } from './color-slug-to-color-code';
+import { isHexColor } from './is-hex-color';
 const GenerateBgImage = (props) => {
-	const { attributes, clientId, prefix } = props;
+	const { attributes, clientId, prefix, bgColorOutputDisable } = props;
 	const { bgImageMobile, bgImageTablet, bgImage, bgColor, opacity, bgSize } =
 		attributes;
 
@@ -20,31 +22,41 @@ const GenerateBgImage = (props) => {
 	}
 
 	let bgColorWOpacity;
-
+	let bgHexColor = bgColor;
 	//hexからrgbaに変換
 	if (bgColor) {
-		bgColorWOpacity = hex2rgba(bgColor, opacity);
+		if (!isHexColor(bgColor)) {
+			bgHexColor = colorSlugToColorCode(bgColor);
+		}
+		bgColorWOpacity = hex2rgba(bgHexColor, opacity);
 	} else {
 		//背景色をクリアした時は、白に変更
 		bgColorWOpacity = hex2rgba('#fff', opacity);
 	}
 
+	let bgColorCss = '';
+	let bgColorCssNoBackGround = '';
+	if (!bgColorOutputDisable) {
+		bgColorCss = `background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}),`;
+		bgColorCssNoBackGround = `background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity})`;
+	}
+
 	//moible only
 	if (bgImageMobile && !bgImageTablet && !bgImage) {
 		return (
-			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}`}</style>
+			<style>{`.${prefix}-${clientId}{${bgColorCss}url(${bgImageMobile}); ${backgroundStyle}}`}</style>
 		);
 	}
 	//tablet only
 	if (!bgImageMobile && bgImageTablet && !bgImage) {
 		return (
-			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}`}</style>
+			<style>{`.${prefix}-${clientId}{${bgColorCss}url(${bgImageTablet}); ${backgroundStyle}}`}</style>
 		);
 	}
 	//pc only
 	if (!bgImageMobile && !bgImageTablet && bgImage) {
 		return (
-			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}`}</style>
+			<style>{`.${prefix}-${clientId}{${bgColorCss}url(${bgImage}); ${backgroundStyle}}`}</style>
 		);
 	}
 	//pc -mobile
@@ -53,10 +65,10 @@ const GenerateBgImage = (props) => {
 			<style>
 				{`
           @media screen and (${underPcViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
+            .${prefix}-${clientId}{${bgColorCss}url(${bgImageMobile}); ${backgroundStyle}}
          }
           @media screen and (${pcViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
+            .${prefix}-${clientId}{${bgColorCss}url(${bgImage}); ${backgroundStyle}}
          }
           `}
 			</style>
@@ -68,10 +80,10 @@ const GenerateBgImage = (props) => {
 			<style>
 				{`
           @media screen and (${underPcViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
+            .${prefix}-${clientId}{${bgColorCss}url(${bgImageTablet}); ${backgroundStyle}}
          }
           @media screen and (${pcViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
+            .${prefix}-${clientId}{${bgColorCss}url(${bgImage}); ${backgroundStyle}}
          }
           `}
 			</style>
@@ -83,10 +95,10 @@ const GenerateBgImage = (props) => {
 			<style>
 				{`
           @media screen and (${mobileViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
+            .${prefix}-${clientId}{${bgColorCss}url(${bgImageMobile}); ${backgroundStyle}}
          }
           @media screen and (${tabletViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
+            .${prefix}-${clientId}{${bgColorCss}url(${bgImageTablet}); ${backgroundStyle}}
          }
         `}
 			</style>
@@ -98,13 +110,13 @@ const GenerateBgImage = (props) => {
 			<style>
 				{`
         @media screen and (${mobileViewport}) {
-          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
+          .${prefix}-${clientId}{${bgColorCss}url(${bgImageMobile}); ${backgroundStyle}}
        }
         @media screen and (${tabletViewport}) {
-          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
+          .${prefix}-${clientId}{${bgColorCss}url(${bgImageTablet}); ${backgroundStyle}}
        }
         @media screen and (${pcViewport}) {
-          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
+          .${prefix}-${clientId}{${bgColorCss}url(${bgImage}); ${backgroundStyle}}
        }
         `}
 			</style>
@@ -113,7 +125,7 @@ const GenerateBgImage = (props) => {
 	//no background image
 	if (!bgImageMobile && !bgImageTablet && !bgImage) {
 		return (
-			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}); ${backgroundStyle}}`}</style>
+			<style>{`.${prefix}-${clientId}{${bgColorCssNoBackGround}; ${backgroundStyle}}`}</style>
 		);
 	}
 };

From ac5c57ec0fe0e620cb0bd53f91f70a231c8803d0 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Mon, 6 Dec 2021 18:42:39 +0900
Subject: [PATCH 02/22] =?UTF-8?q?refactor:=20GnenerateBgImage=E3=83=AA?=
 =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF=E3=83=AA=E3=83=B3=E3=82=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/GenerateBgImage.js | 146 +++++++++++++----------------------
 1 file changed, 54 insertions(+), 92 deletions(-)

diff --git a/src/utils/GenerateBgImage.js b/src/utils/GenerateBgImage.js
index 2d2dc7318..aadead7b0 100644
--- a/src/utils/GenerateBgImage.js
+++ b/src/utils/GenerateBgImage.js
@@ -34,99 +34,61 @@ const GenerateBgImage = (props) => {
 		bgColorWOpacity = hex2rgba('#fff', opacity);
 	}
 
-	let bgColorCss = '';
-	let bgColorCssNoBackGround = '';
-	if (!bgColorOutputDisable) {
-		bgColorCss = `background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}),`;
-		bgColorCssNoBackGround = `background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity})`;
+	////////////////////////
+	let backgroundInfo = [];
+	if        (bgImageMobile && !bgImageTablet && !bgImage) {
+		backgroundInfo.push({url: bgImageMobile});
+	} else if (!bgImageMobile && bgImageTablet && !bgImage) {
+		backgroundInfo.push({url: bgImageTablet});
+	} else if (!bgImageMobile && !bgImageTablet && bgImage) {
+		backgroundInfo.push({url: bgImage});
+	} else if (bgImageMobile && !bgImageTablet && bgImage) {
+		backgroundInfo.push({mediaQuery: underPcViewport, url: bgImageMobile});
+		backgroundInfo.push({mediaQuery: pcViewport, url: bgImage});
+	} else if (!bgImageMobile && bgImageTablet && bgImage) {
+		backgroundInfo.push({mediaQuery: underPcViewport, url: bgImageTablet});
+		backgroundInfo.push({mediaQuery: pcViewport, url: bgImage});
+	} else if (bgImageMobile && bgImageTablet && !bgImage) {
+		backgroundInfo.push({mediaQuery: mobileViewport, url: bgImageMobile});
+		backgroundInfo.push({mediaQuery: tabletViewport, url: bgImageTablet});
+	} else if (bgImageMobile && bgImageTablet && bgImage) {
+		backgroundInfo.push({mediaQuery: mobileViewport, url: bgImageMobile});
+		backgroundInfo.push({mediaQuery: tabletViewport, url: bgImageTablet});
+		backgroundInfo.push({mediaQuery: pcViewport, url: bgImage});
+	} else if (!bgImageMobile && !bgImageTablet && !bgImage) {
+		backgroundInfo.push({mediaQuery: null, url: null});
 	}
 
-	//moible only
-	if (bgImageMobile && !bgImageTablet && !bgImage) {
-		return (
-			<style>{`.${prefix}-${clientId}{${bgColorCss}url(${bgImageMobile}); ${backgroundStyle}}`}</style>
-		);
-	}
-	//tablet only
-	if (!bgImageMobile && bgImageTablet && !bgImage) {
-		return (
-			<style>{`.${prefix}-${clientId}{${bgColorCss}url(${bgImageTablet}); ${backgroundStyle}}`}</style>
-		);
-	}
-	//pc only
-	if (!bgImageMobile && !bgImageTablet && bgImage) {
-		return (
-			<style>{`.${prefix}-${clientId}{${bgColorCss}url(${bgImage}); ${backgroundStyle}}`}</style>
-		);
-	}
-	//pc -mobile
-	if (bgImageMobile && !bgImageTablet && bgImage) {
-		return (
-			<style>
-				{`
-          @media screen and (${underPcViewport}) {
-            .${prefix}-${clientId}{${bgColorCss}url(${bgImageMobile}); ${backgroundStyle}}
-         }
-          @media screen and (${pcViewport}) {
-            .${prefix}-${clientId}{${bgColorCss}url(${bgImage}); ${backgroundStyle}}
-         }
-          `}
-			</style>
-		);
-	}
-	//pc -tablet
-	if (!bgImageMobile && bgImageTablet && bgImage) {
-		return (
-			<style>
-				{`
-          @media screen and (${underPcViewport}) {
-            .${prefix}-${clientId}{${bgColorCss}url(${bgImageTablet}); ${backgroundStyle}}
-         }
-          @media screen and (${pcViewport}) {
-            .${prefix}-${clientId}{${bgColorCss}url(${bgImage}); ${backgroundStyle}}
-         }
-          `}
-			</style>
-		);
-	}
-	//tablet - mobile
-	if (bgImageMobile && bgImageTablet && !bgImage) {
-		return (
-			<style>
-				{`
-          @media screen and (${mobileViewport}) {
-            .${prefix}-${clientId}{${bgColorCss}url(${bgImageMobile}); ${backgroundStyle}}
-         }
-          @media screen and (${tabletViewport}) {
-            .${prefix}-${clientId}{${bgColorCss}url(${bgImageTablet}); ${backgroundStyle}}
-         }
-        `}
-			</style>
-		);
-	}
-	//pc -tablet - mobile
-	if (bgImageMobile && bgImageTablet && bgImage) {
-		return (
-			<style>
-				{`
-        @media screen and (${mobileViewport}) {
-          .${prefix}-${clientId}{${bgColorCss}url(${bgImageMobile}); ${backgroundStyle}}
-       }
-        @media screen and (${tabletViewport}) {
-          .${prefix}-${clientId}{${bgColorCss}url(${bgImageTablet}); ${backgroundStyle}}
-       }
-        @media screen and (${pcViewport}) {
-          .${prefix}-${clientId}{${bgColorCss}url(${bgImage}); ${backgroundStyle}}
-       }
-        `}
-			</style>
-		);
-	}
-	//no background image
-	if (!bgImageMobile && !bgImageTablet && !bgImage) {
-		return (
-			<style>{`.${prefix}-${clientId}{${bgColorCssNoBackGround}; ${backgroundStyle}}`}</style>
-		);
-	}
+	const selectorCss = `.${prefix}-${clientId}`;
+	const bgColorCss = bgColorOutputDisable ? '' : `background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity})`;
+	const outputCss = [];
+	backgroundInfo.forEach( bg => {
+		let mediaQueryBefore = '';
+		let mediaQueryAfter = '';
+		if (backgroundInfo.length > 1) {
+			mediaQueryBefore = `@media screen and (${bg.mediaQuery}) {`;
+			mediaQueryAfter =  '}';
+		}
+
+		let bgUrlCss = '';
+		if (bg.url) {
+			bgUrlCss = `url(${bg.url});`;
+		}
+
+		const comma = bgUrlCss ? ',' : ';';
+
+		outputCss.push(mediaQueryBefore ?? '');
+		outputCss.push(`${selectorCss}{${bgColorCss}${comma}${bgUrlCss} ${backgroundStyle}}`);
+		outputCss.push(mediaQueryAfter ?? '');
+
+	});
+
+
+	return (
+		<style>
+			{outputCss.join('')}
+		</style>
+	)
+
 };
 export default GenerateBgImage;

From cce80edec394c7a32867dfe19a2751e71c4501d0 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Mon, 6 Dec 2021 18:43:22 +0900
Subject: [PATCH 03/22] lint

---
 src/utils/GenerateBgImage.js | 57 +++++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/utils/GenerateBgImage.js b/src/utils/GenerateBgImage.js
index aadead7b0..32c517f52 100644
--- a/src/utils/GenerateBgImage.js
+++ b/src/utils/GenerateBgImage.js
@@ -35,39 +35,47 @@ const GenerateBgImage = (props) => {
 	}
 
 	////////////////////////
-	let backgroundInfo = [];
-	if        (bgImageMobile && !bgImageTablet && !bgImage) {
-		backgroundInfo.push({url: bgImageMobile});
+	const backgroundInfo = [];
+	if (bgImageMobile && !bgImageTablet && !bgImage) {
+		backgroundInfo.push({ url: bgImageMobile });
 	} else if (!bgImageMobile && bgImageTablet && !bgImage) {
-		backgroundInfo.push({url: bgImageTablet});
+		backgroundInfo.push({ url: bgImageTablet });
 	} else if (!bgImageMobile && !bgImageTablet && bgImage) {
-		backgroundInfo.push({url: bgImage});
+		backgroundInfo.push({ url: bgImage });
 	} else if (bgImageMobile && !bgImageTablet && bgImage) {
-		backgroundInfo.push({mediaQuery: underPcViewport, url: bgImageMobile});
-		backgroundInfo.push({mediaQuery: pcViewport, url: bgImage});
+		backgroundInfo.push({
+			mediaQuery: underPcViewport,
+			url: bgImageMobile,
+		});
+		backgroundInfo.push({ mediaQuery: pcViewport, url: bgImage });
 	} else if (!bgImageMobile && bgImageTablet && bgImage) {
-		backgroundInfo.push({mediaQuery: underPcViewport, url: bgImageTablet});
-		backgroundInfo.push({mediaQuery: pcViewport, url: bgImage});
+		backgroundInfo.push({
+			mediaQuery: underPcViewport,
+			url: bgImageTablet,
+		});
+		backgroundInfo.push({ mediaQuery: pcViewport, url: bgImage });
 	} else if (bgImageMobile && bgImageTablet && !bgImage) {
-		backgroundInfo.push({mediaQuery: mobileViewport, url: bgImageMobile});
-		backgroundInfo.push({mediaQuery: tabletViewport, url: bgImageTablet});
+		backgroundInfo.push({ mediaQuery: mobileViewport, url: bgImageMobile });
+		backgroundInfo.push({ mediaQuery: tabletViewport, url: bgImageTablet });
 	} else if (bgImageMobile && bgImageTablet && bgImage) {
-		backgroundInfo.push({mediaQuery: mobileViewport, url: bgImageMobile});
-		backgroundInfo.push({mediaQuery: tabletViewport, url: bgImageTablet});
-		backgroundInfo.push({mediaQuery: pcViewport, url: bgImage});
+		backgroundInfo.push({ mediaQuery: mobileViewport, url: bgImageMobile });
+		backgroundInfo.push({ mediaQuery: tabletViewport, url: bgImageTablet });
+		backgroundInfo.push({ mediaQuery: pcViewport, url: bgImage });
 	} else if (!bgImageMobile && !bgImageTablet && !bgImage) {
-		backgroundInfo.push({mediaQuery: null, url: null});
+		backgroundInfo.push({ mediaQuery: null, url: null });
 	}
 
 	const selectorCss = `.${prefix}-${clientId}`;
-	const bgColorCss = bgColorOutputDisable ? '' : `background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity})`;
+	const bgColorCss = bgColorOutputDisable
+		? ''
+		: `background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity})`;
 	const outputCss = [];
-	backgroundInfo.forEach( bg => {
+	backgroundInfo.forEach((bg) => {
 		let mediaQueryBefore = '';
 		let mediaQueryAfter = '';
 		if (backgroundInfo.length > 1) {
 			mediaQueryBefore = `@media screen and (${bg.mediaQuery}) {`;
-			mediaQueryAfter =  '}';
+			mediaQueryAfter = '}';
 		}
 
 		let bgUrlCss = '';
@@ -78,17 +86,12 @@ const GenerateBgImage = (props) => {
 		const comma = bgUrlCss ? ',' : ';';
 
 		outputCss.push(mediaQueryBefore ?? '');
-		outputCss.push(`${selectorCss}{${bgColorCss}${comma}${bgUrlCss} ${backgroundStyle}}`);
+		outputCss.push(
+			`${selectorCss}{${bgColorCss}${comma}${bgUrlCss} ${backgroundStyle}}`
+		);
 		outputCss.push(mediaQueryAfter ?? '');
-
 	});
 
-
-	return (
-		<style>
-			{outputCss.join('')}
-		</style>
-	)
-
+	return <style>{outputCss.join('')}</style>;
 };
 export default GenerateBgImage;

From 427cea4679d95aea24fb7fa2b7f06c994a439784 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Tue, 7 Dec 2021 16:58:55 +0900
Subject: [PATCH 04/22] =?UTF-8?q?fix:=20outer=E8=83=8C=E6=99=AF=E8=89=B2?=
 =?UTF-8?q?=E3=82=92=E3=82=AD=E3=83=BC=E3=82=AB=E3=83=A9=E3=83=BC=E8=BF=BD?=
 =?UTF-8?q?=E9=9A=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/blocks/_pro/outer/edit.js | 14 ++++++++++++-
 src/blocks/_pro/outer/save.js | 16 ++++++++++++++-
 src/utils/GenerateBgImage.js  | 38 +++++++++++++++++++++++++++++------
 3 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index c0499dfea..b0077450b 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -21,6 +21,7 @@ import { useEffect } from '@wordpress/element';
 import { dispatch } from '@wordpress/data';
 import { componentDivider } from './component-divider';
 import GenerateBgImage from '@vkblocks/utils/GenerateBgImage';
+import { isHexColor } from '@vkblocks/utils/is-hex-color';
 
 export default function OuterEdit(props) {
 	const { attributes, setAttributes, clientId } = props;
@@ -171,8 +172,18 @@ export default function OuterEdit(props) {
 		};
 	}
 
+	const bgColorClasses = [];
+	bgColorClasses.push('has-background');
+
+	const bgColorOutputDisable = false;
+	if (!isHexColor(bgColor)) {
+		bgColorClasses.push(`has-${bgColor}-background-color`);
+	}
+
 	const blockProps = useBlockProps({
-		className: `vkb-outer-${clientId} vk_outer ${classWidth} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`,
+		className: `vkb-outer-${clientId} vk_outer ${classWidth} ${bgColorClasses.join(
+			' '
+		)} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`,
 		style: borderStyleProperty,
 	});
 
@@ -638,6 +649,7 @@ export default function OuterEdit(props) {
 				<GenerateBgImage
 					prefix={'vkb-outer'}
 					clientId={clientId}
+					bgColorOutputDisable={bgColorOutputDisable}
 					{...props}
 				/>
 				<div>
diff --git a/src/blocks/_pro/outer/save.js b/src/blocks/_pro/outer/save.js
index 956a0fa48..bf758bd75 100644
--- a/src/blocks/_pro/outer/save.js
+++ b/src/blocks/_pro/outer/save.js
@@ -1,10 +1,12 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { componentDivider } from './component-divider';
 import GenerateBgImage from '@vkblocks/utils/GenerateBgImage';
+import { isHexColor } from '@vkblocks/utils/is-hex-color';
 
 export default function save(props) {
 	const { attributes } = props;
 	const {
+		bgColor,
 		bgPosition,
 		outerWidth,
 		padding_left_and_right, //eslint-disable-line camelcase
@@ -100,8 +102,19 @@ export default function save(props) {
 		};
 	}
 
+	const bgColorClasses = [];
+	bgColorClasses.push('has-background');
+
+	let bgColorOutputDisable = false;
+	if (!isHexColor(bgColor)) {
+		bgColorOutputDisable = true;
+		bgColorClasses.push(`has-${bgColor}-background-color`);
+	}
+
 	const blockProps = useBlockProps.save({
-		className: `vkb-outer-${clientId} vk_outer ${classWidth} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`,
+		className: `vkb-outer-${clientId} vk_outer ${classWidth} ${bgColorClasses.join(
+			' '
+		)} ${classPaddingLR} ${classPaddingVertical} ${classBgPosition}`,
 		style: borderStyleProperty,
 	});
 	return (
@@ -109,6 +122,7 @@ export default function save(props) {
 			<GenerateBgImage
 				prefix={'vkb-outer'}
 				clientId={clientId}
+				bgColorOutputDisable={bgColorOutputDisable}
 				{...props}
 			/>
 			<div>
diff --git a/src/utils/GenerateBgImage.js b/src/utils/GenerateBgImage.js
index 32c517f52..b37f0f854 100644
--- a/src/utils/GenerateBgImage.js
+++ b/src/utils/GenerateBgImage.js
@@ -34,60 +34,86 @@ const GenerateBgImage = (props) => {
 		bgColorWOpacity = hex2rgba('#fff', opacity);
 	}
 
-	////////////////////////
-	const backgroundInfo = [];
+	/* eslint-disable */
+	let backgroundInfo = [];
+
+	// モバイル背景のみ有効
 	if (bgImageMobile && !bgImageTablet && !bgImage) {
 		backgroundInfo.push({ url: bgImageMobile });
+
+		// タブレット背景のみ有効
 	} else if (!bgImageMobile && bgImageTablet && !bgImage) {
 		backgroundInfo.push({ url: bgImageTablet });
+
+		// PC背景のみ有効
 	} else if (!bgImageMobile && !bgImageTablet && bgImage) {
 		backgroundInfo.push({ url: bgImage });
+
+		// モバイル＆PC背景が有効
 	} else if (bgImageMobile && !bgImageTablet && bgImage) {
 		backgroundInfo.push({
 			mediaQuery: underPcViewport,
 			url: bgImageMobile,
 		});
 		backgroundInfo.push({ mediaQuery: pcViewport, url: bgImage });
+
+		// タブレット＆PC背景が有効
 	} else if (!bgImageMobile && bgImageTablet && bgImage) {
 		backgroundInfo.push({
 			mediaQuery: underPcViewport,
 			url: bgImageTablet,
 		});
 		backgroundInfo.push({ mediaQuery: pcViewport, url: bgImage });
+
+		// モバイル＆タブレット背景が有効
 	} else if (bgImageMobile && bgImageTablet && !bgImage) {
 		backgroundInfo.push({ mediaQuery: mobileViewport, url: bgImageMobile });
 		backgroundInfo.push({ mediaQuery: tabletViewport, url: bgImageTablet });
+
+		// PC&モバイル＆タブレット背景が有効
 	} else if (bgImageMobile && bgImageTablet && bgImage) {
 		backgroundInfo.push({ mediaQuery: mobileViewport, url: bgImageMobile });
 		backgroundInfo.push({ mediaQuery: tabletViewport, url: bgImageTablet });
 		backgroundInfo.push({ mediaQuery: pcViewport, url: bgImage });
+
+		// 背景がすべて有効になっていない
 	} else if (!bgImageMobile && !bgImageTablet && !bgImage) {
 		backgroundInfo.push({ mediaQuery: null, url: null });
 	}
+	/* eslint-enable */
 
+	// ここからCSSの組み立て処理
 	const selectorCss = `.${prefix}-${clientId}`;
 	const bgColorCss = bgColorOutputDisable
 		? ''
 		: `background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity})`;
 	const outputCss = [];
+
 	backgroundInfo.forEach((bg) => {
 		let mediaQueryBefore = '';
 		let mediaQueryAfter = '';
+
+		// 背景情報が複数あるときのみメディアクエリを指定
 		if (backgroundInfo.length > 1) {
-			mediaQueryBefore = `@media screen and (${bg.mediaQuery}) {`;
-			mediaQueryAfter = '}';
+			mediaQueryBefore = `\n\t@media screen and (${bg.mediaQuery}) {\n\t`;
+			mediaQueryAfter = '}\n\t';
 		}
 
+		// 背景が指定されているときのみ url出力
 		let bgUrlCss = '';
 		if (bg.url) {
 			bgUrlCss = `url(${bg.url});`;
 		}
 
-		const comma = bgUrlCss ? ',' : ';';
+		let separation = bgUrlCss ? ', ' : ';';
+
+		if ('' === bgColorCss && !bg.url) {
+			separation = '';
+		}
 
 		outputCss.push(mediaQueryBefore ?? '');
 		outputCss.push(
-			`${selectorCss}{${bgColorCss}${comma}${bgUrlCss} ${backgroundStyle}}`
+			`${selectorCss}{${bgColorCss}${separation}${bgUrlCss} ${backgroundStyle}}\n`
 		);
 		outputCss.push(mediaQueryAfter ?? '');
 	});

From 97aaa16592110bd6e41ae23ffb4048c6b1fa7598 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Tue, 7 Dec 2021 17:13:34 +0900
Subject: [PATCH 05/22] =?UTF-8?q?fix:deprecated=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../deprecated/1.20.2/GenerateBgImage.js      | 120 ++++++++++++++++++
 .../_pro/outer/deprecated/1.20.2/save.js      |   2 +-
 2 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 src/blocks/_pro/outer/deprecated/1.20.2/GenerateBgImage.js

diff --git a/src/blocks/_pro/outer/deprecated/1.20.2/GenerateBgImage.js b/src/blocks/_pro/outer/deprecated/1.20.2/GenerateBgImage.js
new file mode 100644
index 000000000..7edd21db8
--- /dev/null
+++ b/src/blocks/_pro/outer/deprecated/1.20.2/GenerateBgImage.js
@@ -0,0 +1,120 @@
+import hex2rgba from '@vkblocks/utils/hex-to-rgba';
+const GenerateBgImage = (props) => {
+	const { attributes, clientId, prefix } = props;
+	const { bgImageMobile, bgImageTablet, bgImage, bgColor, opacity, bgSize } =
+		attributes;
+
+	const mobileViewport = 'max-width: 575.98px';
+	const tabletViewport = 'min-width: 576px';
+	const pcViewport = 'min-width: 1200px';
+	const underPcViewport = 'max-width: 1199.98px';
+
+	let backgroundStyle;
+	const backgroundPosition = 'background-position:center!important;';
+	if ('cover' === bgSize) {
+		backgroundStyle = `background-size:${bgSize}!important; ${backgroundPosition}`;
+	} else if ('repeat' === bgSize) {
+		backgroundStyle = `background-repeat:${bgSize}!important; ${backgroundPosition}`;
+	} else {
+		backgroundStyle = ``;
+	}
+
+	let bgColorWOpacity;
+
+	//hexからrgbaに変換
+	if (bgColor) {
+		bgColorWOpacity = hex2rgba(bgColor, opacity);
+	} else {
+		//背景色をクリアした時は、白に変更
+		bgColorWOpacity = hex2rgba('#fff', opacity);
+	}
+
+	//moible only
+	if (bgImageMobile && !bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//tablet only
+	if (!bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc only
+	if (!bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc -mobile
+	if (bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//pc -tablet
+	if (!bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//tablet - mobile
+	if (bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${mobileViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${tabletViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
+         }
+        `}
+			</style>
+		);
+	}
+	//pc -tablet - mobile
+	if (bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+        @media screen and (${mobileViewport}) {
+          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
+       }
+        @media screen and (${tabletViewport}) {
+          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
+       }
+        @media screen and (${pcViewport}) {
+          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
+       }
+        `}
+			</style>
+		);
+	}
+	//no background image
+	if (!bgImageMobile && !bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}); ${backgroundStyle}}`}</style>
+		);
+	}
+};
+export default GenerateBgImage;
\ No newline at end of file
diff --git a/src/blocks/_pro/outer/deprecated/1.20.2/save.js b/src/blocks/_pro/outer/deprecated/1.20.2/save.js
index 7e716668d..1103033fb 100644
--- a/src/blocks/_pro/outer/deprecated/1.20.2/save.js
+++ b/src/blocks/_pro/outer/deprecated/1.20.2/save.js
@@ -1,6 +1,6 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { componentDivider } from '../component-divider';
-import GenerateBgImage from '@vkblocks/utils/GenerateBgImage';
+import GenerateBgImage from './GenerateBgImage';
 
 export default function save(props) {
 	const { attributes } = props;

From 989abf305b3b9d1e1befb02f63f3af2ae94cca0e Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Mon, 13 Dec 2021 21:34:47 +0900
Subject: [PATCH 06/22] =?UTF-8?q?deprecated=20=E6=9C=80=E6=96=B0=E7=89=88?=
 =?UTF-8?q?=E3=81=A7fitler=E3=81=8C=E5=8F=96=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 inc/vk-blocks/languages/vk-blocks-js.pot  | 110 ++++++++++-----------
 inc/vk-blocks/languages/vk-blocks.pot     | 112 +++++++++++-----------
 src/blocks/_pro/outer/deprecated/index.js |   3 +
 src/blocks/_pro/outer/index.js            |   2 +-
 4 files changed, 115 insertions(+), 112 deletions(-)

diff --git a/inc/vk-blocks/languages/vk-blocks-js.pot b/inc/vk-blocks/languages/vk-blocks-js.pot
index 5c616d179..6628702eb 100644
--- a/inc/vk-blocks/languages/vk-blocks-js.pot
+++ b/inc/vk-blocks/languages/vk-blocks-js.pot
@@ -44,7 +44,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:315
+#: src/blocks/_pro/outer/edit.js:316
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:276
 #: src/blocks/button/edit.js:220
@@ -269,7 +269,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:125
-#: src/blocks/_pro/outer/edit.js:330
+#: src/blocks/_pro/outer/edit.js:331
 #: src/blocks/_pro/slider-item/edit.js:78
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -283,7 +283,7 @@ msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:163
-#: src/blocks/_pro/outer/edit.js:629
+#: src/blocks/_pro/outer/edit.js:630
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
@@ -291,7 +291,7 @@ msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:167
-#: src/blocks/_pro/outer/edit.js:633
+#: src/blocks/_pro/outer/edit.js:634
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
@@ -299,7 +299,7 @@ msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:171
-#: src/blocks/_pro/outer/edit.js:637
+#: src/blocks/_pro/outer/edit.js:638
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
@@ -307,7 +307,7 @@ msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:175
-#: src/blocks/_pro/outer/edit.js:641
+#: src/blocks/_pro/outer/edit.js:642
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -424,157 +424,157 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:190
+#: src/blocks/_pro/outer/edit.js:194
 #: src/blocks/_pro/slider-item/edit.js:125
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:195
+#: src/blocks/_pro/outer/edit.js:199
 #: src/blocks/_pro/slider-item/edit.js:129
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:196
+#: src/blocks/_pro/outer/edit.js:200
 #: src/blocks/_pro/slider-item/edit.js:131
 msgid ""
 "Color will overcome background image. If you want to display image, clear "
 "background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:213
+#: src/blocks/_pro/outer/edit.js:214
 #: src/blocks/_pro/slider-item/edit.js:144
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:227
+#: src/blocks/_pro/outer/edit.js:228
 #: src/blocks/_pro/slider-item/edit.js:179
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:243
+#: src/blocks/_pro/outer/edit.js:244
 #: src/blocks/_pro/slider-item/edit.js:195
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:253
+#: src/blocks/_pro/outer/edit.js:254
 #: src/blocks/_pro/slider-item/edit.js:205
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:263
+#: src/blocks/_pro/outer/edit.js:264
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:271
+#: src/blocks/_pro/outer/edit.js:272
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:275
+#: src/blocks/_pro/outer/edit.js:276
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:279
+#: src/blocks/_pro/outer/edit.js:280
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:286
+#: src/blocks/_pro/outer/edit.js:287
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:301
+#: src/blocks/_pro/outer/edit.js:302
 #: src/blocks/_pro/slider-item/edit.js:73
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:304
+#: src/blocks/_pro/outer/edit.js:305
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:325
+#: src/blocks/_pro/outer/edit.js:326
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:334
+#: src/blocks/_pro/outer/edit.js:335
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:341
+#: src/blocks/_pro/outer/edit.js:342
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:348
+#: src/blocks/_pro/outer/edit.js:349
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:362
+#: src/blocks/_pro/outer/edit.js:363
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:367
+#: src/blocks/_pro/outer/edit.js:368
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:374
+#: src/blocks/_pro/outer/edit.js:375
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:388
+#: src/blocks/_pro/outer/edit.js:389
 msgid ""
 "* If you select \"Do not use\" that, please set yourself it such as a "
 "spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:396
+#: src/blocks/_pro/outer/edit.js:397
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:401
+#: src/blocks/_pro/outer/edit.js:402
 #: src/blocks/balloon/edit.js:236
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:409
+#: src/blocks/_pro/outer/edit.js:410
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:413
+#: src/blocks/_pro/outer/edit.js:414
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:417
+#: src/blocks/_pro/outer/edit.js:418
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:421
+#: src/blocks/_pro/outer/edit.js:422
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:427
+#: src/blocks/_pro/outer/edit.js:428
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:452
+#: src/blocks/_pro/outer/edit.js:453
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:478
+#: src/blocks/_pro/outer/edit.js:479
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:483
+#: src/blocks/_pro/outer/edit.js:484
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:489
+#: src/blocks/_pro/outer/edit.js:490
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:497
+#: src/blocks/_pro/outer/edit.js:498
 #: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:95
 #: src/blocks/balloon/edit.js:338
@@ -582,7 +582,7 @@ msgstr ""
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:501
+#: src/blocks/_pro/outer/edit.js:502
 #: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:77
 #: src/blocks/pr-content/edit.js:143
@@ -590,70 +590,70 @@ msgstr ""
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:505
+#: src/blocks/_pro/outer/edit.js:506
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:509
+#: src/blocks/_pro/outer/edit.js:510
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:513
+#: src/blocks/_pro/outer/edit.js:514
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:517
+#: src/blocks/_pro/outer/edit.js:518
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:521
+#: src/blocks/_pro/outer/edit.js:522
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:525
+#: src/blocks/_pro/outer/edit.js:526
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:529
+#: src/blocks/_pro/outer/edit.js:530
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:543
+#: src/blocks/_pro/outer/edit.js:544
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:555
+#: src/blocks/_pro/outer/edit.js:556
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:571
+#: src/blocks/_pro/outer/edit.js:572
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:578
+#: src/blocks/_pro/outer/edit.js:579
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:593
+#: src/blocks/_pro/outer/edit.js:594
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:608
+#: src/blocks/_pro/outer/edit.js:609
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:619
+#: src/blocks/_pro/outer/edit.js:620
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
diff --git a/inc/vk-blocks/languages/vk-blocks.pot b/inc/vk-blocks/languages/vk-blocks.pot
index 9fade12bb..c865d9864 100644
--- a/inc/vk-blocks/languages/vk-blocks.pot
+++ b/inc/vk-blocks/languages/vk-blocks.pot
@@ -9,7 +9,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2021-12-06T04:49:44+00:00\n"
+"POT-Creation-Date: 2021-12-07T08:16:21+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.5.0\n"
 "X-Domain: vk-blocks\n"
@@ -55,7 +55,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:315
+#: src/blocks/_pro/outer/edit.js:316
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:276
 #: src/blocks/button/edit.js:220
@@ -276,7 +276,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:125
-#: src/blocks/_pro/outer/edit.js:330
+#: src/blocks/_pro/outer/edit.js:331
 #: src/blocks/_pro/slider-item/edit.js:78
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -291,7 +291,7 @@ msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:163
-#: src/blocks/_pro/outer/edit.js:629
+#: src/blocks/_pro/outer/edit.js:630
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
@@ -300,7 +300,7 @@ msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:167
-#: src/blocks/_pro/outer/edit.js:633
+#: src/blocks/_pro/outer/edit.js:634
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
@@ -309,7 +309,7 @@ msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:171
-#: src/blocks/_pro/outer/edit.js:637
+#: src/blocks/_pro/outer/edit.js:638
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
@@ -318,7 +318,7 @@ msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:175
-#: src/blocks/_pro/outer/edit.js:641
+#: src/blocks/_pro/outer/edit.js:642
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -435,153 +435,153 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:190
+#: src/blocks/_pro/outer/edit.js:194
 #: src/blocks/_pro/slider-item/edit.js:125
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:195
+#: src/blocks/_pro/outer/edit.js:199
 #: src/blocks/_pro/slider-item/edit.js:129
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:196
+#: src/blocks/_pro/outer/edit.js:200
 #: src/blocks/_pro/slider-item/edit.js:131
 msgid "Color will overcome background image. If you want to display image, clear background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:213
+#: src/blocks/_pro/outer/edit.js:214
 #: src/blocks/_pro/slider-item/edit.js:144
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:227
+#: src/blocks/_pro/outer/edit.js:228
 #: src/blocks/_pro/slider-item/edit.js:179
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:243
+#: src/blocks/_pro/outer/edit.js:244
 #: src/blocks/_pro/slider-item/edit.js:195
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:253
+#: src/blocks/_pro/outer/edit.js:254
 #: src/blocks/_pro/slider-item/edit.js:205
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:263
+#: src/blocks/_pro/outer/edit.js:264
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:271
+#: src/blocks/_pro/outer/edit.js:272
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:275
+#: src/blocks/_pro/outer/edit.js:276
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:279
+#: src/blocks/_pro/outer/edit.js:280
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:286
+#: src/blocks/_pro/outer/edit.js:287
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:301
+#: src/blocks/_pro/outer/edit.js:302
 #: src/blocks/_pro/slider-item/edit.js:73
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:304
+#: src/blocks/_pro/outer/edit.js:305
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:325
+#: src/blocks/_pro/outer/edit.js:326
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:334
+#: src/blocks/_pro/outer/edit.js:335
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:341
+#: src/blocks/_pro/outer/edit.js:342
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:348
+#: src/blocks/_pro/outer/edit.js:349
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:362
+#: src/blocks/_pro/outer/edit.js:363
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:367
+#: src/blocks/_pro/outer/edit.js:368
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:374
+#: src/blocks/_pro/outer/edit.js:375
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:388
+#: src/blocks/_pro/outer/edit.js:389
 msgid "* If you select \"Do not use\" that, please set yourself it such as a spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:396
+#: src/blocks/_pro/outer/edit.js:397
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:401
+#: src/blocks/_pro/outer/edit.js:402
 #: src/blocks/balloon/edit.js:236
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:409
+#: src/blocks/_pro/outer/edit.js:410
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:413
+#: src/blocks/_pro/outer/edit.js:414
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:417
+#: src/blocks/_pro/outer/edit.js:418
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:421
+#: src/blocks/_pro/outer/edit.js:422
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:427
+#: src/blocks/_pro/outer/edit.js:428
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:452
+#: src/blocks/_pro/outer/edit.js:453
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:478
+#: src/blocks/_pro/outer/edit.js:479
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:483
+#: src/blocks/_pro/outer/edit.js:484
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:489
+#: src/blocks/_pro/outer/edit.js:490
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:497
+#: src/blocks/_pro/outer/edit.js:498
 #: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:95
 #: src/blocks/balloon/edit.js:338
@@ -589,7 +589,7 @@ msgstr ""
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:501
+#: src/blocks/_pro/outer/edit.js:502
 #: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:77
 #: src/blocks/pr-content/edit.js:143
@@ -597,73 +597,73 @@ msgstr ""
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:505
+#: src/blocks/_pro/outer/edit.js:506
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:509
+#: src/blocks/_pro/outer/edit.js:510
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:513
+#: src/blocks/_pro/outer/edit.js:514
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:517
+#: src/blocks/_pro/outer/edit.js:518
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:521
+#: src/blocks/_pro/outer/edit.js:522
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:525
+#: src/blocks/_pro/outer/edit.js:526
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:529
+#: src/blocks/_pro/outer/edit.js:530
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:543
+#: src/blocks/_pro/outer/edit.js:544
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:555
+#: src/blocks/_pro/outer/edit.js:556
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:571
+#: src/blocks/_pro/outer/edit.js:572
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:578
+#: src/blocks/_pro/outer/edit.js:579
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
 #: inc/vk-blocks/admin/admin-margin.php:62
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:593
+#: src/blocks/_pro/outer/edit.js:594
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
 #: inc/vk-blocks/admin/admin-margin.php:61
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:608
+#: src/blocks/_pro/outer/edit.js:609
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
 #: inc/vk-blocks/admin/admin-margin.php:60
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:619
+#: src/blocks/_pro/outer/edit.js:620
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
diff --git a/src/blocks/_pro/outer/deprecated/index.js b/src/blocks/_pro/outer/deprecated/index.js
index 35e1c1f87..1e3b03d9f 100644
--- a/src/blocks/_pro/outer/deprecated/index.js
+++ b/src/blocks/_pro/outer/deprecated/index.js
@@ -103,6 +103,9 @@ const deprecated = [
 			},
 		},
 		save: save1_20_2,
+		filters: [
+			'addInlineFrontCss'
+		]
 	},	
 	{
 		attributes: {
diff --git a/src/blocks/_pro/outer/index.js b/src/blocks/_pro/outer/index.js
index 49043288d..9c7322c49 100644
--- a/src/blocks/_pro/outer/index.js
+++ b/src/blocks/_pro/outer/index.js
@@ -105,7 +105,7 @@ addFilter(
 			const cssTag = generateInlineCss(attributes);
 
 			// 最新版
-			if (-1 === deprecatedFuncIndex) {
+			if (-1 === deprecatedFuncIndex || deprecated[deprecatedFuncIndex].filters?.includes('addInlineFrontCss')) {
 				// NOTE: useBlockProps + style要素を挿入する場合、useBlockPropsを使った要素が最初（上）にこないと、
 				// カスタムクラスを追加する処理が失敗する
 				return (

From 2a3c0c3fe648ef45295403b80f25350c20c8b169 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Mon, 13 Dec 2021 21:59:33 +0900
Subject: [PATCH 07/22] =?UTF-8?q?deprecated=E3=81=A7filter=E3=81=8C?=
 =?UTF-8?q?=E9=80=9A=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/blocks/_pro/outer/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/blocks/_pro/outer/index.js b/src/blocks/_pro/outer/index.js
index 9c7322c49..2e057920e 100644
--- a/src/blocks/_pro/outer/index.js
+++ b/src/blocks/_pro/outer/index.js
@@ -105,7 +105,12 @@ addFilter(
 			const cssTag = generateInlineCss(attributes);
 
 			// 最新版
-			if (-1 === deprecatedFuncIndex || deprecated[deprecatedFuncIndex].filters?.includes('addInlineFrontCss')) {
+			if (
+				-1 === deprecatedFuncIndex ||
+				deprecated[deprecatedFuncIndex].filters?.includes(
+					'addInlineFrontCss'
+				)
+			) {
 				// NOTE: useBlockProps + style要素を挿入する場合、useBlockPropsを使った要素が最初（上）にこないと、
 				// カスタムクラスを追加する処理が失敗する
 				return (

From 69c2c327dd62ffea590103dbe8787c8f21561a1c Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Mon, 13 Dec 2021 23:17:13 +0900
Subject: [PATCH 08/22] =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=80=81=E5=A4=89=E6=95=B0=E5=90=8D=E3=81=AE=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/blocks/_pro/outer/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/blocks/_pro/outer/index.js b/src/blocks/_pro/outer/index.js
index 2e057920e..9c55a9b39 100644
--- a/src/blocks/_pro/outer/index.js
+++ b/src/blocks/_pro/outer/index.js
@@ -104,10 +104,10 @@ addFilter(
 
 			const cssTag = generateInlineCss(attributes);
 
-			// 最新版
+			// 最新版 || deprecated で vkBlockOuterfiltersにaddInlineFrontCssが含まれているもの
 			if (
 				-1 === deprecatedFuncIndex ||
-				deprecated[deprecatedFuncIndex].filters?.includes(
+				deprecated[deprecatedFuncIndex].vkBlockOuterfilters?.includes(
 					'addInlineFrontCss'
 				)
 			) {

From dbbabd67c395725084cea569b186dd7665d6948a Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Wed, 15 Dec 2021 20:55:43 +0900
Subject: [PATCH 09/22] =?UTF-8?q?fix:=20deprecated=E3=81=AA=E3=81=A9?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 inc/vk-blocks/languages/vk-blocks-js.pot      | 110 ++++++++--------
 inc/vk-blocks/languages/vk-blocks.pot         | 112 ++++++++--------
 src/blocks/_pro/outer/component-divider.js    |  16 ++-
 .../deprecated/1.20.2/GenerateBgImage.js      | 120 ------------------
 .../_pro/outer/deprecated/1.20.2/save.js      |   2 +-
 src/blocks/_pro/outer/deprecated/index.js     |   2 +-
 src/blocks/_pro/outer/edit.js                 |   7 +-
 src/blocks/_pro/outer/style.scss              |  13 ++
 .../fixtures/blocks/vk-blocks__outer.html     |  44 ++++---
 .../vk-blocks__outer__deprecated-1-20-2.html  |  30 +++++
 10 files changed, 198 insertions(+), 258 deletions(-)
 delete mode 100644 src/blocks/_pro/outer/deprecated/1.20.2/GenerateBgImage.js
 create mode 100644 test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-20-2.html

diff --git a/inc/vk-blocks/languages/vk-blocks-js.pot b/inc/vk-blocks/languages/vk-blocks-js.pot
index 6628702eb..97ec247a1 100644
--- a/inc/vk-blocks/languages/vk-blocks-js.pot
+++ b/inc/vk-blocks/languages/vk-blocks-js.pot
@@ -44,7 +44,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:316
+#: src/blocks/_pro/outer/edit.js:317
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:276
 #: src/blocks/button/edit.js:220
@@ -269,7 +269,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:125
-#: src/blocks/_pro/outer/edit.js:331
+#: src/blocks/_pro/outer/edit.js:332
 #: src/blocks/_pro/slider-item/edit.js:78
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -283,7 +283,7 @@ msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:163
-#: src/blocks/_pro/outer/edit.js:630
+#: src/blocks/_pro/outer/edit.js:632
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
@@ -291,7 +291,7 @@ msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:167
-#: src/blocks/_pro/outer/edit.js:634
+#: src/blocks/_pro/outer/edit.js:636
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
@@ -299,7 +299,7 @@ msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:171
-#: src/blocks/_pro/outer/edit.js:638
+#: src/blocks/_pro/outer/edit.js:640
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
@@ -307,7 +307,7 @@ msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:175
-#: src/blocks/_pro/outer/edit.js:642
+#: src/blocks/_pro/outer/edit.js:644
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -424,157 +424,157 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:194
+#: src/blocks/_pro/outer/edit.js:195
 #: src/blocks/_pro/slider-item/edit.js:125
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:199
+#: src/blocks/_pro/outer/edit.js:200
 #: src/blocks/_pro/slider-item/edit.js:129
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:200
+#: src/blocks/_pro/outer/edit.js:201
 #: src/blocks/_pro/slider-item/edit.js:131
 msgid ""
 "Color will overcome background image. If you want to display image, clear "
 "background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:214
+#: src/blocks/_pro/outer/edit.js:215
 #: src/blocks/_pro/slider-item/edit.js:144
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:228
+#: src/blocks/_pro/outer/edit.js:229
 #: src/blocks/_pro/slider-item/edit.js:179
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:244
+#: src/blocks/_pro/outer/edit.js:245
 #: src/blocks/_pro/slider-item/edit.js:195
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:254
+#: src/blocks/_pro/outer/edit.js:255
 #: src/blocks/_pro/slider-item/edit.js:205
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:264
+#: src/blocks/_pro/outer/edit.js:265
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:272
+#: src/blocks/_pro/outer/edit.js:273
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:276
+#: src/blocks/_pro/outer/edit.js:277
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:280
+#: src/blocks/_pro/outer/edit.js:281
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:287
+#: src/blocks/_pro/outer/edit.js:288
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:302
+#: src/blocks/_pro/outer/edit.js:303
 #: src/blocks/_pro/slider-item/edit.js:73
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:305
+#: src/blocks/_pro/outer/edit.js:306
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:326
+#: src/blocks/_pro/outer/edit.js:327
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:335
+#: src/blocks/_pro/outer/edit.js:336
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:342
+#: src/blocks/_pro/outer/edit.js:343
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:349
+#: src/blocks/_pro/outer/edit.js:350
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:363
+#: src/blocks/_pro/outer/edit.js:364
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:368
+#: src/blocks/_pro/outer/edit.js:369
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:375
+#: src/blocks/_pro/outer/edit.js:376
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:389
+#: src/blocks/_pro/outer/edit.js:390
 msgid ""
 "* If you select \"Do not use\" that, please set yourself it such as a "
 "spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:397
+#: src/blocks/_pro/outer/edit.js:398
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:402
+#: src/blocks/_pro/outer/edit.js:403
 #: src/blocks/balloon/edit.js:236
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:410
+#: src/blocks/_pro/outer/edit.js:411
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:414
+#: src/blocks/_pro/outer/edit.js:415
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:418
+#: src/blocks/_pro/outer/edit.js:419
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:422
+#: src/blocks/_pro/outer/edit.js:423
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:428
+#: src/blocks/_pro/outer/edit.js:429
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:453
+#: src/blocks/_pro/outer/edit.js:455
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:479
+#: src/blocks/_pro/outer/edit.js:481
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:484
+#: src/blocks/_pro/outer/edit.js:486
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:490
+#: src/blocks/_pro/outer/edit.js:492
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:498
+#: src/blocks/_pro/outer/edit.js:500
 #: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:95
 #: src/blocks/balloon/edit.js:338
@@ -582,7 +582,7 @@ msgstr ""
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:502
+#: src/blocks/_pro/outer/edit.js:504
 #: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:77
 #: src/blocks/pr-content/edit.js:143
@@ -590,70 +590,70 @@ msgstr ""
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:506
+#: src/blocks/_pro/outer/edit.js:508
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:510
+#: src/blocks/_pro/outer/edit.js:512
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:514
+#: src/blocks/_pro/outer/edit.js:516
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:518
+#: src/blocks/_pro/outer/edit.js:520
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:522
+#: src/blocks/_pro/outer/edit.js:524
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:526
+#: src/blocks/_pro/outer/edit.js:528
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:530
+#: src/blocks/_pro/outer/edit.js:532
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:544
+#: src/blocks/_pro/outer/edit.js:546
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:556
+#: src/blocks/_pro/outer/edit.js:558
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:572
+#: src/blocks/_pro/outer/edit.js:574
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:579
+#: src/blocks/_pro/outer/edit.js:581
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:594
+#: src/blocks/_pro/outer/edit.js:596
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:609
+#: src/blocks/_pro/outer/edit.js:611
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:620
+#: src/blocks/_pro/outer/edit.js:622
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
diff --git a/inc/vk-blocks/languages/vk-blocks.pot b/inc/vk-blocks/languages/vk-blocks.pot
index c865d9864..ff2a14b0a 100644
--- a/inc/vk-blocks/languages/vk-blocks.pot
+++ b/inc/vk-blocks/languages/vk-blocks.pot
@@ -9,7 +9,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2021-12-07T08:16:21+00:00\n"
+"POT-Creation-Date: 2021-12-15T05:53:27+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.5.0\n"
 "X-Domain: vk-blocks\n"
@@ -55,7 +55,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:316
+#: src/blocks/_pro/outer/edit.js:317
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:276
 #: src/blocks/button/edit.js:220
@@ -276,7 +276,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:125
-#: src/blocks/_pro/outer/edit.js:331
+#: src/blocks/_pro/outer/edit.js:332
 #: src/blocks/_pro/slider-item/edit.js:78
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -291,7 +291,7 @@ msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:163
-#: src/blocks/_pro/outer/edit.js:630
+#: src/blocks/_pro/outer/edit.js:632
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
@@ -300,7 +300,7 @@ msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:167
-#: src/blocks/_pro/outer/edit.js:634
+#: src/blocks/_pro/outer/edit.js:636
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
@@ -309,7 +309,7 @@ msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:171
-#: src/blocks/_pro/outer/edit.js:638
+#: src/blocks/_pro/outer/edit.js:640
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
@@ -318,7 +318,7 @@ msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:175
-#: src/blocks/_pro/outer/edit.js:642
+#: src/blocks/_pro/outer/edit.js:644
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -435,153 +435,153 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:194
+#: src/blocks/_pro/outer/edit.js:195
 #: src/blocks/_pro/slider-item/edit.js:125
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:199
+#: src/blocks/_pro/outer/edit.js:200
 #: src/blocks/_pro/slider-item/edit.js:129
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:200
+#: src/blocks/_pro/outer/edit.js:201
 #: src/blocks/_pro/slider-item/edit.js:131
 msgid "Color will overcome background image. If you want to display image, clear background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:214
+#: src/blocks/_pro/outer/edit.js:215
 #: src/blocks/_pro/slider-item/edit.js:144
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:228
+#: src/blocks/_pro/outer/edit.js:229
 #: src/blocks/_pro/slider-item/edit.js:179
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:244
+#: src/blocks/_pro/outer/edit.js:245
 #: src/blocks/_pro/slider-item/edit.js:195
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:254
+#: src/blocks/_pro/outer/edit.js:255
 #: src/blocks/_pro/slider-item/edit.js:205
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:264
+#: src/blocks/_pro/outer/edit.js:265
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:272
+#: src/blocks/_pro/outer/edit.js:273
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:276
+#: src/blocks/_pro/outer/edit.js:277
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:280
+#: src/blocks/_pro/outer/edit.js:281
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:287
+#: src/blocks/_pro/outer/edit.js:288
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:302
+#: src/blocks/_pro/outer/edit.js:303
 #: src/blocks/_pro/slider-item/edit.js:73
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:305
+#: src/blocks/_pro/outer/edit.js:306
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:326
+#: src/blocks/_pro/outer/edit.js:327
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:335
+#: src/blocks/_pro/outer/edit.js:336
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:342
+#: src/blocks/_pro/outer/edit.js:343
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:349
+#: src/blocks/_pro/outer/edit.js:350
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:363
+#: src/blocks/_pro/outer/edit.js:364
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:368
+#: src/blocks/_pro/outer/edit.js:369
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:375
+#: src/blocks/_pro/outer/edit.js:376
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:389
+#: src/blocks/_pro/outer/edit.js:390
 msgid "* If you select \"Do not use\" that, please set yourself it such as a spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:397
+#: src/blocks/_pro/outer/edit.js:398
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:402
+#: src/blocks/_pro/outer/edit.js:403
 #: src/blocks/balloon/edit.js:236
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:410
+#: src/blocks/_pro/outer/edit.js:411
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:414
+#: src/blocks/_pro/outer/edit.js:415
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:418
+#: src/blocks/_pro/outer/edit.js:419
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:422
+#: src/blocks/_pro/outer/edit.js:423
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:428
+#: src/blocks/_pro/outer/edit.js:429
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:453
+#: src/blocks/_pro/outer/edit.js:455
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:479
+#: src/blocks/_pro/outer/edit.js:481
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:484
+#: src/blocks/_pro/outer/edit.js:486
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:490
+#: src/blocks/_pro/outer/edit.js:492
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:498
+#: src/blocks/_pro/outer/edit.js:500
 #: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:95
 #: src/blocks/balloon/edit.js:338
@@ -589,7 +589,7 @@ msgstr ""
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:502
+#: src/blocks/_pro/outer/edit.js:504
 #: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:77
 #: src/blocks/pr-content/edit.js:143
@@ -597,73 +597,73 @@ msgstr ""
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:506
+#: src/blocks/_pro/outer/edit.js:508
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:510
+#: src/blocks/_pro/outer/edit.js:512
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:514
+#: src/blocks/_pro/outer/edit.js:516
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:518
+#: src/blocks/_pro/outer/edit.js:520
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:522
+#: src/blocks/_pro/outer/edit.js:524
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:526
+#: src/blocks/_pro/outer/edit.js:528
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:530
+#: src/blocks/_pro/outer/edit.js:532
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:544
+#: src/blocks/_pro/outer/edit.js:546
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:556
+#: src/blocks/_pro/outer/edit.js:558
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:572
+#: src/blocks/_pro/outer/edit.js:574
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:579
+#: src/blocks/_pro/outer/edit.js:581
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
 #: inc/vk-blocks/admin/admin-margin.php:62
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:594
+#: src/blocks/_pro/outer/edit.js:596
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
 #: inc/vk-blocks/admin/admin-margin.php:61
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:609
+#: src/blocks/_pro/outer/edit.js:611
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
 #: inc/vk-blocks/admin/admin-margin.php:60
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:620
+#: src/blocks/_pro/outer/edit.js:622
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
diff --git a/src/blocks/_pro/outer/component-divider.js b/src/blocks/_pro/outer/component-divider.js
index 424809c98..36d20eb1d 100644
--- a/src/blocks/_pro/outer/component-divider.js
+++ b/src/blocks/_pro/outer/component-divider.js
@@ -1,3 +1,5 @@
+import { isHexColor } from '@vkblocks/utils/is-hex-color';
+
 const componentDivider = (level, color, whichSide, dividerType) => {
 	let sectionPadding;
 	let sectionClass;
@@ -5,12 +7,19 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 
 	// eslint-disable-next-line no-shadow
 	const tiltSectionStyle = (level, color) => {
+		let svgClassName = '';
+		if (!isHexColor(color)) {
+			svgClassName = `has-${color}-background-color`;
+			color = null;
+		}
+
 		if (level > 0) {
 			return (
 				<path
 					d={`m0,${100 - level} L100,100 L0,100 z`}
 					strokeWidth="0"
-					fill={color}
+					{...(color ? { fill: color } : {})}
+					className={svgClassName}
 				/>
 			);
 		} else if (level < 0) {
@@ -21,7 +30,8 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 				<path
 					d={`m100,${100 - absLevel} L0,100 L100,100 z`}
 					strokeWidth="0"
-					fill={color}
+					{...(color ? { fill: color } : {})}
+					className={svgClassName}
 				/>
 			);
 		}
@@ -57,7 +67,7 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 						100 - level / 2
 					} q20,${level},40,0 t40,0 t40,0 V100 L0,100 z`}
 					strokeWidth="0"
-					fill={color}
+					{...(color ? { fill: color } : {})}
 				/>
 			);
 		} else if (level < 0) {
diff --git a/src/blocks/_pro/outer/deprecated/1.20.2/GenerateBgImage.js b/src/blocks/_pro/outer/deprecated/1.20.2/GenerateBgImage.js
deleted file mode 100644
index 7edd21db8..000000000
--- a/src/blocks/_pro/outer/deprecated/1.20.2/GenerateBgImage.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import hex2rgba from '@vkblocks/utils/hex-to-rgba';
-const GenerateBgImage = (props) => {
-	const { attributes, clientId, prefix } = props;
-	const { bgImageMobile, bgImageTablet, bgImage, bgColor, opacity, bgSize } =
-		attributes;
-
-	const mobileViewport = 'max-width: 575.98px';
-	const tabletViewport = 'min-width: 576px';
-	const pcViewport = 'min-width: 1200px';
-	const underPcViewport = 'max-width: 1199.98px';
-
-	let backgroundStyle;
-	const backgroundPosition = 'background-position:center!important;';
-	if ('cover' === bgSize) {
-		backgroundStyle = `background-size:${bgSize}!important; ${backgroundPosition}`;
-	} else if ('repeat' === bgSize) {
-		backgroundStyle = `background-repeat:${bgSize}!important; ${backgroundPosition}`;
-	} else {
-		backgroundStyle = ``;
-	}
-
-	let bgColorWOpacity;
-
-	//hexからrgbaに変換
-	if (bgColor) {
-		bgColorWOpacity = hex2rgba(bgColor, opacity);
-	} else {
-		//背景色をクリアした時は、白に変更
-		bgColorWOpacity = hex2rgba('#fff', opacity);
-	}
-
-	//moible only
-	if (bgImageMobile && !bgImageTablet && !bgImage) {
-		return (
-			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}`}</style>
-		);
-	}
-	//tablet only
-	if (!bgImageMobile && bgImageTablet && !bgImage) {
-		return (
-			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}`}</style>
-		);
-	}
-	//pc only
-	if (!bgImageMobile && !bgImageTablet && bgImage) {
-		return (
-			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}`}</style>
-		);
-	}
-	//pc -mobile
-	if (bgImageMobile && !bgImageTablet && bgImage) {
-		return (
-			<style>
-				{`
-          @media screen and (${underPcViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
-         }
-          @media screen and (${pcViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
-         }
-          `}
-			</style>
-		);
-	}
-	//pc -tablet
-	if (!bgImageMobile && bgImageTablet && bgImage) {
-		return (
-			<style>
-				{`
-          @media screen and (${underPcViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
-         }
-          @media screen and (${pcViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
-         }
-          `}
-			</style>
-		);
-	}
-	//tablet - mobile
-	if (bgImageMobile && bgImageTablet && !bgImage) {
-		return (
-			<style>
-				{`
-          @media screen and (${mobileViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
-         }
-          @media screen and (${tabletViewport}) {
-            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
-         }
-        `}
-			</style>
-		);
-	}
-	//pc -tablet - mobile
-	if (bgImageMobile && bgImageTablet && bgImage) {
-		return (
-			<style>
-				{`
-        @media screen and (${mobileViewport}) {
-          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
-       }
-        @media screen and (${tabletViewport}) {
-          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
-       }
-        @media screen and (${pcViewport}) {
-          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
-       }
-        `}
-			</style>
-		);
-	}
-	//no background image
-	if (!bgImageMobile && !bgImageTablet && !bgImage) {
-		return (
-			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}); ${backgroundStyle}}`}</style>
-		);
-	}
-};
-export default GenerateBgImage;
\ No newline at end of file
diff --git a/src/blocks/_pro/outer/deprecated/1.20.2/save.js b/src/blocks/_pro/outer/deprecated/1.20.2/save.js
index 1103033fb..7e716668d 100644
--- a/src/blocks/_pro/outer/deprecated/1.20.2/save.js
+++ b/src/blocks/_pro/outer/deprecated/1.20.2/save.js
@@ -1,6 +1,6 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { componentDivider } from '../component-divider';
-import GenerateBgImage from './GenerateBgImage';
+import GenerateBgImage from '@vkblocks/utils/GenerateBgImage';
 
 export default function save(props) {
 	const { attributes } = props;
diff --git a/src/blocks/_pro/outer/deprecated/index.js b/src/blocks/_pro/outer/deprecated/index.js
index 1e3b03d9f..3ed08372e 100644
--- a/src/blocks/_pro/outer/deprecated/index.js
+++ b/src/blocks/_pro/outer/deprecated/index.js
@@ -103,7 +103,7 @@ const deprecated = [
 			},
 		},
 		save: save1_20_2,
-		filters: [
+		vkBlockOuterfilters: [
 			'addInlineFrontCss'
 		]
 	},	
diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index b0077450b..55acbfad9 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -175,9 +175,10 @@ export default function OuterEdit(props) {
 	const bgColorClasses = [];
 	bgColorClasses.push('has-background');
 
-	const bgColorOutputDisable = false;
+	let bgColorOutputDisable = false;
 	if (!isHexColor(bgColor)) {
 		bgColorClasses.push(`has-${bgColor}-background-color`);
+		bgColorOutputDisable = true;
 	}
 
 	const blockProps = useBlockProps({
@@ -440,6 +441,10 @@ export default function OuterEdit(props) {
 						/>
 					</BaseControl>
 					<BaseControl>
+						<AdvancedColorPalette
+							schema={'upperDividerBgColor'}
+							{...props}
+						/>
 						<ColorPalette
 							value={upperDividerBgColor}
 							onChange={(value) =>
diff --git a/src/blocks/_pro/outer/style.scss b/src/blocks/_pro/outer/style.scss
index 80bf2c23d..ff6000821 100644
--- a/src/blocks/_pro/outer/style.scss
+++ b/src/blocks/_pro/outer/style.scss
@@ -238,3 +238,16 @@ $color-danger: #b52727;
 		}
 	}
 }
+
+
+:root,
+:root .editor-styles-wrapper {
+	path {
+		&.has-vk-color-primary-background-color {
+			fill: var(--vk-color-primary);
+		}
+		&.has-vk-color-primary-dark-background-color {
+			fill: var(--vk-color-primary-dark);
+		}		
+	}
+}
diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html
index b0561f421..ac1fa1052 100644
--- a/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html
+++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html
@@ -1,30 +1,32 @@
-<!-- wp:vk-blocks/outer {"bgColor":"#8ed1fc","bgImage":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/04/vws_logo_2020_og.png","bgImageTablet":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png","bgImageMobile":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png","upper_level":43,"lower_level":-56,"borderColor":"#000","clientId":"1cd5f4a8-8804-4f40-a0bc-f7cc37407f83"} -->
-<div class="wp-block-vk-blocks-outer vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83 vk_outer vk_outer-width-normal  vk_outer-paddingLR-none vk_outer-paddingVertical-use vk_outer-bgPosition-normal" style="border:none;border-radius:0px"><style>
+<!-- wp:vk-blocks/outer {"bgColor":"#8ed1fc","bgImage":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/04/vws_logo_2020_og.png","bgImageTablet":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png","bgImageMobile":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png","upper_level":43,"lower_level":-56,"borderColor":"#000","clientId":"67152b3f-94c1-4413-bdda-0179ec00d047"} -->
+<div class="wp-block-vk-blocks-outer vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047 vk_outer vk_outer-width-normal has-background vk_outer-paddingLR-none vk_outer-paddingVertical-use vk_outer-bgPosition-normal" style="border:none;border-radius:0px"><style>
 	@media screen and (max-width: 575.98px) {
-	  .vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png); }
-   }
+	.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png); }
+}
+	
 	@media screen and (min-width: 576px) {
-	  .vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png); }
-   }
+	.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png); }
+}
+	
 	@media screen and (min-width: 1200px) {
-	  .vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/04/vws_logo_2020_og.png); }
-   }
-	</style><div><div class="vk_outer_separator vk_outer_separator-position-upper vk_outer_separator-type-tilt" style="padding-bottom:43px"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="none"><path d="m0,57 L100,100 L0,100 z" strokewidth="0" fill="#fff"></path></svg></div><div class="vk_outer_container"></div><div class="vk_outer_separator vk_outer_separator-position-lower vk_outer_separator-type-tilt" style="padding-top:56px"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="none"><path d="m100,44 L0,100 L100,100 z" strokewidth="0" fill="#fff"></path></svg></div></div></div><style type="text/css">
-.vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83 .vk_outer_container{
-	padding-left:0px;
-	padding-right:0px;
+	.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/04/vws_logo_2020_og.png); }
 }
-@media (min-width: 577px) {
-	.vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83 .vk_outer_container{
+	</style><div><div class="vk_outer_separator vk_outer_separator-position-upper vk_outer_separator-type-tilt" style="padding-bottom:43px"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="none"><path d="m0,57 L100,100 L0,100 z" strokewidth="0" fill="#fff"></path></svg></div><div class="vk_outer_container"></div><div class="vk_outer_separator vk_outer_separator-position-lower vk_outer_separator-type-tilt" style="padding-top:56px"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="none"><path d="m100,44 L0,100 L100,100 z" strokewidth="0" fill="#fff"></path></svg></div></div></div><style type="text/css">
+	.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047 .vk_outer_container{
 		padding-left:0px;
 		padding-right:0px;
 	}
-}
-@media (min-width: 769px) {
-	.vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83 .vk_outer_container{
-		padding-left:0px;
-		padding-right:0px;
+	@media (min-width: 577px) {
+		.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047 .vk_outer_container{
+			padding-left:0px;
+			padding-right:0px;
+		}
 	}
-}
-</style>
+	@media (min-width: 769px) {
+		.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047 .vk_outer_container{
+			padding-left:0px;
+			padding-right:0px;
+		}
+	}
+	</style>
 <!-- /wp:vk-blocks/outer -->
\ No newline at end of file
diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-20-2.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-20-2.html
new file mode 100644
index 000000000..b0561f421
--- /dev/null
+++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer__deprecated-1-20-2.html
@@ -0,0 +1,30 @@
+<!-- wp:vk-blocks/outer {"bgColor":"#8ed1fc","bgImage":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/04/vws_logo_2020_og.png","bgImageTablet":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png","bgImageMobile":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png","upper_level":43,"lower_level":-56,"borderColor":"#000","clientId":"1cd5f4a8-8804-4f40-a0bc-f7cc37407f83"} -->
+<div class="wp-block-vk-blocks-outer vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83 vk_outer vk_outer-width-normal  vk_outer-paddingLR-none vk_outer-paddingVertical-use vk_outer-bgPosition-normal" style="border:none;border-radius:0px"><style>
+	@media screen and (max-width: 575.98px) {
+	  .vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png); }
+   }
+	@media screen and (min-width: 576px) {
+	  .vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png); }
+   }
+	@media screen and (min-width: 1200px) {
+	  .vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/04/vws_logo_2020_og.png); }
+   }
+	</style><div><div class="vk_outer_separator vk_outer_separator-position-upper vk_outer_separator-type-tilt" style="padding-bottom:43px"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="none"><path d="m0,57 L100,100 L0,100 z" strokewidth="0" fill="#fff"></path></svg></div><div class="vk_outer_container"></div><div class="vk_outer_separator vk_outer_separator-position-lower vk_outer_separator-type-tilt" style="padding-top:56px"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="none"><path d="m100,44 L0,100 L100,100 z" strokewidth="0" fill="#fff"></path></svg></div></div></div><style type="text/css">
+.vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83 .vk_outer_container{
+	padding-left:0px;
+	padding-right:0px;
+}
+@media (min-width: 577px) {
+	.vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83 .vk_outer_container{
+		padding-left:0px;
+		padding-right:0px;
+	}
+}
+@media (min-width: 769px) {
+	.vkb-outer-1cd5f4a8-8804-4f40-a0bc-f7cc37407f83 .vk_outer_container{
+		padding-left:0px;
+		padding-right:0px;
+	}
+}
+</style>
+<!-- /wp:vk-blocks/outer -->
\ No newline at end of file

From 97ec2695cb591aa66ff248d022747ccc34bc9e39 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Wed, 22 Dec 2021 17:58:03 +0900
Subject: [PATCH 10/22] =?UTF-8?q?SVG=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 inc/vk-blocks/languages/vk-blocks-js.pot   | 104 ++++++++++-----------
 src/blocks/_pro/outer/component-divider.js |  39 ++++++--
 src/blocks/_pro/outer/edit.js              |  24 +----
 src/blocks/_pro/outer/index.php            |   1 +
 src/blocks/_pro/outer/style.scss           |  21 ++++-
 5 files changed, 108 insertions(+), 81 deletions(-)

diff --git a/inc/vk-blocks/languages/vk-blocks-js.pot b/inc/vk-blocks/languages/vk-blocks-js.pot
index 97ec247a1..8fbb2a19a 100644
--- a/inc/vk-blocks/languages/vk-blocks-js.pot
+++ b/inc/vk-blocks/languages/vk-blocks-js.pot
@@ -44,7 +44,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:317
+#: src/blocks/_pro/outer/edit.js:311
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:276
 #: src/blocks/button/edit.js:220
@@ -269,7 +269,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:125
-#: src/blocks/_pro/outer/edit.js:332
+#: src/blocks/_pro/outer/edit.js:326
 #: src/blocks/_pro/slider-item/edit.js:78
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -283,7 +283,7 @@ msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:163
-#: src/blocks/_pro/outer/edit.js:632
+#: src/blocks/_pro/outer/edit.js:618
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
@@ -291,7 +291,7 @@ msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:167
-#: src/blocks/_pro/outer/edit.js:636
+#: src/blocks/_pro/outer/edit.js:622
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
@@ -299,7 +299,7 @@ msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:171
-#: src/blocks/_pro/outer/edit.js:640
+#: src/blocks/_pro/outer/edit.js:626
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
@@ -307,7 +307,7 @@ msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:175
-#: src/blocks/_pro/outer/edit.js:644
+#: src/blocks/_pro/outer/edit.js:630
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -442,139 +442,139 @@ msgid ""
 "background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:215
+#: src/blocks/_pro/outer/edit.js:209
 #: src/blocks/_pro/slider-item/edit.js:144
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:229
+#: src/blocks/_pro/outer/edit.js:223
 #: src/blocks/_pro/slider-item/edit.js:179
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:245
+#: src/blocks/_pro/outer/edit.js:239
 #: src/blocks/_pro/slider-item/edit.js:195
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:255
+#: src/blocks/_pro/outer/edit.js:249
 #: src/blocks/_pro/slider-item/edit.js:205
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:265
+#: src/blocks/_pro/outer/edit.js:259
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:273
+#: src/blocks/_pro/outer/edit.js:267
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:277
+#: src/blocks/_pro/outer/edit.js:271
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:281
+#: src/blocks/_pro/outer/edit.js:275
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:288
+#: src/blocks/_pro/outer/edit.js:282
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:303
+#: src/blocks/_pro/outer/edit.js:297
 #: src/blocks/_pro/slider-item/edit.js:73
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:306
+#: src/blocks/_pro/outer/edit.js:300
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:327
+#: src/blocks/_pro/outer/edit.js:321
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:336
+#: src/blocks/_pro/outer/edit.js:330
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:343
+#: src/blocks/_pro/outer/edit.js:337
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:350
+#: src/blocks/_pro/outer/edit.js:344
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:364
+#: src/blocks/_pro/outer/edit.js:358
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:369
+#: src/blocks/_pro/outer/edit.js:363
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:376
+#: src/blocks/_pro/outer/edit.js:370
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:390
+#: src/blocks/_pro/outer/edit.js:384
 msgid ""
 "* If you select \"Do not use\" that, please set yourself it such as a "
 "spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:398
+#: src/blocks/_pro/outer/edit.js:392
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:403
+#: src/blocks/_pro/outer/edit.js:397
 #: src/blocks/balloon/edit.js:236
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:411
+#: src/blocks/_pro/outer/edit.js:405
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:415
+#: src/blocks/_pro/outer/edit.js:409
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:419
+#: src/blocks/_pro/outer/edit.js:413
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:423
+#: src/blocks/_pro/outer/edit.js:417
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:429
+#: src/blocks/_pro/outer/edit.js:423
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:455
+#: src/blocks/_pro/outer/edit.js:445
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:481
+#: src/blocks/_pro/outer/edit.js:467
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:486
+#: src/blocks/_pro/outer/edit.js:472
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:492
+#: src/blocks/_pro/outer/edit.js:478
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:500
+#: src/blocks/_pro/outer/edit.js:486
 #: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:95
 #: src/blocks/balloon/edit.js:338
@@ -582,7 +582,7 @@ msgstr ""
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:504
+#: src/blocks/_pro/outer/edit.js:490
 #: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:77
 #: src/blocks/pr-content/edit.js:143
@@ -590,70 +590,70 @@ msgstr ""
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:508
+#: src/blocks/_pro/outer/edit.js:494
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:512
+#: src/blocks/_pro/outer/edit.js:498
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:516
+#: src/blocks/_pro/outer/edit.js:502
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:520
+#: src/blocks/_pro/outer/edit.js:506
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:524
+#: src/blocks/_pro/outer/edit.js:510
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:528
+#: src/blocks/_pro/outer/edit.js:514
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:532
+#: src/blocks/_pro/outer/edit.js:518
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:546
+#: src/blocks/_pro/outer/edit.js:532
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:558
+#: src/blocks/_pro/outer/edit.js:544
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:574
+#: src/blocks/_pro/outer/edit.js:560
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:581
+#: src/blocks/_pro/outer/edit.js:567
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:596
+#: src/blocks/_pro/outer/edit.js:582
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:611
+#: src/blocks/_pro/outer/edit.js:597
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:622
+#: src/blocks/_pro/outer/edit.js:608
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
diff --git a/src/blocks/_pro/outer/component-divider.js b/src/blocks/_pro/outer/component-divider.js
index 36d20eb1d..a1f1a4b3e 100644
--- a/src/blocks/_pro/outer/component-divider.js
+++ b/src/blocks/_pro/outer/component-divider.js
@@ -1,4 +1,5 @@
 import { isHexColor } from '@vkblocks/utils/is-hex-color';
+import { colorSlugToColorCode } from '@vkblocks/utils/color-slug-to-color-code';
 
 const componentDivider = (level, color, whichSide, dividerType) => {
 	let sectionPadding;
@@ -6,12 +7,21 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 	let lenderDivider;
 
 	// eslint-disable-next-line no-shadow
-	const tiltSectionStyle = (level, color) => {
+	const getFillColorOrCssClass = (color) => {
 		let svgClassName = '';
-		if (!isHexColor(color)) {
+		if (!isHexColor(color) && color.match(/^vk-/)) {
 			svgClassName = `has-${color}-background-color`;
 			color = null;
+		} else if (!isHexColor(color)) {
+			color = colorSlugToColorCode(color);
 		}
+		return [svgClassName, color];
+	};
+
+	// eslint-disable-next-line no-shadow
+	const tiltSectionStyle = (level, color) => {
+		let svgClassName;
+		[svgClassName, color] = getFillColorOrCssClass(color);
 
 		if (level > 0) {
 			return (
@@ -39,12 +49,16 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 
 	// eslint-disable-next-line no-shadow
 	const curveSectionStyle = (level, color) => {
+		let svgClassName;
+		[svgClassName, color] = getFillColorOrCssClass(color);
+
 		if (level > 0) {
 			return (
 				<path
 					d={`m0,${100 - level} q50,${level * 2},100,0 V100 L0,100 z`}
 					strokeWidth="0"
-					fill={color}
+					{...(color ? { fill: color } : {})}
+					className={svgClassName}
 				/>
 			);
 		} else if (level < 0) {
@@ -52,7 +66,8 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 				<path
 					d={`m0,100 q50,${level * 2},100,0 V100 L0,100 z`}
 					strokeWidth="0"
-					fill={color}
+					{...(color ? { fill: color } : {})}
+					className={svgClassName}
 				/>
 			);
 		}
@@ -60,6 +75,9 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 
 	// eslint-disable-next-line no-shadow
 	const waveSectionStyle = (level, color) => {
+		let svgClassName;
+		[svgClassName, color] = getFillColorOrCssClass(color);
+
 		if (level > 0) {
 			return (
 				<path
@@ -68,6 +86,7 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 					} q20,${level},40,0 t40,0 t40,0 V100 L0,100 z`}
 					strokeWidth="0"
 					{...(color ? { fill: color } : {})}
+					className={svgClassName}
 				/>
 			);
 		} else if (level < 0) {
@@ -77,7 +96,8 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 						level / 2 + 100
 					} q20,${level},40,0 t40,0 t40,0 V100 L0,100 z`}
 					strokeWidth="0"
-					fill={color}
+					{...(color ? { fill: color } : {})}
+					className={svgClassName}
 				/>
 			);
 		}
@@ -85,6 +105,9 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 
 	// eslint-disable-next-line no-shadow
 	const triangleSectionStyle = (level, color) => {
+		let svgClassName;
+		[svgClassName, color] = getFillColorOrCssClass(color);
+
 		const absLevel = Math.abs(level);
 		const DivideAbs4 = absLevel / 4;
 
@@ -95,7 +118,8 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 						50 - DivideAbs4
 					} l${DivideAbs4},-${absLevel} l${DivideAbs4},${absLevel} h${DivideAbs4} v100 h-100 z`}
 					strokeWidth="0"
-					fill={color}
+					{...(color ? { fill: color } : {})}
+					className={svgClassName}
 				/>
 			);
 		} else if (level < 0) {
@@ -107,7 +131,8 @@ const componentDivider = (level, color, whichSide, dividerType) => {
 						50 - DivideAbs4
 					} v${absLevel + 1} h-100 z`}
 					strokeWidth="0"
-					fill={color}
+					{...(color ? { fill: color } : {})}
+					className={svgClassName}
 				/>
 			);
 		}
diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index 55acbfad9..f1980c315 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -204,12 +204,6 @@ export default function OuterEdit(props) {
 						)}
 					>
 						<AdvancedColorPalette schema={'bgColor'} {...props} />
-						<ColorPalette
-							value={bgColor}
-							onChange={(value) =>
-								setAttributes({ bgColor: value })
-							}
-						/>
 					</BaseControl>
 					<BaseControl
 						label={__('Opacity Setting', 'vk-blocks')}
@@ -445,14 +439,6 @@ export default function OuterEdit(props) {
 							schema={'upperDividerBgColor'}
 							{...props}
 						/>
-						<ColorPalette
-							value={upperDividerBgColor}
-							onChange={(value) =>
-								setAttributes({
-									upperDividerBgColor: value,
-								})
-							}
-						/>
 					</BaseControl>
 					<BaseControl
 						label={__('Lower Divider Level', 'vk-blocks')}
@@ -470,13 +456,9 @@ export default function OuterEdit(props) {
 						/>
 					</BaseControl>
 					<BaseControl>
-						<ColorPalette
-							value={lowerDividerBgColor}
-							onChange={(value) =>
-								setAttributes({
-									lowerDividerBgColor: value,
-								})
-							}
+						<AdvancedColorPalette
+							schema={'lowerDividerBgColor'}
+							{...props}
 						/>
 					</BaseControl>
 				</PanelBody>
diff --git a/src/blocks/_pro/outer/index.php b/src/blocks/_pro/outer/index.php
index 6069995d7..e1e1fbc20 100644
--- a/src/blocks/_pro/outer/index.php
+++ b/src/blocks/_pro/outer/index.php
@@ -49,5 +49,6 @@ function vk_blocks_register_block_outer() {
 			)
 		);
 	}
+	$palette = get_theme_support( 'editor-color-palette' );
 }
 add_action( 'init', 'vk_blocks_register_block_outer', 99 );
diff --git a/src/blocks/_pro/outer/style.scss b/src/blocks/_pro/outer/style.scss
index ff6000821..0fd1170c1 100644
--- a/src/blocks/_pro/outer/style.scss
+++ b/src/blocks/_pro/outer/style.scss
@@ -248,6 +248,25 @@ $color-danger: #b52727;
 		}
 		&.has-vk-color-primary-dark-background-color {
 			fill: var(--vk-color-primary-dark);
-		}		
+		}	
+		&.has-vk-color-primary-vivid-background-color {
+			fill: var(--vk-color-primary-vivid);
+		}
+		&.has-vk-color-custom-1-background-color {
+			fill: var(--vk-color-custom-1);
+		}
+		&.has-vk-color-custom-2-background-color {
+			fill: var(--vk-color-custom-2);
+		}
+		&.has-vk-color-custom-3-background-color {
+			fill: var(--vk-color-custom-3);
+		}
+		&.has-vk-color-custom-4-background-color {
+			fill: var(--vk-color-custom-4);
+		}
+		&.has-vk-color-custom-5-background-color {
+			fill: var(--vk-color-custom-5);
+		}
+
 	}
 }

From 88ce9564dc937561f6a72a41401c86a29d662760 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Thu, 23 Dec 2021 21:01:57 +0900
Subject: [PATCH 11/22] =?UTF-8?q?=E6=9E=A0=E7=B7=9A=E3=81=AE=E3=82=AD?=
 =?UTF-8?q?=E3=83=BC=E3=82=AB=E3=83=A9=E3=83=BC=E8=BF=BD=E5=BE=93=EF=BC=9A?=
 =?UTF-8?q?=E9=80=94=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/blocks/_pro/outer/edit.js | 38 ++++++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index f1980c315..cc65a7edf 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -150,6 +150,22 @@ export default function OuterEdit(props) {
 		setAttributes({ bgColor: '#f3f4f5' });
 	}
 
+	const bgColorClasses = [];
+	let borderColorCss = borderColor;
+	
+	let bgColorOutputDisable = false;
+	if (!isHexColor(bgColor)) {
+		bgColorClasses.push('has-background');
+		bgColorClasses.push(`has-${bgColor}-background-color`);
+		bgColorOutputDisable = true;
+	}
+
+	if (!isHexColor(borderColor)) {
+		bgColorClasses.push('has-text-color');
+		bgColorClasses.push(`has-${borderColor}-color`);
+		borderColorCss = 'currentColor';
+	}	
+
 	//Dividerエフェクトがない時のみ枠線を追
 	let borderStyleProperty = {};
 
@@ -160,8 +176,8 @@ export default function OuterEdit(props) {
 		borderStyle !== 'none'
 	) {
 		borderStyleProperty = {
-			border: `${borderWidth}px ${borderStyle} ${borderColor}`,
-			borderRadius: `${borderRadius}px`,
+			border: `${borderWidth}px ${borderStyle} ${borderColorCss}`,
+			borderRadius: `${borderRadius}px`
 		};
 		//eslint-disable-next-line camelcase
 	} else if (upper_level !== 0 || lower_level !== 0) {
@@ -172,14 +188,7 @@ export default function OuterEdit(props) {
 		};
 	}
 
-	const bgColorClasses = [];
-	bgColorClasses.push('has-background');
 
-	let bgColorOutputDisable = false;
-	if (!isHexColor(bgColor)) {
-		bgColorClasses.push(`has-${bgColor}-background-color`);
-		bgColorOutputDisable = true;
-	}
 
 	const blockProps = useBlockProps({
 		className: `vkb-outer-${clientId} vk_outer ${classWidth} ${bgColorClasses.join(
@@ -203,7 +212,7 @@ export default function OuterEdit(props) {
 							'vk-blocks'
 						)}
 					>
-						<AdvancedColorPalette schema={'bgColor'} {...props} />
+					<AdvancedColorPalette schema={'bgColor'} {...props} />
 					</BaseControl>
 					<BaseControl
 						label={__('Opacity Setting', 'vk-blocks')}
@@ -439,6 +448,7 @@ export default function OuterEdit(props) {
 							schema={'upperDividerBgColor'}
 							{...props}
 						/>
+
 					</BaseControl>
 					<BaseControl
 						label={__('Lower Divider Level', 'vk-blocks')}
@@ -456,10 +466,10 @@ export default function OuterEdit(props) {
 						/>
 					</BaseControl>
 					<BaseControl>
-						<AdvancedColorPalette
+					<AdvancedColorPalette
 							schema={'lowerDividerBgColor'}
 							{...props}
-						/>
+						/>					
 					</BaseControl>
 				</PanelBody>
 				<PanelBody
@@ -520,6 +530,10 @@ export default function OuterEdit(props) {
 						/>
 					</BaseControl>
 					<BaseControl>
+					<AdvancedColorPalette
+							schema={'borderColor'}
+							{...props}
+						/>						
 						<ColorPalette
 							value={borderColor}
 							onChange={(value) =>

From e40fcaa0f9692b1c3ec7e1660c40ea0dfd19a9fc Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Thu, 23 Dec 2021 21:09:49 +0900
Subject: [PATCH 12/22] lint

---
 src/blocks/_pro/outer/edit.js | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index cc65a7edf..16a574915 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -152,7 +152,7 @@ export default function OuterEdit(props) {
 
 	const bgColorClasses = [];
 	let borderColorCss = borderColor;
-	
+
 	let bgColorOutputDisable = false;
 	if (!isHexColor(bgColor)) {
 		bgColorClasses.push('has-background');
@@ -164,7 +164,7 @@ export default function OuterEdit(props) {
 		bgColorClasses.push('has-text-color');
 		bgColorClasses.push(`has-${borderColor}-color`);
 		borderColorCss = 'currentColor';
-	}	
+	}
 
 	//Dividerエフェクトがない時のみ枠線を追
 	let borderStyleProperty = {};
@@ -177,7 +177,7 @@ export default function OuterEdit(props) {
 	) {
 		borderStyleProperty = {
 			border: `${borderWidth}px ${borderStyle} ${borderColorCss}`,
-			borderRadius: `${borderRadius}px`
+			borderRadius: `${borderRadius}px`,
 		};
 		//eslint-disable-next-line camelcase
 	} else if (upper_level !== 0 || lower_level !== 0) {
@@ -188,8 +188,6 @@ export default function OuterEdit(props) {
 		};
 	}
 
-
-
 	const blockProps = useBlockProps({
 		className: `vkb-outer-${clientId} vk_outer ${classWidth} ${bgColorClasses.join(
 			' '
@@ -212,7 +210,7 @@ export default function OuterEdit(props) {
 							'vk-blocks'
 						)}
 					>
-					<AdvancedColorPalette schema={'bgColor'} {...props} />
+						<AdvancedColorPalette schema={'bgColor'} {...props} />
 					</BaseControl>
 					<BaseControl
 						label={__('Opacity Setting', 'vk-blocks')}
@@ -448,7 +446,6 @@ export default function OuterEdit(props) {
 							schema={'upperDividerBgColor'}
 							{...props}
 						/>
-
 					</BaseControl>
 					<BaseControl
 						label={__('Lower Divider Level', 'vk-blocks')}
@@ -466,10 +463,10 @@ export default function OuterEdit(props) {
 						/>
 					</BaseControl>
 					<BaseControl>
-					<AdvancedColorPalette
+						<AdvancedColorPalette
 							schema={'lowerDividerBgColor'}
 							{...props}
-						/>					
+						/>
 					</BaseControl>
 				</PanelBody>
 				<PanelBody
@@ -530,10 +527,10 @@ export default function OuterEdit(props) {
 						/>
 					</BaseControl>
 					<BaseControl>
-					<AdvancedColorPalette
+						<AdvancedColorPalette
 							schema={'borderColor'}
 							{...props}
-						/>						
+						/>
 						<ColorPalette
 							value={borderColor}
 							onChange={(value) =>

From 32e4a9a9f536392927dba282bbaed46a27f992f4 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Tue, 11 Jan 2022 16:11:15 +0900
Subject: [PATCH 13/22] =?UTF-8?q?fix:=20deprecated=20=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/blocks/_pro/outer/index.js   |  2 +-
 src/blocks/_pro/outer/save.js    | 30 +++++++++++++++++++-----------
 src/blocks/_pro/outer/style.scss | 15 +++++++++++++++
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/blocks/_pro/outer/index.js b/src/blocks/_pro/outer/index.js
index 9c55a9b39..dd9edbfd5 100644
--- a/src/blocks/_pro/outer/index.js
+++ b/src/blocks/_pro/outer/index.js
@@ -104,7 +104,7 @@ addFilter(
 
 			const cssTag = generateInlineCss(attributes);
 
-			// 最新版 || deprecated で vkBlockOuterfiltersにaddInlineFrontCssが含まれているもの
+			// 最新版 or deprecated において vkBlockOuterfiltersにaddInlineFrontCssが含まれているもの
 			if (
 				-1 === deprecatedFuncIndex ||
 				deprecated[deprecatedFuncIndex].vkBlockOuterfilters?.includes(
diff --git a/src/blocks/_pro/outer/save.js b/src/blocks/_pro/outer/save.js
index bf758bd75..5886a23b0 100644
--- a/src/blocks/_pro/outer/save.js
+++ b/src/blocks/_pro/outer/save.js
@@ -80,6 +80,23 @@ export default function save(props) {
 	//編集画面とサイト上の切り替え
 	const containerClass = 'vk_outer_container';
 
+	const bgColorClasses = [];
+	let borderColorCss = borderColor;
+
+
+	let bgColorOutputDisable = false;
+	if (!isHexColor(bgColor)) {
+		bgColorOutputDisable = true;
+		bgColorClasses.push('has-background');
+		bgColorClasses.push(`has-${bgColor}-background-color`);
+	}
+	
+	if (!isHexColor(borderColor)) {
+		bgColorClasses.push('has-text-color');
+		bgColorClasses.push(`has-${borderColor}-color`);
+		borderColorCss = 'currentColor';
+	}	
+	
 	//Dividerエフェクトがない時のみ枠線を追
 	let borderStyleProperty = {};
 	//eslint-disable-next-line camelcase
@@ -90,7 +107,7 @@ export default function save(props) {
 		borderStyle !== 'none'
 	) {
 		borderStyleProperty = {
-			border: `${borderWidth}px ${borderStyle} ${borderColor}`,
+			border: `${borderWidth}px ${borderStyle} ${borderColorCss}`,
 			borderRadius: `${borderRadius}px`,
 		};
 		//eslint-disable-next-line camelcase
@@ -100,16 +117,7 @@ export default function save(props) {
 			border: `none`,
 			borderRadius: `0px`,
 		};
-	}
-
-	const bgColorClasses = [];
-	bgColorClasses.push('has-background');
-
-	let bgColorOutputDisable = false;
-	if (!isHexColor(bgColor)) {
-		bgColorOutputDisable = true;
-		bgColorClasses.push(`has-${bgColor}-background-color`);
-	}
+	}	
 
 	const blockProps = useBlockProps.save({
 		className: `vkb-outer-${clientId} vk_outer ${classWidth} ${bgColorClasses.join(
diff --git a/src/blocks/_pro/outer/style.scss b/src/blocks/_pro/outer/style.scss
index b85487da3..a1edd2cd6 100644
--- a/src/blocks/_pro/outer/style.scss
+++ b/src/blocks/_pro/outer/style.scss
@@ -29,6 +29,12 @@ $media-xxl-down: 1399.98px;
 		h5:first-child {//他テーマ用
 			margin-top: 0;
 		}
+
+		& > *:not(.has-text-color) {
+			// 枠線の色が影響しないようにする
+			color: initial;
+		}
+		
 	}
 }
 // これがないとレスポンシブスペーサーの共通高さが検出しない。
@@ -242,6 +248,15 @@ $color-danger: #b52727;
 
 :root,
 :root .editor-styles-wrapper {
+
+	.vk_outer_container{
+
+		& > *:not(.has-text-color) {
+			// 枠線の色が影響しないようにする
+			color: initial;
+		}
+	}
+
 	path {
 		&.has-vk-color-primary-background-color {
 			fill: var(--vk-color-primary);

From 4ec2e288e59cc250ac8f1a7cab82d7656b06435e Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Tue, 11 Jan 2022 16:11:41 +0900
Subject: [PATCH 14/22] lint

---
 src/blocks/_pro/outer/save.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/blocks/_pro/outer/save.js b/src/blocks/_pro/outer/save.js
index 5886a23b0..cba345d04 100644
--- a/src/blocks/_pro/outer/save.js
+++ b/src/blocks/_pro/outer/save.js
@@ -83,20 +83,19 @@ export default function save(props) {
 	const bgColorClasses = [];
 	let borderColorCss = borderColor;
 
-
 	let bgColorOutputDisable = false;
 	if (!isHexColor(bgColor)) {
 		bgColorOutputDisable = true;
 		bgColorClasses.push('has-background');
 		bgColorClasses.push(`has-${bgColor}-background-color`);
 	}
-	
+
 	if (!isHexColor(borderColor)) {
 		bgColorClasses.push('has-text-color');
 		bgColorClasses.push(`has-${borderColor}-color`);
 		borderColorCss = 'currentColor';
-	}	
-	
+	}
+
 	//Dividerエフェクトがない時のみ枠線を追
 	let borderStyleProperty = {};
 	//eslint-disable-next-line camelcase
@@ -117,7 +116,7 @@ export default function save(props) {
 			border: `none`,
 			borderRadius: `0px`,
 		};
-	}	
+	}
 
 	const blockProps = useBlockProps.save({
 		className: `vkb-outer-${clientId} vk_outer ${classWidth} ${bgColorClasses.join(

From b2b92f72d383035a1847d934f90c4accc01b2006 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Wed, 12 Jan 2022 13:49:57 +0900
Subject: [PATCH 15/22] =?UTF-8?q?fix:=20GeneratedBgImage=E3=82=92=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=82=AB=E3=83=AB=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 inc/vk-blocks/languages/vk-blocks-js.pot      | 110 +++++++--------
 inc/vk-blocks/languages/vk-blocks.pot         | 113 ++++++++--------
 src/blocks/_pro/outer/GenerateBgImage.js      | 123 +++++++++++++++++
 .../_pro/outer/deprecated/0.60.0/component.js |   2 +-
 .../_pro/outer/deprecated/1.0.13/save.js      |   2 +-
 .../_pro/outer/deprecated/1.20.2/save.js      |   2 +-
 .../_pro/outer/deprecated/GenerateBgImage.js  | 125 ++++++++++++++++++
 src/blocks/_pro/outer/edit.js                 |   2 +-
 src/blocks/_pro/outer/save.js                 |   2 +-
 9 files changed, 364 insertions(+), 117 deletions(-)
 create mode 100644 src/blocks/_pro/outer/GenerateBgImage.js
 create mode 100644 src/blocks/_pro/outer/deprecated/GenerateBgImage.js

diff --git a/inc/vk-blocks/languages/vk-blocks-js.pot b/inc/vk-blocks/languages/vk-blocks-js.pot
index c689f583f..71f090084 100644
--- a/inc/vk-blocks/languages/vk-blocks-js.pot
+++ b/inc/vk-blocks/languages/vk-blocks-js.pot
@@ -44,7 +44,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:303
+#: src/blocks/_pro/outer/edit.js:318
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:483
 #: src/blocks/button/edit.js:223
@@ -285,7 +285,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:139
-#: src/blocks/_pro/outer/edit.js:318
+#: src/blocks/_pro/outer/edit.js:333
 #: src/blocks/_pro/slider-item/edit.js:78
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -299,7 +299,7 @@ msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:177
-#: src/blocks/_pro/outer/edit.js:617
+#: src/blocks/_pro/outer/edit.js:628
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
@@ -307,7 +307,7 @@ msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:181
-#: src/blocks/_pro/outer/edit.js:621
+#: src/blocks/_pro/outer/edit.js:632
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
@@ -315,7 +315,7 @@ msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:185
-#: src/blocks/_pro/outer/edit.js:625
+#: src/blocks/_pro/outer/edit.js:636
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
@@ -323,7 +323,7 @@ msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:189
-#: src/blocks/_pro/outer/edit.js:629
+#: src/blocks/_pro/outer/edit.js:640
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -424,157 +424,157 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:182
+#: src/blocks/_pro/outer/edit.js:202
 #: src/blocks/_pro/slider-item/edit.js:125
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:187
+#: src/blocks/_pro/outer/edit.js:207
 #: src/blocks/_pro/slider-item/edit.js:129
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:188
+#: src/blocks/_pro/outer/edit.js:208
 #: src/blocks/_pro/slider-item/edit.js:131
 msgid ""
 "Color will overcome background image. If you want to display image, clear "
 "background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:201
+#: src/blocks/_pro/outer/edit.js:216
 #: src/blocks/_pro/slider-item/edit.js:144
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:215
+#: src/blocks/_pro/outer/edit.js:230
 #: src/blocks/_pro/slider-item/edit.js:179
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:231
+#: src/blocks/_pro/outer/edit.js:246
 #: src/blocks/_pro/slider-item/edit.js:195
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:241
+#: src/blocks/_pro/outer/edit.js:256
 #: src/blocks/_pro/slider-item/edit.js:205
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:251
+#: src/blocks/_pro/outer/edit.js:266
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:259
+#: src/blocks/_pro/outer/edit.js:274
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:263
+#: src/blocks/_pro/outer/edit.js:278
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:267
+#: src/blocks/_pro/outer/edit.js:282
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:274
+#: src/blocks/_pro/outer/edit.js:289
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:289
+#: src/blocks/_pro/outer/edit.js:304
 #: src/blocks/_pro/slider-item/edit.js:73
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:292
+#: src/blocks/_pro/outer/edit.js:307
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:313
+#: src/blocks/_pro/outer/edit.js:328
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:322
+#: src/blocks/_pro/outer/edit.js:337
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:329
+#: src/blocks/_pro/outer/edit.js:344
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:336
+#: src/blocks/_pro/outer/edit.js:351
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:350
+#: src/blocks/_pro/outer/edit.js:365
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:355
+#: src/blocks/_pro/outer/edit.js:370
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:362
+#: src/blocks/_pro/outer/edit.js:377
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:376
+#: src/blocks/_pro/outer/edit.js:391
 msgid ""
 "* If you select \"Do not use\" that, please set yourself it such as a "
 "spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:384
+#: src/blocks/_pro/outer/edit.js:399
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:389
+#: src/blocks/_pro/outer/edit.js:404
 #: src/blocks/balloon/edit.js:443
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:397
+#: src/blocks/_pro/outer/edit.js:412
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:401
+#: src/blocks/_pro/outer/edit.js:416
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:405
+#: src/blocks/_pro/outer/edit.js:420
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:409
+#: src/blocks/_pro/outer/edit.js:424
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:415
+#: src/blocks/_pro/outer/edit.js:430
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:440
+#: src/blocks/_pro/outer/edit.js:451
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:466
+#: src/blocks/_pro/outer/edit.js:473
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:471
+#: src/blocks/_pro/outer/edit.js:478
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:477
+#: src/blocks/_pro/outer/edit.js:484
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:485
+#: src/blocks/_pro/outer/edit.js:492
 #: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:104
 #: src/blocks/balloon/edit.js:543
@@ -582,7 +582,7 @@ msgstr ""
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:489
+#: src/blocks/_pro/outer/edit.js:496
 #: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:86
 #: src/blocks/pr-content/edit.js:143
@@ -590,70 +590,70 @@ msgstr ""
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:493
+#: src/blocks/_pro/outer/edit.js:500
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:497
+#: src/blocks/_pro/outer/edit.js:504
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:501
+#: src/blocks/_pro/outer/edit.js:508
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:505
+#: src/blocks/_pro/outer/edit.js:512
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:509
+#: src/blocks/_pro/outer/edit.js:516
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:513
+#: src/blocks/_pro/outer/edit.js:520
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:517
+#: src/blocks/_pro/outer/edit.js:524
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:531
+#: src/blocks/_pro/outer/edit.js:542
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:543
+#: src/blocks/_pro/outer/edit.js:554
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:559
+#: src/blocks/_pro/outer/edit.js:570
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:566
+#: src/blocks/_pro/outer/edit.js:577
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:581
+#: src/blocks/_pro/outer/edit.js:592
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:596
+#: src/blocks/_pro/outer/edit.js:607
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:607
+#: src/blocks/_pro/outer/edit.js:618
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
diff --git a/inc/vk-blocks/languages/vk-blocks.pot b/inc/vk-blocks/languages/vk-blocks.pot
index 87ec1fb78..8b52acd0a 100644
--- a/inc/vk-blocks/languages/vk-blocks.pot
+++ b/inc/vk-blocks/languages/vk-blocks.pot
@@ -9,7 +9,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2022-01-05T04:28:15+00:00\n"
+"POT-Creation-Date: 2022-01-12T04:46:59+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.5.0\n"
 "X-Domain: vk-blocks\n"
@@ -55,7 +55,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:303
+#: src/blocks/_pro/outer/edit.js:318
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:483
 #: src/blocks/button/edit.js:223
@@ -292,7 +292,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:139
-#: src/blocks/_pro/outer/edit.js:318
+#: src/blocks/_pro/outer/edit.js:333
 #: src/blocks/_pro/slider-item/edit.js:78
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -307,7 +307,7 @@ msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:177
-#: src/blocks/_pro/outer/edit.js:617
+#: src/blocks/_pro/outer/edit.js:628
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
@@ -316,7 +316,7 @@ msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:181
-#: src/blocks/_pro/outer/edit.js:621
+#: src/blocks/_pro/outer/edit.js:632
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
@@ -325,7 +325,7 @@ msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:185
-#: src/blocks/_pro/outer/edit.js:625
+#: src/blocks/_pro/outer/edit.js:636
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
@@ -334,7 +334,7 @@ msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:189
-#: src/blocks/_pro/outer/edit.js:629
+#: src/blocks/_pro/outer/edit.js:640
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -435,153 +435,153 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:182
+#: src/blocks/_pro/outer/edit.js:202
 #: src/blocks/_pro/slider-item/edit.js:125
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:187
+#: src/blocks/_pro/outer/edit.js:207
 #: src/blocks/_pro/slider-item/edit.js:129
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:188
+#: src/blocks/_pro/outer/edit.js:208
 #: src/blocks/_pro/slider-item/edit.js:131
 msgid "Color will overcome background image. If you want to display image, clear background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:201
+#: src/blocks/_pro/outer/edit.js:216
 #: src/blocks/_pro/slider-item/edit.js:144
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:215
+#: src/blocks/_pro/outer/edit.js:230
 #: src/blocks/_pro/slider-item/edit.js:179
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:231
+#: src/blocks/_pro/outer/edit.js:246
 #: src/blocks/_pro/slider-item/edit.js:195
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:241
+#: src/blocks/_pro/outer/edit.js:256
 #: src/blocks/_pro/slider-item/edit.js:205
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:251
+#: src/blocks/_pro/outer/edit.js:266
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:259
+#: src/blocks/_pro/outer/edit.js:274
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:263
+#: src/blocks/_pro/outer/edit.js:278
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:267
+#: src/blocks/_pro/outer/edit.js:282
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:274
+#: src/blocks/_pro/outer/edit.js:289
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:289
+#: src/blocks/_pro/outer/edit.js:304
 #: src/blocks/_pro/slider-item/edit.js:73
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:292
+#: src/blocks/_pro/outer/edit.js:307
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:313
+#: src/blocks/_pro/outer/edit.js:328
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:322
+#: src/blocks/_pro/outer/edit.js:337
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:329
+#: src/blocks/_pro/outer/edit.js:344
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:336
+#: src/blocks/_pro/outer/edit.js:351
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:350
+#: src/blocks/_pro/outer/edit.js:365
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:355
+#: src/blocks/_pro/outer/edit.js:370
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:362
+#: src/blocks/_pro/outer/edit.js:377
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:376
+#: src/blocks/_pro/outer/edit.js:391
 msgid "* If you select \"Do not use\" that, please set yourself it such as a spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:384
+#: src/blocks/_pro/outer/edit.js:399
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:389
+#: src/blocks/_pro/outer/edit.js:404
 #: src/blocks/balloon/edit.js:443
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:397
+#: src/blocks/_pro/outer/edit.js:412
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:401
+#: src/blocks/_pro/outer/edit.js:416
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:405
+#: src/blocks/_pro/outer/edit.js:420
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:409
+#: src/blocks/_pro/outer/edit.js:424
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:415
+#: src/blocks/_pro/outer/edit.js:430
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:440
+#: src/blocks/_pro/outer/edit.js:451
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:466
+#: src/blocks/_pro/outer/edit.js:473
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:471
+#: src/blocks/_pro/outer/edit.js:478
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:477
+#: src/blocks/_pro/outer/edit.js:484
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:485
+#: src/blocks/_pro/outer/edit.js:492
 #: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:104
 #: src/blocks/balloon/edit.js:543
@@ -589,7 +589,7 @@ msgstr ""
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:489
+#: src/blocks/_pro/outer/edit.js:496
 #: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:86
 #: src/blocks/pr-content/edit.js:143
@@ -597,73 +597,73 @@ msgstr ""
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:493
+#: src/blocks/_pro/outer/edit.js:500
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:497
+#: src/blocks/_pro/outer/edit.js:504
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:501
+#: src/blocks/_pro/outer/edit.js:508
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:505
+#: src/blocks/_pro/outer/edit.js:512
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:509
+#: src/blocks/_pro/outer/edit.js:516
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:513
+#: src/blocks/_pro/outer/edit.js:520
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:517
+#: src/blocks/_pro/outer/edit.js:524
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:531
+#: src/blocks/_pro/outer/edit.js:542
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:543
+#: src/blocks/_pro/outer/edit.js:554
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:559
+#: src/blocks/_pro/outer/edit.js:570
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:566
+#: src/blocks/_pro/outer/edit.js:577
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
 #: inc/vk-blocks/admin/admin-margin.php:62
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:581
+#: src/blocks/_pro/outer/edit.js:592
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
 #: inc/vk-blocks/admin/admin-margin.php:61
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:596
+#: src/blocks/_pro/outer/edit.js:607
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
 #: inc/vk-blocks/admin/admin-margin.php:60
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:607
+#: src/blocks/_pro/outer/edit.js:618
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
@@ -2159,7 +2159,6 @@ msgstr ""
 msgid "Installing Plugin: %s"
 msgstr ""
 
-#. translators: %s = plugin name.
 #: inc/tgm-plugin-activation/tgm-config.php:76
 msgid "Something went wrong with the plugin API."
 msgstr ""
diff --git a/src/blocks/_pro/outer/GenerateBgImage.js b/src/blocks/_pro/outer/GenerateBgImage.js
new file mode 100644
index 000000000..2c011bbe9
--- /dev/null
+++ b/src/blocks/_pro/outer/GenerateBgImage.js
@@ -0,0 +1,123 @@
+import hex2rgba from '@vkblocks/utils/hex-to-rgba';
+import { colorSlugToColorCode } from '@vkblocks/utils/color-slug-to-color-code';
+import { isHexColor } from '@vkblocks/utils/is-hex-color';
+const GenerateBgImage = (props) => {
+	const { attributes, clientId, prefix, bgColorOutputDisable } = props;
+	const { bgImageMobile, bgImageTablet, bgImage, bgColor, opacity, bgSize } =
+		attributes;
+
+	const mobileViewport = 'max-width: 575.98px';
+	const tabletViewport = 'min-width: 576px';
+	const pcViewport = 'min-width: 1200px';
+	const underPcViewport = 'max-width: 1199.98px';
+
+	let backgroundStyle;
+	const backgroundPosition = 'background-position:center!important;';
+	if ('cover' === bgSize) {
+		backgroundStyle = `background-size:${bgSize}!important; ${backgroundPosition}`;
+	} else if ('repeat' === bgSize) {
+		backgroundStyle = `background-repeat:${bgSize}!important; ${backgroundPosition}`;
+	} else {
+		backgroundStyle = ``;
+	}
+
+	let bgColorWOpacity;
+	let bgHexColor = bgColor;
+	//hexからrgbaに変換
+	if (bgColor) {
+		if (!isHexColor(bgColor)) {
+			bgHexColor = colorSlugToColorCode(bgColor);
+		}
+		bgColorWOpacity = hex2rgba(bgHexColor, opacity);
+	} else {
+		//背景色をクリアした時は、白に変更
+		bgColorWOpacity = hex2rgba('#fff', opacity);
+	}
+
+	/* eslint-disable */
+	let backgroundInfo = [];
+
+	// モバイル背景のみ有効
+	if (bgImageMobile && !bgImageTablet && !bgImage) {
+		backgroundInfo.push({ url: bgImageMobile });
+
+		// タブレット背景のみ有効
+	} else if (!bgImageMobile && bgImageTablet && !bgImage) {
+		backgroundInfo.push({ url: bgImageTablet });
+
+		// PC背景のみ有効
+	} else if (!bgImageMobile && !bgImageTablet && bgImage) {
+		backgroundInfo.push({ url: bgImage });
+
+		// モバイル＆PC背景が有効
+	} else if (bgImageMobile && !bgImageTablet && bgImage) {
+		backgroundInfo.push({
+			mediaQuery: underPcViewport,
+			url: bgImageMobile,
+		});
+		backgroundInfo.push({ mediaQuery: pcViewport, url: bgImage });
+
+		// タブレット＆PC背景が有効
+	} else if (!bgImageMobile && bgImageTablet && bgImage) {
+		backgroundInfo.push({
+			mediaQuery: underPcViewport,
+			url: bgImageTablet,
+		});
+		backgroundInfo.push({ mediaQuery: pcViewport, url: bgImage });
+
+		// モバイル＆タブレット背景が有効
+	} else if (bgImageMobile && bgImageTablet && !bgImage) {
+		backgroundInfo.push({ mediaQuery: mobileViewport, url: bgImageMobile });
+		backgroundInfo.push({ mediaQuery: tabletViewport, url: bgImageTablet });
+
+		// PC&モバイル＆タブレット背景が有効
+	} else if (bgImageMobile && bgImageTablet && bgImage) {
+		backgroundInfo.push({ mediaQuery: mobileViewport, url: bgImageMobile });
+		backgroundInfo.push({ mediaQuery: tabletViewport, url: bgImageTablet });
+		backgroundInfo.push({ mediaQuery: pcViewport, url: bgImage });
+
+		// 背景がすべて有効になっていない
+	} else if (!bgImageMobile && !bgImageTablet && !bgImage) {
+		backgroundInfo.push({ mediaQuery: null, url: null });
+	}
+	/* eslint-enable */
+
+	// ここからCSSの組み立て処理
+	const selectorCss = `.${prefix}-${clientId}`;
+	const bgColorCss = bgColorOutputDisable
+		? ''
+		: `background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity})`;
+	const outputCss = [];
+
+	backgroundInfo.forEach((bg) => {
+		let mediaQueryBefore = '';
+		let mediaQueryAfter = '';
+
+		// 背景情報が複数あるときのみメディアクエリを指定
+		if (backgroundInfo.length > 1) {
+			mediaQueryBefore = `\n\t@media screen and (${bg.mediaQuery}) {\n\t`;
+			mediaQueryAfter = '}\n\t';
+		}
+
+		// 背景が指定されているときのみ url出力
+		let bgUrlCss = '';
+		if (bg.url) {
+			bgUrlCss = `url(${bg.url});`;
+		}
+
+		let separation = bgUrlCss ? ', ' : ';';
+
+		if ('' === bgColorCss && !bg.url) {
+			separation = '';
+		}
+
+		outputCss.push(mediaQueryBefore ?? '');
+		outputCss.push(
+			`${selectorCss}{${bgColorCss}${separation}${bgUrlCss} ${backgroundStyle}}\n`
+		);
+		outputCss.push(mediaQueryAfter ?? '');
+	});
+
+	return <style>{outputCss.join('')}</style>;
+};
+export default GenerateBgImage;
diff --git a/src/blocks/_pro/outer/deprecated/0.60.0/component.js b/src/blocks/_pro/outer/deprecated/0.60.0/component.js
index cd672609d..72f9d5ae8 100644
--- a/src/blocks/_pro/outer/deprecated/0.60.0/component.js
+++ b/src/blocks/_pro/outer/deprecated/0.60.0/component.js
@@ -1,6 +1,6 @@
 import { componentDivider } from '../component-divider';
 import { InnerBlocks } from '@wordpress/block-editor';
-import GenerateBgImage from '@vkblocks/utils/GenerateBgImage';
+import GenerateBgImage from '../GenerateBgImage';
 
 export const OuterBlock = (props) => {
 	let {
diff --git a/src/blocks/_pro/outer/deprecated/1.0.13/save.js b/src/blocks/_pro/outer/deprecated/1.0.13/save.js
index 106199c0d..828c235dc 100644
--- a/src/blocks/_pro/outer/deprecated/1.0.13/save.js
+++ b/src/blocks/_pro/outer/deprecated/1.0.13/save.js
@@ -1,6 +1,6 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { componentDivider } from './../component-divider';
-import GenerateBgImage from '@vkblocks/utils/GenerateBgImage';
+import GenerateBgImage from '../GenerateBgImage';
 
 export default function save(props) {
 	const { attributes } = props;
diff --git a/src/blocks/_pro/outer/deprecated/1.20.2/save.js b/src/blocks/_pro/outer/deprecated/1.20.2/save.js
index 7e716668d..87a20ce79 100644
--- a/src/blocks/_pro/outer/deprecated/1.20.2/save.js
+++ b/src/blocks/_pro/outer/deprecated/1.20.2/save.js
@@ -1,6 +1,6 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { componentDivider } from '../component-divider';
-import GenerateBgImage from '@vkblocks/utils/GenerateBgImage';
+import GenerateBgImage from '../GenerateBgImage';
 
 export default function save(props) {
 	const { attributes } = props;
diff --git a/src/blocks/_pro/outer/deprecated/GenerateBgImage.js b/src/blocks/_pro/outer/deprecated/GenerateBgImage.js
new file mode 100644
index 000000000..7cbe99c65
--- /dev/null
+++ b/src/blocks/_pro/outer/deprecated/GenerateBgImage.js
@@ -0,0 +1,125 @@
+/**
+ * GenerateBgImage(0.60.0-1.20.2)
+ */
+
+import hex2rgba from '@vkblocks/utils/hex-to-rgba';
+
+const GenerateBgImage = (props) => {
+	const { attributes, clientId, prefix } = props;
+	const { bgImageMobile, bgImageTablet, bgImage, bgColor, opacity, bgSize } =
+		attributes;
+
+	const mobileViewport = 'max-width: 575.98px';
+	const tabletViewport = 'min-width: 576px';
+	const pcViewport = 'min-width: 1200px';
+	const underPcViewport = 'max-width: 1199.98px';
+
+	let backgroundStyle;
+	const backgroundPosition = 'background-position:center!important;';
+	if ('cover' === bgSize) {
+		backgroundStyle = `background-size:${bgSize}!important; ${backgroundPosition}`;
+	} else if ('repeat' === bgSize) {
+		backgroundStyle = `background-repeat:${bgSize}!important; ${backgroundPosition}`;
+	} else {
+		backgroundStyle = ``;
+	}
+
+	let bgColorWOpacity;
+
+	//hexからrgbaに変換
+	if (bgColor) {
+		bgColorWOpacity = hex2rgba(bgColor, opacity);
+	} else {
+		//背景色をクリアした時は、白に変更
+		bgColorWOpacity = hex2rgba('#fff', opacity);
+	}
+
+	//moible only
+	if (bgImageMobile && !bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//tablet only
+	if (!bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc only
+	if (!bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}`}</style>
+		);
+	}
+	//pc -mobile
+	if (bgImageMobile && !bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//pc -tablet
+	if (!bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${underPcViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
+         }
+          @media screen and (${pcViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
+         }
+          `}
+			</style>
+		);
+	}
+	//tablet - mobile
+	if (bgImageMobile && bgImageTablet && !bgImage) {
+		return (
+			<style>
+				{`
+          @media screen and (${mobileViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
+         }
+          @media screen and (${tabletViewport}) {
+            .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
+         }
+        `}
+			</style>
+		);
+	}
+	//pc -tablet - mobile
+	if (bgImageMobile && bgImageTablet && bgImage) {
+		return (
+			<style>
+				{`
+        @media screen and (${mobileViewport}) {
+          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageMobile}); ${backgroundStyle}}
+       }
+        @media screen and (${tabletViewport}) {
+          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImageTablet}); ${backgroundStyle}}
+       }
+        @media screen and (${pcViewport}) {
+          .${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}), url(${bgImage}); ${backgroundStyle}}
+       }
+        `}
+			</style>
+		);
+	}
+	//no background image
+	if (!bgImageMobile && !bgImageTablet && !bgImage) {
+		return (
+			<style>{`.${prefix}-${clientId}{background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity}); ${backgroundStyle}}`}</style>
+		);
+	}
+};
+export default GenerateBgImage;
diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index 16a574915..c1802257e 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -20,7 +20,7 @@ import {
 import { useEffect } from '@wordpress/element';
 import { dispatch } from '@wordpress/data';
 import { componentDivider } from './component-divider';
-import GenerateBgImage from '@vkblocks/utils/GenerateBgImage';
+import GenerateBgImage from './GenerateBgImage';
 import { isHexColor } from '@vkblocks/utils/is-hex-color';
 
 export default function OuterEdit(props) {
diff --git a/src/blocks/_pro/outer/save.js b/src/blocks/_pro/outer/save.js
index cba345d04..a026b13fb 100644
--- a/src/blocks/_pro/outer/save.js
+++ b/src/blocks/_pro/outer/save.js
@@ -1,6 +1,6 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { componentDivider } from './component-divider';
-import GenerateBgImage from '@vkblocks/utils/GenerateBgImage';
+import GenerateBgImage from './GenerateBgImage';
 import { isHexColor } from '@vkblocks/utils/is-hex-color';
 
 export default function save(props) {

From c1f111fe7ab46b32b5b7d83bae87b8c809b03cf6 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Thu, 13 Jan 2022 15:19:58 +0900
Subject: [PATCH 16/22] =?UTF-8?q?fix:=20=E5=8F=A4=E3=81=84=E3=83=91?=
 =?UTF-8?q?=E3=83=AC=E3=83=83=E3=83=88=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 inc/vk-blocks/languages/vk-blocks-js.pot | 110 +++++++++++-----------
 inc/vk-blocks/languages/vk-blocks.pot    | 112 +++++++++++------------
 src/blocks/_pro/outer/edit.js            |   7 --
 3 files changed, 111 insertions(+), 118 deletions(-)

diff --git a/inc/vk-blocks/languages/vk-blocks-js.pot b/inc/vk-blocks/languages/vk-blocks-js.pot
index 71f090084..b9b6df4c6 100644
--- a/inc/vk-blocks/languages/vk-blocks-js.pot
+++ b/inc/vk-blocks/languages/vk-blocks-js.pot
@@ -44,7 +44,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:318
+#: src/blocks/_pro/outer/edit.js:317
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:483
 #: src/blocks/button/edit.js:223
@@ -285,7 +285,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:139
-#: src/blocks/_pro/outer/edit.js:333
+#: src/blocks/_pro/outer/edit.js:332
 #: src/blocks/_pro/slider-item/edit.js:78
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -299,7 +299,7 @@ msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:177
-#: src/blocks/_pro/outer/edit.js:628
+#: src/blocks/_pro/outer/edit.js:621
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
@@ -307,7 +307,7 @@ msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:181
-#: src/blocks/_pro/outer/edit.js:632
+#: src/blocks/_pro/outer/edit.js:625
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
@@ -315,7 +315,7 @@ msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:185
-#: src/blocks/_pro/outer/edit.js:636
+#: src/blocks/_pro/outer/edit.js:629
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
@@ -323,7 +323,7 @@ msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:189
-#: src/blocks/_pro/outer/edit.js:640
+#: src/blocks/_pro/outer/edit.js:633
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -424,157 +424,157 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:202
+#: src/blocks/_pro/outer/edit.js:201
 #: src/blocks/_pro/slider-item/edit.js:125
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:207
+#: src/blocks/_pro/outer/edit.js:206
 #: src/blocks/_pro/slider-item/edit.js:129
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:208
+#: src/blocks/_pro/outer/edit.js:207
 #: src/blocks/_pro/slider-item/edit.js:131
 msgid ""
 "Color will overcome background image. If you want to display image, clear "
 "background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:216
+#: src/blocks/_pro/outer/edit.js:215
 #: src/blocks/_pro/slider-item/edit.js:144
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:230
+#: src/blocks/_pro/outer/edit.js:229
 #: src/blocks/_pro/slider-item/edit.js:179
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:246
+#: src/blocks/_pro/outer/edit.js:245
 #: src/blocks/_pro/slider-item/edit.js:195
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:256
+#: src/blocks/_pro/outer/edit.js:255
 #: src/blocks/_pro/slider-item/edit.js:205
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:266
+#: src/blocks/_pro/outer/edit.js:265
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:274
+#: src/blocks/_pro/outer/edit.js:273
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:278
+#: src/blocks/_pro/outer/edit.js:277
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:282
+#: src/blocks/_pro/outer/edit.js:281
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:289
+#: src/blocks/_pro/outer/edit.js:288
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:304
+#: src/blocks/_pro/outer/edit.js:303
 #: src/blocks/_pro/slider-item/edit.js:73
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:307
+#: src/blocks/_pro/outer/edit.js:306
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:328
+#: src/blocks/_pro/outer/edit.js:327
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:337
+#: src/blocks/_pro/outer/edit.js:336
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:344
+#: src/blocks/_pro/outer/edit.js:343
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:351
+#: src/blocks/_pro/outer/edit.js:350
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:365
+#: src/blocks/_pro/outer/edit.js:364
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:370
+#: src/blocks/_pro/outer/edit.js:369
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:377
+#: src/blocks/_pro/outer/edit.js:376
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:391
+#: src/blocks/_pro/outer/edit.js:390
 msgid ""
 "* If you select \"Do not use\" that, please set yourself it such as a "
 "spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:399
+#: src/blocks/_pro/outer/edit.js:398
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:404
+#: src/blocks/_pro/outer/edit.js:403
 #: src/blocks/balloon/edit.js:443
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:412
+#: src/blocks/_pro/outer/edit.js:411
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:416
+#: src/blocks/_pro/outer/edit.js:415
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:420
+#: src/blocks/_pro/outer/edit.js:419
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:424
+#: src/blocks/_pro/outer/edit.js:423
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:430
+#: src/blocks/_pro/outer/edit.js:429
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:451
+#: src/blocks/_pro/outer/edit.js:450
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:473
+#: src/blocks/_pro/outer/edit.js:472
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:478
+#: src/blocks/_pro/outer/edit.js:477
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:484
+#: src/blocks/_pro/outer/edit.js:483
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:492
+#: src/blocks/_pro/outer/edit.js:491
 #: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:104
 #: src/blocks/balloon/edit.js:543
@@ -582,7 +582,7 @@ msgstr ""
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:496
+#: src/blocks/_pro/outer/edit.js:495
 #: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:86
 #: src/blocks/pr-content/edit.js:143
@@ -590,70 +590,70 @@ msgstr ""
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:500
+#: src/blocks/_pro/outer/edit.js:499
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:504
+#: src/blocks/_pro/outer/edit.js:503
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:508
+#: src/blocks/_pro/outer/edit.js:507
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:512
+#: src/blocks/_pro/outer/edit.js:511
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:516
+#: src/blocks/_pro/outer/edit.js:515
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:520
+#: src/blocks/_pro/outer/edit.js:519
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:524
+#: src/blocks/_pro/outer/edit.js:523
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:542
+#: src/blocks/_pro/outer/edit.js:535
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:554
+#: src/blocks/_pro/outer/edit.js:547
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:570
+#: src/blocks/_pro/outer/edit.js:563
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:577
+#: src/blocks/_pro/outer/edit.js:570
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:592
+#: src/blocks/_pro/outer/edit.js:585
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:607
+#: src/blocks/_pro/outer/edit.js:600
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:618
+#: src/blocks/_pro/outer/edit.js:611
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
diff --git a/inc/vk-blocks/languages/vk-blocks.pot b/inc/vk-blocks/languages/vk-blocks.pot
index 8b52acd0a..314ded5c9 100644
--- a/inc/vk-blocks/languages/vk-blocks.pot
+++ b/inc/vk-blocks/languages/vk-blocks.pot
@@ -9,7 +9,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2022-01-12T04:46:59+00:00\n"
+"POT-Creation-Date: 2022-01-13T06:19:20+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.5.0\n"
 "X-Domain: vk-blocks\n"
@@ -55,7 +55,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:318
+#: src/blocks/_pro/outer/edit.js:317
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:483
 #: src/blocks/button/edit.js:223
@@ -292,7 +292,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:139
-#: src/blocks/_pro/outer/edit.js:333
+#: src/blocks/_pro/outer/edit.js:332
 #: src/blocks/_pro/slider-item/edit.js:78
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -307,7 +307,7 @@ msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:177
-#: src/blocks/_pro/outer/edit.js:628
+#: src/blocks/_pro/outer/edit.js:621
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
@@ -316,7 +316,7 @@ msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:181
-#: src/blocks/_pro/outer/edit.js:632
+#: src/blocks/_pro/outer/edit.js:625
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
@@ -325,7 +325,7 @@ msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:185
-#: src/blocks/_pro/outer/edit.js:636
+#: src/blocks/_pro/outer/edit.js:629
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
@@ -334,7 +334,7 @@ msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:189
-#: src/blocks/_pro/outer/edit.js:640
+#: src/blocks/_pro/outer/edit.js:633
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -435,153 +435,153 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:202
+#: src/blocks/_pro/outer/edit.js:201
 #: src/blocks/_pro/slider-item/edit.js:125
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:207
+#: src/blocks/_pro/outer/edit.js:206
 #: src/blocks/_pro/slider-item/edit.js:129
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:208
+#: src/blocks/_pro/outer/edit.js:207
 #: src/blocks/_pro/slider-item/edit.js:131
 msgid "Color will overcome background image. If you want to display image, clear background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:216
+#: src/blocks/_pro/outer/edit.js:215
 #: src/blocks/_pro/slider-item/edit.js:144
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:230
+#: src/blocks/_pro/outer/edit.js:229
 #: src/blocks/_pro/slider-item/edit.js:179
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:246
+#: src/blocks/_pro/outer/edit.js:245
 #: src/blocks/_pro/slider-item/edit.js:195
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:256
+#: src/blocks/_pro/outer/edit.js:255
 #: src/blocks/_pro/slider-item/edit.js:205
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:266
+#: src/blocks/_pro/outer/edit.js:265
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:274
+#: src/blocks/_pro/outer/edit.js:273
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:278
+#: src/blocks/_pro/outer/edit.js:277
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:282
+#: src/blocks/_pro/outer/edit.js:281
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:289
+#: src/blocks/_pro/outer/edit.js:288
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:304
+#: src/blocks/_pro/outer/edit.js:303
 #: src/blocks/_pro/slider-item/edit.js:73
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:307
+#: src/blocks/_pro/outer/edit.js:306
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:328
+#: src/blocks/_pro/outer/edit.js:327
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:337
+#: src/blocks/_pro/outer/edit.js:336
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:344
+#: src/blocks/_pro/outer/edit.js:343
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:351
+#: src/blocks/_pro/outer/edit.js:350
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:365
+#: src/blocks/_pro/outer/edit.js:364
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:370
+#: src/blocks/_pro/outer/edit.js:369
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:377
+#: src/blocks/_pro/outer/edit.js:376
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:391
+#: src/blocks/_pro/outer/edit.js:390
 msgid "* If you select \"Do not use\" that, please set yourself it such as a spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:399
+#: src/blocks/_pro/outer/edit.js:398
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:404
+#: src/blocks/_pro/outer/edit.js:403
 #: src/blocks/balloon/edit.js:443
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:412
+#: src/blocks/_pro/outer/edit.js:411
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:416
+#: src/blocks/_pro/outer/edit.js:415
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:420
+#: src/blocks/_pro/outer/edit.js:419
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:424
+#: src/blocks/_pro/outer/edit.js:423
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:430
+#: src/blocks/_pro/outer/edit.js:429
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:451
+#: src/blocks/_pro/outer/edit.js:450
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:473
+#: src/blocks/_pro/outer/edit.js:472
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:478
+#: src/blocks/_pro/outer/edit.js:477
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:484
+#: src/blocks/_pro/outer/edit.js:483
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:492
+#: src/blocks/_pro/outer/edit.js:491
 #: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:104
 #: src/blocks/balloon/edit.js:543
@@ -589,7 +589,7 @@ msgstr ""
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:496
+#: src/blocks/_pro/outer/edit.js:495
 #: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:86
 #: src/blocks/pr-content/edit.js:143
@@ -597,73 +597,73 @@ msgstr ""
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:500
+#: src/blocks/_pro/outer/edit.js:499
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:504
+#: src/blocks/_pro/outer/edit.js:503
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:508
+#: src/blocks/_pro/outer/edit.js:507
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:512
+#: src/blocks/_pro/outer/edit.js:511
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:516
+#: src/blocks/_pro/outer/edit.js:515
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:520
+#: src/blocks/_pro/outer/edit.js:519
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:524
+#: src/blocks/_pro/outer/edit.js:523
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:542
+#: src/blocks/_pro/outer/edit.js:535
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:554
+#: src/blocks/_pro/outer/edit.js:547
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:570
+#: src/blocks/_pro/outer/edit.js:563
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:577
+#: src/blocks/_pro/outer/edit.js:570
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
 #: inc/vk-blocks/admin/admin-margin.php:62
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:592
+#: src/blocks/_pro/outer/edit.js:585
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
 #: inc/vk-blocks/admin/admin-margin.php:61
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:607
+#: src/blocks/_pro/outer/edit.js:600
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
 #: inc/vk-blocks/admin/admin-margin.php:60
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:618
+#: src/blocks/_pro/outer/edit.js:611
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index c1802257e..1ee650106 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -13,7 +13,6 @@ import {
 } from '@wordpress/components';
 import {
 	InspectorControls,
-	ColorPalette,
 	InnerBlocks,
 	useBlockProps,
 } from '@wordpress/block-editor';
@@ -531,12 +530,6 @@ export default function OuterEdit(props) {
 							schema={'borderColor'}
 							{...props}
 						/>
-						<ColorPalette
-							value={borderColor}
-							onChange={(value) =>
-								setAttributes({ borderColor: value })
-							}
-						/>
 					</BaseControl>
 					<BaseControl
 						label={__('Border width', 'vk-blocks')}

From 3cec42b11c70079d2a3b491cf1a33f2c4a188151 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Wed, 2 Feb 2022 14:18:54 +0900
Subject: [PATCH 17/22] =?UTF-8?q?fix:=20=E6=9E=A0=E7=B7=9AR=E3=81=AE?=
 =?UTF-8?q?=E3=83=9E=E3=82=A4=E3=83=8A=E3=82=B9=E5=80=A4=E3=82=920?=
 =?UTF-8?q?=E6=89=B1=E3=81=84=E3=81=AB=20fix:=20=E3=83=96=E3=83=AC?=
 =?UTF-8?q?=E3=82=A4=E3=82=AF=E3=83=9D=E3=82=A4=E3=83=B3=E5=80=A4=E3=81=AE?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/blocks/_pro/outer/GenerateBgImage.js      |  4 ++--
 src/blocks/_pro/outer/edit.js                 | 10 ++++++++--
 src/blocks/_pro/outer/save.js                 |  2 +-
 .../fixtures/blocks/vk-blocks__outer.html     | 20 +++++++++----------
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/blocks/_pro/outer/GenerateBgImage.js b/src/blocks/_pro/outer/GenerateBgImage.js
index 2c011bbe9..de95da0ed 100644
--- a/src/blocks/_pro/outer/GenerateBgImage.js
+++ b/src/blocks/_pro/outer/GenerateBgImage.js
@@ -8,8 +8,8 @@ const GenerateBgImage = (props) => {
 
 	const mobileViewport = 'max-width: 575.98px';
 	const tabletViewport = 'min-width: 576px';
-	const pcViewport = 'min-width: 1200px';
-	const underPcViewport = 'max-width: 1199.98px';
+	const pcViewport = 'min-width: 992px';
+	const underPcViewport = 'max-width: 992.98px';
 
 	let backgroundStyle;
 	const backgroundPosition = 'background-position:center!important;';
diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index 1ee650106..1d8e51e59 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -90,6 +90,12 @@ export default function OuterEdit(props) {
 		});
 	}
 
+	if (borderRadius < 0) {
+		setAttributes({
+			borderRadius: 0,
+		});		
+	}
+
 	//幅のクラス切り替え
 	// eslint-disable-next-line prefer-const
 	const classWidth = `vk_outer-width-${outerWidth}`;
@@ -551,10 +557,10 @@ export default function OuterEdit(props) {
 							value={borderRadius}
 							onChange={(value) =>
 								setAttributes({
-									borderRadius: toNumber(value, -100, 100),
+									borderRadius: toNumber(value, 0, 100),
 								})
 							}
-							min="-100"
+							min="0"
 							max="100"
 						/>
 					</BaseControl>
diff --git a/src/blocks/_pro/outer/save.js b/src/blocks/_pro/outer/save.js
index a026b13fb..80460554d 100644
--- a/src/blocks/_pro/outer/save.js
+++ b/src/blocks/_pro/outer/save.js
@@ -107,7 +107,7 @@ export default function save(props) {
 	) {
 		borderStyleProperty = {
 			border: `${borderWidth}px ${borderStyle} ${borderColorCss}`,
-			borderRadius: `${borderRadius}px`,
+			borderRadius: `${borderRadius < 0 ? 0 : borderRadius}px`,
 		};
 		//eslint-disable-next-line camelcase
 	} else if (upper_level !== 0 || lower_level !== 0) {
diff --git a/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html b/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html
index ac1fa1052..93d268c8a 100644
--- a/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html
+++ b/test/e2e-tests/fixtures/blocks/vk-blocks__outer.html
@@ -1,29 +1,29 @@
-<!-- wp:vk-blocks/outer {"bgColor":"#8ed1fc","bgImage":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/04/vws_logo_2020_og.png","bgImageTablet":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png","bgImageMobile":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png","upper_level":43,"lower_level":-56,"borderColor":"#000","clientId":"67152b3f-94c1-4413-bdda-0179ec00d047"} -->
-<div class="wp-block-vk-blocks-outer vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047 vk_outer vk_outer-width-normal has-background vk_outer-paddingLR-none vk_outer-paddingVertical-use vk_outer-bgPosition-normal" style="border:none;border-radius:0px"><style>
+<!-- wp:vk-blocks/outer {"bgColor":"#8ed1fc","bgImage":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/04/vws_logo_2020_og.png","bgImageTablet":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png","bgImageMobile":"https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png","upper_level":43,"lower_level":-56,"borderColor":"#000","clientId":"577390fc-b536-477c-9c5f-dc9cbc4dc631"} -->
+<div class="wp-block-vk-blocks-outer vkb-outer-577390fc-b536-477c-9c5f-dc9cbc4dc631 vk_outer vk_outer-width-normal  vk_outer-paddingLR-none vk_outer-paddingVertical-use vk_outer-bgPosition-normal" style="border:none;border-radius:0px"><style>
 	@media screen and (max-width: 575.98px) {
-	.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png); }
+	.vkb-outer-577390fc-b536-477c-9c5f-dc9cbc4dc631{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png); }
 }
 	
 	@media screen and (min-width: 576px) {
-	.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png); }
+	.vkb-outer-577390fc-b536-477c-9c5f-dc9cbc4dc631{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/08/vk-blocks-logo_og.png); }
 }
 	
-	@media screen and (min-width: 1200px) {
-	.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/04/vws_logo_2020_og.png); }
+	@media screen and (min-width: 992px) {
+	.vkb-outer-577390fc-b536-477c-9c5f-dc9cbc4dc631{background: linear-gradient(rgba(142, 209, 252, 0.5), rgba(142, 209, 252, 0.5)), url(https://www.vektor-inc.co.jp/wp-content/uploads/2020/04/vws_logo_2020_og.png); }
 }
-	</style><div><div class="vk_outer_separator vk_outer_separator-position-upper vk_outer_separator-type-tilt" style="padding-bottom:43px"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="none"><path d="m0,57 L100,100 L0,100 z" strokewidth="0" fill="#fff"></path></svg></div><div class="vk_outer_container"></div><div class="vk_outer_separator vk_outer_separator-position-lower vk_outer_separator-type-tilt" style="padding-top:56px"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="none"><path d="m100,44 L0,100 L100,100 z" strokewidth="0" fill="#fff"></path></svg></div></div></div><style type="text/css">
-	.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047 .vk_outer_container{
+	</style><div><div class="vk_outer_separator vk_outer_separator-position-upper vk_outer_separator-type-tilt" style="padding-bottom:43px"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="none"><path d="m0,57 L100,100 L0,100 z" strokewidth="0" fill="#fff" class=""></path></svg></div><div class="vk_outer_container"></div><div class="vk_outer_separator vk_outer_separator-position-lower vk_outer_separator-type-tilt" style="padding-top:56px"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" preserveaspectratio="none"><path d="m100,44 L0,100 L100,100 z" strokewidth="0" fill="#fff" class=""></path></svg></div></div></div><style type="text/css">
+	.vkb-outer-577390fc-b536-477c-9c5f-dc9cbc4dc631 .vk_outer_container{
 		padding-left:0px;
 		padding-right:0px;
 	}
 	@media (min-width: 577px) {
-		.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047 .vk_outer_container{
+		.vkb-outer-577390fc-b536-477c-9c5f-dc9cbc4dc631 .vk_outer_container{
 			padding-left:0px;
 			padding-right:0px;
 		}
 	}
 	@media (min-width: 769px) {
-		.vkb-outer-67152b3f-94c1-4413-bdda-0179ec00d047 .vk_outer_container{
+		.vkb-outer-577390fc-b536-477c-9c5f-dc9cbc4dc631 .vk_outer_container{
 			padding-left:0px;
 			padding-right:0px;
 		}

From 9dc1042097a1e3a2b5570639646c70c029d228c7 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Wed, 2 Feb 2022 14:58:40 +0900
Subject: [PATCH 18/22] =?UTF-8?q?fix:=20=E3=83=96=E3=83=AC=E3=82=A4?=
 =?UTF-8?q?=E3=82=AF=E3=83=9D=E3=82=A4=E3=83=B3=E3=83=88=E3=81=AE=E5=80=A4?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/blocks/_pro/outer/GenerateBgImage.js | 2 +-
 src/blocks/_pro/outer/edit.js            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/blocks/_pro/outer/GenerateBgImage.js b/src/blocks/_pro/outer/GenerateBgImage.js
index de95da0ed..ae2aa6084 100644
--- a/src/blocks/_pro/outer/GenerateBgImage.js
+++ b/src/blocks/_pro/outer/GenerateBgImage.js
@@ -9,7 +9,7 @@ const GenerateBgImage = (props) => {
 	const mobileViewport = 'max-width: 575.98px';
 	const tabletViewport = 'min-width: 576px';
 	const pcViewport = 'min-width: 992px';
-	const underPcViewport = 'max-width: 992.98px';
+	const underPcViewport = 'max-width: 991.98px';
 
 	let backgroundStyle;
 	const backgroundPosition = 'background-position:center!important;';
diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index 1d8e51e59..d801a9f28 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -93,7 +93,7 @@ export default function OuterEdit(props) {
 	if (borderRadius < 0) {
 		setAttributes({
 			borderRadius: 0,
-		});		
+		});
 	}
 
 	//幅のクラス切り替え

From 0a30e33423bfeec23f1c05f70f6918ea4c102c2a Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Wed, 2 Feb 2022 19:48:06 +0900
Subject: [PATCH 19/22] =?UTF-8?q?fix:=20=E8=83=8C=E6=99=AF=E9=80=8F?=
 =?UTF-8?q?=E9=81=8E=E3=81=8C=E5=8A=B9=E3=81=8B=E3=81=AA=E3=81=84=E3=80=81?=
 =?UTF-8?q?borderStyle=E3=81=AB=E3=82=88=E3=81=A3=E3=81=A6=E6=9E=A0?=
 =?UTF-8?q?=E7=B7=9A=E3=81=AE=E8=89=B2=E3=82=92=E5=8F=8D=E6=98=A0=E3=81=97?=
 =?UTF-8?q?=E3=81=AA=E3=81=84=E4=B8=8D=E5=85=B7=E5=90=88=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gulpfile.js                              |  4 ++++
 src/blocks/_pro/outer/GenerateBgImage.js |  2 +-
 src/blocks/_pro/outer/edit.js            |  3 ++-
 src/blocks/_pro/outer/enque-front.js     | 12 ++++++++++++
 src/blocks/_pro/outer/index.php          | 10 ++++++++++
 5 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/blocks/_pro/outer/enque-front.js

diff --git a/gulpfile.js b/gulpfile.js
index 472c3faf1..69e2ac1f9 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -53,6 +53,10 @@ gulp.task('helper-js-pro', (done) => {
 		.pipe(uglify())
 		.pipe(rename('vk-slider.min.js'))
 		.pipe(gulp.dest('./inc/vk-blocks/build/'));
+	gulp.src('src/blocks/_pro/outer/enque-front.js')
+		.pipe(uglify())
+		.pipe(rename('vk-outer.min.js'))
+		.pipe(gulp.dest('./inc/vk-blocks/build/'));		
 	done();
 });
 
diff --git a/src/blocks/_pro/outer/GenerateBgImage.js b/src/blocks/_pro/outer/GenerateBgImage.js
index ae2aa6084..1f8408086 100644
--- a/src/blocks/_pro/outer/GenerateBgImage.js
+++ b/src/blocks/_pro/outer/GenerateBgImage.js
@@ -85,7 +85,7 @@ const GenerateBgImage = (props) => {
 	// ここからCSSの組み立て処理
 	const selectorCss = `.${prefix}-${clientId}`;
 	const bgColorCss = bgColorOutputDisable
-		? ''
+		? `opacity: ${opacity}`
 		: `background: linear-gradient(${bgColorWOpacity}, ${bgColorWOpacity})`;
 	const outputCss = [];
 
diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index d801a9f28..55e6b96fb 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -21,6 +21,7 @@ import { dispatch } from '@wordpress/data';
 import { componentDivider } from './component-divider';
 import GenerateBgImage from './GenerateBgImage';
 import { isHexColor } from '@vkblocks/utils/is-hex-color';
+import { colorSlugToColorCode } from '@vkblocks/utils/color-slug-to-color-code';
 
 export default function OuterEdit(props) {
 	const { attributes, setAttributes, clientId } = props;
@@ -168,7 +169,7 @@ export default function OuterEdit(props) {
 	if (!isHexColor(borderColor)) {
 		bgColorClasses.push('has-text-color');
 		bgColorClasses.push(`has-${borderColor}-color`);
-		borderColorCss = 'currentColor';
+		borderColorCss = colorSlugToColorCode(borderColor);
 	}
 
 	//Dividerエフェクトがない時のみ枠線を追
diff --git a/src/blocks/_pro/outer/enque-front.js b/src/blocks/_pro/outer/enque-front.js
new file mode 100644
index 000000000..f018d1d30
--- /dev/null
+++ b/src/blocks/_pro/outer/enque-front.js
@@ -0,0 +1,12 @@
+window.addEventListener('load', function () {
+
+    let outerList = document.querySelectorAll('.vk_outer.has-text-color');
+
+    outerList.forEach( el => {
+        const st = el.style.borderStyle;
+        el.style.borderStyle = 'solid';
+        el.style.borderColor = window.getComputedStyle(el, '').color; 
+        el.style.borderStyle = st;
+    });
+
+});
\ No newline at end of file
diff --git a/src/blocks/_pro/outer/index.php b/src/blocks/_pro/outer/index.php
index 8d3b6bc9c..49b7bec52 100644
--- a/src/blocks/_pro/outer/index.php
+++ b/src/blocks/_pro/outer/index.php
@@ -20,11 +20,21 @@ function vk_blocks_register_block_outer() {
 			VK_BLOCKS_VERSION
 		);
 	}
+	if ( ! is_admin() ) {
+		wp_register_script(
+			'vk-blocks/outer-script',
+			VK_BLOCKS_DIR_URL . 'inc/vk-blocks/build/vk-outer.min.js',
+			array(),
+			VK_BLOCKS_VERSION,
+			true
+		);
+	}
 
 	register_block_type(
 		__DIR__,
 		array(
 			'style'         => 'vk-blocks/outer',
+			'script'        => 'vk-blocks/outer-script',
 			'editor_style'  => 'vk-blocks-build-editor-css',
 			'editor_script' => 'vk-blocks-build-js',
 		)

From 37b00826884126b5f58dc5f2e479179e0cf6c2d8 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Wed, 2 Feb 2022 20:02:42 +0900
Subject: [PATCH 20/22] =?UTF-8?q?fix:=20=E5=A4=89=E6=95=B0=E5=90=8D?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/blocks/_pro/outer/enque-front.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/blocks/_pro/outer/enque-front.js b/src/blocks/_pro/outer/enque-front.js
index f018d1d30..9de31e46e 100644
--- a/src/blocks/_pro/outer/enque-front.js
+++ b/src/blocks/_pro/outer/enque-front.js
@@ -1,12 +1,10 @@
 window.addEventListener('load', function () {
+	const outerList = document.querySelectorAll('.vk_outer.has-text-color');
 
-    let outerList = document.querySelectorAll('.vk_outer.has-text-color');
-
-    outerList.forEach( el => {
-        const st = el.style.borderStyle;
-        el.style.borderStyle = 'solid';
-        el.style.borderColor = window.getComputedStyle(el, '').color; 
-        el.style.borderStyle = st;
-    });
-
-});
\ No newline at end of file
+	outerList.forEach((el) => {
+		const borderStyleBackup = el.style.borderStyle;
+		el.style.borderStyle = 'solid';
+		el.style.borderColor = window.getComputedStyle(el, '').color;
+		el.style.borderStyle = borderStyleBackup;
+	});
+});

From 716e50dbe79eafa45ccb192fcc46dda58c0fd304 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Thu, 10 Feb 2022 15:37:45 +0900
Subject: [PATCH 21/22] =?UTF-8?q?fix:=20Radius=E5=80=A4=E3=81=A7=E3=83=96?=
 =?UTF-8?q?=E3=83=AD=E3=83=83=E3=82=AF=E3=83=AA=E3=82=AB=E3=83=90=E3=83=AA?=
 =?UTF-8?q?=E3=83=BC=E3=81=8C=E5=87=BA=E3=82=8B=E3=82=B1=E3=83=BC=E3=82=B9?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/blocks/_pro/outer/save.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/blocks/_pro/outer/save.js b/src/blocks/_pro/outer/save.js
index 80460554d..a026b13fb 100644
--- a/src/blocks/_pro/outer/save.js
+++ b/src/blocks/_pro/outer/save.js
@@ -107,7 +107,7 @@ export default function save(props) {
 	) {
 		borderStyleProperty = {
 			border: `${borderWidth}px ${borderStyle} ${borderColorCss}`,
-			borderRadius: `${borderRadius < 0 ? 0 : borderRadius}px`,
+			borderRadius: `${borderRadius}px`,
 		};
 		//eslint-disable-next-line camelcase
 	} else if (upper_level !== 0 || lower_level !== 0) {

From c90b5cf2b6b47c49d69a864abc7308d425ba4833 Mon Sep 17 00:00:00 2001
From: Taichi Maruyama <maruyama@breadfish.jp>
Date: Tue, 15 Feb 2022 15:34:00 +0900
Subject: [PATCH 22/22] =?UTF-8?q?fix:=20=E8=83=8C=E6=99=AF=E9=80=8F?=
 =?UTF-8?q?=E9=81=8E=E3=81=8C=E5=8A=B9=E3=81=8B=E3=81=AA=E3=81=84=E4=B8=8D?=
 =?UTF-8?q?=E5=85=B7=E5=90=88=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 inc/vk-blocks/languages/vk-blocks-js.pot | 110 +++----
 inc/vk-blocks/languages/vk-blocks.pot    | 348 +++++------------------
 src/blocks/_pro/outer/GenerateBgImage.js |   7 +-
 src/blocks/_pro/outer/edit.js            |   5 +-
 src/blocks/_pro/outer/enque-front.js     |  26 ++
 src/blocks/_pro/outer/save.js            |   2 +-
 6 files changed, 160 insertions(+), 338 deletions(-)

diff --git a/inc/vk-blocks/languages/vk-blocks-js.pot b/inc/vk-blocks/languages/vk-blocks-js.pot
index fd331811e..5d5ff7daf 100644
--- a/inc/vk-blocks/languages/vk-blocks-js.pot
+++ b/inc/vk-blocks/languages/vk-blocks-js.pot
@@ -44,7 +44,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:303
+#: src/blocks/_pro/outer/edit.js:324
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:483
 #: src/blocks/button/edit.js:223
@@ -285,7 +285,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:139
-#: src/blocks/_pro/outer/edit.js:318
+#: src/blocks/_pro/outer/edit.js:339
 #: src/blocks/_pro/slider-item/edit.js:112
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -299,7 +299,7 @@ msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:177
-#: src/blocks/_pro/outer/edit.js:617
+#: src/blocks/_pro/outer/edit.js:628
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
@@ -307,7 +307,7 @@ msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:181
-#: src/blocks/_pro/outer/edit.js:621
+#: src/blocks/_pro/outer/edit.js:632
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
@@ -315,7 +315,7 @@ msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:185
-#: src/blocks/_pro/outer/edit.js:625
+#: src/blocks/_pro/outer/edit.js:636
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
@@ -323,7 +323,7 @@ msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:189
-#: src/blocks/_pro/outer/edit.js:629
+#: src/blocks/_pro/outer/edit.js:640
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -424,157 +424,157 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:182
+#: src/blocks/_pro/outer/edit.js:208
 #: src/blocks/_pro/slider-item/edit.js:159
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:187
+#: src/blocks/_pro/outer/edit.js:213
 #: src/blocks/_pro/slider-item/edit.js:163
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:188
+#: src/blocks/_pro/outer/edit.js:214
 #: src/blocks/_pro/slider-item/edit.js:165
 msgid ""
 "Color will overcome background image. If you want to display image, clear "
 "background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:201
+#: src/blocks/_pro/outer/edit.js:222
 #: src/blocks/_pro/slider-item/edit.js:173
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:215
+#: src/blocks/_pro/outer/edit.js:236
 #: src/blocks/_pro/slider-item/edit.js:208
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:231
+#: src/blocks/_pro/outer/edit.js:252
 #: src/blocks/_pro/slider-item/edit.js:224
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:241
+#: src/blocks/_pro/outer/edit.js:262
 #: src/blocks/_pro/slider-item/edit.js:234
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:251
+#: src/blocks/_pro/outer/edit.js:272
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:259
+#: src/blocks/_pro/outer/edit.js:280
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:263
+#: src/blocks/_pro/outer/edit.js:284
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:267
+#: src/blocks/_pro/outer/edit.js:288
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:274
+#: src/blocks/_pro/outer/edit.js:295
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:289
+#: src/blocks/_pro/outer/edit.js:310
 #: src/blocks/_pro/slider-item/edit.js:107
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:292
+#: src/blocks/_pro/outer/edit.js:313
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:313
+#: src/blocks/_pro/outer/edit.js:334
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:322
+#: src/blocks/_pro/outer/edit.js:343
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:329
+#: src/blocks/_pro/outer/edit.js:350
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:336
+#: src/blocks/_pro/outer/edit.js:357
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:350
+#: src/blocks/_pro/outer/edit.js:371
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:355
+#: src/blocks/_pro/outer/edit.js:376
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:362
+#: src/blocks/_pro/outer/edit.js:383
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:376
+#: src/blocks/_pro/outer/edit.js:397
 msgid ""
 "* If you select \"Do not use\" that, please set yourself it such as a "
 "spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:384
+#: src/blocks/_pro/outer/edit.js:405
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:389
+#: src/blocks/_pro/outer/edit.js:410
 #: src/blocks/balloon/edit.js:443
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:397
+#: src/blocks/_pro/outer/edit.js:418
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:401
+#: src/blocks/_pro/outer/edit.js:422
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:405
+#: src/blocks/_pro/outer/edit.js:426
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:409
+#: src/blocks/_pro/outer/edit.js:430
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:415
+#: src/blocks/_pro/outer/edit.js:436
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:440
+#: src/blocks/_pro/outer/edit.js:457
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:466
+#: src/blocks/_pro/outer/edit.js:479
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:471
+#: src/blocks/_pro/outer/edit.js:484
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:477
+#: src/blocks/_pro/outer/edit.js:490
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:485
+#: src/blocks/_pro/outer/edit.js:498
 #: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:104
 #: src/blocks/balloon/edit.js:543
@@ -582,7 +582,7 @@ msgstr ""
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:489
+#: src/blocks/_pro/outer/edit.js:502
 #: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:86
 #: src/blocks/pr-content/edit.js:143
@@ -590,70 +590,70 @@ msgstr ""
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:493
+#: src/blocks/_pro/outer/edit.js:506
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:497
+#: src/blocks/_pro/outer/edit.js:510
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:501
+#: src/blocks/_pro/outer/edit.js:514
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:505
+#: src/blocks/_pro/outer/edit.js:518
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:509
+#: src/blocks/_pro/outer/edit.js:522
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:513
+#: src/blocks/_pro/outer/edit.js:526
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:517
+#: src/blocks/_pro/outer/edit.js:530
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:531
+#: src/blocks/_pro/outer/edit.js:542
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:543
+#: src/blocks/_pro/outer/edit.js:554
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:559
+#: src/blocks/_pro/outer/edit.js:570
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:566
+#: src/blocks/_pro/outer/edit.js:577
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:581
+#: src/blocks/_pro/outer/edit.js:592
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:596
+#: src/blocks/_pro/outer/edit.js:607
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:607
+#: src/blocks/_pro/outer/edit.js:618
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
diff --git a/inc/vk-blocks/languages/vk-blocks.pot b/inc/vk-blocks/languages/vk-blocks.pot
index 7a583436c..2b34bb415 100644
--- a/inc/vk-blocks/languages/vk-blocks.pot
+++ b/inc/vk-blocks/languages/vk-blocks.pot
@@ -2,16 +2,16 @@
 # This file is distributed under the same license as the VK Blocks Pro plugin.
 msgid ""
 msgstr ""
-"Project-Id-Version: VK Blocks Pro 1.22.4\n"
+"Project-Id-Version: VK Blocks Pro 1.23.0\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/vk-blocks-pro\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2022-01-28T08:59:41+00:00\n"
+"POT-Creation-Date: 2022-02-10T08:16:18+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
-"X-Generator: WP-CLI 2.5.0-alpha-3f4c34b\n"
+"X-Generator: WP-CLI 2.5.0\n"
 "X-Domain: vk-blocks\n"
 
 #: src/blocks/_pro/accordion/index.js:22
@@ -55,7 +55,7 @@ msgid "Short"
 msgstr ""
 
 #: src/blocks/_pro/animation/edit.js:123
-#: src/blocks/_pro/outer/edit.js:303
+#: src/blocks/_pro/outer/edit.js:324
 #: src/blocks/_pro/slider/edit.js:193
 #: src/blocks/balloon/edit.js:483
 #: src/blocks/button/edit.js:223
@@ -292,7 +292,7 @@ msgid "Padding (Top)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:139
-#: src/blocks/_pro/outer/edit.js:318
+#: src/blocks/_pro/outer/edit.js:339
 #: src/blocks/_pro/slider-item/edit.js:112
 msgid "Padding (Left and Right)"
 msgstr ""
@@ -302,43 +302,39 @@ msgid "Padding (Bottom)"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:169
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:31
 #: inc/vk-blocks/admin/admin-margin.php:31
 msgid "Unit"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:177
-#: src/blocks/_pro/outer/edit.js:617
+#: src/blocks/_pro/outer/edit.js:628
 #: src/blocks/icon-outer/edit.js:151
 #: src/blocks/icon/edit.js:140
 #: src/components/advanced-unit-control/index.js:18
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:10
 #: inc/vk-blocks/admin/admin-margin.php:10
 msgid "px"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:181
-#: src/blocks/_pro/outer/edit.js:621
+#: src/blocks/_pro/outer/edit.js:632
 #: src/blocks/icon-outer/edit.js:155
 #: src/blocks/icon/edit.js:144
 #: src/components/advanced-unit-control/index.js:22
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:14
 #: inc/vk-blocks/admin/admin-margin.php:14
 msgid "em"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:185
-#: src/blocks/_pro/outer/edit.js:625
+#: src/blocks/_pro/outer/edit.js:636
 #: src/blocks/icon-outer/edit.js:159
 #: src/blocks/icon/edit.js:148
 #: src/components/advanced-unit-control/index.js:26
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:18
 #: inc/vk-blocks/admin/admin-margin.php:18
 msgid "rem"
 msgstr ""
 
 #: src/blocks/_pro/grid-column-item/edit.js:189
-#: src/blocks/_pro/outer/edit.js:629
+#: src/blocks/_pro/outer/edit.js:640
 #: src/blocks/icon-outer/edit.js:163
 #: src/blocks/icon/edit.js:152
 #: src/components/advanced-unit-control/index.js:30
@@ -439,153 +435,153 @@ msgstr ""
 msgid "Text"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:182
+#: src/blocks/_pro/outer/edit.js:208
 #: src/blocks/_pro/slider-item/edit.js:159
 msgid "Background Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:187
+#: src/blocks/_pro/outer/edit.js:213
 #: src/blocks/_pro/slider-item/edit.js:163
 #: src/blocks/pr-content/edit.js:66
 msgid "Color Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:188
+#: src/blocks/_pro/outer/edit.js:214
 #: src/blocks/_pro/slider-item/edit.js:165
 msgid "Color will overcome background image. If you want to display image, clear background color or set opacity 0."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:201
+#: src/blocks/_pro/outer/edit.js:222
 #: src/blocks/_pro/slider-item/edit.js:173
 msgid "Opacity Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:215
+#: src/blocks/_pro/outer/edit.js:236
 #: src/blocks/_pro/slider-item/edit.js:208
 msgid "Background Image PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:231
+#: src/blocks/_pro/outer/edit.js:252
 #: src/blocks/_pro/slider-item/edit.js:224
 msgid "Background Image Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:241
+#: src/blocks/_pro/outer/edit.js:262
 #: src/blocks/_pro/slider-item/edit.js:234
 msgid "Background Image Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:251
+#: src/blocks/_pro/outer/edit.js:272
 msgid "Background image Position"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:259
+#: src/blocks/_pro/outer/edit.js:280
 msgid "Repeat"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:263
+#: src/blocks/_pro/outer/edit.js:284
 msgid "Cover"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:267
+#: src/blocks/_pro/outer/edit.js:288
 msgid "Cover fixed (Not fixed on iPhone)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:274
+#: src/blocks/_pro/outer/edit.js:295
 msgid "Parallax (Non-guaranteed)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:289
+#: src/blocks/_pro/outer/edit.js:310
 #: src/blocks/_pro/slider-item/edit.js:107
 #: src/blocks/pr-content/edit.js:225
 msgid "Layout Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:292
+#: src/blocks/_pro/outer/edit.js:313
 #: src/blocks/_pro/slider/edit.js:184
 msgid "Width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:313
+#: src/blocks/_pro/outer/edit.js:334
 #: src/blocks/_pro/slider/edit.js:201
 msgid "Full Wide"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:322
+#: src/blocks/_pro/outer/edit.js:343
 msgid "Fit to the Content area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:329
+#: src/blocks/_pro/outer/edit.js:350
 msgid "Add padding to the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:336
+#: src/blocks/_pro/outer/edit.js:357
 msgid "Remove padding from the Outer area"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:350
+#: src/blocks/_pro/outer/edit.js:371
 msgid "Padding (Top and Bottom)"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:355
+#: src/blocks/_pro/outer/edit.js:376
 msgid "Use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:362
+#: src/blocks/_pro/outer/edit.js:383
 msgid "Do not use default padding"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:376
+#: src/blocks/_pro/outer/edit.js:397
 msgid "* If you select \"Do not use\" that, please set yourself it such as a spacer block."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:384
+#: src/blocks/_pro/outer/edit.js:405
 msgid "Divider Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:389
+#: src/blocks/_pro/outer/edit.js:410
 #: src/blocks/balloon/edit.js:443
 msgid "Type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:397
+#: src/blocks/_pro/outer/edit.js:418
 msgid "Tilt"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:401
+#: src/blocks/_pro/outer/edit.js:422
 msgid "Curve"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:405
+#: src/blocks/_pro/outer/edit.js:426
 msgid "Wave"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:409
+#: src/blocks/_pro/outer/edit.js:430
 #: src/extensions/core/list/style.js:111
 msgid "Triangle"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:415
+#: src/blocks/_pro/outer/edit.js:436
 msgid "Upper Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:440
+#: src/blocks/_pro/outer/edit.js:457
 msgid "Lower Divider Level"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:466
+#: src/blocks/_pro/outer/edit.js:479
 msgid "Border Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:471
+#: src/blocks/_pro/outer/edit.js:484
 msgid "Border will disappear when divider effect is applied."
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:477
+#: src/blocks/_pro/outer/edit.js:490
 msgid "Border type"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:485
+#: src/blocks/_pro/outer/edit.js:498
 #: src/blocks/_pro/step-item/edit.js:126
 #: src/blocks/_pro/timeline-item/edit.js:104
 #: src/blocks/balloon/edit.js:543
@@ -593,7 +589,7 @@ msgstr ""
 msgid "None"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:489
+#: src/blocks/_pro/outer/edit.js:502
 #: src/blocks/_pro/step-item/edit.js:104
 #: src/blocks/_pro/timeline-item/edit.js:86
 #: src/blocks/pr-content/edit.js:143
@@ -601,76 +597,73 @@ msgstr ""
 msgid "Solid"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:493
+#: src/blocks/_pro/outer/edit.js:506
 #: src/extensions/core/group/style.js:110
 msgid "Dotted"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:497
+#: src/blocks/_pro/outer/edit.js:510
 #: src/extensions/core/group/style.js:114
 msgid "Dashed"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:501
+#: src/blocks/_pro/outer/edit.js:514
 #: src/extensions/core/group/style.js:118
 msgid "Double"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:505
+#: src/blocks/_pro/outer/edit.js:518
 msgid "Groove"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:509
+#: src/blocks/_pro/outer/edit.js:522
 msgid "Ridge"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:513
+#: src/blocks/_pro/outer/edit.js:526
 msgid "Inset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:517
+#: src/blocks/_pro/outer/edit.js:530
 msgid "Outset"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:531
+#: src/blocks/_pro/outer/edit.js:542
 msgid "Border width"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:543
+#: src/blocks/_pro/outer/edit.js:554
 #: src/blocks/icon-outer/edit.js:180
 #: src/blocks/icon/edit.js:169
 msgid "Border radius"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:559
+#: src/blocks/_pro/outer/edit.js:570
 msgid "Container Inner Side Space Setting"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:566
+#: src/blocks/_pro/outer/edit.js:577
 #: src/blocks/_pro/slider/edit.js:238
 #: src/components/advanced-viewport-control/index.js:39
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:62
 #: inc/vk-blocks/admin/admin-margin.php:62
 msgid "Mobile"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:581
+#: src/blocks/_pro/outer/edit.js:592
 #: src/blocks/_pro/slider/edit.js:227
 #: src/components/advanced-viewport-control/index.js:31
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:61
 #: inc/vk-blocks/admin/admin-margin.php:61
 msgid "Tablet"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:596
+#: src/blocks/_pro/outer/edit.js:607
 #: src/blocks/_pro/slider/edit.js:216
 #: src/components/advanced-viewport-control/index.js:25
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:60
 #: inc/vk-blocks/admin/admin-margin.php:60
 msgid "PC"
 msgstr ""
 
-#: src/blocks/_pro/outer/edit.js:607
+#: src/blocks/_pro/outer/edit.js:618
 #: src/components/advanced-unit-control/index.js:12
 msgid "Unit Type"
 msgstr ""
@@ -911,9 +904,6 @@ msgstr ""
 #: src/blocks/button/edit.js:336
 #: src/blocks/icon/edit.js:256
 #: src/blocks/staff/edit.js:199
-#: dist/vk-blocks-pro/inc/term-color/package/class.term-color.php:41
-#: dist/vk-blocks-pro/inc/term-color/package/class.term-color.php:56
-#: dist/vk-blocks-pro/inc/term-color/package/class.term-color.php:130
 #: inc/term-color/package/class.term-color.php:41
 #: inc/term-color/package/class.term-color.php:56
 #: inc/term-color/package/class.term-color.php:130
@@ -1134,7 +1124,6 @@ msgstr ""
 #: src/blocks/border-box/edit.js:177
 #: src/blocks/icon-outer/edit.js:132
 #: src/blocks/icon/edit.js:121
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:57
 #: inc/vk-blocks/admin/admin-margin.php:57
 msgid "Margin"
 msgstr ""
@@ -1223,7 +1212,6 @@ msgstr ""
 
 #: src/blocks/button/edit.js:215
 #: src/blocks/spacer/edit.js:105
-#: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:31
 #: inc/vk-blocks/vk-blocks-functions.php:31
 msgid "Large"
 msgstr ""
@@ -1231,7 +1219,6 @@ msgstr ""
 #: src/blocks/button/edit.js:231
 #: src/blocks/spacer/edit.js:85
 #: src/extensions/common/inline-font-size/index.js:84
-#: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:23
 #: inc/vk-blocks/vk-blocks-functions.php:23
 msgid "Small"
 msgstr ""
@@ -1650,7 +1637,6 @@ msgid "Spacer Settings"
 msgstr ""
 
 #: src/blocks/spacer/edit.js:95
-#: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:27
 #: inc/vk-blocks/vk-blocks-functions.php:27
 msgid "Medium"
 msgstr ""
@@ -1725,7 +1711,6 @@ msgid "Card (Image Round)"
 msgstr ""
 
 #: src/components/column-layout-control/index.js:26
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:733
 #: inc/vk-components/package/class-vk-component-posts.php:733
 msgid "Card"
 msgstr ""
@@ -1743,7 +1728,6 @@ msgid "Card (Horizontal)"
 msgstr ""
 
 #: src/components/column-layout-control/index.js:42
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:749
 #: inc/vk-components/package/class-vk-component-posts.php:749
 msgid "Media"
 msgstr ""
@@ -2102,80 +2086,46 @@ msgstr ""
 msgid "https://vektor-inc.co.jp"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/admin-notices.php:28
 #: inc/admin-notices.php:28
 msgid "We've released VK Blocks Pro!"
 msgstr ""
 
 #. translators: 1: opening a tag, 2: closing a tag
-#: dist/vk-blocks-pro/inc/admin-notices.php:35
 #: inc/admin-notices.php:35
 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."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/admin-notices.php:39
-#: dist/vk-blocks-pro/inc/admin-notices.php:45
 #: inc/admin-notices.php:39
 #: inc/admin-notices.php:45
 msgid "https://www.vektor-inc.co.jp/service/wordpress-plugins/vk-blocks/"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/admin-notices.php:46
 #: inc/admin-notices.php:46
 msgid "See more"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/admin-notices.php:49
 #: inc/admin-notices.php:49
 msgid "Dismiss this notice"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:42
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:57
-msgid "Not recommended"
-msgstr ""
-
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:89
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:91
-msgid "Ex ) "
-msgstr ""
-
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:200
-msgid "Font Awesome"
-msgstr ""
-
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:223
-msgid "Font Awesome Version"
-msgstr ""
-
-#: dist/vk-blocks-pro/inc/font-awesome/package/class-vk-font-awesome-versions.php:226
-msgid "4.7 will be abolished in the near future."
-msgstr ""
-
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:72
 #: inc/tgm-plugin-activation/tgm-config.php:72
 msgid "Install Required Plugins"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:73
 #: inc/tgm-plugin-activation/tgm-config.php:73
 msgid "Install Plugins"
 msgstr ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:75
 #: inc/tgm-plugin-activation/tgm-config.php:75
 msgid "Installing Plugin: %s"
 msgstr ""
 
-#. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:76
 #: inc/tgm-plugin-activation/tgm-config.php:76
 msgid "Something went wrong with the plugin API."
 msgstr ""
 
 #. translators:
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:78
 #: inc/tgm-plugin-activation/tgm-config.php:78
 msgid "This plugin requires the following plugin: %1$s."
 msgid_plural "This plugin requires the following plugins: %1$s."
@@ -2183,7 +2133,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:84
 #: inc/tgm-plugin-activation/tgm-config.php:84
 msgid "This plugin recommends the following plugin: %1$s.<br>Many additional functions are available for free."
 msgid_plural "This plugin recommends the following plugins: %1$s.<br>Many additional functions are available for free."
@@ -2191,7 +2140,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:90
 #: inc/tgm-plugin-activation/tgm-config.php:90
 msgid "Sorry, but you do not have the correct permissions to install the %1$s plugin."
 msgid_plural "Sorry, but you do not have the correct permissions to install the %1$s plugins."
@@ -2199,7 +2147,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:96
 #: inc/tgm-plugin-activation/tgm-config.php:96
 msgid "The following plugin needs to be updated to its latest version to ensure maximum compatibility with this plugin: %1$s."
 msgid_plural "The following plugins need to be updated to their latest version to ensure maximum compatibility with this plugin: %1$s."
@@ -2207,7 +2154,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:102
 #: inc/tgm-plugin-activation/tgm-config.php:102
 msgid "There is an update available for: %1$s."
 msgid_plural "There are updates available for the following plugins: %1$s."
@@ -2215,7 +2161,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:108
 #: inc/tgm-plugin-activation/tgm-config.php:108
 msgid "Sorry, but you do not have the correct permissions to update the %1$s plugin."
 msgid_plural "Sorry, but you do not have the correct permissions to update the %1$s plugins."
@@ -2223,7 +2168,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:114
 #: inc/tgm-plugin-activation/tgm-config.php:114
 msgid "The following required plugin is currently inactive: %1$s."
 msgid_plural "The following required plugins are currently inactive: %1$s."
@@ -2231,7 +2175,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:120
 #: inc/tgm-plugin-activation/tgm-config.php:120
 msgid "The following recommended plugin is currently inactive: %1$s."
 msgid_plural "The following recommended plugins are currently inactive: %1$s."
@@ -2239,7 +2182,6 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:126
 #: inc/tgm-plugin-activation/tgm-config.php:126
 msgid "Sorry, but you do not have the correct permissions to activate the %1$s plugin."
 msgid_plural "Sorry, but you do not have the correct permissions to activate the %1$s plugins."
@@ -2247,830 +2189,684 @@ msgstr[0] ""
 msgstr[1] ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:132
 #: inc/tgm-plugin-activation/tgm-config.php:132
 msgid "Begin installing plugin"
 msgid_plural "Begin installing plugins"
 msgstr[0] ""
 msgstr[1] ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:137
 #: inc/tgm-plugin-activation/tgm-config.php:137
 msgid "Begin updating plugin"
 msgid_plural "Begin updating plugins"
 msgstr[0] ""
 msgstr[1] ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:142
 #: inc/tgm-plugin-activation/tgm-config.php:142
 msgid "Begin activating plugin"
 msgid_plural "Begin activating plugins"
 msgstr[0] ""
 msgstr[1] ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:147
 #: inc/tgm-plugin-activation/tgm-config.php:147
 msgid "Return to Required Plugins Installer"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:148
 #: inc/tgm-plugin-activation/tgm-config.php:148
 msgid "Plugin activated successfully."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:149
 #: inc/tgm-plugin-activation/tgm-config.php:149
 msgid "The following plugin was activated successfully:"
 msgstr ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:151
 #: inc/tgm-plugin-activation/tgm-config.php:151
 msgid "No action taken. Plugin %1$s was already active."
 msgstr ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:153
 #: inc/tgm-plugin-activation/tgm-config.php:153
 msgid "Plugin not activated. A higher version of %s is needed for this theme. Please update the plugin."
 msgstr ""
 
 #. translators: %s = plugin name.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:155
 #: inc/tgm-plugin-activation/tgm-config.php:155
 msgid "All plugins installed and activated successfully. %1$s"
 msgstr ""
 
 #. translators: %s = dashboard link.
-#: dist/vk-blocks-pro/inc/tgm-plugin-activation/tgm-config.php:157
 #: inc/tgm-plugin-activation/tgm-config.php:157
 msgid "Please contact the administrator of this site for help."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-admin/package/class-vk-admin.php:316
 #: inc/vk-admin/package/class-vk-admin.php:316
 msgid "Sorry, there is no post"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-admin/package/class-vk-admin.php:370
 #: inc/vk-admin/package/class-vk-admin.php:370
 msgid "Vektor WordPress Information"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:13
 #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:13
 msgid "Disable accordion"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:17
 #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:17
 msgid "Enable accordion and default open "
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:21
 #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:21
 msgid "Enable accordion and default close "
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-new-faq.php:29
 #: inc/vk-blocks-pro/admin-pro/admin-new-faq.php:29
 msgid "FAQ Block Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks-pro/admin-pro/admin-pro.php:22
 #: inc/vk-blocks-pro/admin-pro/admin-pro.php:22
 msgid "FAQ Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:11
 #: inc/vk-blocks/admin/admin-balloon.php:11
 msgid "Balloon Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:12
 #: inc/vk-blocks/admin/admin-balloon.php:12
 msgid "Balloon Border Width Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:22
 #: inc/vk-blocks/admin/admin-balloon.php:22
 msgid "Balloon Image Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:89
 #: inc/vk-blocks/admin/admin-balloon.php:89
 msgid "You can register frequently used icon images for speech bubble blocks."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:90
 #: inc/vk-blocks/admin/admin-balloon.php:90
 msgid "If you change image or name that please click Save Changes button."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:116
 #: inc/vk-blocks/admin/admin-balloon.php:116
 msgid "Select"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:119
 #: inc/vk-blocks/admin/admin-balloon.php:119
 msgid "Delete"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-balloon.php:124
 #: inc/vk-blocks/admin/admin-balloon.php:124
 msgid "Balloon Image Name"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:27
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:71
+#: inc/vk-blocks/admin/admin-load-separate.php:11
+#: inc/vk-blocks/admin/admin.php:73
+msgid "Load Separete Setting"
+msgstr ""
+
+#: inc/vk-blocks/admin/admin-load-separate.php:12
+msgid "Note that the order in which CSS/JS are loaded will change."
+msgstr ""
+
+#: inc/vk-blocks/admin/admin-load-separate.php:21
+msgid "Load Separete Option on"
+msgstr ""
+
 #: inc/vk-blocks/admin/admin-margin.php:27
 #: inc/vk-blocks/admin/admin.php:72
 msgid "Common Margin Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin-margin.php:28
 #: inc/vk-blocks/admin/admin-margin.php:28
 msgid "Please specify the size of the common margin used for responsive spacers, etc."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:47
 #: inc/vk-blocks/admin/admin.php:48
 msgid "Blocks setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:48
 #: inc/vk-blocks/admin/admin.php:49
 msgctxt "label in admin menu"
 msgid "Blocks"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:64
 #: inc/vk-blocks/admin/admin.php:65
 msgid "Blocks Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/admin/admin.php:70
 #: inc/vk-blocks/admin/admin.php:71
 msgid "Balloon Block Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/load-bootstrap.php:61
 #: inc/vk-blocks/load-bootstrap.php:61
 msgid "VK Blocks Bootstrap Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/load-bootstrap.php:81
 #: inc/vk-blocks/load-bootstrap.php:81
 msgid "Loading Bootstrap4"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/load-bootstrap.php:82
 #: inc/vk-blocks/load-bootstrap.php:82
 msgid "Check here to load Bootstrap4. If your theme or plugins loading Bootstrap4, uncheck here."
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/load-bootstrap.php:102
 #: inc/vk-blocks/load-bootstrap.php:102
 msgid "Setting"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/view/class-vk-blocks-postlist.php:187
 #: inc/vk-blocks/view/class-vk-blocks-postlist.php:219
 msgid "No Post is selected"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:212
 #: inc/vk-blocks/vk-blocks-functions.php:214
 msgid "Blocks"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-blocks/vk-blocks-functions.php:225
 #: inc/vk-blocks/vk-blocks-functions.php:227
 msgid "Blocks Layout"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:55
 #: inc/vk-components/package/class-vk-component-posts.php:55
 msgid "Read more"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:57
 #: inc/vk-components/package/class-vk-component-posts.php:57
 msgid "New!!"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:255
 #: inc/vk-components/package/class-vk-component-posts.php:255
 msgid "More"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:291
 #: inc/vk-components/package/class-vk-component-posts.php:291
 msgid "Posts navigation"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:292
 #: inc/vk-components/package/class-vk-component-posts.php:292
 msgid "Posts"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:294
 #: inc/vk-components/package/class-vk-component-posts.php:294
 msgid "Page"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:737
 #: inc/vk-components/package/class-vk-component-posts.php:737
 msgid "Card Noborder"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:741
 #: inc/vk-components/package/class-vk-component-posts.php:741
 msgid "Card Intext"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:745
 #: inc/vk-components/package/class-vk-component-posts.php:745
 msgid "Card Horizontal"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-components/package/class-vk-component-posts.php:753
 #: inc/vk-components/package/class-vk-component-posts.php:753
 msgctxt "post list type"
 msgid "Text 1 Column"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:47
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:47
 msgid "CSS Optimize ( Speed up ) Settings"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:66
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:66
 msgid "Tree shaking"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:87
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:87
 msgid "Tree shaking activation settings"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:91
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:91
 msgid "Output only the main CSS of the page inline"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:93
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:159
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:93
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:159
 msgid "Nothing to do"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:94
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:94
 msgid "Active Tree shaking (Recomend)"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:111
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:111
 msgid "Exclude class of Tree shaking"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:115
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:115
 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"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:132
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:132
 msgid "Preload CSS"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:153
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:153
 msgid "Preload CSS activation settings"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:156
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:156
 msgid "Preload css except for critical css"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:160
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:160
 msgid "Active Preload CSS (Recomend)"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:177
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:177
 msgid "Exclude class of Preload CSS"
 msgstr ""
 
-#: dist/vk-blocks-pro/inc/vk-css-optimize/package/class-vk-css-optimize.php:181
 #: inc/vk-css-optimize/package/class-vk-css-optimize.php:181
 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"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/page-content/index.php:152
-#: src/blocks/page-content/index.php:152
+#: src/blocks/page-content/index.php:118
 msgid "Edit this area"
 msgstr ""
 
-#: dist/vk-blocks-pro/vk-blocks.php:98
 #: vk-blocks.php:99
 msgid "Disabled Blocks module on VK All in One Expansion Unit. Because VK-Blocks Plugin running."
 msgstr ""
 
-#: inc/vk-blocks/admin/admin-load-separate.php:11
-#: inc/vk-blocks/admin/admin.php:73
-msgid "Load Separete Setting"
-msgstr ""
-
-#: inc/vk-blocks/admin/admin-load-separate.php:12
-msgid "Note that the order in which CSS/JS are loaded will change."
-msgstr ""
-
-#: inc/vk-blocks/admin/admin-load-separate.php:21
-msgid "Load Separete Option on"
-msgstr ""
-
-#: dist/vk-blocks-pro/src/blocks/alert/block.json
 #: src/blocks/alert/block.json
 msgctxt "block title"
 msgid "Alert"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/alert/block.json
 #: src/blocks/alert/block.json
 msgctxt "block description"
 msgid "A colored box with four statuses, including annotations and alerts."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/balloon/block.json
 #: src/blocks/balloon/block.json
 msgctxt "block title"
 msgid "Ballon"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/balloon/block.json
 #: src/blocks/balloon/block.json
 msgctxt "block description"
 msgid "These speech balloons are perfect for recreating conversations."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/border-box/block.json
 #: src/blocks/border-box/block.json
 msgctxt "block title"
 msgid "Border Box"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/border-box/block.json
 #: src/blocks/border-box/block.json
 msgctxt "block description"
 msgid "This is a border box where you can place headings to attract attention."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/button/block.json
 #: src/blocks/button/block.json
 msgctxt "block title"
 msgid "Button"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/button/block.json
 #: src/blocks/button/block.json
 msgctxt "block description"
 msgid "A button link that can display icons before and after."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq/block.json
 #: src/blocks/faq/block.json
 msgctxt "block title"
 msgid "Classic FAQ"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq/block.json
 #: src/blocks/faq/block.json
 msgctxt "block description"
 msgid "Displays a combination of questions and answers."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq2-a/block.json
 #: src/blocks/faq2-a/block.json
 msgctxt "block title"
 msgid "FAQ Answer"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq2-a/block.json
 #: src/blocks/faq2-a/block.json
 msgctxt "block description"
 msgid "Answer area where you can add blocks freely."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq2-q/block.json
 #: src/blocks/faq2-q/block.json
 msgctxt "block title"
 msgid "FAQ Question"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq2-q/block.json
 #: src/blocks/faq2-q/block.json
 msgctxt "block description"
 msgid "Question area where you can freely add blocks."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq2/block.json
 #: src/blocks/faq2/block.json
 msgctxt "block title"
 msgid "New FAQ"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/faq2/block.json
 #: src/blocks/faq2/block.json
 msgctxt "block description"
 msgid "It displays a combination of questions and answers. You can freely add blocks to the question area as well."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/flow/block.json
 #: src/blocks/flow/block.json
 msgctxt "block title"
 msgid "Flow"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/flow/block.json
 #: src/blocks/flow/block.json
 msgctxt "block description"
 msgid "Displays a sequential description in time series."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/heading/block.json
 #: src/blocks/heading/block.json
 msgctxt "block title"
 msgid "Heading"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/heading/block.json
 #: src/blocks/heading/block.json
 msgctxt "block description"
 msgid "This is a heading that allows you to set text size, subtext, icon, and margin."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/icon-outer/block.json
 #: src/blocks/icon-outer/block.json
 msgctxt "block title"
 msgid "Icon Outer"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/icon-outer/block.json
 #: src/blocks/icon-outer/block.json
 msgctxt "block description"
 msgid "Display the Font Awesome icons horizontally."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/icon/block.json
 #: src/blocks/icon/block.json
 msgctxt "block title"
 msgid "Icon"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/icon/block.json
 #: src/blocks/icon/block.json
 msgctxt "block description"
 msgid "Display icons with Font Awesome."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/page-content/block.json
 #: src/blocks/page-content/block.json
 msgctxt "block title"
 msgid "Page Content"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/page-content/block.json
 #: src/blocks/page-content/block.json
 msgctxt "block description"
 msgid "Displays the body content of the specified parent page."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/pr-blocks/block.json
 #: src/blocks/pr-blocks/block.json
 msgctxt "block title"
 msgid "PR Blocks"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/pr-blocks/block.json
 #: src/blocks/pr-blocks/block.json
 msgctxt "block description"
 msgid "This is a PR block where you can place images and icon."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/pr-content/block.json
 #: src/blocks/pr-content/block.json
 msgctxt "block title"
 msgid "PR Content"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/pr-content/block.json
 #: src/blocks/pr-content/block.json
 msgctxt "block description"
 msgid "This is PR content where you can place images, headlines, text, and buttons."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/spacer/block.json
 #: src/blocks/spacer/block.json
 msgctxt "block title"
 msgid "Responsive Spacer"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/spacer/block.json
 #: src/blocks/spacer/block.json
 msgctxt "block description"
 msgid "Use responsive spacers to get the margins right."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/staff/block.json
 #: src/blocks/staff/block.json
 msgctxt "block title"
 msgid "Staff"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/staff/block.json
 #: src/blocks/staff/block.json
 msgctxt "block description"
 msgid "Used for staff introduction, company introduction, school introduction, menu, etc."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/accordion-target/block.json
 #: src/blocks/_pro/accordion-target/block.json
 msgctxt "block title"
 msgid "Accordion Target"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/accordion-target/block.json
 #: src/blocks/_pro/accordion-target/block.json
 msgctxt "block description"
 msgid "This is the content area where you can add blocks freely."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/accordion-trigger/block.json
 #: src/blocks/_pro/accordion-trigger/block.json
 msgctxt "block title"
 msgid "Accordion Trigger"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/accordion-trigger/block.json
 #: src/blocks/_pro/accordion-trigger/block.json
 msgctxt "block description"
 msgid "This is the title area where you can freely add blocks."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/accordion/block.json
 #: src/blocks/_pro/accordion/block.json
 msgctxt "block title"
 msgid "Accordion"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/accordion/block.json
 #: src/blocks/_pro/accordion/block.json
 msgctxt "block description"
 msgid "Collapses and hides content when the content is long."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/animation/block.json
 #: src/blocks/_pro/animation/block.json
 msgctxt "block title"
 msgid "Animation"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/animation/block.json
 #: src/blocks/_pro/animation/block.json
 msgctxt "block description"
 msgid "Add animation to elements when scrolling the page."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/button-outer/block.json
 #: src/blocks/_pro/button-outer/block.json
 msgctxt "block title"
 msgid "Button Outer"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/button-outer/block.json
 #: src/blocks/_pro/button-outer/block.json
 msgctxt "block description"
 msgid "Display the VK Button block horizontally."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/card-item/block.json
 #: src/blocks/_pro/card-item/block.json
 msgctxt "block title"
 msgid "Card Item"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/card-item/block.json
 #: src/blocks/_pro/card-item/block.json
 msgctxt "block description"
 msgid "A single item in a card block."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/card/block.json
 #: src/blocks/_pro/card/block.json
 msgctxt "block title"
 msgid "Card"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/card/block.json
 #: src/blocks/_pro/card/block.json
 msgctxt "block description"
 msgid "A card where you can place images, headings, text, and links."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/child-page/block.json
 #: src/blocks/_pro/child-page/block.json
 msgctxt "block title"
 msgid "Child page list"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/child-page/block.json
 #: src/blocks/_pro/child-page/block.json
 msgctxt "block description"
 msgid "When a parent page is specified, a list of its child pages will be displayed."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/grid-column-item/block.json
 #: src/blocks/_pro/grid-column-item/block.json
 msgctxt "block title"
 msgid "Grid Column Item"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/grid-column-item/block.json
 #: src/blocks/_pro/grid-column-item/block.json
 msgctxt "block description"
 msgid "One item in a grit column block."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/grid-column/block.json
 #: src/blocks/_pro/grid-column/block.json
 msgctxt "block title"
 msgid "Grid Column"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/grid-column/block.json
 #: src/blocks/_pro/grid-column/block.json
 msgctxt "block description"
 msgid "Set the number of columns to be displayed for each screen size."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/icon-card-item/block.json
 #: src/blocks/_pro/icon-card-item/block.json
 msgctxt "block title"
 msgid "Icon Card Item"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/icon-card-item/block.json
 #: src/blocks/_pro/icon-card-item/block.json
 msgctxt "block description"
 msgid "This is one item in an icon card."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/icon-card/block.json
 #: src/blocks/_pro/icon-card/block.json
 msgctxt "block title"
 msgid "Icon Card"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/icon-card/block.json
 #: src/blocks/_pro/icon-card/block.json
 msgctxt "block description"
 msgid "Display card with icons, headings, text, and links."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/outer/block.json
 #: src/blocks/_pro/outer/block.json
 msgctxt "block title"
 msgid "Outer"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/outer/block.json
 #: src/blocks/_pro/outer/block.json
 msgctxt "block description"
 msgid "Set the background image, color, and border to show the layout and divisions."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/post-list/block.json
 #: src/blocks/_pro/post-list/block.json
 msgctxt "block title"
 msgid "Post list"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/post-list/block.json
 #: src/blocks/_pro/post-list/block.json
 msgctxt "block description"
 msgid "Displays the list of posts by setting the post type, classification, and number of posts to display."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/select-post-list-item/block.json
 #: src/blocks/_pro/select-post-list-item/block.json
 msgctxt "block title"
 msgid "Selected Post List Item"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/select-post-list-item/block.json
 #: src/blocks/_pro/select-post-list-item/block.json
 msgctxt "block description"
 msgid "A single item in the select post list."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/select-post-list/block.json
 #: src/blocks/_pro/select-post-list/block.json
 msgctxt "block title"
 msgid "Selected Post List"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/select-post-list/block.json
 #: src/blocks/_pro/select-post-list/block.json
 msgctxt "block description"
 msgid "Displays an arbitrarily specified page with the layout of the posting list."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/slider-item/block.json
 #: src/blocks/_pro/slider-item/block.json
 msgctxt "block title"
 msgid "Slider Item"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/slider-item/block.json
 #: src/blocks/_pro/slider-item/block.json
 msgctxt "block description"
 msgid "This is one item in the slider."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/slider/block.json
 #: src/blocks/_pro/slider/block.json
 msgctxt "block title"
 msgid "Slider"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/slider/block.json
 #: src/blocks/_pro/slider/block.json
 msgctxt "block description"
 msgid "This slider allows you to place various items.Slider is do not move in edit screen."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/step-item/block.json
 #: src/blocks/_pro/step-item/block.json
 msgctxt "block title"
 msgid "Step Item"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/step-item/block.json
 #: src/blocks/_pro/step-item/block.json
 msgctxt "block description"
 msgid "This element sets the icon, color, and style of the step mark."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/step/block.json
 #: src/blocks/_pro/step/block.json
 msgctxt "block title"
 msgid "Step"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/step/block.json
 #: src/blocks/_pro/step/block.json
 msgctxt "block description"
 msgid "Set and display step marks, which are useful when explaining the order."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/table-of-contents-new/block.json
 #: src/blocks/_pro/table-of-contents-new/block.json
 msgctxt "block title"
 msgid "Table of Contents"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/table-of-contents-new/block.json
 #: src/blocks/_pro/table-of-contents-new/block.json
 msgctxt "block description"
 msgid "This is a table of contents that is automatically generated according to the headings when added."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/timeline-item/block.json
 #: src/blocks/_pro/timeline-item/block.json
 msgctxt "block title"
 msgid "Timeline Item"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/timeline-item/block.json
 #: src/blocks/_pro/timeline-item/block.json
 msgctxt "block description"
 msgid "This element sets the label, color, and style of the timeline."
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/timeline/block.json
 #: src/blocks/_pro/timeline/block.json
 msgctxt "block title"
 msgid "Timeline"
 msgstr ""
 
-#: dist/vk-blocks-pro/src/blocks/_pro/timeline/block.json
 #: src/blocks/_pro/timeline/block.json
 msgctxt "block description"
 msgid "Displays a simple schedule and other information that is useful for explaining the order."
diff --git a/src/blocks/_pro/outer/GenerateBgImage.js b/src/blocks/_pro/outer/GenerateBgImage.js
index 1f8408086..0424f6707 100644
--- a/src/blocks/_pro/outer/GenerateBgImage.js
+++ b/src/blocks/_pro/outer/GenerateBgImage.js
@@ -102,10 +102,13 @@ const GenerateBgImage = (props) => {
 		// 背景が指定されているときのみ url出力
 		let bgUrlCss = '';
 		if (bg.url) {
-			bgUrlCss = `url(${bg.url});`;
+			if (bgColorOutputDisable) {
+				bgUrlCss = 'background: ';
+			}
+			bgUrlCss += `url(${bg.url});`;
 		}
 
-		let separation = bgUrlCss ? ', ' : ';';
+		let separation = bgUrlCss && !bgColorOutputDisable ? ', ' : ';';
 
 		if ('' === bgColorCss && !bg.url) {
 			separation = '';
diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js
index 55e6b96fb..5b19b0a6e 100644
--- a/src/blocks/_pro/outer/edit.js
+++ b/src/blocks/_pro/outer/edit.js
@@ -159,11 +159,9 @@ export default function OuterEdit(props) {
 	const bgColorClasses = [];
 	let borderColorCss = borderColor;
 
-	let bgColorOutputDisable = false;
 	if (!isHexColor(bgColor)) {
-		bgColorClasses.push('has-background');
+		bgColorClasses.push('has-background-color');
 		bgColorClasses.push(`has-${bgColor}-background-color`);
-		bgColorOutputDisable = true;
 	}
 
 	if (!isHexColor(borderColor)) {
@@ -647,7 +645,6 @@ export default function OuterEdit(props) {
 				<GenerateBgImage
 					prefix={'vkb-outer'}
 					clientId={clientId}
-					bgColorOutputDisable={bgColorOutputDisable}
 					{...props}
 				/>
 				<div>
diff --git a/src/blocks/_pro/outer/enque-front.js b/src/blocks/_pro/outer/enque-front.js
index 9de31e46e..9b690e567 100644
--- a/src/blocks/_pro/outer/enque-front.js
+++ b/src/blocks/_pro/outer/enque-front.js
@@ -7,4 +7,30 @@ window.addEventListener('load', function () {
 		el.style.borderColor = window.getComputedStyle(el, '').color;
 		el.style.borderStyle = borderStyleBackup;
 	});
+
+	const outerList2 = document.querySelectorAll(
+		'.vk_outer.has-background-color'
+	);
+	outerList2.forEach((el) => {
+		const cssStyleDeclaration = window.getComputedStyle(el);
+		const opacity = cssStyleDeclaration.getPropertyValue('opacity');
+		let color = cssStyleDeclaration.getPropertyValue('background-color');
+		const url = cssStyleDeclaration
+			.getPropertyValue('background-image')
+			.replace(/^url|[\(\)]/g, '');
+		color = color.replace(/rgb|\(|\)/g, '');
+		color =
+			'linear-gradient(rgba(' +
+			color +
+			', ' +
+			opacity +
+			'),rgba(' +
+			color +
+			', ' +
+			opacity +
+			'))';
+		color += ', url(' + url + ')';
+		el.style.opacity = 'initial';
+		el.style.background = color;
+	});
 });
diff --git a/src/blocks/_pro/outer/save.js b/src/blocks/_pro/outer/save.js
index a026b13fb..d116f0b60 100644
--- a/src/blocks/_pro/outer/save.js
+++ b/src/blocks/_pro/outer/save.js
@@ -86,7 +86,7 @@ export default function save(props) {
 	let bgColorOutputDisable = false;
 	if (!isHexColor(bgColor)) {
 		bgColorOutputDisable = true;
-		bgColorClasses.push('has-background');
+		bgColorClasses.push('has-background-color');
 		bgColorClasses.push(`has-${bgColor}-background-color`);
 	}