-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Extract media upload logic part of @wordpress/editor to its own package #15521
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { addFilter } from '@wordpress/hooks'; | ||
import { MediaUpload } from '@wordpress/media-utils'; | ||
|
||
const replaceMediaUpload = () => MediaUpload; | ||
|
||
addFilter( | ||
'editor.MediaUpload', | ||
'core/edit-widgets/replace-media-upload', | ||
replaceMediaUpload | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
/** | ||
* Internal dependencies | ||
*/ | ||
import './components'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
package-lock=false |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
## 0.1.0 (2019-01-03) | ||
|
||
### New Features | ||
|
||
- Implemented first version of the package. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
# Media Utils | ||
|
||
The media utils package provides a set of artifacts to abstract media functionality that may be useful in situations where there is a need to deal with media uploads or with the media library, e.g., artifacts that extend or implement a block-editor. | ||
This package is meant to be used by the WordPress core. It may not work as expected outside WordPress usages. | ||
|
||
## Installation | ||
|
||
Install the module | ||
|
||
```bash | ||
npm install @wordpress/media-utils --save | ||
``` | ||
|
||
_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ | ||
|
||
## Usage | ||
|
||
### uploadMedia | ||
|
||
Media upload util is a function that allows the invokers to upload files to the WordPress media library. | ||
As an example, provided that `myFiles` is an array of file objects, `onFileChange` on onFileChange is a function that receives an array of objects containing the description of WordPress media items and `handleFileError` is a function that receives an object describing a possible error, the following code uploads a file to the WordPress media library: | ||
```js | ||
wp.mediaUtils.utils.uploadMedia( { | ||
filesList: myFiles, | ||
onFileChange: handleFileChange, | ||
onError: handleFileError | ||
} ); | ||
``` | ||
|
||
The following code uploads a file named foo.txt with foo as content to the media library and alerts its URL: | ||
```js | ||
wp.mediaUtils.utils.uploadMedia( { | ||
filesList: [ new File( ["foo"], "foo.txt", { type: "text/plain"} ) ], | ||
onFileChange: ( [ fileObj] ) => alert( fileObj.url ), | ||
onError: console.error, | ||
} ); | ||
``` | ||
|
||
Beware that first onFileChange is called with temporary blob URLs and then with the final URL's this allows to show the result in an optimistic UI as if the upload was already completed. E.g.: when uploading an image, one can show the image right away in the UI even before the upload is complete. | ||
|
||
|
||
### MediaUpload | ||
|
||
Media upload component provides a UI button that allows users to open the WordPress media library. It is normally used in conjunction with the filter `editor.MediaUpload`. | ||
The component follows the interface specified in https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/media-upload/README.md, and more details regarding its usage can be checked there. |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,35 @@ | ||||||
{ | ||||||
"name": "@wordpress/media-utils", | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. How about:
Suggested change
As of today, this package will contain only:
The description also highlights that the purpose of this package is strictly related to uploading functionalities. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hi @gziolo the mediaUpload function was renamed to uploadMedia as @noisysocks suggested. Do you think it still makes sense to rename the package or now that the function has a different name the current package name makes more sense? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice, this updated function name reads better somehow 😃 Regarding the name of the package, it’s your call. We don’t have other media utils at the moment and it’s hard to tell what future will bring. Ideally, we could call it media but I guess it isn’t possible because of backward compatibility considerations. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
It's because function names read nicer when they're a verb or begin with a verb 🙂 |
||||||
"version": "0.1.0", | ||||||
"description": "WordPress Media Upload Utils.", | ||||||
"author": "The WordPress Contributors", | ||||||
"license": "GPL-2.0-or-later", | ||||||
"keywords": [ | ||||||
"wordpress", | ||||||
"media", | ||||||
"upload", | ||||||
"media-upload" | ||||||
], | ||||||
"homepage": "https://github.com/WordPress/gutenberg/master/packages/media-utils/README.md", | ||||||
"repository": { | ||||||
"type": "git", | ||||||
"url": "https://github.com/WordPress/gutenberg.git", | ||||||
"directory": "packages/url" | ||||||
}, | ||||||
"bugs": { | ||||||
"url": "https://github.com/WordPress/gutenberg/issues" | ||||||
}, | ||||||
"main": "build/index.js", | ||||||
"module": "build-module/index.js", | ||||||
jorgefilipecosta marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
"dependencies": { | ||||||
"@babel/runtime": "^7.4.4", | ||||||
"@wordpress/api-fetch": "file:../api-fetch", | ||||||
"@wordpress/blob": "file:../blob", | ||||||
"@wordpress/element": "file:../element", | ||||||
"@wordpress/i18n": "file:../i18n", | ||||||
"lodash": "^4.17.11" | ||||||
}, | ||||||
"publishConfig": { | ||||||
"access": "public" | ||||||
} | ||||||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as MediaUpload } from './media-upload'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export * from './components'; | ||
export * from './utils'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { uploadMedia } from './upload-media'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is
useMemo
necessary here? Spreading thesettings
object to contain a new__experimentalMediaUpload
property doesn't seem very expensive.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, it is not very expensive computing the settings object itself. The reason I am using it is that without it each time WidgetArea renders settings would point to a different reference that would trigger a rerender BlockEditorProvider with new settings which then would need to update the block editor store with new settings and probably cause other rerenders.