Block Stile in classic Themes nutzen

  • register_block_style → Frontend
  • enqueue_block_editor_assets → Editor + preview (alle in einem Snippet)
  • Beides zusammen = saubere WP 7.0-kompatible Lösung ohne .editor-styles-wrapper

Mit inline Styles – so funktioniert das Styling im Editor, das Preview und conditional Asset Loading im Frontend.

inline_style

PHP
add_action('init', function() {
    register_block_style('core/paragraph', [
        'name'         => 'mein-stil',
        'label'        => 'Mein Stil',
        'inline_style' => '.is-style-mein-stil { color: red; }',
    ]);
});

Wenn du externe Stile nutzen willst (nur, wenn das CSS wirklich richtig gross ist, sonst macht das kaum Sinn):

get_stylesheet_directory_uri() und style_handle

PHP
add_action('init', function() {
    wp_register_style(
        'mein-paragraph-stil',
        get_stylesheet_directory_uri() . '/assets/paragraph.css',
        [],
        '1.0'
    );

    register_block_style('core/paragraph', [
        'name'        => 'mein-stil',
        'label'       => 'Mein Stil',
        'style_handle' => 'mein-paragraph-stil',
    ]);
});

Wenn du für Frontend andere Styles brauchst als für Editor? Zusätzlich zu inline_styles noch:

enqueue_block_editor_assets

PHP
add_action('enqueue_block_editor_assets', function() {
    wp_add_inline_style('wp-edit-blocks', '
        /* block stil */
        .is-style-sr-only-heading {
            position: relative;
            width: auto;
            height: auto;
            overflow: visible;
            clip: auto;
            white-space: normal;
            color: orange !important;
        }
        
         /* anderer block stil */
        .is-style-mein-anderer {
            outline: 2px dashed blue;
        }

        /* noch einer */
        .wp-block-paragraph.is-style-xyz {
            background: yellow;
        }
    ');
});