ablocks / includes / blocks / search / block.php

block.php in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.14.0, at includes/blocks/search/block.php

583 lines 25.7 KB

Raw Download Zip

1	<?php
2	namespace ABlocks\Blocks\Search;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit;
6	}
7
8	use ABlocks\Classes\BlockBaseAbstract;
9	use ABlocks\Classes\CssGenerator;
10	use ABlocks\Classes\CssGeneratorV2;
11	use ABlocks\Controls\Alignment;
12	use ABlocks\Controls\Typography;
13	use ABlocks\Controls\TextShadow;
14	use ABlocks\Controls\TextStroke;
15	use ABlocks\Controls\Dimensions;
16	use ABlocks\Controls\Border;
17	use ABlocks\Controls\Range;
18	use ABlocks\Controls\Color;
19
20	class Block extends BlockBaseAbstract {
21	protected $block_name = 'search';
22
23	public function build_css_v1( $attributes ) {
24	$css_generator = new CssGenerator( $attributes, $this->block_name );
25
26	$css_generator->add_class_styles(
27	'{{WRAPPER}} .ablocks-block--search-form',
28	$this->get_SearchBar_css( $attributes ),
29	$this->get_SearchBar_css( $attributes, 'Tablet' ),
30	$this->get_SearchBar_css( $attributes, 'Mobile' ),
31	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_SearchBar_css( $attributes, $device ); } )
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	);
40
41	$css_generator->add_class_styles(
42	'{{WRAPPER}} .ablocks-block--search-input',
43	$this->get_Input_css( $attributes ),
44	$this->get_Input_css( $attributes, 'Tablet' ),
45	$this->get_Input_css( $attributes, 'Mobile' ),
46	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_Input_css( $attributes, $device ); } )
47	);
48
49	$css_generator->add_class_styles(
50	'{{WRAPPER}} .ablocks-block--search-input::placeholder',
51	$this->get_Input_css( $attributes ),
52	);
53
54	$css_generator->add_class_styles(
55	'{{WRAPPER}} .ablocks-block--search-button > span',
56	$this->get_Button_css( $attributes ),
57	$this->get_Button_css( $attributes, 'Tablet' ),
58	$this->get_Button_css( $attributes, 'Mobile' ),
59	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_Button_css( $attributes, $device ); } )
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	);
68
69	$css_generator->add_class_styles(
70	'{{WRAPPER}} .ablocks-block--search-button > span > svg',
71	$this->get_Icon_css( $attributes ),
72	$this->get_Icon_css( $attributes, 'Tablet' ),
73	$this->get_Icon_css( $attributes, 'Mobile' ),
74	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_Icon_css( $attributes, $device ); } )
75	);
76	$css_generator->add_class_styles(
77	'{{WRAPPER}} .ablocks-block--search-result',
78	$this->get_search_result_list( $attributes ),
79	$this->get_search_result_list( $attributes, 'Tablet' ),
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 ); } )
82	);
83	$css_generator->add_class_styles(
84	'{{WRAPPER}} .ablocks-block--search-result:hover',
85	$this->get_search_result_list_hover( $attributes ),
86	$this->get_search_result_list_hover( $attributes, 'Tablet' ),
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 ); } )
89	);
90	$css_generator->add_class_styles(
91	'{{WRAPPER}} .ablocks-block--search-result__list',
92	$this->get_search_result_item( $attributes ),
93	$this->get_search_result_item( $attributes, 'Tablet' ),
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 ); } )
96	);
97	$css_generator->add_class_styles(
98	'{{WRAPPER}} .ablocks-block--search-result__list:hover',
99	$this->get_search_result_item_hover( $attributes ),
100	$this->get_search_result_item_hover( $attributes, 'Tablet' ),
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 ); } )
103	);
104	$css_generator->add_class_styles(
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 ); } )
110	);
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(
231	'{{WRAPPER}} a.ablocks-block--search-result__list-title',
232	$this->get_search_result_title_css( $attributes ),
233	$this->get_search_result_title_css( $attributes, 'Tablet' ),
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 ); } )
236	);
237	$css_generator->add_class_styles(
238	'{{WRAPPER}} .ablocks-search-block__spin',
239	$this->get_loading_spinner_css( $attributes ),
240	$this->get_loading_spinner_css( $attributes, 'Tablet' ),
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 ); } )
243	);
244
245	return $css_generator->generate_css();
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	}
254	public function get_SearchBar_css( $attributes, $device = '' ) {
255
256	return array_merge(
257	Range::get_css([
258	'attributeValue' => $attributes['gap'],
259	'attribute_object_key' => 'value',
260	'isResponsive' => true,
261	'defaultValue' => 0,
262	'unitDefaultValue' => 'px',
263	'hasUnit' => true,
264	'property' => 'gap',
265	'device' => $device,
266	]),
267	isset( $attributes['fullscreenButtonAlignment'] ) ? Alignment::get_css( $attributes['fullscreenButtonAlignment'], 'justify-content', $device ) : [],
268	isset( $attributes['searchBoxBorder'] ) ? Border::get_css( $attributes['searchBoxBorder'], '', $device ) : [],
269	);
270	}
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
278	public function get_Input_css( $attributes, $device = '' ) {
279	$typographyValueGlobal = ! empty( $attributes['inputTypographyGlobal'] ) ? $attributes['inputTypographyGlobal'] : array();
280	return array_merge(
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 ) : [],
284	isset( $attributes['inputTextStroke'] ) ? TextStroke::get_css( $attributes['inputTextStroke'], '', $device ) : [],
285	isset( $attributes['inputTextShadow'] ) ? TextShadow::get_css( $attributes['inputTextShadow'], '', $device ) : [],
286	);
287	}
288	public function get_loading_spinner_css( $attributes, $device = '' ) {
289	return [ 'color' => Color::get_css( isset( $attributes['loadingSpinnerColor'] ) ? $attributes['loadingSpinnerColor'] : '' ) ];
290	}
291	public function get_search_result_title_css( $attributes, $device = '' ) {
292	$typographyValueGlobal = ! empty( $attributes['searchResTypographyGlobal'] ) ? $attributes['searchResTypographyGlobal'] : array();
293	return array_merge(
294	[ 'color' => Color::get_css( isset( $attributes['searchResTColor'] ) ? $attributes['searchResTColor'] : '' ) ],
295	isset( $attributes['searchResTypography'] ) ? Typography::get_css( $attributes['searchResTypography'], '', $device, $typographyValueGlobal ) : [],
296	);
297	}
298	public function get_search_result_list( $attributes, $device = '' ) {
299	$css = [];
300	$css['overflow'] = 'auto';
301	$defaultUnit = 'px';
302	$offset_top = Range::get_css([
303	'attributeValue' => $attributes['verticalOffset'],
304	'attribute_object_key' => 'value',
305	'isResponsive' => true,
306	'hasUnit' => true,
307	'defaultValue' => 230,
308	'unitDefaultValue' => 'px',
309	'property' => 'top',
310	'device' => $device,
311	]);
312	$offset_bottom = Range::get_css([
313	'attributeValue' => $attributes['verticalOffset'],
314	'attribute_object_key' => 'value',
315	'isResponsive' => true,
316	'hasUnit' => true,
317	'defaultValue' => 230,
318	'unitDefaultValue' => 'px',
319	'property' => 'bottom',
320	'device' => $device,
321	]);
322	$offset_left = Range::get_css([
323	'attributeValue' => $attributes['horizontalOffset'],
324	'attribute_object_key' => 'value',
325	'isResponsive' => true,
326	'hasUnit' => true,
327	'defaultValue' => 230,
328	'unitDefaultValue' => 'px',
329	'property' => 'left',
330	'device' => $device,
331	]);
332	$offset_right = Range::get_css([
333	'attributeValue' => $attributes['horizontalOffset'],
334	'attribute_object_key' => 'value',
335	'isResponsive' => true,
336	'hasUnit' => true,
337	'defaultValue' => 230,
338	'unitDefaultValue' => 'px',
339	'property' => 'right',
340	'device' => $device,
341	]);
342	// Set the position property
343	if ( ! empty( $attributes['position'] ) ) {
344	$css['position'] = $attributes['position'];
345	}
346
347	// Ensure offsets only apply when the position is not "default"
348	if ( ! empty( $attributes['position'] ) && $attributes['position'] === 'default' ) {
349	unset( $offset_left['left'], $offset_right['right'], $offset_top['top'], $offset_bottom['bottom'] );
350	}
351	return array_merge(
352	$css,
353	Range::get_css([
354	'attributeValue' => $attributes['listWidth'],
355	'attribute_object_key' => 'value',
356	'isResponsive' => true,
357	'hasUnit' => true,
358	'defaultValue' => '',
359	'unitDefaultValue' => '%',
360	'property' => 'width',
361	'device' => $device,
362	]),
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([
374	'attributeValue' => $attributes['listGap'],
375	'attribute_object_key' => 'value',
376	'isResponsive' => true,
377	'hasUnit' => true,
378	'defaultValue' => 0,
379	'unitDefaultValue' => 'px',
380	'property' => 'gap',
381	'device' => $device,
382	]),
383	$offset_top,
384	$offset_bottom,
385	$offset_left,
386	$offset_right,
387	isset( $attributes['listPadding'] ) ? Dimensions::get_css( $attributes['listPadding'], 'padding', $device ) : [],
388	isset( $attributes['listBorder'] ) ? Border::get_css( $attributes['listBorder'], '', $device ) : [],
389	);
390	}
391	public function get_search_result_list_hover( $attributes, $device = '' ) {
392	$css = [];
393
394	return array_merge(
395	$css,
396	isset( $attributes['listBorder'] ) ? Border::get_hover_css( $attributes['listBorder'], $device ) : [],
397	);
398	}
399
400	public function get_search_result_item( $attributes, $device = '' ) {
401	$css = [];
402	return array_merge(
403	$css,
404	Range::get_css([
405	'attributeValue' => $attributes['itemWidth'],
406	'attribute_object_key' => 'value',
407	'isResponsive' => true,
408	'hasUnit' => true,
409	'defaultValue' => '',
410	'unitDefaultValue' => 'px',
411	'property' => 'width',
412	'device' => $device,
413	]),
414	Range::get_css([
415	'attributeValue' => $attributes['itemGap'],
416	'attribute_object_key' => 'value',
417	'isResponsive' => true,
418	'hasUnit' => true,
419	'defaultValue' => '',
420	'unitDefaultValue' => 'px',
421	'property' => 'gap',
422	'device' => $device,
423	]),
424	isset( $attributes['itemPadding'] ) ? Dimensions::get_css( $attributes['itemPadding'], 'padding', $device ) : [],
425	isset( $attributes['itemBorder'] ) ? Border::get_css( $attributes['itemBorder'], '', $device ) : [],
426	);
427	}
428
429	public function get_search_result_item_hover( $attributes, $device = '' ) {
430	$css = [];
431
432	return array_merge(
433	$css,
434	isset( $attributes['itemBorder'] ) ? Border::get_hover_css( $attributes['itemBorder'], '', $device ) : [],
435	);
436	}
437
438	public function get_Button_css( $attributes, $device = '' ) {
439	$typographyValueGlobal = ! empty( $attributes['buttonTypographyGlobal'] ) ? $attributes['buttonTypographyGlobal'] : array();
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 ) : [],
445	Range::get_css([
446	'attributeValue' => $attributes['searchBtnWidth'],
447	'attribute_object_key' => 'value',
448	'isResponsive' => true,
449	'defaultValue' => 70,
450	'unitDefaultValue' => 'px',
451	'hasUnit' => true,
452	'property' => 'width',
453	'device' => $device,
454	]),
455	);
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	}
466
467	public function get_button_bg_css( $attributes, $device = '' ) {
468	return array_merge(
469	[ 'background' => Color::get_css( isset( $attributes['buttonBgColor'] ) ? $attributes['buttonBgColor'] : '' ) ],
470	);
471	}
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	}
477	public function get_Icon_css( $attributes, $device = '' ) {
478
479	return array_merge(
480	Range::get_css([
481	'attributeValue' => $attributes['iconWidth'],
482	'attribute_object_key' => 'value',
483	'isResponsive' => true,
484	'defaultValue' => 18,
485	'unitDefaultValue' => 'px',
486	'hasUnit' => true,
487	'property' => 'width',
488	'device' => $device,
489	]),
490	);
491	}
492
493
494
495	public function render_block_content( $attributes, $content, $block_instance ) {
496
497	// Sanitize and escape input attributes
498	$currentPostID = isset( $attributes['currentPostID'] ) ? (int) sanitize_text_field( $attributes['currentPostID'] ) : '';
499	$source = isset( $attributes['source'] ) ? sanitize_text_field( $attributes['source'] ) : '';
500	$placeholder = isset( $attributes['placeholder'] ) ? sanitize_text_field( $attributes['placeholder'] ) : esc_html__( 'Write anything...', 'ablocks' );
501	$variant = isset( $attributes['variant'] ) ? sanitize_key( $attributes['variant'] ) : 'classic';
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;
505	$buttonText = isset( $attributes['buttonText'] ) ? sanitize_text_field( $attributes['buttonText'] ) : esc_html__( 'Search', 'ablocks' );
506	$buttonAlignment = isset( $attributes['buttonAlignment']['value'] ) ? sanitize_key( $attributes['buttonAlignment']['value'] ) : 'left';
507
508	ob_start();
509	?>
510	<div class="ablocks-block--search-bar <?php echo esc_attr( $variant ); ?>">
511	<form method="post" class="ablocks-block--search-form <?php echo esc_attr( ( $isIcon === 'both' \|\| $isIcon === 'text' ) ? $isIcon : '' ); ?>">
512	<?php if ( 'left' === $buttonAlignment && 'classic' !== $variant ) : ?>
513	<button type="button" class="ablocks-block--search-button <?php echo esc_attr( ( $isIcon === 'both' \|\| $isIcon === 'text' ) ? $isIcon : '' ); ?> searchbar-submit-left">
514	<span class="button-content">
515	<?php
516	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
517	echo $this->render_button( $isIcon, $buttonText );
518	?>
519	</span>
520	<span class="loading-spinner">
521	<?php
522	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
523	echo $this->loading_spinner();
524	?>
525	</span>
526	</button>
527	<?php endif; ?>
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=""/>
529	<?php if ( 'right' === $buttonAlignment \|\| 'classic' === $variant ) : ?>
530	<button type="button" class="ablocks-block--search-button <?php echo esc_attr( ( $isIcon === 'both' \|\| $isIcon === 'text' ) ? $isIcon : '' ); ?> searchbar-submit-right">
531	<span class="button-content">
532	<?php
533	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
534	echo $this->render_button( $isIcon, $buttonText );
535	?>
536	</span>
537	<span class="loading-spinner">
538	<?php
539	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
540	echo $this->loading_spinner();
541	?>
542	</span>
543	</button>
544	<?php endif; ?>
545	<input type="hidden" class="ablocks-block--search-source" value="<?php echo esc_attr( $source ); ?>"/>
546	<input type="hidden" class="ablocks-block--search__current-post-id" value="<?php echo esc_attr( $currentPostID ); ?>"/>
547	</form>
548	<ul class="ablocks-block--search-result ablocks-block--search-empty-result">
549	<!-- Search results will go here -->
550	</ul>
551	</div>
552	<?php
553	return ob_get_clean();
554	}
555
556
557	private function render_button( $isIcon, $buttonText ) {
558	$search_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
559	<circle cx="11" cy="11" r="8"></circle>
560	<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
561	</svg>';
562
563	if ( 'icon' === $isIcon ) {
564	return $search_icon;
565	} elseif ( 'text' === $isIcon ) {
566	return '<span>' . esc_html( $buttonText ) . '</span>';
567	} else {
568	return $search_icon . '<span>' . esc_html( $buttonText ) . '</span>';
569	}
570	}
571
572	private function loading_spinner() {
573	$spinner = '<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
574	<circle class="ablocks-search-block__spin" cx="400" cy="400" fill="none"
575	r="200" stroke-width="50" stroke="currentColor"
576	stroke-dasharray="700 1400"
577	stroke-linecap="round" />
578	</svg>';
579	return $spinner;
580	}
581	}
582
583