fix: wp7 compatibility

[Arukuen]

fixes #20

Summary by CodeRabbit

• Bug Fixes
  • Fixed spacing, min-heights, and margins in editor controls, popovers, and target inputs to prevent layout regressions.
• Style
  • Added compatibility CSS tweaks to ensure controls render consistently with the updated editor.
• UX
  • Ensured the Live Preview toggle renders reliably and target input displays with proper spacing.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 85e6c359-6987-4d20-9a41-a7c1bc630dd1

📥 Commits

Reviewing files that changed from the base of the PR and between a07021c and 644d46f.

📒 Files selected for processing (1)

• src/editor/components/add-interaction-popover/editor.scss

🚧 Files skipped from review as they are similar to previous changes (1)

• src/editor/components/add-interaction-popover/editor.scss

---

📝 Walkthrough

Walkthrough

Adds WordPress 7.0 compatibility CSS and small editor tweaks: a toggle-group height override, margin/min-height adjustments, a TextControl given a targeting class, omission of type when passing toggle option props, and a simplified ToggleControl JSX form.

Changes

Cohort / File(s)	Summary
Styling: WP 7.0 compatibility src/editor/components/add-interaction-popover/editor.scss, src/editor/components/target-selector/editor.scss, src/editor/editor.scss	Added rules adjusting spacing/sizing for WP 7.0: toggle-group height set to auto, base-control fields given margin-bottom: 8px, toggle control margin-bottom: 12px, and text input min-height: 30px !important.
Target selector markup src/editor/components/target-selector/index.js	Added className="interact-target-block-input" to the TextControl for value.type === 'block' to target styles.
Interaction panel props src/editor/components/interaction-panel/index.js	Make a shallow copy of each toggle option, delete its type property, and spread that copy into ToggleControl so type is not passed as a prop.
Timeline toggle JSX src/editor/components/timeline/index.js	Replaced a ToggleControl with children label by a self-closing ToggleControl that uses the same label prop (JSX structure change only).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped through styles and tiny props,
Nibbled margins, smoothed the tops,
I plucked a type, then skipped a line,
Tiny hops — the editor’s fine! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The PR references issue #20 for WP 7.0 compatibility fixes, and the changes include CSS/layout adjustments and component prop modifications addressing compatibility issues across multiple components.	Review issue #20 details to verify all specified requirements are met, as the issue description is not fully provided in the linked issues context.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: wp7 compatibility' directly and concisely describes the main purpose of the changeset, which addresses WordPress 7.0 compatibility issues across multiple components.
Out of Scope Changes check	✅ Passed	All changes focus on WordPress 7.0 compatibility: CSS adjustments for component spacing/sizing and a JSX structure change for ToggleControl consistency, all aligned with the stated objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-wp7-compatibility

---

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.}

[github-actions]

🤖 Pull request artifacts

file	commit
pr19-interactions-19-merge.zip	644d46f

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/editor/components/add-interaction-popover/editor.scss`:
- Around line 87-89: The rule for .interact-add-interaction-popover
.components-toggle-group-control uses a fixed height (height: 84px) which can
clip dynamic toggle content; remove the fixed height and replace it with a
flexible approach such as using min-height or max-height with overflow:auto (or
simply rely on padding/margins) so the .components-toggle-group-control can grow
with varying option counts and labels and avoid inaccessible options.

In `@src/editor/components/interaction-panel/index.js`:
- Around line 405-407: interactionConfig.options is being mutated during render
by `delete option.type`, which corrupts shared config state; instead, avoid
in-place mutation by creating a non-mutating copy of each option before removing
`type` (e.g. use destructuring `const { type, ...safeOption } = option` or
`const safeOption = { ...option }; delete safeOption.type`) wherever `option`
from `interactionConfig.options` is used to choose/render controls (e.g. around
the ToggleControl handling). Replace direct `delete option.type` with the
copy-based approach so `interactionConfig.options` remains unchanged across
renders.

In `@src/editor/editor.scss`:
- Around line 145-161: The current rules target global Gutenberg classes; scope
them to the plugin's container by prefixing each selector with the interactions
editor wrapper (use the existing .interact-property-control container or a
single top-level plugin class like .interact-editor if present). Replace the
global selectors with scoped ones such as ".interact-property-control
.components-toggle-control", ".interact-property-control
.components-text-control__input" (keep the min-height override but scoped),
".interact-property-control .components-select-control
.components-base-control__field", and keep ".interact-property-control
.components-base-control__field" as-is so these overrides only affect controls
inside the plugin UI.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2229f22a-3a11-438f-85b5-e693a9df0baa

📥 Commits

Reviewing files that changed from the base of the PR and between cec35db and ce8b0f0.

📒 Files selected for processing (6)

• src/editor/components/add-interaction-popover/editor.scss
• src/editor/components/interaction-panel/index.js
• src/editor/components/target-selector/editor.scss
• src/editor/components/target-selector/index.js
• src/editor/components/timeline/index.js
• src/editor/editor.scss

done