Fix: Show collaborators with top toolbar is active

[DarkMatter-999]

What?

Part of #76599

Makes the collaborators presence list visible in the header when Top Toolbar view is enabled and a block is selected.

Why?

When Top Toolbar view is enabled and a block is selected, the collaborators presence component was not being rendered in the header, making it unclear to users that there are other active collaborators on the post. This is an important piece of information for collaborative editing workflows.

This is an initial implementation to address the visibility issue. The design and UI placement may be refined in future iterations based on feedback.

How?

The fix involves two changes:

1. JavaScript (packages/editor/src/components/header/index.js): Added a conditional to render CollaboratorsPresence in the settings area when there is no center content (!hasCenter) and the viewport is wide enough (!isTooNarrowForDocumentBar). This ensures the collaborators list is visible regardless of whether a block is selected.
2. Styling (packages/editor/src/components/collaborators-presence/styles/collaborators-presence.scss): Moved the margin-right style from the global .editor-collaborators-presence class to a more specific selector (.editor-header__center .editor-collaborators-presence). This ensures proper spacing when the component appears in the center, while allowing the parent settings area's gap property to handle spacing when rendered in the settings area.

The two render locations are mutually exclusive due to the conditional logic, preventing any duplication.

Testing Instructions

1. Set up two browser windows/tabs with the same post open in the editor.
2. Enable Top Toolbar view (via preferences or editor settings).
3. In one window, select any block (e.g., a paragraph block) to ensure the block is focused.
4. Verify that the collaborators presence component (showing avatars of active users) is visible in the header.
5. Check that the collaborators list appears when you click on the presence component.
6. Disable Top Toolbar view and verify the collaborators presence still appears in the center of the header when no block is selected.
7. Test on narrow viewports to ensure the component respects viewport constraints.

Screenshots or screencast

Before

show-collaborators-top-toolbar.mov

After

show-collaborators-top-toolbar-fix.mov

PS- We can also have this alternate style for the collaborator presence when top bar is active to better match with the overall settings UI without the background.

Use of AI Tools

Used Github Copilot(Claude Sonnet 4.6) for initial PR review and description.

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: DarkMatter-999 <lakshyajeet@git.wordpress.org>
Co-authored-by: alecgeatches <alecgeatches@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[alecgeatches]

This looks great! Thank you for the fix.

[alecgeatches]

There was a performance test failure from before, I merged trunk to rerun. This PR should auto-merge if tests pass.

[alecgeatches]

Successfully merged. Thank you @DarkMatter-999!