Como tornar seu tema WP 100% compatível com o editor de blocos/Gutenberg

Nesse vídeo expliquei as pequenas modificações que você precisa fazer no seu tema WordPress para aproveitar ao máximo os recursos do editor de blocos. A essa altura você com certeza já se inscreveu, CERTO?

Código no functions.php

Como expliquei no vídeo, você pode usar qualquer função que esteja associada ao hook after_setup_theme, é só copiar o corpo da função para dentro da sua.

A numeração está de acordo com a dica onde o código é apresentado.

function meutema_gutenberg_support() {
	// 1. Responsividade nas mídias incorporadas, como o bloco do YouTube, por exemplo.
	add_theme_support( 'responsive-embeds' );

	// 2. Estilo padrão de cada bloco.
	add_theme_support( 'wp-block-styles' );

	// 3. Alinhamentos de blocos: largura completa (Full) e largura ampla (Wide)
	add_theme_support( 'align-wide' );

	// 4. Paletas de cores.
	add_theme_support(
		'editor-color-palette',
		array(
			array(
				'name'  => __( 'Cor principal', 'foundationpress' ),
				'slug'  => 'principal',
				'color' => '#1779ba',
			),
			array(
				'name'  => __( 'Cor secundária', 'foundationpress' ),
				'slug'  => 'secundaria',
				'color' => '#767676',
			),
			array(
				'name'  => __( 'Sucesso', 'foundationpress' ),
				'slug'  => 'sucesso',
				'color' => '#3adb76',
			),
			array(
				'name'  => __( 'Atenção', 'foundationpress' ),
				'slug'  => 'atencao',
				'color' => '#ffae00',
			),
			array(
				'name'  => __( 'Alerta', 'foundationpress' ),
				'slug'  => 'alerta',
				'color' => '#cc4b37',
			),
		)
	);
	// 4. Desabilitar cores personalizadas.
	add_theme_support( 'disable-custom-colors' );

	// 4. Tamanhos de fonte personalizados.
	add_theme_support(
		'editor-font-sizes',
		array(
			array(
				'name' => __( 'Pequeno', 'themeLangDomain' ),
				'size' => 12,
				'slug' => 'pequeno',
			),
			array(
				'name' => __( 'Normal', 'themeLangDomain' ),
				'size' => 16,
				'slug' => 'medio',
			),
			array(
				'name' => __( 'Grande', 'themeLangDomain' ),
				'size' => 20,
				'slug' => 'grande',
			),
		)
	);
	// 4. Desabilitar tamanhos de fonte personalizados.
	add_theme_support( 'disable-custom-font-sizes' );

	// 5. Carregar estilos personalizados no editor. Bom para aumentar a largura do conteúdo dentro do editor de blocos.
	add_theme_support( 'editor-styles' );
	add_editor_style( 'editor-styles.css' );
	// 6. Modo escuro, para aumentar a compatibilidade do editor quando você carrega um fundo escuro no back end.
	add_theme_support( 'dark-editor-style' );
}
add_action( 'after_setup_theme', 'meutema_gutenberg_support' );

Alterações de CSS

Algumas dicas precisam de alterações no seu CSS (ou a criação de outro arquivo CSS) para funcionar.

Alinhamentos (full e wide)

Aqui está o código que eu usei no vídeo, mas você pode ver um exemplo completo aqui.

.entry-content > *:not( .alignwide ):not( .alignfull ) {
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}
.wp-block-image.alignfull {
	display: block;
	text-align: center;
}
.wp-block-image.alignwide {
	max-width: 75%;
	margin-left: auto;
	margin-right: auto;
}

Paletas de cor

Cada cor precisa de duas regras (.has-<slug>-background-color e .has-<slug>-color):

.has-principal-background-color {
	background-color: #1779ba;
}
.has-principal-color {
	color: #1779ba;
}

.has-secundaria-background-color {
	background-color: #767676;
}
.has-secundaria-background-color {
	color: #767676;
}

Tamanhos de fonte

O que você precisa parece muito com as paletas de cor. Cada tamanho precisa de uma regra nova (.has-<slug>-font-size):

.has-pequeno-font-size {
    font-size: 12px;
}
.has-medio-font-size {
    font-size: 16px;
}
.has-grande-font-size {
    font-size: 20px;
}

Aumentar a largura do conteúdo no editor

Para aumentar a área útil dentro do editor de blocos, ou seja, aumentar a largura da coluna que segura o conteúdo no back end, você pode usar o seguinte código como base:

.wp-block {
    max-width: 1200px;
}
.wp-block[data-align="wide"] {
    max-width: 1360px;
}
.wp-block[data-align="full"] {
    max-width: none;
}

Likes, inscrições e compartilhamentos são sempre MUITO bem-vindos 🙂