PluginProbe
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder / 2.14.0
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder v2.14.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 1.1.0 1.1.1 All 81 releases
← All changes | includes/blocks/container/block.php +604 -0 1.0.3 → 2.14.0 View file →
@@ -1,0 +1,604 @@
1 +<?php
2 +namespace ABlocks\Blocks\Container;
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\Dimensions;
12 +use ABlocks\Controls\BackgroundOverlay;
13 +use ABlocks\Controls\Range;
14 +use ABlocks\Helper;
15 +
16 +class Block extends BlockBaseAbstract {
17 + protected $block_name = 'container';
18 +
19 + public function build_css_v1( $attributes ) {
20 + $css_generator = new CssGenerator( $attributes, $this->block_name );
21 + $css_generator->add_class_styles(
22 + '.ablocks-is-fse-theme {{WRAPPER}}:not(.block-editor-block-list__block).ablocks-block--container--is-root, body:not(.ablocks-is-fse-theme) {{WRAPPER}}:not(.block-editor-block-list__block).ablocks-block--container--is-root',
23 + $this->reset_static_css( $attributes ),
24 + $this->reset_static_css( $attributes, 'Tablet' ),
25 + $this->reset_static_css( $attributes, 'Mobile' ),
26 + );
27 +
28 + $css_generator->add_class_styles(
29 + '{{WRAPPER}}.ablocks-block--container',
30 + $this->get_main_wrapper_css( $attributes ),
31 + $this->get_main_wrapper_css( $attributes, 'Tablet' ),
32 + $this->get_main_wrapper_css( $attributes, 'Mobile' ),
33 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_main_wrapper_css( $attributes, $device ); } )
34 + );
35 +
36 + $css_generator->add_class_styles(
37 + '{{WRAPPER}}.ablocks-block--container-has-link-overlay',
38 + $this->get_link_overlay_wrapper_css( $attributes )
39 + );
40 + $css_generator->add_class_styles(
41 + '{{WRAPPER}}.ablocks-block--container-has-link-overlay > .ablocks-block-container__link-overlay',
42 + $this->get_link_overlay_css( $attributes )
43 + );
44 + $css_generator->add_class_styles(
45 + '{{WRAPPER}}.ablocks-block--container-has-link-overlay > *:not(.ablocks-block-container__link-overlay):not(.ablocks-background--video):not(.ablocks-background-video-wrapper)',
46 + $this->get_link_overlay_content_css( $attributes )
47 + );
48 +
49 + $css_generator->add_class_styles(
50 + '{{WRAPPER}} > .ablocks-block-container',
51 + $this->get_block_container_css( $attributes ),
52 + $this->get_block_container_css( $attributes, 'Tablet' ),
53 + $this->get_block_container_css( $attributes, 'Mobile' ),
54 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_block_container_css( $attributes, $device ); } )
55 + );
56 +
57 + $css_generator->add_class_styles(
58 + '{{WRAPPER}} > .ablocks-block-container',
59 + $this->get_inner_blocks_closest_parent_css( $attributes ),
60 + $this->get_inner_blocks_closest_parent_css( $attributes, 'Tablet' ),
61 + $this->get_inner_blocks_closest_parent_css( $attributes, 'Mobile' ),
62 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_inner_blocks_closest_parent_css( $attributes, $device ); } )
63 + );
64 + $css_generator->add_class_styles(
65 + '{{WRAPPER}} > .ablocks-block-container > *:not(style,.ablocks-block--container)',
66 + $this->get_container_inner_blocks_row_column_display_css( $attributes ),
67 + $this->get_container_inner_blocks_row_column_display_css( $attributes, 'Tablet' ),
68 + $this->get_container_inner_blocks_row_column_display_css( $attributes, 'Mobile' ),
69 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_container_inner_blocks_row_column_display_css( $attributes, $device ); } )
70 + );
71 +
72 + $css_generator->add_class_styles(
73 + '{{WRAPPER}}::before',
74 + $this->get_container_before_css( $attributes ),
75 + $this->get_container_before_css( $attributes, 'Tablet' ),
76 + $this->get_container_before_css( $attributes, 'Mobile' ),
77 + );
78 + $css_generator->add_class_styles(
79 + '{{WRAPPER}}:hover::before',
80 + $this->get_container_before_hover_css( $attributes ),
81 + $this->get_container_before_hover_css( $attributes, 'Tablet' ),
82 + $this->get_container_before_hover_css( $attributes, 'Mobile' ),
83 + );
84 + $css_generator->add_class_styles(
85 + '{{WRAPPER}} .ablocks-block-container >.ablocks-container-shape-bring-to-front',
86 + $this->getContainerShapeTopCSS( $attributes ),
87 + $this->getContainerShapeTopCSS( $attributes, 'Tablet' ),
88 + $this->getContainerShapeTopCSS( $attributes, 'Mobile' ),
89 + );
90 + $css_generator->add_class_styles(
91 + '{{WRAPPER}} .ablocks-block-container >.ablocks-container-shape-bring-to-front',
92 + $this->getContainerShapeBottomCSS( $attributes ),
93 + $this->getContainerShapeBottomCSS( $attributes, 'Tablet' ),
94 + $this->getContainerShapeBottomCSS( $attributes, 'Mobile' ),
95 + );
96 + $css_generator->add_class_styles(
97 + '{{WRAPPER}} .ablocks-shape-top > svg',
98 + $this->getContainerShapeTopSvgCSS( $attributes ),
99 + $this->getContainerShapeTopSvgCSS( $attributes, 'Tablet' ),
100 + $this->getContainerShapeTopSvgCSS( $attributes, 'Mobile' ),
101 + );
102 + $css_generator->add_class_styles(
103 + '{{WRAPPER}} .ablocks-shape-bottom > svg',
104 + $this->getContainerShapeBottomSvgCSS( $attributes ),
105 + $this->getContainerShapeBottomSvgCSS( $attributes, 'Tablet' ),
106 + $this->getContainerShapeBottomSvgCSS( $attributes, 'Mobile' ),
107 + );
108 +
109 + return $css_generator->generate_css();
110 + }
111 +
112 + public function build_css_v2( $attributes ) {
113 + $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
114 + if ( isset( $attributes['isRootContainer'] ) && (bool) $attributes['isRootContainer'] ) {
115 + $css_generator->add_class_styles(
116 + '.ablocks-is-fse-theme {{WRAPPER}}.ablocks-block--container--is-root,
117 + body:not(.ablocks-is-fse-theme) {{WRAPPER}}.ablocks-block--container--is-root',
118 + $this->reset_static_css( $attributes ),
119 + $this->reset_static_css( $attributes, 'Tablet' ),
120 + $this->reset_static_css( $attributes, 'Mobile' ),
121 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->reset_static_css( $attributes, $device ); } )
122 + );
123 + }
124 + $css_generator->add_class_styles(
125 + '{{WRAPPER}}.ablocks-block--container',
126 + $this->get_main_wrapper_css( $attributes ),
127 + $this->get_main_wrapper_css( $attributes, 'Tablet' ),
128 + $this->get_main_wrapper_css( $attributes, 'Mobile' ),
129 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_main_wrapper_css( $attributes, $device ); } )
130 + );
131 +
132 + $css_generator->add_class_styles(
133 + '{{WRAPPER}}.ablocks-block--container-has-link-overlay',
134 + $this->get_link_overlay_wrapper_css( $attributes )
135 + );
136 + $css_generator->add_class_styles(
137 + '{{WRAPPER}}.ablocks-block--container-has-link-overlay > .ablocks-block-container__link-overlay',
138 + $this->get_link_overlay_css( $attributes )
139 + );
140 + $css_generator->add_class_styles(
141 + '{{WRAPPER}}.ablocks-block--container-has-link-overlay > *:not(.ablocks-block-container__link-overlay):not(.ablocks-background--video):not(.ablocks-background-video-wrapper)',
142 + $this->get_link_overlay_content_css( $attributes )
143 + );
144 +
145 + // Block Container only available root block
146 + $css_generator->add_class_styles(
147 + $attributes['isRootContainer'] ? '{{WRAPPER}} > .ablocks-block-container' : '{{WRAPPER}}',
148 + $this->get_block_container_css( $attributes ),
149 + $this->get_block_container_css( $attributes, 'Tablet' ),
150 + $this->get_block_container_css( $attributes, 'Mobile' ),
151 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_block_container_css( $attributes, $device ); } )
152 + );
153 +
154 + $css_generator->add_class_styles(
155 + $attributes['isRootContainer'] ? '{{WRAPPER}} > .ablocks-block-container' : '{{WRAPPER}}',
156 + $this->get_inner_blocks_closest_parent_css( $attributes ),
157 + $this->get_inner_blocks_closest_parent_css( $attributes, 'Tablet' ),
158 + $this->get_inner_blocks_closest_parent_css( $attributes, 'Mobile' ),
159 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_inner_blocks_closest_parent_css( $attributes, $device ); } )
160 + );
161 + $css_generator->add_class_styles(
162 + '{{WRAPPER}}.ablocks-has-block-container > .ablocks-block-container',
163 + $this->get_inner_blocks_closest_parent_css( $attributes ),
164 + $this->get_inner_blocks_closest_parent_css( $attributes, 'Tablet' ),
165 + $this->get_inner_blocks_closest_parent_css( $attributes, 'Mobile' ),
166 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_inner_blocks_closest_parent_css( $attributes, $device ); } )
167 + );
168 +
169 + $css_generator->add_class_styles(
170 + $attributes['isRootContainer'] ? '{{WRAPPER}} > .ablocks-block-container > *:not(style,.ablocks-block--container)' : '{{WRAPPER}}',
171 + $this->get_container_inner_blocks_row_column_display_css_2( $attributes ),
172 + $this->get_container_inner_blocks_row_column_display_css_2( $attributes, 'Tablet' ),
173 + $this->get_container_inner_blocks_row_column_display_css_2( $attributes, 'Mobile' ),
174 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_container_inner_blocks_row_column_display_css_2( $attributes, $device ); } )
175 + );
176 +
177 + $css_generator->add_class_styles(
178 + '{{WRAPPER}}::before',
179 + $this->get_container_before_css( $attributes ),
180 + $this->get_container_before_css( $attributes, 'Tablet' ),
181 + $this->get_container_before_css( $attributes, 'Mobile' ),
182 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_container_before_css( $attributes, $device ); } )
183 + );
184 + $css_generator->add_class_styles(
185 + '{{WRAPPER}}:hover::before',
186 + $this->get_container_before_hover_css( $attributes ),
187 + $this->get_container_before_hover_css( $attributes, 'Tablet' ),
188 + $this->get_container_before_hover_css( $attributes, 'Mobile' ),
189 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_container_before_hover_css( $attributes, $device ); } )
190 + );
191 + $css_generator->add_class_styles(
192 + '{{WRAPPER}} .ablocks-container-shape-top > svg',
193 + $this->getContainerShapeTopSvgCSS( $attributes ),
194 + $this->getContainerShapeTopSvgCSS( $attributes, 'Tablet' ),
195 + $this->getContainerShapeTopSvgCSS( $attributes, 'Mobile' ),
196 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getContainerShapeTopSvgCSS( $attributes, $device ); } )
197 + );
198 + $css_generator->add_class_styles(
199 + '{{WRAPPER}} .ablocks-container-shape-bottom > svg',
200 + $this->getContainerShapeBottomSvgCSS( $attributes ),
201 + $this->getContainerShapeBottomSvgCSS( $attributes, 'Tablet' ),
202 + $this->getContainerShapeBottomSvgCSS( $attributes, 'Mobile' ),
203 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getContainerShapeBottomSvgCSS( $attributes, $device ); } )
204 + );
205 +
206 + $css_generator->add_class_styles(
207 + '{{WRAPPER}} .ablocks-container-shape-top',
208 + $this->getContainerShapeTopCSS( $attributes ),
209 + $this->getContainerShapeTopCSS( $attributes, 'Tablet' ),
210 + $this->getContainerShapeTopCSS( $attributes, 'Mobile' ),
211 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getContainerShapeTopCSS( $attributes, $device ); } )
212 + );
213 + $css_generator->add_class_styles(
214 + '{{WRAPPER}} .ablocks-container-shape-bottom',
215 + $this->getContainerShapeBottomCSS( $attributes ),
216 + $this->getContainerShapeBottomCSS( $attributes, 'Tablet' ),
217 + $this->getContainerShapeBottomCSS( $attributes, 'Mobile' ),
218 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getContainerShapeBottomCSS( $attributes, $device ); } )
219 + );
220 +
221 + return $css_generator->generate_css();
222 + }
223 +
224 + public function build_css( $attributes ) {
225 + if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
226 + return $this->build_css_v2( $attributes );
227 + }
228 + return $this->build_css_v1( $attributes );
229 + }
230 +
231 + public function get_inner_blocks_closest_parent_css( $attributes, $device = '' ) {
232 + $css = [
233 + 'display' => 'flex',
234 + ];
235 +
236 + $gridColumn = Range::get_css([
237 + 'attributeValue' => $attributes['gridColumn'],
238 + 'attributeObjectKey' => 'value',
239 + 'isResponsive' => true,
240 + 'hasUnit' => true,
241 + 'defaultValue' => 0,
242 + 'defaultValueTablet' => 2,
243 + 'defaultValueMobile' => 1,
244 + 'property' => 'value',
245 + 'unitDefaultValue' => '',
246 + 'device' => $device,
247 + ]);
248 +
249 + $gridRow = Range::get_css([
250 + 'attributeValue' => $attributes['gridRow'],
251 + 'attributeObjectKey' => 'value',
252 + 'isResponsive' => true,
253 + 'hasUnit' => true,
254 + 'defaultValue' => 0,
255 + 'property' => 'value',
256 + 'unitDefaultValue' => '',
257 + 'device' => $device,
258 + ]);
259 + if ( ( $attributes['layout'] ?? '' ) !== 'grid' ) {
260 + $css['display'] = 'flex';
261 + if ( ! empty( $attributes[ 'direction' . $device ] ) ) {
262 + $css['flex-direction'] = $attributes[ 'direction' . $device ];
263 + }
264 + if ( ! empty( $attributes[ 'wrap' . $device ] ) ) {
265 + $css['flex-wrap'] = $attributes[ 'wrap' . $device ];
266 + }
267 + } else {
268 + $css['display'] = 'grid';
269 + if ( ! empty( $gridColumn['value'] ) ) {
270 + $css['grid-template-columns'] = 'repeat(' . $gridColumn['value'] . ', 1fr)';
271 + }
272 + if ( ! empty( $gridRow['value'] ) ) {
273 + $css['grid-template-rows'] = 'repeat(' . $gridRow['value'] . ', auto)';
274 + }
275 + }
276 +
277 + // Set alignment properties
278 + if ( ! empty( $attributes[ 'justify' . $device ] ) ) {
279 + $css['justify-content'] = $attributes[ 'justify' . $device ];
280 + }
281 + if ( ! empty( $attributes[ 'align' . $device ] ) ) {
282 + $css['align-items'] = $attributes[ 'align' . $device ];
283 + }
284 +
285 + // Need to add below code support
286 + if ( ! empty( $attributes['dir'][ 'value' . $device ] ) ) {
287 + $css['flex-direction'] = $attributes['dir'][ 'value' . $device ];
288 + }
289 + if ( ! empty( $attributes['justification'][ 'value' . $device ] ) ) {
290 + $css['justify-content'] = $attributes['justification'][ 'value' . $device ];
291 + }
292 + if ( ! empty( $attributes['justification'][ 'value' . $device ] ) ) {
293 + $css['justify-items'] = $attributes['justification'][ 'value' . $device ];
294 + }
295 + if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
296 + $css['align-items'] = $attributes['alignment'][ 'value' . $device ];
297 + }
298 + if ( ! empty( $attributes['wrapping'][ 'value' . $device ] ) ) {
299 + $css['flex-wrap'] = $attributes['wrapping'][ 'value' . $device ];}
300 +
301 + // Merge additional CSS properties safely
302 + return array_merge(
303 + $css,
304 + Range::get_css([
305 + 'attributeValue' => $attributes['minimumHeight'],
306 + 'attributeObjectKey' => 'value',
307 + 'isResponsive' => true,
308 + 'hasUnit' => true,
309 + 'defaultValue' => 0,
310 + 'property' => 'min-height',
311 + 'unitDefaultValue' => 'px',
312 + 'device' => $device,
313 + ]),
314 + Range::get_css([
315 + 'attributeValue' => $attributes['gap'],
316 + 'attributeObjectKey' => 'rowGap',
317 + 'isResponsive' => true,
318 + 'hasUnit' => true,
319 + 'defaultValue' => 0,
320 + 'property' => 'row-gap',
321 + 'unitDefaultValue' => 'px',
322 + 'device' => $device,
323 + ]),
324 + Range::get_css([
325 + 'attributeValue' => $attributes['gap'],
326 + 'attributeObjectKey' => 'columnGap',
327 + 'isResponsive' => true,
328 + 'hasUnit' => true,
329 + 'defaultValue' => 0,
330 + 'property' => 'column-gap',
331 + 'unitDefaultValue' => 'px',
332 + 'device' => $device,
333 + ])
334 + );
335 + }
336 +
337 +
338 +
339 + public function get_container_inner_blocks_row_column_display_css( $attributes, $device = '' ) {
340 + $css = [];
341 + if ( ! empty( $attributes['dir'][ 'value' . $device ] ) && ( 'row' === $attributes['dir'][ 'value' . $device ] || 'row-reverse' === $attributes['dir'][ 'value' . $device ] ) ) {
342 + $css['display'] = 'inline-block';
343 + $css['width'] = 'auto';
344 + }
345 + return $css;
346 + }
347 +
348 + public function get_container_inner_blocks_row_column_display_css_2( $attributes, $device = '' ) {
349 + $css = [];
350 + if ( ! empty( $attributes['dir'][ 'value' . $device ] ) && ( 'row' === $attributes['dir'][ 'value' . $device ] || 'row-reverse' === $attributes['dir'][ 'value' . $device ] ) ) {
351 + $css['display'] = 'inline-flex';
352 + // $css['width'] = 'auto';
353 + }
354 + return $css;
355 + }
356 +
357 + public function get_block_container_css( $attributes, $device = '' ) {
358 + $css = [];
359 + $preparedContentWidth = Range::get_css([
360 + 'attributeValue' => $attributes['containerContentWidth'],
361 + 'attributeObjectKey' => 'value',
362 + 'isResponsive' => true,
363 + 'hasUnit' => true,
364 + 'defaultValue' => 1140,
365 + 'property' => 'value',
366 + 'unitDefaultValue' => 'px',
367 + 'device' => $device,
368 + ]);
369 + $content_box_width_value = $preparedContentWidth['value'] ?? '';
370 + if ( empty( $content_box_width_value ) && $device === '' ) {
371 + $content_box_width_value = Helper::get_settings( 'default_container_width' ) ?? 1140;
372 + }
373 + $content_box_width_unit = $preparedContentWidth['valueUnit'] ?? 'px';
374 + $is_root_container = isset( $attributes['isRootContainer'] ) ? $attributes['isRootContainer'] : false;
375 +
376 + if ( $is_root_container && $attributes['containerWidthType'] === 'boxed' && ! empty( $content_box_width_value ) ) {
377 + $css['max-width'] = "min(100%, {$content_box_width_value}{$content_box_width_unit})";
378 + $css['margin-right'] = 'auto !important';
379 + $css['margin-left'] = 'auto !important';
380 + }
381 +
382 + return $css;
383 + }
384 +
385 + public function reset_static_css( $attributes, $device = '' ) {
386 + $preparedContainer = Range::get_css([
387 + 'attributeValue' => $attributes['containerWidth'],
388 + 'attributeObjectKey' => 'value',
389 + 'isResponsive' => true,
390 + 'hasUnit' => true,
391 + 'defaultValue' => 100,
392 + 'property' => 'value',
393 + 'unitDefaultValue' => '%',
394 + 'device' => '',
395 + ]);
396 + $css = [];
397 + if ( 'custom' === $attributes['containerWidthType'] && ! empty( $preparedContainer['value'] ) ) {
398 + $css['margin-left'] = 'auto !important';
399 + $css['margin-right'] = 'auto !important';
400 + }
401 + return $css;
402 + }
403 + public function get_main_wrapper_css( $attributes, $device = '' ) {
404 + $css = [];
405 + $prepared_container = Range::get_css([
406 + 'attributeValue' => $attributes['containerWidth'],
407 + 'attributeObjectKey' => 'value',
408 + 'isResponsive' => true,
409 + 'hasUnit' => true,
410 + 'defaultValue' => 100,
411 + 'property' => 'value',
412 + 'unitDefaultValue' => '%',
413 + 'device' => $device,
414 + ]);
415 +
416 + $is_root_container = isset( $attributes['isRootContainer'] ) ? $attributes['isRootContainer'] : false;
417 + if ( ( ! $is_root_container || 'custom' === $attributes['containerWidthType'] ) && ! empty( $prepared_container['value'] ) ) {
418 + $css['max-width'] = "min(100%, {$prepared_container['value']}{$prepared_container['valueUnit']}) !important";
419 + }
420 +
421 + if ( 'custom' === $attributes['containerWidthType'] && ! empty( $prepared_container['value'] ) && $is_root_container ) {
422 + $css['margin-left'] = 'auto !important';
423 + $css['margin-right'] = 'auto !important';
424 + }
425 +
426 + if ( $is_root_container && 'custom' !== $attributes['containerWidthType'] ) {
427 + unset( $css['max-width'] );
428 + unset( $css['margin-left'] );
429 + unset( $css['margin-right'] );
430 + }
431 +
432 + $css['overflow'] = ! empty( $attributes['overflow'] ) ? $attributes['overflow'] : 'visible';
433 +
434 + return array_merge(
435 + Dimensions::get_css( $attributes['_padding'], 'padding', $device ),
436 + $css
437 + );
438 + }
439 +
440 + // The container's link (HTML Tag = a) is rendered as an overlay <a>, not as
441 + // the wrapping tag, so nested blocks can never end up with an <a> nested
442 + // inside another <a>. These three methods position that overlay and lift
443 + // the container's real content above it so nested interactive elements
444 + // (e.g. an InfoBox button) stay independently clickable.
445 + public function get_link_overlay_wrapper_css( $attributes, $device = '' ) {
446 + if ( empty( $attributes['htmlTag'] ) || 'a' !== $attributes['htmlTag'] ) {
447 + return [];
448 + }
449 + return [ 'position' => 'relative' ];
450 + }
451 +
452 + public function get_link_overlay_css( $attributes, $device = '' ) {
453 + if ( empty( $attributes['htmlTag'] ) || 'a' !== $attributes['htmlTag'] ) {
454 + return [];
455 + }
456 + return [
457 + 'position' => 'absolute',
458 + 'top' => '0',
459 + 'left' => '0',
460 + 'right' => '0',
461 + 'bottom' => '0',
462 + 'width' => '100%',
463 + 'height' => '100%',
464 + 'z-index' => '0',
465 + ];
466 + }
467 +
468 + public function get_link_overlay_content_css( $attributes, $device = '' ) {
469 + if ( empty( $attributes['htmlTag'] ) || 'a' !== $attributes['htmlTag'] ) {
470 + return [];
471 + }
472 + return [
473 + 'position' => 'relative',
474 + 'z-index' => '1',
475 + ];
476 + }
477 +
478 + public static function get_container_before_css( $attributes, $device = '' ) {
479 + if ( ! isset( $attributes['_backgroundOverlay']['backgroundOverlayType'] ) || $attributes['_backgroundOverlay']['backgroundOverlayType'] === 'none' ) {
480 + return [];
481 + }
482 + return array_merge(
483 + BackgroundOverlay::get_before_css( $attributes['_backgroundOverlay'], $attributes['_border'], 'background', $device ),
484 + );
485 + }
486 + public static function get_container_before_hover_css( $attributes, $device = '' ) {
487 + if ( ! isset( $attributes['_backgroundOverlay']['backgroundOverlayTypeH'] ) || $attributes['_backgroundOverlay']['backgroundOverlayTypeH'] === 'none' ) {
488 + return [];
489 + }
490 + return array_merge(
491 + BackgroundOverlay::get_before_hover_css( $attributes['_backgroundOverlay'], $attributes['_border'], 'background', $device ),
492 + );
493 + }
494 +
495 + public function getContainerShapeTopCSS( $attributes, $device = '' ) {
496 + $css = [];
497 +
498 + if ( ! empty( $attributes['topShapeBringToFront'] ) &&
499 + $attributes['shapeTop'] !== '' ) {
500 + $css['z-index'] = 1;
501 + $css['position'] = 'absolute';
502 + }
503 + return $css;
504 + }
505 +
506 + public function getContainerShapeBottomCSS( $attributes, $device = '' ) {
507 + $css = [];
508 +
509 + if ( ! empty( $attributes['bottomShapeBringToFront'] ) &&
510 + $attributes['shapeBottom'] !== '' ) {
511 + $css['z-index'] = 1;
512 + $css['position'] = 'absolute';
513 + }
514 + return $css;
515 + }
516 +
517 + public function getContainerShapeTopSvgCSS( $attributes, $device = '' ) {
518 + $css = [];
519 +
520 + if ( empty( $attributes['shapeTop'] ) ) {
521 + return [];
522 + }
523 +
524 + if ( ! empty( $attributes['shapeTopColor'] ) ) {
525 + $css['fill'] = $attributes['shapeTopColor'];
526 + }
527 + $topShapeFlip = isset( $attributes['topShapeFlip'] ) ? $attributes['topShapeFlip'] : false;
528 + $shapeTop = isset( $attributes['shapeTop'] ) ? $attributes['shapeTop'] : '';
529 +
530 + if ( $topShapeFlip && $shapeTop !== '' ) {
531 + $css['transform'] = 'translateX(0%) rotateY(180deg)';
532 + } else {
533 + $css['transform'] = 'translateX(0%)';
534 + }
535 +
536 + return array_merge(
537 + Range::get_css([
538 + 'attributeValue' => $attributes['shapeTopHeight'],
539 + 'attribute_object_key' => 'value',
540 + 'isResponsive' => true,
541 + 'defaultValue' => 100,
542 + 'hasUnit' => true,
543 + 'unitDefaultValue' => 'px',
544 + 'property' => 'height',
545 + 'device' => $device,
546 + ]),
547 + Range::get_css([
548 + 'attributeValue' => $attributes['shapeTopWidth'],
549 + 'attribute_object_key' => 'value',
550 + 'isResponsive' => true,
551 + 'defaultValue' => 100,
552 + 'hasUnit' => true,
553 + 'unitDefaultValue' => '%',
554 + 'property' => 'width',
555 + 'device' => $device,
556 + ]),
557 + $css,
558 + );
559 + }
560 +
561 + public function getContainerShapeBottomSvgCSS( $attributes, $device = '' ) {
562 + $css = [];
563 +
564 + if ( empty( $attributes['shapeBottom'] ) ) {
565 + return [];
566 + }
567 +
568 + if ( ! empty( $attributes['shapeBottomColor'] ) ) {
569 + $css['fill'] = $attributes['shapeBottomColor'];
570 + }
571 +
572 + $bottomShapeFlip = isset( $attributes['bottomShapeFlip'] ) ? $attributes['bottomShapeFlip'] : false;
573 + $shapeBottom = isset( $attributes['shapeBottom'] ) ? $attributes['shapeBottom'] : '';
574 +
575 + if ( $bottomShapeFlip && $shapeBottom !== '' ) {
576 + $css['transform'] = 'translateX(0%) rotateY(180deg)';
577 + } else {
578 + $css['transform'] = 'translateX(0%)';
579 + }
580 + return array_merge(
581 + Range::get_css([
582 + 'attributeValue' => $attributes['shapeBottomHeight'],
583 + 'attribute_object_key' => 'value',
584 + 'isResponsive' => true,
585 + 'defaultValue' => 100,
586 + 'hasUnit' => true,
587 + 'unitDefaultValue' => 'px',
588 + 'property' => 'height',
589 + 'device' => $device,
590 + ]),
591 + Range::get_css([
592 + 'attributeValue' => $attributes['shapeBottomWidth'],
593 + 'attribute_object_key' => 'value',
594 + 'isResponsive' => true,
595 + 'defaultValue' => 100,
596 + 'hasUnit' => true,
597 + 'unitDefaultValue' => '%',
598 + 'property' => 'width',
599 + 'device' => $device,
600 + ]),
601 + $css,
602 + );
603 + }
604 +}