Skip to content
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

MediaPlaceholder: add onFilesPreUpload property #23003

Merged
merged 2 commits into from
Jun 10, 2020

Conversation

retrofox
Copy link
Contributor

@retrofox retrofox commented Jun 8, 2020

Description

The editor.MediaPlaceholder filter is great! and it allows us to customize the component easily. The only thing that I think it's missing is the ability to know what are the files that are being uploaded. For this, I've created this PR.
In short, you can know which files are going to be uploaded before to start the process to the server-side binding a function to the onFilesPreUpload property.

const customMediaPlaceholder = createHigherOrderComponent(
	CoreMediaPlaceholder => props => {
		const { children } = props;

		return (
			<CoreMediaPlaceholder
				{ ...props }
				onFilesPreUpload = { ( files ) => console.log( { files } ) }
			>
				{ children }
			</CoreMediaPlaceholder>
		);
	},
	'CustomMediaPlaceholder'
);

addFilter(
	'editor.MediaPlaceholder',
	'me/custom-media-placeholder,
	customMediaPlaceholder
);

How has this been tested?

It's a small change and doesn't modify the API of the component. Testing uploading a new file for a cover block could be a nice way to test that it doesn't break the functionality of the MediaPlaceholer, either uploading the file or dropping it.

Additionally, the example above is valid for testing purposes. Bind the function to the hook and confirm that the files list appears in the dev console in your dev client. In Chrome, for instance:

image

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • I've included developer documentation if appropriate.

@retrofox retrofox added [Feature] Media Anything that impacts the experience of managing media [Type] Enhancement A suggestion for improvement. labels Jun 8, 2020
@github-actions
Copy link

github-actions bot commented Jun 8, 2020

Size Change: +929 B (0%)

Total Size: 1.13 MB

Filename Size Change
build/a11y/index.js 1.14 kB -1 B
build/block-editor/index.js 106 kB -248 B (0%)
build/block-editor/style-rtl.css 11.8 kB +374 B (3%)
build/block-editor/style.css 11.8 kB +369 B (3%)
build/block-library/editor-rtl.css 7.88 kB +14 B (0%)
build/block-library/editor.css 7.89 kB +13 B (0%)
build/block-library/index.js 127 kB +365 B (0%)
build/block-library/style-rtl.css 7.72 kB +2 B (0%)
build/block-library/style.css 7.72 kB +7 B (0%)
build/block-serialization-default-parser/index.js 1.88 kB +1 B
build/blocks/index.js 48.1 kB +1 B
build/components/index.js 194 kB +22 B (0%)
build/components/style-rtl.css 19.5 kB +9 B (0%)
build/components/style.css 19.5 kB +7 B (0%)
build/core-data/index.js 11.4 kB -3 B (0%)
build/data-controls/index.js 1.29 kB -2 B (0%)
build/data/index.js 8.45 kB -2 B (0%)
build/date/index.js 5.47 kB -3 B (0%)
build/deprecated/index.js 772 B +1 B
build/dom/index.js 3.17 kB -1 B
build/edit-site/index.js 15.5 kB +1 B
build/edit-widgets/index.js 9.34 kB +1 B
build/is-shallow-equal/index.js 710 B -1 B
build/keyboard-shortcuts/index.js 2.52 kB +2 B (0%)
build/media-utils/index.js 5.3 kB -1 B
build/plugins/index.js 2.56 kB -1 B
build/token-list/index.js 1.28 kB +1 B
build/url/index.js 4.06 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.77 kB 0 B
build/block-directory/style-rtl.css 892 B 0 B
build/block-directory/style.css 892 B 0 B
build/block-library/theme-rtl.css 684 B 0 B
build/block-library/theme.css 686 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/compose/index.js 9.31 kB 0 B
build/dom-ready/index.js 569 B 0 B
build/edit-navigation/index.js 8.25 kB 0 B
build/edit-navigation/style-rtl.css 918 B 0 B
build/edit-navigation/style.css 919 B 0 B
build/edit-post/index.js 303 kB 0 B
build/edit-post/style-rtl.css 5.6 kB 0 B
build/edit-post/style.css 5.6 kB 0 B
build/edit-site/style-rtl.css 2.96 kB 0 B
build/edit-site/style.css 2.96 kB 0 B
build/edit-widgets/style-rtl.css 2.4 kB 0 B
build/edit-widgets/style.css 2.4 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/index.js 44.8 kB 0 B
build/editor/style-rtl.css 4.26 kB 0 B
build/editor/style.css 4.27 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.41 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@retrofox retrofox changed the title MediaPlacerholder: add onFilesUpload property MediaPlaceholder: add onFilesPreUpload property Jun 9, 2020
Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and it breaks nothing!

@draganescu draganescu merged commit 1337bb3 into master Jun 10, 2020
@draganescu draganescu deleted the update/media-placeholder-onfilesupload branch June 10, 2020 12:34
@github-actions github-actions bot added this to the Gutenberg 8.4 milestone Jun 10, 2020
This was referenced Jun 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Media Anything that impacts the experience of managing media [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants