Gutenberg Blocks and Template Library by Otter - Version 1.1.1

Version Description

  • 2019-01-25
Download this release

Release Info

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

Code changes from version 1.1.0 to 1.1.1

Files changed (44) hide show
  1. CHANGELOG.md +21 -0
  2. otter-blocks.php +1 -1
  3. readme.md +50 -1
  4. readme.txt +50 -1
  5. screenshot-1.png +0 -0
  6. screenshot-2.png +0 -0
  7. screenshot-3.png +0 -0
  8. screenshot-4.png +0 -0
  9. vendor/autoload.php +1 -1
  10. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/advanced-column.js +158 -88
  11. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/advanced-columns.js +149 -228
  12. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/editor.scss +16 -19
  13. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/inboarding/editor.scss +132 -153
  14. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/inboarding/library.js +77 -88
  15. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/layout-control/editor.scss +4 -0
  16. vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/style.scss +3 -0
  17. vendor/codeinwp/gutenberg-blocks/blocks/advanced-heading/editor.scss +37 -0
  18. vendor/codeinwp/gutenberg-blocks/blocks/advanced-heading/index.js +198 -119
  19. vendor/codeinwp/gutenberg-blocks/blocks/advanced-heading/style.scss +5 -0
  20. vendor/codeinwp/gutenberg-blocks/blocks/button-group/editor.scss +64 -0
  21. vendor/codeinwp/gutenberg-blocks/blocks/button-group/index.js +127 -19
  22. vendor/codeinwp/gutenberg-blocks/blocks/button-group/style.scss +32 -1
  23. vendor/codeinwp/gutenberg-blocks/blocks/font-awesome-icons/index.js +3 -3
  24. vendor/codeinwp/gutenberg-blocks/blocks/google-map/index.js +39 -28
  25. vendor/codeinwp/gutenberg-blocks/blocks/post-grid/index.js +1 -1
  26. vendor/codeinwp/gutenberg-blocks/blocks/sharing-icons/class-sharing-icons-block.php +12 -2
  27. vendor/codeinwp/gutenberg-blocks/build/block.js +1 -1
  28. vendor/codeinwp/gutenberg-blocks/build/edit-blocks.css +7 -7
  29. vendor/codeinwp/gutenberg-blocks/build/style.css +3 -2
  30. vendor/codeinwp/gutenberg-blocks/build/vendor.js +3 -3
  31. vendor/codeinwp/gutenberg-blocks/class-gutenberg-blocks.php +74 -15
  32. vendor/codeinwp/gutenberg-blocks/components/google-fonts-control/index.js +114 -78
  33. vendor/codeinwp/gutenberg-blocks/components/icon-picker-control/index.js +1 -1
  34. vendor/codeinwp/gutenberg-blocks/components/responsive-control/editor.scss +4 -0
  35. vendor/codeinwp/gutenberg-blocks/components/size-control/editor.scss +4 -0
  36. vendor/codeinwp/gutenberg-blocks/composer.json +1 -1
  37. vendor/codeinwp/gutenberg-blocks/docs/blocks.md +81 -0
  38. vendor/codeinwp/gutenberg-blocks/docs/images/template-library.png +0 -0
  39. vendor/codeinwp/gutenberg-blocks/docs/index.md +10 -0
  40. vendor/codeinwp/gutenberg-blocks/docs/template-library.md +82 -0
  41. vendor/codeinwp/gutenberg-blocks/load.php +1 -1
  42. vendor/codeinwp/gutenberg-blocks/package.json +1 -1
  43. vendor/composer/autoload_real.php +5 -5
  44. vendor/composer/installed.json +4 -4
