0

前提

teratailでも同様の質問をさせていただきました。

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>
);
0

1 件の回答 1

0

以下解決方法です
まず onChange プロパティのメソッドを変更しました。(もっといい方法がありそうですが)

  //投稿を選択する関数
  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});
    }
    };

そしてコンポーネント側も配列を受け取るだけに変更

return (
        <SelectControl
            id="oja_posts_select"
            label="投稿セレクトメニュー"
            multiple
            options={select_options} //投稿データの配列
      value={ selectedPostId } //更新された配列
            onChange={selectPost}    //値の更新メソッド
        />
  );

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。