前提
WordPressのブロック開発を行っています
WordPressはバージョン 5.9.2
開発環境となる npm は 8.1.2
node.jsのバージョンv16.13.1
MAMPでローカル環境を構築しプラグインとしてカスタムブロックを追加して開発を行っています
実現したいこと
投稿の情報を取得して<select>コンポーネントで複数選択可能なブロックを作成する。
発生している問題
<SelectControl>コンポーネントで value プロパティを配列として渡せません
valueがうまく受け取れないので当然クリックしても反応しません(データは取れている)
投稿データを取得してセレクトタグとしてレンダリングするところまではうまくいきました。
高階コンポーネントとして withSelect を使用し投稿データを「posts」として受け取っています。
高階コンポーネントを別ファイルに記述し、<SelectControl>を含むコンポーネントでマージしています
エラーなどは出ていません
該当のソースコード
posts-select.js
javascript
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
javascript
//投稿を選択する関数 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> );
試したこと
onChange プロパティとなるコールバック関数 selectPost でちゃんと属性値に値が取れているかの確認としてconsoleに出しています。問題なく属性値に保存できています
とするとやはり value プロパティが怪しいのでこちらもコメントにしてありますが、直接配列として値を渡してあげても、配列の0番目、最初の値しか取れていませんでした。
まだ回答がついていません
会員登録して回答してみよう