Mastering select(‘core’) in WordPress Gutenberg (With Simple Examples)

When working with Gutenberg blocks, accessing WordPress data efficiently is essential. One of the most commonly used tools for this is select('core').

In this guide, we’ll break it down in a simple and practical way, with examples you can use immediately.

📌 What is `select('core')`?

In Gutenberg:

select() is used to read data from a data store
'core' refers to the WordPress core data store
It allows you to fetch:
- Posts
- Pages
- Users
- Taxonomies
- Media

👉 In simple terms:

select('core') lets you fetch data from WordPress (via REST API) inside your block.

⚠️ Basic Example (Not Recommended for UI)

import { select } from '@wordpress/data';

const posts = select('core').getEntityRecords('postType', 'post');

❗ Why this is not ideal?

It is not reactive
UI will not update automatically
Should not be used inside React render logic

✅ Correct Way: Using `useSelect`

The recommended approach in Gutenberg is using the useSelect hook.

🎯 Example: Fetch Posts

import { useSelect } from '@wordpress/data';

const posts = useSelect((select) => {
    return select('core').getEntityRecords('postType', 'post');
}, []);

💾 Storing Data in a Variable & Using It

Here’s a simple working example:

import { useSelect } from '@wordpress/data';

export default function MyComponent() {

    const posts = useSelect((select) => {
        return select('core').getEntityRecords('postType', 'post');
    }, []);

    if (!posts) {
        return 'Loading...';
    }

    return (
        <ul>
            {posts.map((post) => (
                <li key={post.id}>
                    {post.title.rendered}
                </li>
            ))}
        </ul>
    );
}

🔍 What’s Happening Here?

useSelect() subscribes to the data store
posts variable stores fetched data
Initially, it returns null → then updates with real data
Component re-renders automatically when data is available

⚡ Using Query Parameters (Best Practice)

To improve performance, always limit the data you fetch:

const posts = useSelect((select) => {
    return select('core').getEntityRecords('postType', 'post', {
        per_page: 5,
        _fields: ['id', 'title'],
    });
}, []);

✅ Benefits:

Faster API response
Less memory usage
Cleaner data

🚀 Advanced Pattern (Loading State Handling)

const { posts, isLoading } = useSelect((select) => {
    const query = { per_page: 5 };

    return {
        posts: select('core').getEntityRecords('postType', 'post', query),
        isLoading: !select('core').hasFinishedResolution(
            'getEntityRecords',
            ['postType', 'post', query]
        ),
    };
}, []);

🧠 Why this is important?

Helps handle loading state properly
Prevents UI flickering
Useful for production-grade blocks