diff --git a/source/wp-content/themes/wporg-showcase-2022/functions.php b/source/wp-content/themes/wporg-showcase-2022/functions.php index 8cb4b719..f5c760e9 100644 --- a/source/wp-content/themes/wporg-showcase-2022/functions.php +++ b/source/wp-content/themes/wporg-showcase-2022/functions.php @@ -16,19 +16,19 @@ // Filters and Actions add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' ); add_action( 'init', __NAMESPACE__ . '\setup_theme' ); -add_action( 'wp', __NAMESPACE__ . '\jetpack_remove_rp', 20 ); add_action( 'wp_head', __NAMESPACE__ . '\add_social_meta_tags' ); add_action( 'pre_get_posts', __NAMESPACE__ . '\modify_search_query' ); add_action( 'template_redirect', __NAMESPACE__ . '\redirect_urls' ); -add_filter( 'jetpack_images_get_images', __NAMESPACE__ . '\jetpack_fallback_image', 10, 3 ); -add_filter( 'jetpack_relatedposts_filter_thumbnail_size', __NAMESPACE__ . '\jetpack_change_image_size' ); -add_filter( 'jetpack_relatedposts_filter_headline', __NAMESPACE__ . '\jetpack_related_posts_headline' ); add_filter( 'document_title_parts', __NAMESPACE__ . '\document_title' ); add_filter( 'document_title_separator', __NAMESPACE__ . '\document_title_separator' ); add_filter( 'excerpt_length', __NAMESPACE__ . '\modify_excerpt_length', 999 ); add_filter( 'excerpt_more', __NAMESPACE__ . '\modify_excerpt_more' ); add_filter( 'query_loop_block_query_vars', __NAMESPACE__ . '\modify_query_loop_block_query_vars', 10, 2 ); add_filter( 'wporg_noindex_request', __NAMESPACE__ . '\set_noindex' ); +add_action( 'wp', __NAMESPACE__ . '\jetpack_remove_rp', 20 ); +add_filter( 'jetpack_images_get_images', __NAMESPACE__ . '\jetpack_fallback_image', 10, 3 ); +add_filter( 'jetpack_related_posts_display_markup', __NAMESPACE__ . '\jetpack_related_posts_display', 10, 4 ); +add_filter( 'jetpack_relatedposts_returned_results', __NAMESPACE__ . '\jetpack_related_posts_results', 10, 2 ); // Don't send an email on contact for submission add_filter( 'grunion_should_send_email', '__return_false' ); @@ -208,66 +208,6 @@ function get_site_domain( $post, $rem_trail_slash = false ) { return $domain; } -/** - * Provide mShot images to Jetpack related posts. - */ -function jetpack_fallback_image( $media, $post_id, $args ) { - if ( $media ) { - return $media; - } else { - $post = get_post( $post_id ); - $permalink = get_permalink( $post_id ); - $url = get_site_screenshot_src( $post ); - - return array( - array( - 'type' => 'image', - 'from' => 'custom_fallback', - 'src' => esc_url( $url ), - 'href' => $permalink, - ), - ); - } -} - -/** - * Change Jetpack Related Posts image size. - */ -function jetpack_change_image_size( $thumbnail_size ) { - $thumbnail_size['width'] = '100%'; - $thumbnail_size['height'] = 'auto'; - return $thumbnail_size; -} - -/** - * Update the Related Posts title. - * - * @param string $headline - * @return string - */ -function jetpack_related_posts_headline( $headline ) { - $headline = sprintf( - '

%s

