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

WordPress 5.5 introduit le mode bloc (également communément appelé "blocs") qui permet aux utilisateurs de créer et de partager des dispositions de blocs prédéfinis. Ces dispositions sont stockées dans le répertoire des schémas et contiennent divers schémas conçus par la communauté WordPress. Ces modes utilisent un format de copie simple sans aucune connaissance de codage, ce qui fait gagner du temps aux utilisateurs.

Bien qu'il existe déjà beaucoup d'articles sur les modèles, il y a un manque d'articles complets et de création de modèles complets couvrant les dernières améliorations. Cet article vise à combler cette lacune, en mettant en évidence des améliorations récentes telles que la création de modèles sans enregistrement, et offrir aux auteurs nouveaux et expérimentés un guide étape par étape pour créer et utiliser des modèles, en particulier dans des sujets de bloc.

L'utilisation du mode bloc dans les thèmes de blocs a augmenté depuis la libération de thèmes par défaut WordPress 5.9 et vingt-deux (TT2). J'ai toujours été un grand fan des modèles de blocs et je les ai créés et les ai utilisés dans mes thèmes de bloc.

WordPress 6.0 fournit aux auteurs trois améliorations des fonctionnalités du mode principal:

• Permet le mode d'enregistrement via le dossier / motifs (similaire à / parties, modèles et / styles).
• Utilisez le thème.json pour enregistrer le schéma du répertoire du mode public.
• Ajoute un modèle qui peut être fourni aux utilisateurs lors de la création d'une nouvelle page.

Dans la vidéo d'introduction "Explorer WordPress 6.0", la liaison de produits automatitiques Ann McCathy a mis en évidence certaines des nouvelles fonctionnalités de mode améliorées (à partir de 15h00) et a discuté des plans d'amélioration du mode futur, y compris les modes comme éléments de section, les options pour sélectionner les modes lorsque la création de pages, la recherche de répertoire de mode intégré, et plus encore.

Condition préalable

Cet article suppose que les lecteurs ont une connaissance de base de l'interface d'édition de site WordPress (FSE) et des thèmes de bloc. Le manuel d'édition de blocs et le site Web d'édition à l'échelle du site fournissent les derniers guides de didacticiel pour apprendre toutes les fonctionnalités FSE, y compris les sujets et modèles de bloc discutés dans cet article.

Section 1: Méthodes d'évolution pour créer des modèles de blocs

La méthode initiale pour créer un modèle de bloc nécessite l'utilisation de l'API de modèle de bloc, qui peut être utilisé comme plugin personnalisé ou directement enregistré dans le fichier functions.php à regrouper avec le thème de bloc. Le WordPress 6.0 nouvellement publié introduit plusieurs fonctionnalités nouvelles et améliorées pour une utilisation avec des modèles et des thèmes, y compris le mode d'enregistrement du dossier / motifs et la modalité du mode de création de pages.

Dans un contexte, commençons par un bref aperçu de la façon dont le flux de travail d'enregistrement du schéma est passé à partir de l'utilisation de l'API de schéma de registre pour charger directement sans enregistrement.

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

Les vingt-et-un thème par défaut (TT1) et TT1 bloquent les thèmes (thèmes soeurs TT1) comment enregistrer le mode bloc dans les fonctions du thème. Dans le sujet expérimental des blocs TT1, un seul fichier de blocs de blocs contenant huit modèles de blocs est ajouté à functions.php en tant que fichier d'inclusion, comme indiqué ci-dessous.

Vous devez enregistrer un modèle de bloc personnalisé à l'aide de la fonction register_block_pattern, qui reçoit deux paramètres - le titre (le nom du modèle) et l'attribut (le tableau décrivant les propriétés du motif).

Voici un exemple de modèle de paragraphe simple "Hello World" enregistré selon l'article de thème Shaper:

 registre_block_pattern (
    «My-Plugin / Hello-World»,
    tableau(
        'Title' => __ ('Hello World', 'My-Plugin'),
        'contenu' => "\ n<p> Bonjour le monde</p> \ n ",
    )
));

