Comment créer des modèles de thème de bloc dans WordPress 6.0 PlatoBlockchain Data Intelligence. Recherche verticale. Aï.

Comment créer des modèles de thème de bloc dans WordPress 6.0

Horodatage: 1 juin 2022 11h30

Modèles de bloc, aussi souvent appelé les sections, ont été introduites en WordPress 5.5 pour permettre aux utilisateurs de créer et de partager des dispositions de blocs prédéfinies dans le répertoire de motifs. Le répertoire abrite un large éventail de modèles organisés conçus par la communauté WordPress. Ces modèles sont disponibles en format simple copier-coller, ne nécessitent aucune connaissance en codage et permettent donc aux utilisateurs de gagner beaucoup de temps.

Malgré de nombreux articles sur les modèles, il y a un manque d'articles complets et à jour sur la création de modèles couvrant les dernières fonctionnalités améliorées. Cet article vise à combler le vide en mettant l'accent sur les fonctionnalités améliorées récentes telles que la création de modèles sans inscription et offre un guide étape par étape à jour pour les créer et les utiliser dans des thèmes de blocs pour les novices et les auteurs expérimentés.

Depuis le lancement de WordPress 5.9 et par Vingt vingt-deux (TT2) thème par défaut, l'utilisation de modèles de blocs dans les thèmes de blocs a proliféré. J'ai été un grand fan de motifs de bloc et je les ai créés et utilisés dans mes thèmes de blocs.

Le nouveau système d’ WordPress 6.0 . trois modèles principaux présentent des améliorations pour les auteurs:

  • Autoriser l'enregistrement du modèle via /patterns dossier (similaire à /parts, /templateset /styles enregistrement).
  • Enregistrement de modèles à partir du répertoire de modèles public à l'aide de theme.json.
  • Ajout de motifs pouvant être proposés à l'utilisateur lors de la création d'une nouvelle page.

Dans une introduction Explorer la vidéo de WordPress 6.0, Liaison produit Automattic Ann McCathy met en évidence certaines fonctionnalités de modèles récemment améliorées (à partir de 15h00) et discute des futurs plans d'amélioration des modèles - qui incluent motifs en tant qu'éléments de sectionnement, offrant des options pour choisir un motif lors de la création de la page, intégrant la recherche de répertoire de modèles, et plus encore.

Pré-requis

L'article suppose que les lecteurs ont une connaissance de base de l'interface d'édition de site complet (FSE) de WordPress et des thèmes de blocs. La Manuel de l'éditeur de blocs ainsi que Édition complète du site Le site Web fournit les guides de didacticiel les plus récents pour apprendre toutes les fonctionnalités de FSE, y compris les thèmes de bloc et les modèles abordés dans cet article.

Section 1 : Approches évolutives pour créer des modèles de blocs

L'approche initiale de création de modèles de blocs nécessitait l'utilisation de l'API de modèle de bloc soit en tant que plug-in personnalisé, soit directement enregistré dans le functions.php fichier à regrouper avec un thème de bloc. Le nouveau WordPress 6.0 a introduit plusieurs fonctionnalités nouvelles et améliorées fonctionnant avec des modèles et des thèmes, y compris l'enregistrement de modèles via un /patterns dossier et un modèle de création de page modal.

Pour le contexte, voyons d'abord brièvement comment le flux de travail d'enregistrement de modèle a évolué de l'utilisation de l'API d'enregistrement de modèle au chargement direct sans enregistrement.

Exemple de cas d'utilisation 1 : vingt vingt et un

Le défaut Vingt-et-un thème (TT1) et Thème des blocs TT1 (un frère de TT1) montre comment les modèles de blocs peuvent être enregistrés dans le thème functions.php. Dans le thème expérimental TT1 Blocks, ce single bloc-motif.php fichier contenant huit des motifs de blocs sont ajoutés au functions.php en tant que include comme montré ici.

Un modèle de bloc personnalisé doit être enregistré utilisant l' register_block_pattern fonction, qui reçoit deux arguments — title (nom des motifs) et properties (un tableau décrivant les propriétés du motif).

Voici un exemple d'enregistrement d'un simple modèle de paragraphe "Hello World" à partir de ce Article sur le modeleur de thème:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

