Custom Input Type Example

Here's a custom input type component that works as a fully compatible drop-in replacement for the select input type, but using radio buttons instead.

Say, this is our RadioInput.vue component:

<script setup>
import { ref, computed, useId } from 'vue'

const model = defineModel({ required: true })
const { property } = window.wpce.inputTypeUtils.useInputType()

const name = computed(() => `wpce-radio-${useId()}`)
</script>

<template>
  <label v-for="{ value, label } of property.input.options">
    <input type="radio" v-bind="{ name, value }" v-model="model" />
    {{ label }}
  </label>
</template>

<style scoped>
label {
  display: block;

  input {
    width: auto !important;
  }
}
</style>

Then, we can register the component with some meta data attached:

import RadioInput from './RadioInput.vue'

document.addEventListener('wpce_instance_added', function (event) {
  const editor = event.detail.instance

  editor.registerInputType('radio', RadioInput, {
    // Use the first option as default
    getDefaultValue({ property }) {
      return property.input.options[0].value
    },

    // There is no invalid state for radio inputs
    validate() {
      return true
    },

    // Declare that this input types supports two conditions
    conditions: {
      isEmpty: (value, payload) => (value == null) === (payload ?? true),
      equals: (value, payload) => value === payload,
    },
  })
})