Après l'enregistrement, la fonction register_block_pattern () doit être appelée à partir du gestionnaire attaché au crochet init, comme décrit ci-dessous.

 fonction my_plugin_register_my_patterns () {
    registre_block_pattern (...);
}

add_action ('init', 'my_plugin_register_my_patterns');

Après avoir enregistré des modes de bloc, ils sont visibles dans l'éditeur de blocs. Une documentation plus détaillée peut être trouvée dans l'enregistrement en mode bloc.

Propriétés en mode bloc

En plus des propriétés de titre et de contenu requises, le manuel de l'éditeur de blocs répertorie également les propriétés en mode optionnel suivantes:

• Titre (requis) : Titre lisible par l'homme pour le modèle.
• Contenu (requis) : Bloquer la balise HTML pour le modèle.
• Description (Facultatif) : Texte visuellement caché utilisé pour décrire le motif dans l'inserteur. La description est facultative, mais il est fortement recommandé d'utiliser lorsque le titre ne décrit pas entièrement la fonctionnalité du mode. Description aidera les utilisateurs à découvrir des modèles lors de la recherche.
• Catégories (facultative) : un tableau de catégories de schémas enregistrées utilisées pour regrouper les schémas de blocs. Le mode bloc peut être affiché dans plusieurs catégories. La catégorie doit être enregistrée séparément pour être utilisée ici.
• Mots-clés (facultatif) : aide les utilisateurs à découvrir des alias ou des réseaux clés ce modèle lors de la recherche.
• ViewportWidth (facultatif) : spécifie un entier de la largeur attendue du mode pour prévisualiser le mode proportionnellement dans l'inserteur.
• BlockTypes (facultatif) : un tableau de types de blocs que le motif prévoit. Chaque valeur doit être le nom du bloc déclaré.
• inserter (facultatif) : Par défaut, tous les modes apparaissent dans l'inserteur. Pour masquer le mode afin qu'il puisse être inséré par programme, définissez l'inserter sur false.

Voici un exemple d'un extrait de code de plugin de modèle de référence tiré du blog WordPress.

 / *
Nom du plugin: Exemple de motif de citation Plugin
* /

registre_block_pattern (
    'My-Plugin / My-Quote-Pattern',
     tableau(
      'Title' => __ ('Citation avec Avatar', 'My-Plugin'),
      'catégories' => array ('text'),
      'Description' => _x ('Une grande citation avec un avatar ".', 'Block Pattern Description', 'My-Plugin'),
      'contenu' => ' <div><div>
<hr>
<div><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174183133237166.jpg" class="lazy" alt=""    style="max-width:90%"  style="max-width:90%"></div>
<blockquote>
<p> "La contribution me donne l'impression d'être utile à la planète."</p> <cite>- Anna Wong, <em>volontaire</em></cite>
</blockquote>
<hr>
</div></div> ',
      )
));

Utilisation de modèles dans des fichiers de modèle

Après avoir créé le modèle, vous pouvez les utiliser dans le fichier de modèle de thème à l'aide des balises de bloc suivantes:

Un exemple de ce référentiel GitHub montre l'utilisation de la limace de motif "footer-with-background" avec le préfixe "tt2gopher" dans le thème du bloc Gopher TT2.

Les premiers adoptants des thèmes de blocs et des plug-ins Gutenberg ont également profité des modèles dans les thèmes classiques. Les vingt-vingt par défaut et mon thème Eksell préféré (voici le site de démonstration) sont de bons exemples pour montrer comment ajouter la fonctionnalité de schéma à un thème classique.

Exemple de cas d'utilisation 2: vingt-deux

Si le sujet ne contient qu'un petit nombre de modèles, le développement et la maintenance sont assez faciles à gérer. Cependant, si le thème du bloc contient de nombreux modèles, tels que le thème TT2, le fichier Pattern.php devient très grand et difficile à lire. Le thème TT2 par défaut regroupé avec plus de 60 schémas, démontrant une structure de workflow d'enregistrement de schéma refactorisé plus facile à lire et à maintenir.

