WPF Select

A lightweight React component that allows easy integration with WP Fusion. It can be used in the block editor or any kind of React interface in WordPress

Functionalities

Available Tags

WPF Select retrieves the list of available tags of the CRM that WP Fusion is configured to use.

Tags Creation

If the CRM supports new tags to be created outside their application WPF Select will automatically create new tags on user input if the tags do not exist.

Tag List Update

If the CRM doesn't support new tags to be created outside their application, WPF Select will automatically add a refresh button within the element.

The button will pull all the available tags from the CRM and will update the list of tags.

Usage

Installation

WPF Select is an NPM package fully transpiled to be supported on modern browsers.

It can be installed by using the following command in your terminal:

npm install @verygoodplugins/wpfselect

Or by adding the following object property to the dependencies object in your package.json file.

"@verygoodplugins/wpfselect": "^1.0.8"

Implementation

To implement the component you need to make sure you import it to your current file by adding the following code snippet at the top of your file:

import WpfSelect from "@verygoodplugins/wpfselect";

Then you can simply add it to your component using the JSX syntax:

<WpfSelect />

Props

The component can be extended by adding a default value, a onChange function and other settings.

onChange

This prop allows you to add a custom function that will be called when the value of the select element will be changed in any way.

existingTags

This prop allows you to add an array of tags that will act as a default value. Usually it is used to add tags that were selected in a previous interaction and saved as an attribute of the block.

elementID

This prop allows you to define the id parameter of the main HTML element.

refreshButtonClass

This prop allows you to add extra HTML classes to the refresh button that gets added when the CRM doesn't support the creation of new tags.

Example

<WpfSelect
    existingTags = { my_existing_tags  }
    onChange = {
        ( tags ) => {
            props.setAttributes( {
                my_existing_tags: tags
            } );
        }
    }
    elementID = 'my-tags-select'
    refreshButtonClass="custom-refresh-btn"
/>