Add ability to dock player to top or bottom of page

[wadebekker]

Description of the Change

This PR adds the ability to dock the player to the top or bottom of the page, in addition to the original 'inline' option. When docked, the podcast details are hidden initially to save height. A 'More/Less' button is available to hide or reveal the podcast details.

Please note: This feature is still a WIP Further styling is still required on the 'More/Less' button and layout, and general spacing needs to be reviewed and tested. This feature is not yet fully tested in all major browsers and viewport sizes.

Closes #299

How to test the Change

• Checkout PR branch
• Run the project using Local
• Open the website and log into the WP Admin Dashboard

From within the WP Admin Dashboard:

• Create a Podcast.
• Add a Podcast Block to a new or existing post.
• Insert your podcast episode into the Podcast Block.
• Inside the block editor panel, under 'Podcast Settings', a new set of controls labeled 'Dock Player' is available.
• Toggle between 'Top', 'Bottom', 'None' to test the various docking options.
• Toggle on a few of the 'Podcast Settings' options to test the 'More/Less' functionality.
• Save/Publish your post to test the frontend output (outside of the WP admin area).

Changelog Entry

Added - New feature

Credits

@wadebekker @sanketio

Checklist:

• [X] I agree to follow this project's Code of Conduct.
• [ ] I have updated the documentation accordingly.
• [ ] I have added Critical Flows, Test Cases, and/or End-to-End Tests to cover my change.
• [ ] All new and existing tests pass.

Desired results:

The designs below illustrate our goals for both mobile and desktop views. Note: When docked at the top, the player should remain visually identical but fixed to the top of the page.

[jeffpaul]

@peterwilsoncc over to you for review/testing, thanks!

[jeffpaul]

@wadebekker any chance you'll be able to update from @peterwilsoncc code review comments above?

[sanketio]

@jeffpaul @peterwilsoncc I updated the code for this PR, and it is now ready for your reviews.

[sanketio]

@peterwilsoncc I have removed the effect of the dock setting in the editor now.