Prenant l'exemple du sujet TT2, discutons brièvement du fonctionnement de ce flux de travail simplifié.

2.1: catégorie de mode d'enregistrement

À des fins de démonstration, j'ai créé un sous-topique TT2 et je l'ai configuré sur mon site de test local à l'aide d'un contenu virtuel. En suivant la méthode de TT2, j'ai enregistré le pied de page avec le bassin dans son fichier de blocs de blocs.php et ajouté au tableau suivant des catégories de schéma.

 / **
* Inregistre les modèles et catégories de blocs.
* /
fonction TwentyTwentyTwentyTwo_Register_Block_Patterns () {
    $ block_pattern_categories = array (
        'Footer' => Array ('Label' => __ ('Footers', 'TwentyTwentyTwo')),
        'Header' => Array ('Label' => __ ('Headers', 'TwentyTwentyTwo')),
        'pages' => array ('label' => __ ('pages', 'TwentyTwentyTwo')),
                // ...
    ));

    / **
     * Filtre les catégories de motifs de blocs de thème.
     * /
    $ block_pattern_categories = application_filters ('twentntytwentytwo_block_pattern_categories', $ block_pattern_categories);

    foreach ($ block_pattern_categories comme $ name => $ Properties) {
        if (! wp_block_pattern_categories_registry :: get_instance () -> is_registered ($ name)) {
            registre_block_pattern_category ($ name, $ Properties);
        }
    }

    $ block_patterns = array (
        «pied-default»,
        «Piet-Dark»,
        «Footer-with-background»,
        // ...
        'Header-Default',
        'Header-Garn-Dark',
        'Header-Small-Dark',
        'Hidden-404',
        'Hidden-Bird',
        // ...
    ));

    / **
     * Filtre les modèles de blocs de thème.
     * /
    $ block_patterns = application_filters ('TwentyTwentyTwo_Block_Patterns', $ block_patterns);

    foreach ($ block_patterns comme $ block_pattern) {
        $ Pattern_file = get_theme_file_path ('/ inc / motifs /'. $ block_pattern. '.php');

        registre_block_pattern (
            'TwentyTwentyTwo /'.
            exiger $ pattern_file
        ));
    }
}
add_action ('init', 'TwentyTwentyTwo_Register_Block_Patterns', 9);

Dans cet exemple de code, chaque modèle répertorié dans $ block_patterns = array () est appelé par la fonction foreach (), qui nécessite un fichier de répertoire de schéma contenant les noms de schéma répertoriés dans le tableau, que nous ajouterons à l'étape suivante.

2.2: ajouter des fichiers de modèle à / inc / motifs du dossier

Ensuite, nous devrions avoir tous les fichiers de schéma répertoriés dans $ block_patterns = array (). Voici un exemple de page de page de fichier de schéma-with-background.php:

 / **
 * Dark Footer avec le titre et la citation
 * /
Retour Array (
    'title' => __ ('pied de page avec arrière-plan', 'TwentyTwentyTwo'),
    'catégories' => array ('footer'),
    'BlockTypes' => Array ('Core / Template-Parts / Footer'),
  'contenu' => '
      <div style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)">
      <p>'.
      sprintf (
        / * Translateurs: lien WordPress.
        ESC_HTML __ («Fièrement alimenté par% S», «TwentyTwentyTwo»),
        « <a href="'%20.%20esc_url(%20__(%20'https://wordpress.org',%20'twentytwentytwo'%20)%20)%20.%20'" rel="nofollow">WordPress</a> | Un thème TT2 modifié.
      ).</p>
      </div>
          ',
));

Références au modèle dans la partie de modèle de pied.html:

Ceci est similaire à l'ajout d'un titre ou d'un pied de page à un fichier de modèle.

Vous pouvez également ajouter le motif au modèle de pièces / pied de pied.html en le modifiant pour référencer la limace du fichier de modèle de thème (pied-de-pied-background):