Après l'enregistrement, le register_block_pattern() la fonction doit être appelée à partir d'un gestionnaire attaché à la init crochet conforme à la description ici.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

Une fois les modèles de blocs enregistrés, ils sont visibles dans l'éditeur de blocs. Une documentation plus détaillée se trouve dans ce Enregistrement de modèle de bloc.

Propriétés du motif de bloc

En plus de l'obligatoire title ainsi que content propriétés, le manuel de l'éditeur de blocs répertorie les éléments facultatifs suivants propriétés du motif:

  • title (Obligatoire): un titre lisible pour le modèle.
  • content (Obligatoire): Bloquer le balisage HTML pour le modèle.
  • description (Optionnel): Un texte visuellement masqué utilisé pour décrire le motif dans l'inséreuse. Une description est facultative mais elle est fortement encouragée lorsque le titre ne décrit pas complètement ce que fait le modèle. La description aidera les utilisateurs à découvrir le modèle lors de la recherche.
  • categories (Optionnel): Un tableau de catégories de motifs enregistrés utilisé pour regrouper les motifs de bloc. Les modèles de bloc peuvent être affichés sur plusieurs catégories. Une catégorie doit être enregistrée séparément afin d'être utilisée ici.
  • keywords (Optionnel): Un tableau d'alias ou de mots-clés qui aident les utilisateurs à découvrir le modèle lors de la recherche.
  • viewportWidth (Optionnel): nombre entier spécifiant la largeur prévue du motif pour permettre un aperçu à l'échelle du motif dans l'inséreuse.
  • blockTypes (Optionnel): Un tableau de types de blocs avec lesquels le modèle est destiné à être utilisé. Chaque valeur doit être celle du bloc déclaré name.
  • inserter (Optionnel): Par défaut, tous les motifs apparaîtront dans l'inséreuse. Pour masquer un motif afin qu'il ne puisse être inséré que par programme, définissez le inserter à false.

Voici un exemple d'extraits de code de plug-in de modèle de citation tirés du Blog WordPress.

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

Utilisation de modèles dans un fichier de modèle

Une fois les modèles créés, ils peuvent être utilisés dans un fichier de modèle de thème avec le balisage de bloc suivant :

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

Un exemple de ce dépôt GitHub montre l'utilisation de "footer-with-background« modèle limace avec »tt2gopher” préfixe dans le thème des blocs TT2 Gopher.

Les premiers utilisateurs des thèmes de blocs et du plugin Gutenberg ont également profité des modèles des thèmes classiques. Le défaut Vingt vingt et mes thèmes préférés d'Eksell (un site de démonstration ici) sont de bons exemples qui montrent comment les fonctionnalités de modèle peuvent être ajoutées aux thèmes classiques.

Exemple de cas d'utilisation 2 : vingt vingt-deux

Si un thème ne comprend que quelques modèles, le développement et la maintenance sont assez gérables. Cependant, si un thème de bloc comprend de nombreux modèles, comme dans le thème TT2, alors le pattern.php le fichier devient très volumineux et difficile à lire. Le thème TT2 par défaut, qui regroupe plus de 60 modèles, présente un flux de travail d'enregistrement de modèle refactorisé structure qui est plus facile à lire et à maintenir.

Prenant des exemples du thème TT2, discutons brièvement du fonctionnement de ce flux de travail simplifié.

2.1 : Enregistrement des catégories de motifs

