Skapa block mönster i Gutenberg

Block mönster är en ny del i Gutenberg som gör att du kan återanvända eller bygga egna nya block med andra block.

Verkar det rörigt? I princip är det ett annat sätt att skapa återanvändningsbara block.

Du hittar mönster på samma plats som du hittar andra block, genom att klicka på pluset.

Det finns flera mönster med i WordPress från början men det går också att skapa egna.

Gör först din design

Du skapar ett mönster genom att först göra din layout med block precis som vanligt. Jag brukar lägga allt i en grupp som avslutning och skapa en klass för gruppen. Det underlättar om jag i framtiden behöver css för mönstret.

Registrera mönstret

Koden kan du lägga i functions.php eller i ett site-plugin. Tills vidare så är innehållet i content tomt.

add_action( 'init', 'pattern_init' );
function pattern_init() {
	register_block_pattern(
		'kobotolo/pattern',
		array(
			'title'       => __( 'KoBoToLo Pattern', 'page-intro-block' ),
                        'description' => _x( 'description', 'page-intro-block' ),
			'content' => ""
		)
	);
}

Lägg till innehåll (content)

Nu ska du hoppa tillbaka till sidan/inlägget och kopiera ditt innehåll. Välj gruppen och de tre prickarna längst till höger och sedan kopiera.

Fixa till innehållet

Innan du klistrar in innehållet mellan kaninöronen i content ”” så ska du snygga till den.

Det finns flera ställen på nätet att göra det på, men jag brukar använda https://codebeautify.org/json-escape-unescape

Kopiera resultatet och klistra in i content.

Klart!