Conversation
A nostalgic theme inspired by the classic Google Reader interface: - Clean, list-based layout with minimal chrome - Blue header bar with tag-style chips - Red "Friends" branding in sidebar - Simple typography (Arial, 13px base) - Compact post items with hover highlights - Inline reaction buttons and action links - Blue comment threading indicator - Dark mode support via prefers-color-scheme - Overrides content templates for the list-item style Select under Friends > Settings > Theme.
- Posts start collapsed showing author + title on one line - Clicking a post expands it (shows content, footer, reactions) - Expanded post gets a subtle background highlight - Override index template to always use collapsed mode - CSS uses existing collapsed/uncollapsed class mechanism from JS
j/k - navigate next/previous item o/Enter - expand/collapse current item s - star current item (navigates to author page) v - open original link in new tab r - refresh feeds Current item gets a blue outline highlight. Click also sets current.
- j/k now expands the focused item and collapses the previous one - Remove visited link color distinction (Google Reader didn't have it) - Make all chips the same color in both light and dark mode - Better contrast for dark mode chips (light gray instead of blue)
- Replace all hardcoded color values with light-dark() CSS function - Remove redundant @media (prefers-color-scheme: dark) section - Fix j/k navigation to directly toggle uncollapsed class instead of simulating clicks (which didn't work for collapsing) - Consistent chip colors (no more blue/purple mix) - No visited link color distinction
Clicking a post in Google Reader mode now collapses all other expanded posts and only expands the clicked one, matching the j/k keyboard navigation behavior.
…ion on card click
Move the collapse/expand, toggle-compact, and double-click handlers from friends.js into friends-default-theme.js, enqueued only for the default theme. Google Reader theme has its own accordion behavior in google-reader.js (collapse all others on click/navigate). This prevents the two themes' click handlers from competing.
- j/k: next/previous item (expands) - n/p: next/previous item (without expanding) - space/shift-space: page down/up, or next item at bottom - o/enter: toggle open/close current item - s: navigate to author page (star) - v: open original in new tab - u: toggle sidebar visibility - ?: show keyboard shortcuts help overlay
Contributor
Test this PR in WordPress PlaygroundYou can test this pull request directly in WordPress Playground: This will install and activate the plugin with the changes from this PR. |
Friends > Theme shows a fly-out submenu listing all available themes with a checkmark on the current one. Clicking switches via GET parameter and saves the preference. Uses add_group as child of the Theme node so WordPress renders the ab-sub-wrapper for the fly-out.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This adds a Google Reader-inspired theme to the Friends page theme selector. It's a standalone CSS theme that doesn't depend on the Spectre framework — it provides its own styles for all the structural classes used by the templates.
The theme uses
light-dark()for all colors so dark mode works automatically viacolor-scheme: light darkwithout a separate media query block.Posts start collapsed in a compact list view (author + title + teaser on one line). Clicking or pressing j/k expands items in an accordion style — only one item is open at a time.
Keyboard shortcuts (press ? to see them)
Other changes
friends.jsintofriends-default-theme.jsso themes don't compete for click handlersgoogle-reader.js