Social Web UI: Add feed reader #2399

pfefferle · 2025-10-30T10:13:22Z

Proposed changes:

Other information:

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

Testing instructions:

Go to '..'

Changelog entry

Automatically create a changelog entry from the details below.

Changelog Entry Details

Significance

Patch
Minor
Major

Type

Added - for new features
Changed - for changes in existing functionality
Deprecated - for soon-to-be removed features
Removed - for now removed features
Fixed - for any bug fixes
Security - in case of vulnerabilities

Message

Major architectural changes: - Replaced custom routing with simpler state-based navigation - Implemented three-panel layout (sidebar, stage, inspector) - Created reusable Page and Panel components for consistent UI structure - Organized routes by section (dashboard, followers, following, interactions) Component improvements: - Layout: Dark theme (#1e1e1e) with fullscreen mode support - Sidebar: 300px fixed width with visible menu items on dark background - Stage: Main content area with DataViews tables and action buttons - Inspector: 380px conditional panel for item details TypeScript improvements: - Added explicit action types for Redux store (SetFollowersAction, etc.) - Created store.d.ts for @wordpress/data module augmentation - Fixed React JSX transform configuration (react-jsx mode) - Added missing icon type definitions Styling: - Consolidated styles into style-index.css via style.scss entry point - Added fullscreen body class management with useEffect hook - Used wpds design tokens for consistency with WordPress Design System - Proper margin-based spacing between panels

Changed the sidebar header title from 'ActivityPub' to 'Social Web' and updated menu item labels to use translation functions. This improves localization and better reflects the section's purpose.

Introduces a 'feed' resource to the Redux store, including actions, selectors, and async fetching logic for ActivityPub posts. Updates the sidebar navigation to include a Feed section and ensures feed data is loaded alongside followers, following, and interactions. This prepares the UI for displaying a user's ActivityPub feed.

Uncomments the line that runs PHP Code Sniffer on changed PHP files, ensuring code formatting is enforced during pre-commit.

Replaces the actor object's properties in FeedPost with new fields: ID, post_title, post_excerpt, and guid. Removes the previous fields such as id, name, preferredUsername, url, icon, and type to reflect updated data structure.

- Replace classnames with clsx for better class name handling - Restructure store into modular files (actions, selectors, reducer, types) - Replace hardcoded colors with wpds design tokens throughout SCSS - Move WordPress type declarations to project root /types/ - Create route-specific types.ts files for better organization - Add ThemedSurface component for consistent styled surfaces - Refactor Panel component to use ThemedSurface internally - Simplify design-tokens.scss to use wpds tokens directly All styling now uses wpds token names with fallback values for consistent theming.

Import style.scss from the JavaScript entry point to bundle all styles (global styles and component styles) into a single style-index.css file. This simplifies the build output and ensures fullscreen layout styles are properly applied. - Import style.scss in index.tsx to bundle all styles together - Remove editorStyle from block.json since styles are imported directly - Remove inline background style from root element - Clean up debug console.log statements

Introduces a 'feed' section to the sidebar and Redux store, including actions, selectors, and reducers for fetching and managing feed posts. Updates the layout and data hooks to support the new feed resource, and ensures dashboard statistics now include post counts. This enhances the social web interface with feed viewing capabilities.

Enhanced the social web sidebar by adding a site hub component with site icon, title, and a button to open the command palette. Updated dependencies to include 'wp-commands', 'wp-html-entities', and 'wp-url' to support new features.

Imported the 'classnames' utility in src/social-web/components/layout/index.tsx to fix a missing import error. This resolves issues where the S() function (an alias for classnames) was used without being defined, ensuring proper class name composition in the layout component.

Introduces new field components for the feed inspector (author, content, date, excerpt, metadata, status, title), a custom use-feed hook, and related styles. Updates feed, layout, and sidebar logic to support the new inspector. Also adds FeedActions and style for the feed route, and updates post type handling.

Uncomments the filter hook for 'rest_ap_post_query' to allow filtering AP posts by user. This change activates the previously disabled functionality.

This commit refactors the social-web module by updating Redux store actions, reducer, selectors, and types for improved state management. UI components in fields, layout, and sidebar have been enhanced for better structure and maintainability. The use-social-web-data hook is updated to leverage the new store logic. Build files are updated to reflect these changes and add 'wp-notices' as a dependency.

Removed dashboard-specific route and types files, and updated sidebar navigation to set 'Feed' as the default section. Refactored main layout and routing logic to simplify section handling and improve maintainability. Updated related components and styles to reflect these changes.

Implements code splitting for feed, following, and interactions routes to improve initial load performance. Routes are now loaded on demand using React.lazy() and Suspense. Benefits: - Reduced initial bundle size - routes download only when visited - Faster initial page load - Better performance through webpack code splitting - Separate chunks for stages (feed, following, interactions) and inspectors Webpack magic comments ensure proper chunk names for each lazy-loaded module. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>

The primary feed action now opens the original post in a new tab if a link is available, replacing the previous 'View Details' action. The redundant 'Open Original' action was removed, and related logic updated in both the feed actions and build output.

@obenland

Implements suggestions from @obenland: - Use Elvis operator to prioritize instrument over object for _activitypub_object_id. This ensures QuoteRequest activities correctly store the quoting post URL. - Convert deduplicate() SQL query to WP_Query for better caching support Changes: - Line 99: Use `$activity->get_instrument() ?: $activity->get_object()` instead of just `$activity->get_object()` - deduplicate(): Replace direct SQL query with WP_Query using posts_where filter, properly adding and removing the filter callback 🤖 Generated with [Claude Code](https://claude.com/claude-code)

This reverts commit 237832c.

obenland · 2025-11-17T14:51:25Z

hm, this is actually not working for me. ap_posts returns a list of posts but they don't get displayed

obenland · 2025-11-17T14:51:59Z

Is it the missing pre-loading?

obenland

There are no posts displayed, currently

Move individual field files into folders matching the existing pattern used by avatar, follow-status, modified, name, and webfinger fields. Update index.ts to use consistent export syntax for all fields.

pfefferle · 2025-11-17T15:04:08Z

@obenland have you properly added the correct post-metas?

obenland · 2025-11-17T15:08:29Z

You'll have to break that down for me 🙂 It doesn't just work out of the box with ap_posts?

pfefferle · 2025-11-17T15:14:08Z

@obenland no! not all blog users have subscribed to the same content especially when it is about private posts or direct messages!

See:

wordpress-activitypub/includes/collection/class-inbox.php

Line 132 in 1570996

self::add_recipient( $id, $user_id );

and

wordpress-activitypub/includes/collection/class-inbox.php

Line 306 in 1570996

public static function add_recipient( $post_id, $user_id ) {

pfefferle · 2025-11-17T15:16:29Z

Here is the used filter: https://github.com/Automattic/wordpress-activitypub/pull/2399/files#diff-ceb59dc4107c120554c144aa5f601712077313b8b65bc0a0a844b0125272461fR703

obenland · 2025-11-17T15:17:55Z

The ap_post api endpoint returns a list of posts for me, they just don't get displayed in the app. None of the dataview component is, as a matter of fact.

If there was an empty result, I'd expect the empty message to show up, which it doesn't.

pfefferle · 2025-11-17T15:17:55Z

includes/class-post-types.php

+	 *
+	 * @return array Modified query arguments.
+	 */
+	public static function filter_ap_post_by_user( $args ) {


@obenland here is the filter that is used, to only show ap_posts that are visible to the logged-in user.

pfefferle · 2025-11-17T15:20:34Z

Ah, it seems to be an issue with "Sort by Title". Can you change to "Sort by Date", to be sure that we have the same issue!?

Moved feed-stage implementation to a new module and updated Social Web entry to use the new module reference. Updated asset versioning and chunk references for proper code splitting and loading.

pfefferle · 2025-11-17T15:24:18Z

I removed "Sort by Title"!

obenland · 2025-11-17T15:32:09Z

The last change didn't seem to help, I'm afraid. I'm sorry I don't have more to offer currently, I'm a bit hamstrung by not having any posts locally to test with at the moment.

Does it work for you?

Can you change to "Sort by Date", to be sure that we have the same issue!?

DataViews don't display for me, so there's no sorting that I can change, I'm afraid.

pfefferle · 2025-11-17T15:39:45Z

@obenland it does

can you add a _activitypub_user_id Post-Meta that has you WordPress User ID to one (or all) of your ap_posts?

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

obenland

It works locally for me, so let's get it in and iterate

obenland and others added 5 commits October 29, 2025 21:06

Merge branch 'add/reader' into refactor/social-web-ui-second-pass

96b17da

Update sidebar title and menu labels

817fbed

Changed the sidebar header title from 'ActivityPub' to 'Social Web' and updated menu item labels to use translation functions. This improves localization and better reflects the section's purpose.

Fix commented-out PHP lint command in pre-commit hook

e24bee8

Uncomments the line that runs PHP Code Sniffer on changed PHP files, ensuring code formatting is enforced during pre-commit.

pfefferle changed the base branch from trunk to refactor/social-web-ui-second-pass October 30, 2025 10:13

github-actions bot added [Feature] Collections [Focus] Editor Changes to the ActivityPub experience in the block editor [Status] In Progress labels Oct 30, 2025

matticbot and others added 2 commits October 30, 2025 10:14

Prettify

b51b796

Update FeedPost actor interface properties

763b6de

Replaces the actor object's properties in FeedPost with new fields: ID, post_title, post_excerpt, and guid. Removes the previous fields such as id, name, preferredUsername, url, icon, and type to reflect updated data structure.

pfefferle self-assigned this Oct 30, 2025

pfefferle and others added 5 commits October 30, 2025 14:24

Hash-Based Routing Implementation (#2400)

601ca15

Update packages

4326b51

Merge branch 'refactor/social-web-ui-second-pass' into add/stream

259c984

Base automatically changed from refactor/social-web-ui-second-pass to add/reader October 30, 2025 16:04

github-actions bot added the [Feature] WP Admin label Oct 30, 2025

pfefferle added 11 commits October 30, 2025 17:37

Merge branch 'add/reader' into add/stream

17f3990

Merge branch 'add/reader' into add/stream

1e49534

Add site hub and command palette to sidebar

9ba5f6d

Enhanced the social web sidebar by adding a site hub component with site icon, title, and a button to open the command palette. Updated dependencies to include 'wp-commands', 'wp-html-entities', and 'wp-url' to support new features.

Merge branch 'add/reader' into add/stream

f809a81

Enable filter for AP post query by user

c0cc466

Uncomments the filter hook for 'rest_ap_post_query' to allow filtering AP posts by user. This change activates the previously disabled functionality.

Merge branch 'add/reader' into add/stream

bcf41e9

pfefferle and others added 5 commits November 17, 2025 08:53

Fix/social reader feedback (#2476)

350d1de

Revert "Address PR feedback on Inbox class"

2e3bb26

This reverts commit 237832c.

obenland approved these changes Nov 17, 2025

View reviewed changes

obenland requested changes Nov 17, 2025

View reviewed changes

Reorganize field components into folder structure

c87a267

Move individual field files into folders matching the existing pattern used by avatar, follow-status, modified, name, and webfinger fields. Update index.ts to use consistent export syntax for all fields.

pfefferle commented Nov 17, 2025

View reviewed changes

Refactor feed-stage and update Social Web entry

199881e

Moved feed-stage implementation to a new module and updated Social Web entry to use the new module reference. Updated asset versioning and chunk references for proper code splitting and loading.

pfefferle requested a review from obenland November 17, 2025 15:27

pfefferle requested a review from Copilot November 17, 2025 15:53

Copilot started reviewing on behalf of pfefferle November 17, 2025 15:54 View session

Copilot finished reviewing on behalf of pfefferle November 17, 2025 15:54

Copilot AI reviewed Nov 17, 2025

View reviewed changes

obenland approved these changes Nov 17, 2025

View reviewed changes

pfefferle merged commit 70d47c6 into add/reader Nov 17, 2025
20 checks passed

pfefferle deleted the add/stream branch November 17, 2025 17:05

github-actions bot removed the [Status] In Progress label Nov 17, 2025

Social Web UI: Add feed reader #2399

Social Web UI: Add feed reader #2399

Uh oh!

Conversation

pfefferle commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes:

Other information:

Testing instructions:

Changelog entry

Significance

Type

Message

Uh oh!

obenland commented Nov 17, 2025

Uh oh!

obenland commented Nov 17, 2025

Uh oh!

obenland left a comment

Choose a reason for hiding this comment

Uh oh!

pfefferle commented Nov 17, 2025

Uh oh!

obenland commented Nov 17, 2025

Uh oh!

pfefferle commented Nov 17, 2025

Uh oh!

pfefferle commented Nov 17, 2025

Uh oh!

obenland commented Nov 17, 2025

Uh oh!

pfefferle Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

pfefferle commented Nov 17, 2025

Uh oh!

pfefferle commented Nov 17, 2025

Uh oh!

obenland commented Nov 17, 2025

Uh oh!

pfefferle commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

obenland left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

pfefferle commented Oct 30, 2025 •

edited

Loading

pfefferle commented Nov 17, 2025 •

edited

Loading