How to get selected category objects in the block editor?

Question

I am using the following functions to get the selected category objects. It seems to always return no matches even though there are several. What am I missing here?

(function (wp) { const { useSelect, select, dispatch } = wp.data; const { subscribe } = wp.data; function getSelectedCategories() { const selectedCategories = select('core/editor').getEditedPostAttribute('categories'); const categories = select('core').getEntityRecords('taxonomy', 'category'); if (!categories || !selectedCategories || selectedCategories.length === 0) { return []; } return categories.filter(cat => selectedCategories.includes(cat.id)); } } 

Answer 1

We need to modified the code with slight different approach. In this modified version of code we are using the useSelect hook to get the selected categories and categories and also ensure the data is available before attempting to filter it.

(function (wp) { const { useSelect } = wp.data; function getSelectedCategories() { // We are using useSelect hook to get the data from the store. const { selectedCategories, categories } = useSelect( ( select ) => { const selectedCategories = select('core/editor').getEditedPostAttribute( 'categories' ); const categories = select( 'core' ).getEntityRecords( 'taxonomy', 'category', { per_page: -1 } ); return { selectedCategories, categories }; }, []); // Here we are checking if categories and selectedCategories are available. if ( ! categories || ! selectedCategories || selectedCategories.length === 0 ) { return []; } // This is to filter categories to get the selected ones. return categories.filter( cat => selectedCategories.includes( cat.id ) ); } // This is the usage example. const selectedCategories = getSelectedCategories(); console.log( selectedCategories ); // This is for the debugging purpose. })( window.wp );