Gutenberg is the new WordPress WYSIWYG editor. Created by the same team that developed WordPress, it guarantees not only a high-level of integration in the WordPress backend but also a very fast and light interaction, especially when compared to other page builders that prove to be extremely cumbersome in terms of memory and speed. A page can be designed using blocks, elements that can be selected from a list of factory blocks. WavePlayer adds its own block to the factory list so that you can add it to a page in the most effortless possible way.
Like with any other block, adding a WavePlayer instance to your pages starts with clicking on the “plus” sign on the right or the top of the section where you want to add the player. After locating the WavePlayer block in the list of the available blocks – something that is even easier by typing “waveplayer” in the block search bar –, you are presented with an empty block that invites you to select the audio files that you want to include in the player.
You have three options:
- Upload: this button opens the file dialog of your computer so that you can select the files you want to upload to the Media Library. Uploading audio files is also possible by simply dragging your audio files and dropping them anywhere inside this block.
- Media Library: if the files you want to include in the current player are already in the Media Library, you can click on this button to open the Media modal dialog where you will be able to select the files you want to include in the player
- Insert from URL: when your files are not located inside your web server but are hosted on a remote location, you can use their URLs to include them in the player. If you want to include more than one file, you need to provide a comma-separated list of URLs. Please also make sure you read our Guidelines on Remotely Hosted Files, as you may find our recommendation on this topic very useful for the optimization of your workflow and your website.
The Media modal dialog that opens when clicking on the “Media Library” button shows the results of a search filtered to audio files only. You can select as many files as you like, keeping in mind that the order in which you select them is the order they will be listed in the player.
If you selected a file by mistake, you can remove it from the selection by un-checking the checkmark corresponding to its thumbnail.
The selection is additive by default, meaning that every time you click on a new thumbnail, that file will be added to the selection without any need to press any key on the keyboard.
You can also select a range of files by clicking on the first file and, keeping the SHIFT key pressed, clicking on the last file.
Once you are done with the selection of the tracks you would like to add to the player, you can click on the “Select” button. The Media modal dialog will close and a player with the selected tracks will appear on the page.
Now, you can start altering the visual aspect of the player using the multiple options available in the Block panel. The player is created according to the default settings you configured in Settings > Waveplayer section.
Any change in the visual parameters will be reflected immediately in the editor and the edited player will be re-rendered.
In the following screenshot you can see multiple WavePlayer instances added to a page in the Gutenberg block editor. As you will notice, WavePlayer also allows the use of multiple skin on the same page. This provides you with the flexibility of adapting the player to any possible use.
