Followers Block

[mattwiebe]

This adds a Follower block so that sites can display their fediverse followers on the frontend!

Needs testing instructions, but this is mostly done.

Proposed changes:

Other information:

• Have you written new tests for your changes, if applicable?

Testing instructions:

• Go to '..'

[mattwiebe]

I don't love adding /build but it's useful for now.

(I also don't love plugins that need to be built before they can be used and I greatly appreciated that this was not one of them and now here I am potentially ruining it!)

[mediaformat]

I don't love adding /build but it's useful for now.

@mattwiebe I might need to use it for another thing, perhaps this block code could go under src/followers or something

[mattwiebe]

I might need to use it for another thing, perhaps this block code could go under src/followers or something

@mediaformat That should be easy enough. We'll have to decide if we want to have built artifacts checked in or not.

[jeherve]

Maybe this (and the below) could be combined into a single translatable string, with createInterpolateElement from @wordpress/element. It would make things easier in RTL languages, for example.

Something like this (not tested):

diff --git a/src/followers/followers.js b/src/followers/followers.js
index aee1c3c..b756f8f 100644
--- a/src/followers/followers.js
+++ b/src/followers/followers.js
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
+import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Pagination } from './pagination';
 import { ExternalLink } from '@wordpress/components';
@@ -39,27 +40,19 @@ export function Followers( {
 	const [ localPage, setLocalPage ] = usePage();
 	const page = passedPage || localPage;
 	const setPage = passedSetPage || setLocalPage;
-	const prevLabel = (
-		<>
-			<span class="wp-block-query-pagination-previous-arrow is-arrow-arrow" aria-hidden="true">
-				{
-					/* translators: arrow for previous followers link */
-					__( '←', 'activitypub' )
-				}
-			</span>
-			{ __( 'Less', 'activitypub' ) }
-		</>
+	const prevLabel = createInterpolateElement(
+		/* translators: arrow for previous followers link */
+		__( '<span>←</span> Less', 'activitypub' ),
+		{
+			span: <span class="wp-block-query-pagination-previous-arrow is-arrow-arrow" aria-hidden="true" />,
+		}
 	);
-	const nextLabel = (
-		<>
-			{ __( 'More', 'activitypub' ) }
-			<span class="wp-block-query-pagination-next-arrow is-arrow-arrow" aria-hidden="true">
-				{
-					/* translators: arrow for next followers link */
-					__( '→', 'activitypub' )
-				}
-			</span>
-		</>
+	const nextLabel = createInterpolateElement(
+		/* translators: arrow for next followers link */
+		__( 'More <span>→</span>', 'activitypub' ),
+		{
+			span: <span class="wp-block-query-pagination-next-arrow is-arrow-arrow" aria-hidden="true" />,
+		}
 	);
 
 	useEffect( () => {
@@ -109,4 +102,4 @@ function Follower( { name, icon, url, preferredUsername } ) {
 			</span>
 		</ExternalLink>
 	)
-}
\ No newline at end of file
+}

[mattwiebe]

TIL about createInterpolateElement - thanks so much for this, great point about RTL and just keeping the context together. dd0f39a

[pfefferle]

oh, you are right!

[pfefferle]

😍