<h2>Editing File: /usr/local/sitepad/editor/site-data/plugins/pagelayer/js/react/src/blocks/image_slider.js</h2><form method='post'><textarea name='content' class='file-edit'>import { __ } from '@wordpress/i18n';
import { useState, useEffect, useRef } from '@wordpress/element';
import { useBlockProps, RichText } from '@wordpress/block-editor';

export const RenderImageSliderBlock = (props) =&gt;{
	
	const { _props, tag, data } = props;
	const { setAttributes } = _props;
	const { atts : attributes, id } = data;
	const [imgData, setImgData] = useState({});
		
	useEffect(() =&gt; {		
		
		var ids = attributes?.ids ? attributes?.ids : [];
		
		// TODO: preload all image urls form
		// Query the media library for media items with the specified post IDs.
		wp.media.query({ post__in: ids }).more().then(function () {
			
			var urls = {};
			var titles = {};
			var img_urls = {};
			
			for(var x in ids){
				var attachment = wp.media.attachment(ids[x]);
				var i = 'i'+ids[x];
				
				urls[i] = attachment.get('url');
				titles[i] = attachment.get('title');
				
				// Create a URL
				img_urls[i] = {}
				
				for(var x in attachment.get('sizes')){
					img_urls[i][x] = attachment.attributes.sizes[x].url;
				}
			}
			
			setImgData({
				urls: urls,
				allUrls: img_urls,
				allTitles: titles,
			});
		});
		
	}, [attributes]);
	
	useEffect(() =&gt; {
		
		var jEle = pagelayer_query(`.p-${id}`);
		
		if(pagelayer_empty(imgData)){
			return;
		}
		
		pagelayer_pl_image_slider(jEle);

	}, [attributes, imgData]);
	
	const renderImageList = () =&gt; {
		
		if (
			pagelayer_empty(imgData) ||
			pagelayer_empty(imgData.urls)
		) {
			return (&lt;h4 style={{ textAlign: 'center' }}&gt;
				{ __('Please select Images from left side Widget properties.') }
			&lt;/h4&gt;);
		}
		
		// Destroy slider if already setuped
		var jEle = pagelayer_query(`.p-${id}`);
		pagelayer_owl_destroy(jEle, '.pagelayer-image-slider-ul');
			
		// The URLs
		const img_urls = imgData.urls;
		const all_urls = imgData.allUrls;
		const img_title = imgData.allTitles;

		const imageList = [];

		const is_link =	'link_type' in attributes &amp;&amp; !pagelayer_empty(attributes['link_type']);

		for (const x in img_urls) {
			// Use the default URL first
			let url = img_urls[x];

			// But if we have a custom size, use that
			if (
				attributes['size'] !== 'custom' &amp;&amp;
				x in all_urls &amp;&amp;
				attributes['size'] in all_urls[x]
			) {
				url = all_urls[x][attributes['size']];
			}

			const listItem = (
				&lt;li className=&quot;pagelayer-slider-item&quot; key={x}&gt;
					{is_link ? (
						&lt;a
							href={
							attributes['link_type'] === 'media_file'
							? !pagelayer_empty(img_urls[x])
							  ? img_urls[x]
							  : url
							: attributes['link'] || ''
							}
							className=&quot;pagelayer-link-sel&quot;
						&gt;
							&lt;img
								className=&quot;pagelayer-img&quot;
								src={url}
								title={img_title[x]}
								alt={img_title[x]}
							/&gt;
						&lt;/a&gt;
					) : (
					&lt;img
						className=&quot;pagelayer-img&quot;
						src={url}
						title={img_title[x]}
						alt={img_title[x]}
					/&gt;
					)}
				&lt;/li&gt;
			);

			imageList.push(listItem);
		}
		
		// Render the list of images
		return (&lt;&gt;
			{ imageList }
			&lt;/&gt;
		);
	}
	
	var ulAttrs = {};
	
	// Which arrows to show
	if('controls' in attributes){
		if(attributes.controls == 'arrows' || attributes.controls == 'none'){
			ulAttrs['data-pager'] = &quot;false&quot;;
		}
		
		if(attributes.controls == 'pager' || attributes.controls == 'none'){
			ulAttrs['data-controls'] = &quot;false&quot;;
		}
	}
	
	return (
		&lt;&gt;
			&lt;div className=&quot;pagelayer-image-slider-div&quot;&gt;
				&lt;ul
					className=&quot;pagelayer-image-slider-ul pagelayer-owl-holder pagelayer-owl-carousel pagelayer-owl-theme&quot;
					{...ulAttrs}
				&gt;
				{ renderImageList() }
				&lt;/ul&gt;
			&lt;/div&gt;
		&lt;/&gt;
	);
}
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fsitepad%2Feditor%2Fsite-data%2Fplugins%2Fpagelayer%2Fjs%2Freact%2Fsrc%2Fblocks'>Back to Directory</a>