← All changes | includes/blocks/search/block.php +230 -76 2.9.1 → 2.14.0 View file →

		@@ -1,10 +1,14 @@
1	1	<?php
2	2	namespace ABlocks\Blocks\Search;
3	3
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
4	8	use ABlocks\Classes\BlockBaseAbstract;
5	9	use ABlocks\Classes\CssGenerator;
6		-use ABlocks\Controls\Icon;
	10	+use ABlocks\Classes\CssGeneratorV2;
7	11	use ABlocks\Controls\Alignment;
8	12	use ABlocks\Controls\Typography;
9	13	use ABlocks\Controls\TextShadow;
10	14	use ABlocks\Controls\TextStroke;
		@@ -10,14 +14,14 @@
10	14	use ABlocks\Controls\TextStroke;
11	15	use ABlocks\Controls\Dimensions;
12	16	use ABlocks\Controls\Border;
13	17	use ABlocks\Controls\Range;
14		-use WP_Query;
	18	+use ABlocks\Controls\Color;
15	19
16	20	class Block extends BlockBaseAbstract {
17	21	protected $block_name = 'search';
18	22
19		- public function build_css( $attributes ) {
	23	+ public function build_css_v1( $attributes ) {
20	24	$css_generator = new CssGenerator( $attributes, $this->block_name );
21	25
22	26	$css_generator->add_class_styles(
23	27	'{{WRAPPER}} .ablocks-block--search-form',
		@@ -22,16 +26,25 @@
22	26	$css_generator->add_class_styles(
23	27	'{{WRAPPER}} .ablocks-block--search-form',
24	28	$this->get_SearchBar_css( $attributes ),
25	29	$this->get_SearchBar_css( $attributes, 'Tablet' ),
26		- $this->get_SearchBar_css( $attributes, 'Mobile' )
	30	+ $this->get_SearchBar_css( $attributes, 'Mobile' ),
	31	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_SearchBar_css( $attributes, $device ); } )
27	32	);
	33	+ $css_generator->add_class_styles(
	34	+ '{{WRAPPER}} .ablocks-block--search-form:hover',
	35	+ $this->get_SearchBar_Hover_CSS( $attributes ),
	36	+ $this->get_SearchBar_Hover_CSS( $attributes, 'Tablet' ),
	37	+ $this->get_SearchBar_Hover_CSS( $attributes, 'Mobile' ),
	38	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_SearchBar_Hover_CSS( $attributes, $device ); } )
	39	+ );
28	40
29	41	$css_generator->add_class_styles(
30	42	'{{WRAPPER}} .ablocks-block--search-input',
31	43	$this->get_Input_css( $attributes ),
32	44	$this->get_Input_css( $attributes, 'Tablet' ),
33		- $this->get_Input_css( $attributes, 'Mobile' )
	45	+ $this->get_Input_css( $attributes, 'Mobile' ),
	46	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_Input_css( $attributes, $device ); } )
34	47	);
35	48
36	49	$css_generator->add_class_styles(
37	50	'{{WRAPPER}} .ablocks-block--search-input::placeholder',
		@@ -41,62 +54,204 @@
41	54	$css_generator->add_class_styles(
42	55	'{{WRAPPER}} .ablocks-block--search-button > span',
43	56	$this->get_Button_css( $attributes ),
44	57	$this->get_Button_css( $attributes, 'Tablet' ),
45		- $this->get_Button_css( $attributes, 'Mobile' )
	58	+ $this->get_Button_css( $attributes, 'Mobile' ),
	59	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_Button_css( $attributes, $device ); } )
46	60	);
	61	+ $css_generator->add_class_styles(
	62	+ '{{WRAPPER}} .ablocks-block--search-button:hover > span',
	63	+ $this->get_Button_hover_css( $attributes ),
	64	+ $this->get_Button_hover_css( $attributes, 'Tablet' ),
	65	+ $this->get_Button_hover_css( $attributes, 'Mobile' ),
	66	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_Button_hover_css( $attributes, $device ); } )
	67	+ );
47	68
48	69	$css_generator->add_class_styles(
49	70	'{{WRAPPER}} .ablocks-block--search-button > span > svg',
50	71	$this->get_Icon_css( $attributes ),
51	72	$this->get_Icon_css( $attributes, 'Tablet' ),
52		- $this->get_Icon_css( $attributes, 'Mobile' )
	73	+ $this->get_Icon_css( $attributes, 'Mobile' ),
	74	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_Icon_css( $attributes, $device ); } )
