Let's discuss Core block extensibility

[ndiego]

This is an open conversation about improving Core block extensibility that stemmed from the latest Developer Hours session and discussion around #63626. The more Core blocks can be made extensible, the less need there will be to create custom blocks with similar functionality.

Example

Here's one example to get the discussion started. Let's say that I want to extend the Button block by adding an option for users to choose an SVG icon that will appear to the left or right of the button text. We have solutions for much of this project:

• You can add custom attributes to the block using blocks.registerBlockType
• You can add a custom controls panel to the block inspector using editor.BlockEdit
• You can modify the front-end output using render_block_core/button

The one thing that you cannot do easily is modify the markup in the Editor to reflect the user's icon choice. Any changes to the markup can lead to block validation errors. The best solution I could come up with is outlined in this experimental plugin.

@bacoords has created a separate discussion specifically about this issue: #63876

Share your feedback

So, let's discuss current blockers to Core block extensibility and things you would like to see implemented/changed. Based on the feedback here and proposed solutions, issues will be created.

[simom]

I would add that, in this example of a block that needs to support SVG icons, it might be necessary to inject some "support" markup into the block itself, such as an SVG with symbols, which is currently not possible.

In this regard, you can refer to the ticket #56207

[ndiego]

Yeah, another example that I ran into recently is being able to add a role="presentation" to the markup of an Image block in the Editor.

[bacoords]

Some nice enhancements around HTML/CSS of blocks:

1. Ability to modify blocks in the editor without breaking the save functionality Does the block editor need a client side alternative to the `render_block` filter? #63876 (thanks for linking!)
2. Ability to register settings fields on blocks easily, via a register_block_setting type of function (I did an example repo of this concept that got a positive reception)
3. Ability to layer multiple block styles (aka "section styles") on a single block. Even in the demo use case of section styles (color/typography) you can already see the limitations of not allowing multiple section styles per block.
4. If block styles/section styles are always going to be an oversimplified tool, then an ability to more easily integrate a class-based design system to blocks

[ajaydsouza]

I’ve spent quite a bit of time attempting to properly extend the featured image core block. My conclusion is that, as @ndiego mentioned above. I’ve been able to add attributes, a new InspectorPanel to edit these settings and finally tapped into render_block to modify the output.

The issue I face now, and have given up, is editing the block output in the block editor cleanly. You can tap into BlockListBlock but there is no clean way I could see where I can detect what the current output is and then modify it. Obviously, it could be that I don’t know what to do, but I couldn’t find documentation answering this. So here’s what I think we need.

1. Have a block filter similar to how we have render_block_{blockname} so that I can tap into a specific block. Alternatively, just render_block as we can run the check.
2. The filter should pass the entire block object including the context - e.g. what I couldn’t see when I did a console.log is the ‘context’ which in this case is the post ID or query ID when placed in a query loop block.
3. The filter should also allow directly changing what the output is, similar to how we have the render_block or if you had to filter the_content in PHP

Not sure if this can be done, but it will make extending blocks a lot easier. Right now, my approach will be to park the block editor rendering on the fly and tell the user to look at the front end. The other alternative is to duplicate the entire block and then add in the features I want, which I think beats the spirit of extending blocks.

[octoxan]

There should be an easy way to extend core blocks with primarily PHP, and some way to publish the core blocks templates to modify or extend them in PHP.

[ts-mz]

I wonder if my experiement outlined here

#60685

in which I replace the edit component of the core block using blocks.registerBlockType may be relevant (although in the specific case, @bacoords came up with a much simpler solution).

This doesn't change the validation problem, though. I wonder if there is even a logical way to get around the validation problem as long as there is no separation of attributes and markup?

[soderlind]

@ndiego You mention in your tutorial, that when we look at block extensions, we'll see a pattern (and, yep, I've seen it). Do you know if there's a create-block template for block extension?

[ndiego]

There isn't one included in the create-block tool, but you could create a custom template that does this. @ryanwelcher wrote an article on how to do so on the Developer Blog.

[soderlind]

Thank you, @ndiego. I've watched most of @ryanwelcher videos 👼, also the ones about creating create-block templates. Just wondered if one already existes.

[bph]

Would be great if members of the @WordPress/outreach team also chime in and bring their lists.

[luminuu]

I'm a bit late to the party, but here is some feedback I've gathered from my colleagues, on top of what has already been mentioned:

• It would be nice to have the ability to hook into existing Core panels to add custom settings or information notices, instead of having to create a custom panel
• Adding attributes, or overwrite/change existing attributes
• Core settings panels do not have a unique identifying class that you could access via CSS/JS

[justintadlock]

Are you talking about in the InspectorControls? You don't have to create a custom panel to add your component to it. Here's an example from a tutorial where I'm adding a custom control to the existing color panel: https://developer.wordpress.org/news/2023/11/01/how-to-add-custom-color-options-to-blocks/#coding-the-block-edit-function

This tutorial shows the various group options: https://developer.wordpress.org/news/2023/06/02/using-block-inspector-sidebar-groups/