Gutenberg Tout ce que vous devez savoir sur le dernier éditeur de WordPress
Gutenberg est un nouvel éditeur pour WordPress qui va totalement remplacer l'éditeur actuel alimenté par TinyMCE. Il s’agit d’un projet ambitieux qui modifiera sans doute WordPress de nombreuses manières et affectera aussi bien les utilisateurs finaux que les développeurs, en particulier ceux qui dépendent de l’éditeur pour travailler avec WordPress. Voici à quoi ça ressemble.
Gutenberg introduit également un nouveau paradigme dans WordPress appelé “Bloc”.
“Bloc” est le terme abstrait utilisé pour décrire unités de balisage qui sont composées à partir du contenu ou de la présentation d’une page Web. L’idée combine les concepts de ce que nous réalisons dans WordPress avec shortcodes, HTML personnalisé et découverte intégrée dans une seule API cohérente et expérience utilisateur.
Mise en place du projet
Sachant que Gutenberg est construit sur React, certains développeurs craignent que le barrière est trop élevé pour les développeurs débutants pour développer Gutenberg.
Configurer React.js peut prendre beaucoup de temps et être source de confusion si vous commencez à l'utiliser. Vous aurez besoin d'au moins un transformateur JSX, Babel. Selon votre code, vous aurez peut-être besoin de plugins Babel et d'un bundler comme Webpack, Rollup ou Parcel..
Heureusement, certaines personnes au sein de la communauté WordPress ont intensifié et essayons de rendre le développement de Gutenberg le plus facile possible pour tout le monde. Aujourd’hui, nous avons un outil qui générera un passe-partout Gutenberg afin nous pouvons commencer à écrire du code tout de suite au lieu de tromper avec les outils et les configurations.
Créer un bloc de gluten
le créer-guten-block est un projet initié par Ahmad Awais. C'est un kit d'outils de configuration zéro (# 0CJS) qui vous permettra de développer le bloc Gutenberg avec des piles prédéfinies modernes telles que React, Webpack, ESNext, Babel, ESLint et Sass. Suivez les instructions pour démarrer avec Create Guten Block.
Utilisation de ES5 (ECMAScript 5)
En utilisant tous ces outils pour créer un simple “Bonjour le monde” bloquer peut sembler trop. Si vous voulez garder vos piles minces, vous pouvez réellement développer un bloc de Gutenberg en utilisant un bon vieux logiciel ECMAScript 5 que vous connaissez peut-être déjà. Si tu as WP-CLI 1.5.0 installé sur votre ordinateur, vous pouvez simplement courir…
bloc d'échafaudage wp[--title = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--Obliger]</pre> <p>… à <strong>générer le bloc général du bloc Gutenberg à votre plugin ou à votre thème</strong>. Cette approche est plus judicieuse, en particulier pour les plug-ins existants et les thèmes que vous avez développés avant l'ère Gutenberg..</p> <p>Au lieu de créer un nouveau plugin pour gérer les blocs de Gutenberg, vous souhaiterez peut-être intégrer les blocs à vos plugins ou à vos thèmes. Et pour rendre ce tutoriel facile à suivre pour tout le monde, <strong>nous utiliserons ECMAScript 5 avec WP-CLI</strong>.</p> <h4>Enregistrement d'un nouveau bloc</h4> <p>Gutenberg est actuellement développé en tant que plugin et sera intégré à WordPress 5.0 dès que l'équipe le jugera prêt. Donc, pour le moment, vous devrez l’installer à partir du <strong>Plugins page en <code>wp-admin</code></strong>. Une fois que vous l'avez installé et activé, exécutez la commande suivante dans le terminal ou l'invite de commande si vous êtes sur un ordinateur Windows..</p> <pre name="code"> Série de blocs d'échafaudage wp --title = "Série HTML5" --theme</pre> <p>Cette commande générera un bloc pour le thème actuellement actif. Notre bloc comprendra les fichiers suivants:</p> <pre name="code"> . UNE¢Â ??  ?? â ??  ?? â ??  ?? série â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? block.js â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? editor.css â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? style.css â ??  ?? â ??  ?? â ??  ?? série.php </pre> <p>Chargeons le fichier principal de nos blocs dans le <code>functions.php</code> de notre thème:</p> <pre name="code"> if (function_exists ('register_block_type')) require get_template_directory (). '/blocks/series.php'; </pre> <p>Notez que nous incluons le chargement de fichier avec un conditionnel. Cela garantit <strong>compatibilité avec la version précédente de WordPress que notre bloc n'est chargé que lorsque Gutenberg est présent</strong>. Notre bloc devrait maintenant être disponible dans l'interface Gutenberg.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>C'est comme ça quand on insère le bloc.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>API Gutenberg</h3> <p>Gutenberg introduit deux ensembles d'API pour enregistrer un nouveau bloc. Si on regarde le <code>série.php</code>, nous trouverons le code suivant qui enregistre notre nouveau bloc. Ça aussi <strong>charge la feuille de style et les scripts Java sur le front-end et l'éditeur</strong>.</p> <pre name="code">register_block_type ('vingt-sept / série', array ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));</pre> <p>Comme nous pouvons le voir ci-dessus, notre bloc s'appelle <code>vingt-sept / série</code>, le nom du bloc doit être unique et namespaced pour éviter les collisions avec les autres blocs apportés par les autres plugins.</p> <p>en outre, <strong>Gutenberg fournit un ensemble de nouvelles API JavaScript permettant d’interagir avec le “Bloc” interface</strong> dans l'éditeur. Puisque l’API est assez abondante, nous allons nous concentrer sur certains détails que vous devriez connaître pour obtenir un bloc Gutenberg simple mais fonctionnel..</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Tout d'abord, nous examinerons <code>wp.blocks.registerBlockType</code>. Cette fonction est utilisée pour <strong>enregistrer un nouveau “Bloc” à l'éditeur de Gutenberg</strong>. Cela nécessite deux arguments. Le premier argument est le nom du bloc qui doit suivre le nom enregistré dans le répertoire. <code>register_block_type</code> fonctionner du côté de PHP. Le deuxième argument est un <strong>Objet définissant les propriétés du bloc</strong> comme le titre, la catégorie et quelques fonctions pour rendre l'interface Block.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), catégorie: 'widgets', mots clés: ['html'], edit: function (props) , enregistrer: function (props ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Cette fonction vous permet de créer l’élément au sein de la “Bloc” dans l'éditeur de post. le <code>wp.element.createElement</code> la fonction est fondamentalement une abstraction de la réaction <code>createElement ()</code> ainsi, il accepte le même ensemble d’arguments. Le premier argument prend le type de l’élément, par exemple un paragraphe, un <code>envergure</code>, ou un <code>div</code> comme indiqué ci-dessous:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>nous pouvons <strong>alias la fonction dans une variable</strong> donc c'est plus court pour écrire. Par exemple:</p> <pre name="code"> var el = wp.element.createElement; el ('div');</pre> <p>Si vous <strong>préfère utiliser la nouvelle syntaxe ES6</strong>, vous pouvez aussi le faire de cette façon:</p> <pre name="code"> const createElement: el = wp.element; el ('div');</pre> <p>Nous pouvons aussi <strong>ajouter les attributs de l'élément</strong> comme le <code>classe</code> nom ou <code>identifiant</code> sur le second paramètre comme suit:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p>le <code>div</code> que nous avons créé n'aurait pas de sens sans le contenu. nous pouvons <strong>ajoute le contenu sur l'argument du troisième paramètre</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Cet article fait partie de notre "Série de tutoriels HTML5 / CSS3" - dédiée pour vous aider à devenir un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série ');</pre> <h4><code>wp.components</code></h4> <p>le <code>wp.components</code> contient une collection de, comme leur nom l’indique, les composants de Gutenberg. Techniquement, ces composants sont des composants personnalisés de React qui incluent les boutons, Popover, Spinner, les info-bulles et bien d’autres. nous pouvons <strong>réutiliser ces composants dans notre propre bloc</strong>. Dans l'exemple suivant, nous ajoutons un composant de bouton.</p> <pre name="code"> var Button = wp.components.Button; el (Button, 'class': 'download-button',, 'Download');</pre> <h4>Les attributs</h4> <p>Les attributs sont le moyen de stocker les données dans notre bloc, ces données peuvent ressembler au contenu, aux couleurs, aux alignements, à l’URL, etc. Nous pouvons obtenir les attributs à partir des propriétés passées sur le <code>modifier()</code> fonction, comme suit:</p> <pre name="code"> edit: function (props) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', contenu); </pre> <p>Pour mettre à jour les attributs, nous utilisons le <code>setAttributes ()</code> une fonction. En règle générale, nous modifions le contenu de certaines actions, par exemple lorsqu'un clic est effectué sur un bouton, une entrée est renseignée, une option est sélectionnée, etc. Dans l'exemple suivant, nous l'utilisons pour ajouter un élément. <strong>se retirer</strong> contenu de notre bloc au cas où quelque chose d'inattendu se produirait <code>sérieContenu</code> Attribut.</p> <pre name="code"> edit: function (props) if (type of props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! Voici le contenu de repli.' ) var content = props.attributes.seriesContent; return [el ('div', 'classe': 'série-html5', 'id': 'série-html-post-id-001', contenu),]; </pre> <h4>Sauver le bloc</h4> <p>le <code>enregistrer()</code> fonction fonctionne de manière similaire à la <code>modifier()</code>, sauf qu'il définit le contenu de notre bloc à enregistrer dans la base de données post. L'enregistrement du contenu du bloc est assez simple, comme on peut le voir ci-dessous:</p> <pre name="code"> save: function (props) if (! props ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; return [el ('div', 'classe': 'série-html5', 'id': 'série-html-post-id-001', contenu),]; </pre> <h3>Et après?</h3> <p>Gutenberg changera l'écosystème WordPress pour le meilleur (ou éventuellement le pire). Il permet aux développeurs de <strong>adopter une nouvelle façon de développer des plugins et des thèmes WordPress</strong>. Gutenberg n'est qu'un début. Bientôt le “Bloc” paradigme sera étendu à d'autres domaines de WordPress tels que les API de paramètres et les widgets.</p> <p>Apprendre JavaScript profondément; c'est le seul moyen d'entrer dans Gutenberg et de rester pertinent pour l'avenir dans l'industrie WordPress. Si vous connaissez déjà les bases de JavaScript, les bizarreries, les fonctions, les outils, les biens et les inconvénients, je suis sûr que vous vous familiariserez avec Gutenberg..</p> <p>Comme mentionné, Gutenberg expose une abondance d'API, suffisamment pour faire presque n'importe quoi à votre bloc. Vous pouvez choisir de <strong>Codez votre Block avec un ancien et simple JavaScript, JavaScript avec la syntaxe ES6, React ou même Vue</strong>.</p> <h4>Idées et inspirations</h4> <p>J'ai créé un bloc Gutenberg très (très) simple que vous pouvez trouver dans le référentiel de notre compte Github. En outre, j'ai également mis en place un certain nombre de référentiels à partir desquels vous pouvez trouver l'inspiration pour construire un Block plus complexe..</p> <ul><li>Gutenblocks - Une collection de blocs de Mathieu Viet écrite en JavaScript avec la syntaxe ES5</li> <li>Jetpack Gutenblocks Project - une collection de blocs fournis dans Jetpack</li> <li>Liste d'exemples d'implémentation de Gutenberg, y compris avec Vue.js</li> </ul><h3>Référence supplémentaire</h3> <ul><li>Dépôt officiel Gutenberg</li> <li>Manuel de Gutenberg</li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html"><img src="//savtec.org/img/images_8/hack-an-ikea-lack-table-into-a-component-rack_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html">Pirater une table de sélection IKEA dans un rack de composants</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html"><img src="//savtec.org/img/images_8/hack-apart-an-old-keyboard-to-create-custom-control-interface_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html">Pirater un vieux clavier pour créer une interface de contrôle personnalisée</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html"><img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-ii_2.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html">Guide du gestionnaire de tâches de Windows 10 - Partie II</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Article suivant</div> <div class="post-img"><a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html"> <img src="//savtec.org/img/images_9/hack-a-10-flashlight-into-an-ultra-bright-premium-one_2.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">Hack une lampe de poche de 10 $ dans un Premium One ultra-lumineux</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Article précédent</div> <div class="post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html"> <img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-iii.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">Guide du gestionnaire de tâches Windows 10 - Partie III</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Informations utiles et conseils de développement Web. Programmation, conception web, CSS, HTML, JAVASCRIPT. Configurez et réinstallez WINDOWS. Création de sites et d'applications à partir de zéro. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>