Donc, vous voulez créer des compositions de blocs ?

bloc patternTemps de lecture estimé : 5 minutes

Si vous avez déjà créé quelque chose pour l’éditeur de blocs WordPress – un thème ou une extension – vous avez peut-être également entendu parler des compositions de blocs.

Ceci est la traduction d’un article de Beatriz Fialho sour WordPress.org

En regardant les compositions fournies avec WordPress, j’ai pensé que ce serait bien de leur consacrer un court article. Ce sont de jolis raccourcis utiles lorsque vous les connaissez, mais il y a de fortes chances que vous ne sachiez pas ce qu’elles sont ou pourquoi vous voudrez peut-être les utiliser.

Qu’est-ce qu’une composition de bloc ?

Les compositions sont des collections de blocs pré-arrangés qui peuvent être combinées et arrangées de nombreuses manières, ce qui facilite la création de beaux contenus. Ils agissent comme une longueur d’avance, vous permettant de «  Plug and Play » votre contenu comme bon vous semble et d’être aussi simples que des blocs uniques ou aussi complexes qu’une mise en page en pleine page.

Ils vivent dans un onglet de la bibliothèque de blocs. Vous pouvez cliquer ou faire glisser et vous pouvez les prévisualiser avec les styles de votre site.

Fondamentalement, une composition de bloc est juste un groupe de blocs assemblés à l’avance :

<!-- wp:paragraph -->
<p>&lt;!-- wp:group --&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;div class="wp-block-group"&gt;&lt;div class="wp-block-group__inner-container"&gt;&lt;!-- wp:separator {"className":"is-style-default"} --&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;hr class="wp-block-separator is-style-default"/&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;!-- /wp:separator --&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;div class="wp-block-image is-style-rounded"&gt;&lt;figure class="aligncenter size-large is-resized"&gt;&lt;img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/&gt;&lt;/figure&gt;&lt;/div&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;!-- /wp:image --&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;!-- wp:quote {"align":"center","className":"is-style-large"} --&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;blockquote class="wp-block-quote has-text-align-center is-style-large"&gt;&lt;p&gt;"Contributing makes me feel like I'm being useful to the planet."&lt;/p&gt;&lt;cite&gt;— Anna Wong, &lt;em&gt;Volunteer&lt;/em&gt;&lt;/cite&gt;&lt;/blockquote&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;!-- /wp:quote --&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;!-- wp:separator {"className":"is-style-default"} --&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;hr class="wp-block-separator is-style-default"/&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;!-- /wp:separator --&gt;&lt;/div&gt;&lt;/div&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;!-- /wp:group --&gt;</p>
<!-- /wp:paragraph -->

C’est aussi comme ça que vous les créez : utilisez simplement l’éditeur de blocs pour configurer une poignée de blocs à votre goût, et le plus dur est fait.

Comment les obtenir dans la bibliothèque de blocs?

Il y a plus de documentation dans le manuel, mais cela se résume à ceci :

