Skip to content

Commit

Permalink
Add related sites to single site pages (#149)
Browse files Browse the repository at this point in the history 
* Theme: Add Related Posts using a query loop to inherit correct block styles

* Related Posts: Fall back to featured when no related posts are found

* Fill in the results if there are less than 3 returned

* Fix line height of title
  • Loading branch information
@ryelle
ryelle authored Sep 14, 2023
1 parent 5739e9e commit 28a1380
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 121 deletions.
177 changes: 112 additions & 65 deletions source/wp-content/themes/wporg-showcase-2022/functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down Expand Up @@ -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(
'<h3>%s</h3>',
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.
*
Expand All @@ -283,7 +223,7 @@ function modify_excerpt_length() {
* @return string
*/
function modify_excerpt_more() {
return '...';
return '…';
}

/**
Expand All @@ -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;
}

Expand Down Expand Up @@ -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();
?>
<!-- wp:query {"queryId":2,"query":{"perPage":3,"include":<?php echo esc_attr( wp_json_encode( $ids ) ); ?>,"inherit":false},"align":"wide","layout":{"type":"constrained","wideSize":"1760px"}} -->
<div class="wp-block-query alignwide">
<!-- wp:post-template {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"grid","columnCount":3},"className":"wporg-related-posts"} -->
<!-- wp:wporg/site-screenshot {"isLink":true,"lazyLoad":true} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--10)">
<!-- wp:post-title {"isLink":true,"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"400","lineHeight":"inherit"}},"fontSize":"normal","fontFamily":"inter"} /-->

<!-- wp:post-terms {"term":"post_tag"} /-->
</div>
<!-- /wp:group -->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->
<?php
$markup = do_blocks( ob_get_clean() );
return $markup;
}

/**
* Add fallback posts when less than 3 related sites are found.
*
* The fallback is up to 3 recent featured sites, rather than trying to
* conditionally find other posts by tag/category/etc. This ensures there
* are always results.
*
* @param array $results Array of related posts matched by Elasticsearch.
* @param int $post_id Post ID of the post for which we are retrieving Related Posts.
*/
function jetpack_related_posts_results( $results, $post_id ) {
// The class should exist if this filter is called, but check just in case.
if ( ! class_exists( 'Jetpack_RelatedPosts' ) ) {
return $results;
}
$count = count( $results );
if ( $count < 3 ) {
$args = array(
'numberposts' => 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;
}
12 changes: 8 additions & 4 deletions source/wp-content/themes/wporg-showcase-2022/patterns/related-posts.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

?>
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"normal","fontFamily":"inter"} -->
<h3 class="has-inter-font-family has-normal-font-size" style="font-style:normal;font-weight:700"><?php esc_attr_e( 'Related sites', 'wporg' ); ?></h3>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|edge-space","bottom":"var:preset|spacing|50","left":"var:preset|spacing|edge-space"}}},"backgroundColor":"light-grey-2","layout":{"type":"constrained","wideSize":"1760px"}} -->
<div class="wp-block-group alignfull has-light-grey-2-background-color has-background" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">
<!-- wp:heading {"level":3,"fontSize":"heading-5"} -->
<h3 class="wp-block-heading has-heading-5-font-size"><?php esc_html_e( 'Related sites', 'wporg' ); ?></h3>
<!-- /wp:heading -->

<!-- wp:jetpack/related-posts {"displayDate":false,"displayThumbnails":true} /-->
Expand Down
51 changes: 0 additions & 51 deletions source/wp-content/themes/wporg-showcase-2022/src/style/_jetpack.scss
View file
Original file line number Diff line number Diff line change
@@ -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
*/
Expand Down
2 changes: 1 addition & 1 deletion source/wp-content/themes/wporg-showcase-2022/src/style/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}
Expand Down
2 changes: 2 additions & 0 deletions source/wp-content/themes/wporg-showcase-2022/templates/single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@

<!-- wp:pattern {"slug":"wporg-parent-2021/post-navigation"} /-->

<!-- wp:pattern {"slug":"wporg-showcase-2022/related-posts"} /-->

<!-- wp:pattern {"slug":"wporg-showcase-2022/footer"} /-->

<!-- wp:wporg/global-footer /-->

0 comments on commit 28a1380

Please sign in to comment.