| 1 |
// Mini inserter — the popover behind the on-canvas "Add field" buttons. |
| 2 |
// |
| 3 |
// AddFieldButton renders the FULL inserter menu (search + tab strip) rather than |
| 4 |
// Gutenberg's quick inserter, so the hijacked "Existing Fields" tab is reachable |
| 5 |
// straight from the canvas. Core ships popover styling for this shape but sizes it |
| 6 |
// for the full-height sidebar; these rules bound it into a mini library and tighten |
| 7 |
// the cards for the narrower surface. |
| 8 |
// |
| 9 |
// Bare Gutenberg selectors → scoped under `.wppb-fb-block-editor` (see the |
| 10 |
// _editor-chrome.scss header for why). The popover portals into a body-level |
| 11 |
// `.components-popover__fallback-container`, inside the marked <body>, so the scope |
| 12 |
// holds. `:not(.is-quick)` is for core's own quick inserters, which the form builder |
| 13 |
// no longer opens anywhere. |
| 14 |
|
| 15 |
.wppb-fb-block-editor .block-editor-inserter__popover:not(.is-quick) { |
| 16 |
// Frame it — core leaves the menu variant on a drop shadow alone, which reads |
| 17 |
// as an unbounded sheet floating over the canvas. |
| 18 |
> .components-popover__content { |
| 19 |
border: 1px solid var(--wppb-fb-border-strong); |
| 20 |
border-radius: var(--wppb-fb-radius-md); |
| 21 |
} |
| 22 |
|
| 23 |
// ONE scroll region, sized to the space floating-ui gave the popover. Letting |
| 24 |
// the outer element scroll takes the tab strip out of view; capping the tab |
| 25 |
// panel instead produced TWO nested scrollbars when the popover's own clamp was |
| 26 |
// the smaller. So: stop the outer element scrolling, stretch the panel into it. |
| 27 |
// |
| 28 |
// Three load-bearing details. `min-height: 0` on every flex ancestor — a flex |
| 29 |
// item otherwise refuses to shrink below its content and overflows instead of |
| 30 |
// scrolling. `!important` — floating-ui's `size` middleware writes `max-height` |
| 31 |
// AND `overflow: auto` as INLINE styles here; we keep its computed max-height |
| 32 |
// (that IS the available-space clamp) and only take the scrolling away. |
| 33 |
// `flex-direction: column` — the inline max-height is a main-axis constraint |
| 34 |
// only in a column container; in `row` it can't shrink children and the list |
| 35 |
// gets clipped. |
| 36 |
> .components-popover__content { |
| 37 |
display: flex; |
| 38 |
flex-direction: column; |
| 39 |
overflow: hidden !important; |
| 40 |
} |
| 41 |
|
| 42 |
.block-editor-inserter__menu, |
| 43 |
.block-editor-inserter__main-area, |
| 44 |
.block-editor-tabbed-sidebar { |
| 45 |
display: flex; |
| 46 |
flex: 1; |
| 47 |
flex-direction: column; |
| 48 |
min-height: 0; |
| 49 |
} |
| 50 |
|
| 51 |
.block-editor-tabbed-sidebar__tabpanel { |
| 52 |
flex: 1; |
| 53 |
max-height: none; |
| 54 |
min-height: 0; |
| 55 |
overflow-x: hidden; |
| 56 |
overflow-y: auto; |
| 57 |
} |
| 58 |
|
| 59 |
// Core pads the block grid for the docked sidebar; trim it so three columns fit. |
| 60 |
.block-editor-inserter__panel-content { |
| 61 |
padding-left: var(--wppb-fb-space-md); |
| 62 |
padding-right: var(--wppb-fb-space-md); |
| 63 |
} |
| 64 |
|
| 65 |
// Same trim so the popover has ONE gutter — untouched, core's 16px inset leaves |
| 66 |
// the search box 12px narrower than the cards beneath it. Longhands only, or the |
| 67 |
// shorthand would also override the top padding. Applies to every tab's search: |
| 68 |
// WP 7.0 renders the field inside each tab panel. |
| 69 |
.block-editor-inserter__search { |
| 70 |
padding-left: var(--wppb-fb-space-md); |
| 71 |
padding-right: var(--wppb-fb-space-md); |
| 72 |
} |
| 73 |
} |
| 74 |
|
| 75 |
// Destinations that can't take an existing field — anywhere inside a Repeater, |
| 76 |
// whose sub-fields live in `get_option( $repeater_meta_name )` — keep the mini |
| 77 |
// inserter but lose the WHOLE tab strip: with "Existing Fields" out and "Examples" |
| 78 |
// already hidden, a one-tab strip is pure chrome. ExistingFieldsPanel's hijack sync |
| 79 |
// sets the class from the published destination (covering "Add sub-field" and the |
| 80 |
// in-between "+"), and mounts no card list there. |
| 81 |
.wppb-fb-block-editor .block-editor-inserter__popover.wppb-fb-no-existing-fields { |
| 82 |
// The row wrapping the tablist and its close button — hiding the wrapper takes |
| 83 |
// the row's 48px and any border with it. |
| 84 |
.block-editor-tabbed-sidebar__tablist-and-close-button { |
| 85 |
display: none; |
| 86 |
} |
| 87 |
|
| 88 |
// Belt and braces if that wrapper class ever changes: a reachable tab whose |
| 89 |
// panel we deliberately don't mount would open blank. |
| 90 |
[role="tab"]="tab""][id$="-media"]$="-media""] { |
| 91 |
display: none; |
| 92 |
} |
| 93 |
} |
| 94 |
|
| 95 |
// Invisible anchor for the intercepted "+" affordances (CanvasPointInserter.js). |
| 96 |
// `pointer-events: none` keeps the canvas underneath clickable (the popover portals |
| 97 |
// to the body, so it does NOT inherit it). The inline left/top are a starting point |
| 98 |
// only — the component keeps rewriting them so the anchor travels with the canvas, |
| 99 |
// which is what lets Popover's per-frame autoUpdate re-position AND re-size it. |
| 100 |
.wppb-fb-point-inserter { |
| 101 |
pointer-events: none; |
| 102 |
position: fixed; |
| 103 |
z-index: 100000; |
| 104 |
|
| 105 |
.wppb-fb-point-inserter__toggle { |
| 106 |
display: block; |
| 107 |
height: 100%; |
| 108 |
opacity: 0; |
| 109 |
width: 100%; |
| 110 |
} |
| 111 |
} |
| 112 |
|
| 113 |
// Root canvas appender (RootCanvasAppender.js): we render our own "Add field" node |
| 114 |
// at the end of the root list, so core's bare "+" appender has to go or both show. |
| 115 |
// ROOT ONLY — a nested `.block-list-appender` (Repeater / FFC) hosts OUR button as |
| 116 |
// core's `CustomAppender`, so the `.is-root-container >` chain is load-bearing. |
| 117 |
.wppb-fb-block-editor .block-editor-block-list__layout.is-root-container > .block-list-appender { |
| 118 |
display: none; |
| 119 |
} |
| 120 |
|
| 121 |
// Our own host node, whose lifetime doesn't depend on the block selection. |
| 122 |
.wppb-fb-block-editor .block-editor-block-list__layout.is-root-container > .wppb-fb-root-appender { |
| 123 |
display: block; |
| 124 |
width: 100%; |
| 125 |
} |
| 126 |
|
| 127 |
// Denser existing-field cards inside the mini inserter. The sidebar card is ~107px |
| 128 |
// tall, so barely three fit. This surface is for finding and inserting — inspecting |
| 129 |
// is the Field Settings sidebar's job — so drop the metadata rows and tighten up. |
| 130 |
.wppb-fb-existing-fields.is-mini { |
| 131 |
.wppb-fb-existing-fields__list { |
| 132 |
padding-left: var(--wppb-fb-space-md); |
| 133 |
padding-right: var(--wppb-fb-space-md); |
| 134 |
} |
| 135 |
|
| 136 |
.wppb-fb-existing-fields__card-main { |
| 137 |
padding: var(--wppb-fb-space-md); |
| 138 |
} |
| 139 |
|
| 140 |
// Hidden, not removed from the markup, so one component renders both surfaces. |
| 141 |
.wppb-fb-existing-fields__row { |
| 142 |
display: none; |
| 143 |
} |
| 144 |
|
| 145 |
// With the rows gone the card is a single title line, so the sidebar's |
| 146 |
// out-of-flow actions (see _existing-fields.scss) have nothing to clear. Put |
| 147 |
// them back in the title row — but going back into flow reintroduces the |
| 148 |
// height-jump the absolute positioning prevented (the ~24px button is taller |
| 149 |
// than the ~18px title line), so `min-height` below reserves it up front. |
| 150 |
.wppb-fb-existing-fields__header { |
| 151 |
margin-bottom: 0; |
| 152 |
} |
| 153 |
|
| 154 |
// Scoped through `__card-main`, which only TOP-LEVEL cards have: a sub-field |
| 155 |
// card carries no actions, so reserving button height would make every nested |
| 156 |
// row 6px taller for nothing. |
| 157 |
.wppb-fb-existing-fields__card-main .wppb-fb-existing-fields__header { |
| 158 |
min-height: 24px; // Button size="small" |
| 159 |
} |
| 160 |
|
| 161 |
.wppb-fb-existing-fields__actions { |
| 162 |
align-items: center; |
| 163 |
margin-left: auto; // pin right; the title row is a flex container |
| 164 |
position: static; // back in flow — `top`/`right` from the base rule go inert |
| 165 |
|
| 166 |
// Both existed to let the out-of-flow actions occlude a long title cleanly. |
| 167 |
// In flow they'd just shorten the title's box. |
| 168 |
background: none; |
| 169 |
padding-left: 0; |
| 170 |
} |
| 171 |
|
| 172 |
// Filter + search stay, minus the sidebar's wide inset. |
| 173 |
.wppb-fb-existing-fields__filter { |
| 174 |
padding-left: var(--wppb-fb-space-md); |
| 175 |
padding-right: var(--wppb-fb-space-md); |
| 176 |
} |
| 177 |
} |
| 178 |
|