CHANGELOG.md CHANGED
@@ -1,4 +1,25 @@
1
2
### v1.1.0 - 2019-01-18
3
**Changes:**
4
* Added Section Block, with Template Library
1
2
+ ### v1.1.1 - 2019-01-25
3
+ **Changes:**
4
+ * Added Developer Documentation
5
+ * Added Typography Option to Block Toolbar
6
+ * Fixed Padding Resizer
7
+ * Made Template Library Responsive
8
+ * Fixed Close Icon Alignment on Chrome
9
+ * Fixed Alignment with Span Tag in Advanced Heading Block
10
+ * Added Line Height Option to Button Group
11
+ * Added Option to Collapse Buttons
12
+ * Fixed Icon Issue in Button Group
13
+ * Increased Maximum Font Size Limit
14
+ * Fixed Font Weight Value Error
15
+ * Fixed Fatal Error Caused by Gutenberg Plugin
16
+ * Fixed Unescaped Character Preview in Post Grid
17
+ * Improved Handling of Unique Block IDs
18
+ * Added Left/Right Margin Options to Section Column
19
+ * Added Controls for Responsive Alignment to Advanced Heading Block
20
+ * Fixed Vertical Alignment in Section Block
21
+ * Fixed Alignment Issue in Social Sharing Block
22
+
23
### v1.1.0 - 2019-01-18
24
**Changes:**
25
* Added Section Block, with Template Library
otter-blocks.php CHANGED
@@ -3,7 +3,7 @@
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+
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.1
7
* Author: ThemeIsle
8
* Author URI: https://themeisle.com
9
* License: GPL-2.0+
readme.md CHANGED
@@ -14,6 +14,8 @@
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
@@ -42,4 +44,51 @@ It has:
42
1. Otter Blocks
43
2. Section Block
44
3. Template Library
45
- 4. Pre-built Section
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
+ [Live Demo](http://demo.themeisle.com/otter-playground/)
18
+
19
See what you can do with Otter:
20
21
https://www.youtube.com/watch?v=uLNL1WGnzWo
44
1. Otter Blocks
45
2. Section Block
46
3. Template Library
47
+ 4. Pre-built Section
48
+
49
+ ## Changelog ##
50
+ ### 1.1.1 - 2019-01-25 ###
51
+
52
+ * Added Developer Documentation
53
+ * Added Typography Option to Block Toolbar
54
+ * Fixed Padding Resizer
55
+ * Made Template Library Responsive
56
+ * Fixed Close Icon Alignment on Chrome
57
+ * Fixed Alignment with Span Tag in Advanced Heading Block
58
+ * Added Line Height Option to Button Group
59
+ * Added Option to Collapse Buttons
60
+ * Fixed Icon Issue in Button Group
61
+ * Increased Maximum Font Size Limit
62
+ * Fixed Font Weight Value Error
63
+ * Fixed Fatal Error Caused by Gutenberg Plugin
64
+ * Fixed Unescaped Character Preview in Post Grid
65
+ * Improved Handling of Unique Block IDs
66
+ * Added Left/Right Margin Options to Section Column
67
+ * Added Controls for Responsive Alignment to Advanced Heading Block
68
+ * Fixed Vertical Alignment in Section Block
69
+ * Fixed Alignment Issue in Social Sharing Block
70
+
71
+
72
+
73
+ ### 1.1.0 - 2019-01-18 ###
74
+ * Added Section Block, with Template Library
75
+ * Added Advanced Heading Block
76
+ * Added Button Group Block
77
+ * Deprecated Notice, Click to Tweet, Chart, Accordion, blocks
78
+
79
+ ### 1.0.4 - 2018-12-07 ###
80
+ * Fixed dependencies issue
81
+
82
+ ### 1.0.3 - 2018-12-07 ###
83
+ * Fixes issue with Posts Grid block displaying wrong author
84
+
85
+ ### 1.0.2 - 2018-12-05 ###
86
+ * Fixed Notice Block and Font Awesome Icons
87
+ * Optimized build size
88
+
89
+ ### 1.0.1 - 2018-10-29 ###
90
+ * Bug fixed with Google Map block.
91
+
92
+ ### 1.0.0 - 2018-10-17 ###
93
+ * Adds docker env.
94
+ * Adds hash back.
readme.txt CHANGED
@@ -14,6 +14,8 @@ Create beautiful and attracting posts, pages, and landing pages with Otter: Bloc
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
@@ -42,4 +44,51 @@ It has:
42
1. Otter Blocks
43
2. Section Block
44
3. Template Library
45
- 4. Pre-built Section
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
+ [Live Demo](http://demo.themeisle.com/otter-playground/)
18
+
19
See what you can do with Otter:
20
21
https://www.youtube.com/watch?v=uLNL1WGnzWo
44
1. Otter Blocks
45
2. Section Block
46
3. Template Library
47
+ 4. Pre-built Section
48
+
49
+ == Changelog ==
50
+ = 1.1.1 - 2019-01-25 =
51
+
52
+ * Added Developer Documentation
53
+ * Added Typography Option to Block Toolbar
54
+ * Fixed Padding Resizer
55
+ * Made Template Library Responsive
56
+ * Fixed Close Icon Alignment on Chrome
57
+ * Fixed Alignment with Span Tag in Advanced Heading Block
58
+ * Added Line Height Option to Button Group
59
+ * Added Option to Collapse Buttons
60
+ * Fixed Icon Issue in Button Group
61
+ * Increased Maximum Font Size Limit
62
+ * Fixed Font Weight Value Error
63
+ * Fixed Fatal Error Caused by Gutenberg Plugin
64
+ * Fixed Unescaped Character Preview in Post Grid
65
+ * Improved Handling of Unique Block IDs
66
+ * Added Left/Right Margin Options to Section Column
67
+ * Added Controls for Responsive Alignment to Advanced Heading Block
68
+ * Fixed Vertical Alignment in Section Block
69
+ * Fixed Alignment Issue in Social Sharing Block
70
+
71
+
72
+
73
+ = 1.1.0 - 2019-01-18 =
74
+ * Added Section Block, with Template Library
75
+ * Added Advanced Heading Block
76
+ * Added Button Group Block
77
+ * Deprecated Notice, Click to Tweet, Chart, Accordion, blocks
78
+
79
+ = 1.0.4 - 2018-12-07 =
80
+ * Fixed dependencies issue
81
+
82
+ = 1.0.3 - 2018-12-07 =
83
+ * Fixes issue with Posts Grid block displaying wrong author
84
+
85
+ = 1.0.2 - 2018-12-05 =
86
+ * Fixed Notice Block and Font Awesome Icons
87
+ * Optimized build size
88
+
89
+ = 1.0.1 - 2018-10-29 =
90
+ * Bug fixed with Google Map block.
91
+
92
+ = 1.0.0 - 2018-10-17 =
93
+ * Adds docker env.
94
+ * Adds hash back.
screenshot-1.png DELETED
Binary file
screenshot-2.png DELETED
Binary file
screenshot-3.png DELETED
Binary file
screenshot-4.png DELETED
Binary file
vendor/autoload.php CHANGED
@@ -4,4 +4,4 @@
4
5
require_once __DIR__ . '/composer' . '/autoload_real.php';
6
7
- return ComposerAutoloaderInitcdd6c77c048f2c3249a1159bbd08617a::getLoader();
4
5
require_once __DIR__ . '/composer' . '/autoload_real.php';
6
7
+ return ComposerAutoloaderInitb0692e6055f008c01f40fc1e4b048b2f::getLoader();
vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/advanced-column.js CHANGED
@@ -133,15 +133,15 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
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',
@@ -167,6 +167,18 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
167
type: 'number',
168
default: 20
169
},
170
marginBottom: {
171
type: 'number',
172
default: 20
@@ -179,6 +191,18 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
179
type: 'number',
180
default: 20
181
},
182
backgroundType: {
183
type: 'string',
184
default: 'color'
@@ -389,9 +413,15 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
389
marginTop,
390
marginTopTablet,
391
marginTopMobile,
392
marginBottom,
393
marginBottomTablet,
394
marginBottomMobile,
395
backgroundType,
396
backgroundColor,
397
backgroundImageID,
@@ -430,7 +460,7 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
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
}
@@ -452,7 +482,9 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
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
@@ -463,7 +495,9 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
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
@@ -474,7 +508,9 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
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
@@ -579,72 +615,62 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
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
@@ -661,44 +687,62 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
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
@@ -1001,6 +1045,19 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
1001
max={ 500 }
1002
/>
1003
1004
<RangeControl
1005
label={ __( 'Margin Bottom' ) }
1006
beforeIcon="arrow-down"
@@ -1013,6 +1070,19 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
1013
min={ -500 }
1014
max={ 500 }
1015
/>
1016
</SizeControl>
1017
</PanelBody>
1018
</Fragment>
@@ -1342,7 +1412,7 @@ registerBlockType( 'themeisle-blocks/advanced-column', {
1342
</Fragment>
1343
1344
<ControlPanelControl
1345
- label={ 'Border Shadow' }
1346
>
1347
1348
<RangeControl
133
},
134
marginType: {
135
type: 'string',
136
+ default: 'unlinked'
137
},
138
marginTypeTablet: {
139
type: 'string',
140
+ default: 'unlinked'
141
},
142
marginTypeMobile: {
143
type: 'string',
144
+ default: 'unlinked'
145
},
146
margin: {
147
type: 'number',
167
type: 'number',
168
default: 20
169
},
170
+ marginRight: {
171
+ type: 'number',
172
+ default: 0
173
+ },
174
+ marginRightTablet: {
175
+ type: 'number',
176
+ default: 0
177
+ },
178
+ marginRightMobile: {
179
+ type: 'number',
180
+ default: 0
181
+ },
182
marginBottom: {
183
type: 'number',
184
default: 20
191
type: 'number',
192
default: 20
193
},
194
+ marginLeft: {
195
+ type: 'number',
196
+ default: 0
197
+ },
198
+ marginLeftTablet: {
199
+ type: 'number',
200
+ default: 0
201
+ },
202
+ marginLeftMobile: {
203
+ type: 'number',
204
+ default: 0
205
+ },
206
backgroundType: {
207
type: 'string',
208
default: 'color'
413
marginTop,
414
marginTopTablet,
415
marginTopMobile,
416
+ marginRight,
417
+ marginRightTablet,
418
+ marginRightMobile,
419
marginBottom,
420
marginBottomTablet,
421
marginBottomMobile,
422
+ marginLeft,
423
+ marginLeftTablet,
424
+ marginLeftMobile,
425
backgroundType,
426
backgroundColor,
427
backgroundImageID,
460
columnsHTMLTag
461
} = props.attributes;
462
463
+ if ( id === undefined || id.substr( id.length - 8 ) !== props.clientId.substr( 0, 8 ) ) {
464
const instanceId = `wp-block-themeisle-blocks-advanced-column-${ props.clientId.substr( 0, 8 ) }`;
465
props.setAttributes({ id: instanceId });
466
}
482
paddingBottom: 'linked' === paddingType ? `${ padding }px` : `${ paddingBottom }px`,
483
paddingLeft: 'linked' === paddingType ? `${ padding }px` : `${ paddingLeft }px`,
484
marginTop: 'linked' === marginType ? `${ margin }px` : `${ marginTop }px`,
485
+ marginRight: 'linked' === marginType ? `${ margin }px` : `${ marginRight }px`,
486
+ marginBottom: 'linked' === marginType ? `${ margin }px` : `${ marginBottom }px`,
487
+ marginLeft: 'linked' === marginType ? `${ margin }px` : `${ marginLeft }px`
488
};
489
}
490
495
paddingBottom: 'linked' === paddingTypeTablet ? `${ paddingTablet }px` : `${ paddingBottomTablet }px`,
496
paddingLeft: 'linked' === paddingTypeTablet ? `${ paddingTablet }px` : `${ paddingLeftTablet }px`,
497
marginTop: 'linked' === marginTypeTablet ? `${ marginTablet }px` : `${ marginTopTablet }px`,
498
+ marginRight: 'linked' === marginTypeTablet ? `${ marginTablet }px` : `${ marginRightTablet }px`,
499
+ marginBottom: 'linked' === marginTypeTablet ? `${ marginTablet }px` : `${ marginBottomTablet }px`,
500
+ marginLeft: 'linked' === marginTypeTablet ? `${ marginTablet }px` : `${ marginLeftTablet }px`
501
};
502
}
503
508
paddingBottom: 'linked' === paddingTypeMobile ? `${ paddingMobile }px` : `${ paddingBottomMobile }px`,
509
paddingLeft: 'linked' === paddingTypeMobile ? `${ paddingMobile }px` : `${ paddingLeftMobile }px`,
510
marginTop: 'linked' === marginTypeMobile ? `${ marginMobile }px` : `${ marginTopMobile }px`,
511
+ marginRight: 'linked' === marginTypeMobile ? `${ marginMobile }px` : `${ marginRightMobile }px`,
512
+ marginBottom: 'linked' === marginTypeMobile ? `${ marginMobile }px` : `${ marginBottomMobile }px`,
513
+ marginLeft: 'linked' === marginTypeMobile ? `${ marginMobile }px` : `${ marginLeftMobile }px`
514
};
515
}
516
615
};
616
617
const changePadding = value => {
618
+ if ( 'desktop' === paddingViewType ) {
619
+ props.setAttributes({ padding: value });
620
+ }
621
+ if ( 'tablet' === paddingViewType ) {
622
+ props.setAttributes({ paddingTablet: value });
623
+ }
624
+ if ( 'mobile' === paddingViewType ) {
625
+ props.setAttributes({ paddingMobile: value });
626
}
627
};
628
629
const changePaddingTop = value => {
630
+ if ( 'desktop' === paddingViewType ) {
631
+ props.setAttributes({ paddingTop: value });
632
+ }
633
+ if ( 'tablet' === paddingViewType ) {
634
+ props.setAttributes({ paddingTopTablet: value });
635
+ }
636
+ if ( 'mobile' === paddingViewType ) {
637
+ props.setAttributes({ paddingTopMobile: value });
638
}
639
};
640
641
const changePaddingRight = value => {
642
+ if ( 'desktop' === paddingViewType ) {
643
+ props.setAttributes({ paddingRight: value });
644
+ }
645
+ if ( 'tablet' === paddingViewType ) {
646
+ props.setAttributes({ paddingRightTablet: value });
647
+ }
648
+ if ( 'mobile' === paddingViewType ) {
649
+ props.setAttributes({ paddingRightMobile: value });
650
}
651
};
652
653
const changePaddingBottom = value => {
654
+ if ( 'desktop' === paddingViewType ) {
655
+ props.setAttributes({ paddingBottom: value });
656
+ }
657
+ if ( 'tablet' === paddingViewType ) {
658
+ props.setAttributes({ paddingBottomTablet: value });
659
+ }
660
+ if ( 'mobile' === paddingViewType ) {
661
+ props.setAttributes({ paddingBottomMobile: value });
662
}
663
};
664
665
const changePaddingLeft = value => {
666
+ if ( 'desktop' === paddingViewType ) {
667
+ props.setAttributes({ paddingLeft: value });
668
+ }
669
+ if ( 'tablet' === paddingViewType ) {
670
+ props.setAttributes({ paddingLeftTablet: value });
671
+ }
672
+ if ( 'mobile' === paddingViewType ) {
673
+ props.setAttributes({ paddingLeftMobile: value });
674
}
675
};
676
687
};
688
689
const changeMargin = value => {
690
+ if ( 'desktop' === marginViewType ) {
691
+ props.setAttributes({ margin: value });
692
+ }
693
+ if ( 'tablet' === marginViewType ) {
694
+ props.setAttributes({ marginTablet: value });
695
+ }
696
+ if ( 'mobile' === marginViewType ) {
697
+ props.setAttributes({ marginMobile: value });
698
}
699
};
700
701
const changeMarginTop = value => {
702
+ if ( 'desktop' === marginViewType ) {
703
+ props.setAttributes({ marginTop: value });
704
+ }
705
+ if ( 'tablet' === marginViewType ) {
706
+ props.setAttributes({ marginTopTablet: value });
707
+ }
708
+ if ( 'mobile' === marginViewType ) {
709
+ props.setAttributes({ marginTopMobile: value });
710
+ }
711
+ };
712
+
713
+ const changeMarginRight = value => {
714
+ if ( 'desktop' === marginViewType ) {
715
+ props.setAttributes({ marginRight: value });
716
+ }
717
+ if ( 'tablet' === marginViewType ) {
718
+ props.setAttributes({ marginRightTablet: value });
719
+ }
720
+ if ( 'mobile' === marginViewType ) {
721
+ props.setAttributes({ marginRightMobile: value });
722
}
723
};
724
725
const changeMarginBottom = value => {
726
+ if ( 'desktop' === marginViewType ) {
727
+ props.setAttributes({ marginBottom: value });
728
+ }
729
+ if ( 'tablet' === marginViewType ) {
730
+ props.setAttributes({ marginBottomTablet: value });
731
+ }
732
+ if ( 'mobile' === marginViewType ) {
733
+ props.setAttributes({ marginBottomMobile: value });
734
+ }
735
+ };
736
+
737
+ const changeMarginLeft = value => {
738
+ if ( 'desktop' === marginViewType ) {
739
+ props.setAttributes({ marginLeft: value });
740
+ }
741
+ if ( 'tablet' === marginViewType ) {
742
+ props.setAttributes({ marginLeftTablet: value });
743
+ }
744
+ if ( 'mobile' === marginViewType ) {
745
+ props.setAttributes({ marginLeftMobile: value });
746
}
747
};
748
1045
max={ 500 }
1046
/>
1047
1048
+ <RangeControl
1049
+ label={ __( 'Margin Right' ) }
1050
+ beforeIcon="arrow-right"
1051
+ value={
1052
+ ( 'desktop' === marginViewType ) && marginRight ||
1053
+ ( 'tablet' === marginViewType ) && marginRightTablet ||
1054
+ ( 'mobile' === marginViewType ) && marginRightMobile
1055
+ }
1056
+ onChange={ changeMarginRight }
1057
+ min={ -1000 }
1058
+ max={ 1000 }
1059
+ />
1060
+
1061
<RangeControl
1062
label={ __( 'Margin Bottom' ) }
1063
beforeIcon="arrow-down"
1070
min={ -500 }
1071
max={ 500 }
1072
/>
1073
+
1074
+ <RangeControl
1075
+ label={ __( 'Margin Left' ) }
1076
+ beforeIcon="arrow-left"
1077
+ value={
1078
+ ( 'desktop' === marginViewType ) && marginLeft ||
1079
+ ( 'tablet' === marginViewType ) && marginLeftTablet ||
1080
+ ( 'mobile' === marginViewType ) && marginLeftMobile
1081
+ }
1082
+ onChange={ changeMarginLeft }
1083
+ min={ -1000 }
1084
+ max={ 1000 }
1085
+ />
1086
</SizeControl>
1087
</PanelBody>
1088
</Fragment>
1412
</Fragment>
1413
1414
<ControlPanelControl
1415
+ label={ 'Shadow Properties' }
1416
>
1417
1418
<RangeControl
vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/advanced-columns.js CHANGED
@@ -176,15 +176,15 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
176
},
177
marginType: {
178
type: 'string',
179
- default: 'linked'
180
},
181
marginTypeTablet: {
182
type: 'string',
183
- default: 'linked'
184
},
185
marginTypeMobile: {
186
type: 'string',
187
- default: 'linked'
188
},
189
margin: {
190
type: 'number',
@@ -735,7 +735,7 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
735
columnsHTMLTag
736
} = props.attributes;
737
738
- if ( id === undefined ) {
739
const instanceId = `wp-block-themeisle-blocks-advanced-columns-${ props.clientId.substr( 0, 8 ) }`;
740
props.setAttributes({ id: instanceId });
741
}
@@ -858,7 +858,8 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
858
...borderStyle,
859
...borderRadiusStyle,
860
...boxShadowStyle,
861
- alignItems: horizontalAlign
862
};
863
864
if ( 'color' === backgroundOverlayType ) {
@@ -914,8 +915,7 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
914
`has-desktop-${ layout }-layout`,
915
`has-tablet-${ layoutTablet }-layout`,
916
`has-mobile-${ layoutMobile }-layout`,
917
- `has-${ columnsGap }-gap`,
918
- `has-vertical-${ verticalAlign }`
919
);
920
921
const ALLOWED_BLOCKS = [ 'themeisle-blocks/advanced-columns' ];
@@ -1106,72 +1106,62 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1106
};
1107
1108
const changePadding = value => {
1109
- if ( 0 <= value && 500 >= value ) {
1110
- if ( 'desktop' === paddingViewType ) {
1111
- props.setAttributes({ padding: value });
1112
- }
1113
- if ( 'tablet' === paddingViewType ) {
1114
- props.setAttributes({ paddingTablet: value });
1115
- }
1116
- if ( 'mobile' === paddingViewType ) {
1117
- props.setAttributes({ paddingMobile: value });
1118
- }
1119
}
1120
};
1121
1122
const changePaddingTop = value => {
1123
- if ( 0 <= value && 500 >= value ) {
1124
- if ( 'desktop' === paddingViewType ) {
1125
- props.setAttributes({ paddingTop: value });
1126
- }
1127
- if ( 'tablet' === paddingViewType ) {
1128
- props.setAttributes({ paddingTopTablet: value });
1129
- }
1130
- if ( 'mobile' === paddingViewType ) {
1131
- props.setAttributes({ paddingTopMobile: value });
1132
- }
1133
}
1134
};
1135
1136
const changePaddingRight = value => {
1137
- if ( 0 <= value && 500 >= value ) {
1138
- if ( 'desktop' === paddingViewType ) {
1139
- props.setAttributes({ paddingRight: value });
1140
- }
1141
- if ( 'tablet' === paddingViewType ) {
1142
- props.setAttributes({ paddingRightTablet: value });
1143
- }
1144
- if ( 'mobile' === paddingViewType ) {
1145
- props.setAttributes({ paddingRightMobile: value });
1146
- }
1147
}
1148
};
1149
1150
const changePaddingBottom = value => {
1151
- if ( 0 <= value && 500 >= value ) {
1152
- if ( 'desktop' === paddingViewType ) {
1153
- props.setAttributes({ paddingBottom: value });
1154
- }
1155
- if ( 'tablet' === paddingViewType ) {
1156
- props.setAttributes({ paddingBottomTablet: value });
1157
- }
1158
- if ( 'mobile' === paddingViewType ) {
1159
- props.setAttributes({ paddingBottomMobile: value });
1160
- }
1161
}
1162
};
1163
1164
const changePaddingLeft = value => {
1165
- if ( 0 <= value && 500 >= value ) {
1166
- if ( 'desktop' === paddingViewType ) {
1167
- props.setAttributes({ paddingLeft: value });
1168
- }
1169
- if ( 'tablet' === paddingViewType ) {
1170
- props.setAttributes({ paddingLeftTablet: value });
1171
- }
1172
- if ( 'mobile' === paddingViewType ) {
1173
- props.setAttributes({ paddingLeftMobile: value });
1174
- }
1175
}
1176
};
1177
@@ -1188,44 +1178,38 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1188
};
1189
1190
const changeMargin = value => {
1191
- if ( -500 <= value && 500 >= value ) {
1192
- if ( 'desktop' === marginViewType ) {
1193
- props.setAttributes({ margin: value });
1194
- }
1195
- if ( 'tablet' === marginViewType ) {
1196
- props.setAttributes({ marginTablet: value });
1197
- }
1198
- if ( 'mobile' === marginViewType ) {
1199
- props.setAttributes({ marginMobile: value });
1200
- }
1201
}
1202
};
1203
1204
const changeMarginTop = value => {
1205
- if ( -500 <= value && 500 >= value ) {
1206
- if ( 'desktop' === marginViewType ) {
1207
- props.setAttributes({ marginTop: value });
1208
- }
1209
- if ( 'tablet' === marginViewType ) {
1210
- props.setAttributes({ marginTopTablet: value });
1211
- }
1212
- if ( 'mobile' === marginViewType ) {
1213
- props.setAttributes({ marginTopMobile: value });
1214
- }
1215
}
1216
};
1217
1218
const changeMarginBottom = value => {
1219
- if ( -500 <= value && 500 >= value ) {
1220
- if ( 'desktop' === marginViewType ) {
1221
- props.setAttributes({ marginBottom: value });
1222
- }
1223
- if ( 'tablet' === marginViewType ) {
1224
- props.setAttributes({ marginBottomTablet: value });
1225
- }
1226
- if ( 'mobile' === marginViewType ) {
1227
- props.setAttributes({ marginBottomMobile: value });
1228
- }
1229
}
1230
};
1231
@@ -1260,16 +1244,14 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1260
getColumnsHeightCustom = getColumnsHeightCustom();
1261
1262
const changeColumnsHeightCustom = value => {
1263
- if ( 0 <= value && 1000 >= value ) {
1264
- if ( 'desktop' === heightViewType ) {
1265
- props.setAttributes({ columnsHeightCustom: value });
1266
- }
1267
- if ( 'tablet' === heightViewType ) {
1268
- props.setAttributes({ columnsHeightCustomTablet: value });
1269
- }
1270
- if ( 'mobile' === heightViewType ) {
1271
- props.setAttributes({ columnsHeightCustomMobile: value });
1272
- }
1273
}
1274
};
1275
@@ -1330,9 +1312,7 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1330
};
1331
1332
const changeBackgroundGradientFirstLocation = value => {
1333
- if ( 0 <= value && 100 >= value ) {
1334
- props.setAttributes({ backgroundGradientFirstLocation: value });
1335
- }
1336
};
1337
1338
const changeBackgroundGradientSecondColor = value => {
@@ -1340,9 +1320,7 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1340
};
1341
1342
const changeBackgroundGradientSecondLocation = value => {
1343
- if ( 0 <= value && 100 >= value ) {
1344
- props.setAttributes({ backgroundGradientSecondLocation: value });
1345
- }
1346
};
1347
1348
const changeBackgroundGradientType = value => {
@@ -1350,9 +1328,7 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1350
};
1351
1352
const changeBackgroundGradientAngle = value => {
1353
- if ( 0 <= value && 360 >= value ) {
1354
- props.setAttributes({ backgroundGradientAngle: value });
1355
- }
1356
};
1357
1358
const changeBackgroundGradientPosition = value => {
@@ -1360,9 +1336,7 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1360
};
1361
1362
const changeBackgroundOverlayOpacity = value => {
1363
- if ( 0 <= value && 100 >= value ) {
1364
- props.setAttributes({ backgroundOverlayOpacity: value });
1365
- }
1366
};
1367
1368
const changeBackgroundOverlayType = value => {
@@ -1408,9 +1382,7 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1408
};
1409
1410
const changeBackgroundOverlayGradientFirstLocation = value => {
1411
- if ( 0 <= value && 100 >= value ) {
1412
- props.setAttributes({ backgroundOverlayGradientFirstLocation: value });
1413
- }
1414
};
1415
1416
const changeBackgroundOverlayGradientSecondColor = value => {
@@ -1418,9 +1390,7 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1418
};
1419
1420
const changeBackgroundOverlayGradientSecondLocation = value => {
1421
- if ( 0 <= value && 100 >= value ) {
1422
- props.setAttributes({ backgroundOverlayGradientSecondLocation: value });
1423
- }
1424
};
1425
1426
const changeBackgroundOverlayGradientType = value => {
@@ -1428,9 +1398,7 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1428
};
1429
1430
const changeBackgroundOverlayGradientAngle = value => {
1431
- if ( 0 <= value && 360 >= value ) {
1432
- props.setAttributes({ backgroundOverlayGradientAngle: value });
1433
- }
1434
};
1435
1436
const changeBackgroundOverlayGradientPosition = value => {
@@ -1438,39 +1406,27 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1438
};
1439
1440
const changebackgroundOverlayFilterBlur = value => {
1441
- if ( 0 <= value && 100 >= value ) {
1442
- props.setAttributes({ backgroundOverlayFilterBlur: value });
1443
- }
1444
};
1445
1446
const changebackgroundOverlayFilterBrightness = value => {
1447
- if ( 0 <= value && 100 >= value ) {
1448
- props.setAttributes({ backgroundOverlayFilterBrightness: value });
1449
- }
1450
};
1451
1452
const changebackgroundOverlayFilterContrast = value => {
1453
- if ( 0 <= value && 100 >= value ) {
1454
- props.setAttributes({ backgroundOverlayFilterContrast: value });
1455
- }
1456
};
1457
1458
const changebackgroundOverlayFilterGrayscale = value => {
1459
- if ( 0 <= value && 100 >= value ) {
1460
- props.setAttributes({ backgroundOverlayFilterGrayscale: value });
1461
- }
1462
};
1463
1464
const changebackgroundOverlayFilterHue = value => {
1465
- if ( 0 <= value && 100 >= value ) {
1466
- props.setAttributes({ backgroundOverlayFilterHue: value });
1467
- }
1468
};
1469
1470
const changebackgroundOverlayFilterSaturate = value => {
1471
- if ( 0 <= value && 100 >= value ) {
1472
- props.setAttributes({ backgroundOverlayFilterSaturate: value });
1473
- }
1474
};
1475
1476
const changebackgroundOverlayBlend = value => {
@@ -1482,33 +1438,23 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1482
};
1483
1484
const changeBorder = value => {
1485
- if ( 0 <= value && 500 >= value ) {
1486
- props.setAttributes({ border: value });
1487
- }
1488
};
1489
1490
const changeBorderTop = value => {
1491
- if ( 0 <= value && 500 >= value ) {
1492
- props.setAttributes({ borderTop: value });
1493
- }
1494
};
1495
1496
const changeBorderRight = value => {
1497
- if ( 0 <= value && 500 >= value ) {
1498
- props.setAttributes({ borderRight: value });
1499
- }
1500
};
1501
1502
const changeBorderBottom = value => {
1503
- if ( 0 <= value && 500 >= value ) {
1504
- props.setAttributes({ borderBottom: value });
1505
- }
1506
};
1507
1508
const changeBorderLeft = value => {
1509
- if ( 0 <= value && 500 >= value ) {
1510
- props.setAttributes({ borderLeft: value });
1511
- }
1512
};
1513
1514
const changeBorderColor = value => {
@@ -1520,33 +1466,23 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1520
};
1521
1522
const changeBorderRadius = value => {
1523
- if ( 0 <= value && 500 >= value ) {
1524
- props.setAttributes({ borderRadius: value });
1525
- }
1526
};
1527
1528
const changeBorderRadiusTop = value => {
1529
- if ( 0 <= value && 500 >= value ) {
1530
- props.setAttributes({ borderRadiusTop: value });
1531
- }
1532
};
1533
1534
const changeBorderRadiusRight = value => {
1535
- if ( 0 <= value && 500 >= value ) {
1536
- props.setAttributes({ borderRadiusRight: value });
1537
- }
1538
};
1539
1540
const changeBorderRadiusBottom = value => {
1541
- if ( 0 <= value && 500 >= value ) {
1542
- props.setAttributes({ borderRadiusBottom: value });
1543
- }
1544
};
1545
1546
const changeBorderRadiusLeft = value => {
1547
- if ( 0 <= value && 500 >= value ) {
1548
- props.setAttributes({ borderRadiusLeft: value });
1549
- }
1550
};
1551
1552
const changeBoxShadow = () => {
@@ -1558,33 +1494,23 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1558
};
1559
1560
const changeBoxShadowColorOpacity = value => {
1561
- if ( 0 <= value && 100 >= value ) {
1562
- props.setAttributes({ boxShadowColorOpacity: value });
1563
- }
1564
};
1565
1566
const changeBoxShadowBlur = value => {
1567
- if ( 0 <= value && 100 >= value ) {
1568
- props.setAttributes({ boxShadowBlur: value });
1569
- }
1570
};
1571
1572
const changeBoxShadowSpread = value => {
1573
- if ( -100 <= value && 100 >= value ) {
1574
- props.setAttributes({ boxShadowSpread: value });
1575
- }
1576
};
1577
1578
const changeBoxShadowHorizontal = value => {
1579
- if ( -100 <= value && 100 >= value ) {
1580
- props.setAttributes({ boxShadowHorizontal: value });
1581
- }
1582
};
1583
1584
const changeBoxShadowVertical = value => {
1585
- if ( -100 <= value && 100 >= value ) {
1586
- props.setAttributes({ boxShadowVertical: value });
1587
- }
1588
};
1589
1590
let getDividerType = () => {
@@ -1741,33 +1667,31 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1741
getDividerBottomWidth = getDividerBottomWidth();
1742
1743
const changeDividerWidth = value => {
1744
- if ( 0 <= value && 500 >= value ) {
1745
- if ( 'top' == dividerViewType ) {
1746
- if ( 'desktop' == dividerWidthViewType ) {
1747
- props.setAttributes({ dividerTopWidth: value });
1748
- }
1749
-
1750
- if ( 'tablet' == dividerWidthViewType ) {
1751
- props.setAttributes({ dividerTopWidthTablet: value });
1752
- }
1753
-
1754
- if ( 'mobile' == dividerWidthViewType ) {
1755
- props.setAttributes({ dividerTopWidthMobile: value });
1756
- }
1757
}
1758
1759
- if ( 'bottom' == dividerViewType ) {
1760
- if ( 'desktop' == dividerWidthViewType ) {
1761
- props.setAttributes({ dividerBottomWidth: value });
1762
- }
1763
1764
- if ( 'tablet' == dividerWidthViewType ) {
1765
- props.setAttributes({ dividerBottomWidthTablet: value });
1766
- }
1767
1768
- if ( 'mobile' == dividerWidthViewType ) {
1769
- props.setAttributes({ dividerBottomWidthMobile: value });
1770
- }
1771
}
1772
}
1773
};
@@ -1849,33 +1773,31 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
1849
getDividerBottomHeight = getDividerBottomHeight();
1850
1851
const changeDividerHeight = value => {
1852
- if ( 0 <= value && 500 >= value ) {
1853
- if ( 'top' == dividerViewType ) {
1854
- if ( 'desktop' == dividerHeightViewType ) {
1855
- props.setAttributes({ dividerTopHeight: value });
1856
- }
1857
-
1858
- if ( 'tablet' == dividerHeightViewType ) {
1859
- props.setAttributes({ dividerTopHeightTablet: value });
1860
- }
1861
-
1862
- if ( 'mobile' == dividerHeightViewType ) {
1863
- props.setAttributes({ dividerTopHeightMobile: value });
1864
- }
1865
}
1866
1867
- if ( 'bottom' == dividerViewType ) {
1868
- if ( 'desktop' == dividerHeightViewType ) {
1869
- props.setAttributes({ dividerBottomHeight: value });
1870
- }
1871
1872
- if ( 'tablet' == dividerHeightViewType ) {
1873
- props.setAttributes({ dividerBottomHeightTablet: value });
1874
- }
1875
1876
- if ( 'mobile' == dividerHeightViewType ) {
1877
- props.setAttributes({ dividerBottomHeightMobile: value });
1878
- }
1879
}
1880
}
1881
};
@@ -2115,7 +2037,6 @@ registerBlockType( 'themeisle-blocks/advanced-columns', {
2115
<RangeControl
2116
label={ __( 'Maximum Content Width' ) }
2117
value={ columnsWidth || '' }
2118
- allowReset={ true }
2119
onChange={ changeColumnsWidth }
2120
min={ 0 }
2121
max={ 1200 }
176
},
177
marginType: {
178
type: 'string',
179
+ default: 'unlinked'
180
},
181
marginTypeTablet: {
182
type: 'string',
183
+ default: 'unlinked'
184
},
185
marginTypeMobile: {
186
type: 'string',
187
+ default: 'unlinked'
188
},
189
margin: {
190
type: 'number',
735
columnsHTMLTag
736
} = props.attributes;
737
738
+ if ( id === undefined || id.substr( id.length - 8 ) !== props.clientId.substr( 0, 8 ) ) {
739
const instanceId = `wp-block-themeisle-blocks-advanced-columns-${ props.clientId.substr( 0, 8 ) }`;
740
props.setAttributes({ id: instanceId });
741
}
858
...borderStyle,
859
...borderRadiusStyle,
860
...boxShadowStyle,
861
+ alignItems: horizontalAlign,
862
+ justifyContent: verticalAlign
863
};
864
865
if ( 'color' === backgroundOverlayType ) {
915
`has-desktop-${ layout }-layout`,
916
`has-tablet-${ layoutTablet }-layout`,
917
`has-mobile-${ layoutMobile }-layout`,
918
+ `has-${ columnsGap }-gap`
919
);
920
921
const ALLOWED_BLOCKS = [ 'themeisle-blocks/advanced-columns' ];
1106
};
1107
1108
const changePadding = value => {
1109
+ if ( 'desktop' === paddingViewType ) {
1110
+ props.setAttributes({ padding: value });
1111
+ }
1112
+ if ( 'tablet' === paddingViewType ) {
1113
+ props.setAttributes({ paddingTablet: value });
1114
+ }
1115
+ if ( 'mobile' === paddingViewType ) {
1116
+ props.setAttributes({ paddingMobile: value });
1117
}
1118
};
1119
1120
const changePaddingTop = value => {
1121
+ if ( 'desktop' === paddingViewType ) {
1122
+ props.setAttributes({ paddingTop: value });
1123
+ }
1124
+ if ( 'tablet' === paddingViewType ) {
1125
+ props.setAttributes({ paddingTopTablet: value });
1126
+ }
1127
+ if ( 'mobile' === paddingViewType ) {
1128
+ props.setAttributes({ paddingTopMobile: value });
1129
}
1130
};
1131
1132
const changePaddingRight = value => {
1133
+ if ( 'desktop' === paddingViewType ) {
1134
+ props.setAttributes({ paddingRight: value });
1135
+ }
1136
+ if ( 'tablet' === paddingViewType ) {
1137
+ props.setAttributes({ paddingRightTablet: value });
1138
+ }
1139
+ if ( 'mobile' === paddingViewType ) {
1140
+ props.setAttributes({ paddingRightMobile: value });
1141
}
1142
};
1143
1144
const changePaddingBottom = value => {
1145
+ if ( 'desktop' === paddingViewType ) {
1146
+ props.setAttributes({ paddingBottom: value });
1147
+ }
1148
+ if ( 'tablet' === paddingViewType ) {
1149
+ props.setAttributes({ paddingBottomTablet: value });
1150
+ }
1151
+ if ( 'mobile' === paddingViewType ) {
1152
+ props.setAttributes({ paddingBottomMobile: value });
1153
}
1154
};
1155
1156
const changePaddingLeft = value => {
1157
+ if ( 'desktop' === paddingViewType ) {
1158
+ props.setAttributes({ paddingLeft: value });
1159
+ }
1160
+ if ( 'tablet' === paddingViewType ) {
1161
+ props.setAttributes({ paddingLeftTablet: value });
1162
+ }
1163
+ if ( 'mobile' === paddingViewType ) {
1164
+ props.setAttributes({ paddingLeftMobile: value });
1165
}
1166
};
1167
1178
};
1179
1180
const changeMargin = value => {
1181
+ if ( 'desktop' === marginViewType ) {
1182
+ props.setAttributes({ margin: value });
1183
+ }
1184
+ if ( 'tablet' === marginViewType ) {
1185
+ props.setAttributes({ marginTablet: value });
1186
+ }
1187
+ if ( 'mobile' === marginViewType ) {
1188
+ props.setAttributes({ marginMobile: value });
1189
}
1190
};
1191
1192
const changeMarginTop = value => {
1193
+ if ( 'desktop' === marginViewType ) {
1194
+ props.setAttributes({ marginTop: value });
1195
+ }
1196
+ if ( 'tablet' === marginViewType ) {
1197
+ props.setAttributes({ marginTopTablet: value });
1198
+ }
1199
+ if ( 'mobile' === marginViewType ) {
1200
+ props.setAttributes({ marginTopMobile: value });
1201
}
1202
};
1203
1204
const changeMarginBottom = value => {
1205
+ if ( 'desktop' === marginViewType ) {
1206
+ props.setAttributes({ marginBottom: value });
1207
+ }
1208
+ if ( 'tablet' === marginViewType ) {
1209
+ props.setAttributes({ marginBottomTablet: value });
1210
+ }
1211
+ if ( 'mobile' === marginViewType ) {
1212
+ props.setAttributes({ marginBottomMobile: value });
1213
}
1214
};
1215
1244
getColumnsHeightCustom = getColumnsHeightCustom();
1245
1246
const changeColumnsHeightCustom = value => {
1247
+ if ( 'desktop' === heightViewType ) {
1248
+ props.setAttributes({ columnsHeightCustom: value });
1249
+ }
1250
+ if ( 'tablet' === heightViewType ) {
1251
+ props.setAttributes({ columnsHeightCustomTablet: value });
1252
+ }
1253
+ if ( 'mobile' === heightViewType ) {
1254
+ props.setAttributes({ columnsHeightCustomMobile: value });
1255
}
1256
};
1257
1312
};
1313
1314
const changeBackgroundGradientFirstLocation = value => {
1315
+ props.setAttributes({ backgroundGradientFirstLocation: value });
1316
};
1317
1318
const changeBackgroundGradientSecondColor = value => {
1320
};
1321
1322
const changeBackgroundGradientSecondLocation = value => {
1323
+ props.setAttributes({ backgroundGradientSecondLocation: value });
1324
};
1325
1326
const changeBackgroundGradientType = value => {
1328
};
1329
1330
const changeBackgroundGradientAngle = value => {
1331
+ props.setAttributes({ backgroundGradientAngle: value });
1332
};
1333
1334
const changeBackgroundGradientPosition = value => {
1336
};
1337
1338
const changeBackgroundOverlayOpacity = value => {
1339
+ props.setAttributes({ backgroundOverlayOpacity: value });
1340
};
1341
1342
const changeBackgroundOverlayType = value => {
1382
};
1383
1384
const changeBackgroundOverlayGradientFirstLocation = value => {
1385
+ props.setAttributes({ backgroundOverlayGradientFirstLocation: value });
1386
};
1387
1388
const changeBackgroundOverlayGradientSecondColor = value => {
1390
};
1391
1392
const changeBackgroundOverlayGradientSecondLocation = value => {
1393
+ props.setAttributes({ backgroundOverlayGradientSecondLocation: value });
1394
};
1395
1396
const changeBackgroundOverlayGradientType = value => {
1398
};
1399
1400
const changeBackgroundOverlayGradientAngle = value => {
1401
+ props.setAttributes({ backgroundOverlayGradientAngle: value });
1402
};
1403
1404
const changeBackgroundOverlayGradientPosition = value => {
1406
};
1407
1408
const changebackgroundOverlayFilterBlur = value => {
1409
+ props.setAttributes({ backgroundOverlayFilterBlur: value });
1410
};
1411
1412
const changebackgroundOverlayFilterBrightness = value => {
1413
+ props.setAttributes({ backgroundOverlayFilterBrightness: value });
1414
};
1415
1416
const changebackgroundOverlayFilterContrast = value => {
1417
+ props.setAttributes({ backgroundOverlayFilterContrast: value });
1418
};
1419
1420
const changebackgroundOverlayFilterGrayscale = value => {
1421
+ props.setAttributes({ backgroundOverlayFilterGrayscale: value });
1422
};
1423
1424
const changebackgroundOverlayFilterHue = value => {
1425
+ props.setAttributes({ backgroundOverlayFilterHue: value });
1426
};
1427
1428
const changebackgroundOverlayFilterSaturate = value => {
1429
+ props.setAttributes({ backgroundOverlayFilterSaturate: value });
1430
};
1431
1432
const changebackgroundOverlayBlend = value => {
1438
};
1439
1440
const changeBorder = value => {
1441
+ props.setAttributes({ border: value });
1442
};
1443
1444
const changeBorderTop = value => {
1445
+ props.setAttributes({ borderTop: value });
1446
};
1447
1448
const changeBorderRight = value => {
1449
+ props.setAttributes({ borderRight: value });
1450
};
1451
1452
const changeBorderBottom = value => {
1453
+ props.setAttributes({ borderBottom: value });
1454
};
1455
1456
const changeBorderLeft = value => {
1457
+ props.setAttributes({ borderLeft: value });
1458
};
1459
1460
const changeBorderColor = value => {
1466
};
1467
1468
const changeBorderRadius = value => {
1469
+ props.setAttributes({ borderRadius: value });
1470
};
1471
1472
const changeBorderRadiusTop = value => {
1473
+ props.setAttributes({ borderRadiusTop: value });
1474
};
1475
1476
const changeBorderRadiusRight = value => {
1477
+ props.setAttributes({ borderRadiusRight: value });
1478
};
1479
1480
const changeBorderRadiusBottom = value => {
1481
+ props.setAttributes({ borderRadiusBottom: value });
1482
};
1483
1484
const changeBorderRadiusLeft = value => {
1485
+ props.setAttributes({ borderRadiusLeft: value });
1486
};
1487
1488
const changeBoxShadow = () => {
1494
};
1495
1496
const changeBoxShadowColorOpacity = value => {
1497
+ props.setAttributes({ boxShadowColorOpacity: value });
1498
};
1499
1500
const changeBoxShadowBlur = value => {
1501
+ props.setAttributes({ boxShadowBlur: value });
1502
};
1503
1504
const changeBoxShadowSpread = value => {
1505
+ props.setAttributes({ boxShadowSpread: value });
1506
};
1507
1508
const changeBoxShadowHorizontal = value => {
1509
+ props.setAttributes({ boxShadowHorizontal: value });
1510
};
1511
1512
const changeBoxShadowVertical = value => {
1513
+ props.setAttributes({ boxShadowVertical: value });
1514
};
1515
1516
let getDividerType = () => {
1667
getDividerBottomWidth = getDividerBottomWidth();
1668
1669
const changeDividerWidth = value => {
1670
+ if ( 'top' == dividerViewType ) {
1671
+ if ( 'desktop' == dividerWidthViewType ) {
1672
+ props.setAttributes({ dividerTopWidth: value });
1673
}
1674
1675
+ if ( 'tablet' == dividerWidthViewType ) {
1676
+ props.setAttributes({ dividerTopWidthTablet: value });
1677
+ }
1678
1679
+ if ( 'mobile' == dividerWidthViewType ) {
1680
+ props.setAttributes({ dividerTopWidthMobile: value });
1681
+ }
1682
+ }
1683
+
1684
+ if ( 'bottom' == dividerViewType ) {
1685
+ if ( 'desktop' == dividerWidthViewType ) {
1686
+ props.setAttributes({ dividerBottomWidth: value });
1687
+ }
1688
1689
+ if ( 'tablet' == dividerWidthViewType ) {
1690
+ props.setAttributes({ dividerBottomWidthTablet: value });
1691
+ }
1692
+
1693
+ if ( 'mobile' == dividerWidthViewType ) {
1694
+ props.setAttributes({ dividerBottomWidthMobile: value });
1695
}
1696
}
1697
};
1773
getDividerBottomHeight = getDividerBottomHeight();
1774
1775
const changeDividerHeight = value => {
1776
+ if ( 'top' == dividerViewType ) {
1777
+ if ( 'desktop' == dividerHeightViewType ) {
1778
+ props.setAttributes({ dividerTopHeight: value });
1779
+ }
1780
+
1781
+ if ( 'tablet' == dividerHeightViewType ) {
1782
+ props.setAttributes({ dividerTopHeightTablet: value });
1783
+ }
1784
+
1785
+ if ( 'mobile' == dividerHeightViewType ) {
1786
+ props.setAttributes({ dividerTopHeightMobile: value });
1787
}
1788
+ }
1789
1790
+ if ( 'bottom' == dividerViewType ) {
1791
+ if ( 'desktop' == dividerHeightViewType ) {
1792
+ props.setAttributes({ dividerBottomHeight: value });
1793
+ }
1794
1795
+ if ( 'tablet' == dividerHeightViewType ) {
1796
+ props.setAttributes({ dividerBottomHeightTablet: value });
1797
+ }
1798
1799
+ if ( 'mobile' == dividerHeightViewType ) {
1800
+ props.setAttributes({ dividerBottomHeightMobile: value });
1801
}
1802
}
1803
};
2037
<RangeControl
2038
label={ __( 'Maximum Content Width' ) }
2039
value={ columnsWidth || '' }
2040
onChange={ changeColumnsWidth }
2041
min={ 0 }
2042
max={ 1200 }
vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/editor.scss CHANGED
@@ -50,11 +50,8 @@
50
opacity: 0;
51
background: rgba(61,191,232,.15);
52
display: flex;
53
- flex-wrap: wrap;
54
justify-content: center;
55
- align-content: center;
56
- position: absolute;
57
- width: 100%;
58
height: 100%;
59
transition: all ease-in 0.2s;
60
@@ -69,23 +66,20 @@
69
}
70
}
71
}
72
-
73
-
74
- &.has-vertical-flex-start {
75
- > .innerblocks-wrap > .editor-inner-blocks > .editor-block-list__layout > [data-type="themeisle-blocks/advanced-column"] {
76
- align-self: flex-start;
77
- }
78
- }
79
80
- &.has-vertical-center {
81
- > .innerblocks-wrap > .editor-inner-blocks > .editor-block-list__layout > [data-type="themeisle-blocks/advanced-column"] {
82
- align-self: center;
83
- }
84
- }
85
86
- &.has-vertical-flex-end {
87
- > .innerblocks-wrap > .editor-inner-blocks > .editor-block-list__layout > [data-type="themeisle-blocks/advanced-column"] {
88
- align-self: flex-end;
89
}
90
}
91
}
@@ -99,6 +93,7 @@
99
> .innerblocks-wrap {
100
flex-basis: 100%;
101
width: 100%;
102
103
> .editor-inner-blocks > .editor-block-list__layout {
104
display: flex;
@@ -208,6 +203,7 @@
208
> .innerblocks-wrap {
209
flex-basis: 100%;
210
width: 100%;
211
212
> .editor-inner-blocks > .editor-block-list__layout {
213
display: flex;
@@ -344,6 +340,7 @@
344
> .innerblocks-wrap {
345
flex-basis: 100%;
346
width: 100%;
347
348
> .editor-inner-blocks > .editor-block-list__layout {
349
display: flex;
50
opacity: 0;
51
background: rgba(61,191,232,.15);
52
display: flex;
53
justify-content: center;
54
+ align-items: center;
55
height: 100%;
56
transition: all ease-in 0.2s;
57
66
}
67
}
68
}
69
70
+ .components-resizable-box__container {
71
+ .components-resizable-box__handle {
72
+ position: relative;
73
+ display: block;
74
+ width: 100%;
75
+ height: 100%;
76
+ top: 0;
77
+ left: 0;
78
+ z-index: 9;
79
80
+ &:before {
81
+ display: none;
82
+ }
83
}
84
}
85
}
93
> .innerblocks-wrap {
94
flex-basis: 100%;
95
width: 100%;
96
+ word-break: break-all;
97
98
> .editor-inner-blocks > .editor-block-list__layout {
99
display: flex;
203
> .innerblocks-wrap {
204
flex-basis: 100%;
205
width: 100%;
206
+ word-break: break-all;
207
208
> .editor-inner-blocks > .editor-block-list__layout {
209
display: flex;
340
> .innerblocks-wrap {
341
flex-basis: 100%;
342
width: 100%;
343
+ word-break: break-all;
344
345
> .editor-inner-blocks > .editor-block-list__layout {
346
display: flex;
vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/inboarding/editor.scss CHANGED
@@ -65,172 +65,149 @@
65
display: none;
66
}
67
68
- .library-modal-header {
69
- display: flex;
70
-
71
- .library-modal-header-logo {
72
display: flex;
73
- flex-basis: 100%;
74
- justify-content: left;
75
-
76
- .library-modal-header-tabs-button {
77
display: flex;
78
- align-items: center;
79
- justify-content: center;
80
- padding: 17px 20px;
81
- background: transparent;
82
- border: 0;
83
-
84
- svg {
85
- width: 20px;
86
- height: 20px;
87
- margin-right: 10px;
88
}
89
}
90
- }
91
-
92
- .library-modal-header-tabs {
93
- display: flex;
94
- flex-basis: 100%;
95
- justify-content: center;
96
-
97
- .library-modal-header-tabs-button {
98
display: flex;
99
- align-items: center;
100
justify-content: center;
101
- width: 115px;
102
- padding: 17px 0;
103
- background: transparent;
104
- font-weight: 600;
105
- cursor: pointer;
106
- border: 0;
107
-
108
- &.is-selected {
109
- background: #f2f2f3;
110
- }
111
-
112
- &:hover {
113
- background: #f2f2f3;
114
- }
115
-
116
- &:focus {
117
- background: #f2f2f3;
118
- }
119
-
120
- svg {
121
- margin-right: 5px;
122
}
123
}
124
- }
125
-
126
- .library-modal-header-actions {
127
- display: flex;
128
- flex-basis: 100%;
129
- justify-content: right;
130
-
131
- .library-modal-header-tabs-button {
132
display: flex;
133
- align-items: center;
134
- justify-content: center;
135
- padding: 17px;
136
- background: transparent;
137
- font-weight: 600;
138
- cursor: pointer;
139
- border: 0;
140
-
141
- &.is-selected {
142
- background: #f2f2f3;
143
- }
144
-
145
- &:hover {
146
- background: #f2f2f3;
147
- }
148
-
149
- &:focus {
150
- background: #f2f2f3;
151
- }
152
-
153
- &:last-child {
154
- border-left: 1px solid #e6e9ec;
155
- }
156
-
157
- svg {
158
- width: 20px;
159
- height: 20px;
160
}
161
}
162
}
163
- }
164
-
165
- .library-modal-actions {
166
- display: flex;
167
- padding: 15px;
168
- background: #f2f2f3;
169
- justify-content: center;
170
-
171
- .components-base-control {
172
- .components-base-control__field {
173
- margin-bottom: 0;
174
- }
175
- }
176
-
177
- .library-modal-category-control {
178
- margin-right: 10px;
179
180
- button {
181
- background: #ffffff;
182
- position: relative;
183
- min-width: 150px;
184
- box-shadow: 0 0 0 transparent;
185
- transition: box-shadow .1s linear;
186
- border-radius: 4px;
187
- border: 1px solid #8d96a0;
188
189
- &:hover {
190
- background: #fafafa;
191
- border-color: #999;
192
- box-shadow: inset 0 -1px 0 #999;
193
- color: #23282d;
194
- text-decoration: none;
195
}
196
197
- &:focus {
198
- border: 1px solid black;
199
}
200
-
201
&:after {
202
- content: "";
203
pointer-events: none;
204
display: block;
205
- width: 0;
206
- height: 0;
207
- border-left: 3px solid transparent;
208
- border-right: 3px solid transparent;
209
- border-top: 5px solid currentColor;
210
- margin-left: 4px;
211
- margin-right: 2px;
212
- right: 8px;
213
- top: 12px;
214
position: absolute;
215
}
216
}
217
}
218
-
219
- .library-modal-search-control {
220
- width: 300px;
221
- position: relative;
222
-
223
- &:after {
224
- content: "\F179";
225
- font-family: dashicons;
226
- pointer-events: none;
227
- display: block;
228
- position: absolute;
229
- right: 6px;
230
- top: 6px;
231
- font-size: 18px;
232
- }
233
- }
234
}
235
236
.library-modal-error {
@@ -352,20 +329,22 @@
352
353
.themeisle-library-modal {
354
.components-modal__content {
355
- .library-modal-actions {
356
- flex-direction: column;
357
-
358
- .library-modal-category-control {
359
- margin: 0 0 10px 0;
360
-
361
- button {
362
width: 100%;
363
}
364
}
365
-
366
- .library-modal-search-control {
367
- width: 100%;
368
- }
369
}
370
371
.library-modal-content {
65
display: none;
66
}
67
68
+ .library-modal-control-panel {
69
+ background: #ffffff;
70
+ position: sticky;
71
+ top: 0;
72
+ box-shadow: 0 0px 10px rgba(25,30,35,.2);
73
+ z-index: 99999999;
74
+
75
+ .library-modal-header {
76
display: flex;
77
+
78
+ .library-modal-header-logo {
79
display: flex;
80
+ flex-basis: 100%;
81
+ justify-content: flex-start;
82
+
83
+ .library-modal-header-tabs-button {
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ padding: 17px 20px;
88
+ background: transparent;
89
+ border: 0;
90
+
91
+ svg {
92
+ width: 20px;
93
+ height: 20px;
94
+ margin-right: 10px;
95
+ }
96
}
97
}
98
+
99
+ .library-modal-header-tabs {
100
display: flex;
101
+ flex-basis: 100%;
102
justify-content: center;
103
+
104
+ .library-modal-header-tabs-button {
105
+ display: flex;
106
+ align-items: center;
107
+ justify-content: center;
108
+ width: 115px;
109
+ padding: 17px 0;
110
+ background: transparent;
111
+ font-weight: 600;
112
+ cursor: pointer;
113
+ border: 0;
114
+
115
+ &.is-selected {
116
+ background: #f2f2f3;
117
+ }
118
+
119
+ &:hover {
120
+ background: #f2f2f3;
121
+ }
122
+
123
+ &:focus {
124
+ background: #f2f2f3;
125
+ }
126
+
127
+ svg {
128
+ margin-right: 5px;
129
+ }
130
}
131
}
132
+
133
+ .library-modal-header-actions {
134
display: flex;
135
+ flex-basis: 100%;
136
+ justify-content: flex-end;
137
+
138
+ .library-modal-header-tabs-button {
139
+ display: flex;
140
+ align-items: center;
141
+ justify-content: center;
142
+ padding: 17px;
143
+ background: transparent;
144
+ font-weight: 600;
145
+ cursor: pointer;
146
+ border: 0;
147
+
148
+ &.is-selected {
149
+ background: #f2f2f3;
150
+ }
151
+
152
+ &:hover {
153
+ background: #f2f2f3;
154
+ }
155
+
156
+ &:focus {
157
+ background: #f2f2f3;
158
+ }
159
+
160
+ &:last-child {
161
+ border-left: 1px solid #e6e9ec;
162
+ }
163
+
164
+ svg {
165
+ width: 20px;
166
+ height: 20px;
167
+ }
168
}
169
}
170
}
171
172
+ .library-modal-actions {
173
+ display: flex;
174
+ padding: 15px;
175
+ background: #f2f2f3;
176
+ justify-content: center;
177
178
+ .components-base-control {
179
+ .components-base-control__field {
180
+ margin-bottom: 0;
181
}
182
+ }
183
+
184
+ .library-modal-category-control {
185
+ min-width: 200px;
186
+ margin-right: 10px;
187
188
+ select {
189
+ height: 30px;
190
+ min-width: 150px;
191
+ padding: 0 5px;
192
}
193
+ }
194
+
195
+ .library-modal-search-control {
196
+ min-width: 200px;
197
+ position: relative;
198
+
199
&:after {
200
+ content: "\F179";
201
+ font-family: dashicons;
202
pointer-events: none;
203
display: block;
204
position: absolute;
205
+ right: 6px;
206
+ top: 6px;
207
+ font-size: 18px;
208
}
209
}
210
}
211
}
212
213
.library-modal-error {
329
330
.themeisle-library-modal {
331
.components-modal__content {
332
+ .library-modal-control-panel {
333
+ .library-modal-actions {
334
+ flex-direction: column;
335
+
336
+ .library-modal-category-control {
337
+ margin: 0 0 10px 0;
338
+
339
+ button {
340
+ width: 100%;
341
+ }
342
+ }
343
+
344
+ .library-modal-search-control {
345
width: 100%;
346
}
347
}
348
}
349
350
.library-modal-content {
vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/inboarding/library.js CHANGED
@@ -9,7 +9,7 @@ import classnames from 'classnames';
9
*/
10
import './editor.scss';
11
12
- import { themeisleIcon } from '../../../utils/icons.js';
13
14
/**
15
* WordPress dependencies...
@@ -26,14 +26,12 @@ const { apiFetch } = wp;
26
const {
27
Button,
28
Dashicon,
29
- Dropdown,
30
Icon,
31
TextControl,
32
Tooltip,
33
- MenuGroup,
34
- MenuItem,
35
Modal,
36
Notice,
37
Spinner
38
} = wp.components;
39
@@ -55,12 +53,13 @@ class Library extends Component {
55
this.selectCategory = this.selectCategory.bind( this );
56
this.changeSearch = this.changeSearch.bind( this );
57
this.importTemplate = this.importTemplate.bind( this );
58
59
this.state = {
60
tab: 'block',
61
isLoaded: false,
62
isError: false,
63
- selectedCategory: null,
64
search: '',
65
blocksCategories: [],
66
templateCategories: [],
@@ -104,7 +103,7 @@ class Library extends Component {
104
changeTab( value ) {
105
this.setState({
106
tab: value,
107
- selectedCategory: null,
108
search: ''
109
});
110
}
@@ -148,7 +147,27 @@ class Library extends Component {
148
}
149
}
150
151
render() {
152
return (
153
<Modal
154
className="themeisle-library-modal"
@@ -156,97 +175,67 @@ class Library extends Component {
156
isDismissable={ false }
157
shouldCloseOnClickOutside={ false }
158
>
159
- <div className="library-modal-header">
160
- <div className="library-modal-header-logo">
161
- <div className="library-modal-header-tabs-button">
162
- <Icon icon={ themeisleIcon } />
163
</div>
164
- </div>
165
-
166
- <div className="library-modal-header-tabs">
167
- <Button
168
- className={ classnames(
169
- 'library-modal-header-tabs-button',
170
- { 'is-selected': 'block' === this.state.tab }
171
- )}
172
- onClick={ () => this.changeTab( 'block' ) }
173
- >
174
- <Dashicon icon="screenoptions" />
175
- { __( 'Blocks' ) }
176
- </Button>
177
178
- <Button
179
- className={ classnames(
180
- 'library-modal-header-tabs-button',
181
- { 'is-selected': 'template' === this.state.tab }
182
- )}
183
- onClick={ () => this.changeTab( 'template' ) }
184
- >
185
- <Dashicon icon="editor-table" />
186
- { __( 'Templates' ) }
187
- </Button>
188
- </div>
189
-
190
- <div className="library-modal-header-actions">
191
- <Tooltip text={ __( 'Close' ) }>
192
<Button
193
- className="library-modal-header-tabs-button"
194
- aria-label={ __( 'Close settings' ) }
195
- onClick={ this.props.close }
196
>
197
- <Dashicon icon="no-alt" />
198
</Button>
199
- </Tooltip>
200
- </div>
201
- </div>
202
203
- <div className="library-modal-actions">
204
- <Dropdown
205
- className="library-modal-category-control"
206
- contentClassName="library-modal-category-selector"
207
- position="bottom center"
208
- renderToggle={ ({ isOpen, onToggle }) => (
209
<Button
210
- isLarge
211
- onClick={ onToggle }
212
- aria-expanded={ isOpen }
213
>
214
- { null === this.state.selectedCategory ? __( 'All Categories' ) : startCase( toLower( this.state.selectedCategory ) ) }
215
</Button>
216
- ) }
217
- renderContent={ ({ onToggle }) => (
218
- <MenuGroup label={ __( 'Categories' ) }>
219
- <MenuItem
220
- icon={ null === this.state.selectedCategory && 'yes' }
221
- onClick={ () => {
222
- onToggle();
223
- this.selectCategory( null );
224
- }}
225
>
226
- { __( 'All Categories' ) }
227
- </MenuItem>
228
- { ( 'block' === this.state.tab ? this.state.blocksCategories : this.state.templateCategories ).map( i => {
229
- return (
230
- <MenuItem
231
- icon={ i === this.state.selectedCategory && 'yes' }
232
- onClick={ () => {
233
- onToggle();
234
- this.selectCategory( i );
235
- }}
236
- >
237
- { startCase( toLower( i ) ) }
238
- </MenuItem>
239
- );
240
- })}
241
- </MenuGroup>
242
- ) }
243
- />
244
- <TextControl
245
- type="text"
246
- value={ this.state.search || '' }
247
- placeholder={ __( 'Search' ) }
248
- onChange={ this.changeSearch }
249
- />
250
</div>
251
252
{ this.state.isError && (
@@ -265,7 +254,7 @@ class Library extends Component {
265
{ this.state.data.map( i => {
266
if (
267
( i.template_url ) &&
268
- ( null === this.state.selectedCategory || i.categories && i.categories.includes( this.state.selectedCategory ) ) &&
269
( ! this.state.search || i.keywords && i.keywords.some( o => o.toLowerCase().includes( this.state.search.toLowerCase() ) ) ) &&
270
( this.state.tab === i.type )
271
) {
9
*/
10
import './editor.scss';
11
12
+ import { columnsIcon } from '../../../utils/icons.js';
13
14
/**
15
* WordPress dependencies...
26
const {
27
Button,
28
Dashicon,
29
Icon,
30
TextControl,
31
Tooltip,
32
Modal,
33
Notice,
34
+ SelectControl,
35
Spinner
36
} = wp.components;
37
53
this.selectCategory = this.selectCategory.bind( this );
54
this.changeSearch = this.changeSearch.bind( this );
55
this.importTemplate = this.importTemplate.bind( this );
56
+ this.getOptions = this.getOptions.bind( this );
57
58
this.state = {
59
tab: 'block',
60
isLoaded: false,
61
isError: false,
62
+ selectedCategory: 'all',
63
search: '',
64
blocksCategories: [],
65
templateCategories: [],
103
changeTab( value ) {
104
this.setState({
105
tab: value,
106
+ selectedCategory: 'all',
107
search: ''
108
});
109
}
147
}
148
}
149
150
+ getOptions() {
151
+ let categories = {};
152
+
153
+ categories = ( 'block' === this.state.tab ? this.state.blocksCategories : this.state.templateCategories ).map( i => {
154
+ return i = {
155
+ label: startCase( toLower( i ) ),
156
+ value: i
157
+ };
158
+ });
159
+
160
+ const options = [
161
+ { label: __( 'All Categories' ), value: 'all' },
162
+ ...categories
163
+ ];
164
+
165
+ return options;
166
+ }
167
+
168
render() {
169
+ const options = this.getOptions();
170
+
171
return (
172
<Modal
173
className="themeisle-library-modal"
175
isDismissable={ false }
176
shouldCloseOnClickOutside={ false }
177
>
178
+ <div className="library-modal-control-panel">
179
+ <div className="library-modal-header">
180
+ <div className="library-modal-header-logo">
181
+ <div className="library-modal-header-tabs-button">
182
+ <Icon icon={ columnsIcon } />
183
+ </div>
184
</div>
185
186
+ <div className="library-modal-header-tabs">
187
<Button
188
+ className={ classnames(
189
+ 'library-modal-header-tabs-button',
190
+ { 'is-selected': 'block' === this.state.tab }
191
+ )}
192
+ onClick={ () => this.changeTab( 'block' ) }
193
>
194
+ <Dashicon icon="screenoptions" />
195
+ { __( 'Blocks' ) }
196
</Button>
197
198
<Button
199
+ className={ classnames(
200
+ 'library-modal-header-tabs-button',
201
+ { 'is-selected': 'template' === this.state.tab }
202
+ )}
203
+ onClick={ () => this.changeTab( 'template' ) }
204
>
205
+ <Dashicon icon="editor-table" />
206
+ { __( 'Templates' ) }
207
</Button>
208
+ </div>
209
+
210
+ <div className="library-modal-header-actions">
211
+ <Tooltip text={ __( 'Close' ) }>
212
+ <Button
213
+ className="library-modal-header-tabs-button"
214
+ aria-label={ __( 'Close settings' ) }
215
+ onClick={ this.props.close }
216
>
217
+ <Dashicon icon="no-alt" />
218
+ </Button>
219
+ </Tooltip>
220
+ </div>
221
+ </div>
222
+
223
+ <div className="library-modal-actions">
224
+ <SelectControl
225
+ className="library-modal-category-control"
226
+ value={ 'all' === this.state.selectedCategory ? 'all' : this.state.selectedCategory }
227
+ onChange={ this.selectCategory }
228
+ options={ options }
229
+ />
230
+
231
+ <TextControl
232
+ type="text"
233
+ value={ this.state.search || '' }
234
+ placeholder={ __( 'Search' ) }
235
+ className="library-modal-search-control"
236
+ onChange={ this.changeSearch }
237
+ />
238
+ </div>
239
</div>
240
241
{ this.state.isError && (
254
{ this.state.data.map( i => {
255
if (
256
( i.template_url ) &&
257
+ ( 'all' === this.state.selectedCategory || i.categories && i.categories.includes( this.state.selectedCategory ) ) &&
258
( ! this.state.search || i.keywords && i.keywords.some( o => o.toLowerCase().includes( this.state.search.toLowerCase() ) ) ) &&
259
( this.state.tab === i.type )
260
) {
vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/layout-control/editor.scss CHANGED
@@ -67,6 +67,10 @@
67
padding: 10px;
68
width: 100%;
69
70
&.is-selected {
71
background: #edeff0;
72
}
67
padding: 10px;
68
width: 100%;
69
70
+ &:hover {
71
+ box-shadow: inset 0 0 0 1px #6c7781,inset 0 0 0 2px #fff;
72
+ }
73
+
74
&.is-selected {
75
background: #edeff0;
76
}
vendor/codeinwp/gutenberg-blocks/blocks/advanced-columns/style.scss CHANGED
@@ -72,6 +72,7 @@
72
.innerblocks-wrap {
73
display: flex;
74
flex-basis: 100%;
75
76
.wp-block-themeisle-blocks-advanced-column {
77
position: relative;
@@ -189,6 +190,7 @@
189
.innerblocks-wrap {
190
display: flex;
191
flex-basis: 100%;
192
193
.wp-block-themeisle-blocks-advanced-column {
194
position: relative;
@@ -326,6 +328,7 @@
326
.innerblocks-wrap {
327
display: flex;
328
flex-basis: 100%;
329
330
.wp-block-themeisle-blocks-advanced-column {
331
position: relative;
72
.innerblocks-wrap {
73
display: flex;
74
flex-basis: 100%;
75
+ word-break: break-all;
76
77
.wp-block-themeisle-blocks-advanced-column {
78
position: relative;
190
.innerblocks-wrap {
191
display: flex;
192
flex-basis: 100%;
193
+ word-break: break-all;
194
195
.wp-block-themeisle-blocks-advanced-column {
196
position: relative;
328
.innerblocks-wrap {
329
display: flex;
330
flex-basis: 100%;
331
+ word-break: break-all;
332
333
.wp-block-themeisle-blocks-advanced-column {
334
position: relative;
vendor/codeinwp/gutenberg-blocks/blocks/advanced-heading/editor.scss CHANGED
@@ -1,3 +1,9 @@
1
.wp-block-themeisle-blocks-advanced-heading-header-panel {
2
&.is-opened {
3
padding: 0;
@@ -35,4 +41,35 @@
35
.components-color-palette {
36
display: inline-block;
37
}
38
}
1
+ span {
2
+ &.wp-block-themeisle-blocks-advanced-heading {
3
+ display: block;
4
+ }
5
+ }
6
+
7
.wp-block-themeisle-blocks-advanced-heading-header-panel {
8
&.is-opened {
9
padding: 0;
41
.components-color-palette {
42
display: inline-block;
43
}
44
+ }
45
+
46
+ .wp-themesiel-blocks-advanced-heading-components-toolbar {
47
+ .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default) {
48
+ margin: 2px;
49
+ padding: 4px;
50
+ border: 1px solid transparent;
51
+
52
+ &:hover {
53
+ box-shadow: inset 0 0 0 1px #555d66,inset 0 0 0 2px #fff;
54
+ }
55
+ }
56
+
57
+ .components-dropdown-menu__indicator::after {
58
+ content: "";
59
+ pointer-events: none;
60
+ display: block;
61
+ width: 0;
62
+ height: 0;
63
+ border-left: 3px solid transparent;
64
+ border-right: 3px solid transparent;
65
+ border-top: 5px solid currentColor;
66
+ margin-left: 4px;
67
+ margin-right: 2px;
68
+ }
69
+ }
70
+
71
+ .wp-themesiel-blocks-advanced-heading-popover-content {
72
+ .components-popover__content {
73
+ padding: 20px;
74
+ }
75
}
vendor/codeinwp/gutenberg-blocks/blocks/advanced-heading/index.js CHANGED
@@ -18,11 +18,14 @@ const {
18
const {
19
Button,
20
Dashicon,
21
DropdownMenu,
22
PanelBody,
23
RangeControl,
24
SVG,
25
- ToggleControl
26
} = wp.components;
27
28
const {
@@ -88,6 +91,12 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
88
align: {
89
type: 'string'
90
},
91
headingColor: {
92
type: 'string',
93
default: '#000000'
@@ -318,6 +327,7 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
318
withState({
319
tab: 'style',
320
fontSizeViewType: 'desktop',
321
paddingViewType: 'desktop',
322
marginViewType: 'desktop'
323
}),
@@ -332,6 +342,7 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
332
])( ({
333
tab,
334
fontSizeViewType,
335
paddingViewType,
336
marginViewType,
337
setState,
@@ -347,6 +358,8 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
347
content,
348
tag,
349
align,
350
headingColor,
351
highlightColor,
352
highlightBackground,
@@ -397,7 +410,7 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
397
marginBottomMobile
398
} = props.attributes;
399
400
- if ( id === undefined ) {
401
const instanceId = `wp-block-themeisle-blocks-advanced-heading-${ props.clientId.substr( 0, 8 ) }`;
402
props.setAttributes({ id: instanceId });
403
}
@@ -412,6 +425,10 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
412
setState({ fontSizeViewType: value });
413
};
414
415
const changePaddingViewType = value => {
416
setState({ paddingViewType: value });
417
};
@@ -466,10 +483,6 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
466
}
467
};
468
469
- const changeAlignment = value => {
470
- props.setAttributes({ align: value });
471
- };
472
-
473
const changeHeadingColor = value => {
474
props.setAttributes({ headingColor: value });
475
};
@@ -483,16 +496,14 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
483
};
484
485
const changeFontSize = value => {
486
- if ( 1 <= value && 200 >= value ) {
487
- if ( 'desktop' === fontSizeViewType ) {
488
- props.setAttributes({ fontSize: value });
489
- }
490
- if ( 'tablet' === fontSizeViewType ) {
491
- props.setAttributes({ fontSizeTablet: value });
492
- }
493
- if ( 'mobile' === fontSizeViewType ) {
494
- props.setAttributes({ fontSizeMobile: value });
495
- }
496
}
497
};
498
@@ -516,6 +527,38 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
516
517
getFontSize = getFontSize();
518
519
const changeFontFamily = value => {
520
props.setAttributes({
521
fontFamily: value,
@@ -537,15 +580,11 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
537
};
538
539
const changeLineHeight = value => {
540
- if ( 0 <= value && 200 >= value ) {
541
- props.setAttributes({ lineHeight: value });
542
- }
543
};
544
545
const changeLetterSpacing = value => {
546
- if ( -50 <= value && 100 >= value ) {
547
- props.setAttributes({ letterSpacing: value });
548
- }
549
};
550
551
const changeTextShadowColor = value => {
@@ -585,72 +624,62 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
585
};
586
587
const changePadding = value => {
588
- if ( 0 <= value && 500 >= value ) {
589
- if ( 'desktop' === paddingViewType ) {
590
- props.setAttributes({ padding: value });
591
- }
592
- if ( 'tablet' === paddingViewType ) {
593
- props.setAttributes({ paddingTablet: value });
594
- }
595
- if ( 'mobile' === paddingViewType ) {
596
- props.setAttributes({ paddingMobile: value });
597
- }
598
}
599
};
600
601
const changePaddingTop = value => {
602
- if ( 0 <= value && 500 >= value ) {
603
- if ( 'desktop' === paddingViewType ) {
604
- props.setAttributes({ paddingTop: value });
605
- }
606
- if ( 'tablet' === paddingViewType ) {
607
- props.setAttributes({ paddingTopTablet: value });
608
- }
609
- if ( 'mobile' === paddingViewType ) {
610
- props.setAttributes({ paddingTopMobile: value });
611
- }
612
}
613
};
614
615
const changePaddingRight = value => {
616
- if ( 0 <= value && 500 >= value ) {
617
- if ( 'desktop' === paddingViewType ) {
618
- props.setAttributes({ paddingRight: value });
619
- }
620
- if ( 'tablet' === paddingViewType ) {
621
- props.setAttributes({ paddingRightTablet: value });
622
- }
623
- if ( 'mobile' === paddingViewType ) {
624
- props.setAttributes({ paddingRightMobile: value });
625
- }
626
}
627
};
628
629
const changePaddingBottom = value => {
630
- if ( 0 <= value && 500 >= value ) {
631
- if ( 'desktop' === paddingViewType ) {
632
- props.setAttributes({ paddingBottom: value });
633
- }
634
- if ( 'tablet' === paddingViewType ) {
635
- props.setAttributes({ paddingBottomTablet: value });
636
- }
637
- if ( 'mobile' === paddingViewType ) {
638
- props.setAttributes({ paddingBottomMobile: value });
639
- }
640
}
641
};
642
643
const changePaddingLeft = value => {
644
- if ( 0 <= value && 500 >= value ) {
645
- if ( 'desktop' === paddingViewType ) {
646
- props.setAttributes({ paddingLeft: value });
647
- }
648
- if ( 'tablet' === paddingViewType ) {
649
- props.setAttributes({ paddingLeftTablet: value });
650
- }
651
- if ( 'mobile' === paddingViewType ) {
652
- props.setAttributes({ paddingLeftMobile: value });
653
- }
654
}
655
};
656
@@ -667,44 +696,38 @@ registerBlockType( 'themeisle-blocks/advanced-heading', {
667
};
668
669
const changeMargin = value => {
670
- if ( -500 <= value && 500 >= value ) {
671
- if ( 'desktop' === marginViewType ) {
672
- props.setAttributes({ margin: value });
673
- }
674
- if ( 'tablet' === marginViewType ) {
675
- props.setAttributes({ marginTablet: value });
676
- }
677
- if ( 'mobile' === marginViewType ) {
678
- props.setAttributes({ marginMobile: value });
679
- }
680
}
681
};
682
683
const changeMarginTop = value => {
684
- if ( -500 <= value && 500 >= value ) {
685
- if ( 'desktop' === marginViewType ) {
686
- props.setAttributes({ marginTop: value });
687
- }
688
- if ( 'tablet' === marginViewType ) {
689
- props.setAttributes({ marginTopTablet: value });
690
- }
691
- if ( 'mobile' === marginViewType ) {
692
-