@wordpress/block-library 9.48.0 → 9.48.1

package/src/media-text/edit.native.js

@@ -1,417 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	BlockControls,
-	BlockVerticalAlignmentToolbar,
-	InnerBlocks,
-	InspectorControls,
-	withColors,
-	MEDIA_TYPE_IMAGE,
-	MEDIA_TYPE_VIDEO,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { Component } from '@wordpress/element';
-import {
-	Button,
-	ToolbarGroup,
-	PanelBody,
-	ToggleControl,
-} from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { pullLeft, pullRight, replace } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { WIDTH_CONSTRAINT_PERCENTAGE } from './constants';
-import MediaContainer from './media-container';
-import styles from './style.scss';
-
-const TEMPLATE = [ [ 'core/paragraph' ] ];
-// this limits the resize to a safe zone to avoid making broken layouts
-const BREAKPOINTS = {
-	mobile: 480,
-};
-const applyWidthConstraints = ( width ) =>
-	Math.max(
-		WIDTH_CONSTRAINT_PERCENTAGE,
-		Math.min( width, 100 - WIDTH_CONSTRAINT_PERCENTAGE )
-	);
-
-class MediaTextEdit extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onSelectMedia = this.onSelectMedia.bind( this );
-		this.onMediaUpdate = this.onMediaUpdate.bind( this );
-		this.onMediaThumbnailUpdate = this.onMediaThumbnailUpdate.bind( this );
-		this.onWidthChange = this.onWidthChange.bind( this );
-		this.commitWidthChange = this.commitWidthChange.bind( this );
-		this.onLayoutChange = this.onLayoutChange.bind( this );
-		this.onMediaSelected = this.onMediaSelected.bind( this );
-		this.onReplaceMedia = this.onReplaceMedia.bind( this );
-		this.onSetOpenPickerRef = this.onSetOpenPickerRef.bind( this );
-		this.onSetImageFill = this.onSetImageFill.bind( this );
-
-		this.state = {
-			mediaWidth: null,
-			containerWidth: 0,
-			isMediaSelected: false,
-		};
-	}
-
-	static getDerivedStateFromProps( props, state ) {
-		return {
-			isMediaSelected:
-				state.isMediaSelected &&
-				props.isSelected &&
-				! props.isAncestorSelected,
-		};
-	}
-
-	onSelectMedia( media ) {
-		const { setAttributes } = this.props;
-
-		let mediaType;
-		let src;
-		// For media selections originated from a file upload.
-		if ( media.media_type ) {
-			if ( media.media_type === 'image' ) {
-				mediaType = 'image';
-			} else {
-				// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
-				// video contain the media type of 'file' in the object returned from the rest api.
-				mediaType = 'video';
-			}
-		} else {
-			// For media selections originated from existing files in the media library.
-			mediaType = media.type;
-		}
-
-		if ( mediaType === 'image' && media.sizes ) {
-			// Try the "large" size URL, falling back to the "full" size URL below.
-			src =
-				media.sizes.large?.url ||
-				media?.media_details?.sizes?.large?.source_url;
-		}
-
-		setAttributes( {
-			mediaAlt: media.alt,
-			mediaId: media.id,
-			mediaType,
-			mediaUrl: src || media.url,
-			imageFill: undefined,
-			focalPoint: undefined,
-		} );
-	}
-
-	onMediaUpdate( media ) {
-		const { setAttributes } = this.props;
-
-		setAttributes( {
-			mediaId: media.id,
-			mediaUrl: media.url,
-		} );
-	}
-
-	onMediaThumbnailUpdate( mediaUrl ) {
-		const { setAttributes } = this.props;
-
-		setAttributes( {
-			mediaUrl,
-		} );
-	}
-
-	onWidthChange( width ) {
-		this.setState( {
-			mediaWidth: applyWidthConstraints( width ),
-		} );
-	}
-
-	commitWidthChange( width ) {
-		const { setAttributes } = this.props;
-
-		setAttributes( {
-			mediaWidth: applyWidthConstraints( width ),
-		} );
-		this.setState( {
-			mediaWidth: null,
-		} );
-	}
-
-	onLayoutChange( { nativeEvent } ) {
-		const { width } = nativeEvent.layout;
-		const { containerWidth } = this.state;
-
-		if ( containerWidth === width ) {
-			return null;
-		}
-
-		this.setState( {
-			containerWidth: width,
-		} );
-	}
-
-	onMediaSelected() {
-		this.setState( { isMediaSelected: true } );
-	}
-
-	onReplaceMedia() {
-		if ( this.openPickerRef ) {
-			this.openPickerRef();
-		}
-	}
-
-	onSetOpenPickerRef( openPicker ) {
-		this.openPickerRef = openPicker;
-	}
-
-	onSetImageFill() {
-		const { attributes, setAttributes } = this.props;
-		const { imageFill } = attributes;
-
-		setAttributes( {
-			imageFill: ! imageFill,
-		} );
-	}
-
-	getControls() {
-		const { attributes } = this.props;
-		const { imageFill } = attributes;
-
-		return (
-			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						label={ __( 'Crop image to fill' ) }
-						checked={ imageFill }
-						onChange={ this.onSetImageFill }
-					/>
-				</PanelBody>
-			</InspectorControls>
-		);
-	}
-	renderMediaArea( shouldStack ) {
-		const { isMediaSelected, containerWidth } = this.state;
-		const { attributes, isSelected } = this.props;
-		const {
-			mediaAlt,
-			mediaId,
-			mediaPosition,
-			mediaType,
-			mediaUrl,
-			mediaWidth,
-			imageFill,
-			focalPoint,
-			verticalAlignment,
-		} = attributes;
-		const mediaAreaWidth =
-			mediaWidth && ! shouldStack
-				? ( containerWidth * mediaWidth ) / 100 -
-				  styles.mediaAreaPadding.width
-				: containerWidth;
-		const alignmentStyles =
-			styles[
-				`is-vertically-aligned-${ verticalAlignment || 'center' }`
-			];
-
-		return (
-			<MediaContainer
-				commitWidthChange={ this.commitWidthChange }
-				isMediaSelected={ isMediaSelected }
-				onFocus={ this.props.onFocus }
-				onMediaSelected={ this.onMediaSelected }
-				onMediaUpdate={ this.onMediaUpdate }
-				onMediaThumbnailUpdate={ this.onMediaThumbnailUpdate }
-				onSelectMedia={ this.onSelectMedia }
-				onSetOpenPickerRef={ this.onSetOpenPickerRef }
-				onWidthChange={ this.onWidthChange }
-				mediaWidth={ mediaAreaWidth }
-				{ ...{
-					mediaAlt,
-					mediaId,
-					mediaType,
-					mediaUrl,
-					mediaPosition,
-					imageFill,
-					focalPoint,
-					isSelected,
-					alignmentStyles,
-					shouldStack,
-				} }
-			/>
-		);
-	}
-
-	render() {
-		const {
-			attributes,
-			backgroundColor,
-			setAttributes,
-			isSelected,
-			isRTL,
-			style,
-			blockWidth,
-		} = this.props;
-		const {
-			isStackedOnMobile,
-			imageFill,
-			mediaPosition,
-			mediaWidth,
-			mediaType,
-			verticalAlignment,
-		} = attributes;
-		const { containerWidth, isMediaSelected } = this.state;
-
-		const isMobile = containerWidth < BREAKPOINTS.mobile;
-		const shouldStack = isStackedOnMobile && isMobile;
-		const temporaryMediaWidth = shouldStack
-			? 100
-			: this.state.mediaWidth || mediaWidth;
-		const widthString = `${ temporaryMediaWidth }%`;
-		const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;
-		const innerBlockWidthString = `${ innerBlockWidth }%`;
-		const hasMedia =
-			mediaType === MEDIA_TYPE_IMAGE || mediaType === MEDIA_TYPE_VIDEO;
-
-		const innerBlockContainerStyle = [
-			{ width: innerBlockWidthString },
-			! shouldStack
-				? styles.innerBlock
-				: {
-						...( mediaPosition === 'left'
-							? styles.innerBlockStackMediaLeft
-							: styles.innerBlockStackMediaRight ),
-				  },
-			( style?.backgroundColor || backgroundColor.color ) &&
-				styles.innerBlockPaddings,
-		];
-
-		const containerStyles = {
-			...styles[ 'wp-block-media-text' ],
-			...styles[
-				`is-vertically-aligned-${ verticalAlignment || 'center' }`
-			],
-			...( mediaPosition === 'right'
-				? styles[ 'has-media-on-the-right' ]
-				: {} ),
-			...( shouldStack && styles[ 'is-stacked-on-mobile' ] ),
-			...( shouldStack && mediaPosition === 'right'
-				? styles[ 'is-stacked-on-mobile.has-media-on-the-right' ]
-				: {} ),
-			...( isSelected && styles[ 'is-selected' ] ),
-			backgroundColor: style?.backgroundColor || backgroundColor.color,
-			paddingBottom: 0,
-		};
-
-		const mediaContainerStyle = [
-			{ flex: 1 },
-			shouldStack
-				? {
-						...( mediaPosition === 'left' &&
-							styles.mediaStackLeft ),
-						...( mediaPosition === 'right' &&
-							styles.mediaStackRight ),
-				  }
-				: {
-						...( mediaPosition === 'left' && styles.mediaLeft ),
-						...( mediaPosition === 'right' && styles.mediaRight ),
-				  },
-		];
-
-		const toolbarControls = [
-			{
-				icon: isRTL ? pullRight : pullLeft,
-				title: __( 'Show media on left' ),
-				isActive: mediaPosition === 'left',
-				onClick: () => setAttributes( { mediaPosition: 'left' } ),
-			},
-			{
-				icon: isRTL ? pullLeft : pullRight,
-				title: __( 'Show media on right' ),
-				isActive: mediaPosition === 'right',
-				onClick: () => setAttributes( { mediaPosition: 'right' } ),
-			},
-		];
-
-		const onVerticalAlignmentChange = ( alignment ) => {
-			setAttributes( { verticalAlignment: alignment } );
-		};
-
-		return (
-			<>
-				{ mediaType === MEDIA_TYPE_IMAGE && this.getControls() }
-				<BlockControls>
-					{ hasMedia && (
-						<ToolbarGroup>
-							<Button
-								label={ __( 'Edit media' ) }
-								icon={ replace }
-								onClick={ this.onReplaceMedia }
-							/>
-						</ToolbarGroup>
-					) }
-					{ ( ! isMediaSelected ||
-						mediaType === MEDIA_TYPE_VIDEO ) && (
-						<>
-							<ToolbarGroup controls={ toolbarControls } />
-							<BlockVerticalAlignmentToolbar
-								onChange={ onVerticalAlignmentChange }
-								value={ verticalAlignment }
-							/>
-						</>
-					) }
-				</BlockControls>
-				<View
-					style={ containerStyles }
-					onLayout={ this.onLayoutChange }
-				>
-					<View
-						style={ [
-							( shouldStack || ! imageFill ) && {
-								width: widthString,
-							},
-							mediaContainerStyle,
-						] }
-					>
-						{ this.renderMediaArea( shouldStack ) }
-					</View>
-					<View style={ innerBlockContainerStyle }>
-						<InnerBlocks
-							template={ TEMPLATE }
-							blockWidth={ blockWidth }
-						/>
-					</View>
-				</View>
-			</>
-		);
-	}
-}
-
-export default compose(
-	withColors( 'backgroundColor' ),
-	withSelect( ( select, { clientId } ) => {
-		const { getSelectedBlockClientId, getBlockParents, getSettings } =
-			select( blockEditorStore );
-
-		const parents = getBlockParents( clientId, true );
-
-		const selectedBlockClientId = getSelectedBlockClientId();
-		const isAncestorSelected =
-			selectedBlockClientId && parents.includes( selectedBlockClientId );
-
-		return {
-			isSelected: selectedBlockClientId === clientId,
-			isAncestorSelected,
-			isRTL: getSettings().isRTL,
-		};
-	} )
-)( MediaTextEdit );

package/src/media-text/icon-retry.native.js

@@ -1,11 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-
-export default (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
-		<Path d="M0 0h24v24H0z" fill="none" />
-	</SVG>
-);