Core Block Customization Reference

The purpose of this page is to provide an overview of the effort required for block modifications, helping us determine whether it's a worthwhile investment of time and budget.

Definitions:

limited - A custom block needs to be built because the existing core blocks can’t be modified or extended, or a work around need to be implemented.

BLOCK variation - Adds alternate versions of a block. These can have different attributes or inner blocks compared to the original block. Block variations can also be added to the Block Inserter. Read more about Block Variations.

Style variation - This adds a class name to a block that we can apply any styles to. This also creates a style variation button in the editor Settings Panel. Read more about Style Variations.

Adding block or style variations is a relatively straightforward task. In fact, we regularly implement these to enhance our editorial experience. The more time consuming task is the creation of entirely new blocks.

We can technically customize style/block variations for each block. Instead of listing every block on this page, I've included only those we've previously customized, along with their specific use cases.

1 Button Style variation
2 Details Style variation
3 Heading Style variation
4 Image Style variation
5 List Style variation
6 Paragraph Style variation
7 Pullquote & Quote Style variation
8 Social Icons limited
9 Table Style variation
10 Next Page & Previous Page limited

Button Style variation

core/button

Use Case: Different background & border colours; buttons with icons.

Details Style variation

core/details

Use Case: Change the arrow icon/marker.

Heading Style variation

core/heading

Use Case: Style variations that are based off of the theme’s h2, h3, etc. styles. Used to enable editors to follow the correct heading order while still giving them the freedom to use their preferred heading styles.

Image Style variation

core/image

Use Case: Images with rounded corners; Images with different caption styles.

List Style variation

core/list

Use Case: Different bullet icons/markers; lists with no bullets.

Paragraph Style variation

core/paragraph

Use Case: Lead text; Paragraphs with different background/border/colour options/font-families, etc.

Pullquote & Quote Style variation

core/pullquote, core/quote

Use Case: Quote with different background/border/colour options/font-families, etc.

Social Icons limited

core/social-links

Currently, there is no method to extend the Social Icons block to modify the icon or add new social icons. ie, if we want to use a different icon for Facebook, we’d have to build an entirely new block which might not be worth the extra development time.

If we want to use the core Wordpress Social Icons block, we must use their icon defaults.

There is the ability to change the background and icon colours:

https://github.com/WordPress/gutenberg/pull/30749

Table Style variation

core/table

Use Case: Tables with different background or border colours.

Next Page & Previous Page limited

core/query-pagination-next, core/query-pagination-previous

We cannot alter the arrow or chevron icons because the arrows are hardcoded in.

Possible alternative Solutions: We could use CSS to override the styles. ie. If we wanted to use a different arrow icon for the “Arrow” option: set the hardcoded arrow to display: none and use the ::before pseudo element to add a new arrow with the content property.

There doesn’t appear to be a way to add Style Variations to this block, so overriding an existing option seems to be the only solution for now.