Automattic / Automattic/jetpack
Forms: the Below form style is unregistered and its editor CSS selector never matches
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Summary
The "Below" form style is dead in two independent ways: it isn't registered as a block style, and the one CSS rule implementing it uses a selector that cannot match. Reviving it means fixing both.
### 1. The style isn't registered
`projects/packages/forms/src/blocks/contact-form/index.jsx`:
```js
styles: [
{ name: 'default', label: __( 'Default', 'jetpack-forms' ), isDefault: true },
{ name: 'animated', label: __( 'Animated', 'jetpack-forms' ) },
{ name: 'outlined', label: __( 'Outlined', 'jetpack-forms' ) },
// Need to figure out some details. Putting on hold for now
// { name: 'below', label: 'Below' },
],
```
`git log -S` places that comment in fb1467d9f6 (Feb 2023); it has never been uncommented. So the style has never shipped, it can't be selected in the editor, and no saved content can carry `is-style-below` unless someone hand-authored it.
### 2. The editor rule can't match
`projects/packages/forms/src/blocks/contact-form/editor.scss`, nested under `.jetpack-contact-form`:
```scss
&.is-style-below {
.jetpack-field:not(.jetpack-field-checkbox) {
display: flex;
flex-direction: column-reverse;
}
}
```
`&.is-style-below` compiles to `.jetpack-contact-form.is-style-below` — both classes on the same element. In the editor they're on different elements. Measured in the canvas with the class hand-applied:
```
.jetpack-contact-form → "jetpack-contact-form has-no-jetpack-form-layout block-editor-block-list__layout …"
.is-style-below → "block-editor-block-list__block wp-block is-style-below wp-block-jetpack-contact-form"
sameElement: false styleClassIsAncestorOfJcf: true
```
The `outlined` and `animated` rules immediately above use the ancestor form (`.is-style-outlined &`), which is the shape that actually matches. Below is the odd one out. `flex-direction` on the field measured `row`, never `column-reverse`.
The **front end is unaffected** — it goes through `render_below_label()` rather than a CSS reversal.
### What reviving it involves
1. Correct the selector to the ancestor form used by the other two styles.
2. Account for the current field DOM: `.jetpack-field`'s direct children are now `.jetpack-field__control` (label + input) and `.contact-form__field-hints`, so the reversal belongs on `.jetpack-field__control` (and `.jetpack-field-dropdown__wrapper` for select) — otherwise it reverses the hints above the field instead of putting the input above the label.
3. Register the style in `index.jsx`.
4. Resolve whatever "some details" the 2023 comment refers to.
### Context
Found during review of #51122, which changed the field DOM and prompted a check of what depends on it. The fix was deliberately left out of that PR — switching on CSS for an unregistered style would change rendering for any hand-authored content using the class. See https://github.com/Automattic/jetpack/pull/51122#discussion_r3770245012.
Contributor guide
Assessment
This issue has not been assessed yet.