Logo Gallery block

extensions/blocks/logo-gallery/edit.js

@@ -0,0 +1,306 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { filter, pick, map, get } from 'lodash';
+import {
+	IconButton,
+	PanelBody,
+	Toolbar,
+	withNotices,
+	DropZone,
+	FormFileUpload,
+} from '@wordpress/components';
+import {
+	BlockControls,
+	BlockIcon,
+	MediaPlaceholder,
+	MediaUpload,
+	mediaUpload,
+	InspectorControls,
+} from '@wordpress/editor';
+import { compose } from '@wordpress/compose';
+import { withDispatch } from '@wordpress/data';
+import { isBlobURL } from '@wordpress/blob';
+import { Component, Fragment } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Logo from './logo';
+import icon from './icon';
+import './editor.scss';
+
+const ALLOWED_MEDIA_TYPES = [ 'image' ];
+
+export const pickRelevantMediaFiles = image => {
+	const imageProps = pick( image, [ 'alt', 'id', 'link' ] );
+	imageProps.url =
+		get( image, [ 'sizes', 'large', 'url' ] ) ||
+		get( image, [ 'media_details', 'sizes', 'large', 'source_url' ] ) ||
+		image.url;
+	return imageProps;
+};
+
+class GalleryEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onSelectImage = this.onSelectImage.bind( this );
+		this.onSelectImages = this.onSelectImages.bind( this );
+		this.onRemoveImage = this.onRemoveImage.bind( this );
+		this.setImageAttributes = this.setImageAttributes.bind( this );
+		this.setAttributes = this.setAttributes.bind( this );
+		this.addFiles = this.addFiles.bind( this );
+		this.uploadFromFiles = this.uploadFromFiles.bind( this );
+
+		this.state = {
+			selectedImage: null,
+		};
+	}
+
+	setAttributes( attributes ) {
+		if ( attributes.ids ) {
+			throw new Error(
+				'The "ids" attribute should not be changed directly. It is managed automatically when "images" attribute changes'
+			);
+		}
+
+		if ( attributes.images ) {
+			attributes = {
+				...attributes,
+				ids: map( attributes.images, 'id' ),
+			};
+		}
+
+		this.props.setAttributes( attributes );
+	}
+
+	onSelectImage( index ) {
+		return () => {
+			if ( this.state.selectedImage !== index ) {
+				this.setState( {
+					selectedImage: index,
+				} );
+			}
+		};
+	}
+
+	onRemoveImage( index ) {
+		return () => {
+			const images = filter( this.props.attributes.images, ( img, i ) => index !== i );
+			this.setState( { selectedImage: null } );
+			this.setAttributes( {
+				images,
+			} );
+		};
+	}
+
+	onSelectImages( images ) {
+		this.setAttributes( {
+			images: images.map( image => pickRelevantMediaFiles( image ) ),
+		} );
+	}
+
+	addFiles = files => {
+		const currentImages = this.props.attributes.images || [];
+		const { lockPostSaving, unlockPostSaving, noticeOperations, setAttributes } = this.props;
+		const lockName = 'logoGalleryBlockLock';
+		lockPostSaving( lockName );
+		mediaUpload( {
+			allowedTypes: ALLOWED_MEDIA_TYPES,
+			filesList: files,
+			onFileChange: images => {
+				const imagesNormalized = images.map( image => pickRelevantMediaFiles( image ) );
+				setAttributes( {
+					images: [ ...currentImages, ...imagesNormalized ],
+				} );
+				if ( ! imagesNormalized.every( image => isBlobURL( image.url ) ) ) {
+					unlockPostSaving( lockName );
+				}
+			},
+			onError: noticeOperations.createErrorNotice,
+		} );
+	};
+
+	uploadFromFiles = event => this.addFiles( event.target.files );
+
+	setImageAttributes( index, attributes ) {
+		const {
+			attributes: { images },
+		} = this.props;
+		const { setAttributes } = this;
+		if ( ! images[ index ] ) {
+			return;
+		}
+		setAttributes( {
+			images: [
+				...images.slice( 0, index ),
+				{
+					...images[ index ],
+					...attributes,
+				},
+				...images.slice( index + 1 ),
+			],
+		} );
+	}
+
+	componentDidUpdate( prevProps ) {
+		// Deselect images when deselecting the block
+		if ( ! this.props.isSelected && prevProps.isSelected ) {
+			// https://reactjs.org/docs/react-component.html#componentdidupdate
+			// eslint-disable-next-line react/no-did-update-set-state
+			this.setState( {
+				selectedImage: null,
+			} );
+		}
+	}
+
+	render() {
+		const {
+			attributes,
+			isSelected,
+			className,
+			noticeOperations,
+			noticeUI,
+			setAttributes,
+		} = this.props;
+		const { logoSize, images } = attributes;
+		const hasImages = !! images.length;
+
+		const controls = (
+			<BlockControls>
+				{ hasImages && (
+					<Toolbar>
+						<MediaUpload
+							onSelect={ this.onSelectImages }
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							multiple
+							gallery
+							value={ images.map( img => img.id ) }
+							render={ ( { open } ) => (
+								<IconButton
+									className="components-toolbar__control"
+									label={ __( 'Edit gallery', 'jetpack' ) }
+									icon="edit"
+									onClick={ open }
+								/>
+							) }
+						/>
+					</Toolbar>
+				) }
+			</BlockControls>
+		);
+
+		const toolbarControls = [
+			{
+				icon: 'arrow-down',
+				title: __( 'Small size', 'jetpack' ),
+				isActive: logoSize === 'small',
+				onClick: () => setAttributes( { logoSize: 'small' } ),
+			},
+			{
+				icon: 'sort',
+				title: __( 'Medium size', 'jetpack' ),
+				isActive: logoSize === 'medium',
+				onClick: () => setAttributes( { logoSize: 'medium' } ),
+			},
+			{
+				icon: 'arrow-up',
+				title: __( 'Large size', 'jetpack' ),
+				isActive: logoSize === 'large',
+				onClick: () => setAttributes( { logoSize: 'large' } ),
+			},
+		];
+
+		if ( ! hasImages ) {
+			return (
+				<Fragment>
+					{ controls }
+					<MediaPlaceholder
+						icon={ <BlockIcon icon={ icon } /> }
+						className={ className }
+						labels={ {
+							title: __( 'Logo Gallery', 'jetpack' ),
+							instructions: __(
+								'Drag images, upload new ones or select files from your library.',
+								'jetpack'
+							),
+						} }
+						onSelect={ this.onSelectImages }
+						accept="image/*"
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						multiple
+						notices={ noticeUI }
+						onError={ noticeOperations.createErrorNotice }
+					/>
+				</Fragment>
+			);
+		}
+
+		return (
+			<Fragment>
+				{ controls }
+				<InspectorControls>
+					<PanelBody title={ __( 'Logo Gallery Settings', 'jetpack' ) }>
+						<p>{ __( 'Logo size', 'jetpack' ) }</p>
+						<Toolbar controls={ toolbarControls } />
+					</PanelBody>
+				</InspectorControls>
+				{ noticeUI }
+				<ul className={ classNames( className, `is-${ logoSize }` ) }>
+					{ images.map( ( img, index ) => {
+						/* translators: %1$d is the order number of the image, %2$d is the total number of images. */
+						const ariaLabel = sprintf(
+							__( 'image %1$d of %2$d in gallery', 'jetpack' ),
+							index + 1,
+							images.length
+						);
+
+						return (
+							<li className="logo-gallery-item" key={ img.id || img.url }>
+								<Logo
+									url={ img.url }
+									alt={ img.alt }
+									id={ img.id }
+									isSelected={ isSelected && this.state.selectedImage === index }
+									onRemove={ this.onRemoveImage( index ) }
+									onSelect={ this.onSelectImage( index ) }
+									setAttributes={ attrs => this.setImageAttributes( index, attrs ) }
+									aria-label={ ariaLabel }
+								/>
+							</li>
+						);
+					} ) }
+				</ul>
+				<DropZone onFilesDrop={ this.addFiles } />
+				{ isSelected && (
+					<div className="wp-block-jetpack-slideshow__add-item">
+						<FormFileUpload
+							multiple
+							isLarge
+							className="wp-block-jetpack-slideshow__add-item-button"
+							onChange={ this.uploadFromFiles }
+							accept="image/*"
+							icon="insert"
+						>
+							{ __( 'Add a logo', 'jetpack' ) }
+						</FormFileUpload>
+					</div>
+				) }
+			</Fragment>
+		);
+	}
+}
+
+export default compose(
+	withDispatch( dispatch => {
+		const { lockPostSaving, unlockPostSaving } = dispatch( 'core/editor' );
+		return {
+			lockPostSaving,
+			unlockPostSaving,
+		};
+	} ),
+	withNotices
+)( GalleryEdit );

