Groups: follow-up design updates - #1884
Merged
Merged
Conversation
raicem
changed the title
raicem
marked this pull request as draft
August 12, 2026 13:32
raicem
marked this pull request as ready for review
August 13, 2026 11:06
The container installed 0.35.0 while local dev and the compat-test skill had already moved to 0.35.1, so the `wporg-groups-frontend` and `groups` suites ran against a different plugin build than the one they are written for.
The Groups UI mixed "Organiser" and "Organizer" between strings, role labels, comments, and tests. WordPress.org uses American spelling, so settle on it everywhere — including the `$is_organiser` local and the test assertions that matched the old labels. Test user names (`organiser1`, `eventorganiser1`) and the `event-organiser.spec.js` filename are left alone: they are fixture identifiers, not user-facing copy, and renaming them would break local environments set up from the compat-test skill.
`get_location()` collapsed a location to `null` whenever either the city or
the country was empty, and the About tab builds its form from that response.
A group whose stored country code no longer resolves — CLDR data changes, or
a code that was never valid — came back with no location selected, so the
next save of any other field posted `location: null` and silently wiped the
city and country the organizer never touched.
Report whatever is stored, verbatim, and keep validation on the write path in
`normalize_location()`, which still rejects an unrecognized code. The two
readers each handle the stale value on their own terms:
- `get_location_label()` drops the unresolvable country rather than
printing a bare code or a dangling "City, ".
- The About tab blanks a country the option list doesn't offer, so the
required-field check prompts for a replacement instead of re-posting a
code the server would reject.
The parent theme already resolves every button state from
`--wp--custom--button--*` custom properties, and it is the only layer that
gets filled/outline size parity right — the filled variant is padding plus
border-width with no border, the outline variant is bare padding plus a 1px
border, so both settle on the same box. Restyling buttons in `custom.css`
fought that instead of feeding it.
Move the values that differ from the parent's — the active blues and the
whole outline ramp — into `settings.custom.button` in `theme.json`, and leave
in `custom.css` only what the token system has no slot for: the disabled
treatment and the `aria-busy` loading spinner.
Two matching fixes fall out of it:
- The footer's "All groups" button becomes `is-style-outline-on-dark`. It
sits on a dark ground, where the light-ground outline ramp would have
turned it near-invisible on hover.
- `@wordpress/components` colors its primary buttons and focus rings from
four of its own variables, a shade off ours. The new
`components/component-accents.css` points them at the Blueberry presets;
every modal is listed by name because `Modal` renders at the end of
`<body>`, with no shared parent to hang the variables on.
A design pass over the two pages a visitor actually lands on.
Front page:
- The full-bleed cover hero restated the group name 60px below the local
navigation bar, which already carries it, at three times the size. It
becomes a plain identity row — name, location, hairline — on the page
background.
- Main content moves ahead of the sidebar in source order, so the DOM
matches the desktop layout and the mobile stack instead of contradicting
both. `source-order.spec.js` pins that at two viewports.
- "About this group" joins the column, between events and news.
- Event cards tighten up: a fixed 24px pad, Heading 6 titles, and the venue
line dropped to Inter regular so it reads as a detail, not a subheading.
- Core renders `post-featured-image` as an empty string for an event with no
thumbnail, so one image-less card in a row of three started its date where
its neighbours started their image. A placeholder holds the same 16:9
region — flat Blueberry 4, not invented artwork.
Single event:
- The details card becomes explicit zones (When, Where, Add to calendar),
each drawing its own `border-top`. It used to separate them with
standalone `core/separator` blocks and hide the stragglers from CSS, which
could only ever hide the *last* one: with every optional zone empty, the
first `<hr>` was left hanging under the RSVP button, because the second was
still in the DOM behind `display: none` and kept it from matching
`:last-child`. A border cannot outlive the block that draws it.
- Title, details, and content follow semantic source order.
`typography.fluid` goes off: fluid sizing was rescaling the type ramp out from
under these layouts, so the same heading level landed at different sizes on
pages that are meant to match.
Three changes to the attendee summary that sits under an event. The count line's wording moves into `inc/rsvp-labels.php`. It was written twice in `render.php` — once for the server-rendered line, once as the format strings the view module re-renders it from — and the two had already drifted. `get_count_label()` renders it, `get_count_formats()` exports the same table for the browser, and `get_count_parts()` picks between them; `getCountParts()` in `view.js` mirrors that branch for branch, because script modules can't depend on `wp-i18n` and only ever pick between pre-resolved strings. Adding a state means editing both functions, and the docblocks on each say so. The RSVP action now precedes the summary. The summary is a *result*; putting it first made the primary action of the page the second thing reached by keyboard and by eye. `test_event_rsvp_action_precedes_attendee_summary()` pins the order. Avatars drop from twelve at 40px to five at 28px. Twelve never fit on one line at card width, so the row wrapped and pushed the count line down; five fit at any width, and the "+N" pill plus the modal still reach everyone.
Join, Leave, RSVP and Save answers were only `disabled` while their request was in flight. A screen reader announces that as unavailable — indistinguishable from a button the user isn't allowed to press — with nothing to say the state is temporary. `aria-busy` on those buttons says the work is under way, and it is also what the spinner in `custom.css` keys off, so the sighted and announced states come from the same attribute and can't fall out of step.
raicem
force-pushed
the
issue-1858-groups-site-review-fixes
branch
from
August 18, 2026 09:46
c458531 to
baf8148
Compare
bor0
reviewed
Aug 18, 2026
Member
There was a problem hiding this comment.
This looks great! Took a bunch of screenshots
| Description | Image |
|---|---|
| Desktop — front page (hero + upcoming events) |  |
| Desktop — front page (News section) |  |
| Desktop — single event page |  |
| Desktop — single event page (map) |  |
| Desktop — RSVP summary ("1 going") |  |
| Desktop — front page, logged in as organiser |  |
| Desktop — Members page grid |  |
| Desktop — Create event modal |  |
| Desktop — Create event, weekly repeat selected |  |
| Desktop — Create event, full recurrence controls |  |
| Desktop — Recurring event created (occurrence picker) |  |
| Desktop — RSVP toggled to "Attending" |  |
| Mobile — front page (top) |  |
| Mobile — front page sidebar (Membership/Settings) |  |
| Mobile — single event RSVP card |  |
Mobile — recurrence date picker: next arrow overlaps chip text (bug, pre-existing in gatherpress-recurring-events) |
 |
Mobile — Members grid overflows horizontally at ~500px (bug, pre-existing in responsive.css) |
 |
| Mobile — Create event modal |  |
An unrecognized stored country code disabled the entire About tab's Save button, even for unrelated edits. Location is now only sent on save if the user actually touched it. Also consolidates duplicated role labels, RSVP modal-title strings, the avatar cap, modal accent CSS, and the four section-heading styles into single sources. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
bor0
approved these changes
Aug 18, 2026
2 tasks done
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
2 participants
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.
events.wordpress.testand thesunshine-coast-qldgroup:https://events.wordpress.test/group/sunshine-coast-qld/: renders without errors; Upcoming events cards and the sidebar membership controls are present.https://events.wordpress.test/group/sunshine-coast-qld/members/: renders the member grid.https://events.wordpress.test/group/sunshine-coast-qld/events/: renders the card grid.