How to use the @wordpress/blob.isBlobURL function in @wordpress/blob

To help you get started, we’ve selected a few @wordpress/blob examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Automattic / jetpack / extensions / blocks / tiled-gallery / deprecated / v1 / layout / index.js View on Github external
photonize( { height, width, url } ) {
		if ( ! url ) {
			return;
		}

		// Do not Photonize images that are still uploading or from localhost
		if ( isBlobURL( url ) || /^https?:\/\/localhost/.test( url ) ) {
			return url;
		}

		// Drop query args, photon URLs can't handle them
		// This should be the "raw" url, we'll add dimensions later
		const cleanUrl = url.split( '?', 1 )[ 0 ];

		const photonImplementation = isWpcomFilesUrl( url ) ? photonWpcomImage : photon;

		const { layoutStyle } = this.props;

		if ( isSquareishLayout( layoutStyle ) && width && height ) {
			const size = Math.min( PHOTON_MAX_RESIZE, width, height );
			return photonImplementation( cleanUrl, { resize: `${ size },${ size }` } );
		}
		return photonImplementation( cleanUrl );
github Automattic / wp-calypso / client / gutenberg / extensions / tiled-gallery / gallery-image / edit.js View on Github external
<img tabindex="0" src="{" width="" data-width="{" data-url="{" data-link="{" id="" data-id="{" height="" data-height="{" aria-label="{" alt="{">
				{ isBlobURL( origUrl ) &amp;&amp;  }
			
			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
		);

		// Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup
		return (
			<figure>
				{ isSelected &amp;&amp; (
					<div>
						</div></figure>
github Automattic / wp-calypso / packages / jetpack-blocks / src / blocks / tiled-gallery / gallery-image / save.js View on Github external
export default function GalleryImageSave( props ) {
	const {
		alt,
		// caption,
		imageFilter,
		height,
		id,
		link,
		linkTo,
		origUrl,
		url,
		width,
	} = props;

	if ( isBlobURL( origUrl ) ) {
		return null;
	}

	let href;

	switch ( linkTo ) {
		case 'media':
			href = url;
			break;
		case 'attachment':
			href = link;
			break;
	}

	const img = (
github WordPress / gutenberg / packages / block-library / src / image / edit.js View on Github external
defaultedAlt = __( 'This image has an empty alt attribute' );
							}

							const img = (
								// Disable reason: Image itself is not meant to be interactive, but
								// should direct focus to block.
								/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
								&lt;&gt;
									<img alt="{" src="{"> this.onImageError( url ) }
									/&gt;
									{ isBlobURL( url ) &amp;&amp;  }
								
								/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
							);

							if ( ! isResizable || ! imageWidthWithinContainer ) {
								return (
									&lt;&gt;
										{ getInspectorControls( imageWidth, imageHeight ) }
										<div height="" style="{">
											{ img }
										</div>
									
								);
							}

							const currentWidth = width || imageWidthWithinContainer;
github WordPress / gutenberg / packages / block-library / src / image / edit.js View on Github external
const isExternalImage = ( id, url ) => url && ! id && ! isBlobURL( url );
github WordPress / gutenberg / packages / block-library / src / video / edit.js View on Github external
componentDidMount() {
		const {
			attributes,
			mediaUpload,
			noticeOperations,
			setAttributes,
		} = this.props;
		const { id, src = '' } = attributes;
		if ( ! id && isBlobURL( src ) ) {
			const file = getBlobByURL( src );
			if ( file ) {
				mediaUpload( {
					filesList: [ file ],
					onFileChange: ( [ { url } ] ) => {
						setAttributes( { src: url } );
					},
					onError: ( message ) => {
						this.setState( { editing: true } );
						noticeOperations.createErrorNotice( message );
					},
					allowedTypes: ALLOWED_MEDIA_TYPES,
				} );
			}
		}
	}
github godaddy-wordpress / coblocks / src / blocks / food-and-drinks / food-item / edit.js View on Github external
return (
			
				<figure>
					{ isSelected &amp;&amp; (
						<div>
							 setAttributes( { url: '' } ) }
								className="coblocks-gallery-item__button"
								label={ __( 'Remove Image', 'coblocks' ) }
								disabled={ ! isSelected }
							/&gt;
						</div>
					) }
					{ dropZone }
					{ isBlobURL( attributes.url ) &amp;&amp;  }
					<img style="{" alt="{" src="{">
				</figure>
			
		);
	}
github WordPress / gutenberg / packages / block-library / src / image / edit.js View on Github external
value={ { id, src } }
				mediaPreview={ mediaPreview }
				dropZoneUIOnly={ ! isEditing &amp;&amp; url }
			/&gt;
		);
		if ( isEditing || ! url ) {
			return (
				&lt;&gt;
					{ controls }
					{ mediaPlaceholder }
				
			);
		}

		const classes = classnames( className, {
			'is-transient': isBlobURL( url ),
			'is-resized': !! width || !! height,
			'is-focused': isSelected,
			[ `size-${ sizeSlug }` ]: sizeSlug,
		} );

		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1 &amp;&amp; isLargeViewport;

		const imageSizeOptions = this.getImageSizeOptions();

		const getInspectorControls = ( imageWidth, imageHeight ) =&gt; (
github WordPress / gutenberg / packages / block-library / src / file / edit.js View on Github external
}
					labels={ {
						title: __( 'File' ),
						instructions: __( 'Upload a file or pick one from your media library.' ),
					} }
					onSelect={ this.onSelectFile }
					notices={ noticeUI }
					onError={ this.onUploadError }
					accept="*"
				/&gt;
			);
		}

		const classes = classnames( className, {
			'is-transient': isBlobURL( href ),
		} );

		return (
			&lt;&gt;

@wordpress/blob

Blob utilities for WordPress.

GPL-2.0-or-later
Latest version published 3 days ago

Package Health Score

95 / 100
Full package analysis