Merge pull request #103 from heikkivihersalo/feature/no-ref/image-gal…

…lery-block-to-typescript

Image gallery to typescript

.eslintrc.json

@@ -42,7 +42,8 @@
 		{
 			"files": ["*.ts", "*.tsx"],
 			"rules": {
-				"jsdoc/no-undefined-types": 0
+				"jsdoc/no-undefined-types": 0,
+				"camelcase": "warn"
 			}
 		}
 	]

package.json

@@ -32,6 +32,8 @@
 		"classnames": "^2.5.1"
 	},
 	"devDependencies": {
+		"@eslint/js": "^9.11.0",
+		"@types/eslint__js": "^8.42.3",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
 		"@types/wordpress__block-editor": "^11.5.15",
@@ -53,7 +55,8 @@
 		"prettier": "3.2.5",
 		"stylelint-config-prettier": "^9.0.5",
 		"ts-loader": "^9.5.1",
-		"typescript": "^5.5.3",
+		"typescript": "^5.6.2",
+		"typescript-eslint": "^8.6.0",
 		"typescript-coverage-report": "^1.0.0"
 	},
 	"resolutions": {

src/block-library/custom/image-gallery/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://json.schemastore.org/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "ksd/image-gallery",
 	"title": "Image Gallery",
 	"category": "media",
@@ -15,13 +15,17 @@
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",
 	"attributes": {
+		"blockClass": {
+			"type": "string",
+			"default": ""
+		},
 		"images": {
 			"type": "array",
 			"source": "query",
 			"selector": "img",
 			"default": [],
 			"query": {
-				"mediaID": {
+				"mediaId": {
 					"type": "number",
 					"source": "attribute",
 					"attribute": "data-id"

src/block-library/custom/image-gallery/components/Image.tsx

@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import type { BlockJSON_ImageAttributes } from '@components/media';
+
+type Props = {
+	image: BlockJSON_ImageAttributes;
+};
+
+/**
+ * Individual Image Component
+ * @param {Object} props - Image props
+ * @param {Object} props.image - Image object
+ * @return {JSX.Element} Image component
+ */
+function Image({ image }: Props): JSX.Element {
+	return (
+		<img
+			data-id={image.mediaId}
+			loading={`${image.lazyLoad ? 'lazy' : 'eager'}`}
+			className="image-gallery__image"
+			src={image.mediaUrl}
+			alt={image.mediaAlt}
+			width={image.mediaWidth}
+			height={image.mediaHeight}
+		/>
+	);
+}
+
+export default Image;

src/block-library/custom/image-gallery/components/MediaUploader.tsx

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { Button } from '@wordpress/components';
+import type { MediaUploader_Image } from '@components/media';
+import type { BlockSetAttributes } from '../types';
+
+type Props = {
+	mediaIds: number[];
+	setAttributes: BlockSetAttributes;
+};
+
+/**
+ * Get the largest image size slug available
+ * @param {Object[]} image Image sizes
+ * @return {string} Image size slug key
+ */
+const getImageWidthAndHeight = (
+	image: MediaUploader_Image
+): { width: number | undefined; height: number | undefined } => {
+	/**
+	 * There is a possibility that the image does not have any sizes available
+	 * In that case, return empty strings for width and height
+	 */
+	if (!image.sizes) {
+		return {
+			width: undefined,
+			height: undefined,
+		};
+	}
+
+	/**
+	 * For normal cases where the image has sizes available we will get the largest possible size
+	 */
+	const sizeSlugs = Object.keys(image.sizes);
+
+	const largestSize = sizeSlugs.reduce((prev, current) => {
+		return image.sizes[prev].width > image.sizes[current].width
+			? prev
+			: current;
+	});
+
+	return {
+		width: image.sizes[largestSize].width,
+		height: image.sizes[largestSize].height,
+	};
+};
+
+/**
+ * Block edit function
+ * @param {Object} props Properties
+ * @param {number[]} props.mediaIds Media IDs
+ * @param {Function} props.setAttributes Set attributes function
+ * @return {JSX.Element} React component
+ */
+const MediaUploader = ({ mediaIds, setAttributes }: Props): JSX.Element => {
+	const onSelect = (images: MediaUploader_Image[]) => {
+		setAttributes({
+			images: images.map((image) => {
+				const { id, url, alt, mime } = image;
+				const { width, height } = getImageWidthAndHeight(image);
+
+				return {
+					mediaId: id,
+					mediaUrl: url,
+					mediaAlt: alt,
+					mediaMime: mime,
+					mediaWidth: width,
+					mediaHeight: height,
+					lazyLoad: true,
+				};
+			}),
+		});
+	};
+
+	return (
+		<MediaUploadCheck>
+			<MediaUpload
+				onSelect={onSelect}
+				allowedTypes={['image']}
+				value={mediaIds}
+				render={({ open }) => (
+					<Button onClick={open} className="button button-large">
+						{mediaIds.length < 1
+							? __('Upload/Select Images', 'kotisivu-block-theme')
+							: __('Edit', 'kotisivu-block-theme')}
+					</Button>
+				)}
+				gallery
+				multiple
+			/>
+		</MediaUploadCheck>
+	);
+};
+
+export default MediaUploader;

src/block-library/custom/image-gallery/edit.tsx

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import MediaUploader from './components/MediaUploader';
+import Image from './components/Image';
+import type { BlockAttributes, BlockSetAttributes } from './types';
+
+import './editor.css';
+
+type Props = {
+	attributes: BlockAttributes;
+	setAttributes: BlockSetAttributes;
+};
+
+/**
+ * Block edit function
+ * @param {Props} props Properties
+ * @param {BlockAttributes} props.attributes Block attributes
+ * @param {BlockSetAttributes} props.setAttributes Set attributes
+ * @return {JSX.Element} React component
+ */
+export default function Edit({
+	attributes,
+	setAttributes,
+}: Props): JSX.Element {
+	const { images, blockClass } = attributes;
+
+	/**
+	 * Set block props
+	 */
+	const blockProps = useBlockProps({
+		className: `image-gallery ${blockClass}`,
+	});
+
+	return (
+		<div className="editor-image-gallery">
+			{images.length >= 1 ? (
+				<div {...blockProps}>
+					{images.map((image) => (
+						<Image key={image.mediaId} image={image} />
+					))}
+				</div>
+			) : (
+				<div className="editor-image-gallery__help">
+					{__(
+						'Selected images will be shown here',
+						'kotisivu-block-theme'
+					)}
+				</div>
+			)}
+			<MediaUploader
+				mediaIds={images.map((image) => image.mediaId)}
+				setAttributes={setAttributes}
+			/>
+		</div>
+	);
+}