Automattic / Automattic/jetpack

Forms: the Below form style is unregistered and its editor CSS selector never matches

Open
#51,301 0 comments 0 reactions 1 assignee Claimed by @enejb View on GitHub
[Feature] Contact Form [Pri] Low [Type] Janitorial
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.