0

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?

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.