WPCE 3.29.*

Upgrading Default Values for Input Types

Input types can now provide a callback which will be called to possibly enhance default values provided through element definitions. This allows for simpler default values in properties with rather complex input types.

Example:

The value of the link input type is a rather complex object with many properties. This structure makes providing a default value quite uncomfortable.

However, since the link input type now upgrades default values, we can now provide a simple default value for the link input type, e.g. setting it to external mode by default for links that will most likely be external:

{
  id: 'referencesLink',
  input: {
    type: 'link',
  },
  defaultValue: { mode: 'text' },
}

The implementation of the callback in the link input type would be as simple as this:

export default {
  // ...
  upgradeDefaultValue(value, { property, wpce }) {
    return {
      text: '',
      ref: null,
      hash: null,
      label: null,
      target: false,
      mode: 'ref',
      enableUrlParam: false,
      ...(value ?? {}),
    }
  },
}

Similarly, the default value of a property using the color input type can now be just a string representing the default color's ID, which will then be upgraded to the full color object.

More Control Over columnlayout Properties

Until now, the columnlayout input type would always store the column layout data as proeprties on the node's children. This is still the default behavior as it easily allows to move or even copy & paste columns.

However this severely narrowed the use cases for the columnlayout input type, as it could effectly only be used to control an elements own children.

For cases where the column layout should be used more as a standalone data source, it can now be configured with the columnSizeSource input option set to value (children being the default). The defaultValue can be used to predefine the number of columns whose width should be configurable. Also, setting the new allowReverse input option to false can be used to disable the ability to reverse the order of columns.

Example:

Use the columnlayout input type to simply distribute 4 columns between two areas:

{
  id: 'distribution',
  input: {
    type: 'columnlayout',
    columnSizeSource: 'value',
    allowReverse: false,
    columns: 4,
    viewports: [
      {
        id: 'mobile',
        label: 'Mobile',
        defaultSize: 4,
      },
      {
        id: 'desktop',
        label: 'Desktop',
        defaultSize: 4,
      },
    ],
  },
  defaultValue: [
    {
      mobile: 4,
      desktop: 3,
    },
    {
      mobile: 4,
      desktop: 1,
    },
  ],
}

The result will be stored in the distribution property object on the columns property, like this:

{
  columns: {
    mobile: [4, 4],
    desktop: [2, 2],
  },
  order: {
    // ...
  }
}