53	75	);
54	76	$css_generator->add_class_styles(
55	77	'{{WRAPPER}} .ablocks-block--search-result',
56	78	$this->get_search_result_list( $attributes ),
57	79	$this->get_search_result_list( $attributes, 'Tablet' ),
58		- $this->get_search_result_list( $attributes, 'Mobile' )
	80	+ $this->get_search_result_list( $attributes, 'Mobile' ),
	81	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_search_result_list( $attributes, $device ); } )
59	82	);
60	83	$css_generator->add_class_styles(
61	84	'{{WRAPPER}} .ablocks-block--search-result:hover',
62	85	$this->get_search_result_list_hover( $attributes ),
63	86	$this->get_search_result_list_hover( $attributes, 'Tablet' ),
64		- $this->get_search_result_list_hover( $attributes, 'Mobile' )
	87	+ $this->get_search_result_list_hover( $attributes, 'Mobile' ),
	88	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_search_result_list_hover( $attributes, $device ); } )
65	89	);
66	90	$css_generator->add_class_styles(
67	91	'{{WRAPPER}} .ablocks-block--search-result__list',
68	92	$this->get_search_result_item( $attributes ),
69	93	$this->get_search_result_item( $attributes, 'Tablet' ),
70		- $this->get_search_result_item( $attributes, 'Mobile' )
	94	+ $this->get_search_result_item( $attributes, 'Mobile' ),
	95	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_search_result_item( $attributes, $device ); } )
71	96	);
72	97	$css_generator->add_class_styles(
73	98	'{{WRAPPER}} .ablocks-block--search-result__list:hover',
74	99	$this->get_search_result_item_hover( $attributes ),
75	100	$this->get_search_result_item_hover( $attributes, 'Tablet' ),
76		- $this->get_search_result_item_hover( $attributes, 'Mobile' )
	101	+ $this->get_search_result_item_hover( $attributes, 'Mobile' ),
	102	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_search_result_item_hover( $attributes, $device ); } )
77	103	);
78	104	$css_generator->add_class_styles(
79		- '{{WRAPPER}} .ablocks-block--search-result__list-thumbnail',
80		- $this->get_search_result_img_css( $attributes ),
81		- $this->get_search_result_img_css( $attributes, 'Tablet' ),
82		- $this->get_search_result_img_css( $attributes, 'Mobile' )
	105	+ '{{WRAPPER}} a.ablocks-block--search-result__list-title',
	106	+ $this->get_search_result_title_css( $attributes ),
	107	+ $this->get_search_result_title_css( $attributes, 'Tablet' ),
	108	+ $this->get_search_result_title_css( $attributes, 'Mobile' ),
	109	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_search_result_title_css( $attributes, $device ); } )
