Default reactions block style based on avatar setting

The reactions block now defaults to the 'facepile' style if avatars are enabled and 'summary' if avatars are disabled, unless a style is explicitly set. The block registration also removes the 'facepile' style when avatars are disabled. This ensures consistent display behavior in both editor and frontend for auto-inserted blocks.

Author: pfefferle

build/reactions/index.asset.php

@@ -84,7 +84,18 @@ 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' );
+		// Register reactions block, conditionally removing facepile style if avatars are disabled.
+		$reactions_args = array();
+		if ( ! \get_option( 'show_avatars', true ) ) {
+			$reactions_args['styles'] = array(
+				array(
+					'name'      => 'summary',
+					'label'     => __( 'Summary', 'activitypub' ),
+					'isDefault' => true,
+				),
+			);
+		}
+		\register_block_type_from_metadata( ACTIVITYPUB_PLUGIN_DIR . '/build/reactions', $reactions_args );
 
 		\register_block_type_from_metadata(
 			ACTIVITYPUB_PLUGIN_DIR . '/build/reply',

build/reactions/index.js

@@ -66,7 +66,7 @@ export default function Edit( { attributes, setAttributes, __unstableLayoutClass
 	const { showAvatars = true } = useOptions();
 	const hasInitialized = useRef( false );
 
-	// On first render, if avatars are disabled and no style class is set, default to summary.
+	// On first render, set default style based on avatar setting.
 	useEffect( () => {
 		if ( hasInitialized.current ) {
 			return;
@@ -75,10 +75,11 @@ export default function Edit( { attributes, setAttributes, __unstableLayoutClass
 
 		// Only apply default if no style has been explicitly chosen yet.
 		const hasStyleClass = className?.includes( 'is-style-' );
-		if ( ! showAvatars && ! hasStyleClass ) {
+		if ( ! hasStyleClass ) {
+			const defaultStyle = showAvatars ? 'facepile' : 'summary';
 			setAttributes( {
-				className: clsx( className, 'is-style-summary' ),
-				displayStyle: 'summary',
+				className: clsx( className, `is-style-${ defaultStyle }` ),
+				displayStyle: defaultStyle,
 			} );
 		}
 	}, [ className, showAvatars, setAttributes ] );

build/reactions/render.php

@@ -51,7 +51,17 @@
 // Generate a unique ID for the block.
 $block_id = 'activitypub-reactions-block-' . wp_unique_id();
 
-// Determine display style - summary style hides avatars.
+/*
+ * Determine display style - summary style hides avatars.
+ * For auto-hooked blocks without explicit style, use avatar setting to determine style.
+ */
+$has_style_class = isset( $attributes['className'] ) && strpos( $attributes['className'], 'is-style-' ) !== false;
+if ( ! $has_style_class ) {
+	$default_style              = get_option( 'show_avatars', true ) ? 'facepile' : 'summary';
+	$attributes['className']    = trim( ( $attributes['className'] ?? '' ) . ' is-style-' . $default_style );
+	$attributes['displayStyle'] = $default_style;
+}
+
 $is_summary   = 'summary' === $attributes['displayStyle'];
 $show_avatars = ! $is_summary;
 
@@ -233,6 +243,7 @@ class="reaction-label wp-element-button"
 $wrapper_attributes = get_block_wrapper_attributes(
 	array(
 		'id'                  => $block_id,
+		'class'               => $attributes['className'] ?? '',
 		'data-wp-interactive' => 'activitypub/reactions',
 		'data-wp-context'     => wp_json_encode( $context, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ),
 		'data-wp-init'        => 'callbacks.initReactions',