PluginProbe
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder / 2.16.0
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder v2.16.0
2.16.0 2.15.0 2.14.0 2.13.0 2.13.1 2.12.0 2.11.1 2.11.0 2.10.0 2.9.0 2.7.4 2.7.5 2.7.6 2.7.7 2.8.0 2.8.1 2.9.1 trunk 1.0 1.0-beta1 1.0-beta2 1.0-beta3 1.0.1 1.0.2 1.0.3 All 83 releases
ablocks / includes / blocks / price-menu / block.php

block.php in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.16.0, at includes/blocks/price-menu/block.php

420 lines 17.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 namespace ABlocks\Blocks\PriceMenu;
3
4 if ( ! defined( 'ABSPATH' ) ) {
5 exit;
6 }
7
8 use ABlocks\Classes\BlockBaseAbstract;
9 use ABlocks\Classes\CssGenerator;
10 use ABlocks\Classes\CssGeneratorV2;
11 use ABlocks\Controls\Alignment;
12 use ABlocks\Controls\Border;
13 use ABlocks\Controls\Dimensions;
14 use ABlocks\Controls\Typography;
15 use ABlocks\Controls\TextShadow;
16 use ABlocks\Controls\TextStroke;
17 use ABlocks\Controls\Range;
18 use ABlocks\Controls\Color;
19 use ABlocks\Blocks\PriceMenuItem\Block as PriceMenuItemBlock;
20 class Block extends BlockBaseAbstract {
21 protected $block_name = 'price-menu';
22
23 public function build_css_v1( $attributes ) {
24
25 $css_generator = new CssGenerator( $attributes, $this->block_name );
26
27 $css_generator->add_class_styles(
28 '{{WRAPPER}} .ablocks-block-container',
29 $this->get_all_menu_css( $attributes, '' ),
30 $this->get_all_menu_css( $attributes, 'Tablet' ),
31 $this->get_all_menu_css( $attributes, 'Mobile' ),
32 );
33 $css_generator->add_class_styles(
34 '{{WRAPPER}} .ablocks-price-menu-item, {{WRAPPER}} .ablocks-price-menu-item-details',
35 $this->get_gap_around_css( $attributes, '' ),
36 $this->get_gap_around_css( $attributes, 'Tablet' ),
37 $this->get_gap_around_css( $attributes, 'Mobile' ),
38 );
39 $css_generator->add_class_styles(
40 '{{WRAPPER}} .ablocks-price-menu-item-details-brief',
41 $this->get_details_brief_css( $attributes, '' ),
42 $this->get_details_brief_css( $attributes, 'Tablet' ),
43 $this->get_details_brief_css( $attributes, 'Mobile' ),
44 );
45 $css_generator->add_class_styles(
46 '{{WRAPPER}} .ablocks-block--price-menu-item',
47 $this->get_item_css( $attributes, '' ),
48 $this->get_item_css( $attributes, 'Tablet' ),
49 $this->get_item_css( $attributes, 'Mobile' ),
50 );
51 $css_generator->add_class_styles(
52 '{{WRAPPER}} .ablocks-block--price-menu-item:hover',
53 $this->get_item_hover_css( $attributes, '' ),
54 $this->get_item_hover_css( $attributes, 'Tablet' ),
55 $this->get_item_hover_css( $attributes, 'Mobile' ),
56 );
57
58 $css_generator->add_class_styles(
59 '{{WRAPPER}} .ablocks-price-menu-item',
60 $this->get_inner_item_css( $attributes, '' ),
61 $this->get_inner_item_css( $attributes, 'Tablet' ),
62 $this->get_inner_item_css( $attributes, 'Mobile' ),
63 );
64
65 // TitleText CSS
66 $css_generator->add_class_styles(
67 '{{WRAPPER}} .ablocks-price-menu-item-details-title',
68 $this->get_title_text_css( $attributes, '' ),
69 $this->get_title_text_css( $attributes, 'Tablet' ),
70 $this->get_title_text_css( $attributes, 'Mobile' ),
71 );
72 // DescriptionText CSS
73 $css_generator->add_class_styles(
74 '{{WRAPPER}} .ablocks-price-menu-item-details-des',
75 $this->get_description_text_css( $attributes, '' ),
76 $this->get_description_text_css( $attributes, 'Tablet' ),
77 $this->get_description_text_css( $attributes, 'Mobile' ),
78 );
79 // SeparatorText CSS
80 $css_generator->add_class_styles(
81 '{{WRAPPER}} .ablocks-price-menu-divider__pattern-' . ( $attributes['dividerType'] === 'mask-style' ? 'mask' : 'css' ),
82 $this->get_divider_css( $attributes, '' ),
83 $this->get_divider_css( $attributes, 'Tablet' ),
84 $this->get_divider_css( $attributes, 'Mobile' ),
85 );
86 // PriceText CSS
87 $css_generator->add_class_styles(
88 '{{WRAPPER}} .ablocks-price-menu-item-price',
89 $this->get_price_text_css( $attributes, '' ),
90 $this->get_price_text_css( $attributes, 'Tablet' ),
91 $this->get_price_text_css( $attributes, 'Mobile' ),
92 );
93 $this->add_layout_styles( $css_generator, $attributes );
94
95 return $css_generator->generate_css();
96 }
97 public function build_css_v2( $attributes ) {
98
99 $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
100
101 $css_generator->add_class_styles(
102 '{{WRAPPER}}:not(.ablocks-has-block-container), {{WRAPPER}}.ablocks-block--price-menu > .ablocks-block-container',
103 $this->get_all_menu_css( $attributes, '' ),
104 $this->get_all_menu_css( $attributes, 'Tablet' ),
105 $this->get_all_menu_css( $attributes, 'Mobile' ),
106 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_all_menu_css( $attributes, $device ); } )
107 );
108 $css_generator->add_class_styles(
109 '{{WRAPPER}} .ablocks-price-menu-item, {{WRAPPER}} .ablocks-price-menu-item-details',
110 $this->get_gap_around_css( $attributes, '' ),
111 $this->get_gap_around_css( $attributes, 'Tablet' ),
112 $this->get_gap_around_css( $attributes, 'Mobile' ),
113 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_gap_around_css( $attributes, $device ); } )
114 );
115 $css_generator->add_class_styles(
116 '{{WRAPPER}} .ablocks-price-menu-item-details-brief',
117 $this->get_details_brief_css( $attributes, '' ),
118 $this->get_details_brief_css( $attributes, 'Tablet' ),
119 $this->get_details_brief_css( $attributes, 'Mobile' ),
120 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_details_brief_css( $attributes, $device ); } )
121 );
122 $css_generator->add_class_styles(
123 '{{WRAPPER}} .ablocks-block--price-menu-item',
124 $this->get_item_css( $attributes, '' ),
125 $this->get_item_css( $attributes, 'Tablet' ),
126 $this->get_item_css( $attributes, 'Mobile' ),
127 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_item_css( $attributes, $device ); } )
128 );
129 $css_generator->add_class_styles(
130 '{{WRAPPER}} .ablocks-block--price-menu-item:hover',
131 $this->get_item_hover_css( $attributes, '' ),
132 $this->get_item_hover_css( $attributes, 'Tablet' ),
133 $this->get_item_hover_css( $attributes, 'Mobile' ),
134 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_item_hover_css( $attributes, $device ); } )
135 );
136
137 $css_generator->add_class_styles(
138 '{{WRAPPER}} .ablocks-price-menu-item',
139 $this->get_inner_item_css( $attributes, '' ),
140 $this->get_inner_item_css( $attributes, 'Tablet' ),
141 $this->get_inner_item_css( $attributes, 'Mobile' ),
142 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_inner_item_css( $attributes, $device ); } )
143 );
144
145 // TitleText CSS
146 $css_generator->add_class_styles(
147 '{{WRAPPER}} .ablocks-price-menu-item-details-title',
148 $this->get_title_text_css( $attributes, '' ),
149 $this->get_title_text_css( $attributes, 'Tablet' ),
150 $this->get_title_text_css( $attributes, 'Mobile' ),
151 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_title_text_css( $attributes, $device ); } )
152 );
153 // DescriptionText CSS
154 $css_generator->add_class_styles(
155 '{{WRAPPER}} .ablocks-price-menu-item-details-des',
156 $this->get_description_text_css( $attributes, '' ),
157 $this->get_description_text_css( $attributes, 'Tablet' ),
158 $this->get_description_text_css( $attributes, 'Mobile' ),
159 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_description_text_css( $attributes, $device ); } )
160 );
161 // SeparatorText CSS
162 $css_generator->add_class_styles(
163 '{{WRAPPER}} .ablocks-price-menu-divider__pattern-' . ( $attributes['dividerType'] === 'mask-style' ? 'mask' : 'css' ),
164 $this->get_divider_css( $attributes, '' ),
165 $this->get_divider_css( $attributes, 'Tablet' ),
166 $this->get_divider_css( $attributes, 'Mobile' ),
167 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_divider_css( $attributes, $device ); } )
168 );
169 // PriceText CSS
170 $css_generator->add_class_styles(
171 '{{WRAPPER}} .ablocks-price-menu-item-price',
172 $this->get_price_text_css( $attributes, '' ),
173 $this->get_price_text_css( $attributes, 'Tablet' ),
174 $this->get_price_text_css( $attributes, 'Mobile' ),
175 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_price_text_css( $attributes, $device ); } )
176 );
177 $this->add_layout_styles( $css_generator, $attributes );
178
179 return $css_generator->generate_css();
180 }
181
182 // Divider width and Price alignment layout; shared with the items (see
183 // PriceMenuItem\Block and src/blocks/price-menu/edit.js).
184 private function add_layout_styles( $css_generator, $attributes ) {
185 $css_generator->add_class_styles(
186 '{{WRAPPER}} .ablocks-divider',
187 $this->get_divider_width_css( $attributes, '' ),
188 $this->get_divider_width_css( $attributes, 'Tablet' ),
189 $this->get_divider_width_css( $attributes, 'Mobile' ),
190 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_divider_width_css( $attributes, $device ); } )
191 );
192 $css_generator->add_class_styles(
193 '{{WRAPPER}} .ablocks-price-menu-item',
194 PriceMenuItemBlock::get_item_width_css( $attributes, '' ),
195 PriceMenuItemBlock::get_item_width_css( $attributes, 'Tablet' ),
196 PriceMenuItemBlock::get_item_width_css( $attributes, 'Mobile' ),
197 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return PriceMenuItemBlock::get_item_width_css( $attributes, $device ); } )
198 );
199 $css_generator->add_class_styles(
200 '{{WRAPPER}} .ablocks-price-menu-item-details-brief > .ablocks-price-menu-item-price',
201 PriceMenuItemBlock::get_price_row_css( $attributes )
202 );
203 }
204
205 public function get_divider_width_css( $attributes, $device = '' ) {
206 return PriceMenuItemBlock::get_divider_width_css( $attributes, $device, '--ablocks-pm-divider-width', 100 );
207 }
208 public function build_css( $attributes ) {
209 if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
210 return $this->build_css_v2( $attributes );
211 }
212 return $this->build_css_v1( $attributes );
213 }
214
215 public function get_item_css( $attributes, $device = '' ) {
216 $css = [];
217
218 if ( ! empty( $attributes['transition'] ) ) {
219 $css['transition-duration'] = $attributes['transition'] . 's';
220 }
221 return array_merge(
222 [ 'background' => Color::get_css( isset( $attributes['itemBackground'] ) ? $attributes['itemBackground'] : '' ) ],
223 $css,
224 isset( $attributes['alignment'] ) ? Alignment::get_css( $attributes['alignment'], 'justify-content', $device ) : [],
225 isset( $attributes['itemBorder'] ) ? Border::get_css( $attributes['itemBorder'], '', $device ) : [],
226 isset( $attributes['itemPadding'] ) ? Dimensions::get_css( $attributes['itemPadding'], 'padding', $device ) : [],
227 );
228 }
229
230 public function get_item_hover_css( $attributes, $device = '' ) {
231 return array_merge(
232 [ 'background' => Color::get_css( isset( $attributes['itemBackgroundH'] ) ? $attributes['itemBackgroundH'] : '' ) ],
233 isset( $attributes['itemBorder'] ) ? Border::get_hover_css( $attributes['itemBorder'], '', $device ) : [],
234 );
235 }
236
237 public function get_inner_item_css( $attributes, $device = '' ) {
238 $css = [];
239
240 if ( isset( $attributes['itemsDirection'][ 'value' . $device ] ) ) {
241 $css['flex-direction'] = $attributes['itemsDirection'][ 'value' . $device ];
242 }
243
244 if ( isset( $attributes['alignment'][ 'value' . $device ] ) ) {
245 $css['align-items'] = $attributes['alignment'][ 'value' . $device ];
246 }
247
248 return $css;
249 }
250
251 public function get_gap_around_css( $attributes, $device = '' ) {
252 $css = [];
253 if ( isset( $attributes['alignment'][ 'value' . $device ] ) ) {
254 $css['align-items'] = $attributes['alignment'][ 'value' . $device ];
255 }
256
257 return array_merge(
258 $css,
259 Range::get_css([
260 'attributeValue' => $attributes['gap'],
261 'attribute_object_key' => 'value',
262 'isResponsive' => true,
263 'hasUnit' => true,
264 'defaultValue' => 10,
265 'unitDefaultValue' => 'px',
266 'property' => 'gap',
267 'device' => $device,
268 ]),
269 );
270 }
271
272 public function get_details_brief_css( $attributes, $device = '' ) {
273 $css = [];
274 if ( isset( $attributes['alignment'][ 'value' . $device ] ) ) {
275 if ( $attributes['itemsDirection'][ 'value' . $device ] === 'row' ) {
276 $css['justify-content'] = 'space-between';
277 } else {
278 $css['justify-content'] = $attributes['alignment'][ 'value' . $device ];
279 }
280 }
281
282 $gap = Range::get_css([
283 'attributeValue' => $attributes['gap'],
284 'attribute_object_key' => 'value',
285 'isResponsive' => true,
286 'hasUnit' => true,
287 'defaultValue' => 10,
288 'unitDefaultValue' => 'px',
289 'property' => 'gap',
290 'device' => $device,
291 ]);
292 // Title & price gap; unset falls back to the gap above. Longhands only: a
293 // `gap` shorthand at a narrower breakpoint would reset an inherited
294 // column-gap that the generator dedupes away.
295 $title_price_gap = Range::get_css([
296 'attributeValue' => isset( $attributes['titlePriceGap'] ) ? $attributes['titlePriceGap'] : [],
297 'attributeObjectKey' => 'value',
298 'isResponsive' => true,
299 'hasUnit' => true,
300 'unitDefaultValue' => 'px',
301 'property' => 'column-gap',
302 'device' => $device,
303 ]);
304 $gap_css = [];
305 if ( isset( $gap['gap'] ) ) {
306 $gap_css['row-gap'] = $gap['gap'];
307 }
308 // A % gap is rigid and would crush the title once it outgrows the free
309 // space, so it becomes shrinkable spacers (style.css) that yield first.
310 if ( PriceMenuItemBlock::is_percent_title_price_gap( $attributes, $device ) ) {
311 $gap_css['column-gap'] = '0px';
312 $gap_css['--ablocks-pm-tp-gap'] = $title_price_gap['column-gap'];
313 $gap_css['--ablocks-pm-tp-spacer'] = 'block';
314 return array_merge( $gap_css, $css );
315 }
316 if ( isset( $title_price_gap['column-gap'] ) || isset( $gap['gap'] ) ) {
317 $gap_css['column-gap'] = isset( $title_price_gap['column-gap'] ) ? $title_price_gap['column-gap'] : $gap['gap'];
318 }
319 if ( $device && PriceMenuItemBlock::has_percent_title_price_gap( $attributes ) ) {
320 $gap_css['--ablocks-pm-tp-spacer'] = 'none';
321 }
322
323 return array_merge( $gap_css, $css );
324 }
325
326 public function get_all_menu_css( $attributes, $device = '' ) {
327 $css = [];
328 $css['display'] = 'flex';
329 $css['flex-wrap'] = 'wrap';
330 $css['flex-direction'] = 'column';
331
332 return array_merge(
333 $css,
334 Range::get_css([
335 'attributeValue' => $attributes['columnGap'],
336 'attribute_object_key' => 'value',
337 'isResponsive' => true,
338 'hasUnit' => true,
339 'defaultValue' => 20,
340 'unitDefaultValue' => 'px',
341 'property' => 'gap',
342 'device' => $device,
343 ]),
344 );
345 }
346
347 public function get_title_text_css( $attributes, $device = '' ) {
348 $typographyValueGlobal = ! empty( $attributes['titleTypographyGlobal'] ) ? $attributes['titleTypographyGlobal'] : array();
349 return array_merge(
350 [ 'color' => Color::get_css( isset( $attributes['titleColor'] ) ? $attributes['titleColor'] : '' ) ],
351 isset( $attributes['titleTypography'] ) ? Typography::get_css( $attributes['titleTypography'], '', $device, $typographyValueGlobal ) : [],
352 isset( $attributes['titleTextStroke'] ) ? TextStroke::get_css( $attributes['titleTextStroke'], '', $device ) : [],
353 isset( $attributes['titleTextShadow'] ) ? TextShadow::get_css( $attributes['titleTextShadow'], '', $device ) : [],
354 isset( $attributes['titleAlignment'] ) ? Alignment::get_css( $attributes['titleAlignment'], 'text-align', $device ) : [],
355 );
356 }
357 public function get_description_text_css( $attributes, $device = '' ) {
358 $typographyValueGlobal = ! empty( $attributes['descriptionTypographyGlobal'] ) ? $attributes['descriptionTypographyGlobal'] : array();
359 return array_merge(
360 [ 'color' => Color::get_css( isset( $attributes['descriptionColor'] ) ? $attributes['descriptionColor'] : '' ) ],
361 isset( $attributes['descriptionTypography'] ) ? Typography::get_css( $attributes['descriptionTypography'], '', $device, $typographyValueGlobal ) : [],
362 isset( $attributes['descriptionTextStroke'] ) ? TextStroke::get_css( $attributes['descriptionTextStroke'], '', $device ) : [],
363 isset( $attributes['descriptionTextShadow'] ) ? TextShadow::get_css( $attributes['descriptionTextShadow'], '', $device ) : [],
364 isset( $attributes['descriptionAlignment'] ) ? Alignment::get_css( $attributes['descriptionAlignment'], 'text-align', $device ) : [],
365 );
366 }
367 public function get_divider_css( $attributes, $device = '' ) {
368 $css = [];
369 $css['--ablocks-divider-pattern-color'] = Color::get_css(
370 isset( $attributes['color'] ) ? $attributes['color'] : '#000000');
371
372 $moreRangeCSS = [];
373 if ( isset( $attributes['dividerType'] ) && $attributes['dividerType'] === 'mask-style' && isset( $attributes['size'] ) && ! empty( $attributes['size'] ) ) {
374 $moreRangeCSS = Range::get_css([
375 'attributeValue' => $attributes['size'],
376 'attribute_object_key' => 'value',
377 'isResponsive' => false,
378 'defaultValue' => 20,
379 'hasUnit' => false,
380 'unitDefaultValue' => 'px',
381 'property' => '--ablocks-divider-pattern-height',
382 ]);
383 } elseif ( isset( $attributes['weight'] ) && ! empty( $attributes['weight'] ) ) {
384 $moreRangeCSS = Range::get_css([
385 'attributeValue' => $attributes['weight'],
386 'attribute_object_key' => 'value',
387 'isResponsive' => false,
388 'defaultValue' => 2,
389 'hasUnit' => false,
390 'unitDefaultValue' => 'px',
391 'property' => '--ablocks-divider-pattern-weight',
392 ]);
393 }//end if
394
395 if ( ! empty( $attributes['dividerPatternUrl'] ) ) {
396 if ( $attributes['dividerType'] === 'mask-style' ) {
397 $css['--ablocks-divider-pattern-url'] = 'url(' . $attributes['dividerPatternUrl'] . ')';
398 } else {
399 $css['--ablocks-divider-pattern-style'] = $attributes['dividerPatternUrl'];
400 }
401 }
402
403 return array_merge(
404 $css,
405 $moreRangeCSS,
406 );
407 }
408 public function get_price_text_css( $attributes, $device = '' ) {
409 $typographyValueGlobal = ! empty( $attributes['priceTypographyGlobal'] ) ? $attributes['priceTypographyGlobal'] : array();
410 return array_merge(
411 [ 'color' => Color::get_css( isset( $attributes['priceColor'] ) ? $attributes['priceColor'] : '' ) ],
412 isset( $attributes['priceTypography'] ) ? Typography::get_css( $attributes['priceTypography'], '', $device, $typographyValueGlobal ) : [],
413 isset( $attributes['priceTextStroke'] ) ? TextStroke::get_css( $attributes['priceTextStroke'], '', $device ) : [],
414 isset( $attributes['priceTextShadow'] ) ? TextShadow::get_css( $attributes['priceTextShadow'], '', $device ) : [],
415 isset( $attributes['priceAlignment'] ) ? Alignment::get_css( $attributes['priceAlignment'], 'text-align', $device ) : [],
416 );
417 }
418
419 }
420