base-js-sw 1.0.0

package/README.md

@@ -0,0 +1,125 @@
+<h1>Base JS Components for Gutenberg Blocks</h1>
+
+<p>This package contains two components that can be used for WordPress Gutenberg block development:</p>
+<ul>
+    <li><strong>Link Picker</strong></li>
+    <li><strong>Image Picker</strong></li>
+</ul>
+
+<h2>Installation</h2>
+<p>To install this package, use:</p>
+<pre><code>npm install base-js</code></pre>
+
+<h2>Usage</h2>
+
+<h3>1. <code>LinkPicker</code> Component</h3>
+<p>The <code>LinkPicker</code> component allows you to select a URL, internal post, or anchor link within your block editor. It stores the selected link as a link object and supports setting a post ID or external URL.</p>
+
+<h4>Usage in a Gutenberg Block:</h4>
+<pre><code>import { LinkPicker } from 'base-js';
+
+registerBlockType('sw/link-block', {
+    edit: ({ attributes, setAttributes }) => {return .. 
+		```<LinkPicker 
+			setAttributes={setAttributes} 
+			at={attributes} 
+			linkRef="link" 
+		/>```},
+    save: () => null, // handled by render.php
+});</code></pre>
+
+<p><strong>Attributes:</strong></p>
+<ul>
+    <li><strong>setAttributes:</strong> Function to set the block's attributes</li>
+    <li><strong>at:</strong> The current block attributes object</li>
+    <li><strong>linkRef:</strong> (Optional) The reference name for the link object (default is <code>'link'</code>)</li>
+</ul>
+
+<h3>2. <code>ImagePicker</code> Component</h3>
+<p>The <code>ImagePicker</code> component allows you to select and manage images in your Gutenberg blocks, with options to crop, replace, and remove images.</p>
+
+<h4>Usage in a Gutenberg Block:</h4>
+<pre><code>import { ImagePicker } from 'base-js';
+
+registerBlockType('sw/image-block', {
+    edit: ({ attributes, setAttributes }) => {
+        return ...
+                ```
+				<ImagePicker 
+                    setAttributes={setAttributes} 
+                    imageObject={attributes.imageObject} 
+                    imageRef="imageObject" 
+                    buttonText="Select an image"
+                />
+				```
+    },
+    save: () => null, // handled by render.php
+});</code></pre>
+
+<p><strong>Attributes:</strong></p>
+<ul>
+    <li><strong>setAttributes:</strong> Function to set the block's attributes</li>
+    <li><strong>imageObject:</strong> The current image object with properties like <code>url</code>, <code>alt</code>, etc.</li>
+    <li><strong>imageRef:</strong> (Optional) The reference name for the image object (default is <code>'imageObject'</code>)</li>
+    <li><strong>buttonText:</strong> (Optional) The button label text (default is <code>'Select an image'</code>)</li>
+</ul>
+
+<h4>Block requirements</h4>
+<pre><code>
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "theme/block",
+	"title": "Block"
+	"attributes": {
+		"text": {
+			"type": "string",
+			"default": ""
+		},
+		"link": {
+			"type": "object",
+			"properties": {
+				"url": {
+					"type": "string",
+					"default": ""
+				},
+				"linkTarget": {
+					"type": "string",
+					"default": ""
+				},
+				"id": {
+					"type": "integer",
+					"default": false
+				}
+			}
+		},
+		"imageObject":{
+			"type": "object",
+			"id": {
+				"type": "integer",
+				"default": ""
+			},
+			"url": {
+				"type": "string",
+				"default": ""
+			},
+			"alt": {
+				"type": "string",
+				"default": ""
+			}
+		}
+	},
+	"editorScript": "theme-block-js",
+	"style": "theme-editor-styles",
+	"render": "file:./render.php",
+	"postTypes": ["all"]
+}
+</code></pre>
+
+<h2>Contributing</h2>
+<p>Contributions are welcome. Please submit issues or pull requests to help improve the package.</p>
+
+<h2>License</h2>
+<p>This project is licensed under the MIT License.</p>
+
+ 

