Friday 29 March 2019

Gutenberg Components: Form Token Field (Tags Field)


The Form Token Field Gutenberg Component is used for creating an input field from which you get a list of suggestions (autocomplete) from which you select values. This is also used in the Tags field when you’re writing a post (or any similar taxonomy). This component is a bit complex. If you’re going to read the source code, you might find yourself going deeper and deeper into other various components and classes. I’ll try to make it a bit easier for you to understand it with this tutorial.
Before we look into how this components is used or how we can use it as well, let’s learn about the properties that it accepts. I am going to take the Tags field here as a reference.
value – this is the property that accepts the tags that are going to be shown as selected. It can be an array of strings or an array of objects. If it’s an array of objects, the objects need to have the attribute value as well,
displayTransform – this property is a function that will transform the tags. By default, it uses the function identity from lodash,
saveTransform – this is also a function that is called when the tags are saved or when we need to match the suggestions
Source: https://managewp.org/articles/18495/gutenberg-components-form-token-field-tags-field



source https://williechiu40.wordpress.com/2019/03/29/gutenberg-components-form-token-field-tags-field/

No comments:

Post a Comment