Connectors: Redesign connector items as collapsible cards#75934
Closed
Jameswlepage wants to merge 1 commit intotrunkfrom
Closed
Connectors: Redesign connector items as collapsible cards#75934Jameswlepage wants to merge 1 commit intotrunkfrom
Jameswlepage wants to merge 1 commit intotrunkfrom
Conversation
Replace the flat Item-based layout with collapsible cards for each connector on the Settings > Connectors page. The collapsed state shows the connector icon, name, description, and a CTA (Install/Activate). A chevron toggle expands the card to reveal the API key form with an inline Save button. This removes the separate Cancel, Set up, and Edit buttons in favor of the chevron control.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
github-actions
bot
added
the
First-time Contributor
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Jameswlepage! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
|
Size Change: +342 B (+0.01%) Total Size: 6.84 MB
ℹ️ View Unchanged
|
jorgefilipecosta
added
the
Backport to WP 7.0 Beta/RC
jorgefilipecosta
approved these changes
Feb 26, 2026
Contributor
|
I'm a little confused: these were already collapsible cards. It seems the primary change here in the UX is replacing the "Edit" CTA with a more ambiguous chevron icon button. It also seems we've lost the status badge, which was intended to help users better understand with connectors are setup and working. In the future the status could also indicate when a connection is broken. |
Contributor
|
We also removed the setup button. This means users won't have an obvious way to know if a connector is actually setup or not. |
jameskoster
reviewed
Feb 26, 2026
Comment on lines
+9
to
15
| .connector-card { | ||
| padding: 20px; | ||
| border-radius: 8px; | ||
| border: 1px solid #ddd; | ||
| background: #fff; | ||
| overflow: hidden; | ||
| } |
Contributor
There was a problem hiding this comment.
Any reason not to use Card from @wordpress/components?
| } | ||
|
|
||
| .connector-settings__help { | ||
| font-size: 12px; |
Contributor
There was a problem hiding this comment.
There should be a scss var for this.
| import { useConnectorPlugin } from './use-connector-plugin'; | ||
| import { OpenAILogo, ClaudeLogo, GeminiLogo } from './logos'; | ||
|
|
||
| const ConnectedBadge = () => ( |
Member
There was a problem hiding this comment.
We could use it but the looks of it don't match the proposed design, namely the green tone (and in this specific interface the proposed tone felt better). @shaunandrews would it be ok if we use this badge for connected instead:
Contributor
|
Just my 2c but I think we ought to consider using DataViews for this layout. That seems the best safest way to ensure system compatibility moving forwards given the tight deadline. A hacky mockup to illustrate the idea: 
|
5 tasks
Member
Personally I think as a user I prefer the current version instead of Dataviews. The Dataviews UI there feel like too heavy, I think the idea of this screen wold be to show max 7-8 connectors, which would probably fit 90%+ of sites. And using Dataviews for a so shot list does not seems to be very useful. For cases where a website has too many connectors I can imagine us showing max 7-8 more popular right away and then have a browse all connector buttons to select additional connectors similar to what Claude connectors does https://claude.ai/settings/connectors. From the technical point of view using dataviews would also not remove the amount of code we have to maintain. On the contrary the UI we have is simple does not has lots of code and we could even reduce the code a bit more by trying to reuse some components like badge and card. Creating a Dataview, actions, fields etc..., would probably take more code that the code we have now so we would have more code to maintain. |
Contributor
|
The main motivation for using DataViews is to avoid creating one-off UI and the maintenance that comes with it. There is sometimes a tendency to build new interfaces where existing tools could serve adequately. Sometimes that’s justified, but it’s worth scrutinising to avoid introducing unnecessary maintenance. Another reason is to sidestep the accessibility issues, and to benefit from built-in capabilities such as bulk actions. For example, if a user wanted to disable all connectors at once, repeating that process individually, even just three or four times would be quite tedious. I don't find something like this to be much heavier than the current direction to be honest: 
|
Member
That's a totally fair point but in this case I guess using Dataviews would not necessarily decrease the maintainability needs. We would probably have more code not less as I bet any PR to use Dataviews would have more lines added than lines decrease.
Regarding a11y issues they could be addressed on the current design there is nothing big there, just labelling focus handling etc... Things that could be easily fixable. With Dataviews some issues would be solved, but others would still need to be manually adjusted like on the current design.
Yes that's an advantage we could offer with dataviews. But I don't expect the need to disable multiple providers to be common, I guess most users choose a provider and connect to it/use it. Most user will not have connections to multiple providers.
Yes this image also does not feel heavy. But when a user opens the panel for the first time, there are no connections so no bulk actions and the select checkbox will be disabled for all the items, status would be repetition of "Not installed" for all the items, an "Install" button would be visible when hovering. We could consider offering bulk install to have the checkbox enable for new users, in that case users would then need to setup keys individually for each provider. Dataviews would also make extensibility complexer, as third party connectors, would need to provide an async way to retrieve their status, and we would only have some setup action for all of them. I'm not sure if it is as flexible, on the current design a provider could for example say "Connect out of credits" as status and render a "Buy credits" as an action button. Or say "Connect free version" and render "Upgrade" as a button even if things are already setup. I don't think on dataviews each row can provide their own actions. I think the actions are common for all the rows but each row can define if it is eligible or not for the action. I guess to decide on the Dataviews use or not (or any other design change), we would need to see the flows like when a plugin is installing and activating how would this busy stats be communicated? After installing and activating would we automatically open a modal for typing the keys? Would key typing be in a modal? I guess the decision is for @Jameswlepage and @shaunandrews. Happy to help/implement on anything that's decided. Any design change we do should probably be decided this week so we could implement and test next before the last beta. |
4 tasks
jorgefilipecosta
added
the
Connectors screen
Contributor
|
I don't have a strong feeling either way ❤️ I just felt compelled to point out potential re-usability as I've noticed that one-off UI's can end up stagnating and feeling out-of-place over time. |
Member
|
Noting from today's core-ai office hours in Slack that it was decided that this PR will be closed and keep the Connectors design as-is. Also decided was to NOT proceed with DataViews during 7.0, but perhaps to consider that in the 7.1 cycle. |
t-hamano
removed
the
Backport to WP 7.0 Beta/RC
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
6 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.
What?
Follow-up to #75833.
Redesign the connector items on the Settings > Connectors page from flat
Itemcomponents to collapsible cards with a chevron toggle.Why?
The initial Connectors screen shipped with a flat layout where expanding/collapsing the API key form was handled by a multi-purpose button (Cancel/Set up/Edit). This PR introduces a more standard collapsible card pattern that separates the expand/collapse concern (chevron) from the primary action (Install/Activate), making the UI cleaner and more intuitive.
How?
connector-item.tsx: Replace<Item>wrapper with a<div>-based card. AddisExpandedandonToggleprops. Render aButtonwith achevronDownicon that rotates when expanded. The toggle only renders whenonToggleis provided.connector-item.tsx(DefaultConnectorSettings): In edit mode, place theTextControland Save button inline in anHStack. Help/error text rendered below usingTextcomponent. Read-only mode keeps the vertical layout.default-connectors.tsx: PassisExpanded/onToggletoConnectorItem. Only provideonTogglewhenpluginStatus === 'active'so the chevron is hidden for not-installed/inactive plugins. Hide the action button when the label is empty.use-connector-plugin.ts: Remove Cancel, Set up, and Edit labels fromgetButtonLabel(). SimplifyhandleButtonClick()to only handle install/activate.style.scss: Replace.components-itemstyles with.connector-cardcard styles. Add chevron rotation, body separator, inline input+save layout, and help text styles.Testing Instructions
/wp-admin/options-general.php?page=connectors-wp-admin).Testing Instructions for Keyboard
Screenshots or screencast