Link Input

Chose between relation or free text input. Include label or target choice. All in one input.

{
  input: {
    type: 'link', 
    labelInput: true,
    targetChoice: true,
    allowFreeText: true
  }
}

Input Options

Option	Values	Default	Description
required	boolean	false	Whether filling the field is mandatory.
labelInput	boolean	false	Show label text input if true.
targetChoice	boolean	false	Show target blank checkbox if true.
allowFreeText	boolean	true	Allows to switch to plain text mode.
postTypes	string[]	['page', 'post']	Define post types of relation.
editLink	string | boolean	true	Declare edit link for individual items, %s will be replaced with its post ID. If set to false, edit links will be disabled. If set to true, a default edit link will be determined automatically.

Template Usage

You can use the helper function wpce_get_link() to get the link URL from the input value. This function takes care of both modes (relations and free text).

add_filter('wpce_render_example', function ($wpce, $element) {
	$props = $element->properties;

	$target = $props->link->target ? "target=\"_blank\"" : '';
	$link = wpce_get_link($props->link);
	$label = htmlspecialchars($props->link->label);

	return "<a href=\"{$link}\" {$target}>{$label}</a>";
}, 20, 2);

Or, if you want to use it conditionally:

// ...

if ($link = wpce_get_link($props->link)) {
	$tag = 'a';
	$attrs['href'] = $link;
	$attrs['target'] = $props->link->target;
}

// ...

Conditions

The link input type supports the following conditions for dynamic visibility:

Condition	Payload	Description
isEmpty	boolean defaults to true	Checks whether or not a target has been selected/entered.
hasLabel	boolean defaults to true	Checks whether or not a label has been entered.
hasMode	'ref' | 'text'	Checks whether the input is in reference mode or free text mode.
opensInNewTab	boolean defaults to true	Checks whether or not the link opens in a new tab.
hasParams	boolean defaults to true	Checks whether or not the link has URL parameters or a hash attached.