Gutenberg is a WordPress plugin that allows you to create custom blocks for use in the WordPress editor. If you want to create a repeater field with Gutenberg, you can use the Repeater
component provided by the @wordpress/components
package.
Here is an example of how you can use the Repeater
component to create a repeater field in a Gutenberg block:
- First, install the
@wordpress/components
package by running the following command in your WordPress plugin or theme:
npm install @wordpress/components
- Next, import the
Repeater
component into your Gutenberg block code:
import { Repeater } from '@wordpress/components';
- Then, add the
Repeater
component to your block’s render function:
render: function() { return ( <Repeater label={ 'My Repeater Field' } defaultItem={ { text: 'Item 1', } } fields={ [ { type: 'text', name: 'text', label: 'Text', }, ] } /> ); }
This will create a repeater field with a single text field, labeled “Text,” which will be repeated as many times as the user adds new items.
You can also customize the repeater field by using the various props available for the Repeater
component, such as min
and max
to set the minimum and maximum number of items allowed, or headerButtonLabels
to customize the labels on the add and remove buttons.
I hope this helps! Let me know if you have any questions.
Last modified: January 4, 2023