<!-- wp:paragraph -->
<p>&lt;?php</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>/*</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Plugin Name: Quote Pattern Example Plugin</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>*/</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>register_block_pattern(</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>'my-plugin/my-quote-pattern',</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>array(</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>'title' =&gt; __( 'Quote with Avatar', 'my-plugin' ),</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>'categories' =&gt; array( 'text' ),</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>'description' =&gt; _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>'content' =&gt; '&lt;!-- wp:group --&gt;&lt;div class="wp-block-group"&gt;&lt;div class="wp-block-group__inner-container"&gt;&lt;!-- wp:separator {"className":"is-style-default"} --&gt;&lt;hr class="wp-block-separator is-style-default"/&gt;&lt;!-- /wp:separator --&gt;&lt;!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --&gt;&lt;div class="wp-block-image is-style-rounded"&gt;&lt;figure class="aligncenter size-large is-resized"&gt;&lt;img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/&gt;&lt;/figure&gt;&lt;/div&gt;&lt;!-- /wp:image --&gt;&lt;!-- wp:quote {"align":"center","className":"is-style-large"} --&gt;&lt;blockquote class="wp-block-quote has-text-align-center is-style-large"&gt;&lt;p&gt;"Contributing makes me feel like I\'m being useful to the planet."&lt;/p&gt;&lt;cite&gt;— Anna Wong, &lt;em&gt;Volunteer&lt;/em&gt;&lt;/cite&gt;&lt;/blockquote&gt;&lt;!-- /wp:quote --&gt;&lt;!-- wp:separator {"className":"is-style-default"} --&gt;&lt;hr class="wp-block-separator is-style-default"/&gt;&lt;!-- /wp:separator --&gt;&lt;/div&gt;&lt;/div&gt;&lt;!-- /wp:group --&gt;',</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>);</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>?&gt;</p>
<!-- /wp:paragraph -->

Ceci est un extrait de code PHP, ce qui signifie que vous pouvez le déposer dans une extension WordPress, ou peut-être plus simplement, le coller dans le fichier functions.php de votre thème. Et voilà :

Pour les compositions qui incluent des images, cela vaut la peine de réfléchir à l’endroit où elles sont stockées. Le thème TT1 Blocks (qui est un nom sophistiqué pour « TwentyTwentyOne Blocks ») stocke les images dans la bibliothèque de thèmes.

Et maintenant quoi ?

Le problème avec une composition de bloc est que, dès que vous l’insérez depuis la bibliothèque de blocs, il cesse d’être une unité cohérente – il ne s’agit maintenant que d’une poignée de blocs, détachée de la compositions que vous avez créée et destiné à être personnalisé à votre goût. C’est un raccourci, pas un modèle. Cela signifie également que vous n’avez pas à vous soucier de changer de thème ou de désactiver les extensions de composition : les blocs que vous avez déjà insérés n’iront nulle part.

Cela étant dit, si vous aimez tellement cette composition que vous voulez l’utiliser encore et encore, sans aucune personnalisation, vous pouvez en faire un bloc réutilisable :

Les blocs réutilisables sont créés, comme leur nom l’indique, pour être réutilisés. Cette fonctionnalité est un excellent moyen de stocker de petits fragments d’extraits de code couramment utilisés que vous pouvez modifier en un seul endroit pour les mettre à jour en tout. « Suivez – moi sur Twitter, » « Série d’articles », « ou « S’abonner à mon podcast » sont d’excellents exemples.

Qu’est-ce qui fait une bonne composition ?

Les compositions, telles qu’elles sont livrées aujourd’hui, sont limitées par les fonctionnalités disponibles. Si l’éditeur de blocs ne vous permet pas de personnaliser l’espacement des lettres, votre modèle de bloc ne le peut pas non plus. Alors que le projet Global Styles étendra ce qui est des blocs, en attendant, nous devons travailler avec les outils disponibles.

Même dans ce cas, avec les ingrédients les plus basiques – couleur, photographie, typographie – il est possible de faire beaucoup :

Trois colonnes avec images et texte

Média et texte avec image à droite

J’ai conçu ces compositions pour potentiellement atterrir dans le cœur de WordPress, elles ont toutes quelques propriétés en commun :

Elles partagent un thème.

Vous pouvez considérer une composition comme une section d’un site web : elle est censée faire partie d’un tout, et elle fonctionne donc mieux lorsqu’elle peut exister dans le contexte d’autres modèles qui partagent le même thème. Il y en a quelques-uns partageant un thème Nature dans les compositions ci-dessus, quelques-unes partageant un thème Art et d’autres partageant un thème Architecture. Lorsqu’elles sont vuse ensemble, il devient plus facile de voir comment vous pourriez être en mesure de reconstituer plusieurs pages de votre site, une page à la fois.

Elles partagent une palette de couleurs minimaliste.

En faisant partie d’un tout, les compositions atterriront inévitablement dans un contexte qui utilise des couleurs différentes. Avec une palette de couleurs réduite, il y a à la fois une meilleure chance de s’intégrer et moins à personnaliser pour le rendre parfait.

Les meilleures compositions font des choses que vous n’auriez peut-être pas faites autrement.

Qu’il s’agisse d’images décalées pour créer une silhouette unique ou simplement d’utiliser des fonctionnalités moins visibles (comme le positionnement fixe dans le bloc Couverture), c’est un moyen de faire ressortir la créativité.

Astuce : vous pouvez utiliser n’importe quel bloc dans vos compositions, y compris les blocs provenant d’une extension. Et si ce bloc est dans le répertoire de blocs, il vous demandera de l’installer en un seul clic s’il est absent de votre WordPress auto-hébergé :

Voici une extension pour vous

<!-- wp:paragraph -->
<p>&lt;?php</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>/*</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Plugin Name: Quote Pattern Example Plugin</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>*/</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>register_block_pattern(</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>'my-plugin/my-quote-pattern',</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>array(</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>'title' =&gt; __( 'Quote with Avatar', 'my-plugin' ),</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>'categories' =&gt; array( 'text' ),</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>'description' =&gt; _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>'content' =&gt; '&lt;!-- wp:group --&gt;&lt;div class="wp-block-group"&gt;&lt;div class="wp-block-group__inner-container"&gt;&lt;!-- wp:separator {"className":"is-style-default"} --&gt;&lt;hr class="wp-block-separator is-style-default"/&gt;&lt;!-- /wp:separator --&gt;&lt;!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --&gt;&lt;div class="wp-block-image is-style-rounded"&gt;&lt;figure class="aligncenter size-large is-resized"&gt;&lt;img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/&gt;&lt;/figure&gt;&lt;/div&gt;&lt;!-- /wp:image --&gt;&lt;!-- wp:quote {"align":"center","className":"is-style-large"} --&gt;&lt;blockquote class="wp-block-quote has-text-align-center is-style-large"&gt;&lt;p&gt;"Contributing makes me feel like I\'m being useful to the planet."&lt;/p&gt;&lt;cite&gt;— Anna Wong, &lt;em&gt;Volunteer&lt;/em&gt;&lt;/cite&gt;&lt;/blockquote&gt;&lt;!-- /wp:quote --&gt;&lt;!-- wp:separator {"className":"is-style-default"} --&gt;&lt;hr class="wp-block-separator is-style-default"/&gt;&lt;!-- /wp:separator --&gt;&lt;/div&gt;&lt;/div&gt;&lt;!-- /wp:group --&gt;',</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>);</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>?&gt;</p>
<!-- /wp:paragraph -->

Si vous souhaitez créer des compositions, cet exemple d’extension contient deux des compositions que vous avez vues ci-dessus. Déposez-le dans votre répertoire d’extensions et elles devraient apparaître dans votre bibliothèque de blocs.


Composition installée dans la catégorie « Texte »

N’hésitez pas à l’ajuster, à le personnaliser et à en faire le vôtre. C’est du GPL, après tout !

Publications similaires
Book Review Block Featured
Plongez dans l’extension Book Review Block

Créée par Donna Peplinskie, Product Wrangler chez Automattic, l’extension Book Review Block a presque trois ans. Cependant, elle n'a été portée à mon attention que  →

Brand
Comment mettre en valeur la personnalité de la marque sur votre site

Lorsque vous entendez le mot « marque » vous pensez peut-être à des logos, des emballages ou des couleurs. Mais il s'agit de bien plus que cela.  →

Wpupdates
WordPress 5.6 ajoute une UI permettant les mises à jour automatiques des versions majeures, les contributeurs discutent de l’ajout d’un filtre pour la masquer

WordPress 5.6 est configuré pour ajouter une interface utilisateur qui permet aux utilisateurs d'opter pour des mises à jour automatiques pour les versions majeures du  →

Woocommerce Screen
Découvrez le nouvel écran d’accueil de WooCommerce

WooCommerce a récemment introduit un nouvel écran d'accueil, qui sert de quartier général à votre boutique en ligne. Accédez rapidement à tout ce dont vous  →

Jquery
WordPress 5.6 sera livré avec un autre changement majeur de jQuery

WordPress 5.6 sera livré avec la dernière librairie jQuery le mois prochain. Il s'agit d'une mise à jour majeure que tous les développeurs d’extensions et  →

Free Gifts
Comment positionner vos produits comme des idées de cadeau

La plupart des entreprises passent la majeure partie de l'année à essayer de faire deux choses : Vendre davantage aux clients existants Acquérir de nouveaux  →

Wordpress
WordPress 5.6 Release Candidate

La première Release Candidate pour WordPress 5.6 est maintenant disponible !Il s'agit d'une étape importante dans la progression de la communauté vers la version finale  →

Pencils
Gutenberg 9.4 introduit un sélecteur de largeur de bouton et des contrôles typographiques pour le bloc de liste

Gutenberg 9.4.0 est sorti cette semaine avec de nombreuses petites améliorations aux fonctionnalités existantes, tandis que le travail d'édition complète de site se poursuit. Cette  →

Gutenberg Full Height Cover
Gutenberg 9.5 améliore l’éditeur de site et ajoute de nouvelles options pour les blocs de couverture et de code

Gutenberg 9.5 a été mis en ligne aujourd'hui. L'équipe de développement poursuit ses travaux, que nous commencerons à voir dans WordPress 5.7 et au-delà. Les  →

State Of The Word 2020 Fr
State Of The Word 2020 : WordPress s’oriente vers le Full Site Editing

Les passionnés de WordPress du monde entier ont écouté cette semaine le discours annuel de Matt Mullenweg sur « State of the word », prononcé  →

Mise A Jour WordPress
L’équipe des extensions trace une ligne : Les extensions ne doivent pas modifier les réglages de mise à jour automatique par défaut de WordPress

L'équipe chargée des extensions de WordPress a publié une déclaration concernant les extensions qui apportent des modifications aux services de mise à jour des utilisateurs.  →

Https Icon
WordPress 5.7 facilitera la migration de HTTP vers HTTPS

La prochaine version majeure de WordPress permettra aux utilisateurs et utilisatrices de migrer beaucoup plus facilement leurs sites de HTTP vers HTTPS. Elle introduit de  →