Drop cap paragraph block style
Register a Drop cap style for the paragraph block and style it with a pure CSS first-letter rule that works in editor and front end.
WordPressThemingblock-stylesdrop-captypographygutenberg
Live preview
Code
<?php
/**
* Paragraph block style: Drop cap.
*
* @package Acme_Theme
*/
defined( 'ABSPATH' ) || exit;
add_action( 'init', static function (): void {
register_block_style(
'core/paragraph',
array(
'name' => 'acme-drop-cap',
'label' => __( 'Drop cap', 'acme-theme' ),
'style_handle' => 'acme-drop-cap',
)
);
// Registered, not enqueued: WordPress loads it only when the style is used.
wp_register_style( 'acme-drop-cap', get_template_directory_uri() . '/assets/drop-cap.css', array(), '1.0.0' );
} );
.wp-block-paragraph.is-style-acme-drop-cap::first-letter,
p.is-style-acme-drop-cap::first-letter {
float: left;
margin: .08em .12em 0 0;
font-family: Georgia, "Times New Roman", serif;
font-size: 4.2em;
font-weight: 700;
line-height: .8;
color: var(--wp--preset--color--primary, #0f766e);
}
/* Skip the effect on very narrow screens, where it crowds the text. */
@media (max-width: 360px) {
p.is-style-acme-drop-cap::first-letter { float: none; font-size: inherit; margin: 0; color: inherit; }
}
How it works
What it solves
Magazine and long-read themes want a decorative first letter, but the built-in drop cap setting is a toggle with limited styling. A block style gives editors a named variation they can apply and gives you full control of the CSS.
How it works
register_block_style() adds an entry called Drop cap to the paragraph block's style switcher; the editor puts the class is-style-acme-drop-cap on the paragraph. Passing a style_handle means the stylesheet is registered but only printed on pages where the style is actually used, which keeps other pages light. The CSS uses ::first-letter with a float, so there is no JavaScript and no extra markup.
The colour reads the theme's preset variable with a fallback.
Adapting it
Tweak the size, font and colour, or use initial-letter: 3 where supported, wrapped in @supports. Register similar styles for the quote or heading blocks, such as an outlined heading. For classic themes, add the same CSS and apply the class from a shortcode.
Pitfalls
::first-letterdoes not work well when a paragraph starts with an image or quotation mark; test with real content.- Large letters can overlap short paragraphs, so give the block a min-height or use it on long paragraphs.
- Keep the CSS selector specific to avoid affecting normal paragraphs.
- Check contrast of the coloured letter.
How to use it
Save the PHP in inc/ and require it from functions.php; put the CSS in assets/.
In the editor, select a paragraph, open the Styles panel in the sidebar and choose Drop cap.
Adjust the CSS to match your typography.
Licence: GPL-2.0-or-later. This snippet comes from WordPress code and is GPL-2.0-or-later.