is_registered('rg/separator')) { return; } wp_register_script( 'rg-separator-editor', get_stylesheet_directory_uri() . '/blocks/rg-separator/editor.js', array('wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components'), filemtime(get_stylesheet_directory() . '/blocks/rg-separator/editor.js') ); register_block_type('rg/separator', array( 'editor_script' => 'rg-separator-editor', 'render_callback' => 'rg_render_separator_block', 'attributes' => array( 'align' => array( 'type' => 'string', 'default' => 'center', ), 'symbol' => array( 'type' => 'string', 'default' => '✦', ), 'colorMode' => array( 'type' => 'string', 'default' => 'gold', ), ), )); }); /** * Enqueue frontend styles for the separator block. */ add_action('wp_enqueue_scripts', function() { wp_register_style( 'rg-separator-style', false ); wp_enqueue_style('rg-separator-style'); $css = ' .rg-separator { display: flex; align-items: center; margin: 14px 0 24px; } .rg-separator__inner { display: flex; align-items: center; gap: 14px; } .rg-separator__line { width: 52px; height: 1px; background: #C4A35A; opacity: 0.45; } .rg-separator__symbol { color: #C4A35A; font-size: 14px; line-height: 1; } .rg-separator--left { justify-content: flex-start; } .rg-separator--center { justify-content: center; } .rg-separator--right { justify-content: flex-end; } /* White color mode */ .rg-separator--white .rg-separator__line { background: #FFFFFF; } .rg-separator--white .rg-separator__symbol { color: #FFFFFF; } '; wp_add_inline_style('rg-separator-style', $css); }); /** * Server-side render callback for rg/separator block. */ function rg_render_separator_block($attributes) { $align = isset($attributes['align']) ? strtolower(trim($attributes['align'])) : 'center'; if (!in_array($align, array('left', 'center', 'right'))) { $align = 'center'; } $symbol = isset($attributes['symbol']) ? $attributes['symbol'] : '✦'; // Sanitize symbol - allow only specific characters $allowed_symbols = array('✦', '✧', '◆', '◇', '★', '☆', '•', '◉', '❖', '✿', '❀', '⬥', '⬦'); if (!in_array($symbol, $allowed_symbols)) { $symbol = '✦'; } $color_mode = isset($attributes['colorMode']) ? $attributes['colorMode'] : 'gold'; $color_class = ($color_mode === 'white') ? ' rg-separator--white' : ''; return sprintf( '

' . '

' . '' . '%s' . '' . '

' . '

', esc_attr($align), esc_attr($color_class), esc_html($symbol) ); }