From c43ffd95c0989c4eed483214f0255d2748365831 Mon Sep 17 00:00:00 2001 From: wadebekker Date: Thu, 2 Jan 2025 15:15:23 +0200 Subject: [PATCH 1/9] Implements initial ability to dock the player to top or bottom of page --- assets/js/blocks.js | 7 +- assets/js/blocks/podcast/index.scss | 75 +++++++++ assets/js/edit.js | 241 ++++++++++++++++++++-------- includes/blocks/podcast/markup.php | 134 +++++++++++----- simple-podcasting.php | 23 +++ 5 files changed, 372 insertions(+), 108 deletions(-) mode change 100755 => 100644 assets/js/blocks.js diff --git a/assets/js/blocks.js b/assets/js/blocks.js old mode 100755 new mode 100644 index 0f30003f..f853b92f --- a/assets/js/blocks.js +++ b/assets/js/blocks.js @@ -120,7 +120,12 @@ export default registerBlockType( displayEpisodeType: { type: 'boolean', default: false, - } + }, + isDocked: { + type: 'string', + default: 'none', + enum: ['none', 'top', 'bottom'], + }, }, transforms, diff --git a/assets/js/blocks/podcast/index.scss b/assets/js/blocks/podcast/index.scss index 3c321f2d..813d8676 100644 --- a/assets/js/blocks/podcast/index.scss +++ b/assets/js/blocks/podcast/index.scss @@ -1,7 +1,80 @@ +body.has-docked-bottom { + padding-bottom: 150px; + &.docked-in-editor .docked-bottom { + bottom: 24px; + } +} +body.has-docked-top { + padding-top: 150px; + &.docked-in-editor { + padding-top: 0px; + } + &.docked-in-editor .editor-styles-wrapper { + padding-top: 150px; + } + &.docked-in-editor .docked-top { + top: 60px; + } + + &.logged-in.admin-bar { + padding-top: 182px; + } + + &.logged-in.admin-bar .docked-top { + top: 32px; + } +} + + .wp-block-podcasting-podcast-outer { border: 1px solid #707070; border-radius: 4px; padding: 20px; + + &.docked-bottom { + margin: 0; + background-color: var(--wp--preset--color--base); + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 34; + border-radius: 4px 4px 0px 0px; + max-width: initial; + .wp-block-podcasting-podcast__container { + margin-bottom: 0px; + } + + .wp-block-podcasting-podcast__details { + width: 100%; + } + + #toggle-details-button { + margin-bottom: 20px; + } + } + &.docked-top { + margin: 0; + background-color: var(--wp--preset--color--base); + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 34; + border-radius: 0px 0px 4px 4px; + max-width: initial; + .wp-block-podcasting-podcast__container { + margin-bottom: 0px; + } + + .wp-block-podcasting-podcast__details { + width: 100%; + } + + #toggle-details-button { + margin-bottom: 20px; + } + } } .wp-block-podcasting-podcast__container { @@ -13,9 +86,11 @@ } .wp-block-podcasting-podcast__show-art { + display: none; margin-bottom: 20px; @media (min-width: 768px) { + display: block; flex-basis: 100px; margin-bottom: 0; margin-right: 20px; diff --git a/assets/js/edit.js b/assets/js/edit.js index b7e4e0d9..6e307790 100644 --- a/assets/js/edit.js +++ b/assets/js/edit.js @@ -70,7 +70,8 @@ function Edit( props ) { displayExplicitBadge, displaySeasonNumber, displayEpisodeNumber, - displayEpisodeType + displayEpisodeType, + isDocked, } = attributes; const duration = attributes.duration || ''; @@ -185,6 +186,53 @@ function Edit( props ) { setFeaturedImage(image.id); }; + // Docked Player + const dockedClass = isDocked !== 'none' ? `docked-${isDocked}` : ''; + const [showPodcastMeta, setShowPodcastMeta] = useState(false); + const [isDisplayingSettings, setIsDisplayingSettings] = useState(false); + + const checkDisplaySettings = () => { + if (displayDuration || displayShowTitle || + // displayEpisodeTitle || + // displayArt || + displayExplicitBadge || displaySeasonNumber || displayEpisodeNumber || displayEpisodeType) { + setIsDisplayingSettings(true); + } + else { + setIsDisplayingSettings(false); + } + } + + // If the user changes one of the toggles, the checkDisplaySettings function will be called to check if any of the display settings are enabled. + // If at least one of the display settings are enabled, then we want to show the More/Less button. + useEffect(() => { + checkDisplaySettings(); + }, [displayDuration, + displayShowTitle, + // displayEpisodeTitle, + // displayArt, + displayExplicitBadge, + displaySeasonNumber, + displayEpisodeNumber, + displayEpisodeType]) + + // Reset the More/Less button when the user docks or undocks the player. + useEffect(() => { + setShowPodcastMeta(false) + }, [isDocked]) + + useEffect(() => { + // Remove any existing classes + document.body.classList.remove('has-docked-top', 'has-docked-bottom', 'docked-in-editor'); + + // Add the appropriate class based on the isDocked value + if (isDocked === 'top') { + document.body.classList.add('has-docked-top', 'docked-in-editor'); + } else if (isDocked === 'bottom') { + document.body.classList.add('has-docked-bottom', 'docked-in-editor'); + } + }, [isDocked]); // Run this effect when isDocked changes + return ( {controls} @@ -285,7 +333,33 @@ function Edit( props ) { 'simple-podcasting' )} checked={displayEpisodeType} - onChange={() => setAttributes({ displayEpisodeType: !displayEpisodeType})} + onChange={() => setAttributes({ displayEpisodeType: !displayEpisodeType })} + /> + + + + setAttributes({ isDocked }) + } /> @@ -420,7 +494,7 @@ function Edit( props ) { -
+
{src ? ( <>
@@ -448,76 +522,109 @@ function Edit( props ) { )} -
- {displayShowTitle && ( - - {showName} - - )} - {displaySeasonNumber && seasonNumber && ( - - {__( - 'Season: ', - 'simple-podcasting' + {(isDocked === 'none' || showPodcastMeta) && ( + <> +
+ {displayShowTitle && ( + + {showName} + )} - {seasonNumber} - - )} - {displayEpisodeNumber && episodeNumber && ( - - {__('Episode: ', 'simple-podcasting')} - {episodeNumber} - - )} -
- -
- {displayDuration && duration && ( - - {__('Listen Time: ', 'simple-podcasting')} - {duration} - - )} - {displayEpisodeType && (episodeType !== 'none') && ( - - {__( - 'Episode type: ', - 'simple-podcasting' + {displaySeasonNumber && seasonNumber && ( + + {__( + 'Season: ', + 'simple-podcasting' + )} + {seasonNumber} + )} - {episodeType} - - )} - {displayExplicitBadge && ( - - {__( - 'Explicit: ', - 'simple-podcasting' + {displayEpisodeNumber && episodeNumber && ( + + {__('Episode: ', 'simple-podcasting')} + {episodeNumber} + )} - {explicit} - - )} -
+
+ +
+ {displayDuration && duration && ( + + {__('Listen Time: ', 'simple-podcasting')} + {duration} + + )} + {displayEpisodeType && (episodeType !== 'none') && ( + + {__( + 'Episode type: ', + 'simple-podcasting' + )} + {episodeType} + + )} + {displayExplicitBadge && ( + + {__( + 'Explicit: ', + 'simple-podcasting' + )} + {explicit} + + )} +
+ + )} + + {isDocked !== 'none' && isDisplayingSettings && ( + + )} + + {isDocked !== 'none' && ( +
+ {((caption && caption.length) || !!isSelected) && ( + + setAttributes({ caption: value }) + } + isSelected={isSelected} + /> + )} +
+ )}
-
- {((caption && caption.length) || !!isSelected) && ( - - setAttributes({ caption: value }) - } - isSelected={isSelected} - /> - )} -
+ {isDocked === 'none' && ( +
+ {((caption && caption.length) || !!isSelected) && ( + + setAttributes({ caption: value }) + } + isSelected={isSelected} + /> + )} +
+ )} ) : ( false, 'displayEpisodeNumber' => false, 'displayEpisodeType' => false, + 'isDocked' => 'none', ] ); @@ -46,8 +47,17 @@ $term_image_id = ''; } +// Output the body class based on isDocked value +$body_class = ''; +if ( $attributes['isDocked'] === 'top' ) { + $body_class = 'has-docked-top'; +} elseif ( $attributes['isDocked'] === 'bottom' ) { + $body_class = 'has-docked-bottom'; +} + ?> -
+ +
@@ -74,46 +84,90 @@ -
- - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - + +
+ +
+
- + +
+ + diff --git a/simple-podcasting.php b/simple-podcasting.php index a4f90357..5e5c1c6f 100644 --- a/simple-podcasting.php +++ b/simple-podcasting.php @@ -343,3 +343,26 @@ function register_latest_episode_assets_admin() { wp_enqueue_style( 'latest-episode-block' ); } add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\register_latest_episode_assets_admin' ); + + +function add_custom_admin_body_class( $classes ) { + global $post; + + if ( $post ) { + $blocks = parse_blocks( $post->post_content ); + + foreach ( $blocks as $block ) { + if ( 'podcasting/podcast' === $block['blockName'] && isset( $block['attrs']['isDocked'] ) ) { + $is_docked = $block['attrs']['isDocked']; + if ( 'top' === $is_docked ) { + $classes .= ' has-docked-top docked-in-editor'; + } elseif ( 'bottom' === $is_docked ) { + $classes .= ' has-docked-bottom docked-in-editor'; + } + } + } + } + + return $classes; +} +add_filter( 'admin_body_class', __NAMESPACE__ . '\add_custom_admin_body_class' ); From 55c19cadb1f5bd323674e8949dc65800e2664751 Mon Sep 17 00:00:00 2001 From: Sanketio Date: Fri, 8 Aug 2025 16:45:05 +0530 Subject: [PATCH 2/9] Add ARIA attributes to the elements --- assets/js/edit.js | 4 -- includes/blocks/podcast/markup.php | 81 ++++++++++++++++-------------- 2 files changed, 44 insertions(+), 41 deletions(-) diff --git a/assets/js/edit.js b/assets/js/edit.js index 6e307790..08989157 100644 --- a/assets/js/edit.js +++ b/assets/js/edit.js @@ -193,8 +193,6 @@ function Edit( props ) { const checkDisplaySettings = () => { if (displayDuration || displayShowTitle || - // displayEpisodeTitle || - // displayArt || displayExplicitBadge || displaySeasonNumber || displayEpisodeNumber || displayEpisodeType) { setIsDisplayingSettings(true); } @@ -209,8 +207,6 @@ function Edit( props ) { checkDisplaySettings(); }, [displayDuration, displayShowTitle, - // displayEpisodeTitle, - // displayArt, displayExplicitBadge, displaySeasonNumber, displayEpisodeNumber, diff --git a/includes/blocks/podcast/markup.php b/includes/blocks/podcast/markup.php index adb72ae0..9ae24b25 100644 --- a/includes/blocks/podcast/markup.php +++ b/includes/blocks/podcast/markup.php @@ -49,15 +49,14 @@ // Output the body class based on isDocked value $body_class = ''; -if ( $attributes['isDocked'] === 'top' ) { - $body_class = 'has-docked-top'; -} elseif ( $attributes['isDocked'] === 'bottom' ) { - $body_class = 'has-docked-bottom'; +if ( 'top' === $attributes['isDocked'] ) { + $body_class = 'has-docked-top'; +} elseif ( 'bottom' === $attributes['isDocked'] ) { + $body_class = 'has-docked-bottom'; } - ?> -
+
@@ -84,7 +83,7 @@ -
From d91e34a53e98ecba7eeecc0b258c0d6c852d3179 Mon Sep 17 00:00:00 2001 From: Sanketio Date: Fri, 8 Aug 2025 17:50:41 +0530 Subject: [PATCH 3/9] Make id unique and only allow docking on single posts --- includes/blocks/podcast/markup.php | 31 ++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/includes/blocks/podcast/markup.php b/includes/blocks/podcast/markup.php index 9ae24b25..fe75aea1 100644 --- a/includes/blocks/podcast/markup.php +++ b/includes/blocks/podcast/markup.php @@ -47,16 +47,26 @@ $term_image_id = ''; } +/** + * If not on a single post, set isDocked to none. + * + * This is to prevent having multiple instances of the podcast block with same docked position. + */ +$is_docked = ! is_single() ? 'none' : $attributes['isDocked']; + // Output the body class based on isDocked value $body_class = ''; -if ( 'top' === $attributes['isDocked'] ) { +if ( 'top' === $is_docked ) { $body_class = 'has-docked-top'; -} elseif ( 'bottom' === $attributes['isDocked'] ) { +} elseif ( 'bottom' === $is_docked ) { $body_class = 'has-docked-bottom'; } + +$podcast_details_id = wp_unique_prefixed_id( 'podcast-details' ); +$toggle_details_button_id = wp_unique_prefixed_id( 'toggle-details-button' ); ?> -
+
@@ -83,7 +93,7 @@ - @@ -151,16 +161,17 @@ document.body.classList.add(''); - var toggleButton = document.getElementById('toggle-details-button'); - var detailsDiv = document.getElementById('podcast-details'); + var toggleButton = document.getElementById(''); + var detailsDiv = document.getElementById(''); // If isDocked is 'none', show details by default - + detailsDiv.style.display = 'block'; detailsDiv.setAttribute('aria-hidden', 'false'); toggleButton.textContent = ; toggleButton.style.display = 'none'; toggleButton.setAttribute('aria-expanded', 'true'); + toggleButton.setAttribute('aria-hidden', 'true'); toggleButton.addEventListener('click', function() { From 8ae18f661be37639001c3639d654bbb130ccd430 Mon Sep 17 00:00:00 2001 From: Sanketio Date: Fri, 8 Aug 2025 18:00:23 +0530 Subject: [PATCH 4/9] Fix formatting for consistency --- assets/js/blocks/podcast/index.scss | 138 ++++++++++++++-------------- includes/blocks/podcast/markup.php | 2 +- simple-podcasting.php | 45 +++++---- 3 files changed, 98 insertions(+), 87 deletions(-) diff --git a/assets/js/blocks/podcast/index.scss b/assets/js/blocks/podcast/index.scss index 813d8676..d317dfbf 100644 --- a/assets/js/blocks/podcast/index.scss +++ b/assets/js/blocks/podcast/index.scss @@ -1,80 +1,84 @@ body.has-docked-bottom { - padding-bottom: 150px; - &.docked-in-editor .docked-bottom { - bottom: 24px; - } + padding-bottom: 150px; + &.docked-in-editor .docked-bottom { + bottom: 24px; + } } + body.has-docked-top { - padding-top: 150px; - &.docked-in-editor { - padding-top: 0px; - } - &.docked-in-editor .editor-styles-wrapper { - padding-top: 150px; - } - &.docked-in-editor .docked-top { - top: 60px; - } - - &.logged-in.admin-bar { - padding-top: 182px; - } - - &.logged-in.admin-bar .docked-top { - top: 32px; - } -} + padding-top: 150px; + + &.docked-in-editor { + padding-top: 0px; + } + &.docked-in-editor .editor-styles-wrapper { + padding-top: 150px; + } + &.docked-in-editor .docked-top { + top: 60px; + } + + &.logged-in.admin-bar { + padding-top: 182px; + } + &.logged-in.admin-bar .docked-top { + top: 32px; + } +} .wp-block-podcasting-podcast-outer { border: 1px solid #707070; border-radius: 4px; padding: 20px; - &.docked-bottom { - margin: 0; - background-color: var(--wp--preset--color--base); - position: fixed; - bottom: 0; - left: 0; - right: 0; - z-index: 34; - border-radius: 4px 4px 0px 0px; - max-width: initial; - .wp-block-podcasting-podcast__container { - margin-bottom: 0px; - } - - .wp-block-podcasting-podcast__details { - width: 100%; - } - - #toggle-details-button { - margin-bottom: 20px; - } - } - &.docked-top { - margin: 0; - background-color: var(--wp--preset--color--base); - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 34; - border-radius: 0px 0px 4px 4px; - max-width: initial; - .wp-block-podcasting-podcast__container { - margin-bottom: 0px; - } - - .wp-block-podcasting-podcast__details { - width: 100%; - } - - #toggle-details-button { - margin-bottom: 20px; - } - } + &.docked-bottom { + margin: 0; + background-color: var(--wp--preset--color--base); + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 34; + border-radius: 4px 4px 0px 0px; + max-width: initial; + + & .wp-block-podcasting-podcast__container { + margin-bottom: 0px; + } + + & .wp-block-podcasting-podcast__details { + width: 100%; + } + + & .wp-block-podcasting-podcast__toggle-details-button { + margin-bottom: 20px; + } + } + + &.docked-top { + margin: 0; + background-color: var(--wp--preset--color--base); + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 34; + border-radius: 0px 0px 4px 4px; + max-width: initial; + + & .wp-block-podcasting-podcast__container { + margin-bottom: 0px; + } + + & .wp-block-podcasting-podcast__details { + width: 100%; + } + + & .wp-block-podcasting-podcast__toggle-details-button { + margin-bottom: 20px; + } + } } .wp-block-podcasting-podcast__container { diff --git a/includes/blocks/podcast/markup.php b/includes/blocks/podcast/markup.php index fe75aea1..01101759 100644 --- a/includes/blocks/podcast/markup.php +++ b/includes/blocks/podcast/markup.php @@ -135,7 +135,7 @@
-
diff --git a/simple-podcasting.php b/simple-podcasting.php index f796164c..98fbb08b 100644 --- a/simple-podcasting.php +++ b/simple-podcasting.php @@ -344,25 +344,32 @@ function register_latest_episode_assets_admin() { } add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\register_latest_episode_assets_admin' ); - +/** + * Add custom body class for podcast block in admin. + * + * @param string $classes Body classes. + * + * @return string + */ function add_custom_admin_body_class( $classes ) { - global $post; - - if ( $post ) { - $blocks = parse_blocks( $post->post_content ); - - foreach ( $blocks as $block ) { - if ( 'podcasting/podcast' === $block['blockName'] && isset( $block['attrs']['isDocked'] ) ) { - $is_docked = $block['attrs']['isDocked']; - if ( 'top' === $is_docked ) { - $classes .= ' has-docked-top docked-in-editor'; - } elseif ( 'bottom' === $is_docked ) { - $classes .= ' has-docked-bottom docked-in-editor'; - } - } - } - } - - return $classes; + + global $post; + + if ( $post ) { + $blocks = parse_blocks( $post->post_content ); + + foreach ( $blocks as $block ) { + if ( 'podcasting/podcast' === $block['blockName'] && isset( $block['attrs']['isDocked'] ) ) { + $is_docked = $block['attrs']['isDocked']; + if ( 'top' === $is_docked ) { + $classes .= ' has-docked-top docked-in-editor'; + } elseif ( 'bottom' === $is_docked ) { + $classes .= ' has-docked-bottom docked-in-editor'; + } + } + } + } + + return $classes; } add_filter( 'admin_body_class', __NAMESPACE__ . '\add_custom_admin_body_class' ); From 53df906abe4c6d8cf75ffdbcf268db03de6ab8e2 Mon Sep 17 00:00:00 2001 From: Sanketio Date: Fri, 8 Aug 2025 20:46:20 +0530 Subject: [PATCH 5/9] Adjust width of the podcast block in the editor --- assets/js/edit.js | 42 +++++++++++++++++++++++++++++++++++++++--- 1 file changed, 39 insertions(+), 3 deletions(-) diff --git a/assets/js/edit.js b/assets/js/edit.js index 08989157..f566db2f 100644 --- a/assets/js/edit.js +++ b/assets/js/edit.js @@ -23,7 +23,7 @@ const ALLOWED_MEDIA_TYPES = ['audio']; const { select } = wp.data; import { Button } from '@wordpress/components'; -import { useState, useEffect } from '@wordpress/element'; +import { useState, useEffect, useCallback, useRef } from '@wordpress/element'; import { dispatch, useSelect, useDispatch } from '@wordpress/data'; import { createBlock } from '@wordpress/blocks'; @@ -201,6 +201,9 @@ function Edit( props ) { } } + const adminMenuElement = document.getElementById('adminmenuwrap'); + const blockRef = useRef(document.querySelector('.wp-block-podcasting-podcast-outer')); + // If the user changes one of the toggles, the checkDisplaySettings function will be called to check if any of the display settings are enabled. // If at least one of the display settings are enabled, then we want to show the More/Less button. useEffect(() => { @@ -217,6 +220,28 @@ function Edit( props ) { setShowPodcastMeta(false) }, [isDocked]) + /** + * Update the position and width of the block depending on the isDocked value. + * + * @param {string} isDocked - The value of the isDocked attribute. + * @param {number} containerWidth - The width of the container. + */ + const updateBlockPosition = useCallback((isDocked, containerWidth) => { + if (isDocked === 'none') { + blockRef.current.style.left = '0px'; + blockRef.current.style.width = `auto`; + + return; + } + + const blockElementStyle = window.getComputedStyle(blockRef.current); + const paddingLeft = parseInt(blockElementStyle.paddingLeft, 10); + const paddingRight = parseInt(blockElementStyle.paddingRight, 10); + const left = adminMenuElement ? adminMenuElement.offsetWidth : 0; + blockRef.current.style.left = `${left}px`; + blockRef.current.style.width = `${containerWidth - paddingLeft - paddingRight - 2}px`; + }, [adminMenuElement]); + useEffect(() => { // Remove any existing classes document.body.classList.remove('has-docked-top', 'has-docked-bottom', 'docked-in-editor'); @@ -227,7 +252,18 @@ function Edit( props ) { } else if (isDocked === 'bottom') { document.body.classList.add('has-docked-bottom', 'docked-in-editor'); } - }, [isDocked]); // Run this effect when isDocked changes + + // Update the position and width of the block depending on the isDocked value. + const editorArea = document.querySelector('.editor-visual-editor'); + if (editorArea) { + const resizeObserver = new ResizeObserver(entries => { + for (let entry of entries) { + updateBlockPosition(isDocked, entry.contentRect.width); + } + }); + resizeObserver.observe(editorArea); + } + }, [isDocked, updateBlockPosition]); // Run this effect when isDocked changes return ( @@ -490,7 +526,7 @@ function Edit( props ) { -
+
{src ? ( <>
From f1108fcecac704e080aa5cbadab0a3fe1fc169a1 Mon Sep 17 00:00:00 2001 From: Sanketio Date: Fri, 5 Sep 2025 17:32:33 +0530 Subject: [PATCH 6/9] Remove editor changes for the dock position --- assets/js/edit.js | 32 +++--------------------------- includes/blocks/podcast/markup.php | 2 +- simple-podcasting.php | 30 ---------------------------- 3 files changed, 4 insertions(+), 60 deletions(-) diff --git a/assets/js/edit.js b/assets/js/edit.js index f566db2f..2c85c2fd 100644 --- a/assets/js/edit.js +++ b/assets/js/edit.js @@ -187,7 +187,6 @@ function Edit( props ) { }; // Docked Player - const dockedClass = isDocked !== 'none' ? `docked-${isDocked}` : ''; const [showPodcastMeta, setShowPodcastMeta] = useState(false); const [isDisplayingSettings, setIsDisplayingSettings] = useState(false); @@ -242,29 +241,6 @@ function Edit( props ) { blockRef.current.style.width = `${containerWidth - paddingLeft - paddingRight - 2}px`; }, [adminMenuElement]); - useEffect(() => { - // Remove any existing classes - document.body.classList.remove('has-docked-top', 'has-docked-bottom', 'docked-in-editor'); - - // Add the appropriate class based on the isDocked value - if (isDocked === 'top') { - document.body.classList.add('has-docked-top', 'docked-in-editor'); - } else if (isDocked === 'bottom') { - document.body.classList.add('has-docked-bottom', 'docked-in-editor'); - } - - // Update the position and width of the block depending on the isDocked value. - const editorArea = document.querySelector('.editor-visual-editor'); - if (editorArea) { - const resizeObserver = new ResizeObserver(entries => { - for (let entry of entries) { - updateBlockPosition(isDocked, entry.contentRect.width); - } - }); - resizeObserver.observe(editorArea); - } - }, [isDocked, updateBlockPosition]); // Run this effect when isDocked changes - return ( {controls} @@ -371,6 +347,7 @@ function Edit( props ) { -
+
{src ? ( <>
diff --git a/includes/blocks/podcast/markup.php b/includes/blocks/podcast/markup.php index 01101759..089292d0 100644 --- a/includes/blocks/podcast/markup.php +++ b/includes/blocks/podcast/markup.php @@ -47,7 +47,7 @@ $term_image_id = ''; } -/** +/* * If not on a single post, set isDocked to none. * * This is to prevent having multiple instances of the podcast block with same docked position. diff --git a/simple-podcasting.php b/simple-podcasting.php index 98fbb08b..65530840 100644 --- a/simple-podcasting.php +++ b/simple-podcasting.php @@ -343,33 +343,3 @@ function register_latest_episode_assets_admin() { wp_enqueue_style( 'latest-episode-block' ); } add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\register_latest_episode_assets_admin' ); - -/** - * Add custom body class for podcast block in admin. - * - * @param string $classes Body classes. - * - * @return string - */ -function add_custom_admin_body_class( $classes ) { - - global $post; - - if ( $post ) { - $blocks = parse_blocks( $post->post_content ); - - foreach ( $blocks as $block ) { - if ( 'podcasting/podcast' === $block['blockName'] && isset( $block['attrs']['isDocked'] ) ) { - $is_docked = $block['attrs']['isDocked']; - if ( 'top' === $is_docked ) { - $classes .= ' has-docked-top docked-in-editor'; - } elseif ( 'bottom' === $is_docked ) { - $classes .= ' has-docked-bottom docked-in-editor'; - } - } - } - } - - return $classes; -} -add_filter( 'admin_body_class', __NAMESPACE__ . '\add_custom_admin_body_class' ); From 26a1dd3c8ccac525e5fdbc9316123583367deca1 Mon Sep 17 00:00:00 2001 From: Sanketio Date: Mon, 8 Sep 2025 18:42:00 +0530 Subject: [PATCH 7/9] Remove editor changes relted to podcast block for docked setting --- assets/js/edit.js | 216 ++++++++++++++-------------------------------- 1 file changed, 65 insertions(+), 151 deletions(-) diff --git a/assets/js/edit.js b/assets/js/edit.js index 2c85c2fd..ccac458e 100644 --- a/assets/js/edit.js +++ b/assets/js/edit.js @@ -186,61 +186,8 @@ function Edit( props ) { setFeaturedImage(image.id); }; - // Docked Player - const [showPodcastMeta, setShowPodcastMeta] = useState(false); - const [isDisplayingSettings, setIsDisplayingSettings] = useState(false); - - const checkDisplaySettings = () => { - if (displayDuration || displayShowTitle || - displayExplicitBadge || displaySeasonNumber || displayEpisodeNumber || displayEpisodeType) { - setIsDisplayingSettings(true); - } - else { - setIsDisplayingSettings(false); - } - } - - const adminMenuElement = document.getElementById('adminmenuwrap'); const blockRef = useRef(document.querySelector('.wp-block-podcasting-podcast-outer')); - // If the user changes one of the toggles, the checkDisplaySettings function will be called to check if any of the display settings are enabled. - // If at least one of the display settings are enabled, then we want to show the More/Less button. - useEffect(() => { - checkDisplaySettings(); - }, [displayDuration, - displayShowTitle, - displayExplicitBadge, - displaySeasonNumber, - displayEpisodeNumber, - displayEpisodeType]) - - // Reset the More/Less button when the user docks or undocks the player. - useEffect(() => { - setShowPodcastMeta(false) - }, [isDocked]) - - /** - * Update the position and width of the block depending on the isDocked value. - * - * @param {string} isDocked - The value of the isDocked attribute. - * @param {number} containerWidth - The width of the container. - */ - const updateBlockPosition = useCallback((isDocked, containerWidth) => { - if (isDocked === 'none') { - blockRef.current.style.left = '0px'; - blockRef.current.style.width = `auto`; - - return; - } - - const blockElementStyle = window.getComputedStyle(blockRef.current); - const paddingLeft = parseInt(blockElementStyle.paddingLeft, 10); - const paddingRight = parseInt(blockElementStyle.paddingRight, 10); - const left = adminMenuElement ? adminMenuElement.offsetWidth : 0; - blockRef.current.style.left = `${left}px`; - blockRef.current.style.width = `${containerWidth - paddingLeft - paddingRight - 2}px`; - }, [adminMenuElement]); - return ( {controls} @@ -347,7 +294,7 @@ function Edit( props ) { )} - {(isDocked === 'none' || showPodcastMeta) && ( - <> -
- {displayShowTitle && ( - - {showName} - - )} - {displaySeasonNumber && seasonNumber && ( - - {__( - 'Season: ', - 'simple-podcasting' - )} - {seasonNumber} - +
+ {displayShowTitle && ( + + {showName} + + )} + {displaySeasonNumber && seasonNumber && ( + + {__( + 'Season: ', + 'simple-podcasting' )} - {displayEpisodeNumber && episodeNumber && ( - - {__('Episode: ', 'simple-podcasting')} - {episodeNumber} - - )} -
- -
- {displayDuration && duration && ( - - {__('Listen Time: ', 'simple-podcasting')} - {duration} - - )} - {displayEpisodeType && (episodeType !== 'none') && ( - - {__( - 'Episode type: ', - 'simple-podcasting' - )} - {episodeType} - + {seasonNumber} + + )} + {displayEpisodeNumber && episodeNumber && ( + + {__('Episode: ', 'simple-podcasting')} + {episodeNumber} + + )} +
+ +
+ {displayDuration && duration && ( + + {__('Listen Time: ', 'simple-podcasting')} + {duration} + + )} + {displayEpisodeType && (episodeType !== 'none') && ( + + {__( + 'Episode type: ', + 'simple-podcasting' )} - {displayExplicitBadge && ( - - {__( - 'Explicit: ', - 'simple-podcasting' - )} - {explicit} - + {episodeType} + + )} + {displayExplicitBadge && ( + + {__( + 'Explicit: ', + 'simple-podcasting' )} -
- - )} - - {isDocked !== 'none' && isDisplayingSettings && ( - - )} - - {isDocked !== 'none' && ( -
- {((caption && caption.length) || !!isSelected) && ( - - setAttributes({ caption: value }) - } - isSelected={isSelected} - /> - )} -
- )} + {explicit} + + )} +
- {isDocked === 'none' && ( -
- {((caption && caption.length) || !!isSelected) && ( - - setAttributes({ caption: value }) - } - isSelected={isSelected} - /> - )} -
- )} +
+ {((caption && caption.length) || !!isSelected) && ( + + setAttributes({ caption: value }) + } + isSelected={isSelected} + /> + )} +
) : ( Date: Mon, 8 Sep 2025 18:44:53 +0530 Subject: [PATCH 8/9] Remove unnecessary dependency --- assets/js/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/edit.js b/assets/js/edit.js index ccac458e..9d489237 100644 --- a/assets/js/edit.js +++ b/assets/js/edit.js @@ -23,7 +23,7 @@ const ALLOWED_MEDIA_TYPES = ['audio']; const { select } = wp.data; import { Button } from '@wordpress/components'; -import { useState, useEffect, useCallback, useRef } from '@wordpress/element'; +import { useState, useEffect, useRef } from '@wordpress/element'; import { dispatch, useSelect, useDispatch } from '@wordpress/data'; import { createBlock } from '@wordpress/blocks'; From 8e18db24e850eae843663ca9bba1812dea124d7f Mon Sep 17 00:00:00 2001 From: Sanketio Date: Mon, 15 Sep 2025 16:11:02 +0530 Subject: [PATCH 9/9] Replace is_single with is_singular --- includes/blocks/podcast/markup.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/blocks/podcast/markup.php b/includes/blocks/podcast/markup.php index 089292d0..6b21d9fb 100644 --- a/includes/blocks/podcast/markup.php +++ b/includes/blocks/podcast/markup.php @@ -52,7 +52,7 @@ * * This is to prevent having multiple instances of the podcast block with same docked position. */ -$is_docked = ! is_single() ? 'none' : $attributes['isDocked']; +$is_docked = ! is_singular() ? 'none' : $attributes['isDocked']; // Output the body class based on isDocked value $body_class = '';