Modify the core/paragraph block

Very similar to your goal, I recently wanted to add a block-style to all existing blocks. I found that upon loading an editor page, I must wait for the WP editor JS data to populate before adding my styles, and AFAIK, there’s no callback hook for this. So I chose to add a not-so-elegant delay loop.

My solution works but it’s not yet robust (e.g., delay loop should exit after a while, should fail gracefully if future WP updates alter the “block types” structure, etc.), but it may get you moving in a workable direction.

Use the WordPress Block Filters tutorial to get your designated JavaScript file loaded for admin/editor pages. Here’s the essential snippet from my code that does this:

"use strict";
wp.domReady(function () {

    function addFullWidthStylesToAll(block_types) {
        for (let block_type of block_types) {
            wp.blocks.registerBlockStyle(block_type.name, {
                name: 'full-page-width',
                label: 'Full Page Width',
            });
        }

    }

    (function waitForBlocksDataToFill() {
        let block_types = wp.data.select('core/blocks').getBlockTypes();
        if (0 === block_types.length) {
            setTimeout(waitForBlocksDataToFill, 100);

        } else {
            addFullWidthStylesToAll(block_types)

        }
    })();

});

Leave a Comment