Gutenberg Blocks and Template Library by Otter - Version 1.1.0

Version Description

Download this release

Release Info

Developer themeisle
Plugin Icon wp plugin Gutenberg Blocks and Template Library by Otter
Version 1.1.0
Comparing to
See all releases

Code changes from version 1.0.4 to 1.1.0

Files changed (166) hide show
  1. CHANGELOG.md +7 -0
  2. class-otter-blocks.php +2 -2
  3. otter-blocks.php +3 -3
  4. readme.md +23 -26
  5. readme.txt +23 -26
  6. screenshot-1.png +0 -0
  7. screenshot-2.png +0 -0
  8. screenshot-3.png +0 -0
  9. screenshot-4.png +0 -0
  10. screenshot-5.png +0 -0
  11. vendor/autoload.php +1 -1
  12. vendor/codeinwp/gutenberg-blocks/blocks/about-author/index.js +7 -3
  13. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/advanced-column.js +1559 -0
  14. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/advanced-columns.js +3393 -0
  15. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/background-control/editor.scss +39 -0
  16. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/background-control/index.js +80 -0
  17. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/class-advanced-columns-server.php +223 -0
  18. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/editor.scss +694 -0
  19. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/inboarding/editor.scss +391 -0
  20. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/inboarding/index.js +201 -0
  21. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/inboarding/library.js +323 -0
  22. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/index.js +7 -0
  23. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/layout-control/editor.scss +79 -0
  24. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/layout-control/index.js +446 -0
  25. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/separators/editor.scss +22 -0
  26. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/separators/index.js +172 -0
  27. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/separators/style.scss +22 -0
  28. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/style.scss +456 -0
  29. vendor/codeinwp/gutenberg-blocks/blocks/advanced-heading/editor.scss +38 -0
  30. vendor/codeinwp/gutenberg-blocks/blocks/advanced-heading/index.js +1241 -0
  31. vendor/codeinwp/gutenberg-blocks/blocks/advanced-heading/registerHeadingHighlight.js +49 -0
  32. vendor/codeinwp/gutenberg-blocks/blocks/advanced-heading/style.scss +0 -0
  33. vendor/codeinwp/gutenberg-blocks/blocks/button-group/editor.scss +151 -0
  34. vendor/codeinwp/gutenberg-blocks/blocks/button-group/index.js +972 -0
  35. vendor/codeinwp/gutenberg-blocks/blocks/button-group/style.scss +27 -0
  36. vendor/codeinwp/gutenberg-blocks/blocks/{accordion-box → deprecated/accordion-box}/accordion-area.js +4 -0
  37. vendor/codeinwp/gutenberg-blocks/blocks/{accordion-box → deprecated/accordion-box}/accordion-block.js +4 -0
  38. vendor/codeinwp/gutenberg-blocks/blocks/{accordion-box → deprecated/accordion-box}/editor.scss +0 -0
  39. vendor/codeinwp/gutenberg-blocks/blocks/{accordion-box → deprecated/accordion-box}/index.js +0 -0
  40. vendor/codeinwp/gutenberg-blocks/blocks/{accordion-box → deprecated/accordion-box}/style.scss +0 -0
  41. vendor/codeinwp/gutenberg-blocks/blocks/{chart → deprecated/chart}/Editor.js +0 -0
  42. vendor/codeinwp/gutenberg-blocks/blocks/{chart → deprecated/chart}/class-chart-pie-block.php +0 -0
  43. vendor/codeinwp/gutenberg-blocks/blocks/{chart → deprecated/chart}/editor.scss +0 -0
  44. vendor/codeinwp/gutenberg-blocks/blocks/{chart → deprecated/chart}/index.js +4 -0
  45. vendor/codeinwp/gutenberg-blocks/blocks/deprecated/index.js +10 -0
  46. vendor/codeinwp/gutenberg-blocks/blocks/{notice → deprecated/notice}/editor.scss +0 -0
  47. vendor/codeinwp/gutenberg-blocks/blocks/{notice → deprecated/notice}/index.js +2 -1
  48. vendor/codeinwp/gutenberg-blocks/blocks/{notice → deprecated/notice}/style.scss +0 -0
  49. vendor/codeinwp/gutenberg-blocks/blocks/{pricing-table → deprecated/pricing-table}/editor.scss +0 -0
  50. vendor/codeinwp/gutenberg-blocks/blocks/{pricing-table → deprecated/pricing-table}/index.js +0 -0
  51. vendor/codeinwp/gutenberg-blocks/blocks/{pricing-table → deprecated/pricing-table}/pricing-block.js +4 -0
  52. vendor/codeinwp/gutenberg-blocks/blocks/{pricing-table → deprecated/pricing-table}/pricing-table.js +2 -1
  53. vendor/codeinwp/gutenberg-blocks/blocks/{pricing-table → deprecated/pricing-table}/style.scss +0 -0
  54. vendor/codeinwp/gutenberg-blocks/blocks/{services → deprecated/services}/editor.scss +0 -0
  55. vendor/codeinwp/gutenberg-blocks/blocks/{services → deprecated/services}/index.js +0 -0
  56. vendor/codeinwp/gutenberg-blocks/blocks/{services → deprecated/services}/service-block.js +5 -1
  57. vendor/codeinwp/gutenberg-blocks/blocks/{services → deprecated/services}/services-block.js +2 -1
  58. vendor/codeinwp/gutenberg-blocks/blocks/{services → deprecated/services}/style.scss +0 -0
  59. vendor/codeinwp/gutenberg-blocks/blocks/{testimonials → deprecated/testimonials}/editor.scss +0 -0
  60. vendor/codeinwp/gutenberg-blocks/blocks/{testimonials → deprecated/testimonials}/index.js +0 -0
  61. vendor/codeinwp/gutenberg-blocks/blocks/{testimonials → deprecated/testimonials}/style.scss +0 -0
  62. vendor/codeinwp/gutenberg-blocks/blocks/{testimonials → deprecated/testimonials}/testimonials-area.js +2 -1
  63. vendor/codeinwp/gutenberg-blocks/blocks/{testimonials → deprecated/testimonials}/testimonials-block.js +4 -0
  64. vendor/codeinwp/gutenberg-blocks/blocks/{tweetable → deprecated/tweetable}/editor.scss +0 -0
  65. vendor/codeinwp/gutenberg-blocks/blocks/{tweetable → deprecated/tweetable}/index.js +9 -0
  66. vendor/codeinwp/gutenberg-blocks/blocks/{tweetable → deprecated/tweetable}/style.scss +0 -0
  67. vendor/codeinwp/gutenberg-blocks/blocks/font-awesome-icons/editor.scss +0 -113
  68. vendor/codeinwp/gutenberg-blocks/blocks/font-awesome-icons/index.js +34 -122
  69. vendor/codeinwp/gutenberg-blocks/blocks/google-map/class-google-map-block.php +0 -15
  70. vendor/codeinwp/gutenberg-blocks/blocks/google-map/index.js +3 -2
  71. vendor/codeinwp/gutenberg-blocks/blocks/plugin-card/index.js +26 -32
  72. vendor/codeinwp/gutenberg-blocks/blocks/post-grid/class-posts-grid-block.php +1 -1
  73. vendor/codeinwp/gutenberg-blocks/blocks/post-grid/index.js +10 -33
  74. vendor/codeinwp/gutenberg-blocks/blocks/sharing-icons/class-sharing-icons-block.php +10 -9
  75. vendor/codeinwp/gutenberg-blocks/blocks/sharing-icons/icons.js +52 -51
  76. vendor/codeinwp/gutenberg-blocks/blocks/sharing-icons/index.js +3 -2
  77. vendor/codeinwp/gutenberg-blocks/blocks/sharing-icons/social_list.js +0 -1
  78. vendor/codeinwp/gutenberg-blocks/blocks/structural/index.js +6 -0
  79. vendor/codeinwp/gutenberg-blocks/blocks/structural/pricing/index.js +120 -0
  80. vendor/codeinwp/gutenberg-blocks/blocks/structural/service/index.js +94 -0
  81. vendor/codeinwp/gutenberg-blocks/blocks/structural/testimonials/index.js +77 -0
  82. vendor/codeinwp/gutenberg-blocks/build/block.js +1 -1
  83. vendor/codeinwp/gutenberg-blocks/build/edit-blocks.css +34 -10
  84. vendor/codeinwp/gutenberg-blocks/build/style.css +14 -7
  85. vendor/codeinwp/gutenberg-blocks/build/vendor.js +8 -8
  86. vendor/codeinwp/gutenberg-blocks/class-gutenberg-blocks.php +645 -8
  87. vendor/codeinwp/gutenberg-blocks/components/control-panel-control/editor.scss +21 -0
  88. vendor/codeinwp/gutenberg-blocks/components/control-panel-control/index.js +57 -0
  89. vendor/codeinwp/gutenberg-blocks/components/google-fonts-control/editor.scss +58 -0
  90. vendor/codeinwp/gutenberg-blocks/components/google-fonts-control/index.js +207 -0
  91. vendor/codeinwp/gutenberg-blocks/{blocks/font-awesome-icons → components/icon-picker-control}/class-font-awesome-icons-server.php +0 -0
  92. vendor/codeinwp/gutenberg-blocks/components/icon-picker-control/editor.scss +112 -0
  93. vendor/codeinwp/gutenberg-blocks/{blocks/font-awesome-icons → components/icon-picker-control}/icons.json +0 -0
  94. vendor/codeinwp/gutenberg-blocks/components/icon-picker-control/index.js +137 -0
  95. vendor/codeinwp/gutenberg-blocks/components/responsive-control/editor.scss +53 -0
  96. vendor/codeinwp/gutenberg-blocks/components/responsive-control/index.js +109 -0
  97. vendor/codeinwp/gutenberg-blocks/components/size-control/editor.scss +60 -0
  98. vendor/codeinwp/gutenberg-blocks/components/size-control/index.js +167 -0
  99. vendor/codeinwp/gutenberg-blocks/composer.json +1 -1
  100. vendor/codeinwp/gutenberg-blocks/package.json +5 -2
  101. vendor/codeinwp/gutenberg-blocks/utils/helper-functions.js +29 -0
  102. vendor/codeinwp/gutenberg-blocks/utils/icons.js +155 -0
  103. vendor/codeinwp/gutenberg-blocks/webpack.config.js +4 -1
  104. vendor/codeinwp/themeisle-sdk/CHANGELOG.md +28 -0
  105. vendor/codeinwp/themeisle-sdk/Gruntfile.js +27 -0
  106. vendor/codeinwp/themeisle-sdk/README.md +32 -0
  107. vendor/codeinwp/themeisle-sdk/bin/install-wp-tests.sh +130 -0
  108. vendor/codeinwp/themeisle-sdk/bin/run-unit-tests.sh +7 -0
  109. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-endpoints.php +0 -312
  110. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-feedback-deactivate.php +0 -556
  111. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-feedback-factory.php +0 -50
  112. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-feedback-review.php +0 -209
  113. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-feedback-translate.php +0 -983
  114. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-feedback.php +0 -90
  115. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-licenser.php +0 -686
  116. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-loader.php +0 -96
  117. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-logger.php +0 -227
  118. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-notification-manager.php +0 -105
  119. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-product.php +0 -635
  120. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-rollback.php +0 -223
  121. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-widget-dashboard-blog.php +0 -412
  122. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-widget.php +0 -50
  123. vendor/codeinwp/themeisle-sdk/class-themeisle-sdk-widgets-factory.php +0 -37
  124. vendor/codeinwp/themeisle-sdk/composer.json +11 -5
  125. vendor/codeinwp/themeisle-sdk/composer.lock +180 -0
  126. vendor/codeinwp/themeisle-sdk/docker-compose.local.yml +27 -0
  127. vendor/codeinwp/themeisle-sdk/index.php +2 -4
  128. vendor/codeinwp/themeisle-sdk/load.php +17 -3
  129. vendor/codeinwp/themeisle-sdk/package-lock.json +7312 -0
  130. vendor/codeinwp/themeisle-sdk/package.json +15 -0
  131. vendor/codeinwp/themeisle-sdk/phpcs.xml +50 -0
  132. vendor/codeinwp/themeisle-sdk/phpunit.xml +20 -0
  133. vendor/codeinwp/themeisle-sdk/src/Common/Abstract_module.php +66 -0
  134. vendor/codeinwp/themeisle-sdk/src/Common/Module_factory.php +108 -0
  135. vendor/codeinwp/themeisle-sdk/src/Loader.php +117 -0
  136. vendor/codeinwp/themeisle-sdk/src/Modules/Dashboard_widget.php +453 -0
  137. vendor/codeinwp/themeisle-sdk/src/Modules/Endpoint.php +358 -0
  138. vendor/codeinwp/themeisle-sdk/src/Modules/Licenser.php +716 -0
  139. vendor/codeinwp/themeisle-sdk/src/Modules/Logger.php +176 -0
  140. vendor/codeinwp/themeisle-sdk/src/Modules/Notification.php +456 -0
  141. vendor/codeinwp/themeisle-sdk/src/Modules/Review.php +117 -0
  142. vendor/codeinwp/themeisle-sdk/src/Modules/Rollback.php +371 -0
  143. vendor/codeinwp/themeisle-sdk/src/Modules/Translate.php +918 -0
  144. vendor/codeinwp/themeisle-sdk/src/Modules/Uninstall_feedback.php +729 -0
  145. vendor/codeinwp/themeisle-sdk/src/Product.php +383 -0
  146. vendor/codeinwp/themeisle-sdk/start.php +31 -21
  147. vendor/codeinwp/themeisle-sdk/tests/bootstrap.php +33 -0
  148. vendor/codeinwp/themeisle-sdk/tests/dashboard-widget-test.php +59 -0
  149. vendor/codeinwp/themeisle-sdk/tests/endpoint-test.php +79 -0
  150. vendor/codeinwp/themeisle-sdk/tests/licenser-test.php +79 -0
  151. vendor/codeinwp/themeisle-sdk/tests/loader-test.php +47 -0
  152. vendor/codeinwp/themeisle-sdk/tests/loading-test.php +52 -0
  153. vendor/codeinwp/themeisle-sdk/tests/logger-test.php +67 -0
  154. vendor/codeinwp/themeisle-sdk/tests/notification-test.php +111 -0
  155. vendor/codeinwp/themeisle-sdk/tests/old/loading-test.php +19 -0
  156. vendor/codeinwp/themeisle-sdk/tests/product-test.php +49 -0
  157. vendor/codeinwp/themeisle-sdk/tests/review-test.php +67 -0
  158. vendor/codeinwp/themeisle-sdk/tests/rollback-test.php +114 -0
  159. vendor/codeinwp/themeisle-sdk/tests/sample_products/sample_plugin/plugin_file.php +13 -0
  160. vendor/codeinwp/themeisle-sdk/tests/sample_products/sample_theme/style.css +10 -0
  161. vendor/codeinwp/themeisle-sdk/tests/sample_products/sample_theme_external/style.css +10 -0
  162. vendor/codeinwp/themeisle-sdk/tests/translate-test.php +83 -0
  163. vendor/codeinwp/themeisle-sdk/tests/uninstall-feedback-test.php +130 -0
  164. vendor/composer/autoload_files.php +0 -1
  165. vendor/composer/autoload_real.php +5 -5
  166. vendor/composer/installed.json +16 -16
