Skip to content

Provide a block theme for the Friends page#362

Merged
akirk merged 46 commits intomainfrom
add-block-theme
Mar 23, 2026
Merged

Provide a block theme for the Friends page#362
akirk merged 46 commits intomainfrom
add-block-theme

Conversation

@akirk
Copy link
Copy Markdown
Owner

@akirk akirk commented Oct 4, 2024

Styles are still rough but it shows that it works. The idea is to provide a block theme when the user has a block theme installed so that they can edit their friends page in the same way they can edit their WordPress site.

This now adds a block theme to the theme selector. If selected, we load a friends//index template on the /friends/ page so that you can select "Edit Site" while on the Friends page and you can edit it:
Screenshot 2026-03-21 at 20 59 50

Screenshot 2026-03-21 at 21 27 57

Instead of swapping to a separate theme, block template content is injected via $_wp_current_template_content, so the site's theme.json, global styles, and stylesheets apply naturally. Templates are registered as plugin templates via WP_Block_Templates_Registry. Template parts are resolved via a pre_render_block filter, and user customizations via the Site Editor are respected.

To achieve this, I added a number of blocks. All are server-side rendered and individually selectable/styleable in the Site Editor (color, typography, spacing via block supports):

Sidebar blocks:

  • friends/stats — follower/subscription counts
  • friends/refresh — refresh link
  • friends/post-formats — post format filter links
  • friends/friends-list — subscription list with user_types attribute (subscriptions, starred, folders)
  • friends/add-subscription — link to add subscription

Feed header blocks:

  • friends/feed-title — "Main Feed" / "Status Feed" etc. as <h2>
  • friends/feed-chips — post count chips, hidden items, reaction chips
  • friends/search — search form with autocomplete

Author header blocks (granular for individual styling):

  • friends/author-star — star/unstar toggle
  • friends/author-avatar — profile image
  • friends/author-name — display name as <h2>
  • friends/author-description — bio text
  • friends/author-chips — role, since date, URL, post counts, reactions, feeds, edit/refresh

Post entry blocks (inside query loop, uses core blocks where possible):

  • core/post-author-name — with Friends-specific override for feed authors
  • core/post-title — linked to external URL
  • core/post-content — standard WordPress block
  • friends/post-permalink — "3 days ago on domain.com · 2 min read"
  • friends/post-reblog — reblog button with status indicator
  • friends/post-boost — boost button (auto-hides if no ActivityPub)
  • friends/post-reactions — emoji reactions with inline picker
  • friends/post-comments — AJAX-loaded comments with reply support

Other changes:

  • Removed friend visibility block controls (friendship feature removed), kept safety filter for only-friends content
  • Removed stale block-visibility JS/CSS and lerna references
  • Post count JS updated for Unicode ellipsis
  • Added block theme entry to 4.0 news page

Test plan

  • Select "Block Theme" under Friends > Settings > Theme
  • /friends/ — feed header with post count chips (AJAX-loaded), search top-right, expanded posts with permalink, reblog/boost/reactions/comments
  • /friends/{username}/ — author header with star, avatar, chips
  • /friends/{username}/{post_id}/ — minimal header, single post view
  • /friends/subscriptions/ and /friends/followers/ — render correctly
  • Click reaction emoji — toggles via AJAX
  • Click Comments — loads comments via AJAX inline
  • Click Reblog/Boost — triggers action with status indicator
  • Star/unstar an author — updates via AJAX
  • Switch back to default theme — no regressions
  • Open Site Editor, verify templates listed and editable
  • Edit a template part in Site Editor, verify changes persist on frontend

@nie-froehlich
Copy link
Copy Markdown

will this mean that I get to see the Friends page in my blog's theme? If so, when is this coming... #askingForAFriend

@akirk
Copy link
Copy Markdown
Owner Author

akirk commented Nov 19, 2024

Yes! I can't give a date yet, sorry. Welcoming contributions :)

@akirk akirk mentioned this pull request May 1, 2025
@akirk akirk marked this pull request as draft May 1, 2025 08:49
@akirk akirk added the 4.0 label May 1, 2025
@akirk akirk changed the base branch from main to friends-4.0 May 1, 2025 09:12
@akirk akirk changed the base branch from friends-4.0 to remove-friendship-functionality May 1, 2025 09:12
@akirk akirk force-pushed the add-block-theme branch from 631f0c3 to 3efe1f5 Compare May 1, 2025 09:13
@akirk akirk force-pushed the remove-friendship-functionality branch from 11d2998 to 9894a39 Compare May 1, 2025 09:16
@akirk akirk added this to the 4.0 milestone May 1, 2025
@akirk akirk force-pushed the remove-friendship-functionality branch from d00b3be to 3548729 Compare March 5, 2026 11:56
@akirk akirk force-pushed the add-block-theme branch from adb0a73 to 6a79680 Compare March 6, 2026 06:26
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 6, 2026

Test this PR in WordPress Playground

You can test this pull request directly in WordPress Playground:

Launch WordPress Playground

This will install and activate the plugin with the changes from this PR.

@jeffpaul
Copy link
Copy Markdown

Even just providing the core components of the Friends page in block format could resolve the major need here

Base automatically changed from remove-friendship-functionality to main March 20, 2026 07:55
@akirk akirk force-pushed the add-block-theme branch from 6a79680 to 570a681 Compare March 20, 2026 09:56
@akirk akirk modified the milestones: 4.0, 4.1 Mar 20, 2026
akirk added 9 commits March 21, 2026 16:02
- Don't dequeue global-styles or friends theme styles in dequeue_scripts
- Fix extra } in post-title block attribute in index.html
- Add pagination inside query block in index.html
- Replace placeholder text in footer.html with a valid block
- Remove site-specific widget instance hashes from sidebar.html
- Fix composer.json dependency conflict (phpcompatibility version)
- Add friends/subscriptions-query block: iterates subscriptions passing
  each as block context, mirroring the wp:query + wp:post-template pattern
