Gutenberg internal page link search box

by

I’m trying to create a field or a select box in a WordPress custom block where the user can select a page and store it’s ID or URL like the default internal linking field works.

enter image description here

The only difference will be that I need only that field, without the text to hyperlink.

My temporary solution I came up with it’s creating an array of posts from the wp api like this

var posts = [];
$.getJSON('/wp-json/wp/v2/pages?per_page=100', function(data) {
    $.each(data, function(index, elem) {
        posts.push({
            label: data[index]['title']['rendered'],
            value: data[index]['id']
        })
    })
});

and then creating a select box with all the pages

el(SelectControl, {
    className: 'page-selector',
    label: 'Link',
    value: linkURL1,
    options: posts,
    onChange: function(label) {
        props.setAttributes({
            linkURL1: label
        })
    },
})

Which works great, but having about 80 pages it’s hard to find what I want.
It looks like this:
enter image description here

What i’m trying now it’s to replace the select box with a default wordpress internal link selector like in the first image.

Is that part of Gutenberg?

1 Answer
1

I found a solution and thought to post it here as others might need it

el(URLInput, {
  className: props.className,
  value: attributes.linkURL,
  placeholder: i18n.__('Set the specific url'),
    onChange: function( url ) {
      props.setAttributes({ linkURL: url });
    }
})

Does exactly what I need.

Leave a Comment