83	110	);
84	111	$css_generator->add_class_styles(
	112	+ '{{WRAPPER}} .ablocks-search-block__spin',
	113	+ $this->get_loading_spinner_css( $attributes ),
	114	+ $this->get_loading_spinner_css( $attributes, 'Tablet' ),
	115	+ $this->get_loading_spinner_css( $attributes, 'Mobile' ),
	116	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_loading_spinner_css( $attributes, $device ); } )
	117	+ );
	118	+
	119	+ return $css_generator->generate_css();
	120	+ }
	121	+ public function build_css_v2( $attributes ) {
	122	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	123	+
	124	+ $css_generator->add_class_styles(
	125	+ '{{WRAPPER}} .ablocks-block--search-form',
	126	+ $this->get_SearchBar_css( $attributes ),
	127	+ $this->get_SearchBar_css( $attributes, 'Tablet' ),
	128	+ $this->get_SearchBar_css( $attributes, 'Mobile' ),
	129	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_SearchBar_css( $attributes, $device ); } )
	130	+ );
	131	+ $css_generator->add_class_styles(
	132	+ '{{WRAPPER}} .ablocks-block--search-form:hover',
	133	+ $this->get_SearchBar_Hover_CSS( $attributes ),
	134	+ $this->get_SearchBar_Hover_CSS( $attributes, 'Tablet' ),
	135	+ $this->get_SearchBar_Hover_CSS( $attributes, 'Mobile' ),
	136	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_SearchBar_Hover_CSS( $attributes, $device ); } )
	137	+ );
	138	+
	139	+ $css_generator->add_class_styles(
	140	+ '{{WRAPPER}} .ablocks-block--search-input',
	141	+ $this->get_Input_css( $attributes ),
	142	+ $this->get_Input_css( $attributes, 'Tablet' ),
	143	+ $this->get_Input_css( $attributes, 'Mobile' ),
	144	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_Input_css( $attributes, $device ); } )
	145	+ );
	146	+
	147	+ $css_generator->add_class_styles(
	148	+ '{{WRAPPER}} .ablocks-block--search-input::placeholder',
	149	+ $this->get_Input_css( $attributes ),
	150	+ );
	151	+
	152	+ $css_generator->add_class_styles(
	153	+ '{{WRAPPER}} .ablocks-block--search-button > span',
	154	+ $this->get_Button_css( $attributes ),
	155	+ $this->get_Button_css( $attributes, 'Tablet' ),
	156	+ $this->get_Button_css( $attributes, 'Mobile' ),
	157	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_Button_css( $attributes, $device ); } )
	158	+ );
	159	+ $css_generator->add_class_styles(
	160	+ '{{WRAPPER}} .ablocks-block--search-button:hover > span',
	161	+ $this->get_Button_hover_css( $attributes ),
	162	+ $this->get_Button_hover_css( $attributes, 'Tablet' ),
	163	+ $this->get_Button_hover_css( $attributes, 'Mobile' ),
	164	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_Button_hover_css( $attributes, $device ); } )
	165	+ );
	166	+ $css_generator->add_class_styles(
	167	+ '{{WRAPPER}} .ablocks-block--search-button',
	168	+ $this->get_button_bg_css( $attributes ),
	169	+ $this->get_button_bg_css( $attributes, 'Tablet' ),
	170	+ $this->get_button_bg_css( $attributes, 'Mobile' ),
	171	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_bg_css( $attributes, $device ); } )
	172	+ );
	173	+ $css_generator->add_class_styles(
	174	+ '{{WRAPPER}} .ablocks-block--search-button',
	175	+ $this->get_button_bg_css( $attributes ),
	176	+ $this->get_button_bg_css( $attributes, 'Tablet' ),
	177	+ $this->get_button_bg_css( $attributes, 'Mobile' ),
	178	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_bg_css( $attributes, $device ); } )
	179	+ );
	180	+ $css_generator->add_class_styles(
	181	+ '{{WRAPPER}} .ablocks-block--search-button:hover',
	182	+ $this->get_button_bg_hover_css( $attributes ),
	183	+ $this->get_button_bg_hover_css( $attributes, 'Tablet' ),
	184	+ $this->get_button_bg_hover_css( $attributes, 'Mobile' ),
	185	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_bg_hover_css( $attributes, $device ); } )
	186	+ );
	187	+ $css_generator->add_class_styles(
	188	+ '{{WRAPPER}} .ablocks-block--search-button:hover',
	189	+ $this->get_button_bg_hover_css( $attributes ),
	190	+ $this->get_button_bg_hover_css( $attributes, 'Tablet' ),
	191	+ $this->get_button_bg_hover_css( $attributes, 'Mobile' ),
	192	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_button_bg_hover_css( $attributes, $device ); } )
	193	+ );
	194	+
	195	+ $css_generator->add_class_styles(
	196	+ '{{WRAPPER}} .ablocks-block--search-button > span > svg',
	197	+ $this->get_Icon_css( $attributes ),
	198	+ $this->get_Icon_css( $attributes, 'Tablet' ),
	199	+ $this->get_Icon_css( $attributes, 'Mobile' ),
	200	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_Icon_css( $attributes, $device ); } )
	201	+ );
	202	+ $css_generator->add_class_styles(
	203	+ '{{WRAPPER}} .ablocks-block--search-result',
	204	+ $this->get_search_result_list( $attributes ),
	205	+ $this->get_search_result_list( $attributes, 'Tablet' ),
	206	+ $this->get_search_result_list( $attributes, 'Mobile' ),
	207	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_search_result_list( $attributes, $device ); } )
	208	+ );
	209	+ $css_generator->add_class_styles(
	210	+ '{{WRAPPER}} .ablocks-block--search-result:hover',
	211	+ $this->get_search_result_list_hover( $attributes ),
	212	+ $this->get_search_result_list_hover( $attributes, 'Tablet' ),
	213	+ $this->get_search_result_list_hover( $attributes, 'Mobile' ),
	214	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_search_result_list_hover( $attributes, $device ); } )
	215	+ );
	216	+ $css_generator->add_class_styles(
	217	+ '{{WRAPPER}} .ablocks-block--search-result__list',
	218	+ $this->get_search_result_item( $attributes ),
	219	+ $this->get_search_result_item( $attributes, 'Tablet' ),
	220	+ $this->get_search_result_item( $attributes, 'Mobile' ),
	221	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_search_result_item( $attributes, $device ); } )
	222	+ );
	223	+ $css_generator->add_class_styles(
	224	+ '{{WRAPPER}} .ablocks-block--search-result__list:hover',
	225	+ $this->get_search_result_item_hover( $attributes ),
	226	+ $this->get_search_result_item_hover( $attributes, 'Tablet' ),
	227	+ $this->get_search_result_item_hover( $attributes, 'Mobile' ),
	228	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_search_result_item_hover( $attributes, $device ); } )
	229	+ );
	230	+ $css_generator->add_class_styles(
85	231	'{{WRAPPER}} a.ablocks-block--search-result__list-title',
86	232	$this->get_search_result_title_css( $attributes ),
87	233	$this->get_search_result_title_css( $attributes, 'Tablet' ),
88		- $this->get_search_result_title_css( $attributes, 'Mobile' )
	234	+ $this->get_search_result_title_css( $attributes, 'Mobile' ),
	235	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_search_result_title_css( $attributes, $device ); } )