CHANGELOG.md CHANGED
@@ -1,4 +1,11 @@
1
2
### v1.0.4 - 2018-12-07
3
**Changes:**
4
* - Fixed dependencies issue
1
2
+ ### v1.1.0 - 2019-01-18
3
+ **Changes:**
4
+ * Added Section Block, with Template Library
5
+ * Added Advanced Heading Block
6
+ * Added Button Group Block
7
+ * Deprecated Notice, Click to Tweet, Chart, Accordion, blocks
8
+
9
### v1.0.4 - 2018-12-07
10
**Changes:**
11
* - Fixed dependencies issue
class-otter-blocks.php CHANGED
@@ -21,8 +21,8 @@ class Otter_Blocks {
21
* @access public
22
*/
23
public function __construct() {
24
- $this->name = __( 'Otter Blocks', 'otter-blocks' );
25
- $this->description = __( 'A set of awesome Gutenberg Blocks!', 'otter-blocks' );
26
}
27
28
/**
21
* @access public
22
*/
23
public function __construct() {
24
+ $this->name = __( 'Otter', 'otter-blocks' );
25
+ $this->description = __( 'Blocks for Gutenberg', 'otter-blocks' );
26
}
27
28
/**
otter-blocks.php CHANGED
@@ -1,9 +1,9 @@
1
<?php
2
/**
3
- * Plugin Name: Otter Blocks - Awesome Gutenberg Blocks
4
* Plugin URI: https://themeisle.com/plugins/otter-blocks
5
- * Description: Create beautiful and attracting posts, pages, and landing pages with Otter Blocks. Otter Blocks comes with dozens of Gutenberg blocks that are all you need to build beautiful pages.
6
- * Version: 1.0.4
7
* Author: ThemeIsle
8
* Author URI: https://themeisle.com
9
* License: GPL-2.0+
1
<?php
2
/**
3
+ * Plugin Name: Otter: Blocks for Gutenberg
4
* Plugin URI: https://themeisle.com/plugins/otter-blocks
5
+ * Description: Create beautiful and attracting posts, pages, and landing pages with Otter: Blocks for Gutenberg. Otter comes with dozens of Gutenberg blocks that are all you need to build beautiful pages.
6
+ * Version: 1.1.0
7
* Author: ThemeIsle
8
* Author URI: https://themeisle.com
9
* License: GPL-2.0+
readme.md CHANGED
@@ -1,6 +1,6 @@
1
- # Otter Blocks - Awesome Gutenberg Blocks #
2
**Contributors:** [themeisle](https://profiles.wordpress.org/themeisle), [hardeepasrani](https://profiles.wordpress.org/hardeepasrani)
3
- **Tags:** gutenberg, block, services block, pricing block, testimonials block, post grid block, google map block, font awesome block, sharing icons block, about author block, accodion block, pie chart block, notice block, tweet block
4
**Requires at least:** 4.9
5
**Tested up to:** 5.0
6
**Requires PHP:** 5.4
@@ -8,41 +8,38 @@
8
**License:** GPLv3
9
**License URI:** https://www.gnu.org/licenses/gpl-3.0.en.html
10
11
- Create beautiful and attracting posts, pages, and landing pages with Otter Blocks. Otter Blocks comes with dozens of Gutenberg blocks that are all you need to build beautiful pages.
12
13
## Description ##
14
15
- Create beautiful and attracting posts, pages, and landing pages with Otter Blocks. Otter Blocks comes with dozens of Gutenberg blocks that are all you need to build beautiful pages.
16
17
- See what you can do with Otter Blocks: [https://demo.themeisle.com/otter-blocks/](https://demo.themeisle.com/otter-blocks/)
18
19
It has:
20
21
- - Our Services Block
22
- Pricing Block
23
- - Testimonials Block
24
- Post Grid Block
25
- - Plugin Card Block
26
- - Google Map Block
27
- - Font Awesome Icon Block
28
- Sharing Icons Block
29
- - About Author Block
30
- - Accordion Block
31
- - Pie Chart Block
32
- - Notice Block
33
- - Click to Tweet Block
34
-
35
- ## Installation ##
36
- Activating this plugin is just like any other plugin. If you’ve uploaded the plugin package to your server already, skip to step 5 below:
37
-
38
- 1. Install using the WordPress built-in Plugin installer, or Extract the zip file and drop the contents in the wp-content/plugins/ directory of your WordPress installation.
39
- 2. Activate the plugin through the ‘Plugins’ menu in WordPress.
40
- 3. Go to Gutenberg editor and play around with the block.
41
42
## Screenshots ##
43
44
1. Otter Blocks
45
- 2. Pricing Block
46
- 3. Service Block
47
- 4. Pie Chart Block
48
- 5. Plugin Card Block
1
+ # Otter: Blocks for Gutenberg #
2
**Contributors:** [themeisle](https://profiles.wordpress.org/themeisle), [hardeepasrani](https://profiles.wordpress.org/hardeepasrani)
3
+ **Tags:** gutenberg, block, services block, pricing block, testimonials block, post grid block, google map block, font awesome block, sharing icons block, about author block, columns block, advanced columns, section, columds, row, layout
4
**Requires at least:** 4.9
5
**Tested up to:** 5.0
6
**Requires PHP:** 5.4
8
**License:** GPLv3
9
**License URI:** https://www.gnu.org/licenses/gpl-3.0.en.html
10
11
+ **Create beautiful and attracting posts, pages, and landing pages with Otter:** Blocks for Gutenberg. Otter comes with dozens of Gutenberg blocks that are all you need to build beautiful pages in Gutenberg.
12
13
## Description ##
14
15
+ Otter: Blocks for Gutenberg is a lightweight WordPress plugin that brings extra Gutenberg blocks to your site. So if you want to create complex pages and posts optimized for e-commerce, business, social media, blogs - you name it -comes with dozens of Gutenberg blocks that are all you need to build beautiful pages.
16
17
+ See what you can do with Otter:
18
+
19
+ https://www.youtube.com/watch?v=uLNL1WGnzWo
20
+
21
+ A feature that is worth mentioning is the Section Block that allows you to build columns and various layouts in Gutenberg. Moreover, aside from the Gutenberg blocks, the plugin provides a beautiful library of pre-built Gutenberg-compatible templates that you can simply import via one click. The templates have block-friendly layouts that can be customized with no effort.
22
+
23
+ Every block can be customized in a few seconds, as they come with an easy and intuitive user
24
25
It has:
26
27
+ - Section Block
28
+ - Advanced Heading Block
29
+ - Button Group
30
+ - Service Block
31
- Pricing Block
32
+ - Testimonial Block
33
+ - Google Maps Block
34
+ - About Author Block
35
- Post Grid Block
36
+ - Font Awesome Block
37
- Sharing Icons Block
38
+ - Plugin Card Block
39
40
## Screenshots ##
41
42
1. Otter Blocks
43
+ 2. Section Block
44
+ 3. Template Library
45
+ 4. Pre-built Section
readme.txt CHANGED
@@ -1,6 +1,6 @@
1
- === Otter Blocks - Awesome Gutenberg Blocks ===
2
Contributors: themeisle, hardeepasrani
3
- Tags: gutenberg, block, services block, pricing block, testimonials block, post grid block, google map block, font awesome block, sharing icons block, about author block, accodion block, pie chart block, notice block, tweet block
4
Requires at least: 4.9
5
Tested up to: 5.0
6
Requires PHP: 5.4
@@ -8,41 +8,38 @@ Stable tag: trunk
8
License: GPLv3
9
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
10
11
- Create beautiful and attracting posts, pages, and landing pages with Otter Blocks. Otter Blocks comes with dozens of Gutenberg blocks that are all you need to build beautiful pages.
12
13
== Description ==
14
15
- Create beautiful and attracting posts, pages, and landing pages with Otter Blocks. Otter Blocks comes with dozens of Gutenberg blocks that are all you need to build beautiful pages.
16
17
- See what you can do with Otter Blocks: [https://demo.themeisle.com/otter-blocks/](https://demo.themeisle.com/otter-blocks/)
18
19
It has:
20
21
- - Our Services Block
22
- Pricing Block
23
- - Testimonials Block
24
- Post Grid Block
25
- - Plugin Card Block
26
- - Google Map Block
27
- - Font Awesome Icon Block
28
- Sharing Icons Block
29
- - About Author Block
30
- - Accordion Block
31
- - Pie Chart Block
32
- - Notice Block
33
- - Click to Tweet Block
34
-
35
- == Installation ==
36
- Activating this plugin is just like any other plugin. If you’ve uploaded the plugin package to your server already, skip to step 5 below:
37
-
38
- 1. Install using the WordPress built-in Plugin installer, or Extract the zip file and drop the contents in the wp-content/plugins/ directory of your WordPress installation.
39
- 2. Activate the plugin through the ‘Plugins’ menu in WordPress.
40
- 3. Go to Gutenberg editor and play around with the block.
41
42
== Screenshots ==
43
44
1. Otter Blocks
45
- 2. Pricing Block
46
- 3. Service Block
47
- 4. Pie Chart Block
48
- 5. Plugin Card Block
1
+ === Otter: Blocks for Gutenberg ===
2
Contributors: themeisle, hardeepasrani
3
+ Tags: gutenberg, block, services block, pricing block, testimonials block, post grid block, google map block, font awesome block, sharing icons block, about author block, columns block, advanced columns, section, columds, row, layout
4
Requires at least: 4.9
5
Tested up to: 5.0
6
Requires PHP: 5.4
8
License: GPLv3
9
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
10
11
+ Create beautiful and attracting posts, pages, and landing pages with Otter: Blocks for Gutenberg. Otter comes with dozens of Gutenberg blocks that are all you need to build beautiful pages in Gutenberg.
12
13
== Description ==
14
15
+ Otter: Blocks for Gutenberg is a lightweight WordPress plugin that brings extra Gutenberg blocks to your site. So if you want to create complex pages and posts optimized for e-commerce, business, social media, blogs - you name it -comes with dozens of Gutenberg blocks that are all you need to build beautiful pages.
16
17
+ See what you can do with Otter:
18
+
19
+ https://www.youtube.com/watch?v=uLNL1WGnzWo
20
+
21
+ A feature that is worth mentioning is the Section Block that allows you to build columns and various layouts in Gutenberg. Moreover, aside from the Gutenberg blocks, the plugin provides a beautiful library of pre-built Gutenberg-compatible templates that you can simply import via one click. The templates have block-friendly layouts that can be customized with no effort.
22
+
23
+ Every block can be customized in a few seconds, as they come with an easy and intuitive user
24
25
It has:
26
27
+ - Section Block
28
+ - Advanced Heading Block
29
+ - Button Group
30
+ - Service Block
31
- Pricing Block
32
+ - Testimonial Block
33
+ - Google Maps Block
34
+ - About Author Block
35
- Post Grid Block
36
+ - Font Awesome Block
37
- Sharing Icons Block
38
+ - Plugin Card Block
39
40
== Screenshots ==
41
42
1. Otter Blocks
43
+ 2. Section Block
44
+ 3. Template Library
45
+ 4. Pre-built Section
screenshot-1.png CHANGED
Binary file
screenshot-2.png CHANGED
Binary file
screenshot-3.png CHANGED
Binary file
screenshot-4.png CHANGED
Binary file
screenshot-5.png DELETED
Binary file
vendor/autoload.php CHANGED
@@ -4,4 +4,4 @@
4
5
require_once __DIR__ . '/composer' . '/autoload_real.php';
6
7
- return ComposerAutoloaderInit919ae6f691d18b92cce17b279ba814a9::getLoader();
4
5
require_once __DIR__ . '/composer' . '/autoload_real.php';
6
7
+ return ComposerAutoloaderInitcdd6c77c048f2c3249a1159bbd08617a::getLoader();
vendor/codeinwp/gutenberg-blocks/blocks/about-author/index.js CHANGED
@@ -20,10 +20,12 @@ const { withSelect } = wp.data;
20
import './editor.scss';
21
import './style.scss';
22
23
registerBlockType( 'themeisle-blocks/about-author', {
24
title: __( 'About Author' ),
25
description: __( 'About Author block is the easiest way to add a author bio below your posts.' ),
26
- icon: 'admin-users',
27
category: 'themeisle-blocks',
28
keywords: [
29
'about',
@@ -57,10 +59,12 @@ registerBlockType( 'themeisle-blocks/about-author', {
57
58
])( ({ postAuthor, authors, status, authorDetails, setState, props, className }) => {
59
60
- if ( 0 === status && postAuthor && authors && postAuthor !== props.attributes.id ) {
61
authors.find( ( o ) => {
62
if ( o.id === postAuthor ) {
63
- props.setAttributes({ id: o.id });
64
setState({
65
authorDetails: o,
66
status: 1
20
import './editor.scss';
21
import './style.scss';
22
23
+ import { authorIcon } from '../../utils/icons.js';
24
+
25
registerBlockType( 'themeisle-blocks/about-author', {
26
title: __( 'About Author' ),
27
description: __( 'About Author block is the easiest way to add a author bio below your posts.' ),
28
+ icon: authorIcon,
29
category: 'themeisle-blocks',
30
keywords: [
31
'about',
59
60
])( ({ postAuthor, authors, status, authorDetails, setState, props, className }) => {
61
62
+ if ( 0 === status && postAuthor && authors ) {
63
authors.find( ( o ) => {
64
if ( o.id === postAuthor ) {
65
+ if ( postAuthor !== props.attributes.id ) {
66
+ props.setAttributes({ id: o.id });
67
+ }
68
setState({
69
authorDetails: o,
70
status: 1
vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/advanced-column.js ADDED
@@ -0,0 +1,1559 @@
1
+ /**
2
+ * External dependencies
3
+ */
4
+ import classnames from 'classnames';
5
+ import hexToRgba from 'hex-rgba';
6
+
7
+ /**
8
+ * WordPress dependencies...
9
+ */
10
+ const { __ } = wp.i18n;
11
+
12
+ const { registerBlockType } = wp.blocks;
13
+
14
+ const {
15
+ Button,
16
+ Dashicon,
17
+ PanelBody,
18
+ ToggleControl,
19
+ RangeControl,
20
+ SelectControl
21
+ } = wp.components;
22
+
23
+ const {
24
+ compose,
25
+ withState
26
+ } = wp.compose;
27
+
28
+ const { withSelect } = wp.data;
29
+
30
+ const {
31
+ ColorPalette,
32
+ InnerBlocks,
33
+ InspectorControls,
34
+ MediaPlaceholder
35
+ } = wp.editor;
36
+
37
+ const { Fragment } = wp.element;
38
+
39
+ const { withViewportMatch } = wp.viewport;
40
+
41
+ /**
42
+ * Internal dependencies
43
+ */
44
+ import { columnIcon } from '../../utils/icons.js';
45
+
46
+ import SizeControl from '../../components/size-control/index.js';
47
+
48
+ import BackgroundControl from './background-control/index.js';
49
+
50
+ import ControlPanelControl from '../../components/control-panel-control/index.js';
51
+
52
+ registerBlockType( 'themeisle-blocks/advanced-column', {
53
+ title: __( 'Section Column' ),
54
+ description: __( 'A single column within a Section block.' ),
55
+ parent: [ 'themeisle-blocks/advanced-columns' ],
56
+ icon: columnIcon,
57
+ category: 'themeisle-blocks',
58
+ attributes: {
59
+ id: {
60
+ type: 'string'
61
+ },
62
+ paddingType: {
63
+ type: 'string',
64
+ default: 'linked'
65
+ },
66
+ paddingTypeTablet: {
67
+ type: 'string',
68
+ default: 'linked'
69
+ },
70
+ paddingTypeMobile: {
71
+ type: 'string',
72
+ default: 'linked'
73
+ },
74
+ padding: {
75
+ type: 'number',
76
+ default: 20
77
+ },
78
+ paddingTablet: {
79
+ type: 'number',
80
+ default: 20
81
+ },
82
+ paddingMobile: {
83
+ type: 'number',
84
+ default: 20
85
+ },
86
+ paddingTop: {
87
+ type: 'number',
88
+ default: 20
89
+ },
90
+ paddingTopTablet: {
91
+ type: 'number',
92
+ default: 20
93
+ },
94
+ paddingTopMobile: {
95
+ type: 'number',
96
+ default: 20
97
+ },
98
+ paddingRight: {
99
+ type: 'number',
100
+ default: 20
101
+ },
102
+ paddingRightTablet: {
103
+ type: 'number',
104
+ default: 20
105
+ },
106
+ paddingRightMobile: {
107
+ type: 'number',
108
+ default: 20
109
+ },
110
+ paddingBottom: {
111
+ type: 'number',
112
+ default: 20
113
+ },
114
+ paddingBottomTablet: {
115
+ type: 'number',
116
+ default: 20
117
+ },
118
+ paddingBottomMobile: {
119
+ type: 'number',
120
+ default: 20
121
+ },
122
+ paddingLeft: {
123
+ type: 'number',
124
+ default: 20
125
+ },
126
+ paddingLeftTablet: {
127
+ type: 'number',
128
+ default: 20
129
+ },
130
+ paddingLeftMobile: {
131
+ type: 'number',
132
+ default: 20
133
+ },
134
+ marginType: {
135
+ type: 'string',
136
+ default: 'linked'
137
+ },
138
+ marginTypeTablet: {
139
+ type: 'string',
140
+ default: 'linked'
141
+ },
142
+ marginTypeMobile: {
143
+ type: 'string',
144
+ default: 'linked'
145
+ },
146
+ margin: {
147
+ type: 'number',
148
+ default: 20
149
+ },
150
+ marginTablet: {
151
+ type: 'number',
152
+ default: 20
153
+ },
154
+ marginMobile: {
155
+ type: 'number',
156
+ default: 20
157
+ },
158
+ marginTop: {
159
+ type: 'number',
160
+ default: 20
161
+ },
162
+ marginTopTablet: {
163
+ type: 'number',
164
+ default: 20
165
+ },
166
+ marginTopMobile: {
167
+ type: 'number',
168
+ default: 20
169
+ },
170
+ marginBottom: {
171
+ type: 'number',
172
+ default: 20
173
+ },
174
+ marginBottomTablet: {
175
+ type: 'number',
176
+ default: 20
177
+ },
178
+ marginBottomMobile: {
179
+ type: 'number',
180
+ default: 20
181
+ },
182
+ backgroundType: {
183
+ type: 'string',
184
+ default: 'color'
185
+ },
186
+ backgroundColor: {
187
+ type: 'string'
188
+ },
189
+ backgroundImageID: {
190
+ type: 'number'
191
+ },
192
+ backgroundImageURL: {
193
+ type: 'string'
194
+ },
195
+ backgroundAttachment: {
196
+ type: 'string',
197
+ default: 'scroll'
198
+ },
199
+ backgroundPosition: {
200
+ type: 'string',
201
+ default: 'top left'
202
+ },
203
+ backgroundRepeat: {
204
+ type: 'string',
205
+ default: 'repeat'
206
+ },
207
+ backgroundSize: {
208
+ type: 'string',
209
+ default: 'auto'
210
+ },
211
+ backgroundGradientFirstColor: {
212
+ type: 'string',
213
+ default: '#36d1dc'
214
+ },
215
+ backgroundGradientFirstLocation: {
216
+ type: 'number',
217
+ default: 0
218
+ },
219
+ backgroundGradientSecondColor: {
220
+ type: 'string',
221
+ default: '#5b86e5'
222
+ },
223
+ backgroundGradientSecondLocation: {
224
+ type: 'number',
225
+ default: 100
226
+ },
227
+ backgroundGradientType: {
228
+ type: 'string',
229
+ default: 'linear'
230
+ },
231
+ backgroundGradientAngle: {
232
+ type: 'number',
233
+ default: 90
234
+ },
235
+ backgroundGradientPosition: {
236
+ type: 'string',
237
+ default: 'center center'
238
+ },
239
+ borderType: {
240
+ type: 'string',
241
+ default: 'linked'
242
+ },
243
+ border: {
244
+ type: 'number',
245
+ default: 0
246
+ },
247
+ borderTop: {
248
+ type: 'number',
249
+ default: 0
250
+ },
251
+ borderRight: {
252
+ type: 'number',
253
+ default: 0
254
+ },
255
+ borderBottom: {
256
+ type: 'number',
257
+ default: 0
258
+ },
259
+ borderLeft: {
260
+ type: 'number',
261
+ default: 0
262
+ },
263
+ borderColor: {
264
+ type: 'string',
265
+ default: '#000000'
266
+ },
267
+ borderRadiusType: {
268
+ type: 'string',
269
+ default: 'linked'
270
+ },
271
+ borderRadius: {
272
+ type: 'number',
273
+ default: 0
274
+ },
275
+ borderRadiusTop: {
276
+ type: 'number',
277
+ default: 0
278
+ },
279
+ borderRadiusRight: {
280
+ type: 'number',
281
+ default: 0
282
+ },
283
+ borderRadiusBottom: {
284
+ type: 'number',
285
+ default: 0
286
+ },
287
+ borderRadiusLeft: {
288
+ type: 'number',
289
+ default: 0
290
+ },
291
+ boxShadow: {
292
+ type: 'boolean',
293
+ default: false
294
+ },
295
+ boxShadowColor: {
296
+ type: 'string',
297
+ default: '#000000'
298
+ },
299
+ boxShadowColorOpacity: {
300
+ type: 'number',
301
+ default: 50
302
+ },
303
+ boxShadowBlur: {
304
+ type: 'number',
305
+ default: 5
306
+ },
307
+ boxShadowSpread: {
308
+ type: 'number',
309
+ default: 0
310
+ },
311
+ boxShadowHorizontal: {
312
+ type: 'number',
313
+ default: 0
314
+ },
315
+ boxShadowVertical: {
316
+ type: 'number',
317
+ default: 0
318
+ },
319
+ columnsHTMLTag: {
320
+ type: 'string',
321
+ default: 'div'
322
+ }
323
+ },
324
+
325
+ supports: {
326
+ inserter: false,
327
+ reusable: false,
328
+ html: false
329
+ },
330
+
331
+ edit: compose([
332
+
333
+ withSelect( ( select, props ) => {
334
+ return {
335
+ props
336
+ };
337
+ }),
338
+
339
+ withState({
340
+ tab: 'layout',
341
+ paddingViewType: 'desktop',
342
+ marginViewType: 'desktop'
343
+ }),
344
+
345
+ withViewportMatch({
346
+ isLarger: '>= large',
347
+ isLarge: '<= large',
348
+ isSmall: '>= small',
349
+ isSmaller: '<= small'
350
+ })
351
+
352
+ ])( ({
353
+ tab,
354
+ paddingViewType,
355
+ marginViewType,
356
+ setState,
357
+ isLarger,
358
+ isLarge,
359
+ isSmall,
360
+ isSmaller,
361
+ props
362
+ }) => {
363
+ const {
364
+ id,
365
+ paddingType,
366
+ paddingTypeTablet,
367
+ paddingTypeMobile,
368
+ padding,
369
+ paddingTablet,
370
+ paddingMobile,
371
+ paddingTop,
372
+ paddingTopTablet,
373
+ paddingTopMobile,
374
+ paddingRight,
375
+ paddingRightTablet,
376
+ paddingRightMobile,
377
+ paddingBottom,
378
+ paddingBottomTablet,
379
+ paddingBottomMobile,
380
+ paddingLeft,
381
+ paddingLeftTablet,
382
+ paddingLeftMobile,
383
+ marginType,
384
+ marginTypeTablet,
385
+ marginTypeMobile,
386
+ margin,
387
+ marginTablet,
388
+ marginMobile,
389
+ marginTop,
390
+ marginTopTablet,
391
+ marginTopMobile,
392
+ marginBottom,
393
+ marginBottomTablet,
394
+ marginBottomMobile,
395
+ backgroundType,
396
+ backgroundColor,
397
+ backgroundImageID,
398
+ backgroundImageURL,
399
+ backgroundAttachment,
400
+ backgroundPosition,
401
+ backgroundRepeat,
402
+ backgroundSize,
403
+ backgroundGradientFirstColor,
404
+ backgroundGradientFirstLocation,
405
+ backgroundGradientSecondColor,
406
+ backgroundGradientSecondLocation,
407
+ backgroundGradientType,
408
+ backgroundGradientAngle,
409
+ backgroundGradientPosition,
410
+ borderType,
411
+ border,
412
+ borderTop,
413
+ borderRight,
414
+ borderBottom,
415
+ borderLeft,
416
+ borderColor,
417
+ borderRadiusType,
418
+ borderRadius,
419
+ borderRadiusTop,
420
+ borderRadiusRight,
421
+ borderRadiusBottom,
422
+ borderRadiusLeft,
423
+ boxShadow,
424
+ boxShadowColor,
425
+ boxShadowColorOpacity,
426
+ boxShadowBlur,
427
+ boxShadowSpread,
428
+ boxShadowHorizontal,
429
+ boxShadowVertical,
430
+ columnsHTMLTag
431
+ } = props.attributes;
432
+
433
+ if ( id === undefined ) {
434
+ const instanceId = `wp-block-themeisle-blocks-advanced-column-${ props.clientId.substr( 0, 8 ) }`;
435
+ props.setAttributes({ id: instanceId });
436
+ }
437
+
438
+ const isDesktop = ( isLarger && ! isLarge && isSmall && ! isSmaller );
439
+
440
+ const isTablet = ( ! isLarger && ! isLarge && isSmall && ! isSmaller );
441
+
442
+ const isMobile = ( ! isLarger && ! isLarge && ! isSmall && ! isSmaller );
443
+
444
+ const Tag = columnsHTMLTag;
445
+
446
+ let stylesheet, background, borderStyle, borderRadiusStyle, boxShadowStyle;
447
+
448
+ if ( isDesktop ) {
449
+ stylesheet = {
450
+ paddingTop: 'linked' === paddingType ? `${ padding }px` : `${ paddingTop }px`,
451
+ paddingRight: 'linked' === paddingType ? `${ padding }px` : `${ paddingRight }px`,
452
+ paddingBottom: 'linked' === paddingType ? `${ padding }px` : `${ paddingBottom }px`,
453
+ paddingLeft: 'linked' === paddingType ? `${ padding }px` : `${ paddingLeft }px`,
454
+ marginTop: 'linked' === marginType ? `${ margin }px` : `${ marginTop }px`,
455
+ marginBottom: 'linked' === marginType ? `${ margin }px` : `${ marginBottom }px`
456
+ };
457
+ }
458
+
459
+ if ( isTablet ) {
460
+ stylesheet = {
461
+ paddingTop: 'linked' === paddingTypeTablet ? `${ paddingTablet }px` : `${ paddingTopTablet }px`,
462
+ paddingRight: 'linked' === paddingTypeTablet ? `${ paddingTablet }px` : `${ paddingRightTablet }px`,
463
+ paddingBottom: 'linked' === paddingTypeTablet ? `${ paddingTablet }px` : `${ paddingBottomTablet }px`,
464
+ paddingLeft: 'linked' === paddingTypeTablet ? `${ paddingTablet }px` : `${ paddingLeftTablet }px`,
465
+ marginTop: 'linked' === marginTypeTablet ? `${ marginTablet }px` : `${ marginTopTablet }px`,
466
+ marginBottom: 'linked' === marginTypeTablet ? `${ marginTablet }px` : `${ marginBottomTablet }px`
467
+ };
468
+ }
469
+
470
+ if ( isMobile ) {
471
+ stylesheet = {
472
+ paddingTop: 'linked' === paddingTypeMobile ? `${ paddingMobile }px` : `${ paddingTopMobile }px`,
473
+ paddingRight: 'linked' === paddingTypeMobile ? `${ paddingMobile }px` : `${ paddingRightMobile }px`,
474
+ paddingBottom: 'linked' === paddingTypeMobile ? `${ paddingMobile }px` : `${ paddingBottomMobile }px`,
475
+ paddingLeft: 'linked' === paddingTypeMobile ? `${ paddingMobile }px` : `${ paddingLeftMobile }px`,
476
+ marginTop: 'linked' === marginTypeMobile ? `${ marginMobile }px` : `${ marginTopMobile }px`,
477
+ marginBottom: 'linked' === marginTypeMobile ? `${ marginMobile }px` : `${ marginBottomMobile }px`
478
+ };
479
+ }
480
+
481
+ if ( 'color' === backgroundType ) {
482
+ background = {
483
+ background: backgroundColor
484
+ };
485
+ }
486
+
487
+ if ( 'image' === backgroundType ) {
488
+ background = {
489
+ backgroundImage: `url( '${ backgroundImageURL }' )`,
490
+ backgroundAttachment,
491
+ backgroundPosition,
492
+ backgroundRepeat,
493
+ backgroundSize
494
+ };
495
+ }
496
+
497
+ if ( 'gradient' === backgroundType ) {
498
+ let direction;
499
+
500
+ if ( 'linear' === backgroundGradientType ) {
501
+ direction = `${ backgroundGradientAngle }deg`;
502
+ } else {
503
+ direction = `at ${ backgroundGradientPosition }`;
504
+ }
505
+
506
+ if ( backgroundGradientFirstColor || backgroundGradientSecondColor ) {
507
+ background = {
508
+ background: `${ backgroundGradientType }-gradient( ${ direction }, ${ backgroundGradientFirstColor || 'rgba( 0, 0, 0, 0 )' } ${ backgroundGradientFirstLocation }%, ${ backgroundGradientSecondColor || 'rgba( 0, 0, 0, 0 )' } ${ backgroundGradientSecondLocation }% )`
509
+ };
510
+ }
511
+ }
512
+
513
+ if ( 'linked' === borderType ) {
514
+ borderStyle = {
515
+ borderWidth: `${ border }px`,
516
+ borderStyle: 'solid',
517
+ borderColor: borderColor
518
+ };
519
+ }
520
+
521
+ if ( 'unlinked' === borderType ) {
522
+ borderStyle = {
523
+ borderTopWidth: `${ borderTop }px`,
524
+ borderRightWidth: `${ borderRight }px`,
525
+ borderBottomWidth: `${ borderBottom }px`,
526
+ borderLeftWidth: `${ borderLeft }px`,
527
+ borderStyle: 'solid',
528
+ borderColor: borderColor
529
+ };
530
+ }
531
+
532
+ if ( 'linked' === borderRadiusType ) {
533
+ borderRadiusStyle = {
534
+ borderRadius: `${ borderRadius }px`
535
+ };
536
+ }
537
+
538
+ if ( 'unlinked' === borderRadiusType ) {
539
+ borderRadiusStyle = {
540
+ borderTopLeftRadius: `${ borderRadiusTop }px`,
541
+ borderTopRightRadius: `${ borderRadiusRight }px`,
542
+ borderBottomRightRadius: `${ borderRadiusBottom }px`,
543
+ borderBottomLeftRadius: `${ borderRadiusLeft }px`
544
+ };
545
+ }
546
+
547
+ if ( true === boxShadow ) {
548
+ boxShadowStyle = {
549
+ boxShadow: `${ boxShadowHorizontal }px ${ boxShadowVertical }px ${ boxShadowBlur }px ${ boxShadowSpread }px ${ hexToRgba( ( boxShadowColor ? boxShadowColor : '#000000' ), boxShadowColorOpacity ) }`
550
+ };
551
+ }
552
+
553
+ const style = {
554
+ ...stylesheet,
555
+ ...background,
556
+ ...borderStyle,
557
+ ...borderRadiusStyle,
558
+ ...boxShadowStyle
559
+ };
560
+
561
+ const changePaddingViewType = value => {
562
+ setState({ paddingViewType: value });
563
+ };
564
+
565
+ const changeMarginViewType = value => {
566
+ setState({ marginViewType: value });
567
+ };
568
+
569
+ const changePaddingType = value => {
570
+ if ( 'desktop' === paddingViewType ) {
571
+ props.setAttributes({ paddingType: value });
572
+ }
573
+ if ( 'tablet' === paddingViewType ) {
574
+ props.setAttributes({ paddingTypeTablet: value });
575
+ }
576
+ if ( 'mobile' === paddingViewType ) {
577
+ props.setAttributes({ paddingTypeMobile: value });
578
+ }
579
+ };
580
+
581
+ const changePadding = value => {
582
+ if ( 0 <= value && 500 >= value ) {
583
+ if ( 'desktop' === paddingViewType ) {
584
+ props.setAttributes({ padding: value });
585
+ }
586
+ if ( 'tablet' === paddingViewType ) {
587
+ props.setAttributes({ paddingTablet: value });
588
+ }
589
+ if ( 'mobile' === paddingViewType ) {
590
+ props.setAttributes({ paddingMobile: value });
591
+ }
592
+ }
593
+ };
594
+
595
+ const changePaddingTop = value => {
596
+ if ( 0 <= value && 500 >= value ) {
597
+ if ( 'desktop' === paddingViewType ) {
598
+ props.setAttributes({ paddingTop: value });
599
+ }
600
+ if ( 'tablet' === paddingViewType ) {
601
+ props.setAttributes({ paddingTopTablet: value });
602
+ }
603
+ if ( 'mobile' === paddingViewType ) {
604
+ props.setAttributes({ paddingTopMobile: value });
605
+ }
606
+ }
607
+ };
608
+
609
+ const changePaddingRight = value => {
610
+ if ( 0 <= value && 500 >= value ) {
611
+ if ( 'desktop' === paddingViewType ) {
612
+ props.setAttributes({ paddingRight: value });
613
+ }
614
+ if ( 'tablet' === paddingViewType ) {
615
+ props.setAttributes({ paddingRightTablet: value });
616
+ }
617
+ if ( 'mobile' === paddingViewType ) {
618
+ props.setAttributes({ paddingRightMobile: value });
619
+ }
620
+ }
621
+ };
622
+
623
+ const changePaddingBottom = value => {
624
+ if ( 0 <= value && 500 >= value ) {
625
+ if ( 'desktop' === paddingViewType ) {
626
+ props.setAttributes({ paddingBottom: value });
627
+ }
628
+ if ( 'tablet' === paddingViewType ) {
629
+ props.setAttributes({ paddingBottomTablet: value });
630
+ }
631
+ if ( 'mobile' === paddingViewType ) {
632
+ props.setAttributes({ paddingBottomMobile: value });
633
+ }
634
+ }
635
+ };
636
+
637
+ const changePaddingLeft = value => {
638
+ if ( 0 <= value && 500 >= value ) {
639
+ if ( 'desktop' === paddingViewType ) {
640
+ props.setAttributes({ paddingLeft: value });
641
+ }
642
+ if ( 'tablet' === paddingViewType ) {
643
+ props.setAttributes({ paddingLeftTablet: value });
644
+ }
645
+ if ( 'mobile' === paddingViewType ) {
646
+ props.setAttributes({ paddingLeftMobile: value });
647
+ }
648
+ }
649
+ };
650
+
651
+ const changeMarginType = value => {
652
+ if ( 'desktop' === marginViewType ) {
653
+ props.setAttributes({ marginType: value });
654
+ }
655
+ if ( 'tablet' === marginViewType ) {
656
+ props.setAttributes({ marginTypeTablet: value });
657
+ }
658
+ if ( 'mobile' === marginViewType ) {
659
+ props.setAttributes({ marginTypeMobile: value });
660
+ }
661
+ };
662
+
663
+ const changeMargin = value => {
664
+ if ( -500 <= value && 500 >= value ) {
665
+ if ( 'desktop' === marginViewType ) {
666
+ props.setAttributes({ margin: value });
667
+ }
668
+ if ( 'tablet' === marginViewType ) {
669
+ props.setAttributes({ marginTablet: value });
670
+ }
671
+ if ( 'mobile' === marginViewType ) {
672
+ props.setAttributes({ marginMobile: value });
673
+ }
674
+ }
675
+ };
676
+
677
+ const changeMarginTop = value => {
678
+ if ( -500 <= value && 500 >= value ) {
679
+ if ( 'desktop' === marginViewType ) {
680
+ props.setAttributes({ marginTop: value });
681
+ }
682
+ if ( 'tablet' === marginViewType ) {
683
+ props.setAttributes({ marginTopTablet: value });
684
+ }
685
+ if ( 'mobile' === marginViewType ) {
686
+ props.setAttributes({ marginTopMobile: value });
687
+ }
688
+ }
689
+ };
690
+
691
+ const changeMarginBottom = value => {
692
+ if ( -500 <= value && 500 >= value ) {
693
+ if ( 'desktop' === marginViewType ) {
694
+ props.setAttributes({ marginBottom: value });
695
+ }
696
+ if ( 'tablet' === marginViewType ) {
697
+ props.setAttributes({ marginBottomTablet: value });
698
+ }
699
+ if ( 'mobile' === marginViewType ) {
700
+ props.setAttributes({ marginBottomMobile: value });
701
+ }
702
+ }
703
+ };
704
+
705
+ const changeBackgroundType = value => {
706
+ props.setAttributes({ backgroundType: value });
707
+ };
708
+
709
+ const changeBackgroundColor = value => {
710
+ props.setAttributes({ backgroundColor: value });
711
+ };
712
+
713
+ const changeBackgroundImage = value => {
714
+ props.setAttributes({
715
+ backgroundImageID: value.id,
716
+ backgroundImageURL: value.url
717
+ });
718
+ };
719
+
720
+ const removeBackgroundImage = () => {
721
+ props.setAttributes({
722
+ backgroundImageID: '',
723
+ backgroundImageURL: ''
724
+ });
725
+ };
726
+
727
+ const changeBackgroundAttachment = value => {
728
+ props.setAttributes({ backgroundAttachment: value });
729
+ };
730
+
731
+ const changeBackgroundPosition = value => {
732
+ props.setAttributes({ backgroundPosition: value });
733
+ };
734
+
735
+ const changeBackgroundRepeat = value => {
736
+ props.setAttributes({ backgroundRepeat: value });
737
+ };
738
+
739
+ const changeBackgroundSize = value => {
740
+ props.setAttributes({ backgroundSize: value });
741
+ };
742
+
743
+ const changeBackgroundGradientFirstColor = value => {
744
+ props.setAttributes({ backgroundGradientFirstColor: value });
745
+ };
746
+
747
+ const changeBackgroundGradientFirstLocation = value => {
748
+ props.setAttributes({ backgroundGradientFirstLocation: value });
749
+ };
750
+
751
+ const changeBackgroundGradientSecondColor = value => {
752
+ props.setAttributes({ backgroundGradientSecondColor: value });
753
+ };
754
+
755
+ const changeBackgroundGradientSecondLocation = value => {
756
+ props.setAttributes({ backgroundGradientSecondLocation: value });
757
+ };
758
+
759
+ const changeBackgroundGradientType = value => {
760
+ props.setAttributes({ backgroundGradientType: value });
761
+ };
762
+
763
+ const changeBackgroundGradientAngle = value => {
764
+ props.setAttributes({ backgroundGradientAngle: value });
765
+ };
766
+
767
+ const changeBackgroundGradientPosition = value => {
768
+ props.setAttributes({ backgroundGradientPosition: value });
769
+ };
770
+
771
+ const changeBorderType = value => {
772
+ props.setAttributes({ borderType: value });
773
+ };
774
+
775
+ const changeBorder = value => {
776
+ props.setAttributes({ border: value });
777
+ };
778
+
779
+ const changeBorderTop = value => {
780
+ props.setAttributes({ borderTop: value });
781
+ };
782
+
783
+ const changeBorderRight = value => {
784
+ props.setAttributes({ borderRight: value });
785
+ };
786
+
787
+ const changeBorderBottom = value => {
788
+ props.setAttributes({ borderBottom: value });
789
+ };
790
+
791
+ const changeBorderLeft = value => {
792
+ props.setAttributes({ borderLeft: value });
793
+ };
794
+
795
+ const changeBorderColor = value => {
796
+ props.setAttributes({ borderColor: value });
797
+ };
798
+
799
+ const changeBorderRadiusType = value => {
800
+ props.setAttributes({ borderRadiusType: value });
801
+ };
802
+
803
+ const changeBorderRadius = value => {
804
+ props.setAttributes({ borderRadius: value });
805
+ };
806
+
807
+ const changeBorderRadiusTop = value => {
808
+ props.setAttributes({ borderRadiusTop: value });
809
+ };
810
+
811
+ const changeBorderRadiusRight = value => {
812
+ props.setAttributes({ borderRadiusRight: value });
813
+ };
814
+
815
+ const changeBorderRadiusBottom = value => {
816
+ props.setAttributes({ borderRadiusBottom: value });
817
+ };
818
+
819
+ const changeBorderRadiusLeft = value => {
820
+ props.setAttributes({ borderRadiusLeft: value });
821
+ };
822
+
823
+ const changeBoxShadow = () => {
824
+ props.setAttributes({ boxShadow: ! boxShadow });
825
+ };
826
+
827
+ const changeBoxShadowColor = value => {
828
+ props.setAttributes({ boxShadowColor: value });
829
+ };
830
+
831
+ const changeBoxShadowColorOpacity = value => {
832
+ props.setAttributes({ boxShadowColorOpacity: value });
833
+ };
834
+
835
+ const changeBoxShadowBlur = value => {
836
+ props.setAttributes({ boxShadowBlur: value });
837
+ };
838
+
839
+ const changeBoxShadowSpread = value => {
840
+ props.setAttributes({ boxShadowSpread: value });
841
+ };
842
+
843
+ const changeBoxShadowHorizontal = value => {
844
+ props.setAttributes({ boxShadowHorizontal: value });
845
+ };
846
+
847
+ const changeBoxShadowVertical = value => {
848
+ props.setAttributes({ boxShadowVertical: value });
849
+ };
850
+
851
+ const changeColumnsHTMLTag = value => {
852
+ props.setAttributes({ columnsHTMLTag: value });
853
+ };
854
+
855
+ return (
856
+ <Fragment>
857
+ <InspectorControls className="wp-block-themeisle-blocks-advanced-columns-inspector">
858
+ <PanelBody className="wp-block-themeisle-blocks-advanced-columns-header-panel">
859
+ <Button
860
+ className={ classnames(
861
+ 'header-tab',
862
+ { 'is-selected': 'layout' === tab }
863
+ )}
864
+ onClick={ () => setState({ tab: 'layout' }) }
865
+ >
866
+ <span
867
+ >
868
+ <Dashicon icon="editor-table"/>
869
+ { __( 'Layout' ) }
870
+ </span>
871
+ </Button>
872
+
873
+ <Button
874
+ className={ classnames(
875
+ 'header-tab',
876
+ { 'is-selected': 'style' === tab }
877
+ )}
878
+ onClick={ () => setState({ tab: 'style' }) }
879
+ >
880
+ <span
881
+ >
882
+ <Dashicon icon="admin-customizer"/>
883
+ { __( 'Style' ) }
884
+ </span>
885
+ </Button>
886
+
887
+ <Button
888
+ className={ classnames(
889
+ 'header-tab',
890
+ { 'is-selected': 'advanced' === tab }
891
+ )}
892
+ onClick={ () => setState({ tab: 'advanced' }) }
893
+ >
894
+ <span
895
+ >
896
+ <Dashicon icon="admin-generic"/>
897
+ { __( 'Advanced' ) }
898
+ </span>
899
+ </Button>
900
+ </PanelBody>
901
+
902
+ { 'layout' === tab && (
903
+
904
+ <Fragment>
905
+ <PanelBody
906
+ title={ __( 'Padding & Margin' ) }
907
+ >
908
+ <SizeControl
909
+ label={ __( 'Padding Control' ) }
910
+ minus={ false }
911
+ responsive={ true }
912
+ changeViewType={ changePaddingViewType }
913
+ changeType={ changePaddingType }
914
+ changeValue={ changePadding }
915
+ view={ paddingViewType }
916
+ typeDesktop={ paddingType }
917
+ typeTablet={ paddingTypeTablet }
918
+ typeMobile={ paddingTypeMobile }
919
+ valueDesktop={ padding }
920
+ valueTablet={ paddingTablet }
921
+ valueMobile={ paddingMobile }
922
+ >
923
+ <RangeControl
924
+ label={ __( 'Padding Top' ) }
925
+ beforeIcon="arrow-up"
926
+ value={
927
+ ( 'desktop' === paddingViewType ) && paddingTop ||
928
+ ( 'tablet' === paddingViewType ) && paddingTopTablet ||
929
+ ( 'mobile' === paddingViewType ) && paddingTopMobile
930
+ }
931
+ onChange={ changePaddingTop }
932
+ min={ 0 }
933
+ max={ 500 }
934
+ />
935
+
936
+ <RangeControl
937
+ label={ __( 'Padding Right' ) }
938
+ beforeIcon="arrow-right"
939
+ value={
940
+ ( 'desktop' === paddingViewType ) && paddingRight ||
941
+ ( 'tablet' === paddingViewType ) && paddingRightTablet ||
942
+ ( 'mobile' === paddingViewType ) && paddingRightMobile
943
+ }
944
+ onChange={ changePaddingRight }
945
+ min={ 0 }
946
+ max={ 500 }
947
+ />
948
+
949
+ <RangeControl
950
+ label={ __( 'Padding Bottom' ) }
951
+ beforeIcon="arrow-down"
952
+ value={
953
+ ( 'desktop' === paddingViewType ) && paddingBottom ||
954
+ ( 'tablet' === paddingViewType ) && paddingBottomTablet ||
955
+ ( 'mobile' === paddingViewType ) && paddingBottomMobile
956
+ }
957
+ onChange={ changePaddingBottom }
958
+ min={ 0 }
959
+ max={ 500 }
960
+ />
961
+
962
+ <RangeControl
963
+ label={ __( 'Padding Left' ) }
964
+ beforeIcon="arrow-left"
965
+ value={
966
+ ( 'desktop' === paddingViewType ) && paddingLeft ||
967
+ ( 'tablet' === paddingViewType ) && paddingLeftTablet ||
968
+ ( 'mobile' === paddingViewType ) && paddingLeftMobile
969
+ }
970
+ onChange={ changePaddingLeft }
971
+ min={ 0 }
972
+ max={ 500 }
973
+ />
974
+ </SizeControl>
975
+
976
+ <SizeControl
977
+ label={ __( 'Margin Control' ) }
978
+ minus={ true }
979
+ responsive={ true }
980
+ changeViewType={ changeMarginViewType }
981
+ changeType={ changeMarginType }
982
+ changeValue={ changeMargin }
983
+ view={ marginViewType }
984
+ typeDesktop={ marginType }
985
+ typeTablet={ marginTypeTablet }
986
+ typeMobile={ marginTypeMobile }
987
+ valueDesktop={ margin }
988
+ valueTablet={ marginTablet }
989
+ valueMobile={ marginMobile }
990
+ >
991
+ <RangeControl
992
+ label={ __( 'Margin Top' ) }
993
+ beforeIcon="arrow-up"
994
+ value={
995
+ ( 'desktop' === marginViewType ) && marginTop ||
996
+ ( 'tablet' === marginViewType ) && marginTopTablet ||
997
+ ( 'mobile' === marginViewType ) && marginTopMobile
998
+ }
999
+ onChange={ changeMarginTop }
1000
+ min={ -500 }
1001
+ max={ 500 }
1002
+ />
1003
+
1004
+ <RangeControl
1005
+ label={ __( 'Margin Bottom' ) }
1006
+ beforeIcon="arrow-down"
1007
+ value={
1008
+ ( 'desktop' === marginViewType ) && marginBottom ||
1009
+ ( 'tablet' === marginViewType ) && marginBottomTablet ||
1010
+ ( 'mobile' === marginViewType ) && marginBottomMobile
1011
+ }
1012
+ onChange={ changeMarginBottom }
1013
+ min={ -500 }
1014
+ max={ 500 }
1015
+ />
1016
+ </SizeControl>
1017
+ </PanelBody>
1018
+ </Fragment>
1019
+
1020
+ ) || 'style' === tab && (
1021
+
1022
+ <Fragment>
1023
+ <PanelBody
1024
+ title={ __( 'Background Settings' ) }
1025
+ className="wp-block-themeisle-image-container"
1026
+ >
1027
+ <BackgroundControl
1028
+ label={ __( 'Background Type' ) }
1029
+ backgroundType={ backgroundType }
1030
+ changeBackgroundType={ changeBackgroundType }
1031
+ />
1032
+
1033
+ { 'color' === backgroundType && (
1034
+
1035
+ <Fragment>
1036
+ <p>{ __( 'Background Color' ) }</p>
1037
+
1038
+ <ColorPalette
1039
+ label={ 'Background Color' }
1040
+ value={ backgroundColor }
1041
+ onChange={ changeBackgroundColor }
1042
+ />
1043
+ </Fragment>
1044
+
1045
+ ) || 'image' === backgroundType && (
1046
+ backgroundImageURL ?
1047
+
1048
+ <Fragment>
1049
+ <div className="image-body">
1050
+ <div className="image-container">
1051
+ <div
1052
+ className="image-holder"
1053
+ style={ {
1054
+ backgroundImage: `url('${ backgroundImageURL }')`
1055
+ } }
1056
+ ></div>
1057
+
1058
+ <div
1059
+ className="image-delete"
1060
+ onClick={ removeBackgroundImage }
1061
+ >
1062
+ <Dashicon icon="trash" />
1063
+ <span>{ __( 'Remove Image' ) }</span>
1064
+ </div>
1065
+ </div>
1066
+ </div>
1067
+
1068
+ <Button
1069
+ isDefault
1070
+ className="image-delete-button"
1071
+ onClick={ removeBackgroundImage }
1072
+ >
1073
+ { __( 'Change or Remove Image' ) }
1074
+ </Button>
1075
+
1076
+ <ControlPanelControl
1077
+ label={ 'Background Settings' }
1078
+ >
1079
+
1080
+ <SelectControl
1081
+ label={ __( 'Background Attachment' ) }
1082
+ value={ backgroundAttachment }
1083
+ options={ [
1084
+ { label: 'Scroll', value: 'scroll' },
1085
+ { label: 'Fixed', value: 'fixed' },
1086
+ { label: 'Local', value: 'local' }
1087
+ ] }
1088
+ onChange={ changeBackgroundAttachment }
1089
+ />
1090
+
1091
+ <SelectControl
1092
+ label={ __( 'Background Position' ) }
1093
+ value={ backgroundPosition }
1094
+ options={ [
1095
+ { label: 'Default', value: 'top left' },
1096
+ { label: 'Top Left', value: 'top left' },
1097
+ { label: 'Top Center', value: 'top center' },
1098
+ { label: 'Top Right', value: 'top right' },
1099
+ { label: 'Center Left', value: 'center left' },
1100
+ { label: 'Center Center', value: 'center center' },
1101
+ { label: 'Center Right', value: 'center right' },
1102
+ { label: 'Bottom Left', value: 'bottom left' },
1103
+ { label: 'Bottom Center', value: 'bottom center' },
1104
+ { label: 'Bottom Right', value: 'bottom right' }
1105
+ ] }
1106
+ onChange={ changeBackgroundPosition }
1107
+ />
1108
+
1109
+ <SelectControl
1110
+ label={ __( 'Background Repeat' ) }
1111
+ value={ backgroundRepeat }
1112
+ options={ [
1113
+ { label: 'Repeat', value: 'repeat' },
1114
+ { label: 'No-repeat', value: 'no-repeat' }
1115
+ ] }
1116
+ onChange={ changeBackgroundRepeat }
1117
+ />
1118
+
1119
+ <SelectControl
1120
+ label={ __( 'Background Size' ) }
1121
+ value={ backgroundSize }
1122
+ options={ [
1123
+ { label: 'Auto', value: 'auto' },
1124
+ { label: 'Cover', value: 'cover' },
1125
+ { label: 'Contain', value: 'contain' }
1126
+ ] }
1127
+ onChange={ changeBackgroundSize }
1128
+ />
1129
+
1130
+ </ControlPanelControl>
1131
+ </Fragment> :
1132
+
1133
+ <MediaPlaceholder
1134
+ icon="format-image"
1135
+ labels={ {
1136
+ title: __( 'Background Image' ),
1137
+ name: __( 'an image' )
1138
+ } }
1139
+ value={ backgroundImageID }
1140
+ onSelect={ changeBackgroundImage }
1141
+ accept="image/*"
1142
+ allowedTypes={ [ 'image' ] }
1143
+ />
1144
+
1145
+ ) || 'gradient' === backgroundType && (
1146
+ <Fragment>
1147
+ <p>{ __( 'First Color' ) }</p>
1148
+
1149
+ <ColorPalette
1150
+ label={ __( 'Color' ) }
1151
+ value={ backgroundGradientFirstColor }
1152
+ onChange={ changeBackgroundGradientFirstColor }
1153
+ />
1154
+
1155
+ <RangeControl
1156
+ label={ __( 'Location' ) }
1157
+ value={ backgroundGradientFirstLocation }
1158
+ onChange={ changeBackgroundGradientFirstLocation }
1159
+ min={ 0 }
1160
+ max={ 100 }
1161
+ />
1162
+
1163
+ <p>{ __( 'Second Color' ) }</p>
1164
+
1165
+ <ColorPalette
1166
+ label={ __( 'Color' ) }
1167
+ value={ backgroundGradientSecondColor }
1168
+ onChange={ changeBackgroundGradientSecondColor }
1169
+ />
1170
+
1171
+ <RangeControl
1172
+ label={ __( 'Location' ) }
1173
+ value={ backgroundGradientSecondLocation }
1174
+ onChange={ changeBackgroundGradientSecondLocation }
1175
+ min={ 0 }
1176
+ max={ 100 }
1177
+ />
1178
+
1179
+ <SelectControl
1180
+ label={ __( 'Type' ) }
1181
+ value={ backgroundGradientType }
1182
+ options={ [
1183
+ { label: 'Linear', value: 'linear' },
1184
+ { label: 'Radial', value: 'radial' }
1185
+ ] }
1186
+ onChange={ changeBackgroundGradientType }
1187
+ />
1188
+
1189
+ { 'linear' === backgroundGradientType ?
1190
+ <RangeControl
1191
+ label={ __( 'Angle' ) }
1192
+ value={ backgroundGradientAngle }
1193
+ onChange={ changeBackgroundGradientAngle }
1194
+ min={ 0 }
1195
+ max={ 360 }
1196
+ /> :
1197
+ <SelectControl
1198
+ label={ __( 'Position' ) }
1199
+ value={ backgroundGradientPosition }
1200
+ options={ [
1201
+ { label: 'Top Left', value: 'top left' },
1202
+ { label: 'Top Center', value: 'top center' },
1203
+ { label: 'Top Right', value: 'top right' },
1204
+ { label: 'Center Left', value: 'center left' },
1205
+ { label: 'Center Center', value: 'center center' },
1206
+ { label: 'Center Right', value: 'center right' },
1207
+ { label: 'Bottom Left', value: 'bottom left' },
1208
+ { label: 'Bottom Center', value: 'bottom center' },
1209
+ { label: 'Bottom Right', value: 'bottom right' }
1210
+ ] }
1211
+ onChange={ changeBackgroundGradientPosition }
1212
+ />
1213
+ }
1214
+ </Fragment>
1215
+ )}
1216
+ </PanelBody>
1217
+
1218
+ <PanelBody
1219
+ title={ __( 'Border' ) }
1220
+ className="wp-block-themeisle-border-container"
1221
+ initialOpen={ false }
1222
+ >
1223
+ <SizeControl
1224
+ label={ __( 'Border Width' ) }
1225
+ minus={ false }
1226
+ responsive={ false }
1227
+ changeType={ changeBorderType }
1228
+ changeValue={ changeBorder }
1229
+ sizeValue={ border }
1230
+ sizeType={ borderType }
1231
+ >
1232
+ <RangeControl
1233
+ label={ __( 'Border Top' ) }
1234
+ beforeIcon="arrow-up"
1235
+ value={ borderTop }
1236
+ onChange={ changeBorderTop }
1237
+ min={ 0 }
1238
+ max={ 500 }
1239
+ />
1240
+
1241
+ <RangeControl
1242
+ label={ __( 'Border Right' ) }
1243
+ beforeIcon="arrow-right"
1244
+ value={ borderRight }
1245
+ onChange={ changeBorderRight }
1246
+ min={ 0 }
1247
+ max={ 500 }
1248
+ />
1249
+
1250
+ <RangeControl
1251
+ label={ __( 'Border Bottom' ) }
1252
+ beforeIcon="arrow-down"
1253
+ value={ borderBottom }
1254
+ onChange={ changeBorderBottom }
1255
+ min={ 0 }
1256
+ max={ 500 }
1257
+ />
1258
+
1259
+ <RangeControl
1260
+ label={ __( 'Border Left' ) }
1261
+ beforeIcon="arrow-left"
1262
+ value={ borderLeft }
1263
+ onChange={ changeBorderLeft }
1264
+ min={ 0 }
1265
+ max={ 500 }
1266
+ />
1267
+ </SizeControl>
1268
+
1269
+ <Fragment>
1270
+ <p>{ __( 'Border Color' ) }</p>
1271
+
1272
+ <ColorPalette
1273
+ label={ 'Border Color' }
1274
+ value={ borderColor }
1275
+ onChange={ changeBorderColor }
1276
+ />
1277
+ </Fragment>
1278
+
1279
+ <SizeControl
1280
+ label={ __( 'Border Radius' ) }
1281
+ minus={ false }
1282
+ responsive={ false }
1283
+ changeType={ changeBorderRadiusType }
1284
+ changeValue={ changeBorderRadius }
1285
+ sizeValue={ borderRadius }
1286
+ sizeType={ borderRadiusType }
1287
+ >
1288
+ <RangeControl
1289
+ label={ __( 'Radius Top Left' ) }
1290
+ beforeIcon="arrow-up"
1291
+ value={ borderRadiusTop }
1292
+ onChange={ changeBorderRadiusTop }
1293
+ min={ 0 }
1294
+ max={ 500 }
1295
+ />
1296
+
1297
+ <RangeControl
1298
+ label={ __( 'Radius Top Right' ) }
1299
+ beforeIcon="arrow-right"
1300
+ value={ borderRadiusRight }
1301
+ onChange={ changeBorderRadiusRight }
1302
+ min={ 0 }
1303
+ max={ 500 }
1304
+ />
1305
+
1306
+ <RangeControl
1307
+ label={ __( 'Radius Bottom Right' ) }
1308
+ beforeIcon="arrow-down"
1309
+ value={ borderRadiusBottom }
1310
+ onChange={ changeBorderRadiusBottom }
1311
+ min={ 0 }
1312
+ max={ 500 }
1313
+ />
1314
+
1315
+ <RangeControl
1316
+ label={ __( 'Radius Bottom Left' ) }
1317
+ beforeIcon="arrow-left"
1318
+ value={ borderRadiusLeft }
1319
+ onChange={ changeBorderRadiusLeft }
1320
+ min={ 0 }
1321
+ max={ 500 }
1322
+ />
1323
+ </SizeControl>
1324
+
1325
+ <ToggleControl
1326
+ label={ 'Box Shadow' }
1327
+ checked={ boxShadow }
1328
+ onChange={ changeBoxShadow }
1329
+ />
1330
+
1331
+ { boxShadow && (
1332
+ <Fragment>
1333
+
1334
+ <Fragment>
1335
+ <p>{ __( 'Shadow Color' ) }</p>
1336
+
1337
+ <ColorPalette
1338
+ label={ 'Shadow Color' }
1339
+ value={ boxShadowColor }
1340
+ onChange={ changeBoxShadowColor }
1341
+ />
1342
+ </Fragment>
1343
+
1344
+ <ControlPanelControl
1345
+ label={ 'Border Shadow' }
1346
+ >
1347
+
1348
+ <RangeControl
1349
+ label={ __( 'Opacity' ) }
1350
+ value={ boxShadowColorOpacity }
1351
+ onChange={ changeBoxShadowColorOpacity }
1352
+ min={ 0 }
1353
+ max={ 100 }
1354
+ />
1355
+
1356
+ <RangeControl
1357
+ label={ __( 'Blur' ) }
1358
+ value={ boxShadowBlur }
1359
+ onChange={ changeBoxShadowBlur }
1360
+ min={ 0 }
1361
+ max={ 100 }
1362
+ />
1363
+
1364
+ <RangeControl
1365
+ label={ __( 'Spread' ) }
1366
+ value={ boxShadowSpread }
1367
+ onChange={ changeBoxShadowSpread }
1368
+ min={ -100 }
1369
+ max={ 100 }
1370
+ />
1371
+
1372
+ <RangeControl
1373
+ label={ __( 'Horizontal' ) }
1374
+ value={ boxShadowHorizontal }
1375
+ onChange={ changeBoxShadowHorizontal }
1376
+ min={ -100 }
1377
+ max={ 100 }
1378
+ />
1379
+
1380
+ <RangeControl
1381
+ label={ __( 'Vertical' ) }
1382
+ value={ boxShadowVertical }
1383
+ onChange={ changeBoxShadowVertical }
1384
+ min={ -100 }
1385
+ max={ 100 }
1386
+ />
1387
+
1388
+ </ControlPanelControl>
1389
+
1390
+ </Fragment>
1391
+ )}
1392
+ </PanelBody>
1393
+ </Fragment>
1394
+ ) || 'advanced' === tab && (
1395
+
1396
+ <PanelBody
1397
+ title={ __( 'Section Settings' ) }
1398
+ >
1399
+ <SelectControl
1400
+ label={ __( 'HTML Tag' ) }
1401
+ value={ columnsHTMLTag }
1402
+ options={ [
1403
+ { label: 'Default', value: 'div' },
1404
+ { label: 'div', value: 'div' },
1405
+ { label: 'section', value: 'section' },
1406
+ { label: 'header', value: 'header' },
1407
+ { label: 'footer', value: 'footer' },
1408
+ { label: 'article', value: 'article' },
1409
+ { label: 'main', value: 'main' }
1410
+ ] }
1411
+ onChange={ changeColumnsHTMLTag }
1412
+ />
1413
+ </PanelBody>
1414
+
1415
+ )}
1416
+ </InspectorControls>
1417
+
1418
+ <Tag
1419
+ className={ props.className }
1420
+ style={ style }
1421
+ >
1422
+ <InnerBlocks templateLock={ false } />
1423
+ </Tag>
1424
+ </Fragment>
1425
+ );
1426
+ }),
1427
+
1428
+ save: props => {
1429
+ const {
1430
+ id,
1431
+ backgroundType,
1432
+ backgroundColor,
1433
+ backgroundImageURL,
1434
+ backgroundAttachment,
1435
+ backgroundPosition,
1436
+ backgroundRepeat,
1437
+ backgroundSize,
1438
+ backgroundGradientFirstColor,
1439
+ backgroundGradientFirstLocation,
1440
+ backgroundGradientSecondColor,
1441
+ backgroundGradientSecondLocation,
1442
+ backgroundGradientType,
1443
+ backgroundGradientAngle,
1444
+ backgroundGradientPosition,
1445
+ borderType,
1446
+ border,
1447
+ borderTop,
1448
+ borderRight,
1449
+ borderBottom,
1450
+ borderLeft,
1451
+ borderColor,
1452
+ borderRadiusType,
1453
+ borderRadius,
1454
+ borderRadiusTop,
1455
+ borderRadiusRight,
1456
+ borderRadiusBottom,
1457
+ borderRadiusLeft,
1458
+ boxShadow,
1459
+ boxShadowColor,
1460
+ boxShadowColorOpacity,
1461
+ boxShadowBlur,
1462
+ boxShadowSpread,
1463
+ boxShadowHorizontal,
1464
+ boxShadowVertical,
1465
+ columnsHTMLTag
1466
+ } = props.attributes;
1467
+
1468
+ const Tag = columnsHTMLTag;
1469
+
1470
+ let background, borderStyle, borderRadiusStyle, boxShadowStyle;
1471
+
1472
+ if ( 'color' === backgroundType ) {
1473
+ background = {
1474
+ background: backgroundColor
1475
+ };
1476
+ }
1477
+
1478
+ if ( 'image' === backgroundType ) {
1479
+ background = {
1480
+ backgroundImage: `url( '${ backgroundImageURL }' )`,
1481
+ backgroundAttachment,
1482
+ backgroundPosition,
1483
+ backgroundRepeat,
1484
+ backgroundSize
1485
+ };
1486
+ }
1487
+
1488
+ if ( 'gradient' === backgroundType ) {
1489
+ let direction;
1490
+
1491
+ if ( 'linear' === backgroundGradientType ) {
1492
+ direction = `${ backgroundGradientAngle }deg`;
1493
+ } else {
1494
+ direction = `at ${ backgroundGradientPosition }`;
1495
+ }
1496
+
1497
+ background = {
1498
+ background: `${ backgroundGradientType }-gradient( ${ direction }, ${ backgroundGradientFirstColor || 'rgba( 0, 0, 0, 0 )' } ${ backgroundGradientFirstLocation }%, ${ backgroundGradientSecondColor || 'rgba( 0, 0, 0, 0 )' } ${ backgroundGradientSecondLocation }% )`
1499
+ };
1500
+ }
1501
+
1502
+ if ( 'linked' === borderType ) {
1503
+ borderStyle = {
1504
+ borderWidth: `${ border }px`,
1505
+ borderStyle: 'solid',
1506
+ borderColor: borderColor
1507
+ };
1508
+ }
1509
+
1510
+ if ( 'unlinked' === borderType ) {
1511
+ borderStyle = {
1512
+ borderTopWidth: `${ borderTop }px`,
1513
+ borderRightWidth: `${ borderRight }px`,
1514
+ borderBottomWidth: `${ borderBottom }px`,
1515
+ borderLeftWidth: `${ borderLeft }px`,