How to retrieve site data for blocks with useSelect

blockify Avatar
blockify

·

·

The useSelect hook allows you to retrieve and subscribe to data from the WordPress data store, and use the data in your block components.

Here are some examples of how to use the useSelect hook with WordPress blocks:

To retrieve the current user from the WordPress data store, you can use the useSelect hook as follows:


Copied!

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

const MyBlock = ( props ) => {
  const currentUser = useSelect( ( select ) => {
    return select( 'core' ).getCurrentUser();
  } );

  // Use the current user data in the block component
};Code language: JavaScript (javascript)


To retrieve the latest posts from the WordPress data store, you can use the useSelect hook as follows:


Copied!

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

const MyBlock = ( props ) => {
  const latestPosts = useSelect( ( select ) => {
    return select( 'core' ).getEntityRecords( 'postType', 'post', {
      per_page: 10
    } );
  } );

  // Use the latest posts data in the block component
};Code language: JavaScript (javascript)


To retrieve the terms of a taxonomy from the WordPress data store, you can use the useSelect hook as follows:


Copied!

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

const MyBlock = ( props ) => {
  const terms = useSelect( ( select ) => {
    return select( 'core' ).getEntityRecords( 'taxonomy', 'my_taxonomy', {
      parent: 'parent_term_id'
    } );
  } );

  // Use the terms data in the block component
};Code language: JavaScript (javascript)


In summary, the useSelect hook from the @wordpress/data package allows you to retrieve and subscribe to data from the WordPress data store, and use the data in your block components. You can use the useSelect hook to retrieve different types of data, such as the current user, posts, or terms of a taxonomy, and use the data in your block components.

Here is an example of how to combine the useSelect callbacks into one, returning all of the data in one go in a WordPress block:


Copied!

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

const MyBlock = ( props ) => {
  const data = useSelect( ( select ) => {
    return {
      currentUser: select( 'core' ).getCurrentUser(),
      latestPosts: select( 'core' ).getEntityRecords( 'postType', 'post', {
        per_page: 10
      } ),
      terms: select( 'core' ).getEntityRecords( 'taxonomy', 'my_taxonomy', {
        parent: 'parent_term_id'
      } )
    };
  } );

  // Use the current user, latest posts, and terms data in the block component
};Code language: JavaScript (javascript)


In this example, the useSelect hook is used to retrieve the current user, the latest posts, and the terms of a taxonomy from the WordPress data store. The data is retrieved using the getCurrentUser and getEntityRecords methods from the core select, and returned as an object in the useSelect callback. The data is then passed as a single prop to the block component.

You can use this approach to combine multiple useSelect callbacks into one, and return all of the data in one go. This can make your code more concise and efficient, by reducing the number of useSelect calls and the need to destructure the props in the block component.

Wrapping up

To register a new WordPress block using the code example above, you will need to use the registerBlockType method from the @wordpress/blocks package. The registerBlockType method allows you to register a new block type with WordPress, and define the properties and behavior of the block.

Here is an example of how to register a new WordPress block using the code example above:


Copied!

import { registerBlockType } from '@wordpress/blocks';

const MyBlock = ( props ) => {
  const data = useSelect( ( select ) => {
    return {
      currentUser: select( 'core' ).getCurrentUser(),
      latestPosts: select( 'core' ).getEntityRecords( 'postType', 'post', {
        per_page: 10
      } ),
      terms: select( 'core' ).getEntityRecords( 'taxonomy', 'my_taxonomy', {
        parent: 'parent_term_id'
      } )
    };
  } );

  return (
    <div>
      {/* Render the current user, latest posts, and terms data in the block component */}
    </div>
  );
};

registerBlockType( 'my-plugin/my-block', {
  title: 'My Block',
  icon: 'shield',
  category: 'common',
  attributes: {
    // Define the attributes for the block
  },
  edit: ( props ) => {
    // Edit the block using the MyBlock component
    return <myblock ...props></myblock>;
  },
  save: ( props ) => {
    // Save the block using the MyBlock component
    return <myblock ...props></myblock>;
  }
} );Code language: JavaScript (javascript)


In this example, the MyBlock component is used to retrieve the current user, the latest posts, and the terms of a taxonomy from the WordPress data store, and render them in the block. The MyBlock component is then passed as the edit and save properties to the registerBlockType method, which registers the block with WordPress.

You can use this approach to register a new WordPress block, and use the useSelect hook to retrieve and use data from the WordPress data store in the block. You can also define the attributes, icon, and category of the block, and customize the behavior of the block in the editor and on the front-end of the website.