Na}{

File Content: `edit.js`

/* eslint-disable no-unused-vars */
/**
 * External dependencies
 */
import PropTypes from 'prop-types';
import { ReactSVG } from 'react-svg'
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import {
	Placeholder,
	PanelBody,
} from '@wordpress/components';
import {
	useBlockProps,
	BlockControls,
	AlignmentToolbar,
	InspectorControls,
	__experimentalImageSizeControl as ImageSizeControl,
	MediaReplaceFlow,
	MediaPlaceholder,
	getColorClassName,
} from '@wordpress/block-editor';

/**
 * Edit component.
 * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
 *
 * @param {Object}   props                      The block props.
 * @param {Object}   props.attributes           Block attributes.
 * @param {Object}   props.attributes.svgURL    SVG URL.
 * @param {boolean}  props.attributes.alignment Alignment of the SVG.
 * @param {string}   props.className            Class name for the block.
 * @param {Function} props.setAttributes        Sets the value for block attributes.
 * @return {Function} Render the edit screen
 */
const SafeSvgBlockEdit = ({ attributes, setAttributes }) => {

	const {
		contentPostType,
		svgURL,
		type,
		imageID,
		imageSizes,
		alignment,
		imageWidth,
		imageHeight,
		dimensionWidth,
		dimensionHeight,
		textColor,
	} = attributes;

	const blockProps = useBlockProps(
		{
			className: 'wp-block-safe-svg-svg-icon safe-svg-cover',
			style: {
				textAlign: alignment,
			}
		}
	);

	const { className, style, ...containerBlockProps } = blockProps;

	// Remove text alignment so we can apply to the parent container.
	delete style.textAlign;
	containerBlockProps.style = { textAlign: alignment };

	// Remove core background & text color classes, so we can add our own.
	const newClassName = className.replace(/has-[\w-]*-color|has-background/g, '').trim();
	containerBlockProps.className = newClassName;

	// Add the width and height to enforce dimensions and to keep parity with the frontend.
	style.width = `${dimensionWidth}px`;
	style.height = `${dimensionHeight}px`;

	const ALLOWED_MEDIA_TYPES = ['image/svg+xml'];

	const onSelectImage = media => {
		if (!media.sizes && !media.media_details?.sizes) {
			return;
		}

		if (media.media_details) {
			media.sizes = media.media_details.sizes;
		}

		const newURL = media.sizes.full.url ?? media.sizes.full.source_url;

		setAttributes({
			imageSizes: {
				full: media.sizes.full,
				medium: media.sizes.medium,
				thumbnail: media.sizes.thumbnail,
			},
			imageWidth: media.sizes.full.width,
			imageHeight: media.sizes.full.height,
			dimensionWidth: media.sizes.full.width,
			dimensionHeight: media.sizes.full.height,
			imageID: media.id,
			svgURL: newURL,
			type: 'full',
		});
	};

	const onError = (message) => {
		console.log(__(`Something went wrong, please try again. Message: ${message}`, 'safe-svg'));
	}

	const onChange = (dimensionSizes) => {
		if (!dimensionSizes.width && !dimensionSizes.height) {
			dimensionSizes.width = parseInt(imageSizes[type].width);
			dimensionSizes.height = parseInt(imageSizes[type].height);
		}
		setAttributes({
			dimensionWidth: dimensionSizes.width ?? dimensionWidth,
			dimensionHeight: dimensionSizes.height ?? dimensionHeight,
		})
	}

	const onChangeImage = (newSizeSlug) => {
		const newUrl = imageSizes[newSizeSlug].url ?? imageSizes[newSizeSlug].source_url;
		if (!newUrl) {
			return null;
		}
		let newWidth = parseInt(imageSizes[newSizeSlug].width);
		let newHeight = parseInt(imageSizes[newSizeSlug].height);
		if ('full' !== newSizeSlug) {
			if (imageSizes[newSizeSlug].width >= imageSizes[newSizeSlug].height) {
				newHeight = imageSizes[newSizeSlug].height * imageSizes['full'].height / imageSizes['full'].width;
			} else {
				newWidth = imageSizes[newSizeSlug].width * imageSizes['full'].width / imageSizes['full'].height;
			}
		}
		setAttributes({
			svgURL: newUrl,
			imageWidth: newWidth,
			imageHeight: newHeight,
			dimensionWidth: newWidth,
			dimensionHeight: newHeight,
			type: newSizeSlug
		})
	}

	const imageSizeOptions = [
		{
			value: 'full', label: __('Full Size', 'safe-svg')
		},
		{
			value: 'medium', label: __('Medium', 'safe-svg')
		},
		{
			value: 'thumbnail', label: __('Thumbnail', 'safe-svg')
		},
	];

	return (
		<>
			{svgURL &&
				<>
					<InspectorControls>
						<PanelBody
							title={__(
								'Image settings',
								'safe-svg'
							)}
						>
							<ImageSizeControl
								width={dimensionWidth}
								height={dimensionHeight}
								imageWidth={imageWidth}
								imageHeight={imageHeight}
								imageSizeOptions={imageSizeOptions}
								slug={type}
								onChange={onChange}
								onChangeImage={onChangeImage} />
						</PanelBody>
					</InspectorControls>
					<BlockControls>
						<AlignmentToolbar
							value={alignment}
							onChange={(newVal) => setAttributes({ alignment: newVal })} />
					</BlockControls>
					<BlockControls>
						<MediaReplaceFlow
							mediaId={imageID}
							mediaURL={svgURL}
							allowedTypes={ALLOWED_MEDIA_TYPES}
							accept={ALLOWED_MEDIA_TYPES}
							onSelect={onSelectImage}
							onError={onError} />
					</BlockControls>
				</>
			}

			{!svgURL &&
				<MediaPlaceholder
					onSelect={onSelectImage}
					allowedTypes={ALLOWED_MEDIA_TYPES}
					accept={ALLOWED_MEDIA_TYPES}
					value={imageID}
					labels={{
						title: __('Inline SVG', 'safe-svg'),
						instructions: __('Upload an SVG or pick one from your media library.', 'safe-svg')
					}}
				/>
			}

			{svgURL &&
				<div {...containerBlockProps}>
					<div
						style={style}
						className={classnames(
							'safe-svg-inside',
							getColorClassName('color', textColor) || ''
						)}
					>
						<ReactSVG src={svgURL} beforeInjection={(svg) => {
							svg.setAttribute('style', `width: ${dimensionWidth}px; height: ${dimensionHeight}px;`);
						}} />
					</div>
				</div>
			}

			{contentPostType && (
				<Placeholder
					label={__('SafeSvg', 'safe-svg')}
				>
					<p>
						{__(
							'Please select the SVG icon.',
							'safe-svg'
						)}
					</p>
				</Placeholder>
			)}
		</>
	);
};
// Set the propTypes
SafeSvgBlockEdit.propTypes = {
	attributes: PropTypes.shape({
		svgURL: PropTypes.string,
		alignment: PropTypes.string,
		imageID: PropTypes.number,
		imageWidth: PropTypes.number,
		imageHeight: PropTypes.number,
		dimensionWidth: PropTypes.number,
		dimensionHeight: PropTypes.number,
		imageSizes: PropTypes.object,
	}).isRequired,
	className: PropTypes.string,
	clientId: PropTypes.string,
	setAttributes: PropTypes.func.isRequired,
};

export default SafeSvgBlockEdit;
Name	Size	Permission
block.json	1051 bytes	0644
edit.js	6689 bytes	0644
frontend.js	99 bytes	0644
frontend.scss	269 bytes	0644
index.js	2393 bytes	0644
register.php	4473 bytes	0644
save.js	126 bytes	0644
File Content: edit.js

File Content: `edit.js`
