Title: Javascript method/action to trigger block editor refresh
Last modified: August 14, 2023

---

# Javascript method/action to trigger block editor refresh

 *  [sam98brown](https://wordpress.org/support/users/sam98brown/)
 * (@sam98brown)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/javascript-method-action-to-trigger-block-editor-refresh/)
 * Hi there. I’m using this filter to change what blocks are available for a post
   based on the taxonomy terms set:
 * add_filter(‘allowed_block_types’, ‘custom_allowed_blocks_based_on_taxonomy’, 
   10, 2);
 * It works on refresh, but I need it to update the available blocks as soon as 
   a term is set on the post, i.e you click a taxonomy term and it refreshes the
   block editor.
 * Is there such a js event/action available to do this, or do I need to save the
   post and refresh the page?

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Miguel Fonseca](https://wordpress.org/support/users/mcsf/)
 * (@mcsf)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/javascript-method-action-to-trigger-block-editor-refresh/#post-16971863)
 * Hi there,
 * I think you’ll have a better experience if, instead of having to refresh, you
   leverage the Data API to react to changes in the post’s terms. As a proof of 
   concept, you can try the following directly in your browser console when editing
   a post:
 *     ```wp-block-code
       function makeListener() {
       	let prevCategories;
   
       	return function updateAllowedBlockTypes() {
       		const categories = wp.data.select('core/editor').getCurrentPost().categories;
       		if (categories === prevCategories) {
       			return;
       		}
       		prevCategories = categories;
   
       		const MY_CATEGORY = 1;
       		const MY_CATEGORY_ALLOWED_TYPES = ['core/paragraph', 'core/image'];
   
       		const currentTypes = wp.data.select('core/block-editor').getSettings().allowedBlockTypes;
       		const nextTypes = categories.includes(MY_CATEGORY) ? MY_CATEGORY_ALLOWED_TYPES : true;
   
       		if (nextTypes !== currentTypes) {
       			console.log('setting allowed block types to', nextTypes);
       			wp.data.dispatch('core/block-editor').updateSettings({
       				allowedBlockTypes: nextTypes,
       			});
       		}
       	};
       };
   
       const unsubscribe = wp.data.subscribe(makeListener());
       ```
   
 * Replace the constant `MY_CATEGORY = 1;` with whatever works for you. You’ll notice
   that, as soon as you save your draft after toggling that category, the console
   will log that it either set the allowed block types to `['core/paragraph', 'core/
   image']` or that it reset it to `true`.
 * I’ll leave the details up to you, but I hope this illustrates how to work with
   the Data API. 🙂
 * Oh, also note that the `allowed_block_types` filter was deprecated in 5.8 in 
   favour of `allowed_block_types_all`.
 *  Thread Starter [sam98brown](https://wordpress.org/support/users/sam98brown/)
 * (@sam98brown)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/javascript-method-action-to-trigger-block-editor-refresh/#post-16974280)
 * Thanks for the help! Can you point me in the right direction for the documentation
   for this Data API? I can only find information on the REST API.
 * I’ve implemented the code but when I change the category I just see the same 
   taxonomy term ID returned:
 *     ```wp-block-code
       function limitBlocksBasedOnTaxes() {
   
       const unsubscribe = wp.data.subscribe(makeListener())
   
       }
   
       function makeListener() {
   
       let prevCategories
   
       return function updateAllowedBlockTypes() {
   
       const categories = wp.data.select('core/editor').getCurrentPost()[
   
       'article-category'
   
       ]
   
       console.log('categories', categories)
   
       if (categories === prevCategories) {
   
       return
   
       }
   
       prevCategories = categories
   
       const MY_CATEGORY = 4
   
       const MY_CATEGORY_ALLOWED_TYPES = ['core/paragraph']
   
       const currentTypes = wp.data
   
       .select('core/block-editor')
   
       .getSettings().allowedBlockTypes
   
       const nextTypes = categories.includes(MY_CATEGORY)
   
       ? MY_CATEGORY_ALLOWED_TYPES
   
       : true
   
       if (nextTypes !== currentTypes) {
   
       console.log('setting allowed block types to', nextTypes)
   
       wp.data.dispatch('core/block-editor').updateSettings({
   
       allowedBlockTypes: nextTypes,
   
       })
   
       }
   
       }
   
       }
       ```
   
 * That console.log returns the same value any time I click a taxonomy term
 *  [Miguel Fonseca](https://wordpress.org/support/users/mcsf/)
 * (@mcsf)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/javascript-method-action-to-trigger-block-editor-refresh/#post-16977239)
 * > Can you point me in the right direction for the documentation for this Data
   > API? I can only find information on the REST API.
 * The Data API is organised in “stores”, with each store exposing its own set of“
   selectors” (methods with which you retrieve state) and “actions” (which you can
   dispatch to trigger changes in the store).
 * You can access the [entire reference here](https://developer.wordpress.org/block-editor/reference-guides/data/).
   Within it, you will find two stores that are helpful for your task: the [editor store](https://developer.wordpress.org/block-editor/reference-guides/data/data-core-editor/)
   and the [block-editor store](https://developer.wordpress.org/block-editor/reference-guides/data/data-core-block-editor/).
   The editor store contains data specific to the post editor, such as active taxonomies.
   The block-editor store contains, among other things, settings dictating how the
   block editor should behave, such as which block types are allowed.
 * > I’ve implemented the code but when I change the category I just see the same
   > taxonomy term ID returned:
 * If I understood you correctly, I think the issue is that you would like the code
   to run without having to even save the draft. In that case, you’ll need a slightly
   different state selector called `getEditedPostAttribute`. I have updated my demo
   accordingly, and this works on my test site:
 *     ```wp-block-code
       function makeListener() {
       	let prevCategories = [];
   
       	return function updateAllowedBlockTypes() {
       		// We use wp.data.select() to access a specific data store -- in this
       		// case, the 'core/editor' store, which is tied to the post currently
       		// being edited.
       		//
       		// This call exposes all state selectors, among which we find:
       		//
       		// - getEditedPostAttribute
       		// - getCurrentPostAttribute
       		//
       		// Selector getEditedPostAttribute reflects changes to the post as
       		// they are being made by the user, while getCurrentPostAttribute
       		// only reflects changes after the post is saved.
       		const categories = wp.data
       			.select( 'core/editor' )
       			.getEditedPostAttribute( 'categories' );
   
       		// Bail if the data isn't ready yet.
       		if ( ! categories ) {
       			return;
       		}
   
       		// Bail if there has been no meaningful state change.
       		if ( categories === prevCategories ) {
       			return;
       		}
   
       		prevCategories = categories;
   
       		const MY_CATEGORY = 1;
       		const MY_CATEGORY_ALLOWED_TYPES = [ 'core/paragraph', 'core/image' ];
   
       		// Notice how we connect to the 'core/block-editor' store instead of
       		// 'core/editor' for state related to block editor settings, such as
       		// allowed block types.
       		const currentTypes = wp.data
       			.select( 'core/block-editor' )
       			.getSettings()?.allowedBlockTypes;
   
       		const nextTypes = categories.includes( MY_CATEGORY )
       			? MY_CATEGORY_ALLOWED_TYPES
       			: true;
   
       		if ( nextTypes !== currentTypes ) {
       			console.log( 'setting allowed block types to', nextTypes );
       			wp.data.dispatch( 'core/block-editor' ).updateSettings( {
       				allowedBlockTypes: nextTypes,
       			} );
       		}
       	};
       }
   
       const unsubscribe = wp.data.subscribe( makeListener() );
       ```
   
 * I hope this helps!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Javascript method/action to trigger block editor refresh’ is closed to
new replies.

## Tags

 * [api](https://wordpress.org/support/topic-tag/api/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 2 participants
 * Last reply from: [Miguel Fonseca](https://wordpress.org/support/users/mcsf/)
 * Last activity: [2 years, 9 months ago](https://wordpress.org/support/topic/javascript-method-action-to-trigger-block-editor-refresh/#post-16977239)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics