← All changes | includes/blocks/container/block.php +588 -0 2.7.7 → 2.13.0 View file →

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