Padrões de blocos

Este texto foi traduzido usando IA. Se você deseja ver o texto original em inglês, clique aqui.

Um padrão do WordPress é uma coleção de blocos organizados juntos em uma seção bem pensada, intencional e opinativa para um post, página ou template.

Você pode criar posts, páginas e templates bonitos com facilidade usando os padrões do WordPress.com, criados pela equipe de design do WordPress.com para herdar automaticamente os estilos globais do seu tema. Escolha entre uma vasta coleção de padrões e personalize-os da forma que quiser; sem necessidade de plugins adicionais ou código. Pense nesses padrões como uma biblioteca de componentes para o Editor de Blocos.

Usando padrões no WordPress.com

Encontre padrões pelo Editor de Blocos

Os padrões do WordPress.com estão disponíveis no editor de blocos seguindo estas instruções:

1. Navegue até o editor de qualquer post, página ou template.
2. Clique no botão + para abrir o inseridor de blocos.
3. Clique na aba Padrões para navegar por uma lista de categorias de padrões (Para ver todos os padrões em uma visualização em grade, role até na parte inferior da lista e clique em Explorar todos os padrões.)
4. Clique no padrão desejado para inseri-lo no seu post, página ou template.

A partir daí, você pode editar o conteúdo do padrão (imagens, texto, links, etc.) no editor. Os estilos do tema definidos pelo Editor de Sites serão aplicados automaticamente ao padrão inserido.

Encontre padrões pela Biblioteca de Padrões

Para visualizar padrões em diferentes larguras de tela e verificar a responsividade dos designs, você pode usar a Biblioteca de Padrões do WordPress.com. A biblioteca não apenas permite navegar, pesquisar e visualizar padrões em diferentes larguras de tela, mas também possibilita copiar e colar padrões no editor de blocos.

Ao visitar a Biblioteca de Padrões, use a navegação por categorias para ver todos os padrões disponíveis. Alternativamente, use o formulário de busca para pesquisar padrões por palavra-chave ou recurso. Quando encontrar um padrão que deseja usar, clique no botão Copiar padrão.

Depois de escolher um padrão, navegue até o editor de um post, página ou template no seu site WordPress.com e cole o padrão usando um atalho de teclado (command + v no Mac ou ctrl + v no Windows) ou clicando com o botão direito e selecionando Colar.

Assim como com outros padrões, você pode editar o conteúdo do padrão colado (imagens, texto, links, etc.) no Editor de Blocos.

Construindo com padrões

Nossos padrões de bloco foram feitos para serem portáteis, mas seu arquivo theme.json ainda precisará seguir algumas diretrizes para garantir que nossos padrões tenham a melhor aparência possível.

Especificamente, assumimos que os seguintes slugs estão definidos em spacing.spacingSizes:

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

Esses são os mesmos presets de espaçamento que o WordPress gera por padrão. Se eles estiverem ausentes no seu tema, alguns espaçamentos de blocos podem colapsar completamente ao colar um padrão. Nossos padrões ainda podem funcionar se o seu tema usar presets de espaçamento diferentes, mas esse é o padrão que seguimos.

Diretrizes de estrutura de padrões

Além de usar padrões do WordPress.com em seus posts, páginas e templates, você também pode criar os seus próprios. A equipe de design do WordPress.com publicou alguns de seus aprendizados no WordPress Developer Blog, incluindo algumas das seguintes diretrizes sugeridas para a criação de padrões:

• Um bloco de Grupo de nível superior que ocupa toda a largura da página.
  • Isso facilita a alteração da cor de fundo de uma seção inteira da página e a reordenação das seções, já que cada padrão está contido dentro de um bloco de Grupo.
  • Esses blocos de Grupo geralmente têm os valores de padding esquerdo e direito mapeados para as configurações de layout dos estilos globais do site, de modo que o padrão se adapte ao tema. 
• Um bloco contêiner (Grid, Colunas, Linha e Pilha, etc.) é aninhado diretamente dentro do bloco de nível superior.
  • Esse bloco é definido com o valor de largura “wide” do tema, permitindo que o conteúdo do padrão tenha uma largura máxima, conforme definido pelo tema.
• Dois blocos de Espaçador são posicionados diretamente acima e abaixo do bloco contêiner.
  • Esses blocos de Espaçador permitem que você selecione e manipule o espaço entre padrões sem precisar encontrar os controles de padding relevantes do bloco.

Obtenha mais informações sobre como blocos específicos funcionam e como construir com eles aqui.

Desativando padrões

Para remover Padrões de bloco na maioria dos casos, consulte a documentação oficial do WordPress sobre cancelamento de registro de padrões. No entanto, pode haver casos em que você queira desativar padrões específicos do WordPress.com.

Desativar padrões requer que você tenha acesso a SSH ou SFTP no seu site para poder editar o arquivo functions.php do seu tema.

Para desativar todos os padrões não criados pelo usuário, copie e cole o seguinte código na parte inferior do arquivo functions.php do seu tema:

// 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;
}

Para desabilitar apenas os padrões do WordPress.com, copie e cole o código a seguir na parte inferior do arquivo functions.php do seu tema:

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';
}