Separator Block: Add style variations

[jasmussen]

We should add two or three style variations to the style block. Same UI as the one for quote styles.

• Full width horizontal line, possibly default
• Short, centered, horizontal line, currently in master
• Three dots spaced out

[melchoyce]

Should these styles be decided by themes instead of the editor?

[jasmussen]

Should these styles be decided by themes instead of the editor?

Good question. The theme should absolutely be able to override them, but should the theme also bleed into the editor here? It overlaps with editor style territory.

[mtias]

Closing as this seems theme territory.

[jbjanot]

Hi,

Sorry if this is the incorrect place for asking this, but I can't find a way to add a style variation (like for a quote) to the separator block, and this topic is the closest I found to what I am looking for.
Is it possible to hook the separator block and add the ability to choose a variation (via a dropdown in the sidebar for example) ? I couldn't manage to find this in the handbook.

Thanks for any help you could provide.

[gziolo]

Is it possible to hook the separator block and add the ability to choose a variation (via a dropdown in the sidebar for example) ? I couldn't manage to find this in the handbook.

@jbjanot, what you have described is a very similar use case to what we do internally in Gutenberg with blocks.BlockEdit hook. There are two examples you can look at:

registering a hook for the anchor control:
https://github.com/WordPress/gutenberg/blob/master/blocks/hooks/anchor.js#L107

hooks implementation with the callback function:
https://github.com/WordPress/gutenberg/blob/master/blocks/hooks/anchor.js#L59-L85

registering a hook for the custom class name control:
https://github.com/WordPress/gutenberg/blob/master/blocks/hooks/custom-class-name.js#L97

hooks implementation with the callback function:
https://github.com/WordPress/gutenberg/blob/master/blocks/hooks/custom-class-name.js#L50-L75

In your case you will rather want to use <InspectorControls> rather than <InspectorAdvancedControls />. You can also use props.name inside the callback function to make sure that such control is applied only to Separator block.

Let me know if you need more help.