Repository navigation
feat(admin): replace distraction-free mode with a settings panel toggle - #4779
khoinguyenpham04 wants to merge 4 commits into
Conversation
Writers who want the page alone had only distraction-free mode, which also hides the editor bar. The toggle keeps the bar and slides the panel away without unmounting it, so unsaved panel values survive. An open image or gallery panel shows the panel until it closes, and an invalid panel control on Save reveals it, without overwriting the remembered choice. Hiding closes an open image or gallery panel, as Escape does.
Layout only shows up with real CSS: the zero-width clip, page centering, the Arabic placement, and the reveals for image settings and versions.
The settings panel toggle now hides the panel so the page can take the full width, which covers what distraction-free mode was for, and the editor bar had too many controls. Remove the bar button, the mod+shift+\ shortcut, the full-screen overlay, the bar's extra publishing fallbacks, and the props that only that mode used.
🦋 Changeset detectedLatest commit: 82d720b The changes in this PR will be included in the next version bump. This PR includes changesets to release 12 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
@emdash-cms/admin
@emdash-cms/auth
@emdash-cms/auth-atproto
@emdash-cms/blocks
@emdash-cms/cloudflare
@emdash-cms/contentful-to-portable-text
emdash
create-emdash
@emdash-cms/gutenberg-to-portable-text
@emdash-cms/plugin-cli
@emdash-cms/plugin-test
@emdash-cms/plugin-types
@emdash-cms/registry-client
@emdash-cms/registry-lexicons
@emdash-cms/registry-loader
@emdash-cms/registry-moderation
@emdash-cms/registry-verification
upgrade-emdash
@emdash-cms/sandbox-workerd
@emdash-cms/x402
@emdash-cms/plugin-ai-moderation
@emdash-cms/plugin-ai-search
@emdash-cms/plugin-atproto
@emdash-cms/plugin-audit-log
@emdash-cms/plugin-color
@emdash-cms/plugin-embeds
@emdash-cms/plugin-field-kit
@emdash-cms/plugin-forms
@emdash-cms/plugin-webhook-notifier
commit: |
![emdashbot[bot]](https://avatars.githubusercontent.com/in/3255304?s=60&v=4){kind=small}
There was a problem hiding this comment.
The approach is sound. A collapsible settings panel fixes the cramped desktop editor, the hook fits the existing sidebar architecture, and removing distraction-free mode matches the maintainer-approved scope in the PR description. Both reviewers approved and found no blocking issues. Reviewer notes covered persistence and breakpoint handling, the panel staying mounted, inert on the collapsed panel, deferred validation reporting when Save is blocked by a hidden invalid control, revision navigation, RTL, localization, and removal of the old props and hotkey. One non-blocking suggestion is to improve the changeset text and add the new toggle to the user guide. Two gaps remain. The Feature box is checked but no merged design PR is linked, so a maintainer should confirm the description's approval is enough. One reviewer could not confirm that Kumo's Sidebar accepts contentClassName and inert, or that it calls onOpenChangeComplete on controlled changes. The review was static and no tests or builds were run.
Reviewed by anthropic/claude-opus-5-5 and openai/gpt-6.1-sol.
Visual regression: 4 screens changedThese admin screens render differently on this PR. Confirm every change below is intended before accepting.
Maintainers: if every change above is intended, comment Measured head: |
The content guide only described the version stepper on phones and never said the settings panel can be hidden. The toggle changeset now names the button and the cases that open a hidden panel.
|
/accept-baselines |
|
The |
🚀 Deploying Preview to Cloudflare 🚀Preview URL: https://noah-editor-panel-toggle-2fa587.try.emdashcms.com, https://noah-editor-panel-toggle-2fa587-emdash-playground.emdash-cms.workers.dev (commit 82d720b)This URL reflects your latest Preview deploymentPreview Deployments by commit
|
There was a problem hiding this comment.
The approach remains sound, and this documentation-only follow-up addresses the earlier suggestion. The changeset now names Hide settings / Show settings and explains automatic panel opening and revision navigation. The user guide covers the same behavior.
I reviewed both changed files against the documentation conventions and relevant editor implementation. No new defects or outstanding findings in this follow-up. Review was static; no tests or builds were run.
Follow-up review by openai/gpt-6.1-sol, scoped to the changes since the last review.
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
docs | 82d720b | Nov 09 2026, 04:23 PM |
What does this PR do?
On desktop the content editor's settings panel is always open, so the page gets whatever width is left. On a 1024px screen that is about 400px. This PR adds a button at the end of the editor bar that hides the panel. The page then centers in the full width, and a second click shows the panel again. Because the panel can now be hidden, the maintainers agreed to remove distraction-free mode, which put one more button in an already busy bar.
What changed
useSettingsPanelhook owns this state, which keeps the hunks inContentEditor.tsxsmall.Scope
Tradeoffs
Blast radius
This changes admin layout only. It changes no API, schema, config or plugin contract. Writers who used distraction-free mode lose it. On desktop the toggle covers its full-width use. The visual regression baselines for the editor screens change because the bar changed, so they need a maintainer
/accept-baselines.Type of change
Your connection to this change
Checklist
pnpm typecheckpassespnpm lintpassespnpm testpasses (or targeted tests for my change)pnpm formathas been runmessages.pochanges except in translation PRs — a workflow extracts catalogs on merge tomain.AI assistance disclosure
Screenshots / test output
The bar ends with the new toggle instead of the distraction-free button. In Arabic the panel and the toggle sit on the left.
Hiding the panel gives the page the full width.
Arabic
Verification:
editor-settings-panel.spec.ts, covers hide, reload and show, measures the page centering and the hidden panel's width to 1px, and checks that a typed slug survives. It also covers Arabic, image settings opening a hidden panel, and the version stepper. With the content actions, revisions, image panel, autosave and plugin editor extension specs, 31 tests pass in Chromium.