| 1 |
// Spacing rules mirroring Gutenberg's `.block-editor-block-inspector` scope. |
| 2 |
// The native Block sidebar wraps controls in that container, whose CSS supplies |
| 3 |
// margin-bottom between successive base/radio controls. Our right-rail surfaces |
| 4 |
// (the Field Settings PluginSidebar AND the Document sidebar's |
| 5 |
// PluginDocumentSettingPanels for Form Settings / Progress Bar / MSF / FFC) lack |
| 6 |
// that ancestor, so controls would otherwise collapse against each other. |
| 7 |
// |
| 8 |
// Scope: `.interface-complementary-area` covers every right-rail container on |
| 9 |
// our screens; SCSS only loads on PB form CPTs, so it can't leak elsewhere. We |
| 10 |
// mirror only the vertical-rhythm rules — NOT inspector chrome like separators |
| 11 |
// or panel headers. |
| 12 |
// Scoped to PB form CPT screens via `.wppb-fb-block-editor` (see |
| 13 |
// _editor-chrome.scss header): this partial ships in the bundle stylesheet that |
| 14 |
// loads on every block-editor screen, and `.interface-complementary-area` is the |
| 15 |
// generic right-rail container present on ALL editors — without the scope these |
| 16 |
// spacing rules would pad the block inspector on posts/pages/other CPTs. |
| 17 |
.wppb-fb-block-editor .interface-complementary-area { |
| 18 |
// Section header typography — the mockup's collapsible section titles |
| 19 |
// ("Shortcode", "After submission", …) read as label-lg (14/600, primary). |
| 20 |
// The PanelBody title text lives in the toggle button inside |
| 21 |
// `.components-panel__body-title`; style the text there (keep the chevron |
| 22 |
// Gutenberg renders on the right). |
| 23 |
.components-panel__body > .components-panel__body-title .components-button { |
| 24 |
color: var(--wppb-fb-text-primary); |
| 25 |
font-size: var(--wppb-fb-font-lg); |
| 26 |
font-weight: 600; |
| 27 |
} |
| 28 |
|
| 29 |
.components-panel__body { |
| 30 |
.block-editor-html-element-control:where(:not(:last-child)), |
| 31 |
.block-editor-image-size-control:where(:not(:last-child)), |
| 32 |
.components-base-control:where(:not(:last-child)), |
| 33 |
.components-radio-control:where(:not(:last-child)) { |
| 34 |
margin-bottom: var(--wppb-fb-space-xl); |
| 35 |
} |
| 36 |
|
| 37 |
// CheckboxControl renders <ul><li> for grouped choices via the parent |
| 38 |
// component (e.g. user-role / location pickers). The legacy inspector |
| 39 |
// styles add inter-item breathing room through generic descendant |
| 40 |
// rules; replicate just the list-spacing piece here. |
| 41 |
.components-checkbox-control + .components-checkbox-control { |
| 42 |
margin-top: var(--wppb-fb-space-sm); |
| 43 |
} |
| 44 |
|
| 45 |
// Notices used as in-panel callouts (login-with-email, no-selectable- |
| 46 |
// roles, add-on-inactive, conditional-logic warnings, …) also render |
| 47 |
// outside .components-base-control and carry no margin of their own, so |
| 48 |
// the control that follows fuses to them. |
| 49 |
.components-notice:where(:not(:last-child)) { |
| 50 |
margin-bottom: var(--wppb-fb-space-xl); |
| 51 |
} |
| 52 |
|
| 53 |
// ToggleControl + help-text combos need breathing room so the next |
| 54 |
// control isn't fused to the prior group. Inspector gets this via the |
| 55 |
// base-control margin-bottom (above), but ToggleControl historically |
| 56 |
// renders outside .components-base-control, so add an explicit margin. |
| 57 |
.components-toggle-control:where(:not(:last-child)) { |
| 58 |
margin-bottom: var(--wppb-fb-space-xl); |
| 59 |
} |
| 60 |
} |
| 61 |
} |
| 62 |
|
