Theme.json in classic/hybrid WP Theme nutzen

FSE Themes haben den Vorteil, dass direkt mit dem theme.json und Block Stilen in styles/blocks/blockstyle.json gearbeitet werden kann. Das geht nicht mit classic & hybriden Themes wie GeneratePress oder Kadence. Die nutzen noch hauptsächlich die Customizer API und diverse Filter- und Hooks. Hybrid sind sie deshalb, weil sie trotzdem standardmässig auf den Block Editor setzen. Hier findest du Lösungen, wie du theme.json und Block Stile in classic Themes nutzen kannst.

Block Stile registrieren

name muss einzigartig bleiben, daraus wird css Klasse generiert.

Nutze im WPCodeBox2 Editor Stylesheet folgende Ausgabeorte für das CSS

  • Frontend (Styles für Frontend)
  • Admin (Styles für Editor)
  • Gutenberg Editor (nur damit funktioniert Block Stil Preview)
PHP
add_action('init', function () {

    // Stile für den Heading Block
    register_block_style('core/heading', [
        'name'  => 'highlight',
        'label' => 'Highlight',
    ]);

    register_block_style('core/heading', [
        'name'  => 'underline',
        'label' => 'Underline',
    ]);

    register_block_style('core/paragraph', [
        'name'  => 'intro',
        'label' => 'Intro',
    ]);
    
    // Stile für den Paragraph Block
    register_block_style('core/paragraph', [
        'name'  => 'klein',
        'label' => 'Klein',
    ]);

    register_block_style('core/paragraph', [
        'name'  => 'gross',
        'label' => 'Gross',
    ]);

});

theme.json für Classic Themes

Nutze 999 als Priorität. Dann überschreibt es Kadence Core Block Settings. Sonst gibt es Konflikte, da einige Settings nicht überschrieben werden.

PHP
add_filter('wp_theme_json_data_theme', function ($theme_json) {
    $new_data = [
        'version' => 3,
        'settings' => [
            'typography' => [
                'textDecoration'   => false,
                'letterSpacing'    => false,
                'textTransform'    => false,
                'dropCap'          => false,
                'fontWeight'       => false,
                'fontStyle'        => false,
                'defaultFontSizes' => false,
                'customFontSize'   => false,
                'lineHeight'       => false,
                'fluid'            => true,
                'fontSizes'        => [
                    [
                        'name'  => 'Normal',
                        'slug'  => 'normal',
                        'size'  => '1.125rem',
                        'fluid' => [
                            'min' => '1rem',
                            'max' => '1.125rem',
                        ],
                    ],
                    [
                        'name'  => 'Medium',
                        'slug'  => 'medium',
                        'size'  => '2.625rem',
                        'fluid' => [
                            'min' => '2rem',
                            'max' => '2.625rem',
                        ],
                    ],
                    [
                        'name'  => 'Gross',
                        'slug'  => 'big',
                        'size'  => '5.875rem',
                        'fluid' => [
                            'min' => '2rem',
                            'max' => '5.875rem',
                        ],
                    ],
                ],
            ],
            'color' => [
                'background'     => false,
                'custom'         => false,
                'customGradient' => false,
                'gradients'      => [],
            ],
            'spacing' => [
                'padding'        => false,
                'margin'         => false,
                'blockGap'       => false,
            ],
            'border' => [
                'color'          => false,
                'radius'         => false,
                'style'          => false,
                'width'          => false,
            ],
            /* für einzelne Core Blocks Settings wieder aktivieren
            'blocks' => [
        			'core/paragraph' => [
            		'spacing' => [
                		'padding' => true,
                		'margin'  => true,
            ], */
        ],
    ];
    return $theme_json->update_with($new_data);
}, 999);