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:

  1. First, install the @wordpress/components package by running the following command in your WordPress plugin or theme:
npm install @wordpress/components
  1. Next, import the Repeater component into your Gutenberg block code:
import { Repeater } from '@wordpress/components';
  1. Then, add the Repeater component to your block’s render function:
render: function() {
   return (
         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.

(Visited 93 times, 1 visits today)
Was this article helpful?
Close Search Window