package/components/ImagePicker.js

@@ -0,0 +1,270 @@
+
+/*
+ * Image Picker Component -- See params
+ * - Usage 1: <ImagePicker />
+ * - Usage 2: <ImagePickerPanelBody />
+ * - Usage 3: <ImagePickerPreview />
+ */
+import { __ } from '@wordpress/i18n';
+import { MediaUpload, MediaUploadCheck } from '@wordpress/blockEditor';
+import { PanelBody, Button } from '@wordpress/components';
+import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+const { siteDomain } = themeVars; // vars passed from enqueue_backend.php
+
+export const ImagePicker = ({ setAttributes, imageObject = {}, extraClass, imageRef = 'imageObject', buttonText = 'Select image', showCrop = true }) => {
+	let componentClass = 'component-image-picker';
+
+	let imageOptionsString = 'images/width=250,height=150,crop=0';
+	let resizedImageUrl = '';
+
+	if(imageObject.hasOwnProperty('url') && imageObject.url !== ''){
+		if(imageObject.url.endsWith('.svg')) {
+			resizedImageUrl = imageObject.url;
+		} else {
+			let imageUrlMinusBase = imageObject.url.replace( siteDomain+'/app/uploads','' ); // remove base and directory
+			resizedImageUrl   = imageOptionsString + imageUrlMinusBase;
+			resizedImageUrl   = siteDomain + '/' + resizedImageUrl;
+		}
+	}
+	
+	return (
+		<div className={extraClass ? componentClass + ' ' + extraClass : componentClass}>
+			{imageObject.hasOwnProperty('url') && imageObject.url !== '' ? //Has image
+				<MediaUploadCheck>
+					<div className={componentClass + "__media-wrapper"}>
+						<img
+							className={componentClass + "__media"}
+							src={resizedImageUrl}
+							alt={imageObject.alt}
+							/>
+						{showCrop && imageObject && typeof imageObject.crop !== 'undefined' &&
+							<>
+								<AlignmentMatrixControl
+									value={ imageObject.crop }
+									onChange={(value) => updateImageCrop(setAttributes, value, imageObject, imageRef)}
+								/>
+							</>
+						}
+					</div>
+					<EditImageButtons
+						componentClass={componentClass}
+						setAttributes={setAttributes}
+						imageRef={imageRef}
+						replaceText='Replace'
+						removeText='Remove'
+						imageId={imageObject.id}
+					/>
+				</MediaUploadCheck>
+				: //No image
+				<UploadImageButton
+					componentClass={componentClass}
+					setAttributes={setAttributes}
+					imageRef={imageRef} 
+					buttonText={buttonText}
+				/>
+			} 
+
+			
+
+		</div>
+	)
+};
+
+/*
+* Image Picker Panel Body
+* Used for Inspector Controls
+*/
+export const ImagePickerPanelBody = ({ setAttributes, imageObject, imageRef = null, title = 'Image', showCrop = true }) => {
+	return(
+		<PanelBody title={title} initialOpen={true}>
+			<ImagePicker
+				setAttributes={setAttributes} 
+				imageRef={imageRef} 
+				imageObject={imageObject}
+				showCrop={showCrop}
+			/> 
+		</PanelBody>
+	)
+}
+
+/*
+* Image Picker Preview
+* Used for image inside block in the edit function
+*/
+
+export const ImagePickerPreview = ({
+	setAttributes,
+	imageObject = {}, 
+	blockClass,
+	imageClass,
+	width = 500,
+	height = 500,
+	crop = true,
+	imageRef = 'imageObject',
+	buttonText = 'Select image'
+}) => {
+
+	let componentClass           = 'component-image-picker-preview';
+	let imageElementClass        = '';
+	let imageElementWrapperClass = ''
+
+
+	if( imageClass ){//Image class
+		imageElementClass        = blockClass + imageClass;
+		imageElementWrapperClass = blockClass + imageClass + '-wrapper';
+
+	} else if( blockClass ){//Block class
+		imageElementClass        = blockClass + '__image';
+		imageElementWrapperClass = blockClass + '__image-wrapper';
+	}
+
+
+	let imagecrop =  crop ? '1':'0';
+
+	if(imageObject.crop){
+		imagecrop = imageObject.crop.replace(/\s+/g, '-');
+	}
+
+	let imageOptionsString = 'images/width='+width+',height='+height+',crop='+imagecrop;
+	let imageOptionsStringDouble = 'images/width='+width*2+',height='+height*2+',crop='+imagecrop;
+	let resizedImageUrl = '';
+	let resizedImageUrlDouble = '';
+
+	if(imageObject.hasOwnProperty('url') && imageObject.url !== ''){
+	
+		let imageUrlMinusBase = imageObject.url.replace( siteDomain+'/app/uploads','' ); // remove base and directory
+
+		if(imageObject.url.endsWith('.svg')) {
+			resizedImageUrl = imageObject.url;
+			resizedImageUrlDouble = imageObject.url;
+		} else {
+			resizedImageUrl   = imageOptionsString + imageUrlMinusBase;
+			resizedImageUrl   = siteDomain + '/' + resizedImageUrl;
+			resizedImageUrlDouble  = imageOptionsStringDouble + imageUrlMinusBase
+			resizedImageUrlDouble  = siteDomain + '/' + resizedImageUrlDouble;
+		}
+	} else {
+		componentClass += ' no-image';
+	}
+
+	return (
+		<div className={imageElementWrapperClass ? componentClass + ' ' + imageElementWrapperClass : componentClass}>
+			{imageObject.hasOwnProperty('url') && imageObject.url !== '' ? //Has image
+				<MediaUploadCheck>
+					<img
+						className={imageElementClass ? imageElementClass : ''}
+						src={resizedImageUrl}
+						srcSet={resizedImageUrl+' 1x, '+resizedImageUrlDouble+' 2x'}
+						alt={imageObject.alt} 
+					/>
+					<EditImageButtons
+						componentClass={componentClass}
+						setAttributes={setAttributes}
+						imageRef={imageRef} 
+						replaceText=''
+						removeText=''
+						imageId={imageObject.id}
+					/>
+				</MediaUploadCheck>
+			: //No image
+				<UploadImageButton
+					componentClass={componentClass}
+					setAttributes={setAttributes}
+					imageRef={imageRef} 
+					buttonText={buttonText}
+				/>
+			}
+		</div>
+	)
+};
+
+// ============= Image Controls (appear over image within editor)
+export const EditImageButtons = ({ componentClass, setAttributes, replaceText, removeText, imageRef, imageId }) => {
+	return (
+		<MediaUpload
+			title={'Icon'}
+			onSelect={(media) => updateImageAttr(setAttributes, media, imageRef)}
+			allowedTypes={['image']}
+			value={imageId}
+			render={({ open }) => (
+				<div className={componentClass + "__edit-buttons"}>
+
+					<Button
+						className={componentClass + "__edit-button"}
+						isSecondary
+						onClick={open}
+						icon="images-alt2"
+					>
+						{replaceText}
+					</Button>
+
+					<Button
+						className={componentClass + "__edit-button"}
+						isDestructive
+						onClick={ (media) => {
+							updateImageAttr(setAttributes, false, imageRef)
+						}}
+						icon="remove"
+					>
+						{removeText}
+					</Button>
+				</div>
+			)}
+		/>
+	)
+}
+
+export const UploadImageButton = ({ componentClass, setAttributes, imageRef, buttonText }) => {
+
+
+
+	return (
+		<MediaUploadCheck>
+			<MediaUpload
+				onSelect={(media) => {
+					updateImageAttr(setAttributes, media, imageRef)
+				}}
+				render={({ open }) => {
+					return (
+						<Button onClick={open} className={componentClass + "__upload-button"} isSecondary icon="images-alt2">
+							{buttonText}
+						</Button>
+					);
+				}}
+			/>
+		</MediaUploadCheck>
+	)
+}
+
+const updateImageCrop = (setAttributes, crop, imageObject, imageRef) => {
+	imageObject.crop = crop;
+
+	setAttributes({ [imageRef]: {
+		id: imageObject.id,
+		url: imageObject.url,
+		alt: imageObject.alt,
+		crop: crop
+	} }); //used to update imagePickerPreview
+}
+
+const updateImageAttr = (
+	setAttributes,
+	media = false,
+	imageRef,
+) => {
+
+	imageRef ??= 'imageObject';
+
+	let newImageUrl = media ? media.sizes.full.url : ''
+	
+
+	setAttributes({
+		[imageRef]: {
+			id: media.id,
+			url: newImageUrl,
+			alt: media.alt,
+			crop: 'center center'
+		},
+	});
+};
+

