PluginProbe ʕ •ᴥ•ʔ
JetFormBuilder — Dynamic Blocks Form Builder / 3.5.4
JetFormBuilder — Dynamic Blocks Form Builder v3.5.4
3.6.3.1 3.6.3 3.6.2.2 3.6.2.1 3.6.2 3.6.1.1 3.6.1 3.6.0.1 trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.1.0 1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 1.1.6 1.1.7 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.3.0 1.3.1 1.3.2 1.3.3 1.4.0 1.4.1 1.4.2 1.4.3 1.5.0 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 2.0.0 2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 2.1.0 2.1.1 2.1.10 2.1.11 2.1.2 2.1.3 2.1.4 2.1.5 2.1.6 2.1.7 2.1.8 2.1.9 3.0.0 3.0.0.1 3.0.0.2 3.0.0.3 3.0.1 3.0.1.1 3.0.2 3.0.3 3.0.4 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.0.1 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 3.1.7 3.1.8 3.1.9 3.2.0 3.2.1 3.2.2 3.2.3 3.3.0 3.3.1 3.3.2 3.3.3 3.3.3.1 3.3.4 3.3.4.1 3.3.4.2 3.4.0 3.4.1 3.4.2 3.4.3 3.4.4 3.4.5 3.4.5.1 3.4.5.2 3.4.6 3.4.7 3.4.7.1 3.5.0 3.5.1 3.5.1.1 3.5.1.2 3.5.2 3.5.2.1 3.5.3 3.5.4 3.5.5 3.5.6 3.5.6.1 3.5.6.2 3.5.6.3 3.6.0
jetformbuilder / includes / blocks / modules / general-style.php
jetformbuilder / includes / blocks / modules Last commit date
base-module.php 2 years ago general-style-functions.php 2 years ago general-style.php 2 years ago
general-style.php
609 lines
1 <?php
2
3
4 namespace Jet_Form_Builder\Blocks\Modules;
5
6 use JET_SM\Gutenberg\Controls_Manager;
7
8 // If this file is called directly, abort.
9 if ( ! defined( 'WPINC' ) ) {
10 die;
11 }
12
13 /**
14 * @property Controls_Manager controls_manager
15 *
16 * Trait General_Style
17 * @package Jet_Form_Builder\Blocks\Modules
18 */
19 trait General_Style {
20
21 use General_Style_Functions;
22
23 public function general_style_manager_options() {
24 $this->maybe_add_controls_type( 'wrap' );
25 $this->maybe_add_controls_type( 'input' );
26 $this->maybe_add_controls_type( 'label' );
27 $this->maybe_add_controls_type( 'required' );
28 $this->maybe_add_controls_type( 'description' );
29 }
30
31 public function general_css_scheme() {
32 return array(
33 'wrap' => $this->get_field_wrap(),
34 'label' => $this->get_label_selector(),
35 'input' => $this->get_field_input(),
36 'required' => $this->get_required_selector(),
37 'description' => $this->get_description_selector(),
38 );
39 }
40
41 public function general_controls_callbacks() {
42 return array(
43 'wrap' => array( $this, 'add_content_controls' ),
44 'label' => array( $this, 'add_label_controls' ),
45 'input' => array( $this, 'add_input_controls' ),
46 'required' => array( $this, 'add_required_mark_controls' ),
47 'description' => array( $this, 'add_description_controls' ),
48 );
49 }
50
51 public function general_style_unregister() {
52 return array( 'input' );
53 }
54
55 public function get_label_selector() {
56 return '__label.%1$s__label.%1$s__label';
57 }
58
59 public function get_required_selector() {
60 return '__label span.%1$s__required.%1$s__required.%1$s__required';
61 }
62
63 public function get_description_selector() {
64 return '__desc.%1$s__desc.%1$s__desc';
65 }
66
67 public function get_field_wrap() {
68 return '-row.%1$s-row.%1$s-row.%1$s-row';
69 }
70
71 public function get_field_input() {
72 return '-row.%1$s-row.%1$s-row input';
73 }
74
75
76 public function general_style_attributes() {
77 return array(
78 'label_margin' => array(
79 'type' => 'object',
80 ),
81 'label_padding' => array(
82 'type' => 'object',
83 ),
84 'label_typography' => array(
85 'type' => 'object',
86 ),
87 'label_color' => array(
88 'type' => 'object',
89 ),
90 'label_border' => array(
91 'type' => 'object',
92 ),
93 'label_alignment' => array(
94 'type' => 'object',
95 ),
96 'label_background_color' => array(
97 'type' => 'object',
98 ),
99 'description_margin' => array(
100 'type' => 'object',
101 ),
102 'description_padding' => array(
103 'type' => 'object',
104 ),
105 'description_typography' => array(
106 'type' => 'object',
107 ),
108 'description_color' => array(
109 'type' => 'object',
110 ),
111 'description_background_color' => array(
112 'type' => 'object',
113 ),
114 'description_border' => array(
115 'type' => 'object',
116 ),
117 'description_alignment' => array(
118 'type' => 'object',
119 ),
120 'required_color' => array(
121 'type' => 'object',
122 ),
123 'required_background_color' => array(
124 'type' => 'object',
125 ),
126 'required_typography' => array(
127 'type' => 'object',
128 ),
129 );
130 }
131
132 // phpcs:ignore PSR2.Methods.MethodDeclaration.Underscore
133 public function _get_default_control( $selector ) {
134 return array(
135 'padding' => array(
136 'type' => 'dimensions',
137 'label' => __( 'Padding', 'jet-form-builder' ),
138 'units' => array( 'px', '%' ),
139 'css_selector' => array(
140 $selector => 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};',
141 ),
142 ),
143 'margin' => array(
144 'type' => 'dimensions',
145 'label' => __( 'Margin', 'jet-form-builder' ),
146 'units' => array( 'px', '%' ),
147 'css_selector' => array(
148 $selector => 'margin: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};',
149 ),
150 ),
151 );
152 }
153
154 public function add_margin_padding( $selector, $control_options, $responsive = array() ) {
155 foreach ( $control_options as $type => $options ) {
156 $options = $this->merge_controls_or_add_id( $this->_get_default_control( $selector )[ $type ], $options );
157
158 if ( in_array( $type, $responsive, true ) ) {
159 $this->controls_manager->add_responsive_control( $options );
160 } else {
161 $this->controls_manager->add_control( $options );
162 }
163 }
164 }
165
166 public function merge_controls_or_add_id( $control, $options ) {
167 if ( is_array( $options ) ) {
168 return array_merge( $control, $options );
169
170 } elseif ( is_string( $options ) ) {
171
172 $control['id'] = $options;
173
174 return $control;
175 }
176
177 return $control;
178 }
179
180
181 private function add_content_controls() {
182 $this->controls_manager->start_section(
183 'style_controls',
184 array(
185 'id' => 'content_style',
186 'title' => __( 'Content', 'jet-form-builder' ),
187 )
188 );
189
190 $this->add_margin_padding(
191 $this->selector( 'wrap' ),
192 array(
193 'margin' => array(
194 'id' => 'field_margin',
195 'separator' => 'after',
196 ),
197 'padding' => array(
198 'id' => 'field_padding',
199 'separator' => 'after',
200 ),
201 ),
202 array( 'padding', 'margin' )
203 );
204
205 $this->controls_manager->add_control(
206 array(
207 'id' => 'field_alignment',
208 'type' => 'choose',
209 'label' => __( 'Alignment', 'jet-form-builder' ),
210 'separator' => 'after',
211 'options' => array(
212 'left' => array(
213 'shortcut' => __( 'Left', 'jet-form-builder' ),
214 'icon' => 'dashicons-editor-alignleft',
215 ),
216 'center' => array(
217 'shortcut' => __( 'Center', 'jet-form-builder' ),
218 'icon' => 'dashicons-editor-aligncenter',
219 ),
220 'right' => array(
221 'shortcut' => __( 'Right', 'jet-form-builder' ),
222 'icon' => 'dashicons-editor-alignright',
223 ),
224 ),
225 'css_selector' => array(
226 $this->selector( 'wrap' ) => 'text-align: {{VALUE}};',
227 ),
228 )
229 );
230
231 $this->controls_manager->add_control(
232 array(
233 'id' => 'field_border',
234 'type' => 'border',
235 'label' => __( 'Border', 'jet-form-builder' ),
236 'separator' => 'after',
237 'css_selector' => array(
238 $this->selector( 'wrap' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
239 ),
240 )
241 );
242
243 $this->controls_manager->add_control(
244 array(
245 'id' => 'field_background_color',
246 'type' => 'color-picker',
247 'label' => __( 'Background Color', 'jet-form-builder' ),
248 'css_selector' => array(
249 $this->selector( 'wrap' ) => 'background-color: {{VALUE}}',
250 ),
251 )
252 );
253
254 $this->controls_manager->end_section();
255 }
256
257 private function add_label_controls() {
258 $this->controls_manager->start_section(
259 'style_controls',
260 array(
261 'id' => 'label_style',
262 'title' => __( 'Label', 'jet-form-builder' ),
263 )
264 );
265
266 $this->add_margin_padding(
267 $this->selector( 'label' ),
268 array(
269 'margin' => array(
270 'id' => 'label_margin',
271 'separator' => 'after',
272 ),
273 'padding' => array(
274 'id' => 'label_padding',
275 'separator' => 'after',
276 ),
277 )
278 );
279
280 $this->controls_manager->add_control(
281 array(
282 'id' => 'label_alignment',
283 'type' => 'choose',
284 'label' => __( 'Alignment', 'jet-form-builder' ),
285 'separator' => 'after',
286 'options' => array(
287 'left' => array(
288 'shortcut' => __( 'Left', 'jet-form-builder' ),
289 'icon' => 'dashicons-editor-alignleft',
290 ),
291 'center' => array(
292 'shortcut' => __( 'Center', 'jet-form-builder' ),
293 'icon' => 'dashicons-editor-aligncenter',
294 ),
295 'right' => array(
296 'shortcut' => __( 'Right', 'jet-form-builder' ),
297 'icon' => 'dashicons-editor-alignright',
298 ),
299 ),
300 'css_selector' => array(
301 $this->selector( 'label' ) => 'text-align: {{VALUE}};',
302 ),
303 )
304 );
305
306 $this->controls_manager->add_control(
307 array(
308 'id' => 'label_typography',
309 'type' => 'typography',
310 'separator' => 'after',
311 'css_selector' => array(
312 $this->selector( 'label' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
313 ),
314 )
315 );
316
317 $this->controls_manager->add_control(
318 array(
319 'id' => 'label_border',
320 'type' => 'border',
321 'label' => __( 'Border', 'jet-form-builder' ),
322 'separator' => 'after',
323 'css_selector' => array(
324 $this->selector( 'label' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
325 ),
326 )
327 );
328
329 $this->controls_manager->add_control(
330 array(
331 'id' => 'label_color',
332 'type' => 'color-picker',
333 'separator' => 'after',
334 'label' => __( 'Text Color', 'jet-form-builder' ),
335 'css_selector' => array(
336 $this->selector( 'label' ) => 'color: {{VALUE}}',
337 ),
338 )
339 );
340
341 $this->controls_manager->add_control(
342 array(
343 'id' => 'label_background_color',
344 'type' => 'color-picker',
345 'label' => __( 'Background Color', 'jet-form-builder' ),
346 'css_selector' => array(
347 $this->selector( 'label' ) => 'background-color: {{VALUE}}',
348 ),
349 )
350 );
351
352 $this->controls_manager->end_section();
353 }
354
355 private function add_description_controls() {
356 $this->controls_manager->start_section(
357 'style_controls',
358 array(
359 'id' => 'description_style',
360 'title' => __( 'Description', 'jet-form-builder' ),
361 )
362 );
363
364 $this->add_margin_padding(
365 $this->selector( 'description' ),
366 array(
367 'margin' => array(
368 'id' => 'description_margin',
369 'separator' => 'after',
370 ),
371 'padding' => array(
372 'id' => 'description_padding',
373 'separator' => 'after',
374 ),
375 )
376 );
377
378 $this->controls_manager->add_control(
379 array(
380 'id' => 'description_alignment',
381 'type' => 'choose',
382 'label' => __( 'Alignment', 'jet-form-builder' ),
383 'separator' => 'after',
384 'options' => array(
385 'left' => array(
386 'shortcut' => __( 'Left', 'jet-form-builder' ),
387 'icon' => 'dashicons-editor-alignleft',
388 ),
389 'center' => array(
390 'shortcut' => __( 'Center', 'jet-form-builder' ),
391 'icon' => 'dashicons-editor-aligncenter',
392 ),
393 'right' => array(
394 'shortcut' => __( 'Right', 'jet-form-builder' ),
395 'icon' => 'dashicons-editor-alignright',
396 ),
397 ),
398 'css_selector' => array(
399 $this->selector( 'description' ) => 'text-align: {{VALUE}};',
400 ),
401 )
402 );
403
404 $this->controls_manager->add_control(
405 array(
406 'id' => 'description_border',
407 'type' => 'border',
408 'label' => __( 'Border', 'jet-form-builder' ),
409 'separator' => 'after',
410 'css_selector' => array(
411 $this->selector( 'description' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
412 ),
413 )
414 );
415
416 $this->controls_manager->add_control(
417 array(
418 'id' => 'description_typography',
419 'type' => 'typography',
420 'separator' => 'after',
421 'css_selector' => array(
422 $this->selector( 'description' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
423 ),
424 )
425 );
426
427 $this->controls_manager->add_control(
428 array(
429 'id' => 'description_color',
430 'type' => 'color-picker',
431 'separator' => 'after',
432 'label' => __( 'Text Color', 'jet-form-builder' ),
433 'css_selector' => array(
434 $this->selector( 'description' ) => 'color: {{VALUE}}',
435 ),
436 )
437 );
438
439 $this->controls_manager->add_control(
440 array(
441 'id' => 'description_background_color',
442 'type' => 'color-picker',
443 'label' => __( 'Background Color', 'jet-form-builder' ),
444 'css_selector' => array(
445 $this->selector( 'description' ) => 'background-color: {{VALUE}}',
446 ),
447 )
448 );
449
450 $this->controls_manager->end_section();
451 }
452
453 private function add_required_mark_controls() {
454 $this->controls_manager->start_section(
455 'style_controls',
456 array(
457 'id' => 'required_style',
458 'title' => __( 'Required Mark', 'jet-form-builder' ),
459 )
460 );
461
462 $this->controls_manager->add_control(
463 array(
464 'id' => 'required_typography',
465
466 'disable_line_height' => true,
467 'disable_family' => true,
468 'disable_transform' => true,
469 'disable_style' => true,
470 'disable_decoration' => true,
471 'disable_letter_spacing' => true,
472 'separator' => 'after',
473 'type' => 'typography',
474 'css_selector' => array(
475 $this->selector( 'required' ) => 'font-weight: {{WEIGHT}}; font-size: {{SIZE}}{{S_UNIT}};',
476 ),
477 )
478 );
479
480 $this->controls_manager->add_control(
481 array(
482 'id' => 'required_color',
483 'type' => 'color-picker',
484 'separator' => 'after',
485 'label' => __( 'Text Color', 'jet-form-builder' ),
486 'css_selector' => array(
487 $this->selector( 'required' ) => 'color: {{VALUE}}',
488 ),
489 )
490 );
491
492 $this->controls_manager->add_control(
493 array(
494 'id' => 'required_background_color',
495 'type' => 'color-picker',
496 'label' => __( 'Background Color', 'jet-form-builder' ),
497 'css_selector' => array(
498 $this->selector( 'required' ) => 'background-color: {{VALUE}}',
499 ),
500 )
501 );
502
503 $this->controls_manager->end_section();
504 }
505
506 private function add_input_controls() {
507 $this->controls_manager->start_section(
508 'style_controls',
509 array(
510 'id' => 'input_style',
511 'title' => __( 'Field', 'jet-form-builder' ),
512 )
513 );
514
515 $this->add_margin_padding(
516 $this->selector( 'input' ),
517 array(
518 'margin' => array(
519 'id' => 'input_margin',
520 'separator' => 'after',
521 ),
522 'padding' => array(
523 'id' => 'input_padding',
524 'separator' => 'after',
525 ),
526 )
527 );
528
529 $this->controls_manager->add_control(
530 $this->merge_controls_or_add_id(
531 array(
532 'id' => 'input_alignment',
533 'type' => 'choose',
534 'label' => __( 'Alignment', 'jet-form-builder' ),
535 'separator' => 'after',
536 'options' => array(
537 'left' => array(
538 'shortcut' => __( 'Left', 'jet-form-builder' ),
539 'icon' => 'dashicons-editor-alignleft',
540 ),
541 'center' => array(
542 'shortcut' => __( 'Center', 'jet-form-builder' ),
543 'icon' => 'dashicons-editor-aligncenter',
544 ),
545 'right' => array(
546 'shortcut' => __( 'Right', 'jet-form-builder' ),
547 'icon' => 'dashicons-editor-alignright',
548 ),
549 ),
550 'css_selector' => array(
551 $this->selector( 'input' ) => 'text-align: {{VALUE}};',
552 ),
553 ),
554 $this->get_additional_styles( 'input_alignment' )
555 )
556 );
557
558 $this->controls_manager->add_control(
559 array(
560 'id' => 'input_typography',
561 'type' => 'typography',
562 'separator' => 'after',
563 'css_selector' => array(
564 $this->selector( 'input' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
565 ),
566 )
567 );
568
569 $this->controls_manager->add_control(
570 array(
571 'id' => 'input_border',
572 'type' => 'border',
573 'label' => __( 'Border', 'jet-form-builder' ),
574 'separator' => 'after',
575 'css_selector' => array(
576 $this->selector( 'input' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
577 ),
578 )
579 );
580
581 $this->controls_manager->add_control(
582 array(
583 'id' => 'input_color',
584 'type' => 'color-picker',
585 'separator' => 'after',
586 'label' => __( 'Text Color', 'jet-form-builder' ),
587 'css_selector' => array(
588 $this->selector( 'input' ) => 'color: {{VALUE}}',
589 ),
590 )
591 );
592
593 $this->controls_manager->add_control(
594 array(
595 'id' => 'input_background_color',
596 'type' => 'color-picker',
597 'label' => __( 'Background Color', 'jet-form-builder' ),
598 'css_selector' => array(
599 $this->selector( 'input' ) => 'background-color: {{VALUE}}',
600 ),
601 )
602 );
603
604 $this->controls_manager->end_section();
605 }
606
607
608 }
609