feat(block-editor): edit the open block in a Sheet when narrow #104

Merged

pienter merged 3 commits from task/pienter-ui__block-editor-ux__narrow-sheet into main 2026-09-19 22:58:31 +00:00

Conversation 0 Commits 3 Files changed 6 +295 -49

pienter commented 2026-09-19 22:08:13 +00:00

Owner

Copy link

Stacked on #101. In a container narrower than 44rem the open block's form opens in the package Sheet instead of a pane stacked under the list (at 420px the pane landed below all 20 rows and the row context was lost). Same title, Type · n / total, Previous/Next/Close (in the sheet footer); closing returns focus to the row. One mount of #block; crossing the breakpoint keeps the block open. Wide layout unchanged.

The breakpoint now lives in JS only (ResizeObserver on the root → data-layout="split|sheet"); the @container rule is gone, so SSR/first render is split until mount measures. The sheet stays closable while disabled (a modal that cannot be dismissed would lock the page).

Checks: typecheck, lint, format, bun test (139), both builds, BlockEditor play tests (11, incl. new NarrowContainer) green; Chrome: NarrowContainer story — full-height sheet, first field focused. Not checked: the playground at phone width (the automation window would not resize), searchable picker → sheet when narrow.

Goal: pienter-ui__block-editor-ux, ticket 40.

Stacked on #101. In a container narrower than 44rem the open block's form opens in the package `Sheet` instead of a pane stacked under the list (at 420px the pane landed below all 20 rows and the row context was lost). Same title, `Type · n / total`, Previous/Next/Close (in the sheet footer); closing returns focus to the row. One mount of `#block`; crossing the breakpoint keeps the block open. Wide layout unchanged. The breakpoint now lives in JS only (`ResizeObserver` on the root → `data-layout="split|sheet"`); the `@container` rule is gone, so SSR/first render is split until mount measures. The sheet stays closable while `disabled` (a modal that cannot be dismissed would lock the page). Checks: typecheck, lint, format, bun test (139), both builds, BlockEditor play tests (11, incl. new `NarrowContainer`) green; Chrome: NarrowContainer story — full-height sheet, first field focused. Not checked: the playground at phone width (the automation window would not resize), searchable picker → sheet when narrow. Goal: pienter-ui__block-editor-ux, ticket 40.

pienter added 1 commit 2026-09-19 22:08:13 +00:00

feat(block-editor): edit the open block in a Sheet when the container is narrow ... 0f43fb33fb

Below 44rem the pane no longer stacks under the list; the open block's form
opens in a Sheet with the same title, position and previous/next.

pienter changed target branch from fix/index-validate-before-load to main 2026-09-19 22:54:11 +00:00

pienter added 1 commit 2026-09-19 22:56:06 +00:00

merge e5f07d2d12

pienter added 1 commit 2026-09-19 22:57:30 +00:00

merge fd8b9f70d9

pienter merged commit c2741dd8ed into main 2026-09-19 22:58:31 +00:00

pienter deleted branch task/pienter-ui__block-editor-ux__narrow-sheet 2026-09-19 22:58:31 +00:00

pienter referenced this pull request from a commit 2026-09-19 22:58:33 +00:00

Merge pull request 'feat(block-editor): edit the open block in a Sheet when narrow' (#104) from task/pienter-ui__block-editor-ux__narrow-sheet into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

pienter/ui!104

No description provided.