package/components/LinkPicker.js

@@ -0,0 +1,64 @@
+import { __experimentalLinkControl as LinkControl } from '@wordpress/blockEditor';
+import { safeDecodeURI } from '@wordpress/url';
+import { useState, useEffect } from 'react';
+
+export const LinkPicker = ({ setAttributes, at, linkRef = 'link' }) => {
+	// Get the current link object based on linkRef or fallback to an empty object
+	const linkObj = at[linkRef] || {};
+	const { url, linkTarget, id } = linkObj;
+	const opensInNewTab = linkTarget === '_blank';
+
+	// Local state to track temporary URL, ID, and link target
+	const [localUrl, setLocalUrl] = useState(url || '');
+	const [localId, setLocalId] = useState(id || '');
+	const [localLinkTarget, setLocalLinkTarget] = useState(opensInNewTab);
+
+	// Effect to update attributes when the local state changes
+	useEffect(() => {
+		setAttributes({
+			[linkRef]: {
+				url: localUrl ? encodeURI(safeDecodeURI(localUrl)) : '', // Ensure proper encoding for the URL if no ID
+				linkTarget: localLinkTarget ? '_blank' : undefined,
+				id: localId ? localId : undefined, // Set ID if available, else undefined
+			},
+		});
+	}, [localUrl, localId, localLinkTarget]); // Trigger whenever the URL, ID, or target changes
+
+	const handleLinkChange = (updatedValue) => {
+		console.log(updatedValue)
+		const { url, opensInNewTab, id, kind } = updatedValue;
+
+		// Update ID or URL depending on whether it's an internal post or an external link/anchor
+		if (kind === 'post-type' && id) {
+			// Internal post, use ID
+			setLocalId(id);
+			setLocalUrl(url);
+		} else {
+			// External or anchor link, use URL
+			setLocalUrl(url);
+			setLocalId(''); // Clear the ID since we are using the URL
+		}
+
+		// Update the new tab option
+		setLocalLinkTarget(opensInNewTab);
+	};
+
+	return (
+		<LinkControl
+			value={{ url: localUrl, opensInNewTab: localLinkTarget, id: localId }}
+			onChange={(updatedValue) => {
+				handleLinkChange(updatedValue);
+			}}
+			onBlur={() => {
+				// Save on blur to ensure the value is saved when clicking away
+				setAttributes({
+					[linkRef]: {
+						url: localId ? '' : localUrl ? encodeURI(safeDecodeURI(localUrl)) : '',
+						linkTarget: localLinkTarget ? '_blank' : undefined,
+						id: localId ? localId : undefined,
+					},
+				});
+			}}
+		/>
+	);
+};

package/index.js

@@ -0,0 +1,2 @@
+export { LinkPicker } from './components/LinkPicker';
+export { ImagePicker, ImagePickerPanelBody, ImagePickerPreview } from './components/ImagePicker';

package/package.json

@@ -0,0 +1,15 @@
+{
+	"name": "base-js-sw",
+	"version": "1.0.0",
+	"description": "Reusable Gutenberg block components for WordPress projects",
+	"main": "index.js",
+	"author": "Shape Works",
+	"license": "MIT",
+	"peerDependencies": {
+	  "@wordpress/blockEditor": "^12.0.0",
+	  "@wordpress/i18n": "^3.0.0",
+	  "@wordpress/url": "^4.0.0",
+	  "@wordpress/components": "^14.0.0"
+	}
+}
+