Compositions de blocs

Une composition WordPress est un ensemble de blocs agencés pour former une section réfléchie, intentionnelle et structurée pour un article, une page ou un modèle.

Vous pouvez créer facilement de magnifiques articles, pages et modèles grâce aux compositions de blocs WordPress.com, conçues par l’équipe de design de WordPress.com pour hériter naturellement des styles globaux de votre thème. Choisissez parmi une vaste collection de compositions et personnalisez-les comme vous le souhaitez ; aucune extension ni aucun code supplémentaire n’est nécessaire. Considérez ces compositions comme une bibliothèque de composants pour l’éditeur de blocs.

Utiliser les compositions sur WordPress.com

Trouver des compositions via l’éditeur de blocs

Les compositions de blocs WordPress.com sont disponibles dans l’éditeur de blocs en suivant ces instructions :

1. Accédez à l’éditeur pour n’importe quel article, page ou modèle.
2. Cliquez sur le bouton + pour ouvrir l’outil d’insertion de blocs.
3. Cliquez sur l’onglet Compositions pour parcourir la liste des catégories de compositions (pour parcourir toutes les compositions en vue grille, faites défiler jusqu’en bas de la liste et cliquez sur Explorer toutes les compositions.)
4. Cliquez sur la composition souhaitée pour l’insérer dans votre article, page ou modèle.

À partir de là, vous pouvez modifier le contenu de la composition (images, texte, liens, etc.) dans l’éditeur. Les styles du thème définis via l’éditeur de site seront automatiquement appliqués à la composition insérée.

Trouver des compositions via la bibliothèque de compositions

Pour prévisualiser les compositions à différentes largeurs d’écran et vérifier la réactivité des designs, vous pouvez utiliser la bibliothèque de compositions de WordPress.com. La bibliothèque vous permet non seulement de parcourir, rechercher et prévisualiser les compositions à différentes largeurs d’écran, mais aussi de copier et coller des compositions directement dans l’éditeur de blocs.

Lorsque vous visitez la bibliothèque de compositions, utilisez la navigation par catégorie pour afficher toutes les compositions disponibles. Vous pouvez également utiliser le formulaire de recherche pour rechercher des compositions par mot-clé ou fonctionnalité. Une fois que vous avez trouvé une composition que vous souhaitez utiliser, cliquez sur le bouton Copier la composition.

Une fois que vous avez choisi une composition, accédez à l’éditeur d’un article, d’une page ou d’un modèle sur votre site WordPress.com, et collez la composition en utilisant un raccourci clavier (command + v sur Mac ou ctrl + v sur Windows) ou en faisant un clic droit et en sélectionnant Coller.

Comme pour les autres compositions, vous pouvez modifier le contenu de la composition collée (images, texte, liens, etc.) dans l’éditeur de blocs.

Construire avec des compositions

Nos compositions de blocs sont conçues pour être portables, mais votre fichier theme.json devra tout de même respecter certaines directives pour garantir le meilleur rendu de nos compositions.

Plus précisément, nous supposons que les slugs suivants sont définis dans spacing.spacingSizes :

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

Ce sont les mêmes préréglages d’espacement que WordPress génère par défaut. S’ils sont absents de votre thème, certains espacements de blocs peuvent disparaître entièrement lorsque vous collez une composition. Nos compositions peuvent tout de même fonctionner si votre thème utilise des préréglages d’espacement différents, mais c’est le standard que nous suivons.

Directives de structure des compositions

En plus d’utiliser les compositions WordPress.com dans vos articles, pages et modèles, vous pouvez également créer les vôtres. L’équipe de design de WordPress.com a publié certains de ses enseignements sur le blog des développeurs WordPress, y compris certaines des directives suivantes pour la création de compositions :

• Un bloc Groupe de niveau supérieur qui s’étend sur toute la largeur de la page.
  • Cela facilite le changement de la couleur d’arrière-plan d’une section entière de la page et la réorganisation des sections d’une page, car chaque composition est contenue dans un bloc Groupe.
  • Ces blocs Groupe ont généralement les valeurs de marge intérieure gauche et droite associées aux paramètres de mise en page des styles globaux du site, afin que la composition s’adapte au thème. 
• Un bloc conteneur (Grille, Colonnes, Ligne et pile, etc.) est imbriqué directement dans le bloc de niveau supérieur.
  • Ce bloc est défini sur la valeur de largeur « large » du thème, permettant au contenu de la composition d’avoir une largeur maximale, telle que définie par le thème.
• Deux blocs Espacement sont placés directement au-dessus et en dessous du bloc conteneur.
  • Ces blocs Espacement vous permettent de sélectionner et de manipuler l’espace entre les compositions sans avoir à trouver les contrôles de marge intérieure correspondants du bloc.

Obtenez plus d’informations sur le fonctionnement de blocs spécifiques et comment construire avec eux ici.

Désactiver les compositions

Pour supprimer des compositions de blocs dans la plupart des cas, consultez la documentation officielle de WordPress sur la désinscription des compositions. Cependant, il peut y avoir des cas où vous souhaitez désactiver des compositions spécifiques à WordPress.com.

La désactivation des compositions nécessite d’avoir accès à SSH ou SFTP pour votre site afin de pouvoir modifier le fichier functions.php de votre thème.

Pour désactiver toutes les compositions non créées par les utilisateurs, copiez et collez le code suivant au bas du fichier functions.php de votre thème :

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

Pour désactiver uniquement les compositions WordPress.com, copiez et collez le code suivant à la fin du fichier functions.php de votre thème :

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