Maintenant, si nous accédons à l'inserteur de mode de l'éditeur de blocs, nous pouvons utiliser "Footer avec arrière-plan".

La capture d'écran suivante montre le modèle de page de page nouvellement créé avec un arrière-plan sur l'avant.

Maintenant que le modèle est devenu une partie intégrante du thème du bloc, dont beaucoup sont regroupés dans le thème du bloc - tels que Quadrat, Seedlet, Mayland, Zoologist, Geologist - suivent le flux de travail ci-dessus. Ceci est un exemple du dossier Quadrat Thème / Inc / Patterns qui contient un fichier d'enregistrement de modèle de bloc et une série de fichiers contenant la source de contenu et le titre de modèle requis dans la fonction Return Array ().

Section 2: Créez et chargez des modèles sans enregistrement

Veuillez noter que cette fonctionnalité nécessite un plug-in WordPress 6.0 ou Gutenberg 13.0 ou plus à installer dans votre site.

Cette nouvelle fonctionnalité WordPress 6.0 permet des modes d'enregistrement des fichiers et des dossiers standard, apportant des conventions similaires à / parties, / modèles et / styles.

Ce processus, comme décrit dans cet article, implique les trois étapes suivantes:

• Créez un dossier de motif dans le répertoire racine du thème
• Ajouter le titre de modèle de style plugin
• Mode Source Content

Les balises de titre de modèle typiques obtenues à partir de l'article sont les suivantes:

  Php / **
* Titre: un titre de modèle
* Slug: espace de noms / limace
* Description: Une description respectueuse de l'homme.
* Largeur de la fenêtre: 1024
* Catégories: virgule, séparées, valeurs
* Mots-clés: virgule, séparée, valeurs
* Types de blocs: virgule, séparées, valeurs
* Inserteur: oui | Non
* /
??>

Comme mentionné dans la section précédente, seuls les champs de titre et de limace sont requis et d'autres champs sont facultatifs.

En se référant aux exemples dans un sujet récemment publié, j'ai refactorisé l'enregistrement du schéma dans le sujet de démonstration de Blocks TT2 Gopher préparé dans un article précédent sur CSS-Tricks.

Dans les étapes suivantes, explorons comment refacter le modèle de page de pied-avec-background.php enregistré avec PHP et utilisé dans le modèle de page de pied.html.

2.1: Créez un dossier A / Pattern dans le répertoire racine du thème

La première étape consiste à créer un dossier A / Modèles dans le répertoire racine du thème TT2 GOPHER, et à déplacer le fichier de motif de pied-avec-background.php vers le dossier / motifs et de le refactor.

2.2: ajouter des données de schéma au titre de fichier

Ensuite, créez le champ d'enregistrement du titre de schéma suivant.

  Php / **
* Titre: pied de page avec fond
* Slug: TT2Gopher / Footer-with-Background
* Catégories: TT2Gopher-Footer
* Largeur de la fenêtre: 1280
* Types de blocs: noyau / parties / pied de page
* Inserteur: oui
* /
??>

Le fichier de schéma a un champ de titre supérieur écrit comme un commentaire PHP. suivi d' un contenu de bloc écrit au format HTML.

2.3: ajouter du contenu de schéma au fichier

Pour la partie de contenu, copie l'extrait de code en devis (par exemple, '...'), commençons par la partie de contenu du pied-de-pied-background et remplacez:

    <div style="padding-top:35px;padding-bottom:30px">
    <p>Propulsé par WordPress |</p>
    </div>

L'extrait de code complet du fichier de motifs / pied de page-With-Background.php peut être affiché sur GitHub.

Notez que / inc / motifs et les modèles de blocs.php sont des extras , non requis dans WordPress 6.0 et ne sont inclus qu'à des fins de démonstration.

2.4: Slug de motif de référence dans le modèle

L'ajout du modèle de page-with-background.php du modèle de pied de page refactorisé-With-Background.php ci-dessus sur le modèle Foot.html est exactement le même que celui décrit dans la section précédente (section 1, 2.2).

