Skip to content

Render refactoring#8

Merged
mejta merged 19 commits intomasterfrom
render-refactoring
Feb 17, 2026
Merged

Render refactoring#8
mejta merged 19 commits intomasterfrom
render-refactoring

Conversation

@mejta
Copy link
Contributor

@mejta mejta commented Feb 15, 2026

No description provided.

mejta added 19 commits February 13, 2026 21:44
Replace the portal-based rendering architecture with a single-container
approach for all non-Gutenberg contexts. Field data is now embedded as a
`data-fields` JSON attribute on the `.wpifycf-app-instance` container,
and the React app renders everything inside it without DOM manipulation.

- Add `prepare_items_for_js()` to OptionsIntegration for field data prep
- Extract shared name-building logic into `build_field_name()` method
- Remove `maybePortal`, `createPortal`, and `node` prop from JS components
- Simplify Label, ControlWrapper, FieldDescription to context-agnostic
- Remove all `.wpifycf-field-instance` selectors and portal CSS workarounds
- Remove orphaned `$sections`/`$default_section` from Options/SiteOptions
- Remove WordPress Settings API registration (add_settings_section/field)
- Fix SubscriptionMetabox context from 'order-meta' to 'subscription-meta'
- All integrations now follow: normalize → prepare_items_for_js → print_app

BREAKING CHANGE: WordPress Settings API sections are no longer registered
for Options and SiteOptions pages. Third-party code using
add_settings_section/add_settings_field on these pages will no longer render.
- Redesign spacing scale from 3-step (5/10/20px) to 5-step 4px-increment
- Add CSS custom properties for colors, fonts, radii, and field widths
- Replace all hardcoded values across 26 SCSS files with design tokens
- Extract shared direct-file styles into field-direct-file-shared.scss
- Remove duplicate &__info block in field-attachment.scss
- Convert flat DirectFile/MultiDirectFile classnames to BEM notation
- Fix wrong type in InnerBlocks.js class (link → inner-blocks)
- Fix capital HTML in Html.js class (HTML → html)
- Prefix unprefixed state classes in Wysiwyg and Mapycz components
- Normalize color notations (hsl→hex, #fff→white) across stylesheets
Add a new `wrapper` field type that renders a DOM container around
child fields without nesting their values — unlike `group`, wrapper
children store values flat at the parent level.

PHP:
- Add `flatten_items()` to CustomFields for hoisting wrapper children
- Apply flattening in all storage, sanitization, and meta registration
- Preserve wrapper structure in `prepare_items_for_js()` for rendering

JS:
- Add Wrapper component with group-context and root-context rendering
- Add `flattenWrapperItems` helper for title logic, defaults, validation
- Pass parentValue/parentOnChange/setTitleFactory through Group to Wrapper
- Remove unused `addFilter` imports from Group and MultiGroup

CSS:
- Add field-wrapper styles (flex column layout)
- Add FieldFactory class providing a fluent, IDE-friendly API for
  building field definition arrays with one method per field type
- Switch field wrapper from flexbox to CSS grid with responsive
  minmax label columns using container queries
- Improve multi-group collapse animation with explicit transitions
  and max-height for smoother expand/collapse behavior
- Add --wpifycf-gap-0 variable, replace fixed label width with
  configurable min/max label width variables
- Add phpcs exclusions for FieldFactory's get_defined_vars() pattern
…ures

- Add wrapper field type docs with value storage comparison to group
- Add coupon options WooCommerce integration docs
- Add Field Factory fluent API reference with all 56 methods
- Add generators docs (UUID built-in, custom generator hooks)
- Add REST API docs for all 7 internal endpoints
- Add validation system docs with all 15 built-in validators
- Add type aliases backward compatibility reference
- Update field-types.md, integrations.md, and index.md with new links
- Add Columns.js React component with ResizeObserver-based responsive
  behavior (auto-reduces columns when < 300px each)
- Support per-child column/column_span props for explicit grid placement
- Add field-columns.scss with CSS Grid, container queries on items,
  and :has()-based collapse for hidden conditional fields
- Update flatten_items(), get_default_value(), prepare_items_for_js(),
  and flattenWrapperItems() to treat columns like wrapper (transparent)
- Add columns() method to FieldFactory
- Register columns component in field index
- Add documentation for the new field type
Add useFieldTitle hook and setTitle prop to all field components,
enabling dynamic title display in Group and MultiGroup headers.

- Add useFieldTitle hook in hooks.js with typeof guard and 0-as-valid
- Add setTitle to all simple fields (Text, Number, Date, Email, etc.)
- Add setTitle to complex fields (Radio, MultiCheckbox, MultiToggle)
  with label resolution via options lookup
- Add setTitle to multi-value fields (MultiAttachment, MultiPost,
  MultiTerm, MultiDirectFile) with _n() pluralization
- Refactor Group.js title management from imperative state to
  declarative useMemo with stable handleSetTitle callback
- Add onMutate callback to useMulti for MultiGroup title sync
  on sort, add, remove, and duplicate operations
- Fix handleSort indexOf fragility by using Sortable oldIndex/newIndex
  instead of reference equality
- Guard all direct setTitle calls with typeof check
  (Checkbox, Mapycz, Group)
Inject the current URL hash into the _wp_http_referer hidden input
before form submission so WordPress redirects back to the same tab.
- Replace inline common property listings with reference link to field-types.md
- Add Field Factory section with named-parameter examples to every field type doc
- Standardize section naming (Example Usage, Notes) and ordering across all files
- Add "Using Values in Your Theme" and "With Conditional Logic" subsections
- Fix multi_group.md type property error ('code' → 'multi_group')
- Move fieldPath/allValues/getValue docs from field-types.md to extending.md
- Add Available Component Props section to extending.md
- Update CLAUDE.md with comprehensive project documentation
…tegration reference

Replace the brief overview with a full developer-oriented README including
quick start code, all 58 field types organized by category, 15 integration
points, conditional logic/tabs/FieldFactory examples, and updated docs links.
Also fix field type count (59 → 58) in CLAUDE.md.
- Use direct child selector `:has(> .wpifycf-field__label)` to prevent
  nested field labels from triggering 2-column grid on parent wrappers
- Render empty placeholder span when label text is missing but noLabel
  is not true, preserving 2-column layout with control in value column
- Remove obsolete `:has(span:empty)` display:none rule on labels
Add wpifycf-app-instance__fields wrapper around rendered fields
in RootFields component to enable CSS targeting of the fields
container.
Extend the flex column + gap styles to the new __fields container
so it inherits the same layout as the parent app instance.
Add a `collapse` prop (default `true`) to MultiGroup fields. When set
to `false`, all items are always expanded and cannot be collapsed by
clicking the header.

- Add `collapse` param to `useMulti` hook with `fill(collapse)` init
- Return no-op from `toggleCollapsed` when collapse is disabled
- Pass `collapse` through MultiGroup component to useMulti
- Conditionally attach onClick handlers on sort/title elements
- Add `--not-collapsible` CSS modifier with `cursor: default`
- Add `?bool $collapse` param to FieldFactory::multi_group()
- Update multi_group.md documentation
- Add recent changelog entries for collapse prop, layout fixes,
  README rewrite, and standardized field type docs
- Document setTitle callback prop in extending guide
- Remove setTitle from multi_group public props (internal React prop)
@mejta mejta merged commit a4a5781 into master Feb 17, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant