Using registerPlugin to insert dynamic behavior in the block editor

[brittonwalker]

Hi 👋, I had a request from a client to help streamline some processes for their editors while maintaining flexibility over the content in the block editor when creating articles. Here are some examples:

• finding the first paragraph and setting it to have a dropcap
• dyanmically inserting blocks based on the content, (i.e. custom CTAs, ad blocks, more marketing type of custom blocks)

My original idea was to find a way to hook into the editor on some sort of save hook situation. I initially found success on this but there ended up being issues that I concluded were likely server related. The work was messy and required a bit of logic that made me think I was hacking and pushing too far. When a bug got reported that I felt I couldn't reproduce locally, I decided to shift gears.

My question is if it's strange to use registerPlugin to mount a component that renders no markup but performs these actions. I can give an example of a useEffect that listens for the first core/paragraph and applies a drop cap. I thought this was all good to go but a colleague noticed that if we removed of the first paragraph the undo history wouldn't work. I found __unstableMarkNextChangeAsNotPersistent through reference somewhere in the github and it solved my issue.

Is this smart/dumb? Is this good/bad? Is there a better way? I haven't come across anything like this through an example but I thought others might have done something similar and wanted to share/hear from anyone that has gotten into this zone.

import { registerPlugin } from '@wordpress/plugins';
import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';

const Component = () => {
  const { blocks } = useSelect((select) => {
    return {
      blocks: select('core/block-editor').getBlocks(),
    };
  }, []);

  const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
    useDispatch('core/block-editor');

  useEffect(() => {
    // This template is locked and all content lives within this group block.
    const groupBlock = blocks.filter((block) => block.name === 'core/group');

    if (groupBlock.length === 0) {
      return;
    }

    const paragraphBlocks = groupBlock[0].innerBlocks.filter(
      (block) => block.name === 'core/paragraph'
    );

    if (
      paragraphBlocks.length > 0 &&
      paragraphBlocks[0].attributes.dropCap === false
    ) {
      __unstableMarkNextChangeAsNotPersistent();
      updateBlockAttributes(paragraphBlocks[0].clientId, {
        dropCap: true,
      });
    }
  }, [blocks]);

  return null;
};

registerPlugin('article-setup', {
  render: Component,
});

[larsenlarsson]

Hi @brittonwalker,
I did something very similar today and was looking for other examples. Found yours! At least you are not the only one with such an idea. But I can't say if it's good or bad either....

[brittonwalker]

@larsenlarsson Thanks for letting me know I'm not alone here.