Skip to content

Guidance on extending SCF with custom fields using JavaScript libraries #292

@racmanuel

Description

@racmanuel

Hi 👋

First of all, thank you for the work on Secure Custom Fields — I’m currently experimenting with it in a personal fork and really enjoying the developer experience so far, and i think when a finish this, send a pull request to add this fields to the main fork.

I’m exploring the idea of creating some new custom field types that I believe could be useful for real-world projects, for example:

  • A Likert scale field
  • A QR code field (generated from user input)
  • A field that uses html5-qrcode to scan QR codes directly from the camera
  • A field to save a signature
  • A field to add a button to call funcitons on PHP or AJAX
Image Image Image

I followed the contributing guide and development setup here:
https://github.com/WordPress/secure-custom-fields/blob/trunk/docs/contributing/index.md#development-setup

So far, I’ve been able to:

  • Create and register a custom field class successfully
  • Have the field appear correctly in the admin UI

However, I’ve run into some questions regarding JavaScript assets and third-party libraries, and I’d like to understand the intended architecture before going further.


Questions

1. Field-specific scripts

How are field-specific scripts supposed to be enqueued?
I haven’t yet found a clear example of where or how SCF expects custom field JS to be registered/enqueued (especially for input/admin context).

2. Webpack & ES module imports

Is it expected (or supported) to extend the existing webpack setup to allow imports like:

import { Html5QrcodeScanner } from "html5-qrcode";

Or is SCF intentionally avoiding direct npm/ESM imports inside field scripts?

3. Third-party libraries

Is there any guideline or recommendation regarding:

  • Including third-party JS libraries (bundled or vendored)?
  • Whether fields should rely only on vanilla JS or WordPress-provided packages?

I want to make sure I’m aligning with the project’s philosophy and best practices before continuing or proposing anything upstream.

Any guidance, pointers to existing patterns, or clarification would be greatly appreciated.
Thanks again for the project and for your time 🙌

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions