From 8f3eda9aa5ae685b80bfb75f6a3a1c7f092f0b06 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 1 Oct 2024 15:32:50 -0400 Subject: [PATCH] Styles: Add CSS and icons for Podcast page This adds custom styles for the Podcast page, as well as filtering the social icons to inject the SVGs for unsupported services. See #491 --- .../themes/wporg-main-2022/functions.php | 36 ++++++++++ .../src/style/_page-podcast.scss | 68 +++++++++++++++++++ .../wporg-main-2022/src/style/style.scss | 1 + 3 files changed, 105 insertions(+) create mode 100644 source/wp-content/themes/wporg-main-2022/src/style/_page-podcast.scss diff --git a/source/wp-content/themes/wporg-main-2022/functions.php b/source/wp-content/themes/wporg-main-2022/functions.php index 395bdfc9..3f654cb4 100644 --- a/source/wp-content/themes/wporg-main-2022/functions.php +++ b/source/wp-content/themes/wporg-main-2022/functions.php @@ -27,6 +27,7 @@ add_filter( 'wporg_block_navigation_menus', __NAMESPACE__ . '\add_site_navigation_menus' ); add_filter( 'the_title', __NAMESPACE__ . '\translate_the_title', 1, 2 ); add_filter( 'single_post_title', __NAMESPACE__ . '\translate_the_title', 1, 2 ); +add_filter( 'render_block_core/social-link', __NAMESPACE__ . '\inject_podcast_social_icons', 10, 2 ); /** * Enqueue scripts and styles. @@ -343,6 +344,41 @@ function translate_the_title( $title, $post_id = null ) { return $title; } +/** + * Inject social icons for podcast services. + * + * This does not register a custom service, it just overrides based on the icon URL for the default (chain) service. + * + * @param string $block_content The block content. + * @param array $block The full block, including name and attributes. + * + * @return string Updated block content. + */ +function inject_podcast_social_icons( $block_content, $block ) { + if ( 'chain' !== $block['attrs']['service'] ) { + return $block_content; + } + $icon = ''; + if ( str_contains( $block['attrs']['url'], 'podcasts.apple.com/' ) ) { + // Apple Podcasts. + $icon = ''; + } else if ( str_contains( $block['attrs']['url'], 'pca.st/' ) ) { + // Pocket Casts. + $icon = ''; + } else if ( str_contains( $block['attrs']['url'], 'stitcher.com/' ) ) { + // Stitcher. + $icon = ''; + } + + if ( $icon ) { + $before = explode( '', $before[1] ); + $block_content = $before[0] . $icon . $after[1]; + } + + return $block_content; +} + /** * Prevent easy access to the Site Editor. * diff --git a/source/wp-content/themes/wporg-main-2022/src/style/_page-podcast.scss b/source/wp-content/themes/wporg-main-2022/src/style/_page-podcast.scss new file mode 100644 index 00000000..cdce6d91 --- /dev/null +++ b/source/wp-content/themes/wporg-main-2022/src/style/_page-podcast.scss @@ -0,0 +1,68 @@ +.wp-briefing__container { + --wp--preset--spacing--70: clamp(50px, calc(10vw - 40px), 100px); +} + +.wp-briefing__rss-feed { + display: flex; + flex-direction: column; + gap: var(--wp--preset--spacing--40); + + .wp-block-rss__item-title { + font-size: var(--wp--preset--font-size--heading-3); + font-family: var(--wp--preset--font-family--eb-garamond); + line-height: var(--wp--custom--heading--typography--line-height); + } + + .wp-block-rss__item-publish-date { + color: var(--wp--preset--color--charcoal-4) !important; + font-size: var(--wp--preset--font-size--normal); + } + + .wp-block-rss__item-excerpt { + margin-top: 20px; + } +} + +.wp-briefing__media-text { + .wp-block-media-text__media { + min-height: 450px !important; + } + + > .wp-block-media-text__content { + padding: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--70) var(--wp--preset--spacing--edge-space); + } + + @media (max-width: 1199px) { + > .wp-block-media-text__content { + padding-right: var(--wp--preset--spacing--edge-space); + } + } + + @media (max-width: 889px) { + > .wp-block-media-text__content { + padding: + var(--wp--preset--spacing--70) + var(--wp--preset--spacing--edge-space) + var(--wp--preset--spacing--edge-space); + } + } + + @media (max-width: 600px) { + &.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media { + grid-column: 1; + grid-row: 2; + } + + &.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { + grid-column: 1; + grid-row: 1; + } + } +} + +@media (max-width: 781px) { + .wp-briefing__container .is-page-footer.wp-block-columns > :first-child { + border-right: 0 !important; + border-bottom: 1px solid var(--wp--preset--color--white-opacity-15); + } +} diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss index a709fef1..82f14690 100644 --- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss @@ -6,6 +6,7 @@ @import "fluid"; @import "banners"; @import "print"; +@import "page-podcast"; /* * Override inline paddings with the spacing preset.