| 1 |
// "New Fields" tab — visual treatment of Gutenberg's native block inserter to |
| 2 |
// match the designer mockup's field palette (eyebrow category headers + a grid |
| 3 |
// of icon-over-label field tiles). VISUAL ONLY — the categories themselves are |
| 4 |
// the block.json registration categories; re-grouping fields into semantic |
| 5 |
// buckets (STRUCTURE / ACCOUNT / NAME / PROFILE) is a separate IA change. |
| 6 |
// |
| 7 |
// Targets Gutenberg's stable inserter classes. Our SCSS only loads on PB form |
| 8 |
// CPTs, and these classes appear only in the native "New Fields" tab (the |
| 9 |
// "Existing Fields" tab renders its own `.wppb-fb-existing-fields__*` markup), |
| 10 |
// so the rules are implicitly scoped to the right tab. Tokens: _tokens.scss. |
| 11 |
|
| 12 |
// Duplicated category headers (each title twice, the second set holding two or |
| 13 |
// three blocks) are core, not a loading race: WP 7.0's `BlockTypesTab` renders the |
| 14 |
// list twice through the same categories — `…insertable-blocks-at-selection` (items |
| 15 |
// allowed at the current insertion point) then `…all-blocks` (the rest) — separated |
| 16 |
// by a bare 1px border. It only shows where the destination is restricted (a Columns |
| 17 |
// appender's mini inserter, or the docked sidebar while a field inside Columns is |
| 18 |
// selected). Group 2's items can't go where the user is pointing; core would insert |
| 19 |
// them somewhere else, which reads as "it ignored where I clicked". |
| 20 |
// |
| 21 |
// The adjacent-sibling form is deliberate: group 2 is hidden only when group 1 |
| 22 |
// exists, so a destination where NOTHING is insertable still lists blocks. |
| 23 |
.wppb-fb-block-editor .block-editor-inserter__insertable-blocks-at-selection { |
| 24 |
border-bottom: none; |
| 25 |
|
| 26 |
+ .block-editor-inserter__all-blocks { |
| 27 |
display: none; |
| 28 |
} |
| 29 |
} |
| 30 |
|
| 31 |
// Category header → the mockup's eyebrow label. These are generic inserter classes |
| 32 |
// present in every editor, hence the `.wppb-fb-block-editor` scope. |
| 33 |
.wppb-fb-block-editor .block-editor-inserter__panel-header .block-editor-inserter__panel-title, |
| 34 |
.wppb-fb-block-editor .block-editor-inserter__panel-title { |
| 35 |
color: var(--wppb-fb-text-muted); |
| 36 |
font-size: var(--wppb-fb-font-xs); |
| 37 |
font-weight: 600; |
| 38 |
letter-spacing: 0.04em; |
| 39 |
text-transform: uppercase; |
| 40 |
|
| 41 |
// The title button/label Gutenberg wraps inside inherits the same look. |
| 42 |
button, |
| 43 |
.components-button { |
| 44 |
color: inherit; |
| 45 |
font: inherit; |
| 46 |
letter-spacing: inherit; |
| 47 |
text-transform: inherit; |
| 48 |
} |
| 49 |
} |
| 50 |
|
| 51 |
// Field tiles — icon over label cards. Give each tile a light card treatment |
| 52 |
// with a subtle hover so the palette reads like the mockup's tile grid. Layout |
| 53 |
// (the ~3-column flow) is left to Gutenberg's own grid so its roving-tabindex |
| 54 |
// keyboard navigation keeps working; we only tune appearance + hover. |
| 55 |
.wppb-fb-block-editor .block-editor-block-types-list__item { |
| 56 |
border-radius: var(--wppb-fb-radius-md); |
| 57 |
color: var(--wppb-fb-text-primary); |
| 58 |
transition: background 0.15s ease, color 0.15s ease; |
| 59 |
|
| 60 |
&:hover, |
| 61 |
&:focus { |
| 62 |
background: var(--wppb-fb-surface-subtle); |
| 63 |
color: var(--wppb-fb-accent); |
| 64 |
} |
| 65 |
} |
| 66 |
|
| 67 |
// Tile label — the block title under the icon (mockup's tile caption: 12px, |
| 68 |
// muted). `.block-editor-block-types-list__item-title` is the stable label node. |
| 69 |
.wppb-fb-block-editor .block-editor-block-types-list__item-title { |
| 70 |
color: var(--wppb-fb-text-muted); |
| 71 |
font-size: var(--wppb-fb-font-sm); |
| 72 |
} |
| 73 |
|
