Follow Me: add a button-only mode

build/follow-me/block.json

@@ -36,6 +36,23 @@
     "selectedUser": {
       "type": "string",
       "default": "site"
+    },
+    "buttonOnly": {
+      "type": "boolean",
+      "default": false
+    },
+    "buttonText": {
+      "type": "string",
+      "default": "Follow"
+    },
+    "buttonSize": {
+      "type": "string",
+      "default": "default",
+      "enum": [
+        "small",
+        "default",
+        "compact"
+      ]
     }
   },
   "usesContext": [

build/follow-me/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '62610556ba8e5f129fdf');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '6074e38f927a0105218a');

build/follow-me/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '8008189b4c59111938ec');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'ad9482bcf1d2f9d080b3');

src/follow-me/block.json

@@ -36,6 +36,19 @@
 		"selectedUser": {
 			"type": "string",
 			"default": "site"
+		},
+		"buttonOnly": {
+			"type": "boolean",
+			"default": false
+		},
+		"buttonText": {
+			"type": "string",
+			"default": "Follow"
+		},
+		"buttonSize": {
+			"type": "string",
+			"default": "default",
+			"enum": ["small", "default", "compact"]
 		}
 	},
 	"usesContext": [ "postType", "postId" ],

src/follow-me/edit.js

@@ -2,73 +2,107 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { SelectControl, PanelBody } from '@wordpress/components';
+import { SelectControl, PanelBody, ToggleControl, TextControl } from '@wordpress/components';
 import { useUserOptions } from '../shared/use-user-options';
 import FollowMe from './follow-me';
 import { useEffect } from '@wordpress/element';
 import { InheritModeBlockFallback } from '../shared/inherit-block-fallback';
 
