How to check or uncheck a category in the block editor in javascript?

You can still use jQuery to alter edit screen DOM elements after the page loads. React isn’t required. The element structure is pretty generic, I think the only way to distinguish one taxonomy checklist from another is through the aria-label attribute of the div.editor-post-taxonomies__hierarchical-terms-list element. Reliably identifying the right check box within that isn’t straight forward either, but it’s not impossible.

Thank you bcworkz,
This is exactly what I did I used jQuery and unchecked the categories, we need to add a setTimeout for that run correctly.
Unfortunately once the article has been updated and after having refreshed the page, I see that some boxes are checked by themselves! (my precedent test)
It’s hell I tell you. I no longer count the hours wasted.
I think the only solution is to go through React but the tutorials on the web explain how to create a new block panel not how to modify an already existing one.
I don’t know how to do it anymore and I don’t have time to learn all Chinese (React JS process subtlety)
It is possible that the solution only holds on a few lines.

• This reply was modified 3 years, 8 months ago by StephanR.

My JS :

window.onload = function () {
	(function ($) {

		$(".interface-interface-skeleton__sidebar").on("click", ".components-checkbox-control__input", function () {

			console.log('CLICK');

			var $Area, id;

			$Area = $(this).parents('.editor-post-taxonomies__hierarchical-terms-list');
			id = $(this).attr('id');

			setTimeout(function () {
				$Area.find('.components-checkbox-control__input:checked:not(#' + id + ')').prop("checked", false);
			}, 100);

		});

	})(jQuery);
}

• This reply was modified 3 years, 8 months ago by StephanR.
• This reply was modified 3 years, 8 months ago by StephanR.

I sympathize with your reluctance to embrace React. I’m right there with you. It’s certainly used for block development, but the taxonomy terms checklists remain implemented as meta boxes, defined in PHP. React has nothing to do with them.

Something strange is going on though. I don’t understand it either. The form is submitting term IDs for any checked terms, but I don’t see how the form knows what IDs to send.

If your goal is that certain terms always or never be checked by certain users, altering the state by script isn’t very effective since users can change the state after the script runs. In such a case it’d be better to enforce this server side in PHP.

My goal is simple: the categories have two levels of depth (parent, child), the user can choose a single category and then its parent category.
To make sure he applies this rule I prepared a simple script. When the user click on a child category, the script unchecks all the others and then checks the parent category (this works fine with the classic editor). On the PHP server side, I check if the parent category is checked and only keeps the first child category checked.
I want to switch to the block editor now that it is mature, I have made all the necessary transitions in terms of ergonomics but I am running into this problem.