extensions/blocks/logo-gallery/editor.js

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import registerJetpackBlock from '../../utils/register-jetpack-block';
+import { name, settings } from '.';
+
+registerJetpackBlock( name, settings );

extensions/blocks/logo-gallery/editor.scss

@@ -0,0 +1,62 @@
+@import './style.scss';
+
+// Override the default list style type _only in the editor_
+// to avoid :not() selector specificity issues.
+// See https://github.com/WordPress/gutenberg/pull/10358
+ul.wp-block-jetpack-logo-gallery li {
+	list-style-type: none;
+}
+
+.logo-gallery-item {
+	position: relative;
+
+	// Hide the focus outline that otherwise briefly appears when selecting a block.
+	figure:not(.is-selected):focus {
+		outline: none;
+	}
+
+	img:focus,
+	.is-selected {
+		outline: 4px solid $logo-gallery-selection;
+	}
+
+	.is-transient img {
+		opacity: 0.3;
+	}
+
+}
+
+.logo-gallery-item__inline-menu {
+	padding: 2px;
+	position: absolute;
+	top: -2px;
+	right: -2px;
+	background-color: $logo-gallery-selection;
+	display: inline-flex;
+	z-index: 20;
+
+	.components-button {
+		color: $logo-gallery-selection-color;
+
+		&:hover,
+		&:focus {
+			color: $logo-gallery-selection-color;
+		}
+	}
+}
+
+.logo-gallery-item__remove {
+	padding: 0;
+
+	&.components-button:focus {
+		color: inherit;
+	}
+}
+
+.logo-gallery-item .components-spinner {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin-top: -9px;
+	margin-left: -9px;
+}

extensions/blocks/logo-gallery/icon.js

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path fill="none" d="M0 0h24v24H0V0z" />
+		<Path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12zM4 20h14v2H4c-1.1 0-2-.9-2-2V6h2v14zm10-5.5c2.5 0 4.5-2 4.5-4.5s-2-4.5-4.5-4.5-4.5 2-4.5 4.5 2 4.5 4.5 4.5zm0-7c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5z" />
+	</SVG>
+);