| 1 |
// Editor-chrome cleanup for PB form CPT screens. |
| 2 |
// |
| 3 |
// The `.wppb-fb-block-editor` wrapper is REQUIRED, not cosmetic: this stylesheet is |
| 4 |
// every PB block's `editor_style`, so WordPress loads it on EVERY block-editor |
| 5 |
// screen. The rules below use bare generic Gutenberg selectors; unscoped they would |
| 6 |
// restyle posts, pages, the Site Editor and the Widgets screen. The marker class is |
| 7 |
// added to the main <body> by admin_body_class (form-builder-editor-chrome.php) and |
| 8 |
// to the canvas iframe <body> by components/EditorBodyClass.js. Inner rules keep |
| 9 |
// their original indentation to keep the scoping diff reviewable. |
| 10 |
.wppb-fb-block-editor { |
| 11 |
// Existing Fields tab hijack: suppress Gutenberg's own children of the Media |
| 12 |
// tabpanel so only our portalled panel shows. |
| 13 |
.wppb-fb-existing-fields-hijacked > *:not(.wppb-fb-existing-fields-injected) { |
| 14 |
display: none !important; |
| 15 |
} |
| 16 |
|
| 17 |
// Hide the Settings sidebar's "Block" tab — PB blocks route their inspector content |
| 18 |
// to the Field Settings PluginSidebar, so it would land on an empty pane. The |
| 19 |
// keyboard/dispatch route is closed separately in FieldSettingsAutoOpener. |
| 20 |
.interface-complementary-area [role="tab"]="tab""][data-tab-id="edit-post/block"]="edit-post/block""] { |
| 21 |
display: none; |
| 22 |
} |
| 23 |
|
| 24 |
// With one tab left, Gutenberg's overflow fade-mask fades the only visible tab. |
| 25 |
// `!important`: the mask comes from an emotion class of equal specificity. |
| 26 |
.interface-complementary-area [role="tablist"]="tablist""] { |
| 27 |
mask-image: none !important; |
| 28 |
-webkit-mask-image: none !important; |
| 29 |
} |
| 30 |
|
| 31 |
// Hide the Patterns tab (renamed → "Examples" in JS): no PB examples yet, so it |
| 32 |
// lands on an empty pane. Re-enabling is just deleting this rule. |
| 33 |
.block-editor-tabbed-sidebar [role="tab"]="tab""][id$="-patterns"]$="-patterns""] { |
| 34 |
display: none; |
| 35 |
} |
| 36 |
|
| 37 |
// Hide the inserter's "Tips" panel. Its heading is already VisuallyHidden, so this |
| 38 |
// drops only the decorative hint. |
| 39 |
.block-editor-inserter__tips { |
| 40 |
display: none; |
| 41 |
} |
| 42 |
|
| 43 |
// Pin the inserter search field while the list scrolls beneath it. Applies to both |
| 44 |
// tabs carrying `.block-editor-inserter__search` (native + hijacked). |
| 45 |
.block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__search { |
| 46 |
position: sticky; |
| 47 |
top: 0; |
| 48 |
z-index: 1; |
| 49 |
background: var(--wppb-fb-surface-default); |
| 50 |
} |
| 51 |
|
| 52 |
// Layer 8d: hide the toolbar "+" inserter toggle — the inserter is forced open by |
| 53 |
// components/ForceOpenInserter.js, so the toggle only flickers. Core ships a stable |
| 54 |
// (0,3,0) chain, so we replicate it + `.components-button` for (0,4,0) rather than |
| 55 |
// reaching for `!important`. |
| 56 |
.editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.components-button { |
| 57 |
display: none; |
| 58 |
} |
| 59 |
|
| 60 |
// The inserter panel's own "Close Block Inserter" (✕): same rationale. |
| 61 |
// `.components-button` appended for (0,2,0) over core's generic (0,1,0) rule. |
| 62 |
.block-editor-tabbed-sidebar__close-button.components-button { |
| 63 |
display: none; |
| 64 |
} |
| 65 |
|
| 66 |
// Layer 10: hide Undo / Redo / Document Overview (their shortcuts are already |
| 67 |
// unregistered by Layer 9). Ancestry + `.components-button` = (0,4,0) over core's |
| 68 |
// (0,3,0); descendant combinator so it holds if a button stops being a direct child. |
| 69 |
.editor-document-tools .editor-document-tools__left .editor-history__undo.components-button, |
| 70 |
.editor-document-tools .editor-document-tools__left .editor-history__redo.components-button, |
| 71 |
.editor-document-tools .editor-document-tools__left .editor-document-tools__document-overview-toggle.components-button { |
| 72 |
display: none; |
| 73 |
} |
| 74 |
|
| 75 |
// Layer 11: hide the "Ctrl+K" command-palette hint — `core/commands` is unregistered |
| 76 |
// by Layer 9. Scoping through `.editor-document-bar__command` gives (0,2,0), needed |
| 77 |
// to beat core's equal-specificity `@media` rule that flips it back on wide screens. |
| 78 |
.editor-document-bar__command .editor-document-bar__shortcut { |
| 79 |
display: none; |
| 80 |
} |
| 81 |
|
| 82 |
// Layer 12: make the center document bar non-interactive — its only control opens |
| 83 |
// the disabled command palette. pointer-events is INHERITED, so anchoring at the |
| 84 |
// wrapper cascades to every descendant. Title text stays readable; the button stays |
| 85 |
// keyboard-focusable, which is acceptable while the palette is neutered. |
| 86 |
.editor-document-bar { |
| 87 |
pointer-events: none; |
| 88 |
} |
| 89 |
|
| 90 |
// Layer 13: hide View + Options (the two `.components-dropdown-menu` direct children) |
| 91 |
// and Settings (the sole `.interface-pinned-items` control), leaving Preview and Save |
| 92 |
// — neither of which matches. Scoped (0,2,0) over core's (0,1,0). |
| 93 |
.editor-header__settings > .components-dropdown-menu, |
| 94 |
.editor-header__settings .interface-pinned-items { |
| 95 |
display: none; |
| 96 |
} |
| 97 |
|
| 98 |
// Layer 14: the Document sidebar is always open and un-closable (the behavioral half |
| 99 |
// is FieldSettingsAutoOpener), so hide its "Close Settings" ✕. The wrapper id uses |
| 100 |
// ':' where the store name uses '/'. Specificity: this header carries |
| 101 |
// `.editor-sidebar__panel-tabs`, for which core ships a (0,4,0) `display: flex` inside |
| 102 |
// a min-width media query — matching the button's own `.components-button.has-icon` |
| 103 |
// raises us to (0,5,1). The `:not()` is defensive; no pin renders today. |
| 104 |
[id="edit-post:document"]="edit-post:document""] > .interface-complementary-area-header > button.components-button.has-icon:not(.interface-complementary-area__pin-unpin-item) { |
| 105 |
display: none; |
| 106 |
} |
| 107 |
|
| 108 |
// Layer 15: hide the block toolbar's Options (⋮) dropdown — the only relevant field |
| 109 |
// action, Delete, is surfaced as its own toolbar button by BlockToolbarDelete.js. |
| 110 |
// BOTH selectors are load-bearing: the `:has()` one also hides the dropdown's bare |
| 111 |
// `.components-toolbar-group`, which would otherwise leave a ~12px flex gap; the |
| 112 |
// inner one is the `:has()`-less fallback (worst case the gap returns). |
| 113 |
.block-editor-block-toolbar .block-editor-block-settings-menu, |
| 114 |
.block-editor-block-toolbar .components-toolbar-group:has( > .block-editor-block-settings-menu ) { |
| 115 |
display: none; |
| 116 |
} |
| 117 |
|
| 118 |
// Layer 16: hide the "Unlock" button. Mandatory Registration fields carry |
| 119 |
// server-injected `attrs.lock = { remove: true }`; the lock modal would let a user |
| 120 |
// clear it and delete the field. (The Options-dropdown "Lock" route died with Layer |
| 121 |
// 15.) This element IS its own toolbar-group, so no `:has()` trick is needed. |
| 122 |
.block-editor-block-toolbar .block-editor-block-lock-toolbar { |
| 123 |
display: none; |
| 124 |
} |
| 125 |
|
| 126 |
// Layer 17: kill the block-switcher's INTERACTION but keep the icon (a block-type |
| 127 |
// indicator; its transform menu is empty for every PB block). `pointer-events` over |
| 128 |
// `display: none` so the icon survives and no empty flex gap appears. |
| 129 |
// |
| 130 |
// The `*` and the `!important` are BOTH load-bearing (verified live, whack-a-mole): |
| 131 |
// core re-asserts `pointer-events: all` on the contextual toolbar, on the toggle, and |
| 132 |
// on the icon SVG, and a descendant that re-enables it still captures the click even |
| 133 |
// under an ancestor's `none`. Wrapper-only and wrapper+toggle both stayed clickable. |
| 134 |
.block-editor-block-toolbar .block-editor-block-switcher, |
| 135 |
.block-editor-block-toolbar .block-editor-block-switcher * { |
| 136 |
pointer-events: none !important; |
| 137 |
} |
| 138 |
|
| 139 |
// Layer 19: hide the editor footer (the block-breadcrumb bar) — structural navigation |
| 140 |
// for free-form documents, noise on a fixed field palette, and absent from the target |
| 141 |
// design shell. Nothing else lands in this region (Layer 2 default-denies meta-boxes). |
| 142 |
// Scoped through the skeleton ancestor for (0,2,0) over core's (0,1,0). |
| 143 |
.interface-interface-skeleton .interface-interface-skeleton__footer { |
| 144 |
display: none; |
| 145 |
} |
| 146 |
|
| 147 |
// …and reclaim the clearance core reserves for that absolutely-positioned footer |
| 148 |
// (a `padding-bottom` on the scrolling body), which is now a dead strip. |
| 149 |
.interface-interface-skeleton .interface-interface-skeleton__body { |
| 150 |
padding-bottom: 0; |
| 151 |
} |
| 152 |
} // end .wppb-fb-block-editor scope |
| 153 |
|