Maintenant, si nous affichons le site dans la partie de pied de page du site dans l'éditeur de blocs ou dans le navigateur, la partie de pied de page s'affiche.

Catégorie de modèle et enregistrement de type (facultatif)

Pour classer les modèles de blocs, vous devez enregistrer les catégories et types de schéma dans le fichier functions.php du sujet.

Voyons un exemple d'enregistrement d'une catégorie de motifs de blocs à partir du sujet TT2 Gopher.

Après l'enregistrement, le mode sera affiché dans l'insert de mode avec le mode par défaut de base. Pour ajouter des balises de catégorie spécifiques à la rubrique dans l'inserteur de motif, nous devons modifier l'extrait de code précédent en ajoutant l'espace de noms de la rubrique:

 / **
* Enregistre les catégories de blocs et tapez.
* /

fonction tt2gopher_register_block_pattern_categories () {

$ block_pattern_categories = array (
  'tt2gopher-header' => array ('label' => __ ('tt2 gopher - en-têtes', 'tt2gopher')),
  'TT2GOPHER-FOOTER' => Array ('Label' => __ ('TT2 GOPHER - Footers', 'TT2GOPHER')),
  'TT2GOPHER-PAGE' => Array ('Label' => __ ('TT2 GOPHER - PAGE', 'TT2GOPHER')),
  // ...
));

/ **
* Filtre les catégories de motifs de blocs de thème.
* /
$ block_pattern_categories = application_filters ('tt2gopher_block_pattern_categories', $ block_pattern_categories);

foreach ($ block_pattern_categories comme $ name => $ Properties) {
  if (! wp_block_pattern_categories_registry :: get_instance () -> is_registered ($ name)) {
    registre_block_pattern_category ($ name, $ Properties);
  }
}
add_action ('init', 'tt2gopher_register_block_pattern_categories', 9);

Le mode de page-background s'affiche dans son aperçu (s'il est sélectionné) avec l'inserteur de mode:

Ce processus simplifie considérablement le processus de création et d'affichage des modèles de bloc dans les thèmes de bloc. Il est disponible dans WordPress 6.0 sans avoir besoin du plug-in Gutenberg.

Échantillon de sujets sans enregistrement de mode

Les premiers adoptants ont commencé à utiliser cette fonctionnalité dans leurs thèmes de bloc. Certains des exemples de sujet fournis dans le répertoire de sujet qui peuvent charger des modèles sans enregistrement sont présentés ci-dessous:

• Archeo - 12 modes
• Pendant - 13 modes
• Remote - 11 modes
• Skatepark - 10 modes
• Stewart - 17 modes
• Livro - 16 modes
• Avant-garde - 14 modes

Section 3: Création et utilisation de modèles avec un code bas

Le catalogue de schémas officiel contient des conceptions créatives apportées par la communauté et peut être copiée et personnalisée au besoin pour créer du contenu. L'utilisation de modèles dans l'éditeur de bloc n'a jamais été aussi simple!

Tout modèle de répertoires en croissance peut également être ajouté au thème du bloc par simplement "copier et coller" ou les inclure dans le fichier theme.json en faisant référence à sa limace de modèle de répertoire. Ensuite, je vais brièvement expliquer comment implémenter facilement cela avec un code très limité.

Ajouter et personnaliser les schémas des répertoires de schéma

3.1: Copiez le mode du répertoire à la page

Ici, j'utilise FirstWebgeek pour le modèle de partie de pied de page du répertoire de schéma. Mode de copie en sélectionnant le bouton Mode de copie et en le collez directement dans la nouvelle page.

3.2: faire la personnalisation requise

Je n'ai apporté que quelques modifications à la couleur de la police et du fond du bouton. Copiez ensuite l'intégralité du code de l'éditeur de code dans le presse-papiers.

