first commit

2023-11-30 13:20:54 -05:00
commit e9e5c0546c
5833 changed files with 1801865 additions and 0 deletions
@@ -0,0 +1,176 @@
+/**
+ * Internal dependencies
+ */
+import "./block.scss";
+
+/**
+ * WordPress dependencies
+ */
+const {
+	__,
+} = wp.i18n;
+
+const {
+	addFilter,
+} = wp.hooks;
+
+const {
+	Button,
+	DropZone,
+} = wp.components;
+
+const {
+	MediaPlaceholder,
+	MediaUpload,
+	mediaUpload,
+} = wp.blockEditor;
+
+const {
+    createBlock,
+} = wp.blocks;
+
+/**
+ * Custom block Edit output for Slider Gallery block.
+ *
+ * @param {JSX} edit Original block edit.
+ * @param {Object} blockProps Block data.
+ *
+ * @return {JSX} Block edit.
+ */
+function editRender( edit, blockProps ) {
+	if ( 'canvas/slider-gallery' !== blockProps.name ) {
+		return edit;
+	}
+
+	const {
+		attributes,
+		setAttributes,
+		isSelected,
+	} = blockProps;
+
+	const {
+		images,
+	} = attributes;
+
+	const ALLOWED_MEDIA_TYPES = [ 'image' ];
+
+	const hasImages = images && images.length;
+
+	// show gallery with images.
+	if ( hasImages ) {
+		return (
+			<div>
+				{ edit }
+				<DropZone
+					onFilesDrop={ ( files ) => {
+						const currentImages = images || [];
+						mediaUpload( {
+							allowedTypes: ALLOWED_MEDIA_TYPES,
+							filesList: files,
+							onFileChange: ( images ) => {
+								const result = images.map( ( image ) => {
+									return image.id;
+								} );
+
+								setAttributes( {
+									images: currentImages.concat( result ),
+								} );
+							},
+							onError( e ) {
+								// eslint-disable-next-line no-console
+								console.log( e );
+							},
+						} );
+					} }
+				/>
+				{ isSelected ? (
+					<div className="cnvs-block-jg-add-media-button">
+						<MediaUpload
+							onSelect={ ( images ) => {
+								const result = images.map( ( image ) => {
+									return image.id;
+								} );
+
+								setAttributes( {
+									images: result,
+								} );
+							} }
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							multiple
+							gallery
+							value={ images }
+							render={ ( { open } ) => (
+								<Button isDefault={ true } onClick={ open }>{ __( 'Edit Gallery' ) }</Button>
+							) }
+						/>
+					</div>
+				) : '' }
+			</div>
+		);
+	}
+
+	// add media upload if no images selected.
+	return (
+		<div>
+			<MediaPlaceholder
+				icon="format-gallery"
+				labels={ {
+					title: __( 'Gallery' ),
+					instructions: __( 'Drag images, upload new ones or select files from your library.' ),
+				} }
+				onSelect={ ( images ) => {
+					const result = images.map( ( image ) => {
+						return image.id;
+					} );
+
+					setAttributes( {
+						images: result,
+					} );
+				} }
+				accept="image/*"
+				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				multiple
+				value={ undefined }
+				onError={ ( e ) => {
+					// eslint-disable-next-line no-console
+					console.log( e );
+				} }
+			/>
+		</div>
+	);
+}
+
+/**
+ * Block transformations.
+ *
+ * @param {Object} blockData Block data.
+ *
+ * @return {Object} Block data.
+ */
+function registerData( blockData ) {
+	if ( 'canvas/slider-gallery' === blockData.name ) {
+		blockData.transforms = {
+			from: [
+				{
+					type: 'block',
+					blocks: [ 'canvas/justified-gallery' ],
+					transform: function( attrs ) {
+						return createBlock(
+							'canvas/slider-gallery',
+							{
+								images: attrs.images,
+								imageSize: attrs.imageSize,
+								linkTo: attrs.linkTo,
+							}
+						);
+					},
+				},
+			],
+		};
+	}
+
+    return blockData;
+}
+
+addFilter( 'canvas.customBlock.editRender', 'canvas/slider-gallery/editRender', editRender );
+addFilter( 'canvas.customBlock.registerData', 'canvas/slider-gallery/registerData', registerData );