89	236	);
90	237	$css_generator->add_class_styles(
91	238	'{{WRAPPER}} .ablocks-search-block__spin',
92	239	$this->get_loading_spinner_css( $attributes ),
93	240	$this->get_loading_spinner_css( $attributes, 'Tablet' ),
94		- $this->get_loading_spinner_css( $attributes, 'Mobile' )
	241	+ $this->get_loading_spinner_css( $attributes, 'Mobile' ),
	242	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_loading_spinner_css( $attributes, $device ); } )
95	243	);
96	244
97	245	return $css_generator->generate_css();
98	246	}
	247	+
	248	+ public function build_css( $attributes ) {
	249	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	250	+ return $this->build_css_v2( $attributes );
	251	+ }
	252	+ return $this->build_css_v1( $attributes );
	253	+ }
99	254	public function get_SearchBar_css( $attributes, $device = '' ) {
100	255
101	256	return array_merge(
102	257	Range::get_css([
		@@ -109,53 +264,41 @@
109	264	'property' => 'gap',
110	265	'device' => $device,
111	266	]),
112	267	isset( $attributes['fullscreenButtonAlignment'] ) ? Alignment::get_css( $attributes['fullscreenButtonAlignment'], 'justify-content', $device ) : [],
	268	+ isset( $attributes['searchBoxBorder'] ) ? Border::get_css( $attributes['searchBoxBorder'], '', $device ) : [],
113	269	);
114	270	}
115	271
	272	+ public function get_SearchBar_Hover_CSS( $attributes, $device = '' ) {
	273	+ return array_merge(
	274	+ isset( $attributes['searchBoxBorder'] ) ? Border::get_hover_css( $attributes['searchBoxBorder'], '', $device ) : [],
	275	+ );
	276	+ }
	277	+
