Add Extra Fields block for ActivityPub profiles (#2439)

Author: pfefferle

.github/changelog/2439-from-description

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added a new Fediverse Extra Fields block to display ActivityPub extra fields, featuring compact, stacked, and card layouts with flexible user selection options.

assets/css/activitypub-welcome.css

@@ -223,19 +223,19 @@
 	padding: 15px;
 }
 
-.profile-field {
+.extra-field {
 	margin-bottom: 15px;
 }
 
-.profile-field label {
+.extra-field label {
 	display: block;
 	margin-bottom: 5px;
 	font-weight: 500;
 	font-size: 13px;
 	color: #646970;
 }
 
-.profile-field input {
+.extra-field input {
 	width: 100%;
 	padding: 8px;
 	font-size: 13px;

build/extra-fields/block.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "name": "activitypub/extra-fields",
+  "apiVersion": 3,
+  "version": "1.0.0",
+  "title": "Fediverse Extra Fields",
+  "category": "widgets",
+  "description": "Display extra fields from ActivityPub user profiles",
+  "textdomain": "activitypub",
+  "icon": "list-view",
+  "supports": {
+    "html": false,
+    "align": [
+      "wide",
+      "full"
+    ],
+    "color": {
+      "gradients": true,
+      "link": true,
+      "__experimentalDefaultControls": {
+        "background": true,
+        "text": true,
+        "link": true
+      }
+    },
+    "__experimentalBorder": {
+      "radius": true,
+      "width": true,
+      "color": true,
+      "style": true
+    },
+    "shadow": true,
+    "typography": {
+      "fontSize": true,
+      "__experimentalDefaultControls": {
+        "fontSize": true
+      }
+    }
+  },
+  "styles": [
+    {
+      "name": "compact",
+      "label": "Compact",
+      "isDefault": true
+    },
+    {
+      "name": "stacked",
+      "label": "Stacked"
+    },
+    {
+      "name": "cards",
+      "label": "Cards"
+    }
+  ],
+  "attributes": {
+    "selectedUser": {
+      "type": "string",
+      "default": "blog"
+    },
+    "maxFields": {
+      "type": "number",
+      "default": 0
+    }
+  },
+  "usesContext": [
+    "postType",
+    "postId"
+  ],
+  "editorScript": "file:./index.js",
+  "style": "file:./style-index.css",
+  "render": "file:./render.php"
+}

build/extra-fields/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '6f7cc2955f584ad618ba');

build/extra-fields/index.js

@@ -0,0 +1,81 @@
+<?php
+/**
+ * Server-side rendering for the Extra Fields block.
+ *
+ * @package Activitypub
+ */
+
+use Activitypub\Blocks;
+use Activitypub\Collection\Extra_Fields;
+
+use function Activitypub\is_activitypub_request;
+
+if ( is_activitypub_request() || is_feed() ) {
+	return '';
+}
+
+/**
+ * Render callback for the Extra Fields block.
+ *
+ * @var array $attributes Block attributes.
+ */
+$attributes = wp_parse_args( $attributes );
+$user_id    = Blocks::get_user_id( $attributes['selectedUser'] ?? 'blog' );
+
+// If user ID couldn't be determined, return empty.
+if ( null === $user_id ) {
+	return '';
+}
+
+// Get extra fields for this user.
+$fields = Extra_Fields::get_actor_fields( $user_id );
+
+// Apply max fields limit if set.
+$max_fields = $attributes['maxFields'] ?? 0;
+if ( $max_fields > 0 && count( $fields ) > $max_fields ) {
+	$fields = array_slice( $fields, 0, $max_fields );
+}
+
+// Return empty on frontend if no fields (hide block).
+if ( empty( $fields ) ) {
+	return '';
+}
+
+// Get block wrapper attributes.
+$wrapper_attributes = get_block_wrapper_attributes(
+	array(
+		'class' => 'activitypub-extra-fields-block-wrapper',
+	)
+);
+
+// Extract background color for cards style.
+$background_color = '';
+$card_style       = '';
+
+// Check if this is the cards style by looking at className attribute or wrapper classes.
+$is_cards_style = ( isset( $attributes['className'] ) && str_contains( $attributes['className'], 'is-style-cards' ) )
+	|| str_contains( $wrapper_attributes, 'is-style-cards' );
+
+if ( $is_cards_style ) {
+	// Check for background color in various formats.
+	if ( isset( $attributes['backgroundColor'] ) ) {
+		$background_color = sprintf( 'var(--wp--preset--color--%s)', $attributes['backgroundColor'] );
+	} elseif ( isset( $attributes['style']['color']['background'] ) ) {
+		$background_color = $attributes['style']['color']['background'];
+	}
+
+	if ( $background_color ) {
+		$card_style = sprintf( ' style="background-color: %s;"', esc_attr( $background_color ) );
+	}
+}
+?>
+<div <?php echo $wrapper_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
+	<dl class="activitypub-extra-fields">
+		<?php foreach ( $fields as $field ) : ?>
+			<div class="activitypub-extra-field"<?php echo $card_style; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
+				<dt><?php echo esc_html( $field->post_title ); ?></dt>
+				<dd><?php echo Extra_Fields::get_formatted_content( $field ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></dd>
+			</div>
+		<?php endforeach; ?>
+	</dl>
+</div>

build/extra-fields/render.php

@@ -42,6 +42,10 @@ public static function enqueue_editor_assets() {
 				'blog'  => ! is_user_type_disabled( 'blog' ),
 				'users' => ! is_user_type_disabled( 'user' ),
 			),
+			'profileUrls'      => array(
+				'user' => \admin_url( 'profile.php#activitypub' ),
+				'blog' => \admin_url( 'options-general.php?page=activitypub&tab=blog-profile' ),
+			),
 		);
 		wp_localize_script( 'wp-editor', '_activityPubOptions', $data );
 
@@ -76,6 +80,7 @@ public static function handle_in_reply_to_get_param() {
 	 * Register the blocks.
 	 */
 	public static function register_blocks() {
+		\register_block_type_from_metadata( ACTIVITYPUB_PLUGIN_DIR . '/build/extra-fields' );
 		\register_block_type_from_metadata( ACTIVITYPUB_PLUGIN_DIR . '/build/follow-me' );
 		\register_block_type_from_metadata( ACTIVITYPUB_PLUGIN_DIR . '/build/followers' );
 		\register_block_type_from_metadata( ACTIVITYPUB_PLUGIN_DIR . '/build/reactions' );