api - Gutenberg internal page link search box

admin管理员组

文章数量:1430551

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.

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:

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?

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.

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:

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?

• api
• block-editor

Share Improve this question asked May 2, 2019 at 21:33 Razvan CuceuRazvan Cuceu 24822 silver badges1414 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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.

本文标签： apiGutenberg internal page link search box