+7 -1

src/components/SkyEditor.tsx

Reviewed

··· 77 77 78 78 const settings = { 79 79 // Core block-editor settings: a custom mediaUpload routes uploads to the PDS (SP3). 80 80 - editor: mediaUpload ? { mediaUpload } : {}, 80 80 + editor: { 81 81 + ...( mediaUpload ? { mediaUpload } : {} ), 82 82 + // isolated-block-editor defaults to a fixed top toolbar (the block tools 83 83 + // dock into the header). Turn that off so the contextual block toolbar 84 84 + // floats with — and follows — the selected block as you write. 85 85 + hasFixedToolbar: false, 86 86 + }, 81 87 iso: { 82 88 moreMenu: false, 83 89 footer: true,

+32 -4

src/styles/editor-chrome.css

Reviewed

··· 241 241 .skypress-editor .iso-editor .interface-interface-skeleton__header { 242 242 padding-top: 1rem; 243 243 } 244 244 + /* isolated-block-editor doesn't bundle `@wordpress/edit-post`'s header layout, so 245 245 + `.editor-header` ships with no flex rule — the right-hand settings region (which 246 246 + holds the Settings cog) has nothing pushing it to the top-right and reads as 247 247 + missing. Lay the header out ourselves: tools on the left, settings on the right. */ 248 248 + .skypress-editor .iso-editor .editor-header { 249 249 + display: flex; 250 250 + align-items: center; 251 251 + justify-content: space-between; 252 252 + } 244 253 .skypress-editor .iso-editor .edit-post-visual-editor { 245 254 background-color: transparent; 246 255 } ··· 267 276 .skypress-editor .iso-editor .components-accessible-toolbar .components-button { 268 277 color: var(--ink); 269 278 } 279 279 + /* The Settings (cog) button lives in the header's settings region — outside the 280 280 + toolbar groups re-skinned above — so it keeps Gutenberg's hard-coded near-black 281 281 + (#1e1e1e) icon colour and disappears against the dark paper surface. Tint it 282 282 + from the ink token like the toolbar buttons. */ 283 283 + .skypress-editor .iso-editor .editor-header__settings .components-button { 284 284 + color: var(--ink); 285 285 + } 286 286 + /* The block-inspector popover opened by that cog (`.iso-inspector`) collapses to 287 287 + its content width: isolated-block-editor doesn't bundle `@wordpress/interface`'s 288 288 + complementary-area sizing, so the panel has no width of its own. Give it the 289 289 + standard editor sidebar width. The popover portals out of `.skypress-editor`, 290 290 + so this rule is deliberately unscoped (the class is unique to this editor). */ 291 291 + .iso-inspector .components-popover__content { 292 292 + width: 280px; 293 293 + max-width: calc( 100vw - 2rem ); 294 294 + } 270 295 /* Both toolbar rows (document tools: insert/undo/redo; and the block tools that 271 296 appear on selection) sat flush against the editor's left edge — and the block 272 297 row carried no inline padding at all, so it didn't line up with the row above. ··· 276 301 padding-left: 0.75rem; 277 302 padding-right: 0.75rem; 278 303 } 279 279 - /* The "Show/Hide block tools" collapse toggle (`<<`/`>>`). The header toolbar 280 280 - stacks its rows vertically, so this toggle lands orphaned on its own line — 281 281 - and it's redundant here anyway: the block tools auto-expand whenever a block 282 282 - is selected, so the toggle never has a useful effect. Hide it. */ 304 304 + /* We run the editor with `hasFixedToolbar: false` so the block tools float with 305 305 + the selected block. But the package still renders a *docked* copy of the block 306 306 + toolbar in the header (gated only by viewport, not by the fixed-toolbar setting), 307 307 + so we'd get two block toolbars at once. Hide the docked one — the floating 308 308 + contextual toolbar is the single source of block tools — along with its now- 309 309 + pointless "Show/Hide block tools" collapse toggle (`<<`/`>>`). */ 310 310 + .skypress-editor .iso-editor .editor-collapsible-block-toolbar, 283 311 .skypress-editor .iso-editor .edit-post-header__block-tools-toggle { 284 312 display: none; 285 313 }