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 @@
+
+