import { RichText } from "@wordpress/block-editor";
import {
    sanitizeURL,
    BlockProps
} from "@essential-blocks/controls";

const save = ({ attributes }) => {
    const {
        blockId,
        image,
        imageCaption,
        horizontalAlign,
        verticalAlign,
        verticalAlignCap2,
        stylePreset,
        captionStyle,
        hoverEffect,
        openInNewTab,
        imageLink,
        enableLink,
        classHook,
        imgSource
    } = attributes;

    if (imgSource !== 'custom') {
        return null;
    }

    let imageURL = image.url;

    const linkTarget = openInNewTab ? "_blank" : undefined;

    if (imageURL === "") return null;

    return (
        <BlockProps.Save attributes={attributes}>
            <div className={`eb-parent-wrapper eb-parent-${blockId} ${classHook}`}>
                <figure
                    className={`eb-advanced-image-wrapper ${blockId} img-style-${stylePreset} ${captionStyle} caption-horizontal-${horizontalAlign} caption-vertical-${verticalAlign} ${verticalAlignCap2} ${hoverEffect}`}
                    data-id={blockId}
                >
                    <div className="image-wrapper">
                        {enableLink && (
                            <a
                                className={"eb-advimg-link"}
                                href={sanitizeURL(imageLink)}
                                target={linkTarget}
                                rel={linkTarget === "_blank" ? "noopener" : undefined}
                            >
                            </a>
                        )}
                        <img src={imageURL} alt={image.alt} />
                        {!RichText.isEmpty(imageCaption) &&
                            captionStyle != "caption-style-2" && (
                                <RichText.Content tagName="figcaption" value={imageCaption} />
                            )}
                    </div>

                    {!RichText.isEmpty(imageCaption) &&
                        captionStyle == "caption-style-2" && (
                            <RichText.Content tagName="figcaption" value={imageCaption} />
                        )}
                </figure>
            </div>
        </BlockProps.Save>
    );
};

export default save;
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	
	>
<channel>
	<title>
	Comments on: Hello world!	</title>
	<atom:link href="http://www.foxmultimedia.co.uk/fizzydev/?feed=rss2&#038;p=1" rel="self" type="application/rss+xml" />
	<link>http://www.foxmultimedia.co.uk/fizzydev/?p=1</link>
	<description>Energetic, Fun, Live Music</description>
	<lastBuildDate>Wed, 06 Jan 2021 15:20:17 +0000</lastBuildDate>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.6.15</generator>
	<item>
		<title>
		By: A WordPress Commenter		</title>
		<link>http://www.foxmultimedia.co.uk/fizzydev/?p=1#comment-1</link>

		<dc:creator><![CDATA[A WordPress Commenter]]></dc:creator>
		<pubDate>Wed, 06 Jan 2021 15:20:17 +0000</pubDate>
		<guid isPermaLink="false">http://www.foxmultimedia.co.uk/fizzydev/?p=1#comment-1</guid>

					<description><![CDATA[Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from &lt;a href=&quot;https://gravatar.com&quot;&gt;Gravatar&lt;/a&gt;.]]></description>
			<content:encoded><![CDATA[<p>Hi, this is a comment.<br />
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.<br />
Commenter avatars come from <a href="https://gravatar.com">Gravatar</a>.</p>
]]></content:encoded>
		
			</item>
	</channel>
</rss>