Blokpatronen

Deze tekst is vertaald met behulp van AI. Als je de oorspronkelijke tekst in het Engels wilt bekijken, klik hier.

Een WordPress-patroon is een verzameling blokken die samen zijn gerangschikt tot een doordachte, doelbewuste en uitgesproken sectie voor een bericht, pagina of template.

Je kunt eenvoudig prachtige berichten, pagina’s en templates maken met WordPress.com-patronen, gemaakt door het ontwerpteam van WordPress.com om moeiteloos de globale stijlen van je thema over te nemen. Kies uit een uitgebreide verzameling patronen en pas ze op elke gewenste manier aan; er zijn geen extra plugins of code nodig. Zie deze patronen als een componentenbibliotheek voor de blok-editor.

Patronen gebruiken op WordPress.com

Patronen vinden via de blok-editor

WordPress.com-patronen zijn beschikbaar in de blok-editor door deze instructies te volgen:

1. Ga naar de editor voor een bericht, pagina of template.
2. Klik op de knop + om de blok-invoeger te openen.
3. Klik op het tabblad Patronen om door een lijst met patrooncategorieën te bladeren (om alle patronen in een rasterweergave te bekijken, scrol je naar onderaan de lijst en klik je op Alle patronen verkennen.)
4. Klik op het gewenste patroon om het in je bericht, pagina of template in te voegen.

Vanaf daar kun je de inhoud van het patroon (afbeeldingen, tekst, links, enz.) in de editor bewerken. Themastijlen die via de site-editor zijn gedefinieerd, worden automatisch toegepast op het ingevoegde patroon.

Patronen vinden via de patroonbibliotheek

Om patronen op verschillende schermbreedtes te bekijken en de responsiviteit van de ontwerpen te controleren, kun je de patroonbibliotheek van WordPress.com gebruiken. Met de bibliotheek kun je niet alleen patronen bekijken, zoeken en voorvertonen op verschillende schermbreedtes, maar ook patronen kopiëren en plakken in de blok-editor.

Wanneer je de patroonbibliotheek bezoekt, gebruik je de categorienavigatie om alle beschikbare patronen te bekijken. Je kunt ook het zoekformulier gebruiken om patronen te zoeken op trefwoord of functie. Zodra je een patroon hebt gevonden dat je wilt gebruiken, klik je op de knop Kopiëren voor het patroon.

Zodra je een patroon hebt gekozen, ga je naar de editor voor een bericht, pagina of template op je WordPress.com-website en plak je het patroon met een sneltoets (command + v op Mac of ctrl + v op Windows) of door met de rechtermuisknop te klikken en Plakken te selecteren.

Net als bij andere patronen kun je de inhoud van het geplakte patroon (afbeeldingen, tekst, links, enz.) bewerken in de blok-editor.

Bouwen met patronen

Onze blokpatronen zijn gemaakt om overdraagbaar te zijn, maar je theme.json-bestand moet nog steeds enkele richtlijnen volgen om ervoor te zorgen dat onze patronen er optimaal uitzien.

Specifiek gaan we ervan uit dat de volgende slugs zijn gedefinieerd in spacing.spacingSizes:

• “slug”: "20”
• “slug”: "30"
• “slug”: "40"
• “slug”: "50"
• “slug”: "60"
• “slug”: "70"
• “slug”: "80"

Dit zijn dezelfde afstandspresets die WordPress standaard genereert. Als ze in je thema ontbreken, kan bepaalde blokafstand volledig verdwijnen wanneer je een patroon plakt. Onze patronen kunnen nog steeds werken als je thema andere afstandspresets gebruikt, maar dit is de standaard waaraan we ons houden.

Richtlijnen voor patroonstructuur

Naast het gebruik van WordPress.com-patronen in je berichten, pagina’s en templates kun je ook je eigen patronen maken. Het ontwerpteam van WordPress.com heeft enkele van hun inzichten gepubliceerd op de WordPress Developer Blog, waaronder een paar van de volgende aanbevolen richtlijnen voor het maken van patronen:

