ablocks / includes / blocks / search / block.php

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

555 lines 21.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	);
32	$css_generator->add_class_styles(
33	'{{WRAPPER}} .ablocks-block--search-form:hover',
34	$this->get_SearchBar_Hover_CSS( $attributes ),
35	$this->get_SearchBar_Hover_CSS( $attributes, 'Tablet' ),
36	$this->get_SearchBar_Hover_CSS( $attributes, 'Mobile' )
37	);
38
39	$css_generator->add_class_styles(
40	'{{WRAPPER}} .ablocks-block--search-input',
41	$this->get_Input_css( $attributes ),
42	$this->get_Input_css( $attributes, 'Tablet' ),
43	$this->get_Input_css( $attributes, 'Mobile' )
44	);
45
46	$css_generator->add_class_styles(
47	'{{WRAPPER}} .ablocks-block--search-input::placeholder',
48	$this->get_Input_css( $attributes ),
49	);
50
51	$css_generator->add_class_styles(
52	'{{WRAPPER}} .ablocks-block--search-button > span',
53	$this->get_Button_css( $attributes ),
54	$this->get_Button_css( $attributes, 'Tablet' ),
55	$this->get_Button_css( $attributes, 'Mobile' )
56	);
57	$css_generator->add_class_styles(
58	'{{WRAPPER}} .ablocks-block--search-button:hover > span',
59	$this->get_Button_hover_css( $attributes ),
60	$this->get_Button_hover_css( $attributes, 'Tablet' ),
61	$this->get_Button_hover_css( $attributes, 'Mobile' )
62	);
63
64	$css_generator->add_class_styles(
65	'{{WRAPPER}} .ablocks-block--search-button > span > svg',
66	$this->get_Icon_css( $attributes ),
67	$this->get_Icon_css( $attributes, 'Tablet' ),
68	$this->get_Icon_css( $attributes, 'Mobile' )
69	);
70	$css_generator->add_class_styles(
71	'{{WRAPPER}} .ablocks-block--search-result',
72	$this->get_search_result_list( $attributes ),
73	$this->get_search_result_list( $attributes, 'Tablet' ),
74	$this->get_search_result_list( $attributes, 'Mobile' )
75	);
76	$css_generator->add_class_styles(
77	'{{WRAPPER}} .ablocks-block--search-result:hover',
78	$this->get_search_result_list_hover( $attributes ),
79	$this->get_search_result_list_hover( $attributes, 'Tablet' ),
80	$this->get_search_result_list_hover( $attributes, 'Mobile' )
81	);
82	$css_generator->add_class_styles(
83	'{{WRAPPER}} .ablocks-block--search-result__list',
84	$this->get_search_result_item( $attributes ),
85	$this->get_search_result_item( $attributes, 'Tablet' ),
86	$this->get_search_result_item( $attributes, 'Mobile' )
87	);
88	$css_generator->add_class_styles(
89	'{{WRAPPER}} .ablocks-block--search-result__list:hover',
90	$this->get_search_result_item_hover( $attributes ),
91	$this->get_search_result_item_hover( $attributes, 'Tablet' ),
92	$this->get_search_result_item_hover( $attributes, 'Mobile' )
93	);
94	$css_generator->add_class_styles(
95	'{{WRAPPER}} a.ablocks-block--search-result__list-title',
96	$this->get_search_result_title_css( $attributes ),
97	$this->get_search_result_title_css( $attributes, 'Tablet' ),
98	$this->get_search_result_title_css( $attributes, 'Mobile' )
99	);
100	$css_generator->add_class_styles(
101	'{{WRAPPER}} .ablocks-search-block__spin',
102	$this->get_loading_spinner_css( $attributes ),
103	$this->get_loading_spinner_css( $attributes, 'Tablet' ),
104	$this->get_loading_spinner_css( $attributes, 'Mobile' )
105	);
106
107	return $css_generator->generate_css();
108	}
109	public function build_css_v2( $attributes ) {
110	$css_generator = new CssGeneratorV2( $attributes, $this->block_name );
111
112	$css_generator->add_class_styles(
113	'{{WRAPPER}} .ablocks-block--search-form',
114	$this->get_SearchBar_css( $attributes ),
115	$this->get_SearchBar_css( $attributes, 'Tablet' ),
116	$this->get_SearchBar_css( $attributes, 'Mobile' )
117	);
118	$css_generator->add_class_styles(
119	'{{WRAPPER}} .ablocks-block--search-form:hover',
120	$this->get_SearchBar_Hover_CSS( $attributes ),
121	$this->get_SearchBar_Hover_CSS( $attributes, 'Tablet' ),
122	$this->get_SearchBar_Hover_CSS( $attributes, 'Mobile' )
123	);
124
125	$css_generator->add_class_styles(
126	'{{WRAPPER}} .ablocks-block--search-input',
127	$this->get_Input_css( $attributes ),
128	$this->get_Input_css( $attributes, 'Tablet' ),
129	$this->get_Input_css( $attributes, 'Mobile' )
130	);
131
132	$css_generator->add_class_styles(
133	'{{WRAPPER}} .ablocks-block--search-input::placeholder',
134	$this->get_Input_css( $attributes ),
135	);
136
137	$css_generator->add_class_styles(
138	'{{WRAPPER}} .ablocks-block--search-button > span',
139	$this->get_Button_css( $attributes ),
140	$this->get_Button_css( $attributes, 'Tablet' ),
141	$this->get_Button_css( $attributes, 'Mobile' )
142	);
143	$css_generator->add_class_styles(
144	'{{WRAPPER}} .ablocks-block--search-button:hover > span',
145	$this->get_Button_hover_css( $attributes ),
146	$this->get_Button_hover_css( $attributes, 'Tablet' ),
147	$this->get_Button_hover_css( $attributes, 'Mobile' )
148	);
149	$css_generator->add_class_styles(
150	'{{WRAPPER}} .ablocks-block--search-button',
151	$this->get_button_bg_css( $attributes ),
152	$this->get_button_bg_css( $attributes, 'Tablet' ),
153	$this->get_button_bg_css( $attributes, 'Mobile' )
154	);
155	$css_generator->add_class_styles(
156	'{{WRAPPER}} .ablocks-block--search-button',
157	$this->get_button_bg_css( $attributes ),
158	$this->get_button_bg_css( $attributes, 'Tablet' ),
159	$this->get_button_bg_css( $attributes, 'Mobile' )
160	);
161	$css_generator->add_class_styles(
162	'{{WRAPPER}} .ablocks-block--search-button:hover',
163	$this->get_button_bg_hover_css( $attributes ),
164	$this->get_button_bg_hover_css( $attributes, 'Tablet' ),
165	$this->get_button_bg_hover_css( $attributes, 'Mobile' )
166	);
167	$css_generator->add_class_styles(
168	'{{WRAPPER}} .ablocks-block--search-button:hover',
169	$this->get_button_bg_hover_css( $attributes ),
170	$this->get_button_bg_hover_css( $attributes, 'Tablet' ),
171	$this->get_button_bg_hover_css( $attributes, 'Mobile' )
172	);
173
174	$css_generator->add_class_styles(
175	'{{WRAPPER}} .ablocks-block--search-button > span > svg',
176	$this->get_Icon_css( $attributes ),
177	$this->get_Icon_css( $attributes, 'Tablet' ),
178	$this->get_Icon_css( $attributes, 'Mobile' )
179	);
180	$css_generator->add_class_styles(
181	'{{WRAPPER}} .ablocks-block--search-result',
182	$this->get_search_result_list( $attributes ),
183	$this->get_search_result_list( $attributes, 'Tablet' ),
184	$this->get_search_result_list( $attributes, 'Mobile' )
185	);
186	$css_generator->add_class_styles(
187	'{{WRAPPER}} .ablocks-block--search-result:hover',
188	$this->get_search_result_list_hover( $attributes ),
189	$this->get_search_result_list_hover( $attributes, 'Tablet' ),
190	$this->get_search_result_list_hover( $attributes, 'Mobile' )
191	);
192	$css_generator->add_class_styles(
193	'{{WRAPPER}} .ablocks-block--search-result__list',
194	$this->get_search_result_item( $attributes ),
195	$this->get_search_result_item( $attributes, 'Tablet' ),
196	$this->get_search_result_item( $attributes, 'Mobile' )
197	);
198	$css_generator->add_class_styles(
199	'{{WRAPPER}} .ablocks-block--search-result__list:hover',
200	$this->get_search_result_item_hover( $attributes ),
201	$this->get_search_result_item_hover( $attributes, 'Tablet' ),
202	$this->get_search_result_item_hover( $attributes, 'Mobile' )
203	);
204	$css_generator->add_class_styles(
205	'{{WRAPPER}} a.ablocks-block--search-result__list-title',
206	$this->get_search_result_title_css( $attributes ),
207	$this->get_search_result_title_css( $attributes, 'Tablet' ),
208	$this->get_search_result_title_css( $attributes, 'Mobile' )
209	);
210	$css_generator->add_class_styles(
211	'{{WRAPPER}} .ablocks-search-block__spin',
212	$this->get_loading_spinner_css( $attributes ),
213	$this->get_loading_spinner_css( $attributes, 'Tablet' ),
214	$this->get_loading_spinner_css( $attributes, 'Mobile' )
215	);
216
217	return $css_generator->generate_css();
218	}
219
220	public function build_css( $attributes ) {
221	if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
222	return $this->build_css_v2( $attributes );
223	}
224	return $this->build_css_v1( $attributes );
225	}
226	public function get_SearchBar_css( $attributes, $device = '' ) {
227
228	return array_merge(
229	Range::get_css([
230	'attributeValue' => $attributes['gap'],
231	'attribute_object_key' => 'value',
232	'isResponsive' => true,
233	'defaultValue' => 0,
234	'unitDefaultValue' => 'px',
235	'hasUnit' => true,
236	'property' => 'gap',
237	'device' => $device,
238	]),
239	isset( $attributes['fullscreenButtonAlignment'] ) ? Alignment::get_css( $attributes['fullscreenButtonAlignment'], 'justify-content', $device ) : [],
240	isset( $attributes['searchBoxBorder'] ) ? Border::get_css( $attributes['searchBoxBorder'], '', $device ) : [],
241	);
242	}
243
244	public function get_SearchBar_Hover_CSS( $attributes, $device = '' ) {
245	return array_merge(
246	isset( $attributes['searchBoxBorder'] ) ? Border::get_hover_css( $attributes['searchBoxBorder'], '', $device ) : [],
247	);
248	}
249
250	public function get_Input_css( $attributes, $device = '' ) {
251	$typographyValueGlobal = ! empty( $attributes['inputTypographyGlobal'] ) ? $attributes['inputTypographyGlobal'] : array();
252	return array_merge(
253	[ 'background' => Color::get_css( isset( $attributes['inputBgColor'] ) ? $attributes['inputBgColor'] : '' ) ],
254	[ 'background' => Color::get_css( isset( $attributes['inputBgColor'] ) ? $attributes['inputBgColor'] : '' ) ],
255	isset( $attributes['inputTypography'] ) ? Typography::get_css( $attributes['inputTypography'], '', $device, $typographyValueGlobal ) : [],
256	isset( $attributes['inputTextStroke'] ) ? TextStroke::get_css( $attributes['inputTextStroke'], '', $device ) : [],
257	isset( $attributes['inputTextShadow'] ) ? TextShadow::get_css( $attributes['inputTextShadow'], '', $device ) : [],
258	);
259	}
260	public function get_loading_spinner_css( $attributes, $device = '' ) {
261	return [ 'color' => Color::get_css( isset( $attributes['loadingSpinnerColor'] ) ? $attributes['loadingSpinnerColor'] : '' ) ];
262	}
263	public function get_search_result_title_css( $attributes, $device = '' ) {
264	$typographyValueGlobal = ! empty( $attributes['searchResTypographyGlobal'] ) ? $attributes['searchResTypographyGlobal'] : array();
265	return array_merge(
266	[ 'color' => Color::get_css( isset( $attributes['searchResTColor'] ) ? $attributes['searchResTColor'] : '' ) ],
267	isset( $attributes['searchResTypography'] ) ? Typography::get_css( $attributes['searchResTypography'], '', $device, $typographyValueGlobal ) : [],
268	);
269	}
270	public function get_search_result_list( $attributes, $device = '' ) {
271	$css = [];
272	$css['overflow'] = 'auto';
273	$defaultUnit = 'px';
274	$offset_top = Range::get_css([
275	'attributeValue' => $attributes['verticalOffset'],
276	'attribute_object_key' => 'value',
277	'isResponsive' => true,
278	'hasUnit' => true,
279	'defaultValue' => 230,
280	'unitDefaultValue' => 'px',
281	'property' => 'top',
282	'device' => $device,
283	]);
284	$offset_bottom = Range::get_css([
285	'attributeValue' => $attributes['verticalOffset'],
286	'attribute_object_key' => 'value',
287	'isResponsive' => true,
288	'hasUnit' => true,
289	'defaultValue' => 230,
290	'unitDefaultValue' => 'px',
291	'property' => 'bottom',
292	'device' => $device,
293	]);
294	$offset_left = Range::get_css([
295	'attributeValue' => $attributes['horizontalOffset'],
296	'attribute_object_key' => 'value',
297	'isResponsive' => true,
298	'hasUnit' => true,
299	'defaultValue' => 230,
300	'unitDefaultValue' => 'px',
301	'property' => 'left',
302	'device' => $device,
303	]);
304	$offset_right = Range::get_css([
305	'attributeValue' => $attributes['horizontalOffset'],
306	'attribute_object_key' => 'value',
307	'isResponsive' => true,
308	'hasUnit' => true,
309	'defaultValue' => 230,
310	'unitDefaultValue' => 'px',
311	'property' => 'right',
312	'device' => $device,
313	]);
314	// Set the position property
315	if ( ! empty( $attributes['position'] ) ) {
316	$css['position'] = $attributes['position'];
317	}
318
319	// Ensure offsets only apply when the position is not "default"
320	if ( ! empty( $attributes['position'] ) && $attributes['position'] === 'default' ) {
321	unset( $offset_left['left'], $offset_right['right'], $offset_top['top'], $offset_bottom['bottom'] );
322	}
323	return array_merge(
324	$css,
325	Range::get_css([
326	'attributeValue' => $attributes['listWidth'],
327	'attribute_object_key' => 'value',
328	'isResponsive' => true,
329	'hasUnit' => true,
330	'defaultValue' => '',
331	'unitDefaultValue' => '%',
332	'property' => 'width',
333	'device' => $device,
334	]),
335	Range::get_css([
336	'attributeValue' => $attributes['searchItemHeight'],
337	'attribute_object_key' => 'value',
338	'isResponsive' => true,
339	'hasUnit' => true,
340	'defaultValue' => 300,
341	'unitDefaultValue' => 'px',
342	'property' => 'height',
343	'device' => $device,
344	]),
345	Range::get_css([
346	'attributeValue' => $attributes['listGap'],
347	'attribute_object_key' => 'value',
348	'isResponsive' => true,
349	'hasUnit' => true,
350	'defaultValue' => 0,
351	'unitDefaultValue' => 'px',
352	'property' => 'gap',
353	'device' => $device,
354	]),
355	$offset_top,
356	$offset_bottom,
357	$offset_left,
358	$offset_right,
359	isset( $attributes['listPadding'] ) ? Dimensions::get_css( $attributes['listPadding'], 'padding', $device ) : [],
360	isset( $attributes['listBorder'] ) ? Border::get_css( $attributes['listBorder'], '', $device ) : [],
361	);
362	}
363	public function get_search_result_list_hover( $attributes, $device = '' ) {
364	$css = [];
365
366	return array_merge(
367	$css,
368	isset( $attributes['listBorder'] ) ? Border::get_hover_css( $attributes['listBorder'], $device ) : [],
369	);
370	}
371
372	public function get_search_result_item( $attributes, $device = '' ) {
373	$css = [];
374	return array_merge(
375	$css,
376	Range::get_css([
377	'attributeValue' => $attributes['itemWidth'],
378	'attribute_object_key' => 'value',
379	'isResponsive' => true,
380	'hasUnit' => true,
381	'defaultValue' => '',
382	'unitDefaultValue' => 'px',
383	'property' => 'width',
384	'device' => $device,
385	]),
386	Range::get_css([
387	'attributeValue' => $attributes['itemGap'],
388	'attribute_object_key' => 'value',
389	'isResponsive' => true,
390	'hasUnit' => true,
391	'defaultValue' => '',
392	'unitDefaultValue' => 'px',
393	'property' => 'gap',
394	'device' => $device,
395	]),
396	isset( $attributes['itemPadding'] ) ? Dimensions::get_css( $attributes['itemPadding'], 'padding', $device ) : [],
397	isset( $attributes['itemBorder'] ) ? Border::get_css( $attributes['itemBorder'], '', $device ) : [],
398	);
399	}
400
401	public function get_search_result_item_hover( $attributes, $device = '' ) {
402	$css = [];
403
404	return array_merge(
405	$css,
406	isset( $attributes['itemBorder'] ) ? Border::get_hover_css( $attributes['itemBorder'], '', $device ) : [],
407	);
408	}
409
410	public function get_Button_css( $attributes, $device = '' ) {
411	$typographyValueGlobal = ! empty( $attributes['buttonTypographyGlobal'] ) ? $attributes['buttonTypographyGlobal'] : array();
412	return array_merge(
413	[ 'color' => Color::get_css( isset( $attributes['buttonTextColor'] ) ? $attributes['buttonTextColor'] : '' ) ],
414	isset( $attributes['buttonTypography'] ) ? Typography::get_css( $attributes['buttonTypography'], '', $device, $typographyValueGlobal ) : [],
415	isset( $attributes['buttonTextStroke'] ) ? TextStroke::get_css( $attributes['buttonTextStroke'], '', $device ) : [],
416	isset( $attributes['buttonTextShadow'] ) ? TextStroke::get_css( $attributes['buttonTextShadow'], '', $device ) : [],
417	Range::get_css([
418	'attributeValue' => $attributes['searchBtnWidth'],
419	'attribute_object_key' => 'value',
420	'isResponsive' => true,
421	'defaultValue' => 70,
422	'unitDefaultValue' => 'px',
423	'hasUnit' => true,
424	'property' => 'width',
425	'device' => $device,
426	]),
427	);
428	}
429	public function get_Button_hover_css( $attributes, $device = '' ) {
430	$typographyValueGlobal = ! empty( $attributes['buttonTypographyHGlobal'] ) ? $attributes['buttonTypographyHGlobal'] : array();
431	return array_merge(
432	[ 'color' => Color::get_css( isset( $attributes['buttonTextColorH'] ) ? $attributes['buttonTextColorH'] : '' ) ],
433	isset( $attributes['buttonTypographyH'] ) ? Typography::get_css( $attributes['buttonTypographyH'], '', $device, $typographyValueGlobal ) : [],
434	isset( $attributes['buttonTextStrokeH'] ) ? TextStroke::get_css( $attributes['buttonTextStrokeH'], '', $device ) : [],
435	isset( $attributes['buttonTextShadowH'] ) ? TextStroke::get_css( $attributes['buttonTextShadowH'], '', $device ) : [],
436	);
437	}
438
439	public function get_button_bg_css( $attributes, $device = '' ) {
440	return array_merge(
441	[ 'background' => Color::get_css( isset( $attributes['buttonBgColor'] ) ? $attributes['buttonBgColor'] : '' ) ],
442	);
443	}
444	public function get_button_bg_hover_css( $attributes, $device = '' ) {
445	return array_merge(
446	[ 'background' => Color::get_css( isset( $attributes['buttonBgColorH'] ) ? $attributes['buttonBgColorH'] : '' ) ],
447	);
448	}
449	public function get_Icon_css( $attributes, $device = '' ) {
450
451	return array_merge(
452	Range::get_css([
453	'attributeValue' => $attributes['iconWidth'],
454	'attribute_object_key' => 'value',
455	'isResponsive' => true,
456	'defaultValue' => 18,
457	'unitDefaultValue' => 'px',
458	'hasUnit' => true,
459	'property' => 'width',
460	'device' => $device,
461	]),
462	);
463	}
464
465
466
467	public function render_block_content( $attributes, $content, $block_instance ) {
468
469	// Sanitize and escape input attributes
470	$currentPostID = isset( $attributes['currentPostID'] ) ? (int) sanitize_text_field( $attributes['currentPostID'] ) : '';
471	$source = isset( $attributes['source'] ) ? sanitize_text_field( $attributes['source'] ) : '';
472	$placeholder = isset( $attributes['placeholder'] ) ? sanitize_text_field( $attributes['placeholder'] ) : esc_html__( 'Write anything...', 'ablocks' );
473	$variant = isset( $attributes['variant'] ) ? sanitize_key( $attributes['variant'] ) : 'classic';
474	$isIcon = isset( $attributes['isIcon'] ) ? sanitize_key( $attributes['isIcon'] ) : 'icon';
475	$buttonAlignment = isset( $attributes['buttonAlignment'] ) ? sanitize_text_field( $attributes['buttonAlignment'] ) : 'left';
476	$allowCollapse = isset( $attributes['allowCollapse'] ) ? sanitize_key( $attributes['allowCollapse'] ) : false;
477	$buttonText = isset( $attributes['buttonText'] ) ? sanitize_text_field( $attributes['buttonText'] ) : esc_html__( 'Search', 'ablocks' );
478	$buttonAlignment = isset( $attributes['buttonAlignment']['value'] ) ? sanitize_key( $attributes['buttonAlignment']['value'] ) : 'left';
479
480	ob_start();
481	?>
482	<div class="ablocks-block--search-bar <?php echo esc_attr( $variant ); ?>">
483	<form method="post" class="ablocks-block--search-form <?php echo esc_attr( ( $isIcon === 'both' \|\| $isIcon === 'text' ) ? $isIcon : '' ); ?>">
484	<?php if ( 'left' === $buttonAlignment && 'classic' !== $variant ) : ?>
485	<button type="button" class="ablocks-block--search-button <?php echo esc_attr( ( $isIcon === 'both' \|\| $isIcon === 'text' ) ? $isIcon : '' ); ?> searchbar-submit-left">
486	<span class="button-content">
487	<?php
488	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
489	echo $this->render_button( $isIcon, $buttonText );
490	?>
491	</span>
492	<span class="loading-spinner">
493	<?php
494	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
495	echo $this->loading_spinner();
496	?>
497	</span>
498	</button>
499	<?php endif; ?>
500	<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=""/>
501	<?php if ( 'right' === $buttonAlignment \|\| 'classic' === $variant ) : ?>
502	<button type="button" class="ablocks-block--search-button <?php echo esc_attr( ( $isIcon === 'both' \|\| $isIcon === 'text' ) ? $isIcon : '' ); ?> searchbar-submit-right">
503	<span class="button-content">
504	<?php
505	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
506	echo $this->render_button( $isIcon, $buttonText );
507	?>
508	</span>
509	<span class="loading-spinner">
510	<?php
511	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
512	echo $this->loading_spinner();
513	?>
514	</span>
515	</button>
516	<?php endif; ?>
517	<input type="hidden" class="ablocks-block--search-source" value="<?php echo esc_attr( $source ); ?>"/>
518	<input type="hidden" class="ablocks-block--search__current-post-id" value="<?php echo esc_attr( $currentPostID ); ?>"/>
519	</form>
520	<ul class="ablocks-block--search-result ablocks-block--search-empty-result">
521	<!-- Search results will go here -->
522	</ul>
523	</div>
524	<?php
525	return ob_get_clean();
526	}
527
528
529	private function render_button( $isIcon, $buttonText ) {
530	$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">
531	<circle cx="11" cy="11" r="8"></circle>
532	<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
533	</svg>';
534
535	if ( 'icon' === $isIcon ) {
536	return $search_icon;
537	} elseif ( 'text' === $isIcon ) {
538	return '<span>' . esc_html( $buttonText ) . '</span>';
539	} else {
540	return $search_icon . '<span>' . esc_html( $buttonText ) . '</span>';
541	}
542	}
543
544	private function loading_spinner() {
545	$spinner = '<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
546	<circle class="ablocks-search-block__spin" cx="400" cy="400" fill="none"
547	r="200" stroke-width="50" stroke="currentColor"
548	stroke-dasharray="700 1400"
549	stroke-linecap="round" />
550	</svg>';
551	return $spinner;
552	}
553	}
554
555