À des fins de démonstration, j'ai créé un thème enfant TT2 et l'ai configuré sur mon site de test local avec du contenu factice. Suite au TT2, je me suis inscrit footer-with-background et ajouté à la liste de tableaux de catégories de motifs suivante dans son block-patterns.php fichier.

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); } } $block_patterns = array( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

Dans cet exemple de code, chaque modèle répertorié dans le $block_patterns = array() est appelé par foreach() fonction qui requires une patterns fichier de répertoire avec le nom de modèle répertorié dans le tableau que nous ajouterons à l'étape suivante.

2.2 : Ajout d'un fichier de motif au /inc/patterns dossier

Ensuite, nous devrions avoir tous les fichiers de modèles répertoriés dans le $block_patterns = array(). Voici un exemple d'un des fichiers de modèle, footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

Faisons référence au modèle dans le footer.html partie modèle :

<!-- wp:template-part {"slug":"footer"} /-->

Cela revient à ajouter des parties d'en-tête ou de pied de page dans un fichier de modèle.

Les motifs peuvent également être ajoutés au parts/footer.html modèle en le modifiant pour faire référence à slug du fichier pattern du thème (footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

Maintenant, si nous visitons l'insertion de motifs de l'éditeur de blocs, le Footer with background devrait être disponible pour notre usage :

Capture d'écran du modèle de pied de page avec arrière-plan.
Comment créer des modèles de thème de bloc dans WordPress 6.0

La capture d'écran suivante montre le pied de page nouvellement créé avec un motif d'arrière-plan sur le front-end.

Capture d'écran de l'arrière-plan du pied de page tel qu'il apparaît rendu sur le site.
Comment créer des modèles de thème de bloc dans WordPress 6.0

Maintenant que les modèles sont devenus partie intégrante du thème de bloc, de nombreux modèles sont regroupés dans des thèmes de bloc - comme Carré, Graine, Mayland, Le zoologiste ;, Le géologue ; - en suivant le flux de travail décrit ci-dessus. Voici un exemple du thème Quadrat /inc/patterns dossier avec un enregistrement de modèle de bloc déposer et liste de fichiers avec la source de contenu et l'en-tête de modèle requis dans les return array() fonction.

Section 2 : Création et chargement de motifs sans inscription

Veuillez noter que cette fonctionnalité nécessite l'installation de WordPress 6.0 ou du plugin Gutenberg 13.0 ou supérieur sur votre site.

Ce nouvelle fonctionnalité WordPress 6.0 permet l'enregistrement de modèles via des fichiers et des dossiers standard - /patterns, apportant des conventions similaires comme /parts, /templateset /styles.

Le processus, tel qu'il est également décrit dans cette taverne WP article, comporte les trois étapes suivantes :

  • créer un dossier patterns à la racine du thème
  • ajout d'en-tête de modèle de style de plugin
  • modèle de contenu source

Un balisage d'en-tête de modèle typique, tiré de l'article, est illustré ci-dessous :

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

Comme décrit dans la section précédente, seuls Title ainsi que Slug champs sont obligatoires et les autres champs sont facultatifs.

En faisant référence à des exemples de thèmes récemment publiés, j'ai refactorisé l'enregistrement des modèles dans ces blocs Gopher TT2 thème de démonstration, préparé pour un précédent article sur les CSS-Tricks.

Dans les étapes suivantes, explorons comment un footer-with-background.php modèle enregistré avec PHP et utilisé dans un footer.html modèle est refactorisé.

2.1 : Créer un /patterns dossier à la racine du thème

La première étape consiste à créer un /patterns dossier à la racine du thème TT2 Gopher et déplacez le footer-with-background.php fichier de modèle à /patterns dossier et refactoriser.

2.2 : Ajouter des données de modèle à l'en-tête du fichier

Ensuite, créez les champs d'enregistrement d'en-tête de modèle suivants.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

Un fichier de modèle a un champ de titre supérieur écrit sous forme de commentaires PHP. Suivi par le contenu du bloc écrit au format HTML.

2.3 : Ajouter du contenu de modèle au fichier

Pour la section de contenu, copions les extraits de code dans Guillemets simples (par exemple, '...') à partir de la section de contenu de la footer-with-background et remplacer le <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

L'intégralité de l'extrait de code de patterns/footer-with-background.php le fichier peut être consulté ici sur le GitHub.

S'il vous plaît noter que le /inc/patterns ainsi que block-patterns.php extras, non requis dans WordPress 6.0, et inclus uniquement à des fins de démonstration.

2.4 : Référencer le slug de motifs dans le template

Ajout du refactorisé ci-dessus footer-with-background.php modèle à footer.html est exactement le même que celui décrit dans la section précédente (Section 1, 2.2).

Désormais, si nous visualisons la partie pied de page du site dans un éditeur de blocs ou le front-end de notre site dans un navigateur, la section pied de page s'affiche.

Catégories et types de motifs Enregistrement (facultatif)

Pour catégoriser les modèles de blocs, les catégories et les types de modèles doivent être enregistrés dans le thème functions.php fichier.

Prenons un exemple de enregistrement des catégories de modèles de blocs du thème TT2 Gopher.

Après l'enregistrement, les motifs sont affichés dans l'outil d'insertion de motifs avec les motifs principaux par défaut. Pour ajouter des étiquettes de catégorie spécifiques au thème dans l'insertion de modèles, nous devons modifier les extraits précédents en ajoutant un espace de noms de thème :

/**
* Registers block categories, and type.
*/ function tt2gopher_register_block_pattern_categories() { $block_pattern_categories = array( 'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ), 'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ), 'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

Les footer-with-background motif est visible dans les motifs insérés avec son aperçu (si sélectionné) :

Capture d'écran montrant la catégorie de motifs affichée dans l'outil d'insertion de motifs (panneau de gauche) et le motif de pied de page par défaut correspondant affiché dans l'éditeur (panneau de droite).
Comment créer des modèles de thème de bloc dans WordPress 6.0

Ce processus simplifie grandement la création et l'affichage de modèles de blocs dans les thèmes de blocs. Il est disponible dans WordPress 6.0 sans utiliser le plugin Gutenberg.

Exemples de thèmes sans enregistrement de motifs

Les premiers utilisateurs ont déjà commencé à utiliser cette fonctionnalité dans leurs thèmes de blocs. Quelques exemples de thèmes, disponibles sur le répertoire de thèmes, que les modèles de chargement sans enregistrement sont répertoriés ci-dessous :

Section 3 : Créer et utiliser des modèles avec du low-code

Les répertoire officiel des patrons contient des conceptions créatives fournies par la communauté, qui peuvent être copiées et personnalisées à volonté pour créer du contenu. Utiliser des modèles avec un éditeur de blocs n'a jamais été aussi simple !

Tous les modèles du répertoire en constante évolution peuvent également être ajoutés aux thèmes de bloc simplement par simple "copier-coller" ou inclure dans le theme.json fichier en se référant à leur répertoire limace de modèle. Ensuite, je passerai brièvement en revue la facilité avec laquelle cela peut être accompli avec un codage très limité.

Ajout et personnalisation de motifs à partir du répertoire de motifs

3.1 : Copier le modèle du répertoire dans une page

Ici, j'utilise ce modèle de section de pied de page par FirstWebGeek depuis le répertoire des modèles. Copiez le motif en sélectionnant le bouton "Copier le motif" et collez-le directement dans une nouvelle page.

3.2 : Effectuez la personnalisation souhaitées

Je n'ai apporté que quelques modifications à la couleur des polices et à l'arrière-plan des boutons. Ensuite, copiez l'intégralité du code à partir du éditeur de code vers un presse-papiers.

Capture d'écran montrant le modèle modifié (panneau de gauche) et le code correspondant dans l'éditeur de code (panneau de droite)
Comment créer des modèles de thème de bloc dans WordPress 6.0

Si vous n'êtes pas familiarisé avec l'utilisation de l'éditeur de code, accédez aux options (avec trois points, en haut à droite), cliquez sur le bouton Éditeur de code et copiez l'intégralité du code à partir d'ici.

3.3 : Créer un nouveau fichier dans le dossier /patterns

Commençons par créer un nouveau /patterns/footer-pattern-test.php fichier et ajoutez la section d'en-tête de modèle requise. Collez ensuite le code entier (étape 3, ci-dessus). Le patron est catégorisé dans la zone de pied de page (lignes : 5), on peut visualiser les nouveaux ajoutés dans l'insertion de patrons.

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4 : Afficher le nouveau modèle dans l'inséreuse

Pour voir le nouveau Footer pattern from patterns library modèle, accédez à n'importe quel article ou page et sélectionnez l'icône d'insertion (symbole plus bleu, en haut à gauche), puis sélectionnez les catégories "TT2 Gopher - Footer". Le motif nouvellement ajouté est affiché sur le panneau de gauche, avec d'autres motifs de pied de page et son aperçu sur la droite (si sélectionné) :

Capture d'écran montrant le nouveau motif de pied de page (panneau de gauche) et son aperçu (panneau de droite).
Comment créer des modèles de thème de bloc dans WordPress 6.0

Enregistrement de motifs directement dans theme.json filet

Dans WordPress 6.0, il est possible d'enregistrer tous les modèles souhaités à partir du répertoire de modèles avec theme.json fichier avec la syntaxe suivante. La États de la note de développement 6.0, "le champ patterns est un tableau de [limaces de modèle] du répertoire de modèles. Les slugs de modèle peuvent être extraits par l'[URL] dans une vue de modèle unique dans le répertoire de modèles. »

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

Ce courte vidéo sur les fonctionnalités de WordPress 6.0 montre comment les modèles sont enregistrés dans le /patterns dossier (à 3:53) et en enregistrant les motifs souhaités depuis le directeur de motifs dans un theme.json fichier (à 3:13).

Ensuite, le modèle enregistré est disponible dans la zone de recherche de l'inséreuse de modèles, qui peut alors être utilisée comme une bibliothèque de modèles par thème.

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

Dans cet exemple, le motif slug footer-section-design-with-3-column-description-social-media-contact-and-newsletter du exemple précédent est enregistré via theme.json.

Modèle de modèle de création de page

Dans le cadre de "construire avec des motifs»initiatives, WordPress 6.0 offre une option modale de modèle aux auteurs de thèmes pour ajouter des modèles de mise en page dans le thème de bloc, permettant aux utilisateurs du site de sélectionner des modèles de mise en page (par exemple, une page à propos, une page de contact, une page d'équipe, etc.) lors de la création d'une page. Voici un exemple tiré de la note de développement:

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

Cette fonctionnalité est actuellement limité au type de publication de la page uniquement et pas pour "Messages Post Type", pour le moment.

Les modèle de création de page modal peut également être complètement désactivé en supprimant le type de bloc post-contenu de tous les modèles. Un exemple d'exemple de code est disponible ici.

Vous pouvez suivre et participer à la discussion de GitHub à partir des liens répertoriés dans la section des ressources ci-dessous.

Utilisation du répertoire de modèles pour créer la page

Les modèles du répertoire peuvent également être utilisés pour créer la publication ou la mise en page souhaitée, à l'instar des constructeurs de pages. La GutenbergHub l'équipe a créé une application expérimentale de création de pages en ligne en utilisant des motifs directement depuis le répertoire (vidéo d'introduction). Ensuite, les codes de l'application peuvent être copiés et collés dans un site, ce qui simplifie grandement le processus de création de mise en page complexe sans codage.

In cette courte vidéo, Jamie Marsland montre (à 1:30) comment l'application peut être utilisée pour créer une mise en page entière similaire au constructeur de page en utilisant les sections de page souhaitées du répertoire.

Emballage en place

Les modèles permettent aux utilisateurs de recréer leur mise en page de contenu couramment utilisée (par exemple, page de héros, appel, etc.) dans n'importe quelle page et de réduire les obstacles à la présentation de contenu dans des styles, qui n'étaient auparavant pas possibles sans compétences en codage. Tout comme le plugins ainsi que thèmes répertoires, les nouveaux motifs offre aux utilisateurs des options pour utiliser un large éventail de modèles de leur choix à partir du répertoire de modèles, et écrire et afficher du contenu avec style.

En effet, les motifs de blocs vont tout changer et c'est sûrement un changeur de jeu fonctionnalité dans le paysage des thèmes WordPress. Lorsque le plein potentiel de construire avec des motifs effort devient disponible, cela va changer la façon dont nous concevons les thèmes de blocs et créons un beau contenu même avec des connaissances en code faible. Pour de nombreux designers créatifs, le répertoire des modèles peut également fournir une avenue appropriée pour présenter leurs notre créativité.

Ressources

WordPress 6.0

Créer des motifs

Amélioration des modèles (GitHub)

articles de Blog

Comment créer des modèles de thème de bloc dans WordPress 6.0 publié à l'origine le Astuces CSS. Vous devriez recevoir le bulletin.

Horodatage:

Plus de Astuces CSS