I want to select multiple <SelectControl> components in WordPress block development

Prerequisites

We are developing blocks for WordPress.
MAMP builds a local environment and adds custom blocks as plug-ins for development.

running environment:
WordPress 5.9.2
npm 8.1.2
node.js16.13.1

What do you want to do

Obtain post information and create multiple selectable blocks for components.

Problems you are having

Component cannot pass value property as array
Of course, clicking on the value doesn't respond because it doesn't receive it well (data is taken)

It worked well to get the post data and render it as a select tag.
We use withSelect as a high floor component and receive post data as posts.
You have written the higher floor components in a separate file and merged them with the components that contain .
There are no errors.

Tried

The callback function selectPost, which is the onChange property, is listed in the console as a confirmation that the attribute value is properly populated.Successfully saved to attribute value
Then, the value property is suspicious, so I also commented on it, but even if I gave it directly as an array, only the 0th and first value of the array was obtained.

Source Codes Affected

posts-select.js

import {withSelect} from '@wordpress/data';
import {SelectControl} from "@wordpress/components";

const PostsSelect=(props)=>{
    const {posts, selectedPostId, selectedPost} = props;

    // Array of objects consisting of the title and ID of the post to be specified in the options property of SelectControl
    let select_options = [ ];
    if(posts){
        select_options.push({value:0, label: "select post", disabled:true});
        posts.forEach(post)=>{
            select_options.push({value:post.id, label:post.title.rendered});
        });
    } else{
        select_options.push({value:0, label: "Reading", disabled:true});
    }

    return(
        <SelectControl
            id="oja_posts_select"
            label="Post Select Menu"
            multiple
            options={select_options}
            value = {selectedPostId.filter((value)=>select_options.includes(value))}
            // value = {[3528,3305,3342]}
            onChange={selectPost}
        />
    );
};;

export default withSelect ((select,props) = > {
    // Get the post ID of the current post
    const currentPostId=select("core/editor").getCurrentPostId(),
        currentPostType=select('core/editor').getCurrentPostType();
    // Query Parameters
    constquery={
        per_page: -1,
    order: 'desc',
    status: 'public',
        exclude —currentPostId, // Posts to be excluded
    };
    US>return{
        posts: select("core").getEntityRecords('postType', currentPostType, query),
    };
}) (PostsSelect);

edit.js

// Function to select posts
  let postArray=[];
  const selectPost=(postId)=>{
    // Add an array of options as an integer
        postArray.push(parseInt(postId[0]));
    // Filter duplicate values in an array
        attributes.selectedPostId=postArray.filter(id,index,self)=>self.indexOf(id)===index);
    console.log(attributes.selectedPostId);
    };

// Abbreviated...
return(
<div className={className}>
　<Placeholder
    label="Post Slider"
    icon="format-image"
    instructions="Select Posts to Display on the Slider"
　>
    <PostsSelect
　　　   selectedPostId={attributes.selectedPostId}
     selectPost = {selectPost}
    />
  </Placeholder>
</div>
);

wordpress reactjs react-jsx

2022-09-30 19:38

1 Answers

Here's the solution:
First, I changed the method for the onChange property (although there might be a better way).

// Function to select posts
  const postArray=useRef([]);
  const selectPost=(postId)=>{
    if(postArray.current.includes(parseInt(postId[0]))){
      let index = postArray.current.indexOf(parseInt(postId[0]));
      postArray.current.splice(index,1);
      setAttributes({selectedPostId:postArray.current});
    } else{
      postArray.current.push(parseInt(postId[0]));
      setAttributes({selectedPostId:postArray.current});
    }
    };

Also, change the component side only to receive the array

return(
        <SelectControl
            id="oja_posts_select"
            label="Post Select Menu"
            multiple
            options={select_options}//Array Post Data
      value = {selectedPostId} // Updated array
            onChange={selectPost}// Value Update Method
        />
  );

2022-09-30 19:38

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656