[MOOSE-356] FE: Extend Create WP Controls Script

[GeoffDusome]

What does this do/fix?

Important

Please note the "Visibility in Style subgroups" portion of the "Inspector group and panel" heading in the docs. While we have the ability to add controls to whatever Group we want, the actual outcome as to whether or not the control shows is completely up to WP and the state of that group (https://p.tri.be/i/vbaVGY, https://p.tri.be/i/6QYvh8). Here I put the Balanced Text control of the Heading block into the Typography group to test it out and the visibility of the control is completely dependent on whether or not the Typography group has an active control already. There doesn't seem to be a way around this.

Note

I mostly used AI for this change, guiding it and fixing some formatting where it made sense to me. In my opinion, the code is still readable and editable but it is starting to get pretty complex with features so I don't think we'd want to go much further than this. Please let me know if you have any concerns about it though.

Updates to the Create WP Controls utility and its docs: class handling for all control types, optional Inspector group/panel placement, conditional visibility, InputControl for number fields, and layout/visibility behavior in Style subgroups.

Create WP Controls utility (create-wp-controls.js)

Class application

• Select controls: Apply a class from the selected value: applyClass-{value} (value slugified). Only the current value’s class is applied; others are removed.
• Toggle/Number: Unchanged behavior; classes still added/removed based on value.
• Add/remove logic: Managed classes are computed in one place: existing class string is stripped of all managed classes, then only the currently active ones are re-added (no stale classes when toggling or changing select/number).

Conditional visibility

• showWhen(attributes): Optional function on a control. When it returns false, the control is hidden in the sidebar; saved attribute values still apply (e.g. classes/styles on output).

Inspector group and panel

• group (optional): Chooses which InspectorControls group the control goes in. Supports: default/settings, styles, and Style subgroups (color, typography, dimensions, border, background, position, effects, filter, content, list, advanced, bindings). Unset = default group.
• panel (optional): Panel title used only when group is default or styles. Default: "Custom Block Settings". Same panel on multiple controls = same PanelBody; different panel = separate panel.
• Rendering: Default and styles groups render controls inside a PanelBody. All other groups render controls directly (no PanelBody). Controls in direct groups are wrapped in a full-width container (grid-column: 1 / -1, class create-wp-controls__group-control) so they don’t get a cramped layout in the Styles subgroup grids.

Number control

• NumberControl → InputControl: Number-type controls now use __experimentalInputControl with type="number" from @wordpress/components instead of __experimentalNumberControl, to align with the intended replacement and avoid a future migration.

Code quality

• determineControlToRender: Refactored from an if chain to a switch (control.type) for consistency with the rest of the file.
• Comments: JSDoc and inline comments updated to current JS style (consistent tags, types, and descriptions).

Documentation (docs/create-wp-controls-script.md)

• Class application: Described for toggle, number, and select (including select → applyClass-{value}).
• Conditional visibility: Documented showWhen with an example.
• Inspector group and panel: New section describing group and panel, list of groups, rendering behavior, full-width wrapper for direct groups, and recommendation to use group: 'styles' with a panel when controls must always be visible in the Styles tab (since subgroups like typography/color may be hidden when the group has no active content).
• Number control: Updated to reference InputControl (experimental, type="number") instead of NumberControl.

Backward compatibility

• Existing configs without group, panel, or showWhen behave as before: a single “Custom Block Settings” panel in the Settings tab.
• Existing number-type controls keep the same config; only the underlying component (InputControl) changed.

---

QA

Links to relevant issues

• Link to Issue

Pull request checklist

• I've added a changelog entry for these changes.
• I've linked to a relevant Jira issue.
• I've captured a screenshot or screencast of the changes and linked it above. No change, not necessary.