Mostrar una barra de progreso de lectura en un post de WordPress

Este es uno de los ejemplos que mostré durante la presentación que hice en la WordCamp Logroño 2025.

El resultado final

El código

add_action( 'init', 'cg_reading_progress_bar_style' );
function cg_reading_progress_bar_style() {
	register_block_style( 'core/group', array(
		'name'         => 'osom-reading-progress-bar',
		'label'        => __( 'Reading Progress Bar', 'osom-block-styles' ),
		'inline_style' => ' #osom-reading-progress-bar {
			display: none;
			}
			@media (prefers-reduced-motion: no-preference) {
				@supports (animation-timeline: scroll()) {
				#osom-reading-progress-bar {
					display: block;
					background-color: #a80048;
					height: 20px;
					position: sticky;
					top: 0;
					left: 0;
					margin-top: 0;
					transform-origin: left center;
					width: 100%;
					z-index: 999;
					animation: reading-progress-bar linear;
					animation-timeline: scroll(root block);
					animation-range: 0% calc(100% - 150px);
				}

				@keyframes reading-progress-bar {
				from {
					transform: scaleX(0);
				}
			}
			}
		}',
	) );
}

// Añadir barra de progreso de lectura a grupo de bloques
add_filter( 'render_block_core/group', 'osom_add_reading_progress_bar', 10, 2 );
function osom_add_reading_progress_bar( $block_content, $block ) {
	if ( isset( $block['attrs']['className'] ) && 'is-style-osom-reading-progress-bar' === $block['attrs']['className'] ) {
		$block_content = '<div id="osom-reading-progress-bar" role="progress-bar" aria-label="progress"></div>' . $block_content;
	}
	return $block_content;
}