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
← All changes | includes/blocks/price-menu/block.php +419 -0 1.0.2 → 2.16.0 View file →
@@ -1,0 +1,419 @@
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 +}