← All changes | includes/blocks/container/block.php +393 -11 2.9.1 → 2.14.0 View file →

		@@ -6,8 +6,9 @@
6	6	}
7	7
8	8	use ABlocks\Classes\BlockBaseAbstract;
9	9	use ABlocks\Classes\CssGenerator;
	10	+use ABlocks\Classes\CssGeneratorV2;
10	11	use ABlocks\Controls\Dimensions;
11	12	use ABlocks\Controls\BackgroundOverlay;
12	13	use ABlocks\Controls\Range;
13	14	use ABlocks\Helper;
		@@ -14,11 +15,10 @@
14	15
15	16	class Block extends BlockBaseAbstract {
16	17	protected $block_name = 'container';
17	18
18		- public function build_css( $attributes ) {
	19	+ public function build_css_v1( $attributes ) {
19	20	$css_generator = new CssGenerator( $attributes, $this->block_name );
20		-
21	21	$css_generator->add_class_styles(
22	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	23	$this->reset_static_css( $attributes ),
24	24	$this->reset_static_css( $attributes, 'Tablet' ),
		@@ -28,16 +28,31 @@
28	28	$css_generator->add_class_styles(
29	29	'{{WRAPPER}}.ablocks-block--container',
30	30	$this->get_main_wrapper_css( $attributes ),
31	31	$this->get_main_wrapper_css( $attributes, 'Tablet' ),
32		- $this->get_main_wrapper_css( $attributes, 'Mobile' )
	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 ); } )
33	34	);
34	35
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(
36	50	'{{WRAPPER}} > .ablocks-block-container',
37	51	$this->get_block_container_css( $attributes ),
38	52	$this->get_block_container_css( $attributes, 'Tablet' ),
39		- $this->get_block_container_css( $attributes, 'Mobile' )
	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 ); } )
40	55	);
41	56
42	57	$css_generator->add_class_styles(
43	58	'{{WRAPPER}} > .ablocks-block-container',
		@@ -42,15 +57,17 @@
42	57	$css_generator->add_class_styles(
43	58	'{{WRAPPER}} > .ablocks-block-container',
44	59	$this->get_inner_blocks_closest_parent_css( $attributes ),
45	60	$this->get_inner_blocks_closest_parent_css( $attributes, 'Tablet' ),
46		- $this->get_inner_blocks_closest_parent_css( $attributes, 'Mobile' )
	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 ); } )
47	63	);
48	64	$css_generator->add_class_styles(
49	65	'{{WRAPPER}} > .ablocks-block-container > *:not(style,.ablocks-block--container)',
50	66	$this->get_container_inner_blocks_row_column_display_css( $attributes ),
51	67	$this->get_container_inner_blocks_row_column_display_css( $attributes, 'Tablet' ),
52		- $this->get_container_inner_blocks_row_column_display_css( $attributes, 'Mobile' )
	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 ); } )
53	70	);
54	71
55	72	$css_generator->add_class_styles(
56	73	'{{WRAPPER}}::before',
		@@ -63,15 +80,210 @@
63	80	$this->get_container_before_hover_css( $attributes ),
64	81	$this->get_container_before_hover_css( $attributes, 'Tablet' ),
65	82	$this->get_container_before_hover_css( $attributes, 'Mobile' ),
66	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	+ );
67	108
68	109	return $css_generator->generate_css();
69	110	}
70	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	+
71	231	public function get_inner_blocks_closest_parent_css( $attributes, $device = '' ) {
72		- $css = [];
	232	+ $css = [
	233	+ 'display' => 'flex',
	234	+ ];
73	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
74	286	if ( ! empty( $attributes['dir'][ 'value' . $device ] ) ) {
75	287	$css['flex-direction'] = $attributes['dir'][ 'value' . $device ];
76	288	}
77	289	if ( ! empty( $attributes['justification'][ 'value' . $device ] ) ) {
		@@ -76,14 +288,18 @@
76	288	}
77	289	if ( ! empty( $attributes['justification'][ 'value' . $device ] ) ) {
78	290	$css['justify-content'] = $attributes['justification'][ 'value' . $device ];
79	291	}
	292	+ if ( ! empty( $attributes['justification'][ 'value' . $device ] ) ) {
	293	+ $css['justify-items'] = $attributes['justification'][ 'value' . $device ];
	294	+ }
80	295	if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
81	296	$css['align-items'] = $attributes['alignment'][ 'value' . $device ];
82	297	}
83	298	if ( ! empty( $attributes['wrapping'][ 'value' . $device ] ) ) {
84		- $css['flex-wrap'] = $attributes['wrapping'][ 'value' . $device ];
85		- }
	299	+ $css['flex-wrap'] = $attributes['wrapping'][ 'value' . $device ];}
	300	+
	301	+ // Merge additional CSS properties safely
86	302	return array_merge(
87	303	$css,
88	304	Range::get_css([
89	305	'attributeValue' => $attributes['minimumHeight'],
		@@ -113,12 +329,14 @@
113	329	'defaultValue' => 0,
114	330	'property' => 'column-gap',
115	331	'unitDefaultValue' => 'px',
116	332	'device' => $device,
117		- ]),
	333	+ ])
118	334	);
	335	+ }
119	336
120		- }
	337	+
	338	+
121	339	public function get_container_inner_blocks_row_column_display_css( $attributes, $device = '' ) {
122	340	$css = [];
123	341	if ( ! empty( $attributes['dir'][ 'value' . $device ] ) && ( 'row' === $attributes['dir'][ 'value' . $device ] || 'row-reverse' === $attributes['dir'][ 'value' . $device ] ) ) {
124	342	$css['display'] = 'inline-block';
		@@ -126,8 +344,17 @@
126	344	}
127	345	return $css;
128	346	}
129	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	+
130	357	public function get_block_container_css( $attributes, $device = '' ) {
131	358	$css = [];
132	359	$preparedContentWidth = Range::get_css([
133	360	'attributeValue' => $attributes['containerContentWidth'],
		@@ -208,15 +435,170 @@
208	435	Dimensions::get_css( $attributes['_padding'], 'padding', $device ),
209	436	$css
210	437	);
211	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	+
212	478	public static function get_container_before_css( $attributes, $device = '' ) {
	479	+ if ( ! isset( $attributes['_backgroundOverlay']['backgroundOverlayType'] ) || $attributes['_backgroundOverlay']['backgroundOverlayType'] === 'none' ) {
	480	+ return [];
	481	+ }
213	482	return array_merge(
214	483	BackgroundOverlay::get_before_css( $attributes['_backgroundOverlay'], $attributes['_border'], 'background', $device ),
215	484	);
216	485	}
217	486	public static function get_container_before_hover_css( $attributes, $device = '' ) {
	487	+ if ( ! isset( $attributes['_backgroundOverlay']['backgroundOverlayTypeH'] ) || $attributes['_backgroundOverlay']['backgroundOverlayTypeH'] === 'none' ) {
	488	+ return [];
	489	+ }
218	490	return array_merge(
219	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,
220	602	);
221	603	}
222	604	}