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