前提
WordPressのブロック開発を行っています。
MAMPでローカル環境を構築しプラグインとしてカスタムブロックを追加して開発を行っています。
実行環境:
WordPress 5.9.2
npm 8.1.2
node.js 16.13.1
実現したいこと
投稿の情報を取得してコンポーネントで複数選択可能なブロックを作成する。
発生している問題
コンポーネントで value プロパティを配列として渡せません
valueがうまく受け取れないので当然クリックしても反応しません(データは取れている)
投稿データを取得してセレクトタグとしてレンダリングするところまではうまくいきました。
高階コンポーネントとして withSelect を使用し投稿データを「posts」として受け取っています。
高階コンポーネントを別ファイルに記述し、を含むコンポーネントでマージしています。
エラーなどは出ていません。
試したこと
onChange プロパティとなるコールバック関数 selectPost でちゃんと属性値に値が取れているかの確認としてconsoleに出しています。問題なく属性値に保存できています
とするとやはり value プロパティが怪しいのでこちらもコメントにしてありますが、直接配列として値を渡してあげても、配列の0番目、最初の値しか取れていませんでした。
該当のソースコード
posts-select.js
import { withSelect } from '@wordpress/data';
import { SelectControl } from "@wordpress/components";
const PostsSelect = (props) => {
const { posts, selectedPostId, selectPost } = props;
//SelectControl の options プロパティに指定する投稿のタイトルとIDから成るオブジェクトの配列
let select_options = [];
if (posts) {
select_options.push({ value: 0, label: "投稿を選択", disabled: true });
posts.forEach((post) => {
select_options.push({ value: post.id, label: post.title.rendered });
});
} else {
select_options.push({ value: 0, label: "読み込み中", disabled: true });
}
return (
<SelectControl
id="oja_posts_select"
label="投稿セレクトメニュー"
multiple
options={select_options}
value={ selectedPostId.filter((value) => select_options.includes(value)) }
// value={[3528, 3305, 3342]}
onChange={selectPost}
/>
);
};;
export default withSelect((select, props) => {
//現在の投稿の post ID を取得
const currentPostId = select("core/editor").getCurrentPostId(),
curentPostType = select('core/editor').getCurrentPostType();
//クエリパラメータ
const query = {
per_page: -1,
order: 'desc',
status: 'publish',
exclude: currentPostId, //除外する投稿
};
return {
posts: select("core").getEntityRecords('postType', curentPostType, query),
};
})(PostsSelect);
edit.js
//投稿を選択する関数
let postArray = [];
const selectPost = (postId) => {
// オプションの配列を整数にして追加
postArray.push(parseInt(postId[0]));
// 配列内の重複した値をフィルタリング
attributes.selectedPostId = postArray.filter((id, index, self) => self.indexOf(id) === index);
console.log(attributes.selectedPostId);
};
// 略。。。
return(
<div className={className}>
<Placeholder
label="投稿スライダー"
icon="format-image"
instructions="スライダーに表示する投稿を選択"
>
<PostsSelect
selectedPostId={attributes.selectedPostId}
selectPost={selectPost}
/>
</Placeholder>
</div>
);