as its first child.
* - assets/bw-sectionnum.css paints the badge; the editor preview is a ::before
* fed by the --bw-sn-text custom property (assets/bw-sectionnum-editor.css).
*
* The badge sticks to the section's visible top-left corner: .kt-inside-inner-col
* carries the section background, so top:0/left:0 lands on that corner.
*
* @package Kadence-Child
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* Register the Oswald webfont + front-end stylesheet.
*/
add_action(
'init',
function () {
$theme = get_stylesheet_directory();
$uri = get_stylesheet_directory_uri();
wp_register_style(
'bw-oswald-font',
'https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap',
array(),
null
);
wp_register_style(
'bw-sectionnum',
$uri . '/assets/bw-sectionnum.css',
array( 'bw-oswald-font' ),
filemtime( $theme . '/assets/bw-sectionnum.css' )
);
}
);
/**
* Load the badge preview stylesheet into the Gutenberg editor canvas, so the
* section shows the same badge while editing that it does on the front end.
*
* enqueue_block_assets fires for both the front end and the editor; styles
* enqueued here are injected into the iframed canvas. We gate on is_admin() so
* this preview CSS loads in the editor only — the front end gets its badge from
* bw-sectionnum.css via render_block. filemtime keeps it cache-busted.
*/
add_action(
'enqueue_block_assets',
function () {
if ( ! is_admin() ) {
return;
}
$theme = get_stylesheet_directory();
$file = $theme . '/assets/bw-sectionnum-editor.css';
if ( ! file_exists( $file ) ) {
return;
}
wp_enqueue_style(
'bw-sectionnum-editor',
get_stylesheet_directory_uri() . '/assets/bw-sectionnum-editor.css',
array( 'bw-oswald-font' ),
filemtime( $file )
);
}
);
/**
* Load the editor script early (priority 1) so its attribute filter is in place
* before Kadence registers kadence/column.
*/
add_action(
'enqueue_block_editor_assets',
function () {
$theme = get_stylesheet_directory();
$file = $theme . '/assets/bw-sectionnum-editor.js';
if ( ! file_exists( $file ) ) {
return;
}
wp_enqueue_script(
'bw-sectionnum-editor',
get_stylesheet_directory_uri() . '/assets/bw-sectionnum-editor.js',
array( 'wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-hooks', 'wp-i18n' ),
filemtime( $file ),
true
);
},
1
);
/**
* Front end: when a Kadence Column has the number badge enabled, tag its inner
* wrapper (.kt-inside-inner-col) with bw-has-section-num and inject the badge
* span as the first child — the same wrapper the curve/red-border features
* target, so the badge hugs the section's background corner.
*
* @param string $html Rendered block HTML.
* @param array $block Parsed block (blockName, attrs, …).
* @return string
*/
function bw_section_num_render_column( $html, $block ) {
if ( ( $block['blockName'] ?? '' ) !== 'kadence/column' ) {
return $html;
}
if ( empty( $block['attrs']['bwSectionNum'] ) ) {
return $html;
}
$text = trim( (string) ( $block['attrs']['bwSectionNumText'] ?? '' ) );
if ( '' === $text ) {
return $html;
}
$badge = '' . esc_html( $text ) . '';
wp_enqueue_style( 'bw-sectionnum' );
// Tag the OUTER column wrapper (.wp-block-kadence-column) as the positioning
// context and inject the badge as its first child — NOT the inner
// .kt-inside-inner-col. The inner wrapper carries the section padding AND is a
// flex container; positioning the badge there can leave it inset by that
// padding. The outer column has no padding/border and wraps the visible
// background box exactly, so top:0/left:0 always lands on the section's true
// corner. preg_replace_callback avoids $-interpolation in the replacement.
$count = 0;
$out = preg_replace_callback(
'/]*\bwp-block-kadence-column\b[^>]*>/',
function ( $m ) use ( $badge ) {
$tag = $m[0];
if ( preg_match( '/\bclass="/', $tag ) ) {
$tag = preg_replace( '/\bclass="/', 'class="bw-has-section-num ', $tag, 1 );
} else {
$tag = preg_replace( '/