Si vous êtes nouveau à l'aide de l'éditeur de code, accédez aux options (avec trois points, coin supérieur droit), cliquez sur le bouton Éditeur de code et copiez l'intégralité du code à partir d'ici.

3.3: Créez un nouveau fichier dans le dossier / modèles

Tout d'abord, créons un nouveau fichier /patterns/footer-stattern-test.php et ajoutant la section de titre de schéma requise. Collez ensuite l'intégralité du code (étape 3 ci-dessus). Les modèles sont classés dans la zone de pied de page (ligne 5), et nous pouvons afficher les modèles nouvellement ajoutés dans l'insert de motif.

  Php / **
 * Titre: Footer Pattern From Pattern Library
 * Slug: TT2GOPHER / FooTer-Pattern Test
 * Catégories: TT2Gopher-Footer
 * Largeur de la fenêtre: 1280
 * Types de blocs: noyau / matrice-partie / pied de page
 * Inserteur: oui
 * /
??><div style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px">
<div>
<div>
<h2 style="font-style:normal;font-weight:700;text-transform:uppercase">Lorem</h2>



<p style="font-size:16px">L'un des principaux avantages de l'utilisation de Lorem Ipsum est qu'il peut être facilement généré, et il enlève la pression des concepteurs pour créer du texte significatif.</p>



<ul></ul>
</div>



<div>
<h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contactez-nous</h4>



<p style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br> 123-456-7890</p>



<p style="font-size:16px;line-height:1">[Protégé par e-mail]</p>



<p style="font-size:16px;line-height:1">Heures d'ouverture: 10h00 - 18h00</p>
</div>



<div>
<h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Bulletin</h4>



<p style="font-size:16px">Lorem ipsum Dolor sit amet, cohetur ut ouvrier et dolore magna aliqua ipsum Dolor Sit</p>


</div>
</div>
</div>

3.4: Afficher le nouveau mode dans l'inserteur

Pour afficher le mode de pied de page nouvellement ajouté à partir de la bibliothèque de motifs, accédez à n'importe quel article ou page et sélectionnez l'icône d'insertion (le signe bleu plus dans le coin supérieur gauche) et sélectionnez la catégorie TT2 GOPHER - pied de page. Le mode nouvellement ajouté apparaît sur le panneau de gauche, ainsi que d'autres modes de pied de page et leur aperçu à droite (si sélectionné):

Enregistrez le mode directement dans le fichier thème.json

Dans WordPress 6.0, vous pouvez utiliser la syntaxe suivante pour enregistrer n'importe quel schéma requis à partir du répertoire de schéma dans le fichier thème.json. La note de développement 6.0 indique que "le champ de motif est un tableau de [ schéma de schéma ] dans le répertoire de schéma. La limace de motif peut être extraite de [URL] dans une vue de schéma unique dans le répertoire du schéma."

 {
    "Version": 2,
    "Patterns": ["Short-Text", "Patterns-Slug"]
}

Cette vidéo courte WordPress 6.0 montre comment enregistrer un modèle dans le dossier / motifs (à 3:53) et comment enregistrer le modèle dans le répertoire de mode dans le fichier thème.json (à 3:13).

Le mode enregistré peut ensuite être utilisé dans la zone de recherche d'insertion de mode, puis il peut être utilisé comme la bibliothèque en mode de thème.

 {
  "Version": 2,
  "Modèles": ["Footer-from-Directory", "Footer-Section-Design-with-3-Column-Description-Social-Media-Contact-etwsletter"]
}

Dans cet exemple, le motif de page de page de section-section-conception-avec-3 colonnes-description-social-media-contact-et-newsletter de l'exemple précédent est enregistré via theme.json.

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

Dans le cadre du programme Build Utilisation des modèles, WordPress 6.0 fournit aux auteurs de thème une option modale modale pour ajouter des modes de mise en page pour bloquer les sujets, permettant aux utilisateurs du site de sélectionner des modes de mise en page (par exemple, sur les pages, les pages de contact, les pages d'équipe, etc.) lors de la création de pages. Voici un exemple tiré des instructions de développement:

 registre_block_pattern (
    «My-Plugin / environ Page»,
    tableau(
        'title' => __ ('À propos de la page', 'My-Plugin'),
        'BlockTypes' => Array ('Core / Post-Content'),
        'contenu' => '
        <p>Écrivez-vous sur la page ici, n'hésitez pas à utiliser n'importe quel bloc</p>
        ',
    )
));

