UNPKG

@wordpress/block-editor

Version:
8 lines (7 loc) 10.3 kB
{ "version": 3, "sources": ["../../../../src/hooks/block-fields/media/index.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalGrid as Grid,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\taudio as audioIcon,\n\timage as imageIcon,\n\tmedia as mediaIcon,\n\tvideo as videoIcon,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport MediaReplaceFlow from '../../../components/media-replace-flow';\nimport MediaUploadCheck from '../../../components/media-upload/check';\nimport { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';\nimport { getMediaSelectKey } from '../../../store/private-keys';\nimport { store as blockEditorStore } from '../../../store';\n\nfunction MediaThumbnail( { data, field, attachment, config } ) {\n\tconst { allowedTypes = [], multiple = false } = config || {};\n\n\tif ( multiple ) {\n\t\treturn 'todo multiple';\n\t}\n\n\tif ( attachment?.media_type === 'image' || attachment?.poster ) {\n\t\treturn (\n\t\t\t<div className=\"block-editor-content-only-controls__media-thumbnail\">\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={ 24 }\n\t\t\t\t\theight={ 24 }\n\t\t\t\t\tsrc={\n\t\t\t\t\t\tattachment.media_type === 'image'\n\t\t\t\t\t\t\t? attachment.source_url\n\t\t\t\t\t\t\t: attachment.poster\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif ( allowedTypes.length === 1 ) {\n\t\tconst value = field.getValue( { item: data } );\n\t\tconst url = value?.url;\n\n\t\tif ( allowedTypes[ 0 ] === 'image' && url ) {\n\t\t\treturn (\n\t\t\t\t<div className=\"block-editor-content-only-controls__media-thumbnail\">\n\t\t\t\t\t<img alt=\"\" width={ 24 } height={ 24 } src={ url } />\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\tlet icon;\n\t\tif ( allowedTypes[ 0 ] === 'image' ) {\n\t\t\ticon = imageIcon;\n\t\t} else if ( allowedTypes[ 0 ] === 'video' ) {\n\t\t\ticon = videoIcon;\n\t\t} else if ( allowedTypes[ 0 ] === 'audio' ) {\n\t\t\ticon = audioIcon;\n\t\t} else {\n\t\t\ticon = mediaIcon;\n\t\t}\n\n\t\tif ( icon ) {\n\t\t\treturn <Icon icon={ icon } size={ 24 } />;\n\t\t}\n\t}\n\n\treturn <Icon icon={ mediaIcon } size={ 24 } />;\n}\n\nexport default function Media( { data, field, onChange, config = {} } ) {\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst value = field.getValue( { item: data } );\n\tconst {\n\t\tallowedTypes = [],\n\t\tmultiple = false,\n\t\tuseFeaturedImage = false,\n\t} = config;\n\n\tconst id = value?.id;\n\tconst url = value?.url;\n\n\tconst attachment = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! id ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\tconst getMedia = settings[ getMediaSelectKey ];\n\n\t\t\tif ( ! getMedia ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\treturn getMedia( select, id );\n\t\t},\n\t\t[ id ]\n\t);\n\n\t// TODO - pluralize when multiple.\n\tlet chooseItemLabel;\n\tif ( allowedTypes.length === 1 ) {\n\t\tconst allowedType = allowedTypes[ 0 ];\n\t\tif ( allowedType === 'image' ) {\n\t\t\tchooseItemLabel = __( 'Choose an image\u2026' );\n\t\t} else if ( allowedType === 'video' ) {\n\t\t\tchooseItemLabel = __( 'Choose a video\u2026' );\n\t\t} else if ( allowedType === 'application' ) {\n\t\t\tchooseItemLabel = __( 'Choose a file\u2026' );\n\t\t} else {\n\t\t\tchooseItemLabel = __( 'Choose a media item\u2026' );\n\t\t}\n\t} else {\n\t\tchooseItemLabel = __( 'Choose a media item\u2026' );\n\t}\n\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<MediaReplaceFlow\n\t\t\t\tclassName=\"block-editor-content-only-controls__media-replace-flow\"\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tmediaId={ id }\n\t\t\t\tmediaURL={ url }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\tonReset={ () => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\tvalue: {},\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\t{ ...( useFeaturedImage && {\n\t\t\t\t\tuseFeaturedImage: !! value?.featuredImage,\n\t\t\t\t\tonToggleFeaturedImage: () => {\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\t\tvalue: {\n\t\t\t\t\t\t\t\t\tfeaturedImage: ! value?.featuredImage,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t\tonSelect={ ( selectedMedia ) => {\n\t\t\t\t\tif ( selectedMedia.id && selectedMedia.url ) {\n\t\t\t\t\t\tconst newValue = {\n\t\t\t\t\t\t\t...selectedMedia,\n\t\t\t\t\t\t\tmediaType: selectedMedia.media_type,\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\t// Turn off featured image when manually selecting media\n\t\t\t\t\t\tif ( useFeaturedImage ) {\n\t\t\t\t\t\t\tnewValue.featuredImage = false;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\t\tvalue: newValue,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\trenderToggle={ ( buttonProps ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media\"\n\t\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\t\t\ttemplateColumns=\"24px 1fr\"\n\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-row\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ url && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<MediaThumbnail\n\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\t\tconfig={ config }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__media-title\">\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t// TODO - truncate long titles or url smartly (e.g. show filename).\n\t\t\t\t\t\t\t\t\t\t\tattachment?.title?.raw &&\n\t\t\t\t\t\t\t\t\t\t\tattachment?.title?.raw !== ''\n\t\t\t\t\t\t\t\t\t\t\t\t? attachment?.title?.raw\n\t\t\t\t\t\t\t\t\t\t\t\t: url\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ ! url && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-placeholder\"\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__media-title\">\n\t\t\t\t\t\t\t\t\t\t{ chooseItemLabel }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</MediaUploadCheck>\n\t);\n}\n"], "mappings": "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", "names": ["imageIcon", "videoIcon", "audioIcon", "mediaIcon", "blockEditorStore", "MediaUploadCheck", "MediaReplaceFlow", "Grid"] }