inspector-controls
2 years ago
AlignmentControls.js
4 years ago
AnchorTag.js
4 years ago
BlockControls.js
2 years ago
ComponentCSS.js
1 year ago
Image.js
4 years ago
ImageContentRenderer.js
3 years ago
ImagePlaceholder.js
4 years ago
ImagePlaceholder.js
73 lines
| 1 | import { Path, SVG } from '@wordpress/primitives'; |
| 2 | import { MediaPlaceholder } from '@wordpress/block-editor'; |
| 3 | import { __ } from '@wordpress/i18n'; |
| 4 | import getIcon from '../../../utils/get-icon'; |
| 5 | |
| 6 | export default function ImagePlaceholder( props ) { |
| 7 | const { |
| 8 | onSelectImage, |
| 9 | onSelectURL, |
| 10 | onUploadError, |
| 11 | attributes, |
| 12 | canUploadImage, |
| 13 | } = props; |
| 14 | |
| 15 | const { |
| 16 | width, |
| 17 | height, |
| 18 | useDynamicData, |
| 19 | uniqueId, |
| 20 | } = attributes; |
| 21 | |
| 22 | const placeholderIllustration = ( |
| 23 | <SVG |
| 24 | className="components-placeholder__illustration" |
| 25 | fill="none" |
| 26 | xmlns="http://www.w3.org/2000/svg" |
| 27 | viewBox="0 0 60 60" |
| 28 | preserveAspectRatio="none" |
| 29 | > |
| 30 | <Path vectorEffect="non-scaling-stroke" d="M60 60 0 0" /> |
| 31 | </SVG> |
| 32 | ); |
| 33 | |
| 34 | let placeholderImage = generateBlocksInfo.imagePlaceholders.standard; |
| 35 | |
| 36 | if ( width && width < 500 && width === height ) { |
| 37 | placeholderImage = generateBlocksInfo.imagePlaceholders.square; |
| 38 | } |
| 39 | |
| 40 | let placeholder = <MediaPlaceholder |
| 41 | labels={ { |
| 42 | title: __( 'Image', 'generateblocks' ), |
| 43 | instructions: __( 'Choose an image from your media library or add one with a URL.', 'generateblocks' ), |
| 44 | } } |
| 45 | icon={ getIcon( 'image' ) } |
| 46 | onSelect={ onSelectImage } |
| 47 | onSelectURL={ ! useDynamicData ? onSelectURL : null } |
| 48 | onError={ onUploadError } |
| 49 | accept="image/*" |
| 50 | allowedTypes={ [ 'image' ] } |
| 51 | />; |
| 52 | |
| 53 | if ( ! canUploadImage ) { |
| 54 | placeholder = <> |
| 55 | <img |
| 56 | className={ 'gb-image-' + uniqueId } |
| 57 | src={ placeholderImage } |
| 58 | alt="" |
| 59 | width={ width ? width : 1000 } |
| 60 | height={ height ? height : 650 } |
| 61 | /> |
| 62 | { placeholderIllustration } |
| 63 | </>; |
| 64 | } |
| 65 | |
| 66 | return <div |
| 67 | className="gblocks-image__placeholder" |
| 68 | style={ { width: ! canUploadImage && width ? width : null } } |
| 69 | > |
| 70 | { placeholder } |
| 71 | </div>; |
| 72 | } |
| 73 |