', - esc_html( __( 'Related sites', 'wporg' ) ) - ); - - return $headline; -} - -/** - * Remove the auto-adding of Related Posts. We'll use the shortcode. - * - * @return void - */ -function jetpack_remove_rp() { - if ( class_exists( 'Jetpack_RelatedPosts' ) ) { - $jprp = \Jetpack_RelatedPosts::init(); - $callback = array( $jprp, 'filter_add_target_to_dom' ); - - remove_filter( 'the_content', $callback, 40 ); - } -} - /** * Update the excerpt length. * @@ -283,7 +223,7 @@ function modify_excerpt_length() { * @return string */ function modify_excerpt_more() { - return '...'; + return '…'; } /** @@ -300,6 +240,12 @@ function modify_query_loop_block_query_vars( $query, $block ) { $query['post__in'] = $sticky; } + if ( isset( $block->context['query']['include'] ) ) { + $query['ignore_sticky_posts'] = 1; + $query['post__in'] = $block->context['query']['include']; + $query['orderby'] = 'post__in'; + } + return $query; } @@ -467,3 +413,104 @@ function add_social_meta_tags() { ); } } + +/** + * Provide mShot images to Jetpack related posts. + */ +function jetpack_fallback_image( $media, $post_id, $args ) { + if ( $media ) { + return $media; + } else { + $post = get_post( $post_id ); + $permalink = get_permalink( $post_id ); + $url = get_site_screenshot_src( $post ); + + return array( + array( + 'type' => 'image', + 'from' => 'custom_fallback', + 'src' => esc_url( $url ), + 'href' => $permalink, + ), + ); + } +} + +/** + * Remove the auto-adding of related posts. We'll use the block. + * + * @return void + */ +function jetpack_remove_rp() { + if ( class_exists( 'Jetpack_RelatedPosts' ) ) { + $jprp = \Jetpack_RelatedPosts::init(); + $callback = array( $jprp, 'filter_add_target_to_dom' ); + + remove_filter( 'the_content', $callback, 40 ); + } +} + +/** + * Update the output of related posts + * + * @param string $markup HTML output of related posts. + * @param int|false $post_id Post ID of the post for which we are retrieving related posts. + * @param array $related_posts Array of related posts. + * @param array $block_attributes Array of block attributes. + */ +function jetpack_related_posts_display( $markup, $post_id, $related_posts, $block_attributes ) { + $ids = wp_list_pluck( $related_posts, 'id' ); + ob_start(); + ?> + +
+ + + + +
+ + + +
+ + +
+ + 3 - $count, // Only grab enough to fill 3 slots. + 'exclude' => [ $post_id ], + 'category' => 'featured', + ); + $posts = get_posts( $args ); + if ( $posts ) { + $jprp = \Jetpack_RelatedPosts::init(); + foreach ( $posts as $i => $featured_post ) { + $results[] = $jprp->get_related_post_data_for_post( $featured_post->ID, $i, $post_id ); + } + } + } + return $results; +} diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/related-posts.php b/source/wp-content/themes/wporg-showcase-2022/patterns/related-posts.php index 1266a4d5..33ce00dd 100644 --- a/source/wp-content/themes/wporg-showcase-2022/patterns/related-posts.php +++ b/source/wp-content/themes/wporg-showcase-2022/patterns/related-posts.php @@ -4,11 +4,15 @@ * Slug: wporg-showcase-2022/related-posts */ +// This pattern loads the Related Posts block, but the markup for the related +// posts is set with a filter in functions.php. +// See `jetpack_related_posts_display`. + ?> - -
- -

+ +
+ +

diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/_jetpack.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/_jetpack.scss index ccd291bf..1625a226 100644 --- a/source/wp-content/themes/wporg-showcase-2022/src/style/_jetpack.scss +++ b/source/wp-content/themes/wporg-showcase-2022/src/style/_jetpack.scss @@ -1,54 +1,3 @@ -/* - * Related Posts Styles - */ - -.wp-block-jetpack-related-posts { - - @media (min-width: 641px) { - margin-left: -10px; - margin-right: -10px; - - /* - * Remove after Jetpack PR is merged. - * See: https://github.com/Automattic/jetpack/pull/27228 - */ - - .jp-related-posts-i2__row[data-post-count="3"] .jp-related-posts-i2__post { - max-width: calc(33.333333% - 20px); - } - } - - .jp-related-posts-i2__post-img-link a { - display: block; - margin-bottom: var(--wp--preset--spacing--10); - background: var(--wp--preset--color--light-grey-1); - } - - .jp-related-posts-i2__post-img-link img { - display: block; - width: 100%; - border: 1px solid var(--wp--preset--color--light-grey-1); - border-radius: 2px; - aspect-ratio: 16 / 9; - } - - .jp-related-posts-i2__post-link a { - display: block; - color: var(--wp--preset--color--charcoal-1); - } -} - -// Add hover states to related post items that match site-screenshot -.jp-related-posts-i2__post:hover .jp-related-posts-i2__post-link a { - color: var(--wp--custom--link--color--text); - text-decoration: underline; - text-decoration-thickness: 1px; -} - -.jp-related-posts-i2__post:hover .jp-related-posts-i2__post-img-link a img { - border: 1px solid var(--wp--custom--link--color--text); -} - /* * Jetpack Contact Form Styles */ diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss index 94a5072e..adfb4235 100644 --- a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss @@ -81,7 +81,7 @@ a:where(:not(.wp-element-button)):focus-visible { } @media (max-width: 1440px) { - .wp-block-post-template.is-layout-grid.columns-3 { + .wp-block-post-template.is-layout-grid.columns-3:not(.wporg-related-posts) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } diff --git a/source/wp-content/themes/wporg-showcase-2022/templates/single.html b/source/wp-content/themes/wporg-showcase-2022/templates/single.html index e8c40af7..dda3bf6f 100644 --- a/source/wp-content/themes/wporg-showcase-2022/templates/single.html +++ b/source/wp-content/themes/wporg-showcase-2022/templates/single.html @@ -24,6 +24,8 @@ + +