Als je een eigen thema bouwt of met een childthema werkt, moet je misschien bepaalde stylingkenmerken verwijderen of verbergen, of het nu gaat om een los coreblok of een volledige thema-stijlvariatie.

Dit is niet alleen een kwestie van voorkeur. Het levert vaak praktische voordelen op, zoals betere prestaties, een consistenter ontwerp en een eenvoudigere gebruikersinterface.

De aanpak om deze doelen te bereiken varieert en is waarschijnlijk afhankelijk van je behoeften en vaardigheden. Voor de voorbeelden in dit artikel werken we met een childthema van Twenty Twenty-Five (TT5), een modern WordPress blokthema.

Verwijderen hangt af van hoe het is geregistreerd

Voor onze doeleinden maken we, wanneer we het hebben over het ongedaan maken van het registreren van een blok of thema stijlvariatie, onderscheid tussen volledige en gedeeltelijke verwijdering, en of de variatie volledig is verwijderd of slechts verborgen is in de interface. Het onderscheid is belangrijk.

Begrijpen hoe je een blok kunt de-registreren begint met weten hoe het is geregistreerd. Coreblokken die zijn geregistreerd met JavaScript kunnen bijvoorbeeld het beste in die taal worden uitgeschreven. Themastijlvariaties daarentegen zijn geregistreerd met PHP en daarom kan een andere aanpak op zijn plaats zijn.

Het ongedaan maken van custom blokken valt buiten het bestek van dit artikel en je aanpak hangt af van hoe die blokken oorspronkelijk zijn geregistreerd.

Wat is een stijlvariatie?

WordPress maakt onderscheid tussen variaties van blokstijlen en themastijlen. Blokstijlen zijn visuele alternatieven voor een specifiek blok, zoals de “vul” of “omlijn” stijlen van een knopblok. Stijlvariaties van blokken worden geregistreerd in core, theme.json, block.json (of in een plugin).

Thema stijlvariaties daarentegen zijn volledige visuele alternatieven die kleuren, typografie en layouts bevatten die zijn gedefinieerd in een uniek theme.json bestand. Hiermee kunnen gebruikers wisselen tussen verschillende looks (skins) voor een site zonder het thema te veranderen. TT5 wordt geleverd met acht stijlvariaties naast de standaardstijl.

De eerste stap: enqueue je scripts

Omdat we met een childthema werken, moet je ervoor zorgen dat je je scripts op de juiste manier enqueuet.

Deze installatie helpt je op weg, inclusief het enqueuen van ons aangepaste unregister-blocks.js bestand.

// Enqueue Parent and Child Styles
add_action('wp_enqueue_scripts', function () 
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        ['parent-style'],
        wp_get_theme()->get('Version')
    );
);

// Enqueue styles in the WordPress admin
add_action('admin_enqueue_scripts', function () 
    wp_enqueue_style(
        'child-admin-style',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get('Version')
    );
);

// Enqueue JavaScript for block editor
add_action('enqueue_block_editor_assets', function () 
    wp_enqueue_script(
        'unregister-core-blocks',
        get_stylesheet_directory_uri() . '/js/unregister-blocks.js',
        ['wp-blocks', 'wp-dom-ready', 'wp-edit-post'],
        null,
        true
    );
);

Zoals je kunt zien, hebben we een JavaScript-bestand op js/unregister-blocks.js, dat al onze scripts voor dit artikel bevat.

Gebruik niet get_template_directory_uri() voor het JavaScript-bestand, want dit verwijst naar het hoofdthema.

Timing is alles

Weten wanneer een hook afgaat is cruciaal bij het werken met PHP in WordPress. Je moet bekend zijn met de basis laadprocedure, die begint op wp-settings.php:

• Constants
• Globals
• Core componenten
• Plugins laden
• Thema laden

Uitzoeken op welk punt een custom functie moet worden uitgevoerd is een van de lastigste en meest frustrerende onderdelen van WordPress ontwikkeling.

Een blokstijl uit de core verwijderen

Laten we eens kijken naar een situatie waarin je de stijl van een coreblok wilt verwijderen. In dit geval willen we de contourstijl voor het Button blok verwijderen.

Omdat de stijlen voor vulling en omlijning van knoppen zijn geregistreerd in het theme.json bestand, gebruiken we JavaScript om het proces af te handelen.

wp.domReady(() => 
    if (wp.blocks && wp.blocks.unregisterBlockStyle) 
        wp.blocks.unregisterBlockStyle('core/button', 'outline');
    
);

Het resultaat is het verwijderen van de contourstijl in de werkbalk en zijbalk.