Move form builder preview align logic into Lite

[Crabcyborg]

This helps to reflect the style setting for alignment for radio and checkbox fields.

Summary by CodeRabbit

• New Features
  • Radio and checkbox fields now properly apply alignment styles from the active style settings.
  • Real-time preview updates are now available when adjusting radio/checkbox option alignment styles.
  • Pro users can override style-driven alignment with field-specific alignment options.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR refactors radio/checkbox alignment handling by centralizing alignment lookup in a new FrmStylesHelper method, applying it through field-type container classes and builder fields, marking style-driven fields in the styler preview, and wiring live preview updates for alignment dropdown changes.

Changes

Alignment retrieval, application, and preview wiring

Layer / File(s)	Summary
Align value retrieval from active style classes/helpers/FrmStylesHelper.php, classes/models/fields/FrmFieldType.php	New FrmStylesHelper::get_align_from_active_style() reads radio/checkbox alignment from the active style's post_content. FrmFieldType::get_container_class() now calls this helper instead of using its removed internal fallback.
Builder field alignment application classes/controllers/FrmFieldsController.php	New get_builder_field_style_align_class() helper computes style alignment for builder radio/checkbox fields, preferring Pro per-field align when set, and get_classes_for_builder_field() appends the returned class to container classes.
Mark style-driven fields in preview classes/helpers/FrmStylesPreviewHelper.php	New add_a_div_class_for_style_driven_alignment() method registers a frm_field_div_classes filter that appends frm-default-option-align to radio/checkbox fields without explicit per-field align, marking them for style-driven preview updates.
Live preview sync for option alignment js/admin/style.js	New initOptionLayoutPreview() binds change handlers for radio/checkbox alignment dropdowns and remaps preview field container classes by removing alignment-related classes and adding the newly selected mapped class for fields marked with frm-default-option-align.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Strategy11/formidable-forms#3127: Overlaps directly on alignment code paths—main PR moves the alignment fallback into FrmStylesHelper, while the retrieved PR adds FrmStylesController helpers and alignment retrieval used by FrmFieldType.
• Strategy11/formidable-forms#2593: Directly connected to alignment-class computation flow—both PRs modify radio/checkbox alignment pipeline at the class level and adjust how FrmFieldType::get_container_class() derives and normalizes alignment.
• Strategy11/formidable-forms#3128: Touches radio/checkbox alignment-class computation by changing how the alignment lookup key is derived from field type; main PR replaces the prior alignment fallback with a new helper sourcing the same active-style alignment.

Poem

🐰 A rabbit hops through alignment with glee,
Style-driven radio, checkbox now free!
Helper to fetch, builder to blend,
Preview sync flows, from start to the end. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main objective: moving form builder preview alignment logic from Pro into Lite, as evidenced by the reorganization across multiple files including new Lite-only helper methods and preview logic.
Docstring Coverage	✅ Passed	Docstring coverage is 93.33% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch make_new_align_function_public

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[deepsource-io]

DeepSource Code Review

We reviewed changes in 6b635af...5ecab9f on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

Important

Some issues found as part of this review are outside of the diff in this pull request and aren't shown in the inline review comments due to GitHub's API limitations. You can see those issues on the DeepSource dashboard.

PR Report Card

Overall Grade

Security   Reliability   Complexity   Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
PHP		Jun 8, 2026 3:45p.m.	Review ↗
JavaScript		Jun 8, 2026 3:45p.m.	Review ↗

---

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

[deepsource-io]

Prefer using an optional chain expression instead, as it's more concise and easier to read

The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

[coderabbitai]

🧹 Nitpick comments (1)

js/admin/style.js (1)

126-126: ⚡ Quick win

Use optional chaining for cleaner null handling.

The ESLint hint is valid: replace container && container.classList.contains(...) with container?.classList.contains(...) for more idiomatic modern JavaScript.

♻️ Suggested improvement

-			if ( container && container.classList.contains( 'frm-default-option-align' ) ) {
+			if ( container?.classList.contains( 'frm-default-option-align' ) ) {

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@js/admin/style.js` at line 126, Replace the explicit null-check pattern
around the DOM element before calling classList.contains with optional chaining:
locate the conditional using the variable "container" that currently reads
"container && container.classList.contains(...)" and change it to use
"container?.classList.contains(...)" so the expression short-circuits cleanly
when container is null/undefined; update any similar checks in js/admin/style.js
to the optional chaining form for consistency.

Source: Linters/SAST tools

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@js/admin/style.js`:
- Line 126: Replace the explicit null-check pattern around the DOM element
before calling classList.contains with optional chaining: locate the conditional
using the variable "container" that currently reads "container &&
container.classList.contains(...)" and change it to use
"container?.classList.contains(...)" so the expression short-circuits cleanly
when container is null/undefined; update any similar checks in js/admin/style.js
to the optional chaining form for consistency.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f788981c-e348-4f14-84bf-001a74ea93fc

📥 Commits

Reviewing files that changed from the base of the PR and between 3dc1f33 and afa28ed.

📒 Files selected for processing (2)

• classes/helpers/FrmStylesPreviewHelper.php
• js/admin/style.js