Is there an event I can listen to when you click into a block and everything has fully re-rendered?

[cb911nr]

I am struggling to figure this out..

RichText component linebreaks become List Items, and it's an Unordered List..

I need to add classes to the List Items, so doing something as simple as a jquery selector to add the class to all the list items as an example would work.. however when I use something like useEffect() to apply the classes it theoretically works... but since the list items take a second to load / re-render it can't add the classes to them unless you set a setTimeout() to give enough time for the DOM to load.

Is there something very simple I am missing to know when I click into RichText and it renders the elements again, to then Fire a function after it's fully rendered

[cb911nr]

Managed to basically get something close to what I wanted by doing this with a MutationObserver, which works great, but I feel like I am just missing something silly / native. So now whenever you click into the block, or edit it adds the class, but seems like there has to be a better native way?

useEffect( () => {
		let el = $('#' + blockProps.id)


		let observer = new MutationObserver(mutationRecords => {
	 		el.find('li').addClass('c-checklist__item');
		});

		observer.observe(el[0], {
			childList: true,
			subtree: true,
			attributes: true
		});
	}, [])

[talldan]

That code seems ok. You should call observer.disconnect in the useEffect return callback to clean up.

useEffect( () => {
		let el = $('#' + blockProps.id)


		let observer = new MutationObserver(mutationRecords => {
	 		el.find('li').addClass('c-checklist__item');
		});

		observer.observe(el[0], {
			childList: true,
			subtree: true,
			attributes: true
		});
		
		return () => observer.disconnect();
	}, [])

You could also consider using innerBlocks instead of RichText multiline for the checklist items and then set the classname using a prop. The core list block will be switching to use inner blocks soon - see #42711.