@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 8.3 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/utils/poster-image.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tMediaUpload,\n\tMediaUploadCheck,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { store as noticesStore } from '@wordpress/notices';\nimport {\n\tButton,\n\tBaseControl,\n\tDropZone,\n\tSpinner,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { isBlobURL } from '@wordpress/blob';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef, useState } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\nconst POSTER_IMAGE_ALLOWED_MEDIA_TYPES = [ 'image' ];\n\nfunction PosterImage( { poster, onChange } ) {\n\tconst posterButtonRef = useRef();\n\tconst [ isLoading, setIsLoading ] = useState( false );\n\tconst descriptionId = useInstanceId(\n\t\tPosterImage,\n\t\t'block-library-poster-image-description'\n\t);\n\n\tconst { getSettings } = useSelect( blockEditorStore );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\n\tconst onDropFiles = ( filesList ) => {\n\t\tgetSettings().mediaUpload( {\n\t\t\tallowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES,\n\t\t\tfilesList,\n\t\t\tonFileChange: ( [ image ] ) => {\n\t\t\t\tif ( isBlobURL( image?.url ) ) {\n\t\t\t\t\tsetIsLoading( true );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( image ) {\n\t\t\t\t\tonChange( image );\n\t\t\t\t}\n\t\t\t\tsetIsLoading( false );\n\t\t\t},\n\t\t\tonError: ( message ) => {\n\t\t\t\tcreateErrorNotice( message, {\n\t\t\t\t\tid: 'poster-image-upload-notice',\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t} );\n\t\t\t\tsetIsLoading( false );\n\t\t\t},\n\t\t\tmultiple: false,\n\t\t} );\n\t};\n\n\tconst getPosterButtonContent = () => {\n\t\tif ( ! poster && isLoading ) {\n\t\t\treturn <Spinner />;\n\t\t}\n\n\t\treturn ! poster ? __( 'Set poster image' ) : __( 'Replace' );\n\t};\n\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<ToolsPanelItem\n\t\t\t\tlabel={ __( 'Poster image' ) }\n\t\t\t\tisShownByDefault\n\t\t\t\thasValue={ () => !! poster }\n\t\t\t\tonDeselect={ () => onChange( undefined ) }\n\t\t\t>\n\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t{ __( 'Poster image' ) }\n\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t<MediaUpload\n\t\t\t\t\ttitle={ __( 'Select poster image' ) }\n\t\t\t\t\tonSelect={ onChange }\n\t\t\t\t\tallowedTypes={ POSTER_IMAGE_ALLOWED_MEDIA_TYPES }\n\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t<div className=\"block-library-poster-image__container\">\n\t\t\t\t\t\t\t{ poster && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t'Edit or replace the poster image.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tclassName=\"block-library-poster-image__preview\"\n\t\t\t\t\t\t\t\t\tdisabled={ isLoading }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tsrc={ poster }\n\t\t\t\t\t\t\t\t\t\talt={ __( 'Poster image preview' ) }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-poster-image__preview-image\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ isLoading && <Spinner /> }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'block-library-poster-image__actions',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'block-library-poster-image__actions-select':\n\t\t\t\t\t\t\t\t\t\t\t! poster,\n\t\t\t\t\t\t\t\t\t}\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\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\t\t\tref={ posterButtonRef }\n\t\t\t\t\t\t\t\t\tclassName=\"block-library-poster-image__action\"\n\t\t\t\t\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t\t\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t! poster ? 'secondary' : undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdisabled={ isLoading }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ getPosterButtonContent() }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t<p id={ descriptionId } hidden>\n\t\t\t\t\t\t\t\t\t{ poster\n\t\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %s: poster image URL. */\n\t\t\t\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'The current poster image url is %s.'\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\tposter\n\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t'There is no poster image currently selected.'\n\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t{ !! poster && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChange( undefined );\n\n\t\t\t\t\t\t\t\t\t\t\t// Move focus back to the Media Upload button.\n\t\t\t\t\t\t\t\t\t\t\tposterButtonRef.current.focus();\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-poster-image__action\"\n\t\t\t\t\t\t\t\t\t\tdisabled={ isLoading }\n\t\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Remove' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t<DropZone onFilesDrop={ onDropFiles } />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t</MediaUploadCheck>\n\t);\n}\n\nexport default PosterImage;\n"],
"mappings": "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",
"names": []
}