← All changes | includes/blocks/search/block.php +582 -0 2.7.5 → 2.14.0 View file →

		@@ -1,0 +1,582 @@
	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	+