- Add friends/subscription block: renders a subscription card from context,
  works for both WP users and virtual subscriptions (taxonomy terms)
- Add friends/followers block: server-side rendered ActivityPub followers list
- Add friends-followers.html and friends-subscriptions.html block templates
- Route subpage requests to block templates via $_wp_current_template_content
  when a block theme is active, falling back to PHP templates otherwise
- Register 'block' as a selectable Friends frontend theme via
  friends_load_themes, rather than always overriding the stylesheet
- Move stylesheet filter into block_theme() so it only activates
  when the block theme is chosen
- Add single-friend_post_cache.html block template for single post view
Only use block theme template paths when the Friends block theme is
explicitly selected, not just because the site's WP theme is a block
theme. Also restore global-styles dequeue for the default theme and
fix get_user_option call that passed 'expanded' as user ID.
- Only use block theme code paths when explicitly selected
- Restore global-styles dequeue for default theme
- Fix get_user_option call using wrong parameter
- Register friends theme directory for site editor discovery
- Add pre_get_block_file_template filter for friends// templates
- Replace legacy widgets with proper blocks (stats, refresh,
  post-formats, add-subscription) with editor support
- Enqueue site theme stylesheet alongside friends block theme
akirk added 27 commits March 21, 2026 21:02
- Use wp-block-heading class on starred friends heading for
  consistent styling with template headings
- Check database for user-customized template parts before falling
  back to plugin files, so site editor changes are respected
Use core blocks (post-author-name, post-title, post-content) in the
query loop so the site editor can render previews. Only the permalink
section (time ago, domain, reading time) remains a custom block.
Friend posts contain raw HTML from feeds, not WordPress blocks.
The core post-content block runs it through the block parser which
wraps it in freeform blocks and iframes. This custom block renders
the content directly with wp_kses_post and wpautop.
Tests cover:
- Block registration for all custom blocks
- Template and template part files exist on disk
- Template content mapping (get_block_template_content_for)
- Render output of each block (search, feed-header, stats, refresh,
  post-formats, add-subscription, post-permalink, post-content,
  author-header, starred-friends-list)
- Placeholder rendering when no post/author context
- Template structure (correct blocks referenced, no footer)
- calculate_read_time accessibility and correctness
The reflection in the test was triggering a doctrine/instantiator
autoload conflict in CI. Make the method public for testability
and restore the starred friends list test.
The test assumed no starred subscriptions exist but the test
environment may return results. Check the actual query result
and assert the correct output structure for either case.
This also fixes the PHP 8.2 CI crash where the assertion failure
triggered doctrine/instantiator autoload via PHPUnit error output.
- friends/feed-header → friends/feed-title (h2 heading) +
  friends/feed-chips (post counts, hidden items, reactions)
- friends/author-name now renders as h2 with id="page-title"
- friends/author-description shows placeholder in site editor
- Both feed-chips and author-chips use identical chip markup
  (<a class="chip">) so one CSS rule styles all chips consistently
- Header and author-header template parts compose the individual
  blocks so each is selectable and styleable in the site editor
All sidebar widgets, chip blocks, heading blocks, and permalink block
now have WordPress block supports (color, typography, spacing). The
site editor shows sidebar controls to change background, text color,
link color, font size, line height, padding and margin — no custom
CSS needed.

Each render callback uses get_block_wrapper_attributes() to apply
the user's style choices to the wrapper element.
Remove the "Friends Visibility" editor panel, block-visibility JS,
and related dead code since the friendship feature was removed.

Keep a simplified render_block filter that hides content marked
with the "only-friends" CSS class to prevent accidental exposure
of previously hidden content. Content marked "not-friends" is
shown to everyone.
- Add "starred" as a user_types option to friends/friends-list
- Remove separate friends/starred-friends-list block
- Add block supports (color, typography, spacing) to block.json
- Update editor JS with current options (subscriptions, starred)
- Rebuild with latest @wordpress/scripts
- Use get_block_wrapper_attributes() for styling support
- Update sidebar template to use friends-list with user_types attr
New friends/post-footer block renders the interaction buttons for
each post in the block theme query loop:

- Reblog button with status indicator
- Boost button (when ActivityPub is active) with status indicator
- Emoji reaction buttons with counts and reaction picker
- Comments button with AJAX loading and mention indicator
- Comments content container for AJAX-loaded comments

The existing JS in friends.js handles all interactions via event
delegation on CSS class selectors, so no JS changes needed.
Split friends/post-footer into four individual blocks:
- friends/post-reblog, friends/post-boost, friends/post-reactions,
  friends/post-comments

Wrapped in a flex group so they appear on one horizontal line.
Users can add/remove individual blocks in the site editor.
- Use href="#" instead of get_comments_link() to prevent navigation
- Wrap comments link and content container in a single div so JS
  can find .comments-content relative to the clicked link
- Update JS loadComments to find .comments-content in block theme
  context (closest .wp-block-friends-post-comments or li)
- Add block theme selector to comments click handler
- Fix JS error when .card ancestor not found in block theme
- Default $attributes parameter to empty array so tests can call
  render methods without arguments
- Add get_wrapper_attributes() helper that safely falls back when
  not in a block rendering context (avoids null access crash in
  WP_Block_Supports when called from unit tests)
@akirk
Copy link
Copy Markdown
Owner Author

akirk commented Mar 23, 2026

Ok! I think this is good enough for shipping it in 4.0!

@akirk akirk merged commit 5a93b49 into main Mar 23, 2026
25 checks passed
@akirk akirk deleted the add-block-theme branch March 23, 2026 15:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants