Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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 );
<img tabindex="0" src="{" width="" data-width="{" data-url="{" data-link="{" id="" data-id="{" height="" data-height="{" aria-label="{" alt="{">
{ isBlobURL( origUrl ) && }
/* 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 && (
<div>
</div></figure>
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 = (
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 */
<>
<img alt="{" src="{"> this.onImageError( url ) }
/>
{ isBlobURL( url ) && }
/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
);
if ( ! isResizable || ! imageWidthWithinContainer ) {
return (
<>
{ getInspectorControls( imageWidth, imageHeight ) }
<div height="" style="{">
{ img }
</div>
);
}
const currentWidth = width || imageWidthWithinContainer;
const isExternalImage = ( id, url ) => url && ! id && ! isBlobURL( url );
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,
} );
}
}
}
const isTemporaryImage = (id, url) => ! id && isBlobURL(url);
return (
<figure>
{ isSelected && (
<div>
setAttributes( { url: '' } ) }
className="coblocks-gallery-item__button"
label={ __( 'Remove Image', 'coblocks' ) }
disabled={ ! isSelected }
/>
</div>
) }
{ dropZone }
{ isBlobURL( attributes.url ) && }
<img style="{" alt="{" src="{">
</figure>
);
}
value={ { id, src } }
mediaPreview={ mediaPreview }
dropZoneUIOnly={ ! isEditing && url }
/>
);
if ( isEditing || ! url ) {
return (
<>
{ 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 && isLargeViewport;
const imageSizeOptions = this.getImageSizeOptions();
const getInspectorControls = ( imageWidth, imageHeight ) => (
}
labels={ {
title: __( 'File' ),
instructions: __( 'Upload a file or pick one from your media library.' ),
} }
onSelect={ this.onSelectFile }
notices={ noticeUI }
onError={ this.onUploadError }
accept="*"
/>
);
}
const classes = classnames( className, {
'is-transient': isBlobURL( href ),
} );
return (
<>