• Een Groep-blok op het hoogste niveau dat de volledige breedte van de pagina beslaat.
  • Dit maakt het eenvoudiger om de achtergrondkleur van een hele sectie van de pagina te wijzigen en de secties van een pagina opnieuw te ordenen, omdat elk patroon binnen een Groep-blok staat.
  • Deze Groep-blokken hebben doorgaans waarden voor padding links en rechts die zijn gekoppeld aan de globale lay-outinstellingen voor stijlen van de site, zodat het patroon zich aanpast aan het thema. 
• Een containerblok (Raster, Kolommen, Rij en Stapel, enz.) is direct genest binnen het blok op het hoogste niveau.
  • Dit blok is ingesteld op de waarde voor de “brede” breedte van het thema, waardoor de inhoud van het patroon een max-width kan hebben, zoals gedefinieerd door het thema.
• Twee Afstandhouder-blokken worden direct boven en onder het containerblok geplaatst.
  • Met deze Afstandhouder-blokken kun je de ruimte tussen patronen selecteren en aanpassen zonder dat je de relevante paddingregelaars van het blok hoeft te zoeken.

Krijg hier meer informatie over hoe specifieke blokken werken en hoe je ermee bouwt.

Patronen uitschakelen

Raadpleeg in de meeste gevallen de officiële WordPress-documentatie over het deregistreren van patronen om Blok patronen te verwijderen. Er kunnen echter gevallen zijn waarin je patronen wilt uitschakelen die specifiek zijn voor WordPress.com.

Voor het uitschakelen van patronen heb je toegang nodig tot SSH of SFTP voor je site, zodat je het bestand functions.php van je thema kunt bewerken.

Als je alle patronen wilt uitschakelen die niet door gebruikers zijn gemaakt, kopieer en plak je de volgende code onderaan in het bestand functions.php van je thema:

// Disable the remote patterns coming from the Dotorg pattern directory.
// See https://developer.wordpress.org/themes/patterns/registering-patterns/#disabling-remote-patterns
add_filter( 'should_load_remote_block_patterns', '__return_false' );

// Remove and unregister patterns from core, Dotcom, and plugins. 
// See 		https://github.com/Automattic/jetpack/blob/d032fbb807e9cd69891e4fcbc0904a05508a1c67/projects/packages/jetpack-mu-wpcom/src/features/block-patterns/block-patterns.php#L107
add_filter( 'rest_dispatch_request', 'your_theme_restrict_block_editor_patterns', 12, 3 );

/**
 * Restricts block editor patterns in the editor by removing support for all patterns from:
 *  - Dotcom and plugins like Jetpack
 *  - Dotorg pattern directory except for theme patterns
 */
function your_theme_restrict_block_editor_patterns( $dispatch_result, $request, $route ) {
	if ( strpos( $route, '/wp/v2/block-patterns/patterns' ) === 0 ) {
		$patterns = WP_Block_Patterns_Registry::get_instance()->get_all_registered();

		if ( ! empty( $patterns ) ) {
			// Remove theme support for all patterns from Dotcom, and plugins. 
			// See https://developer.wordpress.org/themes/patterns/registering-patterns/#unregistering-patterns
			foreach ( $patterns as $pattern ) {
				unregister_block_pattern( $pattern['name'] );
			}

			// Remove theme support for core patterns from the Dotorg pattern directory. 
			// See https://developer.wordpress.org/themes/patterns/registering-patterns/#removing-core-patterns
			remove_theme_support( 'core-block-patterns' );
		}
	}
	
	return $dispatch_result;
}

Om alleen WordPress.com-patronen uit te schakelen, kopieer en plak je de volgende code onderaan in het functions.php-bestand van je thema:

add_filter( 'a8c_override_patterns_source_site', 'your_theme_restrict_block_editor_patterns_from_dotcom_library' );

/**
 * Restrict patterns from the Dotcom library
 */
function your_theme_restrict_block_editor_patterns_from_dotcom_library() {
	return 'disable-dotcom-patterns-source';
}