Contents
Introduction
This tutorial explains, in exhaustive detail, how to consume wp.datas select and dispatch APIs inside WordPress blocks using modern patterns (React hooks: useSelect, useDispatch), classic programmatic access (wp.data.select / wp.data.dispatch), and HOCs (withSelect, withDispatch). It covers common store names, frequently used selectors and actions, best practices, performance tips, examples for reading/writing post data and block attributes, and how to coordinate asynchronous entity fetching when building editor UI.
Concepts and terminology
- wp.data — central data store mechanism in Gutenberg. Exposes runtime-selectors and -actions.
- select — synchronous read-only accessors into a registered store (select(storeName).selectorName(…)). Use to read editor state.
- dispatch — invoke actions exposed by a store (dispatch(storeName).actionName(…)). Use to update state, insert blocks, edit post meta, etc.
- useSelect / useDispatch — React hooks provided by @wordpress/data for consuming select/dispatch inside functional components and blocks. They provide automatic subscription/unsubscription and integrate with component re-render lifecycle.
- withSelect / withDispatch — higher-order components (HOCs) for class components or legacy code to map selectors/actions to props.
- Resolvers — some selectors (getEntityRecords, for example) automatically trigger network requests when used inside useSelect or withSelect, allowing components to request entities on demand.
Common stores, selectors and actions
These are the most commonly used stores when writing blocks that interact with the editor or manage content:
| store | typical selectors | typical actions |
| core/editor | getCurrentPostId, getCurrentPostType, getEditedPostAttribute(titlemetacontent), getEditedPost | editPost, savePost (depends on WP version) |
| core/block-editor | getBlocks, getBlock, getSelectedBlockClientId, getBlockOrder, getBlockIndex | insertBlocks, updateBlockAttributes, removeBlocks, selectBlock, clearSelectedBlock |
| core | getEntityRecords (postType), getEntityRecord (single), getAuthors, getSettings | Some entity actions (resolvers for fetching) — use dispatch(core) utilities |
Note: API names may vary slightly across WordPress versions. The examples below use the stable, widely-supported selectors/actions such as getEditedPostAttribute, getEntityRecords, updateBlockAttributes, insertBlocks, and editPost.
Using useSelect and useDispatch (recommended for blocks)
When building block edit components (functional components), prefer useSelect/useDispatch. They provide clear separation of reads and writes and automatically subscribe the component to data changes.
Import examples (ESNext)
import { useSelect, useDispatch } from @wordpress/data
import { createBlock } from @wordpress/blocks
Example: reading the current post title and edited content
import { useSelect } from @wordpress/data
import { PlainText } from @wordpress/block-editor
function MyBlockEdit() {
const title = useSelect( (select) => {
return select(core/editor).getEditedPostAttribute(title)
}, [] ) // empty deps array: run once on mount and subscribe to changes
const content = useSelect( (select) => {
return select(core/editor).getEditedPostAttribute(content)
}, [] )
return (
Post title: { title }
{} } />
</div>
)
}
</pre>
<h3><span id="Example_updating_a_block_attribute_using_useDispatch">Example: updating a block attribute using useDispatch</span></h3>
<pre class=EnlighterJSRAW data-enlighter-language=jsx>
import { useDispatch } from @wordpress/data
import { Button } from @wordpress/components
function UpdateBlockAttributesButton( { clientId } ) {
const { updateBlockAttributes, selectBlock } = useDispatch( core/block-editor )
const onClick = () => {
// set an attribute on the block
updateBlockAttributes( clientId, { myCustomAttribute: value } )
// optionally select it after update
selectBlock( clientId )
}
return <Button onClick={ onClick }>Update attributes</Button>
}
</pre>
<h3><span id="Example_inserting_a_new_coreparagraph_block_programmatically">Example: inserting a new core/paragraph block programmatically</span></h3>
<pre class=EnlighterJSRAW data-enlighter-language=jsx>
import { useDispatch } from @wordpress/data
import { createBlock } from @wordpress/blocks
function InsertParagraphButton() {
const { insertBlocks } = useDispatch( core/block-editor )
const addParagraph = () => {
const paragraph = createBlock( core/paragraph, { content: Inserted by code } )
insertBlocks( paragraph ) // appends by default
}
return <button onClick={ addParagraph }>Insert paragraph</button>
}
</pre>
<h2><span id="Using_the_global_wpdataselect_and_wpdatadispatch_legacy_or_non-React_code">Using the global wp.data.select and wp.data.dispatch (legacy or non-React code)</span></h2>
<p>
If youre writing plain JavaScript (no React), or you need to read/write from a script outside a block edit React component, use the global APIs wp.data.select and wp.data.dispatch directly. Remember to manage subscriptions manually when needed.
</p>
<h3><span id="Read_some_editor_state">Read some editor state</span></h3>
<pre class=EnlighterJSRAW data-enlighter-language=javascript>
// read current post id
const postId = wp.data.select( core/editor ).getCurrentPostId()
// read edited post attribute (meta, title, content)
const editedTitle = wp.data.select( core/editor ).getEditedPostAttribute( title )
const editedMeta = wp.data.select( core/editor ).getEditedPostAttribute( meta )
</pre>
<h3><span id="Dispatch_an_action">Dispatch an action</span></h3>
<pre class=EnlighterJSRAW data-enlighter-language=javascript>
// update post meta using core/editors editPost action
wp.data.dispatch( core/editor ).editPost({
meta: {
my_plugin_meta_key: new-value
}
})
</pre>
<h3><span id="Subscribe_to_store_changes">Subscribe to store changes</span></h3>
<pre class=EnlighterJSRAW data-enlighter-language=javascript>
// subscribe returns an unsubscribe function
const unsubscribe = wp.data.subscribe( () => {
const title = wp.data.select( core/editor ).getEditedPostAttribute( title )
console.log( Title changed:, title )
})
// Later when you dont need it:
unsubscribe()
</pre>
<h2><span id="Using_withSelect_and_withDispatch_HOCs">Using withSelect and withDispatch HOCs</span></h2>
<p>
For class components or older code that prefers HOCs, withSelect and withDispatch map selectors and actions to props. Use compose to combine them cleanly.
</p>
<pre class=EnlighterJSRAW data-enlighter-language=jsx>
import { compose } from @wordpress/compose
import { withSelect, withDispatch } from @wordpress/data
class MyLegacyComponent extends React.Component {
render() {
const { currentPostId, blocks, updateBlockAttributes } = this.props
// render UI...
return <div>Post ID: { currentPostId }, Blocks: { blocks.length }</div>
}
}
export default compose(
withSelect( (select) => {
return {
currentPostId: select(core/editor).getCurrentPostId(),
blocks: select(core/block-editor).getBlocks()
}
}),
withDispatch( (dispatch) => {
return {
updateBlockAttributes: (clientId, attrs) => {
dispatch(core/block-editor).updateBlockAttributes(clientId, attrs)
}
}
})
)( MyLegacyComponent )
</pre>
<h2><span id="Working_with_entities_posts_terms_users">Working with entities (posts, terms, users)</span></h2>
<p>
Use the <b>core</b> stores entity selectors to read lists or single records. When used inside useSelect or withSelect, resolvers run automatically to fetch entities from the REST API if they are not loaded yet.
</p>
<h3><span id="Example_fetch_latest_5_posts">Example: fetch latest 5 posts</span></h3>
<pre class=EnlighterJSRAW data-enlighter-language=jsx>
import { useSelect } from @wordpress/data
function LatestPosts() {
const posts = useSelect( (select) => {
return select(core).getEntityRecords( postType, post, { per_page: 5 } )
}, [] )
if ( posts === undefined ) {
return <p>Loading…</p>
}
if ( posts.length === 0 ) {
return <p>No posts found.</p>
}
return (
<ul>
{ posts.map( p => <li key={ p.id }>{ p.title p.title.rendered }</li> ) }
</ul>
)
}
</pre>
<p>
Note: getEntityRecords returns <i>undefined</i> when still resolving check for undefined to show a loading state. The resolver will dispatch the network request automatically when used within useSelect/withSelect.
</p>
<h2><span id="Common_integration_patterns_and_examples">Common integration patterns and examples</span></h2>
<h3><span id="1_Read_show_selected_block_details">1) Read show selected block details</span></h3>
<pre class=EnlighterJSRAW data-enlighter-language=jsx>
import { useSelect } from @wordpress/data
function SelectedBlockInfo() {
const selectedClientId = useSelect( (select) => {
return select(core/block-editor).getSelectedBlockClientId()
}, [] )
const block = useSelect( (select) => {
return selectedClientId ? select(core/block-editor).getBlock( selectedClientId ) : null
}, [ selectedClientId ] )
if ( ! block ) {
return <div>No block selected</div>
}
return (
<div>
<p><b>Selected block:</b> { block.name }</p>
<pre>{ JSON.stringify(block.attributes, null, 2) }</pre>
</p></div>
<p> )<br />
}</p>
<h3><span id="2_Update_selected_block_attribute">2) Update selected block attribute</span></h3>
<pre class=EnlighterJSRAW data-enlighter-language=jsx>
import { useSelect, useDispatch } from @wordpress/data
function ToggleBlockFlag() {
const selectedClientId = useSelect( (select) => select(core/block-editor).getSelectedBlockClientId(), [] )
const { updateBlockAttributes } = useDispatch( core/block-editor )
const toggle = () => {
if ( ! selectedClientId ) return
const block = wp.data.select(core/block-editor).getBlock( selectedClientId )
const current = block.attributes.myFlag false
updateBlockAttributes( selectedClientId, { myFlag: ! current } )
}
return <button onClick={ toggle }>Toggle flag</button>
}
</pre>
<h3><span id="3_Insert_blocks_at_a_particular_index">3) Insert blocks at a particular index</span></h3>
<pre class=EnlighterJSRAW data-enlighter-language=jsx>
import { useDispatch } from @wordpress/data
import { createBlock } from @wordpress/blocks
function InsertAtTopButton() {
const { insertBlocks } = useDispatch( core/block-editor )
const insertAtTop = () => {
const block = createBlock( core/paragraph, { content: Top inserted paragraph } )
insertBlocks( block, 0 ) // insert at index 0
}
return <button onClick={ insertAtTop }>Insert at top</button>
}
</pre>
<h2><span id="Edge_cases_debugging_and_common_pitfalls">Edge cases, debugging and common pitfalls</span></h2>
<ul>
<li><b>Undefined selectors</b>: Some selectors return undefined while their resolvers run. Check for undefined before rendering lists.</li>
<li><b>Store names</b>: Use the exact store name (e.g., core/block-editor, not editor). If in doubt, inspect wp.data.stores in the console to see registered stores.</li>
<li><b>Action names</b>: Some actions and selectors differ by WP version. When an action isnt found, check console errors and WordPress developer docs or inspect store.selectors/ store.actions in the console.</li>
<li><b>Component re-renders</b>: useSelect subscribes to changes and re-runs when dependencies or store state change. Keep selectors minimal to avoid unnecessary re-renders.</li>
<li><b>Mutable objects</b>: Do not mutate objects returned by select treat them as read-only. Use dispatch actions to update state.</li>
</ul>
<h2><span id="Performance_tips">Performance tips</span></h2>
<ol>
<li>Keep useSelect selectors as narrow as possible. Selecting a large part of the state will cause more frequent re-renders.</li>
<li>Use the dependency array (second argument) for useSelect to control when the selector callback should change identity.</li>
<li>Memoize derived values (useMemo inside components) if required, but prefer selecting only the raw data you need.</li>
<li>Avoid repeatedly calling createBlock/insertBlocks inside renders — trigger actions in event handlers.</li>
<li>Use withSelect/withDispatch if you must: it helps keep pure presentational components and separate data logic, but hooks are generally simpler.</li>
</ol>
<h2><span id="Advanced_topics">Advanced topics</span></h2>
<h3><span id="Checking_if_entity_records_are_loaded">Checking if entity records are loaded</span></h3>
<p>
Some apps want to show a loader until an entity is available. A typical pattern:
</p>
<pre class=EnlighterJSRAW data-enlighter-language=jsx>
import { useSelect } from @wordpress/data
function PostsList() {
const posts = useSelect( (select) => select(core).getEntityRecords(postType, post, { per_page: 5 }), [] )
if ( posts === undefined ) {
return <div>Loading posts…</div>
}
return (
<ul>{ posts.map( p => <li key={ p.id }>{ p.title.rendered }</li> ) }</ul>
)
}
</pre>
<h3><span id="Resolving_race_conditions">Resolving race conditions</span></h3>
<p>
Because selectors may cause network requests, avoid calling the dispatch action that triggers a resolver repeatedly in quick succession. Use debouncing if you trigger edits on each keystroke and rely on a resolver to fetch. For example, if your code calls an action that triggers an entity fetch, debounce the trigger to avoid flooding the REST API.
</p>
<h3><span id="Using_wpdataselect_inside_event_callbacks">Using wp.data.select inside event callbacks</span></h3>
<p>
Remember the returned object from select may be stale if stored in an outer closure. Re-call wp.data.select(…) inside the callback for up-to-date values.
</p>
<pre class=EnlighterJSRAW data-enlighter-language=javascript>
document.getElementById(my-button).addEventListener(click, () => {
const currentTitle = wp.data.select(core/editor).getEditedPostAttribute(title)
console.log(Title at click time:, currentTitle)
})
</pre>
<h2><span id="Practical_full_example_a_block_that_toggles_a_post_meta_boolean">Practical full example: a block that toggles a post meta boolean</span></h2>
<p>
This example demonstrates a block edit component which:
</p>
<ul>
<li>Reads a post meta key via core/editor</li>
<li>Shows its current state</li>
<li>Updates meta using dispatch(core/editor).editPost</li>
</ul>
<pre class=EnlighterJSRAW data-enlighter-language=jsx>
import { useSelect, useDispatch } from @wordpress/data
import { ToggleControl } from @wordpress/components
function PostMetaToggle() {
const metaKey = my_plugin_toggle
// Read the meta (meta object or undefined)
const meta = useSelect( (select) => {
return select(core/editor).getEditedPostAttribute(meta)
}, [] )
const toggleValue = meta ? !! meta[ metaKey ] : false
const { editPost } = useDispatch( core/editor )
const onChange = (value) => {
editPost({ meta: { [ metaKey ]: value } })
}
return (
<ToggleControl
label=Enable feature
checked={ toggleValue }
onChange={ onChange }
/>
)
}
</pre>
<h2><span id="How_to_debug_selectors_and_actions">How to debug selectors and actions</span></h2>
<ul>
<li>Open browser console and inspect wp.data.stores to find stores and their selectors/actions.</li>
<li>Call wp.data.select(storeName).someSelector in the console to see available selectors and return values.</li>
<li>Call Object.keys(wp.data.select(storeName)) to list selectors. Likewise Object.keys(wp.data.dispatch(storeName)) for actions.</li>
<li>Use console.log within useSelect to inspect values avoid logging in renders that cause clutter — use effect hooks if needed.</li>
</ul>
<h2><span id="Quick_reference_cheat_sheet">Quick reference cheat sheet</span></h2>
<table>
<tr>
<td><b>Read</b></td>
<td>const value = select(storeName).selectorName(…)</td>
</tr>
<tr>
<td><b>Dispatch</b></td>
<td>dispatch(storeName).actionName(…)</td>
</tr>
<tr>
<td><b>Hook read</b></td>
<td>const v = useSelect( select => select(storeName).selector(), [deps] )</td>
</tr>
<tr>
<td><b>Hook write</b></td>
<td>const { action } = useDispatch(storeName) action(…)</td>
</tr>
<tr>
<td><b>Global</b></td>
<td>wp.data.select(…) and wp.data.dispatch(…)</td>
</tr>
</table>
<h2><span id="Further_reading">Further reading</span></h2>
<ul>
<li><a href=https://developer.wordpress.org/block-editor/components/packages/packages-data/>WordPress @wordpress/data package docs</a></li>
<li><a href=https://developer.wordpress.org/block-editor/reference-guides/data/data-core/>Core data store reference</a></li>
<li><a href=https://developer.wordpress.org/block-editor/>Block editor handbook</a></li>
</ul>
<h2><span id="Final_notes">Final notes</span></h2>
<p>
This article provided comprehensive, practical guidance and many ready-to-use examples for consuming wp.data select and dispatch inside blocks using both modern hooks and legacy patterns. Use hooks for new block development, check return values for undefined when selectors resolve asynchronously, and keep selectors focused to avoid performance overhead. When debugging, inspect wp.data.stores in the console to see what selectors and actions are available in your WordPress version.
</p></p>
<br>
<hr size="30" />
<table>
<tr>
<td style="background-color:#1c82bc;">
<image width="350px" height="400px" src="https://yourwpweb.com/wp-content/uploads/2020/02/donaciones-bat.png">
</td>
<td style="background-color:#1c82bc;">
<p style="color:white;" align="center" ><b>Acepto donaciones de BAT's mediante el navegador Brave 🙂</b></p>
</td>
</tr>
<tr>
</table>
<br>
<hr><div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon sd-sharing"><h3 class="sd-title">¡Si te ha servido el artículo ayúdame compartiendolo en algún sitio! Pero si no te ha sido útil o tienes dudas déjame un comentario! 🙂</h3><div class="sd-content"><ul><li class="share-twitter"><a rel="nofollow noopener noreferrer"
data-shared="sharing-twitter-2628"
class="share-twitter sd-button share-icon no-text"
href="https://yourwpweb.com/2025/09/26/how-to-consume-wp-data-select-and-dispatch-in-blocks-js-in-wordpress/?share=twitter"
target="_blank"
aria-labelledby="sharing-twitter-2628"
>
<span id="sharing-twitter-2628" hidden>Click to share on X (Opens in new window)</span>
<span>X</span>
</a></li><li class="share-facebook"><a rel="nofollow noopener noreferrer"
data-shared="sharing-facebook-2628"
class="share-facebook sd-button share-icon no-text"
href="https://yourwpweb.com/2025/09/26/how-to-consume-wp-data-select-and-dispatch-in-blocks-js-in-wordpress/?share=facebook"
target="_blank"
aria-labelledby="sharing-facebook-2628"
>
<span id="sharing-facebook-2628" hidden>Click to share on Facebook (Opens in new window)</span>
<span>Facebook</span>
</a></li><li class="share-jetpack-whatsapp"><a rel="nofollow noopener noreferrer"
data-shared="sharing-whatsapp-2628"
class="share-jetpack-whatsapp sd-button share-icon no-text"
href="https://yourwpweb.com/2025/09/26/how-to-consume-wp-data-select-and-dispatch-in-blocks-js-in-wordpress/?share=jetpack-whatsapp"
target="_blank"
aria-labelledby="sharing-whatsapp-2628"
>
<span id="sharing-whatsapp-2628" hidden>Click to share on WhatsApp (Opens in new window)</span>
<span>WhatsApp</span>
</a></li><li class="share-tumblr"><a rel="nofollow noopener noreferrer"
data-shared="sharing-tumblr-2628"
class="share-tumblr sd-button share-icon no-text"
href="https://yourwpweb.com/2025/09/26/how-to-consume-wp-data-select-and-dispatch-in-blocks-js-in-wordpress/?share=tumblr"
target="_blank"
aria-labelledby="sharing-tumblr-2628"
>
<span id="sharing-tumblr-2628" hidden>Click to share on Tumblr (Opens in new window)</span>
<span>Tumblr</span>
</a></li><li class="share-reddit"><a rel="nofollow noopener noreferrer"
data-shared="sharing-reddit-2628"
class="share-reddit sd-button share-icon no-text"
href="https://yourwpweb.com/2025/09/26/how-to-consume-wp-data-select-and-dispatch-in-blocks-js-in-wordpress/?share=reddit"
target="_blank"
aria-labelledby="sharing-reddit-2628"
>
<span id="sharing-reddit-2628" hidden>Click to share on Reddit (Opens in new window)</span>
<span>Reddit</span>
</a></li><li class="share-pocket"><a rel="nofollow noopener noreferrer"
data-shared="sharing-pocket-2628"
class="share-pocket sd-button share-icon no-text"
href="https://yourwpweb.com/2025/09/26/how-to-consume-wp-data-select-and-dispatch-in-blocks-js-in-wordpress/?share=pocket"
target="_blank"
aria-labelledby="sharing-pocket-2628"
>
<span id="sharing-pocket-2628" hidden>Click to share on Pocket (Opens in new window)</span>
<span>Pocket</span>
</a></li><li class="share-end"></li></ul></div></div></div>
<div id='jp-relatedposts' class='jp-relatedposts' >
<h3 class="jp-relatedposts-headline"><span id="Related"><em>Related</em></span></h3>
</div></article>
<div id="bsf-rt-comments"></div>
<div id="comments" class="comments-area clearfix">
<div id="respond" class="comment-respond">
<h2 id="reply-title" class="comment-reply-title hs-secondary-large">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2025/09/26/how-to-consume-wp-data-select-and-dispatch-in-blocks-js-in-wordpress/#respond" style="display:none;">Cancel reply</a></small></h2><form action="https://yourwpweb.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p>
<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p>
<p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p>
<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p>
<p class="comment-subscription-form"><input type="checkbox" name="subscribe_comments" id="subscribe_comments" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" /> <label class="subscribe-label" id="subscribe-label" for="subscribe_comments">Notify me of follow-up comments by email.</label></p><p class="comment-subscription-form"><input type="checkbox" name="subscribe_blog" id="subscribe_blog" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" /> <label class="subscribe-label" id="subscribe-blog-label" for="subscribe_blog">Notify me of new posts by email.</label></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='2628' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="44f557145b" /></p><p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="76"/><script>document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script></p></form> </div><!-- #respond -->
</div><!-- .comments-area -->
</main>
<div id="sidebar-single" role="complementary" class="grid-col grid-sidebar-col last-col sidebar sidebar-single clearfix">
<aside id="polylang-3" class="widget_polylang widget clearfix"><h3 class="widget-title hs-secondary-smallest ls-min"><span>Choose language/Elige idioma:</span></h3><ul>
<li class="lang-item lang-item-2 lang-item-es no-translation lang-item-first"><a lang="es-ES" hreflang="es-ES" href="https://yourwpweb.com/es/"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAflBMVEX/AAD9AAD3AADxAADrAAD/eXn9bGz8YWH8WVn6UVH5SEj5Pz/3NDT0Kir9/QD+/nL+/lT18lDt4Uf6+j/39zD39yf19R3n5wDxflXsZ1Pt4Y3x8zr0wbLs1NXz8xPj4wD37t3jmkvsUU/Bz6nrykm3vJ72IiL0FBTyDAvhAABEt4UZAAAAX0lEQVR4AQXBQUrFQBBAwXqTDkYE94Jb73+qfwVRcYxVQRBRToiUfoaVpGTrtdS9SO0Z9FR9lVy/g5c99+dKl30N5uxPuviexXEc9/msC7TOkd4kHu/Dlh4itCJ8AP4B0w4Qwmm7CFQAAAAASUVORK5CYII=" alt="" width="16" height="11" style="width: 16px; height: 11px;" /><span style="margin-left:0.3em;">Español</span></a></li>
<li class="lang-item lang-item-5 lang-item-en current-lang"><a lang="en-US" hreflang="en-US" href="https://yourwpweb.com/2025/09/26/how-to-consume-wp-data-select-and-dispatch-in-blocks-js-in-wordpress/" aria-current="true"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAmVBMVEViZsViZMJiYrf9gnL8eWrlYkjgYkjZYkj8/PujwPybvPz4+PetraBEgfo+fvo3efkydfkqcvj8Y2T8UlL8Q0P8MzP9k4Hz8/Lu7u4DdPj9/VrKysI9fPoDc/EAZ7z7IiLHYkjp6ekCcOTk5OIASbfY/v21takAJrT5Dg6sYkjc3Nn94t2RkYD+y8KeYkjs/v7l5fz0dF22YkjWvcOLAAAAgElEQVR4AR2KNULFQBgGZ5J13KGGKvc/Cw1uPe62eb9+Jr1EUBFHSgxxjP2Eca6AfUSfVlUfBvm1Ui1bqafctqMndNkXpb01h5TLx4b6TIXgwOCHfjv+/Pz+5vPRw7txGWT2h6yO0/GaYltIp5PT1dEpLNPL/SdWjYjAAZtvRPgHJX4Xio+DSrkAAAAASUVORK5CYII=" alt="" width="16" height="11" style="width: 16px; height: 11px;" /><span style="margin-left:0.3em;">English</span></a></li>
</ul>
</aside><!-- END .widget -->
<aside id="recent-posts-4" class="widget_recent_entries widget clearfix">
<h3 class="widget-title hs-secondary-smallest ls-min"><span>Recent Posts</span></h3>
<ul>
<li>
<a href="https://yourwpweb.com/2025/09/26/how-to-extend-wpgraphql-with-custom-types-and-resolvers-in-php-in-wordpress/">How to extend WPGraphQL with custom types and resolvers in PHP in WordPress</a>
</li>
<li>
<a href="https://yourwpweb.com/2025/09/26/how-to-consume-wpgraphql-graphql-from-js-on-the-frontend-in-wordpress/">How to consume WPGraphQL GraphQL from JS on the frontend in WordPress</a>
</li>
<li>
<a href="https://yourwpweb.com/2025/09/26/how-to-index-content-in-algolia-meilisearch-from-wp-in-php-in-wordpress/">How to index content in Algolia/Meilisearch from WP in PHP in WordPress</a>
</li>
<li>
<a href="https://yourwpweb.com/2025/09/26/how-to-create-an-endpoint-for-relevance-and-synonym-searches-in-wordpress/">How to create an endpoint for relevance and synonym searches in WordPress</a>
</li>
<li>
<a href="https://yourwpweb.com/2025/09/26/how-to-create-a-granular-permissions-system-via-metacapabilities-in-php-in-wordpress/">How to create a granular permissions system via metacapabilities in PHP in WordPress</a>
</li>
</ul>
</aside><!-- END .widget --><aside id="custom_html-5" class="widget_text widget_custom_html widget clearfix"><h3 class="widget-title hs-secondary-smallest ls-min"><span>El hosting que uso</span></h3><div class="textwidget custom-html-widget"><a href="//partners.hostgator.com/c/2065727/557999/3094" id="557999"><img src="//a.impactradius-go.com/display-ad/3094-557999" border="0" alt="Gator Website Builder" width="300" height="250"/></a><img height="0" width="0" src="//partners.hostgator.com/i/2065727/557999/3094" style="position:absolute;visibility:hidden;" border="0" /></div></aside><!-- END .widget --></div>
</div>
</section>
<footer id="main-footer" class="footer-wrap clearfix">
<div class="footer-widgets">
<div class="footer-sidebars grid-1 clearfix fader">
<div id="footer-sidebar-1" class="grid-col grid-2x3-col footer-sidebar">
<aside id="text-2" class="widget_text widget clearfix"> <div class="textwidget"><p>© Copyright YourWPweb 2020.</p>
</div>
</aside><!-- END .widget --> </div>
<div id="footer-sidebar-2" class="grid-col grid-2x3-col footer-sidebar">
</div>
<div id="footer-sidebar-3" class="grid-col grid-2x3-col footer-sidebar last-col">
<aside class="widget clearfix"><h3 class="widget-title hs-secondary-smallest ls-min"><span>Meta</span></h3>
<ul>
<li><a href="https://yourwpweb.com/wp-login.php">Log in</a></li>
<li><a href="https://yourwpweb.com/feed/">Entries feed</a></li>
<li><a href="https://yourwpweb.com/comments/feed/">Comments feed</a></li>
<li><a href="https://wordpress.org/">WordPress.org</a></li>
</ul>
</aside><!-- END .widget --> </div>
</div>
</div>
</footer>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/businessx\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['trackAllContentImpressions']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//stats.potionservices.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '25']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
<div id="bsf_rt_progress_bar_container" class="progress-container-top">
<div class="progress-bar" id="bsf_rt_progress_bar"></div>
</div>
<script type="text/javascript">
window.WPCOM_sharing_counts = {"https:\/\/yourwpweb.com\/2025\/09\/26\/how-to-consume-wp-data-select-and-dispatch-in-blocks-js-in-wordpress\/":2628};
</script>
<script type="text/javascript" id="toc-front-js-extra">
/* <![CDATA[ */
var tocplus = {"visibility_show":"show","visibility_hide":"hide","width":"Auto"};
/* ]]> */
</script>
<script type="text/javascript" src="https://yourwpweb.com/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2411.1" id="toc-front-js"></script>
<script type="text/javascript" id="businessx-scripts-js-extra">
/* <![CDATA[ */
var businessx_scripts_data = {"search_placeholder":"Type the keywords you are searching for","home_url":"https:\/\/yourwpweb.com"};
/* ]]> */
</script>
<script type="text/javascript" src="https://yourwpweb.com/wp-content/themes/businessx/assets/js/scripts.js?ver=20160412" id="businessx-scripts-js"></script>
<script type="text/javascript" src="https://yourwpweb.com/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script>
<script type="text/javascript" src="https://yourwpweb.com/wp-includes/js/masonry.min.js?ver=4.2.2" id="masonry-js"></script>
<script type="text/javascript" src="https://yourwpweb.com/wp-includes/js/jquery/jquery.masonry.min.js?ver=3.1.2b" id="jquery-masonry-js"></script>
<script type="text/javascript" id="jquery-masonry-js-after">
/* <![CDATA[ */
(function( $ ) { $( document ).ready(function() { var $sec_portwrap = $("#sec-portfolio-wrap ").masonry(); $sec_portwrap.imagesLoaded( function() { $sec_portwrap.masonry(); }); });})(jQuery);
/* ]]> */
</script>
<script type="text/javascript" src="https://yourwpweb.com/wp-includes/js/comment-reply.min.js?ver=6.8.3" id="comment-reply-js" async="async" data-wp-strategy="async"></script>
<script type="text/javascript" src="https://yourwpweb.com/wp-content/plugins/enlighter/cache/enlighterjs.min.js?ver=PFFpOCatX0Dks2S" id="enlighterjs-js"></script>
<script type="text/javascript" id="enlighterjs-js-after">
/* <![CDATA[ */
!function(e,n){if("undefined"!=typeof EnlighterJS){var o={"selectors":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"options":{"indent":4,"ampersandCleanup":true,"linehover":true,"rawcodeDbclick":false,"textOverflow":"break","linenumbers":true,"theme":"dracula","language":"generic","retainCssClasses":false,"collapse":false,"toolbarOuter":"","toolbarTop":"{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}","toolbarBottom":""}};(e.EnlighterJSINIT=function(){EnlighterJS.init(o.selectors.block,o.selectors.inline,o.options)})()}else{(n&&(n.error||n.log)||function(){})("Error: EnlighterJS resources not loaded yet!")}}(window,console);
/* ]]> */
</script>
<script type="text/javascript" id="jetpack-stats-js-before">
/* <![CDATA[ */
_stq = window._stq || [];
_stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"121397162\",\"post\":\"2628\",\"tz\":\"0\",\"srv\":\"yourwpweb.com\",\"j\":\"1:15.1.1\"}") ]);
_stq.push([ "clickTrackerInit", "121397162", "2628" ]);
/* ]]> */
</script>
<script type="text/javascript" src="https://stats.wp.com/e-202542.js" id="jetpack-stats-js" defer="defer" data-wp-strategy="defer"></script>
<script type="text/javascript" src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js?ver=1.0.0" id="remote_sdk-js" defer="defer" data-wp-strategy="defer"></script>
<script defer type="text/javascript" src="https://yourwpweb.com/wp-content/plugins/akismet/_inc/akismet-frontend.js?ver=1754323727" id="akismet-frontend-js"></script>
<script type="text/javascript" id="bsfrt_frontend-js-extra">
/* <![CDATA[ */
var myObj = {"option":""};
/* ]]> */
</script>
<script type="text/javascript" src="https://yourwpweb.com/wp-content/plugins/read-meter/assets/js/bsf-rt-frontend.min.js?ver=1.0.11" id="bsfrt_frontend-js"></script>
<script type="text/javascript" id="sharing-js-js-extra">
/* <![CDATA[ */
var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"};
/* ]]> */
</script>
<script type="text/javascript" src="https://yourwpweb.com/wp-content/plugins/jetpack/_inc/build/sharedaddy/sharing.min.js?ver=15.1.1" id="sharing-js-js"></script>
<script type="text/javascript" id="sharing-js-js-after">
/* <![CDATA[ */
var windowOpen;
( function () {
function matches( el, sel ) {
return !! (
el.matches && el.matches( sel ) ||
el.msMatchesSelector && el.msMatchesSelector( sel )
);
}
document.body.addEventListener( 'click', function ( event ) {
if ( ! event.target ) {
return;
}
var el;
if ( matches( event.target, 'a.share-twitter' ) ) {
el = event.target;
} else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-twitter' ) ) {
el = event.target.parentNode;
}
if ( el ) {
event.preventDefault();
// If there's another sharing window open, close it.
if ( typeof windowOpen !== 'undefined' ) {
windowOpen.close();
}
windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomtwitter', 'menubar=1,resizable=1,width=600,height=350' );
return false;
}
} );
} )();
var windowOpen;
( function () {
function matches( el, sel ) {
return !! (
el.matches && el.matches( sel ) ||
el.msMatchesSelector && el.msMatchesSelector( sel )
);
}
document.body.addEventListener( 'click', function ( event ) {
if ( ! event.target ) {
return;
}
var el;
if ( matches( event.target, 'a.share-facebook' ) ) {
el = event.target;
} else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-facebook' ) ) {
el = event.target.parentNode;
}
if ( el ) {
event.preventDefault();
// If there's another sharing window open, close it.
if ( typeof windowOpen !== 'undefined' ) {
windowOpen.close();
}
windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' );
return false;
}
} );
} )();
var windowOpen;
( function () {
function matches( el, sel ) {
return !! (
el.matches && el.matches( sel ) ||
el.msMatchesSelector && el.msMatchesSelector( sel )
);
}
document.body.addEventListener( 'click', function ( event ) {
if ( ! event.target ) {
return;
}
var el;
if ( matches( event.target, 'a.share-tumblr' ) ) {
el = event.target;
} else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-tumblr' ) ) {
el = event.target.parentNode;
}
if ( el ) {
event.preventDefault();
// If there's another sharing window open, close it.
if ( typeof windowOpen !== 'undefined' ) {
windowOpen.close();
}
windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomtumblr', 'menubar=1,resizable=1,width=450,height=450' );
return false;
}
} );
} )();
var windowOpen;
( function () {
function matches( el, sel ) {
return !! (
el.matches && el.matches( sel ) ||
el.msMatchesSelector && el.msMatchesSelector( sel )
);
}
document.body.addEventListener( 'click', function ( event ) {
if ( ! event.target ) {
return;
}
var el;
if ( matches( event.target, 'a.share-pocket' ) ) {
el = event.target;
} else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-pocket' ) ) {
el = event.target.parentNode;
}
if ( el ) {
event.preventDefault();
// If there's another sharing window open, close it.
if ( typeof windowOpen !== 'undefined' ) {
windowOpen.close();
}
windowOpen = window.open( el.getAttribute( 'href' ), 'wpcompocket', 'menubar=1,resizable=1,width=450,height=450' );
return false;
}
} );
} )();
/* ]]> */
</script>
</body>
</html>