Separator block styles - Enhance the Separator block editor with custom block styles. https://www.damiencarbery.com/2026/09/add-separator-block-custom-styles/

separator-block-styles.css

:root :where(.wp-block-separator.is-style-5-dots)::before,
:root :where(.wp-block-separator.is-style-7-dots)::before,
:root :where(.wp-block-separator.is-style-9-dots)::before {
  color: currentColor;
  font-family: serif;
  font-size: 1.5em;
  letter-spacing: 2em;
  padding-left: 2em;
}
:root :where(.wp-block-separator.is-style-5-dots)::before { content: "·····"; }
:root :where(.wp-block-separator.is-style-7-dots)::before { content: "·······"; }
:root :where(.wp-block-separator.is-style-9-dots)::before { content: "·········"; }

.wp-block-separator.is-style-5-dots,
.wp-block-separator.is-style-7-dots,
.wp-block-separator.is-style-9-dots {
  background: none !important;
  border: none !important;
}
:root :where(.wp-block-separator.is-style-5-dots),
:root :where(.wp-block-separator.is-style-7-dots),
:root :where(.wp-block-separator.is-style-9-dots) {
  height: auto;
  line-height: 1;
  text-align: center;
}

separator-block-styles.php

<?php
/*
Plugin Name: Separator block styles
Plugin URI: https://www.damiencarbery.com/2026/09/add-separator-block-custom-styles/
Description: Enhance the Separator block editor with custom block styles.
Author: Damien Carbery
Author URI: https://www.damiencarbery.com
Version: 0.1.20260917
*/


// See list of core blocks at: https://developer.wordpress.org/block-editor/reference-guides/core-blocks/


if ( ! defined( 'ABSPATH' ) ) {
	exit;
}


class SeparatorBlockStyles {
	public function __construct() {
		add_action( 'init', array( $this, 'register_custom_block_styles' ) );
		add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_styles' ) );
	}

	// Add custom styles to the Separator block.
	function register_custom_block_styles() {
		$style_handle = 'separator-custom-block-styles';

		wp_register_style( $style_handle, plugins_url( 'separator-block-styles.css', __FILE__ ) );

		// Block themes do not automatically enqueue the stylesheet when the custom block
		// style is used. This appear to be a core bug (#55184).
		// The workaround is to always enqueue the file for those themes.
		if ( wp_is_block_theme() ) {
			wp_enqueue_style( $style_handle );
		}

		// Add style for different number of dots to the separator lock.
		register_block_style(
			'core/separator',
			array(
				'name'  => '5-dots',
				'label' => '5 dots',
				'style_handle' => $style_handle,
			)
		);
		register_block_style(
			'core/separator',
			array(
				'name'  => '7-dots',
				'label' => '7 dots',
				'style_handle' => $style_handle,
			)
		);
		register_block_style(
			'core/separator',
			array(
				'name'  => '9-dots',
				'label' => '9 dots',
				'style_handle' => $style_handle,
			)
		);
	}


	// Enqueue the CSS file so that the styles can be seen in the block editor.
	public function enqueue_block_editor_styles() {
		wp_enqueue_style( 'separator-custom-block-styles', plugin_dir_url( __FILE__ ) . 'separator-block-styles.css' );
	}

}
$SeparatorBlockStyles = new SeparatorBlockStyles();