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:

• 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!

[peterwilsoncc]

I've added a few notes inline to start with.

I think the expanding and contracting of details will need an aria-expanded and family for accessibility reasons.

I noticed in the dashboard when editing a post that a docked player is hidden behind the admin bar and post settings panels.

When the blocks are shown on the index pages of a blog/category, it's possible to dock the items from each post which can look odd, and will be problematic if there all docked to the same location.

I think it will either need to be limited so only the first episode is docked on listing pages, or docking only works on single posts.

[peterwilsoncc]

The new code in this file uses tabs for intending, whereas the existing code is using spaces. Are you able to switch to spaces for consistency.

[peterwilsoncc]

Please remove the commented out code.

Suggested change

	// displayEpisodeTitle ||
	// displayArt ||

[peterwilsoncc]

Suggested change

	// displayEpisodeTitle,
	// displayArt,

[peterwilsoncc]

Nitpick.

Suggested change

	<div class="wp-block-podcasting-podcast-outer <?php echo 'docked-' . esc_attr( $attributes['isDocked'] ); ?>">
	<div class="wp-block-podcasting-podcast-outer <?php echo 'docked-' . sanitize_html_class( $attributes['isDocked'] ); ?>">

[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.

[peterwilsoncc]

Inside the editor I'm still seeing some odd behaviour. It's half hidden when docked to the top; and when docked in either location the toolbar still appears in the original location.

As the layout in the editor can change fairly frequently, I think it might be best to do what you've done on the index pages and avoid docking in the editor. Maybe display an indication that it will be docked if you wish but I don't think it's essential.

[sanketio]

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

[peterwilsoncc]

This looks great, thanks.

I've noticed the more button displays in the editor so have left a one work suggestion inline.

[peterwilsoncc]

This looks good to me

• player is docked on post front end pages
• player is not docked on post index pages, preventing double up of docked content
• no docking in the editor to avoid block editing oddities

I've noted inline something I missed in earlier testing but I'm unclear if it's the intent or not. I've added the suggestion inline but feel free to merge if it's an intentional decision.