Add plugin rendering pipeline

More event hooks are needed especially with regard to rendering the main UI.

My plugin, for example, hides completed TODOs. The trouble with my plugin simply being made aware of what blocks exist on the current page is it must infer what the resulting markup will be and add appropriate styles to affect select blocks by targeting their block-ids. It’s completely workable but it’s somewhat backwards. It would be easier to directly participate in the main UI rendering.

A custom renderer could work but it would require the dev to be intimately aware of how the page is structured and how the css works, unless he provides a substitute UI with, optionally, an edit mode. I am suggesting a way to enrich the UI as it’s rendered, by way of conditionally adding classes and/or attributes. And if a pipeline exposed each block as it was being rendered the developer could participate in either enrichment or replacement rendering.

Assume all arguments in the following functions are immutables (e.g. persistent data structures).

on('block:enrich', async function(block, {classes, attributes}){ 
  ... compute new classes/attributes based on conditions
  return {classes: newClasses, attributes: newAttributes};
})

on('block:render', async function(blockTree, virtualDOM){ 
  ... compute new dom object from the old one
  return newVirtualDOM;
});

With the second replacement approach, the last renderer in the pipeline returns the virtual dom and the core renders it. With the former enrichment approach, you’re just providing attributes and classes (to accommodate stylesheets) so no virtual dom is needed.

The benefit of having access to the virtual DOM is it ensures that the core renderer begins with a valid representation of the DOM node. The developer doesn’t need to formulate the basic requirements.

This approach is dramatically different from what my plugin does. My plugin infers that certain items were rendered into the main UI then it infers what style it needs to inject into the main UI basically using block identifiers/ids. While this can be made to work it makes certain kinds of UI augmentations heavy handed or impossible. Right now, the majority of plugins add their own sub-UIs rather than participate in enriching the core UI. By providing a pipeline, the core UI can be augmented more easily with classes and attributes and stylesheets. It’s essentially an event hook which allows the developer to participate in main UI rendering.

This use case demonstrates the benefits of this feature. I am sure, if you think about it how it combines with stylesheets, you can envision many more.

Style Carousel now dynamically adds the classes of your choosing to the DOM elements of matching blocks. A rendering pipeline would be superior, but in its absence it gets you close. The main drawback is my approach has to poll and periodically update the DOM with classes as opposed to keeping the two in sync in realtime (via the, ahem, pipeline).