Cette fonctionnalité est actuellement limitée aux types de publication de page et ne s'applique pas aux "types de publication".

Vous pouvez également désactiver complètement la modalité du mode de création de page en supprimant les types de blocs post-contenu pour tous les modes. Un exemple d'échantillon de code est fourni ici.

Vous pouvez suivre et participer aux discussions de GitHub, et les liens de discussion sont répertoriés dans la section Ressources ci-dessous.

Créez une page en utilisant le répertoire de schéma

Semblable au Builder de Page, vous pouvez également utiliser le modèle dans le répertoire pour créer le post souhaité ou la disposition de la page. L'équipe GutenberGHub a créé une application expérimentale de Builder de page en ligne (vidéo d'introduction) en utilisant les schémas du répertoire des schémas. Le code de l'application peut ensuite être copié et collé dans le site, ce qui simplifie considérablement le processus de création de dispositions de pages complexes sans codage.

Dans cette courte vidéo, Jamie Marsland démontre (à 1h30) comment utiliser l'application pour utiliser la section de page requise dans le répertoire pour créer une mise en page entière de page similaire au constructeur de pages.

Résumer

Le mode permet aux utilisateurs de recréer leurs dispositions de contenu couramment utilisées (par exemple, des pages de héros, des appels à l'action, etc.) dans n'importe quelle page et réduit les obstacles à l'incapacité auparavant à présenter le contenu de style sans codage de compétences. Tout comme les plugins et les répertoires de thème, le nouveau répertoire de schéma donne aux utilisateurs la possibilité de sélectionner divers schémas dans le répertoire de schéma et d'écrire et d'afficher le contenu avec style.

En fait, le mode bloc changera tout, qui est sans aucun doute une fonctionnalité transformatrice dans le champ de thème WordPress. Lorsque le plein potentiel du travail de «construction de motifs» est disponible, cela changera la façon dont nous concevons les thèmes de blocage et créons un beau contenu même avec seulement des connaissances à faible code. Pour de nombreux concepteurs créatifs, le catalogue de modèles peut également fournir un moyen approprié de démontrer leur créativité.

ressource

WordPress 6.0

• Guide du domaine WordPress 6.0 (Core WordPress)
• Explorez WordPress 6.0: Variations de style, interface utilisateur de verrouillage de bloc, Améliorations de l'écriture - vidéo de 22 minutes (Anne McCarthy)
• Caractéristiques WordPress 6.0 en 4 minutes (Dave Smith)
• Nouveau dans WordPress 6.0: Nouveaux blocs, commutation de style, modification du modèle, API WebFonts, et plus (Kinsta)

Créer un motif

• Introduction au mode bloc (édité sur le site)
• Vidéo d'introduction en mode bloc, 14 minutes (apprendre WordPress)
• Mode bloc (manuel de l'éditeur de blocs)
• Vous voulez donc créer un motif de bloc? (Blog WordPress)
• Comment créer et partager le mode de bloc de code bas dans WordPress (GoDaddy)

Amélioration du mode (github)

• Utiliser le bâtiment des modèles # 38529
• Modèle en tant qu'élément de section # 39281
• Ajouter: option pour sélectionner le mode lors de la création de pages. # 40034
• Mode de bloc utilisé pour la création de pages. # 38787
• Ajouté: Page Options de démarrage (modèles et modèles) # 39147

Articles de blog

• Mode Gutenberg: L'avenir de la construction de pages dans WordPress (Rich Tabor)
• Accélérer le bâtiment du site WordPress en utilisant le mode bloc (GoDaddy)
• Le mode bloc changera tout (WP Tavern)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!