@wordpress/block-library 9.2.0 → 9.3.0

package/src/gallery/v1/gallery-image.js

@@ -1,293 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Button, Spinner, ButtonGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { BACKSPACE, DELETE } from '@wordpress/keycodes';
-import { withSelect, withDispatch } from '@wordpress/data';
-import {
-	RichText,
-	MediaPlaceholder,
-	store as blockEditorStore,
-	__experimentalGetElementClassName,
-} from '@wordpress/block-editor';
-import { isBlobURL } from '@wordpress/blob';
-import { compose } from '@wordpress/compose';
-import {
-	closeSmall,
-	chevronLeft,
-	chevronRight,
-	edit,
-	image as imageIcon,
-} from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { pickRelevantMediaFiles } from './shared';
-import {
-	LINK_DESTINATION_ATTACHMENT,
-	LINK_DESTINATION_MEDIA,
-} from './constants';
-
-const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
-
-class GalleryImage extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onSelectImage = this.onSelectImage.bind( this );
-		this.onRemoveImage = this.onRemoveImage.bind( this );
-		this.bindContainer = this.bindContainer.bind( this );
-		this.onEdit = this.onEdit.bind( this );
-		this.onSelectImageFromLibrary =
-			this.onSelectImageFromLibrary.bind( this );
-		this.onSelectCustomURL = this.onSelectCustomURL.bind( this );
-		this.state = {
-			isEditing: false,
-		};
-	}
-
-	bindContainer( ref ) {
-		this.container = ref;
-	}
-
-	onSelectImage() {
-		if ( ! this.props.isSelected ) {
-			this.props.onSelect();
-		}
-	}
-
-	onRemoveImage( event ) {
-		if (
-			this.container === this.container.ownerDocument.activeElement &&
-			this.props.isSelected &&
-			[ BACKSPACE, DELETE ].indexOf( event.keyCode ) !== -1
-		) {
-			event.preventDefault();
-			this.props.onRemove();
-		}
-	}
-
-	onEdit() {
-		this.setState( {
-			isEditing: true,
-		} );
-	}
-
-	componentDidUpdate() {
-		const { image, url, __unstableMarkNextChangeAsNotPersistent } =
-			this.props;
-		if ( image && ! url ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			this.props.setAttributes( {
-				url: image.source_url,
-				alt: image.alt_text,
-			} );
-		}
-	}
-
-	deselectOnBlur() {
-		this.props.onDeselect();
-	}
-
-	onSelectImageFromLibrary( media ) {
-		const { setAttributes, id, url, alt, caption, sizeSlug } = this.props;
-		if ( ! media || ! media.url ) {
-			return;
-		}
-
-		let mediaAttributes = pickRelevantMediaFiles( media, sizeSlug );
-
-		// If the current image is temporary but an alt text was meanwhile
-		// written by the user, make sure the text is not overwritten.
-		if ( isTemporaryImage( id, url ) ) {
-			if ( alt ) {
-				const { alt: omittedAlt, ...restMediaAttributes } =
-					mediaAttributes;
-				mediaAttributes = restMediaAttributes;
-			}
-		}
-
-		// If a caption text was meanwhile written by the user,
-		// make sure the text is not overwritten by empty captions.
-		if ( caption && ! mediaAttributes.caption ) {
-			const { caption: omittedCaption, ...restMediaAttributes } =
-				mediaAttributes;
-			mediaAttributes = restMediaAttributes;
-		}
-
-		setAttributes( mediaAttributes );
-		this.setState( {
-			isEditing: false,
-		} );
-	}
-
-	onSelectCustomURL( newURL ) {
-		const { setAttributes, url } = this.props;
-		if ( newURL !== url ) {
-			setAttributes( {
-				url: newURL,
-				id: undefined,
-			} );
-			this.setState( {
-				isEditing: false,
-			} );
-		}
-	}
-
-	render() {
-		const {
-			url,
-			alt,
-			id,
-			linkTo,
-			link,
-			isFirstItem,
-			isLastItem,
-			isSelected,
-			caption,
-			onRemove,
-			onMoveForward,
-			onMoveBackward,
-			setAttributes,
-			'aria-label': ariaLabel,
-		} = this.props;
-		const { isEditing } = this.state;
-
-		let href;
-
-		switch ( linkTo ) {
-			case LINK_DESTINATION_MEDIA:
-				href = url;
-				break;
-			case LINK_DESTINATION_ATTACHMENT:
-				href = link;
-				break;
-		}
-
-		const img = (
-			// Disable reason: Image itself is not meant to be interactive, but should
-			// direct image selection and unfocus caption fields.
-			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-			<>
-				<img
-					src={ url }
-					alt={ alt }
-					data-id={ id }
-					onKeyDown={ this.onRemoveImage }
-					tabIndex="0"
-					aria-label={ ariaLabel }
-					ref={ this.bindContainer }
-				/>
-				{ isBlobURL( url ) && <Spinner /> }
-			</>
-			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
-		);
-
-		const className = clsx( {
-			'is-selected': isSelected,
-			'is-transient': isBlobURL( url ),
-		} );
-
-		return (
-			// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-			<figure
-				className={ className }
-				onClick={ this.onSelectImage }
-				onFocus={ this.onSelectImage }
-			>
-				{ ! isEditing && ( href ? <a href={ href }>{ img }</a> : img ) }
-				{ isEditing && (
-					<MediaPlaceholder
-						labels={ { title: __( 'Edit gallery image' ) } }
-						icon={ imageIcon }
-						onSelect={ this.onSelectImageFromLibrary }
-						onSelectURL={ this.onSelectCustomURL }
-						accept="image/*"
-						allowedTypes={ [ 'image' ] }
-						value={ { id, src: url } }
-					/>
-				) }
-				<ButtonGroup className="block-library-gallery-item__inline-menu is-left">
-					<Button
-						icon={ chevronLeft }
-						onClick={ isFirstItem ? undefined : onMoveBackward }
-						label={ __( 'Move image backward' ) }
-						aria-disabled={ isFirstItem }
-						// Disable reason: Truly disable when image is not selected.
-						// eslint-disable-next-line no-restricted-syntax
-						disabled={ ! isSelected }
-					/>
-					<Button
-						icon={ chevronRight }
-						onClick={ isLastItem ? undefined : onMoveForward }
-						label={ __( 'Move image forward' ) }
-						aria-disabled={ isLastItem }
-						// Disable reason: Truly disable when image is not selected.
-						// eslint-disable-next-line no-restricted-syntax
-						disabled={ ! isSelected }
-					/>
-				</ButtonGroup>
-				<ButtonGroup className="block-library-gallery-item__inline-menu is-right">
-					<Button
-						icon={ edit }
-						onClick={ this.onEdit }
-						label={ __( 'Replace image' ) }
-						// Disable reason: Truly disable when image is not selected.
-						// eslint-disable-next-line no-restricted-syntax
-						disabled={ ! isSelected }
-					/>
-					<Button
-						icon={ closeSmall }
-						onClick={ onRemove }
-						label={ __( 'Remove image' ) }
-						// Disable reason: Truly disable when image is not selected.
-						// eslint-disable-next-line no-restricted-syntax
-						disabled={ ! isSelected }
-					/>
-				</ButtonGroup>
-				{ ! isEditing && ( isSelected || caption ) && (
-					<RichText
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						aria-label={ __( 'Image caption text' ) }
-						placeholder={ isSelected ? __( 'Add caption' ) : null }
-						value={ caption }
-						onChange={ ( newCaption ) =>
-							setAttributes( { caption: newCaption } )
-						}
-						inlineToolbar
-					/>
-				) }
-			</figure>
-		);
-	}
-}
-
-export default compose( [
-	withSelect( ( select, ownProps ) => {
-		const { getMedia } = select( coreStore );
-		const { id } = ownProps;
-
-		return {
-			image: id ? getMedia( parseInt( id, 10 ) ) : null,
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { __unstableMarkNextChangeAsNotPersistent } =
-			dispatch( blockEditorStore );
-		return {
-			__unstableMarkNextChangeAsNotPersistent,
-		};
-	} ),
-] )( GalleryImage );

package/src/gallery/v1/gallery-image.native.js

@@ -1,348 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	StyleSheet,
-	View,
-	ScrollView,
-	TouchableWithoutFeedback,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	requestImageFailedRetryDialog,
-	requestImageUploadCancelDialog,
-	requestImageFullscreenPreview,
-} from '@wordpress/react-native-bridge';
-import { Component } from '@wordpress/element';
-import { Image } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { Caption, MediaUploadProgress } from '@wordpress/block-editor';
-import { getProtocol } from '@wordpress/url';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { arrowLeft, arrowRight, warning } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Button from './gallery-button';
-import style from './gallery-image-style.scss';
-
-const { compose } = StyleSheet;
-
-const separatorStyle = compose( style.separator, {
-	borderRightWidth: StyleSheet.hairlineWidth,
-} );
-const buttonStyle = compose( style.button, { aspectRatio: 1 } );
-const ICON_SIZE_ARROW = 15;
-
-class GalleryImage extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onSelectImage = this.onSelectImage.bind( this );
-		this.onSelectCaption = this.onSelectCaption.bind( this );
-		this.onMediaPressed = this.onMediaPressed.bind( this );
-		this.onCaptionChange = this.onCaptionChange.bind( this );
-		this.onSelectMedia = this.onSelectMedia.bind( this );
-
-		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.finishMediaUploadWithSuccess =
-			this.finishMediaUploadWithSuccess.bind( this );
-		this.finishMediaUploadWithFailure =
-			this.finishMediaUploadWithFailure.bind( this );
-		this.renderContent = this.renderContent.bind( this );
-
-		this.state = {
-			captionSelected: false,
-			isUploadInProgress: false,
-			didUploadFail: false,
-		};
-	}
-
-	onSelectCaption() {
-		if ( ! this.state.captionSelected ) {
-			this.setState( {
-				captionSelected: true,
-			} );
-		}
-
-		if ( ! this.props.isSelected ) {
-			this.props.onSelect();
-		}
-	}
-
-	onMediaPressed() {
-		const { id, url, isSelected } = this.props;
-		const { captionSelected, isUploadInProgress, didUploadFail } =
-			this.state;
-
-		this.onSelectImage();
-
-		if ( isUploadInProgress ) {
-			requestImageUploadCancelDialog( id );
-		} else if (
-			didUploadFail ||
-			( id && getProtocol( url ) === 'file:' )
-		) {
-			requestImageFailedRetryDialog( id );
-		} else if ( isSelected && ! captionSelected ) {
-			requestImageFullscreenPreview( url );
-		}
-	}
-
-	onSelectImage() {
-		if ( ! this.props.isBlockSelected ) {
-			this.props.onSelectBlock();
-		}
-
-		if ( ! this.props.isSelected ) {
-			this.props.onSelect();
-		}
-
-		if ( this.state.captionSelected ) {
-			this.setState( {
-				captionSelected: false,
-			} );
-		}
-	}
-
-	onSelectMedia( media ) {
-		const { setAttributes } = this.props;
-		setAttributes( media );
-	}
-
-	onCaptionChange( caption ) {
-		const { setAttributes } = this.props;
-		setAttributes( { caption } );
-	}
-
-	componentDidUpdate( prevProps ) {
-		const { isSelected, image, url } = this.props;
-		if ( image && ! url ) {
-			this.props.setAttributes( {
-				url: image.source_url,
-				alt: image.alt_text,
-			} );
-		}
-
-		// Unselect the caption so when the user selects other image and comeback
-		// the caption is not immediately selected.
-		if (
-			this.state.captionSelected &&
-			! isSelected &&
-			prevProps.isSelected
-		) {
-			this.setState( {
-				captionSelected: false,
-			} );
-		}
-	}
-
-	updateMediaProgress() {
-		if ( ! this.state.isUploadInProgress ) {
-			this.setState( { isUploadInProgress: true } );
-		}
-	}
-
-	finishMediaUploadWithSuccess( payload ) {
-		this.setState( {
-			isUploadInProgress: false,
-			didUploadFail: false,
-		} );
-
-		this.props.setAttributes( {
-			id: payload.mediaServerId,
-			url: payload.mediaUrl,
-		} );
-	}
-
-	finishMediaUploadWithFailure() {
-		this.setState( {
-			isUploadInProgress: false,
-			didUploadFail: true,
-		} );
-	}
-
-	renderContent( params ) {
-		const {
-			url,
-			isFirstItem,
-			isLastItem,
-			isSelected,
-			caption,
-			onRemove,
-			onMoveForward,
-			onMoveBackward,
-			'aria-label': ariaLabel,
-			isCropped,
-			getStylesFromColorScheme,
-			isRTL,
-		} = this.props;
-
-		const { isUploadInProgress, captionSelected } = this.state;
-		const { isUploadFailed, retryMessage } = params;
-		const resizeMode = isCropped ? 'cover' : 'contain';
-
-		const captionPlaceholderStyle = getStylesFromColorScheme(
-			style.captionPlaceholder,
-			style.captionPlaceholderDark
-		);
-
-		const shouldShowCaptionEditable = ! isUploadFailed && isSelected;
-		const shouldShowCaptionExpanded =
-			! isUploadFailed && ! isSelected && !! caption;
-
-		const captionContainerStyle = shouldShowCaptionExpanded
-			? style.captionExpandedContainer
-			: style.captionContainer;
-
-		const captionStyle = shouldShowCaptionExpanded
-			? style.captionExpanded
-			: style.caption;
-
-		const mediaPickerOptions = [
-			{
-				destructiveButton: true,
-				id: 'removeImage',
-				label: __( 'Remove' ),
-				onPress: onRemove,
-				separated: true,
-				value: 'removeImage',
-			},
-		];
-
-		return (
-			<>
-				<Image
-					alt={ ariaLabel }
-					height={ style.image.height }
-					isSelected={ isSelected }
-					isUploadFailed={ isUploadFailed }
-					isUploadInProgress={ isUploadInProgress }
-					mediaPickerOptions={ mediaPickerOptions }
-					onSelectMediaUploadOption={ this.onSelectMedia }
-					resizeMode={ resizeMode }
-					url={ url }
-					retryMessage={ retryMessage }
-					retryIcon={ warning }
-				/>
-
-				{ ! isUploadInProgress && isSelected && (
-					<View style={ style.toolbarContainer }>
-						<View style={ style.toolbar }>
-							<View style={ style.moverButtonContainer }>
-								<Button
-									style={ buttonStyle }
-									icon={ isRTL ? arrowRight : arrowLeft }
-									iconSize={ ICON_SIZE_ARROW }
-									onClick={
-										isFirstItem ? undefined : onMoveBackward
-									}
-									accessibilityLabel={ __(
-										'Move Image Backward'
-									) }
-									aria-disabled={ isFirstItem }
-									disabled={ ! isSelected }
-								/>
-								<View style={ separatorStyle } />
-								<Button
-									style={ buttonStyle }
-									icon={ isRTL ? arrowLeft : arrowRight }
-									iconSize={ ICON_SIZE_ARROW }
-									onClick={
-										isLastItem ? undefined : onMoveForward
-									}
-									accessibilityLabel={ __(
-										'Move Image Forward'
-									) }
-									aria-disabled={ isLastItem }
-									disabled={ ! isSelected }
-								/>
-							</View>
-						</View>
-					</View>
-				) }
-
-				{ ! isUploadInProgress &&
-					( shouldShowCaptionEditable ||
-						shouldShowCaptionExpanded ) && (
-						<View style={ captionContainerStyle }>
-							<ScrollView
-								nestedScrollEnabled
-								keyboardShouldPersistTaps="handled"
-								bounces={ false }
-							>
-								<Caption
-									inlineToolbar
-									isSelected={ isSelected && captionSelected }
-									onChange={ this.onCaptionChange }
-									onFocus={ this.onSelectCaption }
-									placeholder={
-										isSelected ? __( 'Add caption' ) : null
-									}
-									placeholderTextColor={
-										captionPlaceholderStyle.color
-									}
-									style={ captionStyle }
-									value={ caption }
-								/>
-							</ScrollView>
-						</View>
-					) }
-			</>
-		);
-	}
-
-	render() {
-		const { id, onRemove, getStylesFromColorScheme, isSelected } =
-			this.props;
-
-		const containerStyle = getStylesFromColorScheme(
-			style.galleryImageContainer,
-			style.galleryImageContainerDark
-		);
-
-		return (
-			<TouchableWithoutFeedback
-				onPress={ this.onMediaPressed }
-				accessible={ ! isSelected } // We need only child views to be accessible after the selection.
-				accessibilityLabel={ this.accessibilityLabelImageContainer() } // if we don't set this explicitly it reads system provided accessibilityLabels of all child components and those include pretty technical words which don't make sense
-				accessibilityRole="imagebutton" // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity
-			>
-				<View style={ containerStyle }>
-					<MediaUploadProgress
-						mediaId={ id }
-						onUpdateMediaProgress={ this.updateMediaProgress }
-						onFinishMediaUploadWithSuccess={
-							this.finishMediaUploadWithSuccess
-						}
-						onFinishMediaUploadWithFailure={
-							this.finishMediaUploadWithFailure
-						}
-						onMediaUploadStateReset={ onRemove }
-						renderContent={ this.renderContent }
-					/>
-				</View>
-			</TouchableWithoutFeedback>
-		);
-	}
-
-	accessibilityLabelImageContainer() {
-		const { caption, 'aria-label': ariaLabel } = this.props;
-
-		return ! caption
-			? ariaLabel
-			: ariaLabel +
-					'. ' +
-					sprintf(
-						/* translators: accessibility text. %s: image caption. */
-						__( 'Image caption. %s' ),
-						caption
-					);
-	}
-}
-
-export default withPreferredColorScheme( GalleryImage );

package/src/gallery/v1/gallery-styles.native.scss

@@ -1,8 +0,0 @@
-.galleryTilesContainerSelected {
-	margin-bottom: 16px;
-}
-
-.fullWidth {
-	margin-left: $block-edge-to-content;
-	margin-right: $block-edge-to-content;
-}