Javascript method/action to trigger block editor refresh

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:

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.

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. Within it, you will find two stores that are helpful for your task: the editor store and the block-editor store. 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:

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!