+/**
+ * Edit component.
+ *
+ * @param {Object} props - Component props.
+ * @param {Object} props.attributes - Block attributes.
+ * @param {Function} props.setAttributes - Set block attributes.
+ * @param {Object} props.context - Block context.
+ * @param {string} props.context.postType - Post type.
+ * @param {number} props.context.postId - Post ID.
+ */
+export default function Edit({
+  attributes,
+  setAttributes,
+  context: {
+	postType,
+	postId,
+  },
+}) {
+  const blockProps = useBlockProps( {
+	className: 'activitypub-follow-me-block-wrapper',
+  } );
+  const usersOptions = useUserOptions( { withInherit: true } );
+  const { selectedUser, buttonOnly, buttonText, buttonSize } = attributes;
+  const isInheritMode = selectedUser === 'inherit';
 
-export default function Edit( {
-	attributes,
-	setAttributes,
-	context: { postType, postId },
-} ) {
-	const blockProps = useBlockProps( {
-		className: 'activitypub-follow-me-block-wrapper',
-	} );
-	const usersOptions = useUserOptions( { withInherit: true } );
-	const { selectedUser } = attributes;
-	const isInheritMode = selectedUser === 'inherit';
+  const authorId = useSelect(
+	( select ) => {
+	  const { getEditedEntityRecord } = select( coreStore );
+	  const _authorId = getEditedEntityRecord(
+		'postType',
+		postType,
+		postId
+	  )?.author;
 
-	const authorId = useSelect(
-		( select ) => {
-			const { getEditedEntityRecord } = select( coreStore );
-			const _authorId = getEditedEntityRecord(
-				'postType',
-				postType,
-				postId
-			)?.author;
+	  return _authorId ?? null;
+	},
+	[ postType, postId ]
+  );
 
-			return _authorId ?? null;
-		},
-		[ postType, postId ]
-	);
+  useEffect( () => {
+	// if there are no users yet, do nothing
+	if ( ! usersOptions.length ) {
+	  return;
+	}
+	// ensure that the selected user is in the list of options, if not, select the first available user
+	if ( ! usersOptions.find( ( { value } ) => value === selectedUser ) ) {
+	  setAttributes( { selectedUser: usersOptions[ 0 ].value } );
+	}
+  }, [ selectedUser, usersOptions ] );
 
-	useEffect( () => {
-		// if there are no users yet, do nothing
-		if ( ! usersOptions.length ) {
-			return;
-		}
-		// ensure that the selected user is in the list of options, if not, select the first available user
-		if ( ! usersOptions.find( ( { value } ) => value === selectedUser ) ) {
-			setAttributes( { selectedUser: usersOptions[ 0 ].value } );
-		}
-	}, [ selectedUser, usersOptions ] );
-
-	return (
-		<div { ...blockProps }>
-			{ usersOptions.length > 1 && (
-				<InspectorControls key="setting">
-					<PanelBody title={ __( 'Followers Options', 'activitypub' ) }>
-						<SelectControl
-							label= { __( 'Select User', 'activitypub' ) }
-							value={ attributes.selectedUser }
-							options={ usersOptions }
-							onChange={ ( value ) => setAttributes( { selectedUser: value } ) }
-						/>
-					</PanelBody>
-				</InspectorControls>
-			) }
-			{ isInheritMode ?
-					authorId ? (
-						<FollowMe { ...attributes } id={ blockProps.id } selectedUser={ authorId } />
-					) : (
-						<InheritModeBlockFallback name={ __( 'Follow Me', 'activitypub' ) } />
-					)
-			 : (
-				<FollowMe { ...attributes } id={ blockProps.id } />
-			) }
-		</div>
-	);
+  return (
+	<div { ...blockProps }>
+	  <InspectorControls key="activitypub-follow-me">
+		<PanelBody title={ __( 'Follow Me Options', 'activitypub' ) }>
+		  { usersOptions.length > 1 && (
+			<SelectControl
+			  label= { __( 'Select User', 'activitypub' ) }
+			  value={ attributes.selectedUser }
+			  options={ usersOptions }
+			  onChange={ ( value ) => setAttributes( { selectedUser: value } ) }
+			/>
+		  ) }
+		  <ToggleControl
+			label={ __( 'Button Only Mode', 'activitypub' ) }
+			checked={ buttonOnly }
+			onChange={ ( value ) => setAttributes( { buttonOnly: value } ) }
+			help={ __( 'Only show the follow button without profile information', 'activitypub' ) }
+		  />
+		  <TextControl
+			label={ __( 'Button Text', 'activitypub' ) }
+			value={ buttonText }
+			onChange={ ( value ) => setAttributes( { buttonText: value } ) }
+		  />
+		  <SelectControl
+			label={ __( 'Button Size', 'activitypub' ) }
+			value={ buttonSize }
+			options={ [
+			  { label: __( 'Default', 'activitypub' ), value: 'default' },
+			  { label: __( 'Compact', 'activitypub' ), value: 'compact' },
+			  { label: __( 'Small', 'activitypub' ), value: 'small' }
+			] }
+			onChange={ ( value ) => setAttributes( { buttonSize: value } ) }
+			help={ __( 'Choose the size of the follow button', 'activitypub' ) }
+		  />
+		</PanelBody>
+	  </InspectorControls>
+	  { isInheritMode ?
+		authorId ? (
+		  <FollowMe { ...attributes } id={ blockProps.id } selectedUser={ authorId } />
+		) : (
+		  <InheritModeBlockFallback name={ __( 'Follow Me', 'activitypub' ) } />
+		)
+		: (
+		  <FollowMe { ...attributes } id={ blockProps.id } />
+		) }
+	</div>
+  );
 }

src/follow-me/follow-me.js

@@ -1,4 +1,3 @@
-
 import apiFetch from '@wordpress/api-fetch';
 import { useEffect, useState } from '@wordpress/element';
 import { Button, Modal } from '@wordpress/components';
@@ -32,23 +31,57 @@ function fetchProfile( userId ) {
 	return apiFetch( fetchOptions );
 }
 
-function Profile( { profile, popupStyles, userId } ) {
+function Profile( {
+	profile,
+	popupStyles,
+	userId,
+	buttonText,
+	buttonOnly,
+	buttonSize,
+} ) {
 	const { webfinger, avatar, name } = profile;
 	// check if webfinger starts with @ and add it if it doesn't
 	const webfingerWithAt = webfinger.startsWith( '@' ) ? webfinger : `@${ webfinger }`;
+
+	if ( buttonOnly ) {
+		return (
+			<div className="activitypub-profile">
+				<Follow
+					profile={ profile }
+					popupStyles={ popupStyles }
+					userId={ userId }
+					buttonText={ buttonText }
+					buttonSize={ buttonSize }
+				/>
+			</div>
+		);
+	}
+
 	return (
 		<div className="activitypub-profile">
 			<img className="activitypub-profile__avatar" src={ avatar } alt={ name } />
 			<div className="activitypub-profile__content">
 				<div className="activitypub-profile__name">{ name }</div>
 				<div className="activitypub-profile__handle" title={ webfingerWithAt }>{ webfingerWithAt }</div>
 			</div>
-			<Follow profile={ profile } popupStyles={ popupStyles } userId={ userId } />
+			<Follow
+				profile={ profile }
+				popupStyles={ popupStyles }
+				userId={ userId }
+				buttonText={ buttonText }
+				buttonSize={ buttonSize }
+			/>
 		</div>
 	);
 }
 
-function Follow( { profile, popupStyles, userId } ) {
+function Follow( {
+	profile,
+	popupStyles,
+	userId,
+	buttonText,
+	buttonSize,
+} ) {
 	const [ isOpen, setIsOpen ] = useState( false );
 	const title = sprintf( __( 'Follow %s', 'activitypub' ), profile?.name );
 
@@ -60,8 +93,9 @@ function Follow( { profile, popupStyles, userId } ) {
 				aria-haspopup="dialog"
 				aria-expanded={ isOpen }
 				aria-label={  __( 'Follow me on the Fediverse', 'activitypub' ) }
+				size={ buttonSize }
 			>
-				{ __( 'Follow', 'activitypub' ) }
+				{ buttonText }
 			</Button>
 			{ isOpen && (
 				<Modal
@@ -94,25 +128,44 @@ function DialogFollow( { profile, userId } ) {
 	/>;
 }
 
-export default function FollowMe( { selectedUser, style, backgroundColor, id, useId = false, profileData = false } ) {
+export default function FollowMe( {
+	selectedUser,
+	style,
+	backgroundColor,
+	id,
+	useId = false,
+	profileData = false,
+	buttonOnly = false,
+	buttonText = __( 'Follow', 'activitypub' ),
+	buttonSize = 'default',
+} ) {
 	const [ profile, setProfile ] = useState( getNormalizedProfile() );
 	const userId = selectedUser === 'site' ? 0 : selectedUser;
 	const popupStyles = getPopupStyles( style );
 	const wrapperProps = useId ? { id } : {};
-	function setProfileData( profile ) {
-		setProfile( getNormalizedProfile( profile ) );
-	}
+
 	useEffect( () => {
 		if ( profileData ) {
-			return setProfileData( profileData );
+			setProfile( getNormalizedProfile( profileData ) );
+			return;
 		}
-		fetchProfile( userId ).then( setProfileData );
+
+		fetchProfile( userId ).then( ( data ) => {
+			setProfile( getNormalizedProfile( data ) );
+		} );
 	}, [ userId, profileData ] );
 
-	return(
-		<div { ...wrapperProps }>
+	return (
+		<div { ...wrapperProps } className="activitypub-follow-me-block-wrapper">
 			<ButtonStyle selector={ `#${ id }` } style={ style } backgroundColor={ backgroundColor } />
-			<Profile profile={ profile } userId={ userId } popupStyles={ popupStyles } />
+			<Profile 
+				profile={ profile } 
+				userId={ userId } 
+				popupStyles={ popupStyles } 
+				buttonText={ buttonText }
+				buttonOnly={ buttonOnly }
+				buttonSize={ buttonSize }
+			/>
 		</div>
-	)
+	);
 }