116	278	public function get_Input_css( $attributes, $device = '' ) {
117		- $css = [];
118		- $input_color = isset( $attributes['inputTextColor'] ) ? $attributes['inputTextColor'] : '';
119		-
120		- if ( isset( $attributes['inputTextColor'] ) && ! empty( $attributes['inputTextColor'] ) ) {
121		- $css['color'] = $input_color;
122		- }
123		-
	279	+ $typographyValueGlobal = ! empty( $attributes['inputTypographyGlobal'] ) ? $attributes['inputTypographyGlobal'] : array();
124	280	return array_merge(
125		- $css,
126		- isset( $attributes['inputTypography'] ) ? Typography::get_css( $attributes['inputTypography'], '', $device ) : [],
	281	+ [ 'background' => Color::get_css( isset( $attributes['inputBgColor'] ) ? $attributes['inputBgColor'] : '' ) ],
	282	+ [ 'background' => Color::get_css( isset( $attributes['inputBgColor'] ) ? $attributes['inputBgColor'] : '' ) ],
	283	+ isset( $attributes['inputTypography'] ) ? Typography::get_css( $attributes['inputTypography'], '', $device, $typographyValueGlobal ) : [],
127	284	isset( $attributes['inputTextStroke'] ) ? TextStroke::get_css( $attributes['inputTextStroke'], '', $device ) : [],
128	285	isset( $attributes['inputTextShadow'] ) ? TextShadow::get_css( $attributes['inputTextShadow'], '', $device ) : [],
129	286	);
130	287	}
131	288	public function get_loading_spinner_css( $attributes, $device = '' ) {
132		- $css = [];
133		- $loadingSpinnerColor = isset( $attributes['loadingSpinnerColor'] ) ? $attributes['loadingSpinnerColor'] : '';
134		-
135		- if ( isset( $attributes['loadingSpinnerColor'] ) && ! empty( $attributes['loadingSpinnerColor'] ) ) {
136		- $css['color'] = $loadingSpinnerColor;
137		- }
138		-
139		- return array_merge(
140		- $css,
141		- );
	289	+ return [ 'color' => Color::get_css( isset( $attributes['loadingSpinnerColor'] ) ? $attributes['loadingSpinnerColor'] : '' ) ];
142	290	}
143	291	public function get_search_result_title_css( $attributes, $device = '' ) {
144		- $css = [];
145		- $searchResTColor = isset( $attributes['searchResTColor'] ) ? $attributes['searchResTColor'] : '';
146		-
147		- if ( isset( $attributes['searchResTColor'] ) && ! empty( $attributes['searchResTColor'] ) ) {
148		- $css['color'] = $searchResTColor;
149		- }
150		-
	292	+ $typographyValueGlobal = ! empty( $attributes['searchResTypographyGlobal'] ) ? $attributes['searchResTypographyGlobal'] : array();
151	293	return array_merge(
152		- $css,
153		- isset( $attributes['searchResTypography'] ) ? Typography::get_css( $attributes['searchResTypography'], '', $device ) : [],
	294	+ [ 'color' => Color::get_css( isset( $attributes['searchResTColor'] ) ? $attributes['searchResTColor'] : '' ) ],
	295	+ isset( $attributes['searchResTypography'] ) ? Typography::get_css( $attributes['searchResTypography'], '', $device, $typographyValueGlobal ) : [],
154	296	);
155	297	}
156	298	public function get_search_result_list( $attributes, $device = '' ) {
157	299	$css = [];
	300	+ $css['overflow'] = 'auto';
158	301	$defaultUnit = 'px';
159	302	$offset_top = Range::get_css([
160	303	'attributeValue' => $attributes['verticalOffset'],
161	304	'attribute_object_key' => 'value',
		@@ -217,8 +360,18 @@
217	360	'property' => 'width',
218	361	'device' => $device,
219	362	]),
220	363	Range::get_css([
	364	+ 'attributeValue' => $attributes['searchItemHeight'],
	365	+ 'attribute_object_key' => 'value',
	366	+ 'isResponsive' => true,
	367	+ 'hasUnit' => true,
	368	+ 'defaultValue' => 300,
	369	+ 'unitDefaultValue' => 'px',
	370	+ 'property' => 'height',
	371	+ 'device' => $device,
	372	+ ]),
	373	+ Range::get_css([
221	374	'attributeValue' => $attributes['listGap'],
222	375	'attribute_object_key' => 'value',
223	376	'isResponsive' => true,
224	377	'hasUnit' => true,
		@@ -244,9 +397,11 @@
244	397	);
245	398	}
246	399
247	400	public function get_search_result_item( $attributes, $device = '' ) {
	401	+ $css = [];
248	402	return array_merge(
	403	+ $css,
249	404	Range::get_css([
250	405	'attributeValue' => $attributes['itemWidth'],
251	406	'attribute_object_key' => 'value',
252	407	'isResponsive' => true,
		@@ -279,50 +434,47 @@
279	434	isset( $attributes['itemBorder'] ) ? Border::get_hover_css( $attributes['itemBorder'], '', $device ) : [],
280	435	);
281	436	}
282	437
283		- public function get_search_result_img_css( $attributes, $device = '' ) {
	438	+ public function get_Button_css( $attributes, $device = '' ) {
	439	+ $typographyValueGlobal = ! empty( $attributes['buttonTypographyGlobal'] ) ? $attributes['buttonTypographyGlobal'] : array();
284	440	return array_merge(
	441	+ [ 'color' => Color::get_css( isset( $attributes['buttonTextColor'] ) ? $attributes['buttonTextColor'] : '' ) ],
	442	+ isset( $attributes['buttonTypography'] ) ? Typography::get_css( $attributes['buttonTypography'], '', $device, $typographyValueGlobal ) : [],
	443	+ isset( $attributes['buttonTextStroke'] ) ? TextStroke::get_css( $attributes['buttonTextStroke'], '', $device ) : [],
	444	+ isset( $attributes['buttonTextShadow'] ) ? TextStroke::get_css( $attributes['buttonTextShadow'], '', $device ) : [],
285	445	Range::get_css([
286		- 'attributeValue' => $attributes['thumbnailWidth'],
	446	+ 'attributeValue' => $attributes['searchBtnWidth'],
287	447	'attribute_object_key' => 'value',
288	448	'isResponsive' => true,
	449	+ 'defaultValue' => 70,
	450	+ 'unitDefaultValue' => 'px',
289	451	'hasUnit' => true,
290		- 'defaultValue' => '',
291		- 'unitDefaultValue' => '%',
292	452	'property' => 'width',
293	453	'device' => $device,
294	454	]),
295		- Range::get_css([
296		- 'attributeValue' => $attributes['thumbnailHeight'],
297		- 'attribute_object_key' => 'value',
298		- 'isResponsive' => true,
299		- 'hasUnit' => true,
300		- 'defaultValue' => '',
301		- 'unitDefaultValue' => 'px',
302		- 'property' => 'height',
303		- 'device' => $device,
304		- ]),
305	455	);
306	456	}
	457	+ public function get_Button_hover_css( $attributes, $device = '' ) {
	458	+ $typographyValueGlobal = ! empty( $attributes['buttonTypographyHGlobal'] ) ? $attributes['buttonTypographyHGlobal'] : array();
	459	+ return array_merge(
	460	+ [ 'color' => Color::get_css( isset( $attributes['buttonTextColorH'] ) ? $attributes['buttonTextColorH'] : '' ) ],
	461	+ isset( $attributes['buttonTypographyH'] ) ? Typography::get_css( $attributes['buttonTypographyH'], '', $device, $typographyValueGlobal ) : [],
	462	+ isset( $attributes['buttonTextStrokeH'] ) ? TextStroke::get_css( $attributes['buttonTextStrokeH'], '', $device ) : [],
	463	+ isset( $attributes['buttonTextShadowH'] ) ? TextStroke::get_css( $attributes['buttonTextShadowH'], '', $device ) : [],
	464	+ );
	465	+ }
307	466
308		- public function get_Button_css( $attributes, $device = '' ) {
309		- $css = [];
310		- $button_color = isset( $attributes['buttonTextColor'] ) ? $attributes['buttonTextColor'] : '';
311		-
312		- if ( isset( $attributes['buttonTextColor'] ) && ! empty( $attributes['buttonTextColor'] ) ) {
313		- $css['color'] = $button_color;
314		- }
315		-
	467	+ public function get_button_bg_css( $attributes, $device = '' ) {
316	468	return array_merge(
317		- $css,
318		- isset( $attributes['buttonTypography'] ) ? Typography::get_css( $attributes['buttonTypography'], '', $device ) : [],
319		- isset( $attributes['buttonTextStroke'] ) ? TextStroke::get_css( $attributes['buttonTextStroke'], '', $device ) : [],
320		- isset( $attributes['buttonTextShadow'] ) ? TextStroke::get_css( $attributes['buttonTextShadow'], '', $device ) : [],
	469	+ [ 'background' => Color::get_css( isset( $attributes['buttonBgColor'] ) ? $attributes['buttonBgColor'] : '' ) ],
321	470	);
322	471	}
323		-
324		-
	472	+ public function get_button_bg_hover_css( $attributes, $device = '' ) {
	473	+ return array_merge(
	474	+ [ 'background' => Color::get_css( isset( $attributes['buttonBgColorH'] ) ? $attributes['buttonBgColorH'] : '' ) ],
	475	+ );
	476	+ }
325	477	public function get_Icon_css( $attributes, $device = '' ) {
326	478
327	479	return array_merge(
328	480	Range::get_css([
		@@ -347,8 +499,10 @@
347	499	$source = isset( $attributes['source'] ) ? sanitize_text_field( $attributes['source'] ) : '';
348	500	$placeholder = isset( $attributes['placeholder'] ) ? sanitize_text_field( $attributes['placeholder'] ) : esc_html__( 'Write anything...', 'ablocks' );
349	501	$variant = isset( $attributes['variant'] ) ? sanitize_key( $attributes['variant'] ) : 'classic';
350	502	$isIcon = isset( $attributes['isIcon'] ) ? sanitize_key( $attributes['isIcon'] ) : 'icon';
	503	+ $buttonAlignment = isset( $attributes['buttonAlignment'] ) ? sanitize_text_field( $attributes['buttonAlignment'] ) : 'left';
	504	+ $allowCollapse = isset( $attributes['allowCollapse'] ) ? sanitize_key( $attributes['allowCollapse'] ) : false;
351	505	$buttonText = isset( $attributes['buttonText'] ) ? sanitize_text_field( $attributes['buttonText'] ) : esc_html__( 'Search', 'ablocks' );
352	506	$buttonAlignment = isset( $attributes['buttonAlignment']['value'] ) ? sanitize_key( $attributes['buttonAlignment']['value'] ) : 'left';
353	507
354	508	ob_start();
		@@ -355,9 +509,9 @@
355	509	?>
356	510	<div class="ablocks-block--search-bar <?php echo esc_attr( $variant ); ?>">
357	511	<form method="post" class="ablocks-block--search-form <?php echo esc_attr( ( $isIcon === 'both' || $isIcon === 'text' ) ? $isIcon : '' ); ?>">
358	512	<?php if ( 'left' === $buttonAlignment && 'classic' !== $variant ) : ?>
359		- <button type="button" class="ablocks-block--search-button <?php echo esc_attr( ( $isIcon === 'both' || $isIcon === 'text' ) ? $isIcon : '' ); ?>">
	513	+ <button type="button" class="ablocks-block--search-button <?php echo esc_attr( ( $isIcon === 'both' || $isIcon === 'text' ) ? $isIcon : '' ); ?> searchbar-submit-left">
360	514	<span class="button-content">
361	515	<?php
362	516	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
363	517	echo $this->render_button( $isIcon, $buttonText );
		@@ -370,11 +524,11 @@
370	524	?>
371	525	</span>
372	526	</button>
373	527	<?php endif; ?>
374		- <input class="ablocks-block--search-input <?php echo esc_attr( ( $isIcon === 'both' || $isIcon === 'text' ) ? $isIcon : '' ); ?>" type="text" placeholder="<?php echo esc_attr( $placeholder ); ?>" value=""/>
	528	+ <input class="ablocks-block--search-input <?php echo esc_attr( $allowCollapse ? 'ablocks-block--search-input-collapse' : '' ); ?> <?php echo esc_attr( ( $isIcon === 'both' || $isIcon === 'text' ) ? $isIcon : '' ); ?> searchbar-input-<?php echo esc_attr( $buttonAlignment ); ?>" type="text" placeholder="<?php echo esc_attr( $placeholder ); ?>" value=""/>
375	529	<?php if ( 'right' === $buttonAlignment || 'classic' === $variant ) : ?>
376		- <button type="button" class="ablocks-block--search-button <?php echo esc_attr( ( $isIcon === 'both' || $isIcon === 'text' ) ? $isIcon : '' ); ?>">
	530	+ <button type="button" class="ablocks-block--search-button <?php echo esc_attr( ( $isIcon === 'both' || $isIcon === 'text' ) ? $isIcon : '' ); ?> searchbar-submit-right">
377	531	<span class="button-content">
378	532	<?php
379	533	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
380	534	echo $this->render_button( $isIcon, $buttonText );