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

Blocks: Create an Audio block on audio file drop #8055

merged 5 commits into from Aug 22, 2018


None yet
4 participants

Copons commented Jul 19, 2018


Fix #8020

Automatically create an Audio block when drag-and-dropping an audio file from the computer.

How has this been tested?

Environment: local Docker
Tested manually and via npm test.


jul-19-2018 14-48-57

If the upload fails, the block will display the MediaPlaceholder with an error notice containing the upload error.
I'm not entirely sure how this will be localized though.
Also: the idea is to immediately empty the src attribute of the audio file, in order to remove the blob: filename, but for some reasons it takes quite a while for setAttribute to update the placeholder.

screen shot 2018-07-19 at 16 51 17

Types of changes

New feature


  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.

@Copons Copons self-assigned this Jul 19, 2018

@Copons Copons requested a review from aduth Jul 19, 2018

@Soean Soean referenced this pull request Aug 13, 2018


Added audio block creation by dropping #8905

4 of 4 tasks complete

This comment has been minimized.

Show comment
Hide comment

Copons Aug 21, 2018


@jorgefilipecosta rebased and fixed a function name change (editorMediaUpload has been renamed into mediaUpload). Thanks for 👀 this!


Copons commented Aug 21, 2018

@jorgefilipecosta rebased and fixed a function name change (editorMediaUpload has been renamed into mediaUpload). Thanks for 👀 this!


I did new set of tests and things looked great. I was able to use undo without getting locked. To undo the audio upload we need to press undo two times (one for the file it self other for the block) but that is expected in our current implementation and a solution is being worked on.
I think we can merge this, thank you for your contribution @Copons!

@Copons Copons merged commit d5a4aca into master Aug 22, 2018

2 checks passed

codecov/project 50.86% (-0.06%) compared to ae3597f
continuous-integration/travis-ci/pr The Travis CI build passed

@Copons Copons deleted the fix/8020-drag-drop-audio-block branch Aug 22, 2018

@mtias mtias added this to the 3.7 milestone Aug 30, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment